Skip to content

Commit 8a11db1

Browse files
EhespEhesp
committed
feat: ui updates
1 parent bfb0209 commit 8a11db1

File tree

13 files changed

+185
-180
lines changed

13 files changed

+185
-180
lines changed

‎api/src/utils/github.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,12 @@ const getGitHubToken = (() => {
77
let index = 0;
88
const tokens = process.env.GITHUB_PAT ? process.env.GITHUB_PAT.split(',') : [];
99

10+
if (!tokens.length) {
11+
throw new Error(
12+
'Environment variable GITHUB_PAT is not defined or has no tokens or an invalid token.',
13+
);
14+
}
15+
1016
return function () {
1117
if (index >= tokens.length) index = 0;
1218
return tokens[index++];

‎website/app/components/DarkModeToggle.tsx

Lines changed: 37 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import React, { useContext, useState } from 'react';
1+
import { Switch } from '@headlessui/react';
2+
import cx from 'classnames';
23
import { useNoSSR } from '../hooks';
3-
import { MoonIcon, SunIcon, DesktopComputerIcon } from '@heroicons/react/solid';
4-
import { DarkModeContext } from '~/context';
4+
import { Moon, Sun } from './Icons';
55

66
export const STORAGE_KEY = 'docs.page:dark-mode';
77
export const DARK_MODE_CLASS_NAME = '';
@@ -43,80 +43,47 @@ function useDarkMode() {
4343
* is rendered on the server.
4444
*/
4545
export function DarkModeToggle() {
46-
const { setDarkModeValue } = useContext(DarkModeContext);
47-
4846
const ready = useNoSSR();
4947
const darkMode = useDarkMode();
5048

51-
// Null on SSR since we don't know the users setting
52-
const [mode, setMode] = useState<string | null>(null);
53-
54-
const container = (children?: React.ReactElement) => (
55-
<div className="relative flex h-8 w-full items-center rounded border bg-[#fbfbfb] px-2 hover:border-gray-300 hover:bg-transparent focus:outline-none dark:border-gray-700 dark:bg-transparent dark:text-white dark:hover:border-gray-600 md:w-28">
56-
{children}
57-
</div>
58-
);
59-
60-
function getSelectOption() {
61-
return !!mode
62-
? mode
63-
: localStorage[STORAGE_KEY]
64-
? localStorage[STORAGE_KEY] === 'dark'
65-
? 'dark'
66-
: 'light'
67-
: 'system';
68-
}
69-
7049
// Render an empty container during SSR
7150
if (!ready) {
72-
return container();
51+
return <div></div>;
7352
}
7453

75-
const option = getSelectOption();
54+
const stored = localStorage[STORAGE_KEY] || 'system';
55+
const checked: boolean =
56+
stored === 'system'
57+
? window.matchMedia('(prefers-color-scheme: dark)').matches
58+
: stored === 'dark';
7659

77-
return container(
78-
<>
79-
<div className="flex-1">
80-
{option === 'dark' && <MoonIcon width={14} />}
81-
{option === 'light' && <SunIcon width={14} />}
82-
{option === 'system' && <DesktopComputerIcon width={14} />}
83-
</div>
84-
<select
85-
role="button"
86-
className="absolute inset-0 flex w-full appearance-none items-center bg-transparent pl-8 pr-3 text-xs font-medium text-gray-600 hover:text-black focus:outline-none dark:text-gray-300 dark:hover:text-white"
87-
value={option}
88-
onChange={e => {
89-
const value = e.target.value;
90-
setMode(value);
91-
setDarkModeValue(value as 'light' | 'dark' | 'system');
92-
if (value === 'dark') {
93-
darkMode.enable();
94-
} else if (value === 'light') {
95-
darkMode.disable();
96-
} else {
97-
darkMode.auto();
98-
}
99-
}}
100-
>
101-
<option value="dark">Dark</option>
102-
<option value="light">Light</option>
103-
<option value="system">System</option>
104-
</select>
105-
<div>
106-
<svg
107-
viewBox="0 0 24 24"
108-
width="16"
109-
height="16"
110-
stroke="currentColor"
111-
strokeWidth="1.5"
112-
strokeLinecap="round"
113-
strokeLinejoin="round"
114-
fill="none"
115-
shapeRendering="geometricPrecision"
116-
>
117-
<path d="M17 8.517L12 3 7 8.517M7 15.48l5 5.517 5-5.517"></path>
118-
</svg>
119-
</div>
120-
</>,
60+
return (
61+
<Switch
62+
defaultChecked={checked}
63+
onChange={(value: boolean) => {
64+
value ? darkMode.enable() : darkMode.disable();
65+
}}
66+
className={cx(
67+
'relative inline-flex h-3 w-10 items-center rounded-full bg-[#E8E8E8] dark:bg-[#363636]',
68+
)}
69+
>
70+
{({ checked }) => (
71+
<>
72+
<span className="sr-only">Toggle dark mode</span>
73+
<span
74+
className={cx(
75+
'inline-flex h-6 w-6 transform items-center justify-center rounded-full border transition',
76+
{
77+
'translate-x-6 border-purple-800/50 bg-black text-purple-500': checked,
78+
'translate-x-0 border-gray-200 bg-white text-black': !checked,
79+
},
80+
)}
81+
>
82+
{checked && <Moon size={14} />}
83+
{!checked && <Sun size={14} />}
84+
</span>
85+
</>
86+
)}
87+
</Switch>
12188
);
12289
}

‎website/app/components/Documentation.tsx

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export default function Documentation({ data }: { data: DocumentationLoader }) {
4242
/>
4343
<div data-test-id={'documentation-provider'} className="max-w-8xl mx-auto">
4444
<div className="hidden lg:block">
45-
<div className="fixed inset-0 top-14 left-[max(0px,calc(50%-45rem))] w-64 overflow-x-auto py-10 px-8">
45+
<div className="fixed inset-0 top-16 left-[max(0px,calc(50%-45rem))] w-64 overflow-x-auto py-10 pl-4 pr-8">
4646
<Sidebar />
4747
</div>
4848
</div>
@@ -52,21 +52,17 @@ export default function Documentation({ data }: { data: DocumentationLoader }) {
5252
'items-center lg:mr-52 lg:pr-16': true,
5353
})}
5454
>
55-
<main
56-
className="prose dark:prose-invert prose-code:font-fira prose-code:font-medium
57-
max-w-none justify-center
58-
"
59-
>
55+
<main className="prose dark:prose-invert prose-code:font-fira prose-code:font-medium max-w-none justify-center pb-6">
6056
<TabsContext hash={hash}>
61-
<MDX components={components} />
57+
<MDX components={components as any} />
6258
</TabsContext>
63-
64-
<PreviousNext frontmatter={data.frontmatter} />
6559
</main>
60+
<PreviousNext frontmatter={data.frontmatter} />
61+
<div className="my-12 h-px bg-gray-100 dark:bg-gray-700" />
6662
<Footer />
6763
</div>
6864
{!!data.headings && (
69-
<aside className="fixed top-14 bottom-0 right-[max(0px,calc(50%-45rem))] hidden w-60 overflow-y-auto overflow-x-hidden whitespace-nowrap px-8 pt-10 lg:block">
65+
<aside className="fixed top-16 bottom-0 right-[max(0px,calc(50%-45rem))] hidden w-60 overflow-y-auto px-8 pt-10 lg:block">
7066
<ScrollSpy />
7167
</aside>
7268
)}

‎website/app/components/Footer.tsx

Lines changed: 11 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -16,37 +16,29 @@ export function Footer(props: FooterProps): JSX.Element {
1616
}
1717

1818
const editUrl = previewMode.enabled
19-
? ''
19+
? undefined
2020
: `https://github.com/${source.owner}/${source.repository}/edit/${
2121
source.type === 'branch' && source.ref !== 'HEAD' ? source.ref : baseBranch
2222
}/docs/${path || 'index'}.mdx`;
2323
return (
24-
<footer className="mt-16 border-t border-gray-900/10 py-8 px-4 lg:px-8">
24+
<footer className="pb-12">
2525
<div className="flex text-sm font-medium text-gray-500 dark:text-gray-300">
26-
<div className="flex-grow pt-2">
27-
Powered by{' '}
28-
<a
29-
href="https://docs.page"
30-
className="transition-colors hover:text-gray-900 dark:hover:text-gray-100"
31-
>
32-
docs.page
26+
<div className="flex-grow">
27+
<a href="https://docs.page" className="opacity-75 transition hover:opacity-100">
28+
Powered by docs.page
3329
</a>
3430
</div>
35-
{previewMode.enabled ? (
36-
''
37-
) : (
31+
{!!editUrl && (
3832
<a
3933
href={editUrl}
4034
target="_blank"
4135
rel="noreferrer"
42-
className="transition-colors hover:text-gray-900 dark:hover:text-gray-100"
36+
className="item-center flex gap-3 opacity-75 transition hover:opacity-100"
4337
>
44-
<div className="flex flex-row rounded border p-2 px-2 text-xs font-medium hover:border-gray-300 focus:outline-none dark:border-gray-700 dark:hover:border-gray-600">
45-
<div className="mr-2 flex">
46-
<PencilIcon width={14} />
47-
</div>
48-
<div>Edit this page</div>
49-
</div>
38+
<span className="relative top-[2px] ">
39+
<PencilIcon width={14} />
40+
</span>
41+
<span>Edit this page</span>
5042
</a>
5143
)}
5244
</div>

‎website/app/components/Header.tsx

Lines changed: 5 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ export type HeaderProps = {
1313
onSidebarToggle: OnSidebarToggle;
1414
};
1515

16-
// TODO link
1716
export function Header(props: HeaderProps) {
1817
const { owner, repo, config, ref, source } = useDocumentationContext();
1918
const base = useBaseUrl();
@@ -23,13 +22,13 @@ export function Header(props: HeaderProps) {
2322
const previewMode = usePreviewMode();
2423
return (
2524
<header className="sticky top-0 z-40 w-screen flex-none bg-white px-4 transition-colors duration-500 dark:bg-zinc-900 md:bg-white/60 md:backdrop-blur md:dark:bg-zinc-900/60 lg:z-50 lg:border-b lg:border-gray-900/10 dark:lg:border-gray-400/10">
26-
<div className="max-w-8xl mx-auto flex h-14 items-center px-4 lg:px-8">
25+
<div className="max-w-8xl mx-auto flex h-16 items-center">
2726
<div className="flex-shrink-0">
2827
<DocsLink to={base} className="flex items-center font-bold">
2928
{!!config.logo && (
3029
<>
3130
<img
32-
className={cx('mr-3 inline-block h-6 w-6 dark:hidden', {
31+
className={cx('mr-3 inline-block h-[30px] dark:hidden', {
3332
'dark:hidden': !!config.logoDark,
3433
})}
3534
src={logoLight}
@@ -38,9 +37,9 @@ export function Header(props: HeaderProps) {
3837
</>
3938
)}
4039
{!!config.logoDark && (
41-
<img className="mr-3 hidden h-6 w-6 dark:inline-block" src={logoDark} alt="Logo" />
40+
<img className="mr-3 hidden h-[30px] dark:inline-block" src={logoDark} alt="Logo" />
4241
)}
43-
<span>{config.name || `${owner}/${repo}`}</span>
42+
{!config.logo && !config.logoDark && <span>{config.name || `${owner}/${repo}`}</span>}
4443
</DocsLink>
4544
</div>
4645
{previewMode.enabled && (
@@ -50,44 +49,6 @@ export function Header(props: HeaderProps) {
5049
)}
5150
<div className="flex flex-grow justify-end">
5251
<ul className="flex space-x-4">
53-
{!!config.twitter && (
54-
<li>
55-
<a
56-
href={`https://twitter.com/${config.twitter}`}
57-
className="text-blue-500 transition-colors duration-100 hover:text-blue-400"
58-
>
59-
<svg
60-
xmlns="http://www.w3.org/2000/svg"
61-
className="h-8 w-8"
62-
viewBox="0 0 24 24"
63-
fill="currentColor"
64-
>
65-
<path
66-
fill="currentColor"
67-
d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"
68-
/>
69-
</svg>
70-
</a>
71-
</li>
72-
)}
73-
{previewMode.enabled ? (
74-
''
75-
) : (
76-
<li>
77-
<a
78-
href={`https://github.com/${owner}/${repo}`}
79-
className="text-gray-700 transition-colors duration-100 hover:text-black dark:text-gray-300 dark:hover:text-white"
80-
>
81-
<svg className="h-8 w-8" fill="currentColor" viewBox="0 0 24 24">
82-
<path
83-
fillRule="evenodd"
84-
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
85-
clipRule="evenodd"
86-
/>
87-
</svg>
88-
</a>
89-
</li>
90-
)}
9152
{previewMode.enabled && (
9253
<button
9354
onClick={previewMode.onSelect}
@@ -110,7 +71,7 @@ export function Header(props: HeaderProps) {
11071
/>
11172
</li>
11273
)}
113-
<li className="hidden md:flex">
74+
<li className="hidden h-8 items-center md:flex">
11475
<DarkModeToggle />
11576
</li>
11677
<li className="flex items-center justify-center">

‎website/app/components/Icons.tsx

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -215,6 +215,42 @@ export function ChevronDoubleUp({ size, className, style }: IconProps): JSX.Elem
215215
);
216216
}
217217

218+
export function ChevronLeft({ size, className, style }: IconProps): JSX.Element {
219+
return (
220+
<svg
221+
width={size}
222+
height={size}
223+
className={className}
224+
style={style}
225+
xmlns="http://www.w3.org/2000/svg"
226+
fill="none"
227+
viewBox="0 0 24 24"
228+
strokeWidth={1.5}
229+
stroke="currentColor"
230+
>
231+
<path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
232+
</svg>
233+
);
234+
}
235+
236+
export function ChevronRight({ size, className, style }: IconProps): JSX.Element {
237+
return (
238+
<svg
239+
width={size}
240+
height={size}
241+
className={className}
242+
style={style}
243+
xmlns="http://www.w3.org/2000/svg"
244+
fill="none"
245+
viewBox="0 0 24 24"
246+
strokeWidth={1.5}
247+
stroke="currentColor"
248+
>
249+
<path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
250+
</svg>
251+
);
252+
}
253+
218254
export function Menu({ size, className, style }: IconProps): JSX.Element {
219255
return (
220256
<svg

0 commit comments

Comments
 (0)