From a5782a37c8c72b0a926107552649b5adc30eb7aa Mon Sep 17 00:00:00 2001 From: natemoo-re Date: Thu, 27 May 2021 14:17:27 +0000 Subject: [PATCH] [ci] yarn format --- examples/doc/public/theme.js | 6 +- examples/doc/src/components/DocSidebar.tsx | 30 ++++++---- examples/doc/src/components/EditOnGithub.tsx | 17 +++++- examples/doc/src/components/ThemeToggle.tsx | 60 +++++++++++--------- examples/doc/src/config.ts | 8 +-- 5 files changed, 73 insertions(+), 48 deletions(-) diff --git a/examples/doc/public/theme.js b/examples/doc/public/theme.js index 1296b49b3..d75d0bf99 100644 --- a/examples/doc/public/theme.js +++ b/examples/doc/public/theme.js @@ -1,8 +1,8 @@ (() => { const root = document.documentElement; if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) { - root.classList.add('theme-dark') + root.classList.add('theme-dark'); } else { - root.classList.remove('theme-dark') + root.classList.remove('theme-dark'); } -})() +})(); diff --git a/examples/doc/src/components/DocSidebar.tsx b/examples/doc/src/components/DocSidebar.tsx index e792851bc..076d460cc 100644 --- a/examples/doc/src/components/DocSidebar.tsx +++ b/examples/doc/src/components/DocSidebar.tsx @@ -3,29 +3,29 @@ 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 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 => ({ + itemOffsets.current = Array.from(titles).map((title) => ({ id: title.id, - topOffset: title.getBoundingClientRect().top + window.scrollY + topOffset: title.getBoundingClientRect().top + window.scrollY, })); - } + }; const onScroll = () => { - const itemIndex = itemOffsets.current.findIndex(item => item.topOffset > window.scrollY + (window.innerHeight / 3)); + 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) + setActiveId(itemOffsets.current[itemOffsets.current.length - 1].id); } else { - setActiveId(itemOffsets.current[itemIndex - 1].id) + setActiveId(itemOffsets.current[itemIndex - 1].id); } - } + }; getItemOffsets(); window.addEventListener('resize', getItemOffsets); @@ -34,7 +34,7 @@ const DocSidebar: FunctionalComponent<{ headers: any[]; editHref: string; }> = ( return () => { window.removeEventListener('resize', getItemOffsets); window.removeEventListener('scroll', onScroll); - } + }; }, []); return ( @@ -42,14 +42,20 @@ const DocSidebar: FunctionalComponent<{ headers: any[]; editHref: string; }> = (

Contents

    - {headers.filter(({ depth }) => depth > 1 && depth < 5).map(header =>
  • {header.text}
    • )} + {headers + .filter(({ depth }) => depth > 1 && depth < 5) + .map((header) => ( +
  • + {header.text} +
    • + ))}
- + ); -} +}; export default DocSidebar; diff --git a/examples/doc/src/components/EditOnGithub.tsx b/examples/doc/src/components/EditOnGithub.tsx index e39dafce3..f7478934f 100644 --- a/examples/doc/src/components/EditOnGithub.tsx +++ b/examples/doc/src/components/EditOnGithub.tsx @@ -4,10 +4,23 @@ import { h } from 'preact'; const EditOnGithub: FunctionalComponent<{ href: string }> = ({ href }) => { return ( - + + + + + Edit on GitHub ); -} +}; export default EditOnGithub; diff --git a/examples/doc/src/components/ThemeToggle.tsx b/examples/doc/src/components/ThemeToggle.tsx index d26d94d69..5a5061c15 100644 --- a/examples/doc/src/components/ThemeToggle.tsx +++ b/examples/doc/src/components/ThemeToggle.tsx @@ -2,33 +2,37 @@ import type { FunctionalComponent } from 'preact'; import { h, Fragment } from 'preact'; import { useState, useEffect } from 'preact/hooks'; -const themes = [ - 'system', - 'light', - 'dark' -] +const themes = ['system', 'light', 'dark']; const icons = [ - -, + + , - + , - -] + , +]; const ThemeToggle: FunctionalComponent = () => { const [theme, setTheme] = useState(themes[0]); useEffect(() => { - const user = localStorage.getItem('theme') + const user = localStorage.getItem('theme'); if (!user) return; setTheme(user); - }, []) - + }, []); + useEffect(() => { const root = document.documentElement; if (theme === 'system') { @@ -46,20 +50,22 @@ const ThemeToggle: FunctionalComponent = () => { root.classList.add('theme-dark'); } } - }, [theme]) + }, [theme]); - return
- {themes.map((t, i) => { - const icon = icons[i]; - const checked = t === theme; - return ( - - ); - })} -
-} + return ( +
+ {themes.map((t, i) => { + const icon = icons[i]; + const checked = t === theme; + return ( + + ); + })} +
+ ); +}; export default ThemeToggle; diff --git a/examples/doc/src/config.ts b/examples/doc/src/config.ts index 645ea9f61..6b6ce3fdc 100644 --- a/examples/doc/src/config.ts +++ b/examples/doc/src/config.ts @@ -3,7 +3,7 @@ export const sidebar = [ text: 'Introduction', children: [ { text: 'Welcome', link: '/' }, - { text: 'Example', link: '/example' } - ] - } -] + { text: 'Example', link: '/example' }, + ], + }, +];