diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs index b3e06ce66..fe4142447 100644 --- a/docs/astro.config.mjs +++ b/docs/astro.config.mjs @@ -2,5 +2,9 @@ export default { buildOptions: { site: 'https://docs.astro.build/', }, - renderers: ['@astrojs/renderer-preact', '@astrojs/renderer-react'], + renderers: [ + // Our main renderer for frontend components + '@astrojs/renderer-preact', + // Needed for Algolia search component + '@astrojs/renderer-react'], }; diff --git a/docs/public/index.css b/docs/public/index.css index 5f382e7d0..abd3b5e98 100644 --- a/docs/public/index.css +++ b/docs/public/index.css @@ -183,14 +183,15 @@ strong { } /* Supporting Content */ +code { + font-family: var(--font-mono); + font-size: 0.85em; +} code:not([class*='language']) { --border-radius: 3px; --padding-block: 0.2rem; - --padding-inline: 0.33rem; - - font-family: var(--font-mono); - font-size: 0.85em; + --padding-inline: 0.4rem; color: var(--theme-code-inline-text); background-color: var(--theme-code-inline-bg); padding: var(--padding-block) var(--padding-inline); @@ -207,6 +208,10 @@ pre > code:not([class*='language']) { color: inherit; } +pre > code { + font-size: 1em; +} + table, pre { position: relative; @@ -299,56 +304,6 @@ button { background-color: var(--theme-bg); } -#theme-toggle { - display: inline-flex; - align-items: center; - gap: 0.25em; - padding: 0.33em 0.67em; - border-radius: 99em; - background-color: var(--theme-code-inline-bg); -} - -#theme-toggle > label:focus-within { - outline: 2px solid transparent; - box-shadow: 0 0 0 0.08em var(--theme-accent), 0 0 0 0.12em white; -} - -#theme-toggle > label { - color: var(--theme-code-inline-text); - position: relative; - display: flex; - align-items: center; - justify-content: center; - opacity: 0.5; -} - -#theme-toggle .checked { - color: var(--theme-accent); - opacity: 1; -} - -input[name='theme-toggle'] { - position: absolute; - opacity: 0; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: -1; -} - -.sidebar-nav { - width: 100%; - position: sticky; - top: 0; -} -.sidebar-nav-inner { - height: 100%; - padding: 0; - padding-top: var(--doc-padding); - overflow: auto; -} - h2.heading { font-size: 1rem; font-weight: 700; @@ -397,13 +352,6 @@ h2.heading { text-decoration: none; } -.edit-on-github { - text-decoration: none; - font: inherit; - color: inherit; - font-size: 1rem; -} - /* Screenreader Only Text */ .sr-only { position: absolute; @@ -429,24 +377,6 @@ h2.heading { white-space: normal; } -.skiplink, -.skiplink:focus, -.skiplink:focus-visible { - position: absolute; - padding: 0.25em; - font-size: larger; - top: 0.5rem; - left: 0.5rem; - z-index: 9; - display: block; - background-color: var(--theme-bg); - color: var(--theme-text-accent); - border-radius: 0.25em; - outline: var(--theme-text-accent) solid 1px; - outline-offset: 0; -} -/* Screenreader Only Text - End */ - :target { scroll-margin: calc(var(--theme-sidebar-offset, 5rem) + 2rem) 0 2rem; } diff --git a/docs/reference/api-reference.md b/docs/reference/api-reference.md index 9b0d82c9f..08580bcf1 100644 --- a/docs/reference/api-reference.md +++ b/docs/reference/api-reference.md @@ -1,5 +1,5 @@ --- -layout: ~/layouts/Main.astro +layout: ~/layouts/MainLayout.astro title: API Reference --- diff --git a/docs/src/components/DocSidebar/DocSidebar.tsx b/docs/src/components/DocSidebar/DocSidebar.tsx deleted file mode 100644 index ebf3dbf0d..000000000 --- a/docs/src/components/DocSidebar/DocSidebar.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import type { FunctionalComponent } from 'preact'; -import { h } from 'preact'; -import More from './More'; -import TableOfContents from './TableOfContents'; - -export const DocSidebar: FunctionalComponent<{ - headers: any[]; - editHref: string; -}> = ({ headers = [], editHref }) => { - return ( - - ); -}; - -export default DocSidebar; -export { default as More } from './More'; -export { default as TableOfContents } from './TableOfContents'; diff --git a/docs/src/components/DocSidebar/EditOnGithub.tsx b/docs/src/components/DocSidebar/EditOnGithub.tsx deleted file mode 100644 index e6e757f5f..000000000 --- a/docs/src/components/DocSidebar/EditOnGithub.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import type { FunctionalComponent } from 'preact'; -import { h } from 'preact'; - -const EditOnGithub: FunctionalComponent<{ href: string }> = ({ href }) => { - return ( - - - Edit this page - - ); -}; - -export default EditOnGithub; diff --git a/docs/src/components/DocSidebar/More.tsx b/docs/src/components/DocSidebar/More.tsx deleted file mode 100644 index 6b0c5145c..000000000 --- a/docs/src/components/DocSidebar/More.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import type { FunctionalComponent } from 'preact'; -import { h, Fragment } from 'preact'; -import EditOnGithub from './EditOnGithub'; -import ThemeToggle from '../ThemeToggle'; - -const More: FunctionalComponent<{ editHref: string }> = ({ editHref }) => { - return ( - <> -

More

- -
- -
- - ); -}; - -export default More; diff --git a/docs/src/components/AvatarList.astro b/docs/src/components/Footer/AvatarList.astro similarity index 100% rename from docs/src/components/AvatarList.astro rename to docs/src/components/Footer/AvatarList.astro diff --git a/docs/src/components/ArticleFooter.astro b/docs/src/components/Footer/Footer.astro similarity index 100% rename from docs/src/components/ArticleFooter.astro rename to docs/src/components/Footer/Footer.astro diff --git a/docs/src/components/HeadCommon.astro b/docs/src/components/HeadCommon.astro new file mode 100644 index 000000000..3a58af07b --- /dev/null +++ b/docs/src/components/HeadCommon.astro @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/src/components/MetaData.astro b/docs/src/components/HeadSEO.astro similarity index 69% rename from docs/src/components/MetaData.astro rename to docs/src/components/HeadSEO.astro index ce5a9ff77..5553eb2d0 100644 --- a/docs/src/components/MetaData.astro +++ b/docs/src/components/HeadSEO.astro @@ -1,38 +1,36 @@ --- +import {SITE, OPEN_GRAPH} from '../config.ts'; export interface Props { content: any, site: any, canonicalURL: URL | string, }; -const { content = {}, site, canonicalURL } = Astro.props; -const formattedContentTitle = content.title ? `${content.title} 🚀 ${site.title}` : site.title; -const imageSrc = content?.image?.src ?? site.image.src; +const { content = {}, canonicalURL } = Astro.props; +const formattedContentTitle = content.title ? `${content.title} 🚀 ${SITE.title}` : SITE.title; +const imageSrc = content?.image?.src ?? OPEN_GRAPH.image.src; const canonicalImageSrc = new URL(imageSrc, Astro.site); -const imageAlt = content?.image?.alt ?? site.image.alt; +const imageAlt = content?.image?.alt ?? OPEN_GRAPH.image.alt; --- + + - + - - - + + - - + - + - - - +
+ + \ No newline at end of file diff --git a/docs/src/components/Header/LanguageSelect.css b/docs/src/components/Header/LanguageSelect.css new file mode 100644 index 000000000..f353c18c2 --- /dev/null +++ b/docs/src/components/Header/LanguageSelect.css @@ -0,0 +1,48 @@ + +.language-select { + flex-grow: 1; + width: 48px; + box-sizing: border-box; + margin: 0; + padding: 0.33em 0.5em; + overflow: visible; + font-weight: 500; + font-size: 1rem; + font-family: inherit; + line-height: inherit; + background-color: transparent; + border-color: var(--theme-text-lighter); + color: var(--theme-text-light); + border-style: solid; + border-width: 1px; + border-radius: 0.25rem; + outline: 0; + cursor: pointer; + transition-timing-function: ease-out; + transition-duration: 0.2s; + transition-property: border-color, color; + -webkit-font-smoothing: antialiased; + padding-left: 30px; + padding-right: 1rem; +} +.language-select-wrapper .language-select:hover, +.language-select-wrapper .language-select:focus { + color: var(--theme-text); + border-color: var(--theme-text-light); +} +.language-select-wrapper { + color: var(--theme-text-light); + position: relative; +} +.language-select-wrapper > svg { + position: absolute; + top: 7px; + left: 10px; + z-index: -1; +} + +@media (min-width: 50em) { + .language-select { + width: 100%; + } +} \ No newline at end of file diff --git a/docs/src/components/Header/LanguageSelect.tsx b/docs/src/components/Header/LanguageSelect.tsx new file mode 100644 index 000000000..62849e867 --- /dev/null +++ b/docs/src/components/Header/LanguageSelect.tsx @@ -0,0 +1,44 @@ +import type { FunctionalComponent } from 'preact'; +import { h } from 'preact'; +import './LanguageSelect.css'; + +const SelectLanguage: FunctionalComponent<{}> = ({}) => { + let defaultValue = undefined; + if (!import.meta.env.SSR) { + const oldPathname = window.location.pathname; + const oldPathnameParts = oldPathname.split('/'); + if (/[a-z]{2}/.test(oldPathnameParts[1])) { + defaultValue = oldPathnameParts[1]; + } + } + + return ( +
+ + +
+ ); +}; + +export default SelectLanguage; diff --git a/docs/src/components/Search.css b/docs/src/components/Header/Search.css similarity index 70% rename from docs/src/components/Search.css rename to docs/src/components/Header/Search.css index 330a02d1d..47ec15acf 100644 --- a/docs/src/components/Search.css +++ b/docs/src/components/Header/Search.css @@ -1,32 +1,8 @@ +/** Style Algolia */ :root { --docsearch-primary-color: var(--theme-accent); --docsearch-logo-color: var(--theme-text); } - -.search { - display: none; - position: relative; - z-index: 10; - flex-grow: 1; - grid-area: search; - padding-left: 0.75rem; - padding-right: 0.7rem; - display: flex; - width: 400px; - max-width: 400px; -} -.search > * { - flex-grow: 1; -} - -.search > :global(.algolia-autocomplete) { - width: 100%; -} - -:global(body.is-nav-open) .search { - display: flex; -} - .search-input { flex-grow: 1; box-sizing: border-box; @@ -48,22 +24,21 @@ cursor: pointer; transition-timing-function: ease-out; transition-duration: 0.2s; - transition-property: border-color, background-color; + transition-property: border-color, color; -webkit-font-smoothing: antialiased; } -.no-underline { - text-decoration: none; -} -.search-input:hover { +.search-input:hover, +.search-input:focus { color: var(--theme-text); + border-color: var(--theme-text-light); } -.search-input:hover::placeholder { +.search-input:hover::placeholder, +.search-input:focus::placeholder { color: var(--theme-text-light); } .search-input::placeholder { color: var(--theme-text-light); } - .search-hint { position: absolute; top: 7px; @@ -74,7 +49,6 @@ align-items: center; justify-content: center; letter-spacing: 0.125em; - color: var(--theme-text-light); font-size: 13px; font-family: var(--font-mono); pointer-events: none; @@ -90,4 +64,4 @@ .search-hint { display: flex; } -} +} \ No newline at end of file diff --git a/docs/src/components/Search.tsx b/docs/src/components/Header/Search.tsx similarity index 97% rename from docs/src/components/Search.tsx rename to docs/src/components/Header/Search.tsx index af04829e9..a1684e49f 100644 --- a/docs/src/components/Search.tsx +++ b/docs/src/components/Header/Search.tsx @@ -5,7 +5,7 @@ import { DocSearchModal, useDocSearchKeyboardEvents } from '@docsearch/react'; import '@docsearch/css//dist/style.css'; import './Search.css'; -export function Search() { +export default function Search() { const [isOpen, setIsOpen] = useState(false); const searchButtonRef = useRef(); const [initialQuery, setInitialQuery] = useState(null); @@ -72,7 +72,6 @@ export function Search() { // work better on localhost, preview URLS. const a = document.createElement('a'); a.href = item.url; - console.log(a.hash); const hash = a.hash === '#overview' ? '' : a.hash; return { ...item, diff --git a/docs/src/components/MenuToggle.tsx b/docs/src/components/Header/SidebarToggle.tsx similarity index 100% rename from docs/src/components/MenuToggle.tsx rename to docs/src/components/Header/SidebarToggle.tsx diff --git a/docs/src/components/Header/SkipToContent.astro b/docs/src/components/Header/SkipToContent.astro new file mode 100644 index 000000000..6df3a72ed --- /dev/null +++ b/docs/src/components/Header/SkipToContent.astro @@ -0,0 +1,21 @@ + + diff --git a/docs/src/components/SiteSidebar.astro b/docs/src/components/LeftSidebar/LeftSidebar.astro similarity index 94% rename from docs/src/components/SiteSidebar.astro rename to docs/src/components/LeftSidebar/LeftSidebar.astro index 382b122f4..f44762dba 100644 --- a/docs/src/components/SiteSidebar.astro +++ b/docs/src/components/LeftSidebar/LeftSidebar.astro @@ -1,11 +1,11 @@ --- -import { sidebar } from '../config.ts'; +import { SIDEBAR } from '../../config.ts'; const {currentPage} = Astro.props; --- -