Skip to content

Commit afc2a7f

Browse files
EhespEhesp
committed
-
1 parent a7b054e commit afc2a7f

File tree

17 files changed

+881
-78
lines changed

17 files changed

+881
-78
lines changed

‎website-v3/astro.config.mjs

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { defineConfig } from 'astro/config';
22
import tailwind from '@astrojs/tailwind';
33
import node from '@astrojs/node';
4+
import react from '@astrojs/react';
45

56
// https://astro.build/config
67

@@ -12,5 +13,5 @@ export default defineConfig({
1213
adapter: node({
1314
mode: 'standalone',
1415
}),
15-
integrations: [tailwind()],
16+
integrations: [tailwind(), react()],
1617
});

‎website-v3/package-lock.json

Lines changed: 482 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎website-v3/package.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,21 @@
1414
"@astrojs/node": "^3.1.0",
1515
"@astrojs/tailwind": "^2.1.3",
1616
"astro": "^1.6.14",
17+
"classnames": "^2.3.2",
1718
"color": "^4.2.3",
1819
"lodash.get": "^4.4.2",
20+
"mdx-bundler": "^9.0.1",
1921
"nanostores": "^0.7.1",
2022
"querystring": "^0.2.1",
2123
"tailwindcss": "^3.2.4",
2224
"zod": "^3.19.1"
2325
},
2426
"devDependencies": {
27+
"@astrojs/react": "^1.2.2",
28+
"@tailwindcss/typography": "^0.5.8",
29+
"@types/classnames": "^2.3.1",
30+
"react": "^18.2.0",
31+
"react-dom": "^18.2.0",
2532
"typescript": "^4.9.4"
2633
}
2734
}

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

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import cx from 'classnames';
2+
import context from 'src/context';
3+
import { isExternalLink, removeTrailingSlash } from 'src/utils';
4+
5+
interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
6+
href: string;
7+
activeClassName?: string;
8+
}
9+
10+
const Link: React.FC<LinkProps> = props => {
11+
const { owner, repository, ref, domain, relativePath } = context.get();
12+
13+
if (isExternalLink(props.href)) {
14+
return (
15+
<a {...props} target="_blank" rel="noreferrer nofollow">
16+
{props.children}
17+
</a>
18+
);
19+
}
20+
21+
let to = `/${owner}/${repository}`;
22+
23+
if (ref && ref !== 'HEAD') {
24+
to += `~${encodeURIComponent(ref)}`;
25+
}
26+
27+
// TODO: Preview mode
28+
29+
if (domain && import.meta.env.PROD) {
30+
let href = `//${domain}${props.href}`;
31+
32+
if (ref && ref !== 'HEAD') {
33+
href = `//${domain}/~${encodeURIComponent(ref)}${props.href}`;
34+
}
35+
36+
// TODO is active
37+
38+
return (
39+
<a
40+
{...props}
41+
className={cx(props.className, {
42+
[props.activeClassName || '']: props.href === relativePath,
43+
})}
44+
href={href}
45+
/>
46+
);
47+
}
48+
console.log(props.href, relativePath);
49+
return (
50+
<a
51+
{...props}
52+
className={cx(props.className, {
53+
[props.activeClassName || '']: props.href === relativePath,
54+
})}
55+
href={removeTrailingSlash(`${to}${props.href}`)}
56+
/>
57+
);
58+
};
59+
60+
export default Link;

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
import context from 'src/context';
3+
import { getImagePath } from 'src/utils';
4+
5+
const { config } = context.get();
6+
7+
// TODO experimental code hike
8+
---
9+
10+
<link
11+
slot="head"
12+
rel="shortcut icon"
13+
href={getImagePath(config.favicon || 'https://docs.page/favicon.ico?v=2')}
14+
/>
15+
{
16+
config.experimentalMath && (
17+
<link
18+
slot="head"
19+
rel="stylesheet"
20+
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css"
21+
/>
22+
)
23+
}
24+
<!-- TODO: {config.experimentalCodehike && (
25+
<link slot="head" data-testid="codehike-styles" rel="stylesheet" href={codeHikeStyles} />
26+
)} -->

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { getMDXComponent } from 'mdx-bundler/client';
2+
import context from 'src/context';
3+
4+
import Link from './Link';
5+
import Image from './mdx/Image';
6+
import YouTube from './mdx/YouTube';
7+
import Table from './mdx/Table';
8+
9+
const Markdown: React.FC = () => {
10+
const code = context.get().code;
11+
const MDX = getMDXComponent(code);
12+
13+
return (
14+
<main className="prose prose-slate dark:prose-invert prose-p:leading-loose prose-a:text-white prose-a:font-bold prose-a:underline-offset-[5px] prose-a:decoration-docs-theme prose-a:decoration-2 hover:prose-a:decoration-4 prose-headings:mb-[1rem] max-w-none">
15+
<MDX
16+
components={{
17+
a: props => <Link {...props} href={props.href || '/'} />,
18+
img: props => <Image {...props} />,
19+
table: props => <Table {...props} />,
20+
code: props => <code {...props} className="before:content-[''] after:content-['']" />,
21+
Image,
22+
YouTube,
23+
}}
24+
/>
25+
</main>
26+
);
27+
};
28+
29+
export default Markdown;

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

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
---
2+
import context from 'src/context';
3+
4+
const { domain, config } = context.get();
5+
---
6+
7+
{
8+
config.googleAnalytics && (
9+
<script async src={`https://www.googletagmanager.com/gtag/js?id=${config.googleAnalytics}`} />
10+
)
11+
}
12+
{
13+
config.googleAnalytics && (
14+
<script
15+
slot="head"
16+
type="text/javascript"
17+
data-value={config.googleAnalytics}
18+
set:html={`
19+
window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments)}
20+
gtag('js', new Date()); gtag('config', document.currentScript.getAttribute('data-value'));
21+
`}
22+
/>
23+
)
24+
}
25+
{
26+
config.googleTagManager && (
27+
<script
28+
slot="head"
29+
type="text/javascript"
30+
data-value={config.googleTagManager}
31+
set:html={`
32+
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
33+
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
34+
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
35+
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
36+
})(window,document,'script','dataLayer',document.currentScript.getAttribute('data-value'));
37+
`}
38+
/>
39+
)
40+
}
41+
{
42+
config.plausibleAnalytics && domain && (
43+
<script slot="head" defer data-domain={domain} src="https://plausible.io/js/plausible.js" />
44+
)
45+
}

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

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,17 +12,20 @@ try {
1212
} catch {
1313
color = Color(Astro.props.fallback);
1414
}
15+
16+
const base = color.hex().toString();
17+
const light = color.lighten(0.2).hex().toString();
18+
const dark = color.darken(0.2).hex().toString();
1519
---
1620

