Skip to content

Commit 64e8004

Browse files
EhespEhesp
committed
-
1 parent 722a020 commit 64e8004

File tree

8 files changed

+141
-2
lines changed

8 files changed

+141
-2
lines changed

‎website-v3/src/components/Markdown.tsx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@ import context from 'src/context';
44
import Link from './Link';
55
import Image from './mdx/Image';
66
import YouTube from './mdx/YouTube';
7+
import Vimeo from './mdx/Vimeo';
78
import Table from './mdx/Table';
9+
import Heading from './mdx/Heading';
810

911
const Markdown: React.FC = () => {
1012
const code = context.get().code;
@@ -18,8 +20,19 @@ const Markdown: React.FC = () => {
1820
img: props => <Image {...props} />,
1921
table: props => <Table {...props} />,
2022
code: props => <code {...props} className="before:content-[''] after:content-['']" />,
23+
h1: props => <Heading {...props} type="h1" />,
24+
h2: props => <Heading {...props} type="h2" />,
25+
h3: props => <Heading {...props} type="h3" />,
26+
h4: props => <Heading {...props} type="h4" />,
27+
h5: props => <Heading {...props} type="h5" />,
28+
h6: props => <Heading {...props} type="h6" />,
29+
Heading,
30+
Tweet: props => <div>TODO</div>,
31+
Tabs: props => <div>TODO</div>,
32+
TabItem: props => <div>TODO</div>,
2133
Image,
2234
YouTube,
35+
Vimeo,
2336
}}
2437
/>
2538
</main>

‎website-v3/src/components/Theme.astro

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const dark = color.darken(0.2).hex().toString();
1919
---
2020

2121
<style is:global>
22-
.dark {
22+
html[data-theme='dark'] {
2323
color-scheme: dark;
2424
}
2525
</style>

‎website-v3/src/components/ThemeToggle.astro

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
---
2+
import context from 'src/context';
3+
import { MoonIcon, SunIcon } from './icons';
4+
5+
const { owner, repository, domain } = context.get();
6+
---
7+
8+
<button data-theme-toggle class="relative w-6 h-6">
9+
<span data-theme-type="dark" class="hidden"><MoonIcon /></span>
10+
<span data-theme-type="light" class="hidden"><SunIcon /></span>
11+
</button>
12+
<script is:inline define:vars={{ owner, repository, domain }}>
13+
const html = document.documentElement;
14+
const isDark = () => html.getAttribute('data-theme') === 'dark';
15+
16+
const toggle = document.querySelector('button[data-theme-toggle]');
17+
const light = toggle.querySelector('span[data-theme-type="light"]');
18+
const dark = toggle.querySelector('span[data-theme-type="dark"]');
19+
20+
function toggleElements() {
21+
if (isDark()) {
22+
light.style.display = 'none';
23+
dark.style.display = 'inline';
24+
} else {
25+
dark.style.display = 'none';
26+
light.style.display = 'inline';
27+
}
28+
}
29+
30+
toggle.addEventListener('click', () => {
31+
const theme = isDark() ? 'light' : 'dark';
32+
// Update the theme attribute on the <html> element
33+
theme === 'light'
34+
? html.removeAttribute('data-theme')
35+
: html.setAttribute('data-theme', 'dark');
36+
// Toggle the icons
37+
toggleElements();
38+
// Update the theme via server and return a cookie
39+
fetch('/api/theme', {
40+
method: 'POST',
41+
headers: {
42+
'Content-Type': 'application/json',
43+
},
44+
body: JSON.stringify({
45+
owner,
46+
repository,
47+
domain,
48+
theme,
49+
}),
50+
});
51+
});
52+
53+
toggleElements();
54+
</script>

‎website-v3/src/components/icons.tsx

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,3 +13,35 @@ export const MagnifyingGlassIcon = () => (
1313
/>
1414
</svg>
1515
);
16+
17+
export const SunIcon = () => (
18+
<svg
19+
xmlns="http://www.w3.org/2000/svg"
20+
fill="none"
21+
viewBox="0 0 24 24"
22+
strokeWidth={1.5}
23+
stroke="currentColor"
24+
>
25+
<path
26+
strokeLinecap="round"
27+
strokeLinejoin="round"
28+
d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"
29+
/>
30+
</svg>
31+
);
32+
33+
export const MoonIcon = () => (
34+
<svg
35+
xmlns="http://www.w3.org/2000/svg"
36+
fill="none"
37+
viewBox="0 0 24 24"
38+
strokeWidth={1.5}
39+
stroke="currentColor"
40+
>
41+
<path
42+
strokeLinecap="round"
43+
strokeLinejoin="round"
44+
d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z"
45+
/>
46+
</svg>
47+
);

‎website-v3/src/components/mdx/Heading.tsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { createElement } from 'react';
2+
3+
interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
4+
id?: string;
5+
type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
6+
}
7+
8+
const Heading: React.FC<HeadingProps> = props => {
9+
const el = createElement(props.type, {
10+
...props,
11+
});
12+
13+
return el;
14+
};
15+
16+
export default Heading;

‎website-v3/src/components/mdx/Vimeo.tsx

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
type VimeoProps = {
2+
video: string;
3+
};
4+
5+
function Vimeo({ video }: VimeoProps) {
6+
if (!video) {
7+
return <div />;
8+
}
9+
10+
return (
11+
<iframe
12+
className="aspect-video w-full overflow-hidden rounded"
13+
src={`https://player.vimeo.com/video/${video}`}
14+
allowFullScreen
15+
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
16+
/>
17+
);
18+
}
19+
20+
export default Vimeo;

‎website-v3/src/layouts/Header.astro

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
import Link from '@components/Link';
33
import Search from '@components/Search.astro';
4+
import ThemeToggle from '@components/ThemeToggle.astro';
45
import context from 'src/context';
56
import { getImagePath } from 'src/utils';
67
@@ -40,7 +41,9 @@ const logoDark = getImagePath(config.logoDark);
4041
>
4142
{!!config.docsearch && <Search {...config.docsearch} />}
4243
</div>
43-
<div class="flex-1 flex items-center justify-end">Menu</div>
44+
<div class="flex-1 flex items-center justify-end">
45+
<ThemeToggle />
46+
</div>
4447
</div>
4548
</div>
4649
</header>

‎website-v3/src/layouts/Navigation.astro

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ const headings = context.get().headings || [];
1010
<a
1111
href={`#${heading.id}`}
1212
class="block break-words py-1 font-medium opacity-75 transition hover:opacity-100"
13+
class:list={{}}
1314
>
1415
{heading.title}
1516
</a>

0 commit comments

Comments
 (0)