Skip to content

Commit baf391b

Browse files
HazATHazAT
committed
Changelog Responsiveness + Font
1 parent 3a16834 commit baf391b

File tree

10 files changed

+53
-43
lines changed

10 files changed

+53
-43
lines changed

‎app/changelog/[slug]/page.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,9 @@ export default async function ChangelogEntry({params}) {
3131
return (
3232
<Layout>
3333
<Navbar />
34-
<div className="w-full mx-auto grid grid-cols-12 bg-gray-200">
35-
<div className="col-span-2" />
36-
<div className="col-span-8">
34+
<div className="relative w-full mx-auto grid grid-cols-12 bg-gray-200">
35+
<div className="hero-top absolute -top-1 w-full h-10 bg-white" />
36+
<div className="col-span-12 md:col-start-3 md:col-span-8">
3737
<div className="max-w-3xl mx-auto px-4 p-4 sm:px-6 lg:px-8">
3838
<div className="flex justify-between items-center space-x-4 py-3">
3939
<Link href="/changelog/">
@@ -74,7 +74,6 @@ export default async function ChangelogEntry({params}) {
7474
</Article>
7575
</div>
7676
</div>
77-
<div className="col-span-2" />
7877
</div>
7978
</Layout>
8079
);

‎app/changelog/globals.css‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');
2-
31
@tailwind base;
42
@tailwind components;
53
@tailwind utilities;

‎app/changelog/layout.tsx‎

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,29 @@
11
import './globals.css';
22
import 'prism-sentry/index.css';
33

4+
import localFont from '@next/font/local';
5+
6+
const rubik = localFont({
7+
src: [
8+
{
9+
path: '../../src/fonts/rubik-regular.woff2',
10+
weight: 'normal',
11+
style: 'normal',
12+
},
13+
{
14+
path: '../../src/fonts/rubik-medium.woff2',
15+
weight: '500',
16+
style: 'normal',
17+
},
18+
{
19+
path: '../../src/fonts/rubik-italic.woff2',
20+
weight: 'normal',
21+
style: 'italic',
22+
},
23+
],
24+
variable: '--font-rubik',
25+
});
26+
427
export default function ChangelogLayout({children}: {children: React.ReactNode}) {
5-
return <div className="bg-gray-100">{children}</div>;
28+
return <div className={`${rubik.variable} font-sans bg-gray-100`}>{children}</div>;
629
}

‎app/changelog/page.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -34,20 +34,20 @@ export default async function ChangelogList({searchParams}) {
3434
<Layout>
3535
<Navbar />
3636
<div className="w-full mx-auto h-96 relative bg-darkPurple">
37-
<div className="hero-top absolute top-0 w-full h-10 bg-white" />
38-
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid grid-cols-12 items-center">
37+
<div className="hero-top absolute -top-1 w-full h-10 bg-white" />
38+
<div className="relative w-full lg:max-w-7xl mx-auto px-4 lg:px-8 grid grid-cols-12 items-center">
3939
<Image
40-
className="justify-self-center col-span-10 z-20"
40+
className="justify-self-center col-span-10 z-20 hidden lg:block"
4141
src="/changelog/assets/hero.png"
4242
alt="Sentry Changelog"
4343
height={400}
4444
width={450}
4545
/>
46-
<div className="absolute w-96 right-1/4 -bottom-10">
47-
<h1 className="justify-self-center text-white font-bold text-4xl text-left">
46+
<div className="relative col-span-12 mt-32 lg:absolute lg:w-96 lg:right-1/4 lg:-bottom-10">
47+
<h1 className="justify-self-center text-white font-bold text-4xl text-center lg:text-left">
4848
Sentry Changelog
4949
</h1>
50-
<h2 className="justify-self-center z-20 text-gold text-1xl text-left">
50+
<h2 className="justify-self-center z-20 text-gold text-1xl text-center lg:text-left">
5151
Stay up to date on everything big and small, from product updates to SDK
5252
changes with the Sentry Changelog.
5353
</h2>

‎next.config.js‎

Lines changed: 0 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,6 @@
11
const createMDX = require('@next/mdx');
22
const remarkPrism = require('remark-prism');
33

4-
const cspHeader = `
5-
default-src 'self';
6-
font-src 'self' https://fonts.gstatic.com/;
7-
style-src 'self' https://fonts.googleapis.com/ 'unsafe-inline';
8-
`;
9-
104
/** @type {import('next').NextConfig} */
115
const nextConfig = {
126
pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
@@ -16,21 +10,6 @@ const nextConfig = {
1610
experimental: {
1711
serverComponentsExternalPackages: ['rehype-preset-minify'],
1812
},
19-
20-
// eslint-disable-next-line require-await
21-
async headers() {
22-
return [
23-
{
24-
source: '/(.*)',
25-
headers: [
26-
{
27-
key: 'Content-Security-Policy',
28-
value: cspHeader.replace(/\n/g, ''),
29-
},
30-
],
31-
},
32-
];
33-
},
3413
};
3514

3615
const withMDX = createMDX({

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"@emotion/styled": "^11.0.0",
1515
"@mdx-js/loader": "^3.0.0",
1616
"@mdx-js/react": "^3.0.0",
17+
"@next/font": "^14.1.0",
1718
"@next/mdx": "^14.0.1",
1819
"@sentry-internal/global-search": "^0.5.10",
1920
"@sentry/nextjs": "^7.89.0",

‎src/components/changelog/list.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export default function ListLayout({
7272

7373
return (
7474
<div className="w-full mx-auto grid grid-cols-12 bg-gray-200">
75-
<div className="col-span-2 pl-5 pt-10">
75+
<div className="hidden md:block md:col-span-2 pl-5 pt-10">
7676
<h3 className="text-2xl text-primary font-semibold mb-2">Categories:</h3>
7777
<div className="flex flex-wrap gap-1 py-1">
7878
{Array.isArray(allPostTags) &&
@@ -94,8 +94,8 @@ export default function ListLayout({
9494
})}
9595
</div>
9696
</div>
97-
<div className="col-span-8">
98-
<div className="max-w-3xl mx-auto px-4 pb-4 sm:px-6 lg:px-8">
97+
<div className="col-span-12 md:col-span-8">
98+
<div className="max-w-3xl mx-auto px-4 pb-4 sm:px-6 md:px-8">
9999
<div className="flex justify-between items-center py-6 space-x-4">
100100
<input
101101
aria-label="Search announcements"
@@ -166,7 +166,7 @@ export default function ListLayout({
166166
)}
167167
</div>
168168
</div>
169-
<div className="col-span-2 pl-5 pt-10">
169+
<div className="hidden md:block md:col-span-2 pl-5 pt-10">
170170
<h3 className="text-1xl text-primary font-semibold mb-2">Jump to:</h3>
171171
<ul>
172172
{monthsCopy.map((month, index) => (

‎src/components/changelog/pagination.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,11 @@ export default function Pagination({totalPages, currentPage}) {
1111
}
1212

1313
return (
14-
<div className="flex items-center justify-center gap-4">
14+
<div className="flex items-center justify-center gap-0 md:gap-4">
1515
<ConditionalLink href={`?page=${currentPage - 1}`} condition={prevPage}>
1616
<button
1717
disabled={!prevPage}
18-
className="flex items-center gap-2 px-6 py-3 font-sans text-xs font-bold text-center text-gray-900 uppercase align-middle transition-all rounded-lg select-none hover:bg-gray-900/10 active:bg-gray-900/20 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
18+
className="hidden md:flex items-center gap-2 px-6 py-3 font-sans text-xs font-bold text-center text-gray-900 uppercase align-middle transition-all rounded-lg select-none hover:bg-gray-900/10 active:bg-gray-900/20 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
1919
type="button"
2020
>
2121
<svg
@@ -36,7 +36,7 @@ export default function Pagination({totalPages, currentPage}) {
3636
Previous
3737
</button>
3838
</ConditionalLink>
39-
<div className="flex items-center gap-2">
39+
<div className="flex items-center gap-0 md:gap-2">
4040
{pages.map(page => (
4141
<Link key={page} href={`?page=${page}`}>
4242
<button
@@ -53,7 +53,7 @@ export default function Pagination({totalPages, currentPage}) {
5353
<ConditionalLink href={`?page=${currentPage + 1}`} condition={nextPage}>
5454
<button
5555
disabled={!nextPage}
56-
className="flex items-center gap-2 px-6 py-3 font-sans text-xs font-bold text-center text-gray-900 uppercase align-middle transition-all rounded-lg select-none hover:bg-gray-900/10 active:bg-gray-900/20 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
56+
className="hidden md:flex items-center gap-2 px-6 py-3 font-sans text-xs font-bold text-center text-gray-900 uppercase align-middle transition-all rounded-lg select-none hover:bg-gray-900/10 active:bg-gray-900/20 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
5757
type="button"
5858
>
5959
Next

‎tailwind.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ module.exports = {
1010
extend: {
1111
fontFamily: {
1212
sans: [
13-
'Rubik',
13+
'var(--font-rubik)',
1414
'-apple-system',
1515
'BlinkMacSystemFont',
1616
'Segoe UI',

‎yarn.lock‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1464,6 +1464,15 @@ __metadata:
14641464
languageName: node
14651465
linkType: hard
14661466

1467+
"@next/font@npm:^14.1.0":
1468+
version: 14.1.0
1469+
resolution: "@next/font@npm:14.1.0"
1470+
peerDependencies:
1471+
next: "*"
1472+
checksum: 7e924d0e822bd6c48e636a9f8b07458077dcff506c6ddaffea1eb6f88bf1b6a06dec0e62bb03b32ec08252637568be66b7a8c738d0e25893821b6f517f9f8001
1473+
languageName: node
1474+
linkType: hard
1475+
14671476
"@next/mdx@npm:^14.0.1":
14681477
version: 14.0.3
14691478
resolution: "@next/mdx@npm:14.0.3"
@@ -9879,6 +9888,7 @@ __metadata:
98799888
"@emotion/styled": "npm:^11.0.0"
98809889
"@mdx-js/loader": "npm:^3.0.0"
98819890
"@mdx-js/react": "npm:^3.0.0"
9891+
"@next/font": "npm:^14.1.0"
98829892
"@next/mdx": "npm:^14.0.1"
98839893
"@sentry-internal/global-search": "npm:^0.5.10"
98849894
"@sentry/nextjs": "npm:^7.89.0"

0 commit comments

Comments
 (0)