From b7ada11ddbabe4dd2f0798e140e5b280de4d6952 Mon Sep 17 00:00:00 2001 From: Okiki Date: Sat, 14 Aug 2021 00:58:00 +0000 Subject: WIP update examples/docs/ --- examples/docs/src/components/ArticleFooter.astro | 15 -- examples/docs/src/components/AvatarList.astro | 74 -------- examples/docs/src/components/DocSidebar.tsx | 61 ------- examples/docs/src/components/EditOnGithub.tsx | 26 --- .../docs/src/components/Footer/AvatarList.astro | 151 ++++++++++++++++ examples/docs/src/components/Footer/Footer.astro | 16 ++ examples/docs/src/components/HeadCommon.astro | 40 +++++ examples/docs/src/components/HeadSEO.astro | 40 +++++ .../docs/src/components/Header/AstroLogo.astro | 20 +++ examples/docs/src/components/Header/Header.astro | 158 +++++++++++++++++ .../docs/src/components/Header/LanguageSelect.css | 47 +++++ .../docs/src/components/Header/LanguageSelect.tsx | 38 +++++ examples/docs/src/components/Header/Search.css | 76 +++++++++ examples/docs/src/components/Header/Search.tsx | 76 +++++++++ .../docs/src/components/Header/SidebarToggle.tsx | 27 +++ .../docs/src/components/Header/SkipToContent.astro | 21 +++ .../src/components/LeftSidebar/LeftSidebar.astro | 109 ++++++++++++ examples/docs/src/components/Note.astro | 52 ------ .../src/components/PageContent/PageContent.astro | 41 +++++ .../src/components/RightSidebar/MoreMenu.astro | 68 ++++++++ .../src/components/RightSidebar/RightSidebar.astro | 25 +++ .../components/RightSidebar/TableOfContents.tsx | 45 +++++ .../components/RightSidebar/ThemeToggleButton.css | 37 ++++ .../components/RightSidebar/ThemeToggleButton.tsx | 71 ++++++++ examples/docs/src/components/SiteSidebar.astro | 20 --- examples/docs/src/components/ThemeToggle.tsx | 71 -------- examples/docs/src/components/util.ts | 4 + examples/docs/src/config.ts | 30 +++- examples/docs/src/languages.ts | 19 +++ examples/docs/src/layouts/MainLayout.astro | 122 +++++++++++++ examples/docs/src/pages/en/example.md | 36 ++++ examples/docs/src/pages/en/getting-started.md | 190 +++++++++++++++++++++ examples/docs/src/pages/en/index.astro | 5 + examples/docs/src/pages/en/introduction.md | 62 +++++++ examples/docs/src/pages/example.md | 34 ---- examples/docs/src/pages/getting-started.md | 59 ------- examples/docs/src/pages/index.astro | 24 +++ examples/docs/src/pages/index.md | 61 ------- 38 files changed, 1589 insertions(+), 482 deletions(-) delete mode 100644 examples/docs/src/components/ArticleFooter.astro delete mode 100644 examples/docs/src/components/AvatarList.astro delete mode 100644 examples/docs/src/components/DocSidebar.tsx delete mode 100644 examples/docs/src/components/EditOnGithub.tsx create mode 100644 examples/docs/src/components/Footer/AvatarList.astro create mode 100644 examples/docs/src/components/Footer/Footer.astro create mode 100644 examples/docs/src/components/HeadCommon.astro create mode 100644 examples/docs/src/components/HeadSEO.astro create mode 100644 examples/docs/src/components/Header/AstroLogo.astro create mode 100644 examples/docs/src/components/Header/Header.astro create mode 100644 examples/docs/src/components/Header/LanguageSelect.css create mode 100644 examples/docs/src/components/Header/LanguageSelect.tsx create mode 100644 examples/docs/src/components/Header/Search.css create mode 100644 examples/docs/src/components/Header/Search.tsx create mode 100644 examples/docs/src/components/Header/SidebarToggle.tsx create mode 100644 examples/docs/src/components/Header/SkipToContent.astro create mode 100644 examples/docs/src/components/LeftSidebar/LeftSidebar.astro delete mode 100644 examples/docs/src/components/Note.astro create mode 100644 examples/docs/src/components/PageContent/PageContent.astro create mode 100644 examples/docs/src/components/RightSidebar/MoreMenu.astro create mode 100644 examples/docs/src/components/RightSidebar/RightSidebar.astro create mode 100644 examples/docs/src/components/RightSidebar/TableOfContents.tsx create mode 100644 examples/docs/src/components/RightSidebar/ThemeToggleButton.css create mode 100644 examples/docs/src/components/RightSidebar/ThemeToggleButton.tsx delete mode 100644 examples/docs/src/components/SiteSidebar.astro delete mode 100644 examples/docs/src/components/ThemeToggle.tsx create mode 100644 examples/docs/src/components/util.ts create mode 100644 examples/docs/src/languages.ts create mode 100644 examples/docs/src/layouts/MainLayout.astro create mode 100644 examples/docs/src/pages/en/example.md create mode 100644 examples/docs/src/pages/en/getting-started.md create mode 100644 examples/docs/src/pages/en/index.astro create mode 100644 examples/docs/src/pages/en/introduction.md delete mode 100644 examples/docs/src/pages/example.md delete mode 100644 examples/docs/src/pages/getting-started.md create mode 100644 examples/docs/src/pages/index.astro delete mode 100644 examples/docs/src/pages/index.md (limited to 'examples/docs/src') diff --git a/examples/docs/src/components/ArticleFooter.astro b/examples/docs/src/components/ArticleFooter.astro deleted file mode 100644 index 8078e2cc3..000000000 --- a/examples/docs/src/components/ArticleFooter.astro +++ /dev/null @@ -1,15 +0,0 @@ ---- -import AvatarList from './AvatarList.astro'; ---- - - - - diff --git a/examples/docs/src/components/AvatarList.astro b/examples/docs/src/components/AvatarList.astro deleted file mode 100644 index aafcb371b..000000000 --- a/examples/docs/src/components/AvatarList.astro +++ /dev/null @@ -1,74 +0,0 @@ - - - - - diff --git a/examples/docs/src/components/DocSidebar.tsx b/examples/docs/src/components/DocSidebar.tsx deleted file mode 100644 index 076d460cc..000000000 --- a/examples/docs/src/components/DocSidebar.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import type { FunctionalComponent } from 'preact'; -import { h } from 'preact'; -import { useState, useEffect, useRef } from 'preact/hooks'; -import EditOnGithub from './EditOnGithub'; - -const DocSidebar: FunctionalComponent<{ headers: any[]; editHref: string }> = ({ headers = [], editHref }) => { - const itemOffsets = useRef([]); - const [activeId, setActiveId] = useState(undefined); - - useEffect(() => { - const getItemOffsets = () => { - const titles = document.querySelectorAll('article :is(h2, h3, h4)'); - itemOffsets.current = Array.from(titles).map((title) => ({ - id: title.id, - topOffset: title.getBoundingClientRect().top + window.scrollY, - })); - }; - - const onScroll = () => { - const itemIndex = itemOffsets.current.findIndex((item) => item.topOffset > window.scrollY + window.innerHeight / 3); - if (itemIndex === 0) { - setActiveId(undefined); - } else if (itemIndex === -1) { - setActiveId(itemOffsets.current[itemOffsets.current.length - 1].id); - } else { - setActiveId(itemOffsets.current[itemIndex - 1].id); - } - }; - - getItemOffsets(); - window.addEventListener('resize', getItemOffsets); - window.addEventListener('scroll', onScroll); - - return () => { - window.removeEventListener('resize', getItemOffsets); - window.removeEventListener('scroll', onScroll); - }; - }, []); - - return ( - - ); -}; - -export default DocSidebar; diff --git a/examples/docs/src/components/EditOnGithub.tsx b/examples/docs/src/components/EditOnGithub.tsx deleted file mode 100644 index f7478934f..000000000 --- a/examples/docs/src/components/EditOnGithub.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import type { FunctionalComponent } from 'preact'; -import { h } from 'preact'; - -const EditOnGithub: FunctionalComponent<{ href: string }> = ({ href }) => { - return ( - - - - - - - Edit on GitHub - - ); -}; - -export default EditOnGithub; diff --git a/examples/docs/src/components/Footer/AvatarList.astro b/examples/docs/src/components/Footer/AvatarList.astro new file mode 100644 index 000000000..589e296b9 --- /dev/null +++ b/examples/docs/src/components/Footer/AvatarList.astro @@ -0,0 +1,151 @@ +--- +// fetch all commits for just this page's path +const path = "docs/" + Astro.props.path; +const url = `https://api.github.com/repos/snowpackjs/astro/commits?path=${path}`; +const commitsURL = `https://github.com/snowpackjs/astro/commits/main/${path}`; + +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.' + ); + } + + const auth = `Basic ${Buffer.from(token, "binary").toString("base64")}`; + + const res = await fetch(url, { + method: "GET", + headers: { + Authorization: auth, + "User-Agent": "astro-docs/1.0", + }, + }); + + const data = await res.json(); + + if (!res.ok) { + throw new Error( + `Request to fetch commits failed. Reason: ${res.statusText} + Message: ${data.message}` + ); + } + + return data; + } catch (e) { + console.warn(`[error] /src/components/AvatarList.astro + ${e?.message ?? e}`); + return new Array(); + } +} + +function removeDups(arr) { + if (!arr) { + return new Array(); + } + let map = new Map(); + + for (let item of arr) { + let author = item.author; + // Deduplicate based on author.id + map.set(author.id, { login: author.login, id: author.id }); + } + + return Array.from(map.values()); +} + +const data = await getCommits(url); +const unique = removeDups(data); +const recentContributors = unique.slice(0, 3); // only show avatars for the 3 most recent contributors +const additionalContributors = unique.length - recentContributors.length; // list the rest of them as # of extra contributors + +--- + +
+
    + +{recentContributors.map((item) => ( +
  • {`Contributor
    • + +))} +
+ {additionalContributors > 0 && {`and ${additionalContributors} additional contributor${additionalContributors > 1 ? 's' : ''}.`}} + {unique.length === 0 && Contributors} +
+ + diff --git a/examples/docs/src/components/Footer/Footer.astro b/examples/docs/src/components/Footer/Footer.astro new file mode 100644 index 000000000..48de51054 --- /dev/null +++ b/examples/docs/src/components/Footer/Footer.astro @@ -0,0 +1,16 @@ +--- +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 new file mode 100644 index 000000000..83045c0d1 --- /dev/null +++ b/examples/docs/src/components/HeadCommon.astro @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/examples/docs/src/components/HeadSEO.astro b/examples/docs/src/components/HeadSEO.astro new file mode 100644 index 000000000..5553eb2d0 --- /dev/null +++ b/examples/docs/src/components/HeadSEO.astro @@ -0,0 +1,40 @@ +--- +import {SITE, OPEN_GRAPH} from '../config.ts'; +export interface Props { + content: any, + site: any, + canonicalURL: URL | string, +}; +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 ?? OPEN_GRAPH.image.alt; +--- + + + + + + + + + + + + + + + + + + + + + + diff --git a/examples/docs/src/components/Header/AstroLogo.astro b/examples/docs/src/components/Header/AstroLogo.astro new file mode 100644 index 000000000..ff1939ad9 --- /dev/null +++ b/examples/docs/src/components/Header/AstroLogo.astro @@ -0,0 +1,20 @@ +--- +const {size} = Astro.props; +--- + \ No newline at end of file diff --git a/examples/docs/src/components/Header/Header.astro b/examples/docs/src/components/Header/Header.astro new file mode 100644 index 000000000..cc54585b5 --- /dev/null +++ b/examples/docs/src/components/Header/Header.astro @@ -0,0 +1,158 @@ +--- +import SkipToContent from './SkipToContent.astro'; +import SidebarToggle from './SidebarToggle.tsx'; +import LanguageSelect from './LanguageSelect.jsx'; +import Search from "./Search.jsx"; +import { getLanguageFromURL } from '../util.ts'; + +const {currentPage} = Astro.props; +const lang = currentPage && getLanguageFromURL(currentPage); +--- + +
+ + +
\ No newline at end of file diff --git a/examples/docs/src/components/Header/LanguageSelect.css b/examples/docs/src/components/Header/LanguageSelect.css new file mode 100644 index 000000000..4e878714b --- /dev/null +++ b/examples/docs/src/components/Header/LanguageSelect.css @@ -0,0 +1,47 @@ +.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: var(--theme-bg); + 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; + pointer-events: none; +} + +@media (min-width: 50em) { + .language-select { + width: 100%; + } +} diff --git a/examples/docs/src/components/Header/LanguageSelect.tsx b/examples/docs/src/components/Header/LanguageSelect.tsx new file mode 100644 index 000000000..cf325eedc --- /dev/null +++ b/examples/docs/src/components/Header/LanguageSelect.tsx @@ -0,0 +1,38 @@ +import type { FunctionalComponent } from 'preact'; +import { h } from 'preact'; +import './LanguageSelect.css'; +import { LANGUAGE_NAMES, langPathRegex } from '../../languages'; + +const LanguageSelect: FunctionalComponent<{ lang: string }> = ({ lang }) => { + return ( +
+ + +
+ ); +}; + +export default LanguageSelect; diff --git a/examples/docs/src/components/Header/Search.css b/examples/docs/src/components/Header/Search.css new file mode 100644 index 000000000..2056c2c8f --- /dev/null +++ b/examples/docs/src/components/Header/Search.css @@ -0,0 +1,76 @@ +/** Style Algolia */ +:root { + --docsearch-primary-color: var(--theme-accent); + --docsearch-logo-color: var(--theme-text); +} +.search-input { + flex-grow: 1; + box-sizing: border-box; + width: 100%; + margin: 0; + padding: 0.33em 0.5em; + overflow: visible; + font-weight: 500; + font-size: 1rem; + font-family: inherit; + line-height: inherit; + background-color: var(--theme-divider); + border-color: var(--theme-divider); + 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; +} +.search-input:hover, +.search-input:focus { + color: var(--theme-text); + border-color: var(--theme-text-light); +} +.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; + right: 19px; + padding: 3px 5px; + display: none; + display: none; + align-items: center; + justify-content: center; + letter-spacing: 0.125em; + font-size: 13px; + font-family: var(--font-mono); + pointer-events: none; + border-color: var(--theme-text-lighter); + color: var(--theme-text-light); + border-style: solid; + border-width: 1px; + border-radius: 0.25rem; + line-height: 14px; +} + +@media (min-width: 50em) { + .search-hint { + display: flex; + } +} + +/* ------------------------------------------------------------ *\ + DocSearch (Algolia) +\* ------------------------------------------------------------ */ + +.DocSearch-Modal .DocSearch-Hit a { + box-shadow: none; + border: 1px solid var(--theme-accent); +} diff --git a/examples/docs/src/components/Header/Search.tsx b/examples/docs/src/components/Header/Search.tsx new file mode 100644 index 000000000..d842e007f --- /dev/null +++ b/examples/docs/src/components/Header/Search.tsx @@ -0,0 +1,76 @@ +/* jsxImportSource: react */ +import { useState, useCallback, useRef } from 'react'; +import { createPortal } from 'react-dom'; +import { DocSearchModal, useDocSearchKeyboardEvents } from '@docsearch/react'; +import '@docsearch/css//dist/style.css'; +import './Search.css'; + +export default function Search() { + const [isOpen, setIsOpen] = useState(false); + const searchButtonRef = useRef(); + const [initialQuery, setInitialQuery] = useState(null); + + const onOpen = useCallback(() => { + setIsOpen(true); + }, [setIsOpen]); + + const onClose = useCallback(() => { + setIsOpen(false); + }, [setIsOpen]); + + const onInput = useCallback( + (e) => { + setIsOpen(true); + setInitialQuery(e.key); + }, + [setIsOpen, setInitialQuery] + ); + + useDocSearchKeyboardEvents({ + isOpen, + onOpen, + onClose, + onInput, + searchButtonRef, + }); + + return ( + <> + + {isOpen && + createPortal( + { + return items.map((item) => { + // We transform the absolute URL into a relative URL to + // work better on localhost, preview URLS. + const a = document.createElement('a'); + a.href = item.url; + const hash = a.hash === '#overview' ? '' : a.hash; + return { + ...item, + url: `${a.pathname}${hash}`, + }; + }); + }} + />, + document.body + )} + + ); +} diff --git a/examples/docs/src/components/Header/SidebarToggle.tsx b/examples/docs/src/components/Header/SidebarToggle.tsx new file mode 100644 index 000000000..97fece6b2 --- /dev/null +++ b/examples/docs/src/components/Header/SidebarToggle.tsx @@ -0,0 +1,27 @@ +import type { FunctionalComponent } from 'preact'; +import { h, Fragment } from 'preact'; +import { useState, useEffect } from 'preact/hooks'; + +const MenuToggle: FunctionalComponent = () => { + const [sidebarShown, setSidebarShown] = useState(false); + + useEffect(() => { + const body = document.getElementsByTagName('body')[0]; + if (sidebarShown) { + body.classList.add('mobile-sidebar-toggle'); + } else { + body.classList.remove('mobile-sidebar-toggle'); + } + }, [sidebarShown]); + + return ( + + ); +}; + +export default MenuToggle; diff --git a/examples/docs/src/components/Header/SkipToContent.astro b/examples/docs/src/components/Header/SkipToContent.astro new file mode 100644 index 000000000..6df3a72ed --- /dev/null +++ b/examples/docs/src/components/Header/SkipToContent.astro @@ -0,0 +1,21 @@ + + diff --git a/examples/docs/src/components/LeftSidebar/LeftSidebar.astro b/examples/docs/src/components/LeftSidebar/LeftSidebar.astro new file mode 100644 index 000000000..96bd36fba --- /dev/null +++ b/examples/docs/src/components/LeftSidebar/LeftSidebar.astro @@ -0,0 +1,109 @@ +--- +import { SIDEBAR } from '../../config.ts'; +import { getLanguageFromURL } from '../util.ts'; +const {currentPage} = Astro.props; +const currentPageMatch = currentPage.slice(1); +const langCode = getLanguageFromURL(currentPage); +// SIDEBAR is a flat array. Group it by sections to properly render. +const sidebarSections = SIDEBAR[langCode].reduce((col, item) => { + if (item.header) { + col.push({...item, children: []}); + } else { + col[col.length-1].children.push(item); + } + return col; +}, []); + +--- + + + + + + diff --git a/examples/docs/src/components/Note.astro b/examples/docs/src/components/Note.astro deleted file mode 100644 index c57ede3a0..000000000 --- a/examples/docs/src/components/Note.astro +++ /dev/null @@ -1,52 +0,0 @@ ---- -export interface Props { - title: string; - type?: 'tip' | 'warning' | 'error' -} -const { type = 'tip', title } = Astro.props; ---- - - - - diff --git a/examples/docs/src/components/PageContent/PageContent.astro b/examples/docs/src/components/PageContent/PageContent.astro new file mode 100644 index 000000000..fd1e9d242 --- /dev/null +++ b/examples/docs/src/components/PageContent/PageContent.astro @@ -0,0 +1,41 @@ +--- +const {content, githubEditUrl} = Astro.props; +const title = content.title; +const headers = content.astro.headers; +import MoreMenu from '../RightSidebar/MoreMenu.astro'; +import TableOfContents from '../RightSidebar/TableOfContents.tsx'; +--- + +
+
+

{title}

+ + +
+ +
\ No newline at end of file diff --git a/examples/docs/src/components/RightSidebar/MoreMenu.astro b/examples/docs/src/components/RightSidebar/MoreMenu.astro new file mode 100644 index 000000000..6be2d86ee --- /dev/null +++ b/examples/docs/src/components/RightSidebar/MoreMenu.astro @@ -0,0 +1,68 @@ +--- +import ThemeToggleButton from './ThemeToggleButton.jsx'; +const {editHref} = Astro.props; +--- + +

More

+ +
+ +
diff --git a/examples/docs/src/components/RightSidebar/RightSidebar.astro b/examples/docs/src/components/RightSidebar/RightSidebar.astro new file mode 100644 index 000000000..ed1dd37cc --- /dev/null +++ b/examples/docs/src/components/RightSidebar/RightSidebar.astro @@ -0,0 +1,25 @@ +--- +import TableOfContents from './TableOfContents.jsx'; +import MoreMenu from './MoreMenu.astro'; +const {content, githubEditUrl} = Astro.props; +const headers = content.astro.headers; +--- + + \ No newline at end of file diff --git a/examples/docs/src/components/RightSidebar/TableOfContents.tsx b/examples/docs/src/components/RightSidebar/TableOfContents.tsx new file mode 100644 index 000000000..d8ea998d4 --- /dev/null +++ b/examples/docs/src/components/RightSidebar/TableOfContents.tsx @@ -0,0 +1,45 @@ +import type { FunctionalComponent } from 'preact'; +import { h, Fragment } from 'preact'; +import { useState, useEffect, useRef } from 'preact/hooks'; + +const TableOfContents: FunctionalComponent<{ headers: any[] }> = ({ headers = [] }) => { + const itemOffsets = useRef([]); + const [activeId, setActiveId] = useState(undefined); + + useEffect(() => { + const getItemOffsets = () => { + const titles = document.querySelectorAll('article :is(h1, h2, h3, h4)'); + itemOffsets.current = Array.from(titles).map((title) => ({ + id: title.id, + topOffset: title.getBoundingClientRect().top + window.scrollY, + })); + }; + + getItemOffsets(); + window.addEventListener('resize', getItemOffsets); + + return () => { + window.removeEventListener('resize', getItemOffsets); + }; + }, []); + + return ( + <> +

On this page

+
    +
  • + Overview +
    • + {headers + .filter(({ depth }) => depth > 1 && depth < 4) + .map((header) => ( +
  • + {header.text} +
    • + ))} +
+ + ); +}; + +export default TableOfContents; diff --git a/examples/docs/src/components/RightSidebar/ThemeToggleButton.css b/examples/docs/src/components/RightSidebar/ThemeToggleButton.css new file mode 100644 index 000000000..7de231d1b --- /dev/null +++ b/examples/docs/src/components/RightSidebar/ThemeToggleButton.css @@ -0,0 +1,37 @@ +.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; +} diff --git a/examples/docs/src/components/RightSidebar/ThemeToggleButton.tsx b/examples/docs/src/components/RightSidebar/ThemeToggleButton.tsx new file mode 100644 index 000000000..75ea775f4 --- /dev/null +++ b/examples/docs/src/components/RightSidebar/ThemeToggleButton.tsx @@ -0,0 +1,71 @@ +import type { FunctionalComponent } from 'preact'; +import { h, Fragment } from 'preact'; +import { useState, useEffect } from 'preact/hooks'; +import './ThemeToggleButton.css'; + +const themes = ['light', 'dark']; + +const icons = [ + + + , + + + , +]; + +const ThemeToggle: FunctionalComponent = () => { + const [theme, setTheme] = useState(() => { + if (import.meta.env.SSR) { + return undefined; + } + if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) { + return localStorage.getItem('theme'); + } + if (window.matchMedia('(prefers-color-scheme: dark)').matches) { + return 'dark'; + } + return 'light'; + }); + + useEffect(() => { + const root = document.documentElement; + if (theme === 'light') { + root.classList.remove('theme-dark'); + } else { + root.classList.add('theme-dark'); + } + }, [theme]); + + return ( +
+ {themes.map((t, i) => { + const icon = icons[i]; + const checked = t === theme; + return ( + + ); + })} +
+ ); +}; + +export default ThemeToggle; diff --git a/examples/docs/src/components/SiteSidebar.astro b/examples/docs/src/components/SiteSidebar.astro deleted file mode 100644 index 0fbad0c83..000000000 --- a/examples/docs/src/components/SiteSidebar.astro +++ /dev/null @@ -1,20 +0,0 @@ ---- -import { sidebar } from '../config.ts'; ---- - - diff --git a/examples/docs/src/components/ThemeToggle.tsx b/examples/docs/src/components/ThemeToggle.tsx deleted file mode 100644 index 5a5061c15..000000000 --- a/examples/docs/src/components/ThemeToggle.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import type { FunctionalComponent } from 'preact'; -import { h, Fragment } from 'preact'; -import { useState, useEffect } from 'preact/hooks'; - -const themes = ['system', 'light', 'dark']; - -const icons = [ - - - , - - - , - - - , -]; - -const ThemeToggle: FunctionalComponent = () => { - const [theme, setTheme] = useState(themes[0]); - - useEffect(() => { - const user = localStorage.getItem('theme'); - if (!user) return; - setTheme(user); - }, []); - - useEffect(() => { - const root = document.documentElement; - if (theme === 'system') { - localStorage.removeItem('theme'); - if (window.matchMedia('(prefers-color-scheme: dark)').matches) { - root.classList.add('theme-dark'); - } else { - root.classList.remove('theme-dark'); - } - } else { - localStorage.setItem('theme', theme); - if (theme === 'light') { - root.classList.remove('theme-dark'); - } else { - root.classList.add('theme-dark'); - } - } - }, [theme]); - - return ( -
- {themes.map((t, i) => { - const icon = icons[i]; - const checked = t === theme; - return ( - - ); - })} -
- ); -}; - -export default ThemeToggle; diff --git a/examples/docs/src/components/util.ts b/examples/docs/src/components/util.ts new file mode 100644 index 000000000..0ec91bce0 --- /dev/null +++ b/examples/docs/src/components/util.ts @@ -0,0 +1,4 @@ +export function getLanguageFromURL(pathname: string) { + const langCodeMatch = pathname.match(/\/([a-z]{2}-?[A-Z]{0,2})\//); + return langCodeMatch ? langCodeMatch[1] : 'en'; +} diff --git a/examples/docs/src/config.ts b/examples/docs/src/config.ts index 5ec22a02b..cf0d58ed5 100644 --- a/examples/docs/src/config.ts +++ b/examples/docs/src/config.ts @@ -1,10 +1,22 @@ -export const sidebar = [ - { - text: 'Introduction', - link: '', // No leading slash needed, so this links to the homepage - children: [ - { text: 'Getting Started', link: 'getting-started' }, - { text: 'Example', link: 'example' }, - ], +export const SIDEBAR = { + en: [ + { text: 'Getting Started', header: true }, + { text: 'Introduction', link: 'en/introduction' }, + { text: 'Getting Started', link: 'en/getting-started' }, + { text: 'Example', link: 'en/example' }, + ], +}; + +export const SITE = { + title: 'Astro Documentation', + description: 'Build faster websites with less client-side Javascript.', +}; + +export const OPEN_GRAPH = { + locale: 'en_US', + image: { + src: 'https://github.com/snowpackjs/astro/blob/main/assets/social/banner.png?raw=true', + alt: 'astro logo on a starry expanse of space,' + ' with a purple saturn-like planet floating in the right foreground', }, -]; + twitter: 'astrodotbuild', +}; diff --git a/examples/docs/src/languages.ts b/examples/docs/src/languages.ts new file mode 100644 index 000000000..e56855631 --- /dev/null +++ b/examples/docs/src/languages.ts @@ -0,0 +1,19 @@ +export const LANGUAGE_NAMES = { + English: 'en', +}; + +export const KNOWN_LANGUAGES = Object.values(LANGUAGE_NAMES); +export const langPathRegex = new RegExp(`\/(${KNOWN_LANGUAGES.join('|')})\/`); +export const getLanguageDetails = () => { + // @ts-ignore + let newLangWithRegion = (window.navigator.userLanguage || window.navigator.language || 'en-US').substr(0, 5); + let newLang = newLangWithRegion.substr(0, 2); + + let actualDest = window.location.pathname.replace(langPathRegex, '/'); + return { + newLangWithRegion, + newLang, + langPathRegex, + actualDest, + }; +}; diff --git a/examples/docs/src/layouts/MainLayout.astro b/examples/docs/src/layouts/MainLayout.astro new file mode 100644 index 000000000..04416316d --- /dev/null +++ b/examples/docs/src/layouts/MainLayout.astro @@ -0,0 +1,122 @@ +--- +import HeadCommon from "../components/HeadCommon.astro"; +import HeadSEO from "../components/HeadSEO.astro"; +import Header from '../components/Header/Header.astro'; +import Footer from '../components/Footer/Footer.astro'; +import PageContent from '../components/PageContent/PageContent.astro'; +import LeftSidebar from '../components/LeftSidebar/LeftSidebar.astro'; +import RightSidebar from '../components/RightSidebar/RightSidebar.astro'; +import { SITE } from "../config.ts"; + +const { content = {} } = Astro.props; +const currentPage = Astro.request.url.pathname; +const currentFile = `src/pages${currentPage.replace(/\/$/, "")}.md`; +const githubEditUrl = `https://github.com/snowpackjs/astro/blob/main/docs/${currentFile}`; +--- + + + + + + {content.title ? `${content.title} 🚀 ${SITE.title}` : SITE.title} + + + + +
+
+ +
+ + + +
+ +
+ + diff --git a/examples/docs/src/pages/en/example.md b/examples/docs/src/pages/en/example.md new file mode 100644 index 000000000..a5deeaff9 --- /dev/null +++ b/examples/docs/src/pages/en/example.md @@ -0,0 +1,36 @@ +--- +title: Markdown Example +layout: ~/layouts/MainLayout.astro +--- + +This is a fully-featured page, written in Markdown! + +## Section A + +Lorem ipsum dolor sit amet, **consectetur adipiscing elit**. Sed ut tortor _suscipit_, posuere ante id, vulputate urna. Pellentesque molestie aliquam dui sagittis aliquet. Sed sed felis convallis, lacinia lorem sit amet, fermentum ex. Etiam hendrerit mauris at elementum egestas. Vivamus id gravida ante. Praesent consectetur fermentum turpis, quis blandit tortor feugiat in. Aliquam erat volutpat. In elementum purus et tristique ornare. Suspendisse sollicitudin dignissim est a ultrices. Pellentesque sed ipsum finibus, condimentum metus eget, sagittis elit. Sed id lorem justo. Vivamus in sem ac mi molestie ornare. + +## Section B + +Nam quam dolor, pellentesque sed odio euismod, feugiat tempus tellus. Quisque arcu velit, ultricies in faucibus sed, ultrices ac enim. Nunc eget dictum est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ex nisi, egestas mollis ultricies ut, laoreet suscipit libero. Nam condimentum molestie turpis. Sed vestibulum sagittis congue. Maecenas tristique enim et tincidunt tempor. Curabitur ac scelerisque nulla, in malesuada libero. Praesent eu tempus odio. Pellentesque aliquam ullamcorper quam at gravida. Sed non fringilla mauris. Aenean sit amet ultrices erat. Vestibulum congue venenatis tortor, nec suscipit tortor. Aenean pellentesque mauris eget tortor tincidunt pharetra. + +## Section C + +```markdown +--- +title: Markdown Page! +lang: en +layout: ~/layouts/MainLayout.astro +--- + +# Markdown example + +This is a fully-featured page, written in Markdown! + +## Section A + +Lorem ipsum dolor sit amet, **consectetur adipiscing elit**. Sed ut tortor _suscipit_, posuere ante id, vulputate urna. Pellentesque molestie aliquam dui sagittis aliquet. Sed sed felis convallis, lacinia lorem sit amet, fermentum ex. Etiam hendrerit mauris at elementum egestas. Vivamus id gravida ante. Praesent consectetur fermentum turpis, quis blandit tortor feugiat in. Aliquam erat volutpat. In elementum purus et tristique ornare. Suspendisse sollicitudin dignissim est a ultrices. Pellentesque sed ipsum finibus, condimentum metus eget, sagittis elit. Sed id lorem justo. Vivamus in sem ac mi molestie ornare. + +## Section B + +Nam quam dolor, pellentesque sed odio euismod, feugiat tempus tellus. Quisque arcu velit, ultricies in faucibus sed, ultrices ac enim. Nunc eget dictum est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ex nisi, egestas mollis ultricies ut, laoreet suscipit libero. Nam condimentum molestie turpis. Sed vestibulum sagittis congue. Maecenas tristique enim et tincidunt tempor. Curabitur ac scelerisque nulla, in malesuada libero. Praesent eu tempus odio. Pellentesque aliquam ullamcorper quam at gravida. Sed non fringilla mauris. Aenean sit amet ultrices erat. Vestibulum congue venenatis tortor, nec suscipit tortor. Aenean pellentesque mauris eget tortor tincidunt pharetra. +``` diff --git a/examples/docs/src/pages/en/getting-started.md b/examples/docs/src/pages/en/getting-started.md new file mode 100644 index 000000000..33494432c --- /dev/null +++ b/examples/docs/src/pages/en/getting-started.md @@ -0,0 +1,190 @@ +--- +title: Getting Started +layout: ~/layouts/MainLayout.astro +--- + +This template already provides your pages with a side bar navigation (on the left) for your pages, and a content navigation (on the right) for your sections. + +## Page navigation + +The page navigation, through the side bar on the left, needs to be manually updated. Open the `config.ts` file and you will find the following structure: + +```ts +export const SIDEBAR = { + en: [ + { text: 'Getting Started', header: true }, + { text: 'Introduction', link: 'en/introduction' }, + { text: 'Getting Started', link: 'en/getting-started' }, + { text: 'Example', link: 'en/example' }, + ], + es: [ + { text: 'Empezando', header: true }, + { text: 'Introducción', link: 'es/introduction' }, + { text: 'Empezando', link: 'es/getting-started' }, + { text: 'Ejemplo', link: 'es/example' }, + ], + fr: [ + { text: 'Commencer', header: true }, + { text: 'Introduction', link: 'fr/introduction' }, + { text: 'Commencer', link: 'fr/getting-started' }, + { text: 'Exemple', link: 'fr/example' }, + ], +}; +``` + +The sidebar supports many languages, and each language has items to display, and pages to link to, allowing for a truly native experience for international users. You can change this file to match the pages you want to display, the object with the `{ header: true, ... }` set to true will act as a section title and cannot contain a link. + +The page navigation is generated in the `src/components/LeftSidebar/LeftSidebar.astro`, so if you want to change the depth of elements displayed, styles, etc, that's the place to go. + +## Section navigation + +The section navigation, through the side bar on the right, is automatically generated by the `src/components/RightSidebar/RightSidebar.astro` file, it uses the meta-data from markdown files to generate the structure you see. + +By default only elements from depth 2 to 5 will be displayed, and at the moment doesn't work for `.astro files`. + +## Other Components + +### Footer + +You can edit your footer here `src/components/Footer/Footer.astro`, at the moment it is composed of a list of avatars. You can generate your own avatar [here](https://getavataaars.com/) and replace the ones from `src/components/Footer/AvatarList.astro`. + +### Theme + +The `src/components/RightSidebar/ThemeToggleButton.tsx` is only responsible for applying the theme, to change the theme colors see `public/theme.css` + +## Multiple Languages + +By default the Astro docs template encourages writing your docs in mutliple languages, it also encourages writing your docs in a specific file structure + +``` +📦pages + ┣ 📂en + ┃ ┣ 📜example.md + ┃ ┣ 📜getting-started.md + ┃ ┣ 📜index.astro + ┃ ┗ 📜introduction.md + ┣ 📂es + ┃ ┣ 📜example.md + ┃ ┣ 📜getting-started.md + ┃ ┣ 📜index.astro + ┃ ┗ 📜introduction.md + ┣ 📂fr + ┃ ┣ 📜example.md + ┃ ┣ 📜getting-started.md + ┃ ┣ 📜index.astro + ┃ ┗ 📜introduction.md + ┗ 📜index.astro +``` + +each folder within the `pages/` folder represents a language, to add new languages, you will need to create a new langauge folder, +add the langauges name to the `LANGUAGE_NAMES` variable in the [`languages.ts`](../../languages.ts) file, and add new sidebar links corrosponding to the new language. E.g. Adding Deutsch as a supported language + +1. Create the `de/` folder in the pages directory + +``` +📦pages + ┣ 📂en + ┃ ┣ 📜example.md + ┃ ┣ 📜getting-started.md + ┃ ┣ 📜index.astro + ┃ ┗ 📜introduction.md + ┣ 📂de + ┃ ┣ 📜example.md + ┃ ┣ 📜getting-started.md + ┃ ┣ 📜index.astro + ┃ ┗ 📜introduction.md + ┗ 📜index.astro +``` + +2. Add Deutsch to the `LANGUAGE_NAMES` variable in the [`languages.ts`](../../languages.ts) file + +```ts +// src/languages.ts +export const LANGUAGE_NAMES = { + English: 'en', + Deutsch: 'de', +}; + +// ... +``` + +3. Add Deutch as a localized language for the SIDEBAR + +```ts +// src/config.ts +export const SIDEBAR = { + en: [ + { text: 'Getting Started', header: true }, + { text: 'Introduction', link: 'en/introduction' }, + { text: 'Getting Started', link: 'en/getting-started' }, + { text: 'Example', link: 'en/example' }, + ], + de: [ + { text: 'Einstieg', header: true }, + { text: 'Einführung', link: 'de/introduction' }, + { text: 'Einstieg', link: 'de/getting-started' }, + { text: 'Beispiel', link: 'de/example' }, + ], +}; + +// ... +``` + +> _**Note**: make sure the sidebar links point to the proper language folder_ + + + +## Algolia DocSearch + +[Algolia](https://www.algolia.com/) offers [DocSearch](https://docsearch.algolia.com/), a _"State-of-the-art search for technical documentation"_. We use DocSearch for the Astro docs as it's a great documentation search engine, to make things setting up docs easier we built it into the docs template, you can setup DocSearch for your site by following these instructions, ... + +### 🛠 Configuration + +... + +## Documentation + +For more information on how to use Astro components, check the documentation pages: + +- [Quick Start](https://docs.astro.build/quick-start) +- [astro.config.mjs](https://docs.astro.build/reference/configuration-reference) +- [API](https://docs.astro.build/reference/api-reference) +- [Command Line Interface](https://docs.astro.build/reference/cli-reference) +- [Collections](https://docs.astro.build/core-concepts/collections) +- [Development Server](https://docs.astro.build/reference/dev/) +- [Markdown](https://docs.astro.build/guides/markdown-content) +- [Publishing Astro components](https://docs.astro.build/guides/publish-to-npm) +- [Renderers](https://docs.astro.build/reference/renderer-reference) +- [Styling](https://docs.astro.build/guides/styling) +- [.astro Syntax](https://docs.astro.build/core-concepts/astro-components) diff --git a/examples/docs/src/pages/en/index.astro b/examples/docs/src/pages/en/index.astro new file mode 100644 index 000000000..5731a3976 --- /dev/null +++ b/examples/docs/src/pages/en/index.astro @@ -0,0 +1,5 @@ +--- +import REDIRECT from "../index.astro"; +--- + + \ No newline at end of file diff --git a/examples/docs/src/pages/en/introduction.md b/examples/docs/src/pages/en/introduction.md new file mode 100644 index 000000000..7b3142f71 --- /dev/null +++ b/examples/docs/src/pages/en/introduction.md @@ -0,0 +1,62 @@ +--- +title: Hello, Documentation! +layout: ~/layouts/MainLayout.astro +--- + +Astro + +## What is Astro? + +**Astro** is a _fresh but familiar_ approach to building websites. Astro combines decades of proven performance best practices with the DX improvements of the component-oriented era. + +With Astro, you can use your favorite JavaScript framework and automatically ship the bare-minimum amount of JavaScript—by default, it's none at all! + +## Project Status + +⚠️ **Astro is still an early beta, missing features and bugs are to be expected!** If you can stomach it, then Astro-built sites are production ready and several production websites built with Astro already exist in the wild. We will update this note once we get closer to a stable, v1.0 release. + +## 🔧 Quick Start + +> **Important**: Astro is built with [ESM modules](https://nodejs.org/api/esm.html) which are not supported in older version of Node.js. The minimum supported version is **14.16.1**. + +```bash +# create your project +mkdir new-project-directory +cd new-project-directory +npm init astro + +# install your dependencies +npm install + +# start the dev server and open your browser +npm run dev +``` + +### 🚀 Build & Deployment + +The default Astro project has the following `scripts` in the `/package.json` file: + +```json +{ + "scripts": { + "start": "astro dev", + "dev": "astro dev", + "build": "astro build", + "preview": "astro preview" + } +} +``` + +For local development, run: + +``` +npm run dev +``` + +To build for production, run the following command: + +``` +npm run build +``` + +To deploy your Astro site to production, upload the contents of `/dist` to your favorite static site host. diff --git a/examples/docs/src/pages/example.md b/examples/docs/src/pages/example.md deleted file mode 100644 index 4de84789b..000000000 --- a/examples/docs/src/pages/example.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: Markdown Example -layout: ../layouts/Main.astro ---- - -This is a fully-featured page, written in Markdown! - -## Section A - -Lorem ipsum dolor sit amet, **consectetur adipiscing elit**. Sed ut tortor _suscipit_, posuere ante id, vulputate urna. Pellentesque molestie aliquam dui sagittis aliquet. Sed sed felis convallis, lacinia lorem sit amet, fermentum ex. Etiam hendrerit mauris at elementum egestas. Vivamus id gravida ante. Praesent consectetur fermentum turpis, quis blandit tortor feugiat in. Aliquam erat volutpat. In elementum purus et tristique ornare. Suspendisse sollicitudin dignissim est a ultrices. Pellentesque sed ipsum finibus, condimentum metus eget, sagittis elit. Sed id lorem justo. Vivamus in sem ac mi molestie ornare. - -## Section B - -Nam quam dolor, pellentesque sed odio euismod, feugiat tempus tellus. Quisque arcu velit, ultricies in faucibus sed, ultrices ac enim. Nunc eget dictum est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ex nisi, egestas mollis ultricies ut, laoreet suscipit libero. Nam condimentum molestie turpis. Sed vestibulum sagittis congue. Maecenas tristique enim et tincidunt tempor. Curabitur ac scelerisque nulla, in malesuada libero. Praesent eu tempus odio. Pellentesque aliquam ullamcorper quam at gravida. Sed non fringilla mauris. Aenean sit amet ultrices erat. Vestibulum congue venenatis tortor, nec suscipit tortor. Aenean pellentesque mauris eget tortor tincidunt pharetra. - -## Section C - -```markdown ---- -layout: ../layouts/Main.astro ---- - -# Markdown example - -This is a fully-featured page, written in Markdown! - -## Section A - -Lorem ipsum dolor sit amet, **consectetur adipiscing elit**. Sed ut tortor _suscipit_, posuere ante id, vulputate urna. Pellentesque molestie aliquam dui sagittis aliquet. Sed sed felis convallis, lacinia lorem sit amet, fermentum ex. Etiam hendrerit mauris at elementum egestas. Vivamus id gravida ante. Praesent consectetur fermentum turpis, quis blandit tortor feugiat in. Aliquam erat volutpat. In elementum purus et tristique ornare. Suspendisse sollicitudin dignissim est a ultrices. Pellentesque sed ipsum finibus, condimentum metus eget, sagittis elit. Sed id lorem justo. Vivamus in sem ac mi molestie ornare. - -## Section B - -Nam quam dolor, pellentesque sed odio euismod, feugiat tempus tellus. Quisque arcu velit, ultricies in faucibus sed, ultrices ac enim. Nunc eget dictum est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ex nisi, egestas mollis ultricies ut, laoreet suscipit libero. Nam condimentum molestie turpis. Sed vestibulum sagittis congue. Maecenas tristique enim et tincidunt tempor. Curabitur ac scelerisque nulla, in malesuada libero. Praesent eu tempus odio. Pellentesque aliquam ullamcorper quam at gravida. Sed non fringilla mauris. Aenean sit amet ultrices erat. Vestibulum congue venenatis tortor, nec suscipit tortor. Aenean pellentesque mauris eget tortor tincidunt pharetra. -``` diff --git a/examples/docs/src/pages/getting-started.md b/examples/docs/src/pages/getting-started.md deleted file mode 100644 index ab9c79617..000000000 --- a/examples/docs/src/pages/getting-started.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: Getting Started -layout: ../layouts/Main.astro ---- - -This template already provides your pages with a side bar navigation (on the left) for your pages, and a content navigation (on the right) for your sections. - -## Page navigation - -The page navigation, through the side bar on the left, needs to be manually updated. Open the `config.ts` file and you will find the following structure: - -```ts -export const sidebar = [ - { - text: 'Introduction', - link: '', // No leading slash needed, so this links to the homepage - children: [ - { text: 'Getting Started', link: 'getting-started' }, - { text: 'Example', link: 'example' }, - ], - }, -]; -``` - -You can change this file to match the pages you want to display, the items within `children` can also have children elements, but only the first level and second levels will be displayed. - -The page navigation is generated in the `src/components/SiteSidebar.astro`, so if you want to change the depth of elements displayed, styles, etc, that's the place to go. - -## Section navigation - -The section navigation, through the side bar on the right, is automatically generated by the `src/components/DocSidebar.tsx` file, it uses the meta-data from markdown files to generate the structure you see. - -By default only elements from depth 2 to 5 will be displayed, and at the moment doesn't work for `.astro files`. - -## Other Components - -### Footer - -You can edit your footer here `src/components/ArticleFooter.astro`, at the moment it is composed of a list of avatars. You can generate your own avatar [here](https://getavataaars.com/) and replace the ones from `AvatarList.astro`. - -### Theme - -The `src/components/ThemeToggle.tsx` is only responsible for applying the theme, to change the theme colors see `public/theme.css` - -## Documentation - -For more information on how to use Astro components, check the documentation pages: - -- [Quick Start](https://docs.astro.build/quick-start) -- [astro.config.mjs](https://docs.astro.build/reference/configuration-reference) -- [API](https://docs.astro.build/reference/api-reference) -- [Command Line Interface](https://docs.astro.build/reference/cli-reference) -- [Collections](https://docs.astro.build/core-concepts/collections) -- [Development Server](https://docs.astro.build/reference/dev/) -- [Markdown](https://docs.astro.build/guides/markdown-content) -- [Publishing Astro components](https://docs.astro.build/guides/publish-to-npm) -- [Renderers](https://docs.astro.build/reference/renderer-reference) -- [Styling](https://docs.astro.build/guides/styling) -- [.astro Syntax](https://docs.astro.build/core-concepts/astro-components) diff --git a/examples/docs/src/pages/index.astro b/examples/docs/src/pages/index.astro new file mode 100644 index 000000000..f5a8fd318 --- /dev/null +++ b/examples/docs/src/pages/index.astro @@ -0,0 +1,24 @@ +--- +import Layout from '../layouts/MainLayout.astro'; +import { KNOWN_LANGUAGES } from "../languages"; +--- + + diff --git a/examples/docs/src/pages/index.md b/examples/docs/src/pages/index.md deleted file mode 100644 index cd5ce6454..000000000 --- a/examples/docs/src/pages/index.md +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: Hello, Documentation! -layout: ../layouts/Main.astro ---- - -Astro - -## What is Astro? - -**Astro** is a _fresh but familiar_ approach to building websites. Astro combines decades of proven performance best practices with the DX improvements of the component-oriented era. - -With Astro, you can use your favorite JavaScript framework and automatically ship the bare-minimum amount of JavaScript—by default, it's none at all! - -## Project Status - -⚠️ **Astro is still an early beta, missing features and bugs are to be expected!** If you can stomach it, then Astro-built sites are production ready and several production websites built with Astro already exist in the wild. We will update this note once we get closer to a stable, v1.0 release. - -## 🔧 Quick Start - -> **Important**: Astro is built with [ESM modules](https://nodejs.org/api/esm.html) which are not supported in older version of Node.js. The minimum supported version is **14.16.1**. - -```bash -# create your project -mkdir new-project-directory -cd new-project-directory -npm init astro - -# install your dependencies -npm install - -# start the dev server and open your browser -npm run dev -``` - -### 🚀 Build & Deployment - -The default Astro project has the following `scripts` in the `/package.json` file: - -```json -{ - "scripts": { - "dev": "astro dev", - "build": "astro build", - "preview": "astro preview" - } -} -``` - -For local development, run: - -``` -npm run dev -``` - -To build for production, run the following command: - -``` -npm run build -``` - -To deploy your Astro site to production, upload the contents of `/dist` to your favorite static site host. -- cgit v1.2.3