diff options
Diffstat (limited to 'docs/src/components/Header')
-rw-r--r-- | docs/src/components/Header/AstroLogo.astro | 36 | ||||
-rw-r--r-- | docs/src/components/Header/Header.astro | 184 | ||||
-rw-r--r-- | docs/src/components/Header/LanguageSelect.css | 50 | ||||
-rw-r--r-- | docs/src/components/Header/LanguageSelect.tsx | 102 | ||||
-rw-r--r-- | docs/src/components/Header/Search.css | 75 | ||||
-rw-r--r-- | docs/src/components/Header/Search.tsx | 93 | ||||
-rw-r--r-- | docs/src/components/Header/SidebarToggle.tsx | 44 | ||||
-rw-r--r-- | docs/src/components/Header/SkipToContent.astro | 22 |
8 files changed, 0 insertions, 606 deletions
diff --git a/docs/src/components/Header/AstroLogo.astro b/docs/src/components/Header/AstroLogo.astro deleted file mode 100644 index 860b2d2b1..000000000 --- a/docs/src/components/Header/AstroLogo.astro +++ /dev/null @@ -1,36 +0,0 @@ ---- -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" -> - <style> - #flame { - /* fill: #ff5d01; */ - fill: #3894ff; - } - #a { - /* fill: #000014; */ - fill: #3894ff; - } - </style> - <title>Logo</title> - <path - id="a" - fill-rule="evenodd" - clip-rule="evenodd" - d="M163.008 18.929c1.944 2.413 2.935 5.67 4.917 12.181l43.309 142.27a180.277 180.277 0 00-51.778-17.53l-28.198-95.29a3.67 3.67 0 00-7.042.01l-27.857 95.232a180.225 180.225 0 00-52.01 17.557l43.52-142.281c1.99-6.502 2.983-9.752 4.927-12.16a15.999 15.999 0 016.484-4.798c2.872-1.154 6.271-1.154 13.07-1.154h31.085c6.807 0 10.211 0 13.086 1.157a16.004 16.004 0 016.487 4.806z" - ></path> - <path - id="flame" - fill-rule="evenodd" - clip-rule="evenodd" - d="M168.19 180.151c-7.139 6.105-21.39 10.268-37.804 10.268-20.147 0-37.033-6.272-41.513-14.707-1.602 4.835-1.961 10.367-1.961 13.902 0 0-1.056 17.355 11.015 29.426 0-6.268 5.081-11.349 11.349-11.349 10.743 0 10.731 9.373 10.721 16.977v.679c0 11.542 7.054 21.436 17.086 25.606a23.27 23.27 0 01-2.339-10.2c0-11.008 6.463-15.107 13.974-19.87 5.976-3.79 12.616-8.001 17.192-16.449a31.024 31.024 0 003.743-14.82c0-3.299-.513-6.479-1.463-9.463z" - ></path> -</svg> diff --git a/docs/src/components/Header/Header.astro b/docs/src/components/Header/Header.astro deleted file mode 100644 index 2196670c8..000000000 --- a/docs/src/components/Header/Header.astro +++ /dev/null @@ -1,184 +0,0 @@ ---- -import SkipToContent from './SkipToContent.astro'; -import SidebarToggle from './SidebarToggle.tsx'; -import LanguageSelect from './LanguageSelect.tsx'; -import Search from './Search.tsx'; -import { getLanguageFromURL } from '../../util.ts'; -const { currentPage } = Astro.props; -const lang = currentPage && getLanguageFromURL(currentPage); ---- - -<header> - <SkipToContent /> - <nav class="nav-wrapper" title="Top Navigation"> - <div class="menu-toggle"> - <SidebarToggle client:idle /> - </div> - <div class="logo flex"> - <a href="https://astro.build/"> - <h1 class="sr-only">Astro</h1> - <svg - xmlns="http://www.w3.org/2000/svg" - width="363" - height="102" - viewBox="0 0 363 102" - fill="none" - > - <style> - .text { - fill: var(--theme-text); - } - .hover { - fill: var(--theme-accent); - } - </style> - <path - class="text" - fill-rule="evenodd" - d="M55.07 14.216l16.81 54.865a72.6 72.6 0 00-20.765-6.984L39.808 24.135a1.475 1.475 0 00-2.827.005L25.81 62.078a72.598 72.598 0 00-20.859 6.995L21.847 14.2c.998-3.243 1.497-4.865 2.47-6.066a8 8 0 013.239-2.392c1.434-.576 3.13-.576 6.524-.576h8.751c3.398 0 5.097 0 6.532.577a8 8 0 013.241 2.397c.972 1.203 1.47 2.827 2.465 6.076z" - clip-rule="evenodd"></path> - <path - fill="#FF5D01" - fill-rule="evenodd" - d="M54.618 71.779c-2.863 2.432-8.578 4.091-15.161 4.091-8.08 0-14.852-2.499-16.649-5.86-.642 1.926-.786 4.13-.786 5.539 0 0-.423 6.915 4.418 11.725 0-2.498 2.037-4.522 4.551-4.522 4.309 0 4.304 3.734 4.3 6.764v.27c0 4.6 2.829 8.541 6.852 10.203a9.22 9.22 0 01-.938-4.064c0-4.386 2.592-6.02 5.604-7.917 2.396-1.51 5.06-3.188 6.894-6.554a12.297 12.297 0 001.502-5.905c0-1.314-.206-2.581-.587-3.77z" - clip-rule="evenodd"></path> - <path - class="text" - d="M126.554 69c13.115 0 21.047-3.14 25.68-9.654 0 2.904.157 5.651.55 8.163h7.774c-.706-4.082-.863-6.75-.863-14.128V43.334c0-10.831-8.403-16.56-24.424-16.56-15.47 0-25.522 5.964-26.779 14.598h8.246c1.256-5.808 7.774-8.87 18.533-8.87 10.602 0 16.885 3.69 16.885 9.969v.785l-24.502 1.413c-9.974.549-13.665 1.962-16.492 4.003-2.67 1.962-4.162 5.023-4.162 8.555C107 64.683 114.696 69 126.554 69zm2.513-5.573c-9.109 0-14.135-2.119-14.135-6.357 0-4.553 3.141-6.593 14.214-7.3l23.01-1.412v1.805c0 8.241-9.66 13.264-23.089 13.264zM196.086 69c16.256 0 22.775-5.337 22.775-13.108 0-6.436-4.006-9.732-14.215-10.596l-19.083-1.49c-5.183-.393-8.088-1.884-8.088-5.102 0-4.082 4.476-6.201 14.135-6.201 10.995 0 16.727 2.198 20.497 7.064l6.361-3.061c-3.927-6.122-12.644-9.733-26.151-9.733-13.9 0-22.224 4.631-22.224 12.244 0 6.829 4.947 10.125 14.292 10.91l18.926 1.492c6.204.47 8.089 1.726 8.089 4.944 0 4.631-4.79 6.829-14.293 6.829-11.544 0-18.847-3.14-22.381-8.87l-6.204 3.376C173.312 64.918 181.715 69 196.086 69zM234.929 34.151v18.916c0 7.77 2.67 15.54 17.198 15.54 3.691 0 8.167-.706 10.131-1.57V60.68c-2.749.628-6.047 1.1-9.267 1.1-6.832 0-10.523-2.67-10.523-9.42V34.151h19.633v-5.887h-19.633V15l-7.539 3.061v10.204h-12.33v5.886h12.33zM280.823 28.265h-6.911v39.244h7.461V52.83c0-5.65 1.099-10.439 4.24-13.735 2.749-3.061 6.283-4.788 12.487-4.788 2.12 0 3.455.157 5.262.471v-7.22c-1.65-.393-3.063-.472-5.184-.472-8.402 0-15.078 4.945-17.355 12.558v-11.38zM334.807 69C351.534 69 363 60.523 363 47.887c0-12.637-11.466-21.114-28.193-21.114-16.727 0-28.193 8.477-28.193 21.114C306.614 60.523 318.08 69 334.807 69zm0-6.2c-12.329 0-20.261-5.809-20.261-14.913 0-9.105 7.932-14.913 20.261-14.913 12.251 0 20.261 5.808 20.261 14.913 0 9.104-8.01 14.912-20.261 14.912z" - ></path> - </svg> - </a> - <a href="https://docs.astro.build/"> - <h1 class="sr-only">Docs</h1> - <svg - xmlns="http://www.w3.org/2000/svg" - width="226" - height="102" - viewBox="0 0 226 102" - fill="none" - > - <path - fill="currentColor" - d="M25.805 68c14.688 0 24.883-8.41 24.883-21.14 0-12.786-9.62-19.756-24.653-19.756H0V68h25.805zm-14.17-33.005H24.25c8.352 0 14.17 4.09 14.17 12.039 0 8.236-5.3 13.075-14.113 13.075H11.635V34.995zM82.673 69.382c16.704 0 27.418-8.582 27.418-21.83 0-13.248-10.771-21.83-27.418-21.83-16.589 0-27.418 8.582-27.418 21.83 0 13.19 10.83 21.83 27.418 21.83zm0-8.64c-9.1 0-15.149-5.299-15.149-13.19 0-7.891 6.048-13.19 15.15-13.19 9.1 0 15.205 5.299 15.205 13.19 0 7.891-6.105 13.19-15.206 13.19zM141.497 69.382c13.306 0 22.637-5.299 25.978-14.572l-11.866-2.535c-1.67 5.415-6.393 8.295-13.709 8.295-9.216 0-15.033-5.127-15.033-13.018 0-8.006 5.702-13.018 14.918-13.018 7.43 0 12.154 3.053 13.709 8.64l12.038-2.13c-2.707-9.562-12.268-15.322-25.574-15.322-16.128 0-27.302 9.043-27.302 22.003 0 13.133 10.425 21.657 26.841 21.657zM194.94 69.382c14.745 0 23.212-5.01 23.212-14.054 0-7.603-4.665-10.944-15.955-12.096l-11.289-1.094c-5.242-.576-6.97-1.556-6.97-4.09 0-2.765 3.456-4.262 9.792-4.262 7.834 0 13.709 2.476 16.762 6.508l7.315-6.163c-5.069-5.702-13.133-8.41-23.501-8.41-13.997 0-21.888 4.781-21.888 12.903 0 7.546 4.781 11.232 14.803 12.326l12.557 1.383c4.896.518 6.624 1.555 6.624 4.09 0 3.225-3.456 4.723-10.886 4.723-8.352 0-14.688-3.226-18.087-8.007l-8.294 5.818c4.205 6.451 13.709 10.425 25.805 10.425z" - ></path> - </svg> - </a> - </div> - <div style="flex-grow: 1;"></div> - {lang && <LanguageSelect lang={lang} client:idle />} - <div class="search-item"><Search {lang} client:idle /></div> - </nav> -</header> - -<style> - header { - z-index: 11; - height: var(--theme-navbar-height); - width: 100%; - background-color: var(--theme-navbar-bg); - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - position: sticky; - top: 0; - } - - .logo { - direction: ltr; - display: flex; - overflow: hidden; - width: 30px; - font-size: 1rem; - flex-shrink: 0; - font-weight: 600; - line-height: 1; - color: hsla(var(--color-base-white), 100%, 1); - text-decoration: none; - gap: 0.5em; - z-index: -1; - } - - .logo a { - padding: 0.5em 0.25em; - margin: -0.5em -0.25em; - } - - .logo svg { - height: 40px; - width: auto; - display: block; - color: var(--theme-accent); - } - - .logo .hover { - opacity: 0; - } - .logo a { - transition: transform 180ms ease-out; - } - - .logo a:hover, - .logo a:focus { - outline: none; - opacity: 1; - transform: translateY(-2px); - } - - .logo h1 { - font: inherit; - color: inherit; - margin: 0; - } - - .nav-wrapper { - display: flex; - align-items: center; - justify-content: flex-end; - gap: 1em; - width: 100%; - max-width: 82em; - padding: 0 1rem; - } - @media (min-width: 50em) { - header { - position: static; - padding: 2rem 0rem 0 2rem; - } - .logo { - width: auto; - margin: 0; - z-index: 0; - } - .menu-toggle { - display: none; - } - .logo { - width: auto; - } - } - - /** Style Algolia */ - :root { - --docsearch-primary-color: var(--theme-accent); - --docsearch-logo-color: var(--theme-text); - } - - .search-item { - display: none; - position: relative; - z-index: 10; - flex-grow: 1; - padding-right: 0.7rem; - display: flex; - max-width: 200px; - } - :global(.search-item > *) { - flex-grow: 1; - } - @media (min-width: 50em) { - .search-item { - max-width: 400px; - } - } -</style> diff --git a/docs/src/components/Header/LanguageSelect.css b/docs/src/components/Header/LanguageSelect.css deleted file mode 100644 index 4c6cf6123..000000000 --- a/docs/src/components/Header/LanguageSelect.css +++ /dev/null @@ -1,50 +0,0 @@ -.language-select { - flex-grow: 1; - width: 48px; - box-sizing: border-box; - margin: 0; - padding: 0.33em 2rem; - 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; - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); - background-position: 97%; - background-repeat: no-repeat; - background-size: 1.5em 1.5em; - -webkit-font-smoothing: antialiased; - -webkit-appearance: none; -} -.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: 8px; - left: 8px; - pointer-events: none; -} - -@media (min-width: 50em) { - .language-select { - width: 100%; - } -} diff --git a/docs/src/components/Header/LanguageSelect.tsx b/docs/src/components/Header/LanguageSelect.tsx deleted file mode 100644 index 70fb405a4..000000000 --- a/docs/src/components/Header/LanguageSelect.tsx +++ /dev/null @@ -1,102 +0,0 @@ -import type { FunctionalComponent } from 'preact'; -import { h } from 'preact'; -import './LanguageSelect.css'; - -const LanguageSelect: FunctionalComponent<{ lang: string }> = ({ lang }) => { - return ( - <div class="language-select-wrapper"> - <svg - aria-hidden="true" - focusable="false" - role="img" - xmlns="http://www.w3.org/2000/svg" - viewBox="0 0 88.6 77.3" - height="1.2em" - width="1.2em" - > - <path - fill="currentColor" - d="M61,24.6h7.9l18.7,51.6h-7.7l-5.4-15.5H54.3l-5.6,15.5h-7.2L61,24.6z M72.6,55l-8-22.8L56.3,55H72.6z" - /> - <path - fill="currentColor" - d="M53.6,60.6c-10-4-16-9-22-14c0,0,1.3,1.3,0,0c-6,5-20,13-20,13l-4-6c8-5,10-6,19-13c-2.1-1.9-12-13-13-19h8 c4,9,10,14,10,14c10-8,10-19,10-19h8c0,0-1,13-12,24l0,0c5,5,10,9,19,13L53.6,60.6z M1.6,16.6h56v-8h-23v-7h-9v7h-24V16.6z" - /> - </svg> - <select - class="language-select" - value={lang} - aria-label="Select language" - onChange={(e) => { - const newLang = e.target.value; - window.location.pathname = `/${newLang}/getting-started`; - // TODO: Preserve the current page, if it exists: - // const oldPathname = window.location.pathname; - // const oldPathnameParts = oldPathname.split('/'); - // oldPathnameParts.shift(); - // if (/^[a-z]{2}$/.test(oldPathnameParts[0])) { - // oldPathnameParts.shift(); - // } - // if (newLang !== 'en') { - // oldPathnameParts.unshift(newLang); - // } - // window.location.pathname = '/' + oldPathnameParts.join('/'); - }} - > - <option value="en"> - <span>English</span> - </option> - <option value="de"> - <span>Deutsch</span> - </option> - <option value="nl"> - <span>Nederlands</span> - </option> - <option value="pt-br"> - <span>Português do Brasil</span> - </option> - <option value="fi"> - <span>Suomi</span> - </option> - <option value="es"> - <span>Español</span> - </option> - <option value="zh-CN"> - <span>简体中文</span> - </option> - <option value="zh-TW"> - <span>正體中文</span> - </option> - <option value="bg"> - <span>Български</span> - </option> - <option value="fr"> - <span>Français</span> - </option> - <option value="bn"> - <span>বাংলা</span> - </option> - <option value="kr"> - <span>한국어</span> - </option> - <option value="ar"> - <span>العربية</span> - </option> - <option value="da"> - <span>Dansk</span> - </option> - <option value="ja"> - <span>日本語</span> - </option> - <option value="ru"> - <span>Русский</span> - </option> - <option value="it"> - <span>Italiano</span> - </option> - </select> - </div> - ); -}; - -export default LanguageSelect; diff --git a/docs/src/components/Header/Search.css b/docs/src/components/Header/Search.css deleted file mode 100644 index 42da3832c..000000000 --- a/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); -} - -.DocSearch-Modal .DocSearch-Hit a { - box-shadow: none; - border: 1px solid var(--theme-accent); -} - -/** Style Search Bar */ -.search-placeholder { - flex-grow: 1; - text-align: initial; -} -.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 { - 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; - } -} diff --git a/docs/src/components/Header/Search.tsx b/docs/src/components/Header/Search.tsx deleted file mode 100644 index 8f2cfe649..000000000 --- a/docs/src/components/Header/Search.tsx +++ /dev/null @@ -1,93 +0,0 @@ -/* jsxImportSource: react */ -import { useState, useCallback, useRef } from 'react'; -import { createPortal } from 'react-dom'; -import * as docsearch from '@docsearch/react'; -import '@docsearch/css/dist/style.css'; -import './Search.css'; - -const { DocSearchModal, useDocSearchKeyboardEvents } = - (docsearch as unknown as { default: typeof docsearch }).default || docsearch; - -export default function Search(props) { - const [isOpen, setIsOpen] = useState(false); - const searchButtonRef = useRef(); - const [initialQuery, setInitialQuery] = useState(null); - const { lang = 'en' } = props; - - 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 ( - <> - <button - type="button" - ref={searchButtonRef} - onClick={onOpen} - className="search-input" - > - <svg width="24" height="24" fill="none"> - <path - d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" - stroke="currentColor" - strokeWidth="2" - strokeLinecap="round" - strokeLinejoin="round" - /> - </svg> - <span className="search-placeholder">Search</span> - <span className="search-hint"> - <span className="sr-only">Press </span> - <kbd>/</kbd> - <span className="sr-only"> to search</span> - </span> - </button> - {isOpen && - createPortal( - <DocSearchModal - initialQuery={initialQuery} - initialScrollY={window.scrollY} - onClose={onClose} - indexName="astro" - apiKey="0f387260ad74f9cbf4353facd29c919c" - // Set facetFilters once Astro docs have been indexed by language - // searchParameters={{ facetFilters: [`lang:${lang}`] }} - transformItems={(items) => { - 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/docs/src/components/Header/SidebarToggle.tsx b/docs/src/components/Header/SidebarToggle.tsx deleted file mode 100644 index 2be9dee9a..000000000 --- a/docs/src/components/Header/SidebarToggle.tsx +++ /dev/null @@ -1,44 +0,0 @@ -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 ( - <button - type="button" - aria-pressed={sidebarShown ? 'true' : 'false'} - id="menu-toggle" - onClick={() => setSidebarShown(!sidebarShown)} - > - <svg - xmlns="http://www.w3.org/2000/svg" - width="1em" - height="1em" - fill="none" - viewBox="0 0 24 24" - stroke="currentColor" - > - <path - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="2" - d="M4 6h16M4 12h16M4 18h16" - /> - </svg> - <span className="sr-only">Toggle sidebar</span> - </button> - ); -}; - -export default MenuToggle; diff --git a/docs/src/components/Header/SkipToContent.astro b/docs/src/components/Header/SkipToContent.astro deleted file mode 100644 index 9e3844e6f..000000000 --- a/docs/src/components/Header/SkipToContent.astro +++ /dev/null @@ -1,22 +0,0 @@ -<a href="#article" class="sr-only focus:not-sr-only skiplink"><span>Skip to Content</span></a> - -<style> - .skiplink, - .skiplink:focus, - .skiplink:focus-visible { - position: absolute; - padding: 0.25em; - font-size: larger; - top: 0; - left: 0; - right: 0; - z-index: 9; - display: block; - text-align: center; - background-color: var(--theme-text-accent); - color: var(--theme-bg); - border-radius: 0.25em; - outline: var(--theme-bg) solid 1px; - outline-offset: 0; - } -</style> |