{content.title}

From 6bca7c83a7e2d62015f45f873b0f69f11b4d902b Mon Sep 17 00:00:00 2001 From: "Fred K. Schott" Date: Tue, 8 Jun 2021 08:10:56 -0700 Subject: redesign create-astro (#301) * redesign create astro * add changeset * Use npm start * Update the astro version * Adds the changeset Co-authored-by: Fred Schott Co-authored-by: Matthew Phillips --- 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 +++ examples/docs/src/components/Note.astro | 49 +++++ examples/docs/src/components/SiteSidebar.astro | 20 ++ examples/docs/src/components/ThemeToggle.tsx | 71 +++++++ examples/docs/src/config.ts | 9 + examples/docs/src/layouts/Main.astro | 228 +++++++++++++++++++++++ examples/docs/src/pages/example.md | 35 ++++ examples/docs/src/pages/index.astro | 14 ++ 11 files changed, 602 insertions(+) create mode 100644 examples/docs/src/components/ArticleFooter.astro create mode 100644 examples/docs/src/components/AvatarList.astro create mode 100644 examples/docs/src/components/DocSidebar.tsx create mode 100644 examples/docs/src/components/EditOnGithub.tsx create mode 100644 examples/docs/src/components/Note.astro create mode 100644 examples/docs/src/components/SiteSidebar.astro create mode 100644 examples/docs/src/components/ThemeToggle.tsx create mode 100644 examples/docs/src/config.ts create mode 100644 examples/docs/src/layouts/Main.astro create mode 100644 examples/docs/src/pages/example.md create mode 100644 examples/docs/src/pages/index.astro (limited to 'examples/docs/src') diff --git a/examples/docs/src/components/ArticleFooter.astro b/examples/docs/src/components/ArticleFooter.astro new file mode 100644 index 000000000..8078e2cc3 --- /dev/null +++ b/examples/docs/src/components/ArticleFooter.astro @@ -0,0 +1,15 @@ +--- +import AvatarList from './AvatarList.astro'; +--- + + + + diff --git a/examples/docs/src/components/AvatarList.astro b/examples/docs/src/components/AvatarList.astro new file mode 100644 index 000000000..aafcb371b --- /dev/null +++ b/examples/docs/src/components/AvatarList.astro @@ -0,0 +1,74 @@ + + +

+ + diff --git a/examples/docs/src/components/DocSidebar.tsx b/examples/docs/src/components/DocSidebar.tsx new file mode 100644 index 000000000..076d460cc --- /dev/null +++ b/examples/docs/src/components/DocSidebar.tsx @@ -0,0 +1,61 @@ +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 new file mode 100644 index 000000000..f7478934f --- /dev/null +++ b/examples/docs/src/components/EditOnGithub.tsx @@ -0,0 +1,26 @@ +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/Note.astro b/examples/docs/src/components/Note.astro new file mode 100644 index 000000000..46940ddf8 --- /dev/null +++ b/examples/docs/src/components/Note.astro @@ -0,0 +1,49 @@ +--- +export let type = "tip"; +export let title; +--- + + + + diff --git a/examples/docs/src/components/SiteSidebar.astro b/examples/docs/src/components/SiteSidebar.astro new file mode 100644 index 000000000..7279d9aea --- /dev/null +++ b/examples/docs/src/components/SiteSidebar.astro @@ -0,0 +1,20 @@ +--- +import { sidebar } from '../config.ts'; +--- + + diff --git a/examples/docs/src/components/ThemeToggle.tsx b/examples/docs/src/components/ThemeToggle.tsx new file mode 100644 index 000000000..5a5061c15 --- /dev/null +++ b/examples/docs/src/components/ThemeToggle.tsx @@ -0,0 +1,71 @@ +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 ( + + {icon} + setTheme(t)} /> + + ); + })} +

+ ); +}; + +export default ThemeToggle; diff --git a/examples/docs/src/config.ts b/examples/docs/src/config.ts new file mode 100644 index 000000000..6b6ce3fdc --- /dev/null +++ b/examples/docs/src/config.ts @@ -0,0 +1,9 @@ +export const sidebar = [ + { + text: 'Introduction', + children: [ + { text: 'Welcome', link: '/' }, + { text: 'Example', link: '/example' }, + ], + }, +]; diff --git a/examples/docs/src/layouts/Main.astro b/examples/docs/src/layouts/Main.astro new file mode 100644 index 000000000..b741098ef --- /dev/null +++ b/examples/docs/src/layouts/Main.astro @@ -0,0 +1,228 @@ +--- +import ArticleFooter from '../components/ArticleFooter.astro'; +import SiteSidebar from '../components/SiteSidebar.astro'; +import ThemeToggle from '../components/ThemeToggle.tsx'; +import DocSidebar from '../components/DocSidebar.tsx'; + +export let content; +const headers = content?.astro?.headers; +let editHref = Astro?.request?.url?.pathname?.slice(1) ?? ''; +if (editHref === '') editHref = `index`; +editHref = `https://github.com/snowpackjs/astro/tree/main/examples/doc/src/pages/${editHref}.md` +--- + + + + {content.title} + + +