diff options
Diffstat (limited to 'examples/docs/src/components')
10 files changed, 74 insertions, 42 deletions
diff --git a/examples/docs/src/components/Footer/AvatarList.astro b/examples/docs/src/components/Footer/AvatarList.astro index c57ee2eb1..6f3ff1a7f 100644 --- a/examples/docs/src/components/Footer/AvatarList.astro +++ b/examples/docs/src/components/Footer/AvatarList.astro @@ -1,6 +1,6 @@ --- // fetch all commits for just this page's path -const path = 'docs/' + Astro.props.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}`; @@ -8,16 +8,18 @@ async function getCommits(url) { try { const token = import.meta.env.SNOWPACK_PUBLIC_GITHUB_TOKEN; if (!token) { - throw new Error('Cannot find "SNOWPACK_PUBLIC_GITHUB_TOKEN" used for escaping rate-limiting.'); + throw new Error( + 'Cannot find "SNOWPACK_PUBLIC_GITHUB_TOKEN" used for escaping rate-limiting.' + ); } - const auth = `Basic ${Buffer.from(token, 'binary').toString('base64')}`; + const auth = `Basic ${Buffer.from(token, "binary").toString("base64")}`; const res = await fetch(url, { - method: 'GET', + method: "GET", headers: { Authorization: auth, - 'User-Agent': 'astro-docs/1.0', + "User-Agent": "astro-docs/1.0", }, }); @@ -65,14 +67,22 @@ const additionalContributors = unique.length - recentContributors.length; // lis {recentContributors.map((item) => ( <li> <a href={`https://github.com/${item.login}`}> - <img alt={`Contributor ${item.login}`} title={`Contributor ${item.login}`} width="64" height="64" src={`https://avatars.githubusercontent.com/u/${item.id}`} /> + <img + alt={`Contributor ${item.login}`} + title={`Contributor ${item.login}`} + width="64" + height="64" + src={`https://avatars.githubusercontent.com/u/${item.id}`} + /> </a> </li> ))} </ul> {additionalContributors > 0 && ( <span> - <a href={commitsURL}>{`and ${additionalContributors} additional contributor${additionalContributors > 1 ? 's' : ''}.`}</a> + <a href={commitsURL}>{`and ${additionalContributors} additional contributor${ + additionalContributors > 1 ? "s" : "" + }.`}</a> </span> )} {unique.length === 0 && <a href={commitsURL}>Contributors</a>} diff --git a/examples/docs/src/components/Footer/Footer.astro b/examples/docs/src/components/Footer/Footer.astro index d13f832e5..ab0634976 100644 --- a/examples/docs/src/components/Footer/Footer.astro +++ b/examples/docs/src/components/Footer/Footer.astro @@ -1,5 +1,5 @@ --- -import AvatarList from './AvatarList.astro'; +import AvatarList from "./AvatarList.astro"; const { path } = Astro.props; --- diff --git a/examples/docs/src/components/HeadCommon.astro b/examples/docs/src/components/HeadCommon.astro index b6a74cdc6..bc3a3955a 100644 --- a/examples/docs/src/components/HeadCommon.astro +++ b/examples/docs/src/components/HeadCommon.astro @@ -1,6 +1,6 @@ --- -import '../styles/theme.css'; -import '../styles/index.css'; +import "../styles/theme.css"; +import "../styles/index.css"; --- <!-- Global Metadata --> @@ -15,19 +15,24 @@ import '../styles/index.css'; <!-- Preload Fonts --> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> -<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital@0;1&display=swap" rel="stylesheet" /> +<link + href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital@0;1&display=swap" + rel="stylesheet" +/> <!-- Scrollable a11y code helper --> -<script src="/make-scrollable-code-focusable.js" is:inline></script> +<script src="/make-scrollable-code-focusable.js" is:inline> + +</script> <!-- This is intentionally inlined to avoid FOUC --> <script is:inline> const root = document.documentElement; - const theme = localStorage.getItem('theme'); - if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) { - root.classList.add('theme-dark'); + const theme = localStorage.getItem("theme"); + if (theme === "dark" || (!theme && window.matchMedia("(prefers-color-scheme: dark)").matches)) { + root.classList.add("theme-dark"); } else { - root.classList.remove('theme-dark'); + root.classList.remove("theme-dark"); } </script> diff --git a/examples/docs/src/components/HeadSEO.astro b/examples/docs/src/components/HeadSEO.astro index 003872bc9..5d1a2bcb5 100644 --- a/examples/docs/src/components/HeadSEO.astro +++ b/examples/docs/src/components/HeadSEO.astro @@ -1,5 +1,5 @@ --- -import { SITE, OPEN_GRAPH } from '../config.ts'; +import { SITE, OPEN_GRAPH } from "../config.ts"; export interface Props { content: any; site: any; @@ -22,14 +22,21 @@ const imageAlt = content?.image?.alt ?? OPEN_GRAPH.image.alt; <meta property="og:locale" content={content.ogLocale ?? SITE.defaultLanguage} /> <meta property="og:image" content={canonicalImageSrc} /> <meta property="og:image:alt" content={imageAlt} /> -<meta name="description" property="og:description" content={content.description ? content.description : SITE.description} /> +<meta + name="description" + property="og:description" + content={content.description ? content.description : SITE.description} +/> <meta property="og:site_name" content={SITE.title} /> <!-- Twitter Tags --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content={OPEN_GRAPH.twitter} /> <meta name="twitter:title" content={formattedContentTitle} /> -<meta name="twitter:description" content={content.description ? content.description : SITE.description} /> +<meta + name="twitter:description" + content={content.description ? content.description : SITE.description} +/> <meta name="twitter:image" content={canonicalImageSrc} /> <meta name="twitter:image:alt" content={imageAlt} /> diff --git a/examples/docs/src/components/Header/AstroLogo.astro b/examples/docs/src/components/Header/AstroLogo.astro index 7d6891dcb..840cbf139 100644 --- a/examples/docs/src/components/Header/AstroLogo.astro +++ b/examples/docs/src/components/Header/AstroLogo.astro @@ -2,7 +2,14 @@ const { size } = Astro.props; --- -<svg class="logo" width={size} height={size} viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg"> +<svg + class="logo" + width={size} + height={size} + viewBox="0 0 256 256" + fill="none" + xmlns="http://www.w3.org/2000/svg" +> <style> #flame { fill: var(--theme-text-accent); diff --git a/examples/docs/src/components/Header/Header.astro b/examples/docs/src/components/Header/Header.astro index ca787dc63..0e493b25d 100644 --- a/examples/docs/src/components/Header/Header.astro +++ b/examples/docs/src/components/Header/Header.astro @@ -1,11 +1,11 @@ --- -import { getLanguageFromURL, KNOWN_LANGUAGE_CODES } from '../../languages.ts'; -import * as CONFIG from '../../config.ts'; -import AstroLogo from './AstroLogo.astro'; -import SkipToContent from './SkipToContent.astro'; -import SidebarToggle from './SidebarToggle.tsx'; -import LanguageSelect from './LanguageSelect.tsx'; -import Search from './Search.tsx'; +import { getLanguageFromURL, KNOWN_LANGUAGE_CODES } from "../../languages.ts"; +import * as CONFIG from "../../config.ts"; +import AstroLogo from "./AstroLogo.astro"; +import SkipToContent from "./SkipToContent.astro"; +import SidebarToggle from "./SidebarToggle.tsx"; +import LanguageSelect from "./LanguageSelect.tsx"; +import Search from "./Search.tsx"; const { currentPage } = Astro.props; const lang = currentPage && getLanguageFromURL(currentPage); diff --git a/examples/docs/src/components/LeftSidebar/LeftSidebar.astro b/examples/docs/src/components/LeftSidebar/LeftSidebar.astro index 107423385..68c70de2a 100644 --- a/examples/docs/src/components/LeftSidebar/LeftSidebar.astro +++ b/examples/docs/src/components/LeftSidebar/LeftSidebar.astro @@ -1,6 +1,6 @@ --- -import { getLanguageFromURL } from '../../languages.ts'; -import { SIDEBAR } from '../../config.ts'; +import { getLanguageFromURL } from "../../languages.ts"; +import { SIDEBAR } from "../../config.ts"; const { currentPage } = Astro.props; const currentPageMatch = currentPage.slice(1); const langCode = getLanguageFromURL(currentPage); @@ -31,7 +31,10 @@ const sidebarSections = SIDEBAR[langCode].reduce((col, item, i) => { <ul> {section.children.map((child) => ( <li class="nav-link"> - <a href={`${Astro.site.pathname}${child.link}`} aria-current={`${currentPageMatch === child.link ? 'page' : 'false'}`}> + <a + href={`${Astro.site.pathname}${child.link}`} + aria-current={`${currentPageMatch === child.link ? "page" : "false"}`} + > {child.text} </a> </li> @@ -44,10 +47,10 @@ const sidebarSections = SIDEBAR[langCode].reduce((col, item, i) => { </nav> <script is:inline> - window.addEventListener('DOMContentLoaded', (event) => { + window.addEventListener("DOMContentLoaded", (event) => { var target = document.querySelector('[aria-current="page"]'); if (target && target.offsetTop > window.innerHeight - 100) { - document.querySelector('.nav-groups').scrollTop = target.offsetTop; + document.querySelector(".nav-groups").scrollTop = target.offsetTop; } }); </script> @@ -100,13 +103,13 @@ const sidebarSections = SIDEBAR[langCode].reduce((col, item, i) => { background-color: var(--theme-bg-hover); } - .nav-link a[aria-current='page'] { + .nav-link a[aria-current="page"] { color: var(--theme-text-accent); background-color: var(--theme-bg-accent); font-weight: 600; } - :global(:root.theme-dark) .nav-link a[aria-current='page'] { + :global(:root.theme-dark) .nav-link a[aria-current="page"] { color: hsla(var(--color-base-white), 100%, 1); } diff --git a/examples/docs/src/components/PageContent/PageContent.astro b/examples/docs/src/components/PageContent/PageContent.astro index 32db5cd58..1d14515c1 100644 --- a/examples/docs/src/components/PageContent/PageContent.astro +++ b/examples/docs/src/components/PageContent/PageContent.astro @@ -1,6 +1,6 @@ --- -import MoreMenu from '../RightSidebar/MoreMenu.astro'; -import TableOfContents from '../RightSidebar/TableOfContents.tsx'; +import MoreMenu from "../RightSidebar/MoreMenu.astro"; +import TableOfContents from "../RightSidebar/TableOfContents.tsx"; const { content, githubEditUrl } = Astro.props; const title = content.title; diff --git a/examples/docs/src/components/RightSidebar/MoreMenu.astro b/examples/docs/src/components/RightSidebar/MoreMenu.astro index 649e02c29..a78f86d59 100644 --- a/examples/docs/src/components/RightSidebar/MoreMenu.astro +++ b/examples/docs/src/components/RightSidebar/MoreMenu.astro @@ -1,6 +1,6 @@ --- -import ThemeToggleButton from './ThemeToggleButton.tsx'; -import * as CONFIG from '../../config'; +import ThemeToggleButton from "./ThemeToggleButton.tsx"; +import * as CONFIG from "../../config"; const { editHref } = Astro.props; const showMoreSection = CONFIG.COMMUNITY_INVITE_URL || editHref; --- @@ -25,7 +25,7 @@ const showMoreSection = CONFIG.COMMUNITY_INVITE_URL || editHref; <path fill="currentColor" d="M290.74 93.24l128.02 128.02-277.99 277.99-114.14 12.6C11.35 513.54-1.56 500.62.14 485.34l12.7-114.22 277.9-277.88zm207.2-19.06l-60.11-60.11c-18.75-18.75-49.16-18.75-67.91 0l-56.55 56.55 128.02 128.02 56.55-56.55c18.75-18.76 18.75-49.16 0-67.91z" - ></path> + /> </svg> <span>Edit this page</span> </a> @@ -49,7 +49,7 @@ const showMoreSection = CONFIG.COMMUNITY_INVITE_URL || editHref; <path fill="currentColor" d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 9.8 11.2 15.5 19.1 9.7L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64z" - ></path> + /> </svg> <span>Join our community</span> </a> diff --git a/examples/docs/src/components/RightSidebar/RightSidebar.astro b/examples/docs/src/components/RightSidebar/RightSidebar.astro index a0b5779dc..f61fb010f 100644 --- a/examples/docs/src/components/RightSidebar/RightSidebar.astro +++ b/examples/docs/src/components/RightSidebar/RightSidebar.astro @@ -1,6 +1,6 @@ --- -import TableOfContents from './TableOfContents.tsx'; -import MoreMenu from './MoreMenu.astro'; +import TableOfContents from "./TableOfContents.tsx"; +import MoreMenu from "./MoreMenu.astro"; const { content, githubEditUrl } = Astro.props; const headers = content.astro.headers; --- |