From 5ed2a2f666707e579e18f2890ab89b7cc6f717c3 Mon Sep 17 00:00:00 2001 From: Nate Moore Date: Tue, 6 Jun 2023 11:21:19 -0500 Subject: chore: remove docs example (#7306) --- .../docs/src/components/Header/AstroLogo.astro | 40 ------ examples/docs/src/components/Header/Header.astro | 149 --------------------- .../docs/src/components/Header/LanguageSelect.css | 47 ------- .../docs/src/components/Header/LanguageSelect.tsx | 49 ------- examples/docs/src/components/Header/Search.css | 75 ----------- examples/docs/src/components/Header/Search.tsx | 97 -------------- .../docs/src/components/Header/SidebarToggle.tsx | 44 ------ .../docs/src/components/Header/SkipToContent.astro | 26 ---- 8 files changed, 527 deletions(-) delete mode 100644 examples/docs/src/components/Header/AstroLogo.astro delete mode 100644 examples/docs/src/components/Header/Header.astro delete mode 100644 examples/docs/src/components/Header/LanguageSelect.css delete mode 100644 examples/docs/src/components/Header/LanguageSelect.tsx delete mode 100644 examples/docs/src/components/Header/Search.css delete mode 100644 examples/docs/src/components/Header/Search.tsx delete mode 100644 examples/docs/src/components/Header/SidebarToggle.tsx delete mode 100644 examples/docs/src/components/Header/SkipToContent.astro (limited to 'examples/docs/src/components/Header') diff --git a/examples/docs/src/components/Header/AstroLogo.astro b/examples/docs/src/components/Header/AstroLogo.astro deleted file mode 100644 index 1363b3e32..000000000 --- a/examples/docs/src/components/Header/AstroLogo.astro +++ /dev/null @@ -1,40 +0,0 @@ ---- -type Props = { - size: number; -}; -const { size } = Astro.props; ---- - - diff --git a/examples/docs/src/components/Header/Header.astro b/examples/docs/src/components/Header/Header.astro deleted file mode 100644 index 3f578480b..000000000 --- a/examples/docs/src/components/Header/Header.astro +++ /dev/null @@ -1,149 +0,0 @@ ---- -import { getLanguageFromURL, KNOWN_LANGUAGE_CODES } from '../../languages'; -import { SITE } from '../../consts'; -import AstroLogo from './AstroLogo.astro'; -import SkipToContent from './SkipToContent.astro'; -import SidebarToggle from './SidebarToggle'; -import LanguageSelect from './LanguageSelect'; -import Search from './Search'; - -type Props = { - currentPage: string; -}; - -const { currentPage } = Astro.props; -const lang = getLanguageFromURL(currentPage); ---- - -
- - -
- - - - diff --git a/examples/docs/src/components/Header/LanguageSelect.css b/examples/docs/src/components/Header/LanguageSelect.css deleted file mode 100644 index 9e0ae7ce1..000000000 --- a/examples/docs/src/components/Header/LanguageSelect.css +++ /dev/null @@ -1,47 +0,0 @@ -.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 deleted file mode 100644 index 97409af2b..000000000 --- a/examples/docs/src/components/Header/LanguageSelect.tsx +++ /dev/null @@ -1,49 +0,0 @@ -/** @jsxImportSource react */ -import type { FunctionComponent } from 'react'; -import './LanguageSelect.css'; -import { KNOWN_LANGUAGES, langPathRegex } from '../../languages'; - -const LanguageSelect: FunctionComponent<{ 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 deleted file mode 100644 index 09ad520a2..000000000 --- a/examples/docs/src/components/Header/Search.css +++ /dev/null @@ -1,75 +0,0 @@ -/** 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; - 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 deleted file mode 100644 index 620941e3a..000000000 --- a/examples/docs/src/components/Header/Search.tsx +++ /dev/null @@ -1,97 +0,0 @@ -/** @jsxImportSource react */ -import { useState, useCallback, useRef } from 'react'; -import { ALGOLIA } from '../../consts'; -import '@docsearch/css'; -import './Search.css'; - -import { createPortal } from 'react-dom'; -import * as docSearchReact from '@docsearch/react'; - -/** FIXME: This is still kinda nasty, but DocSearch is not ESM ready. */ -const DocSearchModal = - docSearchReact.DocSearchModal || (docSearchReact as any).default.DocSearchModal; -const useDocSearchKeyboardEvents = - docSearchReact.useDocSearchKeyboardEvents || - (docSearchReact as any).default.useDocSearchKeyboardEvents; - -export default function Search() { - const [isOpen, setIsOpen] = useState(false); - const searchButtonRef = useRef(null); - const [initialQuery, setInitialQuery] = useState(''); - - 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 deleted file mode 100644 index 50a5d93d0..000000000 --- a/examples/docs/src/components/Header/SidebarToggle.tsx +++ /dev/null @@ -1,44 +0,0 @@ -/** @jsxImportSource preact */ -import type { FunctionalComponent } from 'preact'; -import { useState, useEffect } from 'preact/hooks'; - -const MenuToggle: FunctionalComponent = () => { - const [sidebarShown, setSidebarShown] = useState(false); - - useEffect(() => { - const body = document.querySelector('body')!; - 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 deleted file mode 100644 index 4d97923f6..000000000 --- a/examples/docs/src/components/Header/SkipToContent.astro +++ /dev/null @@ -1,26 +0,0 @@ ---- -type Props = {}; ---- - - - - -- cgit v1.2.3