Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: website components #8600

Merged
merged 34 commits into from
Sep 6, 2022
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
b216dc3
refactor: website components rewrite
iCrawl Sep 3, 2022
adcee1b
refactor: only build main and latest tag
iCrawl Sep 3, 2022
06edbab
refactor: accessibility
iCrawl Sep 3, 2022
bd18e01
feat: og title for specific pages
iCrawl Sep 3, 2022
29b53da
fix: file tracing
iCrawl Sep 3, 2022
53fcfe6
fix: include shiki theme
iCrawl Sep 3, 2022
9763454
refactor: package and version selection
iCrawl Sep 3, 2022
9ac5252
refactor: extract common components
iCrawl Sep 3, 2022
7628e25
refactor: only bundle whats needed from shiki
iCrawl Sep 3, 2022
4460c57
fix: general styling
iCrawl Sep 3, 2022
4a4a712
refactor: docs page
iCrawl Sep 3, 2022
3da8cd7
build: fix build
iCrawl Sep 3, 2022
11ae47d
fix: open handler for navbar
iCrawl Sep 3, 2022
29a43cc
fix: sidebars
iCrawl Sep 3, 2022
6ecd32e
refactor: back to unocss
iCrawl Sep 4, 2022
ce6a951
refactor: switch light theme of syntax highlighter
iCrawl Sep 4, 2022
fadfc7a
feat: prose for md
iCrawl Sep 4, 2022
d89b718
fix: several dark mode issues
iCrawl Sep 4, 2022
1bedead
feat: prettier plugin for tailwind css sorting
iCrawl Sep 4, 2022
fb35348
refactor: sidebar
iCrawl Sep 5, 2022
0d93971
fix: hover sidebar dark mode
iCrawl Sep 5, 2022
24b558f
refactor: table of contents sidebar
iCrawl Sep 5, 2022
fd8dd87
fix: scrollbar madness
iCrawl Sep 5, 2022
c75efe5
refactor: main content
iCrawl Sep 5, 2022
f8f193e
fix: various spacing issues
iCrawl Sep 5, 2022
ec4c57f
chore: build correct amount over versions only
iCrawl Sep 5, 2022
e746457
refactor: leftover mantine components
iCrawl Sep 6, 2022
76c9c54
fix: scrolling on header on mobile
iCrawl Sep 6, 2022
649ca3a
feat: redirect for stable
iCrawl Sep 6, 2022
870038e
refactor: finalize mantine removal
iCrawl Sep 6, 2022
fb903ac
fix: scrollbars
iCrawl Sep 6, 2022
0549604
refactor: package and version selector
iCrawl Sep 6, 2022
81f4a42
refactor: scrollbar for nav
iCrawl Sep 6, 2022
54d9155
fix: dont lock body
iCrawl Sep 6, 2022
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
feat: og title for specific pages
  • Loading branch information
iCrawl committed Sep 4, 2022
commit bd18e01685a1e8501082628162582b6826037573
13 changes: 4 additions & 9 deletions packages/website/src/pages/_document.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import { createGetInitialProps } from '@mantine/next';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { getCssText } from '../../stitches.config';
import { DESCRIPTION } from '~/util/meta';

const getInitialProps = createGetInitialProps();

Expand All @@ -22,16 +23,10 @@ export default class _Document extends Document {
<meta name="application-name" content="discord.js" />
<meta name="msapplication-TileColor" content="#090a16" />
<meta name="theme-color" content="#1a1b1e" />
<meta
name="description"
content="discord.js is a powerful node.js module that allows you to interact with the Discord API very easily. It takes a much more object-oriented approach than most other JS Discord libraries, making your bot's code significantly tidier and easier to comprehend."
/>
<meta key="description" name="description" content={DESCRIPTION} />
<meta property="og:site_name" content="discord.js" />
<meta property="og:title" content="discord.js" />
<meta
name="og:description"
content="discord.js is a powerful node.js module that allows you to interact with the Discord API very easily. It takes a much more object-oriented approach than most other JS Discord libraries, making your bot's code significantly tidier and easier to comprehend."
/>
<meta key="og_title" property="og:title" content="discord.js" />
<meta key="og_description" name="og:description" content={DESCRIPTION} />
<meta property="og:image" content="https://discordjs.dev/open-graph.png" />
<meta name="twitter:card" content="summary_large_image" />

Expand Down
4 changes: 4 additions & 0 deletions packages/website/src/pages/docs/[...slug].tsx
Original file line number Diff line number Diff line change
Expand Up @@ -232,6 +232,9 @@ export default function SlugPage(props: Partial<SidebarLayoutProps & { error?: s
// }, []);

const name = `discord.js${props.data?.member?.name ? ` | ${props.data.member.name}` : ''}`;
const ogTitle = `${props.packageName ?? 'discord.js'}${
props.data?.member?.name ? ` | ${props.data.member.name}` : ''
}`;

if (router.isFallback) {
return (
Expand All @@ -253,6 +256,7 @@ export default function SlugPage(props: Partial<SidebarLayoutProps & { error?: s
<>
<Head>
<title key="title">{name}</title>
<meta key="og_title" property="og:title" content={ogTitle} />
</Head>
{member(props.data.member)}
</>
Expand Down
2 changes: 2 additions & 0 deletions packages/website/src/util/meta.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export const DESCRIPTION =
"discord.js is a powerful node.js module that allows you to interact with the Discord API very easily. It takes a much more object-oriented approach than most other JS Discord libraries, making your bot's code significantly tidier and easier to comprehend.";