From feb88afb8c784e0db65be96073a1b0064e36128c Mon Sep 17 00:00:00 2001 From: Julius Marminge Date: Mon, 29 Aug 2022 18:00:08 +0200 Subject: [PATCH] fix: improve docs example (#4355) * fix: improve docs example * final touches * chore: prettier * lockfile * ci? * downgrade types node * fresh lockfile * lockfile and npmrc * remove debug log * Merge branch 'main' into docs-template-ts * merging lockfiles suck * update lockfile * satisfy linter --- .npmrc | 1 + examples/docs/package.json | 3 + .../src/components/Footer/AvatarList.astro | 38 +- .../docs/src/components/Footer/Footer.astro | 9 +- examples/docs/src/components/HeadSEO.astro | 30 +- .../src/components/Header/AstroLogo.astro | 12 +- .../docs/src/components/Header/Header.astro | 21 +- .../src/components/Header/LanguageSelect.tsx | 14 +- .../docs/src/components/Header/Search.tsx | 32 +- .../src/components/Header/SidebarToggle.tsx | 4 +- .../src/components/Header/SkipToContent.astro | 4 + .../components/LeftSidebar/LeftSidebar.astro | 52 +- .../components/PageContent/PageContent.astro | 12 +- .../components/RightSidebar/MoreMenu.astro | 9 +- .../RightSidebar/RightSidebar.astro | 11 +- .../RightSidebar/TableOfContents.tsx | 19 +- .../RightSidebar/ThemeToggleButton.tsx | 5 +- examples/docs/src/config.ts | 57 +- examples/docs/src/languages.ts | 8 +- examples/docs/src/layouts/MainLayout.astro | 50 +- examples/docs/tsconfig.json | 6 +- pnpm-lock.yaml | 1560 +++++++++-------- 22 files changed, 1067 insertions(+), 890 deletions(-) diff --git a/.npmrc b/.npmrc index 492d20357..d00b700b8 100644 --- a/.npmrc +++ b/.npmrc @@ -2,6 +2,7 @@ prefer-workspace-packages=true link-workspace-packages=true save-workspace-protocol=false # This prevents the examples to have the `workspace:` prefix +auto-install-peers=false shamefully-hoist=true # TODO: We would like to move to individual opt-in hoisting, but Astro was not originally diff --git a/examples/docs/package.json b/examples/docs/package.json index f217b2dfc..e67966a5b 100644 --- a/examples/docs/package.json +++ b/examples/docs/package.json @@ -5,6 +5,7 @@ "scripts": { "dev": "astro dev", "start": "astro dev", + "check": "astro check && tsc", "build": "astro build", "preview": "astro preview", "astro": "astro" @@ -20,6 +21,8 @@ }, "devDependencies": { "@astrojs/preact": "^1.0.2", + "@types/node": "^18.0.0", + "@types/react-dom": "^18.0.0", "@astrojs/react": "^1.1.0", "astro": "^1.1.1" } diff --git a/examples/docs/src/components/Footer/AvatarList.astro b/examples/docs/src/components/Footer/AvatarList.astro index e5880a03a..5926936d6 100644 --- a/examples/docs/src/components/Footer/AvatarList.astro +++ b/examples/docs/src/components/Footer/AvatarList.astro @@ -1,12 +1,23 @@ --- // fetch all commits for just this page's path -const path = 'docs/' + Astro.props.path; -const url = `https://api.github.com/repos/withastro/astro/commits?path=${path}`; -const commitsURL = `https://github.com/withastro/astro/commits/main/${path}`; +type Props = { + path: string; +}; +const { path } = Astro.props as Props; +const resolvedPath = `examples/docs/${path}`; +const url = `https://api.github.com/repos/withastro/astro/commits?path=${resolvedPath}`; +const commitsURL = `https://github.com/withastro/astro/commits/main/${resolvedPath}`; -async function getCommits(url) { +type Commit = { + author: { + id: string; + login: string; + }; +}; + +async function getCommits(url: string) { try { - const token = import.meta.env.SNOWPACK_PUBLIC_GITHUB_TOKEN; + const token = import.meta.env.SNOWPACK_PUBLIC_GITHUB_TOKEN ?? 'hello'; if (!token) { throw new Error( 'Cannot find "SNOWPACK_PUBLIC_GITHUB_TOKEN" used for escaping rate-limiting.' @@ -32,27 +43,24 @@ async function getCommits(url) { ); } - return data; + return data as Commit[]; } catch (e) { console.warn(`[error] /src/components/AvatarList.astro - ${e?.message ?? e}`); - return new Array(); + ${(e as any)?.message ?? e}`); + return [] as Commit[]; } } -function removeDups(arr) { - if (!arr) { - return new Array(); - } - let map = new Map(); +function removeDups(arr: Commit[]) { + const map = new Map(); for (let item of arr) { - let author = item.author; + const author = item.author; // Deduplicate based on author.id map.set(author.id, { login: author.login, id: author.id }); } - return Array.from(map.values()); + return [...map.values()]; } const data = await getCommits(url); diff --git a/examples/docs/src/components/Footer/Footer.astro b/examples/docs/src/components/Footer/Footer.astro index d13f832e5..1ec756b86 100644 --- a/examples/docs/src/components/Footer/Footer.astro +++ b/examples/docs/src/components/Footer/Footer.astro @@ -1,16 +1,19 @@ --- import AvatarList from './AvatarList.astro'; -const { path } = Astro.props; +type Props = { + path: string; +}; +const { path } = Astro.props as Props; ---
- +
diff --git a/examples/docs/src/components/HeadSEO.astro b/examples/docs/src/components/HeadSEO.astro index 75d17bea1..c40e04327 100644 --- a/examples/docs/src/components/HeadSEO.astro +++ b/examples/docs/src/components/HeadSEO.astro @@ -1,35 +1,32 @@ --- -import { SITE, OPEN_GRAPH } from '../config'; +import { SITE, OPEN_GRAPH, Frontmatter } from '../config'; + export interface Props { - frontmatter: any; - site: any; - canonicalURL: URL | string; + frontmatter: Frontmatter; + canonicalUrl: URL; } -const canonicalURL = new URL(Astro.url.pathname, Astro.site); -const { frontmatter = {} } = Astro.props; -const formattedContentTitle = frontmatter.title - ? `${frontmatter.title} 🚀 ${SITE.title}` - : SITE.title; -const imageSrc = frontmatter?.image?.src ?? OPEN_GRAPH.image.src; +const { frontmatter, canonicalUrl } = Astro.props as Props; +const formattedContentTitle = `${frontmatter.title} 🚀 ${SITE.title}`; +const imageSrc = frontmatter.image?.src ?? OPEN_GRAPH.image.src; const canonicalImageSrc = new URL(imageSrc, Astro.site); -const imageAlt = frontmatter?.image?.alt ?? OPEN_GRAPH.image.alt; +const imageAlt = frontmatter.image?.alt ?? OPEN_GRAPH.image.alt; --- - + - + @@ -37,10 +34,7 @@ const imageAlt = frontmatter?.image?.alt ?? OPEN_GRAPH.image.alt; - + diff --git a/examples/docs/src/components/Header/AstroLogo.astro b/examples/docs/src/components/Header/AstroLogo.astro index 840cbf139..6c8b5b9ce 100644 --- a/examples/docs/src/components/Header/AstroLogo.astro +++ b/examples/docs/src/components/Header/AstroLogo.astro @@ -1,5 +1,8 @@ --- -const { size } = Astro.props; +type Props = { + size: number; +}; +const { size } = Astro.props as Props; --- + > + + > + diff --git a/examples/docs/src/components/Header/Header.astro b/examples/docs/src/components/Header/Header.astro index 2e66300b4..bada732a6 100644 --- a/examples/docs/src/components/Header/Header.astro +++ b/examples/docs/src/components/Header/Header.astro @@ -7,8 +7,12 @@ import SidebarToggle from './SidebarToggle'; import LanguageSelect from './LanguageSelect'; import Search from './Search'; -const { currentPage } = Astro.props; -const lang = currentPage && getLanguageFromURL(currentPage); +type Props = { + currentPage: string; +}; + +const { currentPage } = Astro.props as Props; +const lang = getLanguageFromURL(currentPage); ---
@@ -25,11 +29,9 @@ const lang = currentPage && getLanguageFromURL(currentPage);
{KNOWN_LANGUAGE_CODES.length > 1 && } - {CONFIG.ALGOLIA && ( -
- -
- )} +
+ +
@@ -101,14 +103,17 @@ const lang = currentPage && getLanguageFromURL(currentPage); position: static; padding: 2rem 0rem; } + .logo { width: auto; margin: 0; z-index: 0; } + .logo h1 { display: initial; } + .menu-toggle { display: none; } @@ -129,9 +134,11 @@ const lang = currentPage && getLanguageFromURL(currentPage); display: flex; max-width: 200px; } + :global(.search-item > *) { flex-grow: 1; } + @media (min-width: 50em) { .search-item { max-width: 400px; diff --git a/examples/docs/src/components/Header/LanguageSelect.tsx b/examples/docs/src/components/Header/LanguageSelect.tsx index a895cc7cc..3c0244e0d 100644 --- a/examples/docs/src/components/Header/LanguageSelect.tsx +++ b/examples/docs/src/components/Header/LanguageSelect.tsx @@ -1,11 +1,11 @@ -import type { FunctionalComponent } from 'preact'; -import { h } from 'preact'; +/** @jsxImportSource react */ +import type { FunctionComponent } from 'react'; import './LanguageSelect.css'; import { KNOWN_LANGUAGES, langPathRegex } from '../../languages'; -const LanguageSelect: FunctionalComponent<{ lang: string }> = ({ lang }) => { +const LanguageSelect: FunctionComponent<{ lang: string }> = ({ lang }) => { return ( -
+