17-
<script
18-
is:inline
19-
data-base={color.hex().toString()}
20-
data-light={color.lighten(0.2).hex().toString()}
21-
data-dark={color.darken(0.2).hex().toString()}
22-
>
21+
<style is:global>
22+
.dark {
23+
color-scheme: dark;
24+
}
25+
</style>
26+
<script define:vars={{ base, light, dark }}>
2327
const root = document.documentElement;
24-
root.style.setProperty('--theme-color', document.currentScript.getAttribute('data-base'));
25-
root.style.setProperty('--theme-color-light', document.currentScript.getAttribute('data-light'));
26-
root.style.setProperty('--theme-color-dark', document.currentScript.getAttribute('data-dark'));
27-
root.style.setProperty('--docsearch-primary-color', document.currentScript.getAttribute('data-base'));
28+
root.style.setProperty('--theme-color', base);
29+
root.style.setProperty('--theme-color-dark', light);
30+
root.style.setProperty('--theme-color-light', dark);
2831
</script>

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { getImagePath } from 'src/utils';
2+
3+
interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
4+
// TODO: zoom
5+
zoom?: boolean;
6+
}
7+
8+
const Image: React.FC<ImageProps> = props => {
9+
const src = getImagePath(props.src ?? '');
10+
11+
return (
12+
<img
13+
{...props}
14+
src={src}
15+
loading="lazy"
16+
style={{
17+
width: props.width ? parseInt(props.width.toString()) : 'inherit',
18+
height: props.height ? parseInt(props.height.toString()) : 'inherit',
19+
}}
20+
/>
21+
);
22+
};
23+
24+
export default Image;

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
const Table: React.FC<React.TableHTMLAttributes<HTMLTableElement>> = props => {
2+
return (
3+
<div className="[& img]:inline overflow-scroll sm:overflow-visible">
4+
<table {...props} />
5+
</div>
6+
);
7+
};
8+
9+
export default Table;

0 commit comments

Comments
 (0)