diff options
Diffstat (limited to 'smoke/docs-main/src')
20 files changed, 716 insertions, 225 deletions
diff --git a/smoke/docs-main/src/components/Button.astro b/smoke/docs-main/src/components/Button.astro new file mode 100644 index 000000000..e1bddd915 --- /dev/null +++ b/smoke/docs-main/src/components/Button.astro @@ -0,0 +1,173 @@ +--- +const { class: className = '', style, href } = Astro.props; +// Wrap in <span> because Houdini is disabled for a[href] for security + +const { variant = 'primary' } = Astro.props; +const { before, after } = Astro.slots; +--- + + + +<span class={`link pixel variant-${variant} ${before ? 'has-before' : ''} ${after ? 'has-after' : ''} ${className}`.trim()} {style}> + <a {href}> + <slot name="before" /> + <span><slot /></span> + <slot name="after" /> + </a> +</span> + +<style> + .pixel { + --link-color-stop-a: #205eff; + --link-color-stop-b: #c238bd; + + --border-radius: 8; + --pixel-size: 4; + --background: var(--gradient-pop-1); + position: relative; + border-radius: calc(var(--border-radius) * 1px); + } + .pixel::before { + content: ''; + position: absolute; + top: calc(var(--pixel-size) * 1px); + right: 0; + bottom: calc(var(--pixel-size) * 1px); + left: 0; + background: var(--background); + z-index: -1; + } + .pixel::after { + content: ''; + position: absolute; + top: 0; + right: calc(var(--pixel-size) * 1px); + bottom: 0; + left: calc(var(--pixel-size) * 1px); + background: var(--background); + z-index: -1; + } + .pixel.variant-outline { + background: rgba(255, 255, 255, 0); + border-radius: 0; + } + .pixel.variant-outline::before { + background: rgba(255, 255, 255, 0); + border: calc(var(--pixel-size) * 1px) solid var(--background); + border-top: 0; + border-bottom: 0; + } + .pixel.variant-outline::after { + background: rgba(255, 255, 255, 0); + border: calc(var(--pixel-size) * 1px) solid var(--background); + border-right: 0; + border-left: 0; + } + @supports (background: paint(pixel)) { + :global(.js) .pixel { + background: none !important; + } + :global(.js) .pixel::before { + content: ''; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: block; + z-index: -1; + overflow: hidden; + border-radius: 0; + background: var(--background); + -webkit-mask-image: paint(pixel); + mask-image: paint(pixel); + } + :global(.js) .pixel::after { + content: none; + } + } + .link { + --border-radius: 8; + --duration: 200ms; + --delay: 30ms; + --background: linear-gradient(180deg, var(--link-color-stop-a), var(--link-color-stop-b)); + display: flex; + color: white; + font-family: var(--font-display); + font-size: 1.25rem; + width: max-content; + transition-property: transform, --link-color-stop-a, --link-color-stop-b; + transition-duration: var(--duration); + transition-delay: var(--delay); + transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1); + } + .link:hover, + .link:focus-within { + transform: translateY(calc(var(--pixel-size) * -0.5px)); + } + .link:active { + transform: translateY(0); + } + .has-before a :first-child { + margin-left: -1rem; + margin-right: 0.25rem; + } + .has-before a :last-child { + margin-left: 0.25rem; + margin-right: -1rem; + } + a { + display: flex; + align-items: center; + justify-content: center; + padding: 0.67rem 1.25rem; + width: 100%; + height: 100%; + text-decoration: none; + color: inherit !important; + } + a > :global(* + *) { + margin-left: 0.25rem; + } + + .variant-primary { + --variant: primary; + --background: linear-gradient(180deg, var(--link-color-stop-a), var(--link-color-stop-b)); + } + .variant-primary:hover, + .variant-primary:focus-within { + --link-color-stop-a: #6D39FF; + --link-color-stop-b: #AF43FF; + } + .variant-primary:active { + --link-color-stop-a: #5F31E1; + --link-color-stop-b: #A740F3; + } + + .variant-outline { + --variant: outline; + --background: none; + color: var(--background); + } + .variant-outline > a::before { + position: absolute; + top: 0; + right: calc(var(--pixel-size) * 1px); + bottom: calc(var(--pixel-size) * 1px); + left: calc(var(--pixel-size) * 1px); + content: ""; + display: block; + transform-origin: bottom center; + background: linear-gradient(to top, var(--background), rgba(255, 255, 255, 0)); + opacity: 0.3; + transform: scaleY(0); + transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1); + } + .variant-outline:hover > a::before, + .variant-outline:focus-within > a::before { + transform: scaleY(1); + } + .variant-outline:active > a::before { + transform: scaleY(1); + } +</style> diff --git a/smoke/docs-main/src/components/HeadCommon.astro b/smoke/docs-main/src/components/HeadCommon.astro index daa39db13..c2fd24a61 100644 --- a/smoke/docs-main/src/components/HeadCommon.astro +++ b/smoke/docs-main/src/components/HeadCommon.astro @@ -30,6 +30,22 @@ } </script> +<!-- Double-click to highlight code blocks (inline only). --> +<script> + document.addEventListener('dblclick', (el) => { + if (el.target.nodeName !== 'CODE') { + return; + } + if (el.target.parentElement.nodeName === 'PRE') { + return; + } + let range = new Range(); + range.setStart(el.target, 0); + range.setEnd(el.target, 1); + document.getSelection().removeAllRanges(); + document.getSelection().addRange(range); + }); +</script> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-130280175-15"></script> <script> diff --git a/smoke/docs-main/src/components/Header/Header.astro b/smoke/docs-main/src/components/Header/Header.astro index 9bcf89ca7..249260883 100644 --- a/smoke/docs-main/src/components/Header/Header.astro +++ b/smoke/docs-main/src/components/Header/Header.astro @@ -125,7 +125,6 @@ const lang = currentPage && getLanguageFromURL(currentPage); justify-content: flex-end; gap: 1em; width: 100%; - max-width: 82em; padding: 0 1rem; } @media (min-width: 50em) { diff --git a/smoke/docs-main/src/components/Header/Search.tsx b/smoke/docs-main/src/components/Header/Search.tsx index c4fd6f984..c42bd8847 100644 --- a/smoke/docs-main/src/components/Header/Search.tsx +++ b/smoke/docs-main/src/components/Header/Search.tsx @@ -57,7 +57,7 @@ export default function Search(props) { initialScrollY={window.scrollY} onClose={onClose} indexName="astro" - appId='7AFBU8EPJU' + appId="7AFBU8EPJU" apiKey="4440670147c44d744fd8da35ff652518" searchParameters={{ facetFilters: [[`lang:${lang}`]] }} getMissingResultsUrl={({ query }) => `https://github.com/withastro/docs/issues/new?title=Missing+results+for+query+%22${encodeURIComponent(query)}%22`} diff --git a/smoke/docs-main/src/components/LeftSidebar/LeftSidebar.astro b/smoke/docs-main/src/components/LeftSidebar/LeftSidebar.astro index 66963e34e..5cb9651b0 100644 --- a/smoke/docs-main/src/components/LeftSidebar/LeftSidebar.astro +++ b/smoke/docs-main/src/components/LeftSidebar/LeftSidebar.astro @@ -1,64 +1,41 @@ --- +import Sponsors from './Sponsors.astro'; import { SIDEBAR } from '../../config.ts'; import { getLanguageFromURL, removeLeadingSlash, removeTrailingSlash } from '../../util.ts'; +import SidebarContent from './SidebarContent.astro'; +import SidebarSectionToggle from './SidebarSectionToggle.tsx'; const { currentPage } = Astro.props; - // Get the slug w/o a leading or trailing slash const currentPageMatch = removeLeadingSlash(removeTrailingSlash(currentPage)); const langCode = getLanguageFromURL(currentPage); // SIDEBAR is a flat array. Group it by sections to properly render. -const sidebarSections = SIDEBAR[langCode].reduce((col, item) => { +const sidebarSections = SIDEBAR[langCode].reduce((collection, item) => { if (item.header) { - col.push({ ...item, children: [] }); + collection.push({ ...item, type: item.type, children: [] }); } else { - col[col.length - 1].children.push(item); + collection[collection.length - 1].children.push(item); } - return col; + return collection; }, []); + +const learnSections = sidebarSections.filter((section) => section.type === 'learn'); +const apiSections = sidebarSections.filter((section) => section.type === 'api'); +let activeTab = 'learn'; +for (const section of sidebarSections) { + if (section.children.some((item) => item.link === currentPageMatch)) { + activeTab = section.type; + } +} --- <nav aria-labelledby="grid-left"> - <ul class="nav-groups"> + <SidebarSectionToggle client:load defaultActiveTab={activeTab} /> + <ul class={`nav-groups`}> + <SidebarContent type={'learn'} defaultActiveTab={activeTab} sidebarSections={learnSections} {currentPageMatch} /> + <SidebarContent type={'api'} defaultActiveTab={activeTab} sidebarSections={apiSections} {currentPageMatch} /> <li> - <div class="nav-group"> - <h2 class="sponsors-title">Sponsored by</h2> - <div class="sponsors"> - <a href="https://www.netlify.com/" aria-label="Go to Netlify website"> - <svg class="sponsor-logo__netlify" viewBox="0 0 147 40" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" - ><radialGradient - id="netlify-gradient" - cx="-779.0521" - cy="1839.7205" - gradientTransform="matrix(0 38.301 44.1228 0 -81154.2578 29839.2441)" - gradientUnits="userSpaceOnUse" - r="1.0011"><stop offset="0" stop-color="#20c6b7"></stop><stop offset="1" stop-color="#4d9abf"></stop></radialGradient - ><path - clip-rule="evenodd" - d="m53.37 12.98.12 2.2c1.4-1.7 3.24-2.55 5.53-2.55 3.95 0 5.96 2.27 6.03 6.8v12.57h-4.26v-12.32c0-1.21-.26-2.1-.78-2.68s-1.37-.87-2.55-.87c-1.72 0-3 .78-3.84 2.34v13.53h-4.26v-19.02zm24.38 19.37c-2.7 0-4.89-.85-6.57-2.56-1.68-1.7-2.52-3.98-2.52-6.81v-.53c0-1.9.36-3.59 1.1-5.09.73-1.49 1.76-2.66 3.08-3.49s2.79-1.25 4.42-1.25c2.58 0 4.58.83 5.99 2.48s2.11 3.99 2.11 7.01v1.72h-12.4c.13 1.57.65 2.81 1.57 3.73s2.07 1.37 3.46 1.37c1.95 0 3.54-.79 4.77-2.37l2.3 2.2c-.76 1.14-1.77 2.02-3.04 2.65s-2.69.94-4.27.94zm-.51-16.29c-1.17 0-2.11.41-2.83 1.23s-1.18 1.96-1.38 3.43h8.12v-.32c-.09-1.43-.47-2.51-1.14-3.24-.67-.74-1.59-1.1-2.77-1.1zm16.76-7.7v4.62h3.35v3.16h-3.35v10.62c0 .73.14 1.25.43 1.57s.8.48 1.54.48c.5 0 1-.06 1.49-.18v3.31c-.97.27-1.9.4-2.81.4-3.27 0-4.91-1.81-4.91-5.43v-10.77h-3.12v-3.16h3.12v-4.63zm11.14 23.64h-4.26v-27h4.26zm9.17 0h-4.26v-19.02h4.26zm-4.52-23.96c0-.65.21-1.2.62-1.63.42-.43 1.01-.65 1.78-.65s1.37.22 1.79.65.63.98.63 1.64c0 .64-.21 1.18-.63 1.61s-1.02.64-1.79.64-1.36-.21-1.78-.64c-.41-.44-.62-.98-.62-1.62zm10.66 23.96v-15.86h-2.89v-3.16h2.89v-1.74c0-2.11.58-3.74 1.75-4.89s2.81-1.72 4.91-1.72c.75 0 1.54.11 2.39.32l-.1 3.34c-.54-.1-1.08-.15-1.63-.14-2.04 0-3.05 1.05-3.05 3.15v1.69h3.86v3.16h-3.86v15.85zm17.87-6.12 3.86-12.9h4.54l-7.54 21.9c-1.16 3.2-3.12 4.8-5.89 4.8-.62 0-1.3-.11-2.05-.32v-3.31l.81.05c1.07 0 1.88-.2 2.43-.59.54-.39.97-1.05 1.29-1.98l.61-1.64-6.66-18.93h4.6z" - fill-rule="evenodd"></path><path - d="m27.89 14.14-.01-.01c-.01 0-.02-.01-.02-.01-.02-.02-.03-.06-.03-.09l.77-4.73 3.62 3.63-3.77 1.6c-.01 0-.02.01-.03.01h-.02s-.01-.01-.02-.02c-.14-.16-.31-.29-.49-.38zm5.26-.29 3.88 3.88c.81.81 1.21 1.21 1.35 1.67.02.07.04.14.05.21l-9.26-3.92s-.01 0-.01-.01c-.04-.02-.08-.03-.08-.07s.04-.06.08-.07l.01-.01zm5.12 7c-.2.38-.59.77-1.25 1.43l-4.37 4.37-5.65-1.18-.03-.01c-.05-.01-.1-.02-.1-.06-.04-.47-.28-.9-.66-1.19-.02-.02-.02-.06-.01-.09v-.01l1.06-6.53v-.02c.01-.05.01-.11.06-.11.46-.06.88-.3 1.16-.67.01-.01.01-.02.03-.03.03-.01.07 0 .1.01zm-6.62 6.8-7.19 7.19 1.23-7.56v-.01c0-.01 0-.02.01-.03.01-.02.04-.03.06-.04h.01c.27-.11.51-.29.69-.52.02-.03.05-.06.09-.06h.03zm-8.71 8.71-.81.81-8.95-12.94s-.01-.01-.01-.01c-.01-.02-.03-.04-.03-.06s.01-.03.02-.04l.01-.01c.03-.04.05-.08.07-.12l.02-.03c.01-.02.03-.05.05-.06s.05-.01.07 0l9.92 2.05c.03 0 .05.02.08.03.01.01.02.03.02.04.14.53.52.97 1.03 1.17.03.01.02.05 0 .08-.01.01-.01.03-.01.05-.12.74-1.19 7.27-1.48 9.04zm-1.69 1.69c-.6.59-.95.9-1.35 1.03-.39.12-.81.12-1.21 0-.47-.15-.87-.55-1.67-1.36l-8.99-8.99 2.35-3.64c.01-.02.02-.03.04-.05s.06-.01.09 0c.54.16 1.12.13 1.64-.08.03-.01.05-.02.07 0l.03.03zm-14.09-10.19-2.06-2.06 4.07-1.74c.01 0 .02-.01.03-.01.03 0 .05.03.07.07.04.06.08.12.13.18l.01.02c.01.02 0 .03-.01.05zm-2.98-2.97-2.61-2.61c-.44-.44-.77-.77-.99-1.04l7.94 1.65h.03c.05.01.1.02.1.06 0 .05-.06.07-.11.09l-.02.01zm-4.05-5c.01-.17.04-.33.09-.5.15-.47.55-.87 1.36-1.67l3.34-3.34c1.54 2.23 3.08 4.46 4.63 6.69.03.04.06.08.03.11-.15.16-.29.34-.4.53-.01.02-.03.05-.05.06-.01.01-.03 0-.04 0zm5.68-6.4 4.49-4.49c.42.19 1.96.83 3.33 1.41 1.04.44 1.99.84 2.29.97.03.01.06.02.07.05.01.02 0 .04 0 .06-.14.66.05 1.35.52 1.83.03.03 0 .07-.03.11l-.01.02-4.56 7.06c-.01.02-.02.04-.04.05s-.06.01-.09 0c-.18-.05-.36-.07-.54-.07-.16 0-.34.03-.52.06-.02 0-.04.01-.05 0-.02-.01-.03-.03-.05-.05zm5.4-5.4 5.81-5.81c.81-.81 1.21-1.21 1.67-1.36.39-.12.81-.12 1.21 0 .47.15.87.55 1.67 1.36l1.26 1.26-4.14 6.4c-.01.02-.02.03-.04.05s-.06.01-.09 0c-.66-.2-1.38-.06-1.92.37-.03.03-.07.01-.1 0-.53-.24-4.73-2.01-5.33-2.27zm12.5-3.67 3.82 3.82-.92 5.7v.02c0 .01 0 .03-.01.04-.01.02-.03.02-.05.03-.2.06-.38.15-.55.27-.01.01-.01.01-.02.02s-.02.02-.04.02c-.01 0-.03 0-.04-.01l-5.82-2.47-.01-.01c-.04-.02-.08-.03-.08-.07-.03-.32-.14-.64-.31-.91-.03-.05-.06-.09-.03-.14zm-3.93 8.6 5.45 2.31c.03.01.06.03.08.06.01.02.01.04 0 .06-.02.08-.03.17-.03.26v.15c0 .04-.04.05-.08.07h-.01c-.86.37-12.13 5.17-12.15 5.17s-.03 0-.05-.02c-.03-.03 0-.07.03-.11 0-.01.01-.01.01-.02l4.48-6.94.01-.01c.03-.04.06-.09.1-.09l.05.01c.1.01.19.03.28.03.68 0 1.31-.33 1.69-.9.01-.02.02-.03.03-.04.04-.01.08 0 .11.01zm-6.25 9.19 12.28-5.24s.02 0 .03.02c.07.07.12.11.18.15l.03.02c.02.01.05.03.05.06v.02l-1.05 6.46v.03c-.01.05-.01.11-.06.11-.57.04-1.08.36-1.37.85v.01c-.01.02-.03.05-.05.06s-.05.01-.07 0l-9.79-2.02c-.02-.02-.16-.53-.18-.53z" - fill="url(#netlify-gradient)"></path></svg - > - </a> - </div> - </div> + <Sponsors /> </li> - {sidebarSections.map((section) => ( - <li> - <div class="nav-group"> - <h2 class="nav-group-title">{section.text}</h2> - <ul> - {section.children.map((child) => ( - <li class="nav-link"> - <a href={`${Astro.site.pathname}${child.link}`} aria-current={`${currentPageMatch === child.link ? 'page' : 'false'}`}> - {child.text} - </a> - </li> - ))} - </ul> - </div> - </li> - ))} </ul> </nav> @@ -75,96 +52,13 @@ const sidebarSections = SIDEBAR[langCode].reduce((col, item) => { nav { width: 100%; margin-right: 1rem; + padding-top: 0rem; } .nav-groups { height: 100%; - padding: 2rem 0; overflow-x: visible; overflow-y: auto; max-height: 100vh; - - > li + li { - margin-top: 1.75rem; - } - - > :first-child { - padding-top: var(--doc-padding); - } - - > :last-child { - padding-bottom: 2rem; - margin-bottom: var(--theme-navbar-height); - } - - @media (min-width: 50em) { - padding: 0; - } - } - - .nav-group-title { - font-size: 1rem; - font-weight: 700; - padding: 0.1rem 1rem; - text-transform: uppercase; - margin-bottom: 0.5rem; - } - - .nav-link a { - font-size: 1rem; - margin: 1px; - padding: 0.3rem 1rem; - font: inherit; - color: inherit; - text-decoration: none; - display: block; - - &:hover, - &:focus { - background-color: var(--theme-bg-hover); - } - - &[aria-current='page'] { - color: var(--theme-text-accent); - background-color: var(--theme-bg-accent); - font-weight: 600; - } - } - - :global(:root.theme-dark) .nav-link a[aria-current='page'] { - color: hsla(var(--color-base-white), 100%, 1); - } - - .sponsors { - display: grid; - padding-left: 1rem; - padding-top: 0.25rem; - margin-bottom: -0.375rem; // logo overshoot creates extra perceived space - grid-gap: 0.5rem; - grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); - - svg { - color: var(--theme-text); - fill: currentColor; - } - } - - .sponsor-logo__netlify { - width: 90px; - } - - .sponsor-logo__vercel { - width: 90px; - } - :global(:root.theme-dark .sponsors-title) { - color: hsl(var(--color-base-gray), 75%); - } - .sponsors-title { - color: hsl(var(--color-base-gray), 25%); - font-size: 0.8em; - font-weight: 300; - letter-spacing: 0.0625em; - margin: 0 0 0.5rem; - padding-left: 1rem; - text-transform: uppercase; + padding-bottom: var(--theme-navbar-height); } </style> diff --git a/smoke/docs-main/src/components/LeftSidebar/SidebarContent.astro b/smoke/docs-main/src/components/LeftSidebar/SidebarContent.astro new file mode 100644 index 000000000..e50a8e7e0 --- /dev/null +++ b/smoke/docs-main/src/components/LeftSidebar/SidebarContent.astro @@ -0,0 +1,84 @@ +--- +const { type, defaultActiveTab, sidebarSections, currentPageMatch } = Astro.props; +--- + +{sidebarSections.length === 0 && ( + <li class={`nav-group ${type}`}> + <div class="placeholder sm-hidden">No Translations Found</div> + <a class="placeholder" href="/"> + View in English + </a> + </li> +)} +{sidebarSections.map((section) => ( + <li class={`nav-group ${type} ${defaultActiveTab === type ? 'active' : ''}`}> + <div> + <h2 class="nav-group-title">{section.text}</h2> + <ul> + {section.children.map((child) => ( + <li class="nav-link"> + <a href={`${Astro.site.pathname}${child.link}`} aria-current={`${currentPageMatch === child.link ? 'page' : 'false'}`}> + {child.text} + </a> + </li> + ))} + </ul> + </div> + </li> +))} + +<style lang="scss"> + .nav-group { + margin-top: 1.75rem; + } + .nav-group .placeholder { + opacity: 0.6; + text-align: center; + display: block; + } + @media (max-width: 50em) { + .sm-hidden { + display: none !important; + } + } + @media (min-width: 50em) { + .nav-group { + display: none; + } + } + .nav-group.active { + display: block; + } + .nav-group-title { + font-size: 1rem; + font-weight: 700; + padding: 0.1rem 1rem; + text-transform: uppercase; + margin-bottom: 0.5rem; + } + + .nav-link a { + font-size: 1rem; + margin: 1px; + padding: 0.3rem 1rem; + font: inherit; + color: inherit; + text-decoration: none; + display: block; + + &:hover, + &:focus { + background-color: var(--theme-bg-hover); + } + + &[aria-current='page'] { + color: var(--theme-text-accent); + background-color: var(--theme-bg-accent); + font-weight: 600; + } + } + + :global(:root.theme-dark) .nav-link a[aria-current='page'] { + color: hsla(var(--color-base-white), 100%, 1); + } +</style> diff --git a/smoke/docs-main/src/components/LeftSidebar/SidebarSectionToggle.css b/smoke/docs-main/src/components/LeftSidebar/SidebarSectionToggle.css new file mode 100644 index 000000000..68e873a87 --- /dev/null +++ b/smoke/docs-main/src/components/LeftSidebar/SidebarSectionToggle.css @@ -0,0 +1,18 @@ +.SidebarSectionToggle { + display: flex; +} +.SidebarSectionToggle button { + flex-grow: 1; + justify-content: center; + border-radius: 0; + cursor: pointer; + padding: 0.6rem; + border-bottom: 4px solid var(--theme-divider); +} +.SidebarSectionToggle button.is-icon { + flex-grow: 0; +} +.SidebarSectionToggle button.active { + color: var(--theme-accent); + border-bottom-color: var(--theme-accent); +} diff --git a/smoke/docs-main/src/components/LeftSidebar/SidebarSectionToggle.tsx b/smoke/docs-main/src/components/LeftSidebar/SidebarSectionToggle.tsx new file mode 100644 index 000000000..13fc8f74c --- /dev/null +++ b/smoke/docs-main/src/components/LeftSidebar/SidebarSectionToggle.tsx @@ -0,0 +1,24 @@ +import { h } from 'preact'; +import { useState } from 'preact/hooks'; +import './SidebarSectionToggle.css'; + +const SidebarSectionToggle = ({ defaultActiveTab }) => { + const [activeTab, setActiveTab] = useState(defaultActiveTab); + function toggleType(type: 'learn' | 'api') { + document.querySelectorAll(`li.nav-group`).forEach((el) => el.classList.remove('active')); + document.querySelectorAll(`li.nav-group.${type}`).forEach((el) => el.classList.add('active')); + setActiveTab(type); + } + return ( + <div class="SidebarSectionToggle"> + <button class={activeTab === 'learn' ? 'active' : ''} onClick={() => toggleType('learn')}> + Learn + </button> + <button class={activeTab === 'api' ? 'active' : ''} onClick={() => toggleType('api')}> + API + </button> + </div> + ); +}; + +export default SidebarSectionToggle; diff --git a/smoke/docs-main/src/components/LeftSidebar/Sponsors.astro b/smoke/docs-main/src/components/LeftSidebar/Sponsors.astro new file mode 100644 index 000000000..cb4d427f3 --- /dev/null +++ b/smoke/docs-main/src/components/LeftSidebar/Sponsors.astro @@ -0,0 +1,64 @@ +<div class="sponsors"> + <h2 class="sponsors-title">Sponsored by</h2> + <div class="sponsor"> + <a href="https://www.netlify.com/" aria-label="Go to Netlify website"> + <svg class="sponsor-logo__netlify" viewBox="0 0 147 40" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" + ><radialGradient + id="netlify-gradient" + cx="-779.0521" + cy="1839.7205" + gradientTransform="matrix(0 38.301 44.1228 0 -81154.2578 29839.2441)" + gradientUnits="userSpaceOnUse" + r="1.0011"><stop offset="0" stop-color="#20c6b7"></stop><stop offset="1" stop-color="#4d9abf"></stop></radialGradient + ><path + clip-rule="evenodd" + d="m53.37 12.98.12 2.2c1.4-1.7 3.24-2.55 5.53-2.55 3.95 0 5.96 2.27 6.03 6.8v12.57h-4.26v-12.32c0-1.21-.26-2.1-.78-2.68s-1.37-.87-2.55-.87c-1.72 0-3 .78-3.84 2.34v13.53h-4.26v-19.02zm24.38 19.37c-2.7 0-4.89-.85-6.57-2.56-1.68-1.7-2.52-3.98-2.52-6.81v-.53c0-1.9.36-3.59 1.1-5.09.73-1.49 1.76-2.66 3.08-3.49s2.79-1.25 4.42-1.25c2.58 0 4.58.83 5.99 2.48s2.11 3.99 2.11 7.01v1.72h-12.4c.13 1.57.65 2.81 1.57 3.73s2.07 1.37 3.46 1.37c1.95 0 3.54-.79 4.77-2.37l2.3 2.2c-.76 1.14-1.77 2.02-3.04 2.65s-2.69.94-4.27.94zm-.51-16.29c-1.17 0-2.11.41-2.83 1.23s-1.18 1.96-1.38 3.43h8.12v-.32c-.09-1.43-.47-2.51-1.14-3.24-.67-.74-1.59-1.1-2.77-1.1zm16.76-7.7v4.62h3.35v3.16h-3.35v10.62c0 .73.14 1.25.43 1.57s.8.48 1.54.48c.5 0 1-.06 1.49-.18v3.31c-.97.27-1.9.4-2.81.4-3.27 0-4.91-1.81-4.91-5.43v-10.77h-3.12v-3.16h3.12v-4.63zm11.14 23.64h-4.26v-27h4.26zm9.17 0h-4.26v-19.02h4.26zm-4.52-23.96c0-.65.21-1.2.62-1.63.42-.43 1.01-.65 1.78-.65s1.37.22 1.79.65.63.98.63 1.64c0 .64-.21 1.18-.63 1.61s-1.02.64-1.79.64-1.36-.21-1.78-.64c-.41-.44-.62-.98-.62-1.62zm10.66 23.96v-15.86h-2.89v-3.16h2.89v-1.74c0-2.11.58-3.74 1.75-4.89s2.81-1.72 4.91-1.72c.75 0 1.54.11 2.39.32l-.1 3.34c-.54-.1-1.08-.15-1.63-.14-2.04 0-3.05 1.05-3.05 3.15v1.69h3.86v3.16h-3.86v15.85zm17.87-6.12 3.86-12.9h4.54l-7.54 21.9c-1.16 3.2-3.12 4.8-5.89 4.8-.62 0-1.3-.11-2.05-.32v-3.31l.81.05c1.07 0 1.88-.2 2.43-.59.54-.39.97-1.05 1.29-1.98l.61-1.64-6.66-18.93h4.6z" + fill-rule="evenodd"></path><path + d="m27.89 14.14-.01-.01c-.01 0-.02-.01-.02-.01-.02-.02-.03-.06-.03-.09l.77-4.73 3.62 3.63-3.77 1.6c-.01 0-.02.01-.03.01h-.02s-.01-.01-.02-.02c-.14-.16-.31-.29-.49-.38zm5.26-.29 3.88 3.88c.81.81 1.21 1.21 1.35 1.67.02.07.04.14.05.21l-9.26-3.92s-.01 0-.01-.01c-.04-.02-.08-.03-.08-.07s.04-.06.08-.07l.01-.01zm5.12 7c-.2.38-.59.77-1.25 1.43l-4.37 4.37-5.65-1.18-.03-.01c-.05-.01-.1-.02-.1-.06-.04-.47-.28-.9-.66-1.19-.02-.02-.02-.06-.01-.09v-.01l1.06-6.53v-.02c.01-.05.01-.11.06-.11.46-.06.88-.3 1.16-.67.01-.01.01-.02.03-.03.03-.01.07 0 .1.01zm-6.62 6.8-7.19 7.19 1.23-7.56v-.01c0-.01 0-.02.01-.03.01-.02.04-.03.06-.04h.01c.27-.11.51-.29.69-.52.02-.03.05-.06.09-.06h.03zm-8.71 8.71-.81.81-8.95-12.94s-.01-.01-.01-.01c-.01-.02-.03-.04-.03-.06s.01-.03.02-.04l.01-.01c.03-.04.05-.08.07-.12l.02-.03c.01-.02.03-.05.05-.06s.05-.01.07 0l9.92 2.05c.03 0 .05.02.08.03.01.01.02.03.02.04.14.53.52.97 1.03 1.17.03.01.02.05 0 .08-.01.01-.01.03-.01.05-.12.74-1.19 7.27-1.48 9.04zm-1.69 1.69c-.6.59-.95.9-1.35 1.03-.39.12-.81.12-1.21 0-.47-.15-.87-.55-1.67-1.36l-8.99-8.99 2.35-3.64c.01-.02.02-.03.04-.05s.06-.01.09 0c.54.16 1.12.13 1.64-.08.03-.01.05-.02.07 0l.03.03zm-14.09-10.19-2.06-2.06 4.07-1.74c.01 0 .02-.01.03-.01.03 0 .05.03.07.07.04.06.08.12.13.18l.01.02c.01.02 0 .03-.01.05zm-2.98-2.97-2.61-2.61c-.44-.44-.77-.77-.99-1.04l7.94 1.65h.03c.05.01.1.02.1.06 0 .05-.06.07-.11.09l-.02.01zm-4.05-5c.01-.17.04-.33.09-.5.15-.47.55-.87 1.36-1.67l3.34-3.34c1.54 2.23 3.08 4.46 4.63 6.69.03.04.06.08.03.11-.15.16-.29.34-.4.53-.01.02-.03.05-.05.06-.01.01-.03 0-.04 0zm5.68-6.4 4.49-4.49c.42.19 1.96.83 3.33 1.41 1.04.44 1.99.84 2.29.97.03.01.06.02.07.05.01.02 0 .04 0 .06-.14.66.05 1.35.52 1.83.03.03 0 .07-.03.11l-.01.02-4.56 7.06c-.01.02-.02.04-.04.05s-.06.01-.09 0c-.18-.05-.36-.07-.54-.07-.16 0-.34.03-.52.06-.02 0-.04.01-.05 0-.02-.01-.03-.03-.05-.05zm5.4-5.4 5.81-5.81c.81-.81 1.21-1.21 1.67-1.36.39-.12.81-.12 1.21 0 .47.15.87.55 1.67 1.36l1.26 1.26-4.14 6.4c-.01.02-.02.03-.04.05s-.06.01-.09 0c-.66-.2-1.38-.06-1.92.37-.03.03-.07.01-.1 0-.53-.24-4.73-2.01-5.33-2.27zm12.5-3.67 3.82 3.82-.92 5.7v.02c0 .01 0 .03-.01.04-.01.02-.03.02-.05.03-.2.06-.38.15-.55.27-.01.01-.01.01-.02.02s-.02.02-.04.02c-.01 0-.03 0-.04-.01l-5.82-2.47-.01-.01c-.04-.02-.08-.03-.08-.07-.03-.32-.14-.64-.31-.91-.03-.05-.06-.09-.03-.14zm-3.93 8.6 5.45 2.31c.03.01.06.03.08.06.01.02.01.04 0 .06-.02.08-.03.17-.03.26v.15c0 .04-.04.05-.08.07h-.01c-.86.37-12.13 5.17-12.15 5.17s-.03 0-.05-.02c-.03-.03 0-.07.03-.11 0-.01.01-.01.01-.02l4.48-6.94.01-.01c.03-.04.06-.09.1-.09l.05.01c.1.01.19.03.28.03.68 0 1.31-.33 1.69-.9.01-.02.02-.03.03-.04.04-.01.08 0 .11.01zm-6.25 9.19 12.28-5.24s.02 0 .03.02c.07.07.12.11.18.15l.03.02c.02.01.05.03.05.06v.02l-1.05 6.46v.03c-.01.05-.01.11-.06.11-.57.04-1.08.36-1.37.85v.01c-.01.02-.03.05-.05.06s-.05.01-.07 0l-9.79-2.02c-.02-.02-.16-.53-.18-.53z" + fill="url(#netlify-gradient)"></path></svg + > + </a> + </div> +</div> + +<style> + .sponsors { + opacity: 0.75; + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + padding: 2rem 0; + } + .sponsor { + margin-bottom: -0.375rem; + /* display: grid; + padding-left: 1rem; + padding: 0.25rem; + grid-gap: 0.5rem; + grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); */ + } + svg { + color: var(--theme-text); + fill: currentColor; + } + + .sponsor-logo__netlify { + width: 90px; + } + + .sponsor-logo__vercel { + width: 90px; + } + :global(:root.theme-dark .sponsors-title) { + color: hsl(var(--color-base-gray), 75%); + } + .sponsors-title { + color: hsl(var(--color-base-gray), 25%); + font-size: 0.8em; + font-weight: 300; + letter-spacing: 0.0625em; + margin: 0 0; + text-transform: uppercase; + } +</style> diff --git a/smoke/docs-main/src/components/PageContent/ArticleNavigationButton.astro b/smoke/docs-main/src/components/PageContent/ArticleNavigationButton.astro new file mode 100644 index 000000000..d080ce563 --- /dev/null +++ b/smoke/docs-main/src/components/PageContent/ArticleNavigationButton.astro @@ -0,0 +1,55 @@ +--- +const { item, rel } = Astro.props; +--- + +<a class={rel === 'next' ? 'rtl' : 'ltr'} rel="prev" href={new URL(item.link, Astro.site).pathname}> + {rel === 'prev' && ( + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" height="32" width="32" fill="currentColor"> + <path d="M447.1 256C447.1 273.7 433.7 288 416 288H109.3l105.4 105.4c12.5 12.5 12.5 32.75 0 45.25C208.4 444.9 200.2 448 192 448s-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L109.3 224H416C433.7 224 447.1 238.3 447.1 256z" /> + </svg> + )} + {rel === 'next' && ( + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" height="32" width="32" fill="currentColor"> + <path d="M438.6 278.6l-160 160C272.4 444.9 264.2 448 256 448s-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L338.8 288H32C14.33 288 .0016 273.7 .0016 256S14.33 224 32 224h306.8l-105.4-105.4c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160C451.1 245.9 451.1 266.1 438.6 278.6z" /> + </svg> + )} + <div class="copy"> + <div class="heading">{rel === 'next' ? 'Next Page' : 'Back'}</div> + <div class="name">{item.text}</div> + </div> +</a> + +<style> + a { + flex-grow: 1; + flex-shrink: 0; + border: 1px solid var(--theme-divider); + padding: 1rem 1.25rem; + display: flex; + box-shadow: 0px 1px 2px var(--theme-text-lighter); + text-decoration: none; + color: var(--theme-text-lighter); + } + a:hover { + color: var(--theme-text-accent); + border: 1px solid var(--theme-accent); + } + .copy { + flex-grow: 1; + } + a.ltr { + text-align: right; + } + a.rtl { + flex-direction: row-reverse; + } + .heading { + color: var(--theme-text-light); + margin-bottom: -0.2rem; + } + .name { + font-size: 1.3rem; + font-weight: bold; + color: var(--theme-text); + } +</style> diff --git a/smoke/docs-main/src/components/PageContent/PageContent.astro b/smoke/docs-main/src/components/PageContent/PageContent.astro index 01d88a256..849ff4de4 100644 --- a/smoke/docs-main/src/components/PageContent/PageContent.astro +++ b/smoke/docs-main/src/components/PageContent/PageContent.astro @@ -1,5 +1,6 @@ --- import MoreMenu from '../RightSidebar/MoreMenu.astro'; +import ArticleNavigationButton from './ArticleNavigationButton.astro'; import TableOfContents from '../RightSidebar/TableOfContents.tsx'; import { getLanguageFromURL } from '../../util.ts'; import { SIDEBAR } from '../../config.ts'; @@ -18,33 +19,17 @@ const previous = index !== -1 ? (index === 0 ? null : links[index - 1]) : null; <section class="main-section"> <h1 class="content-title" id="overview">{title}</h1> {headers && ( - <nav class="block sm-hidden"> + <nav class="block lg-hidden"> <TableOfContents client:media="(max-width: 50em)" headers={headers} /> + <MoreMenu editHref={githubEditUrl} /> </nav> )} <slot /> </section> - <nav class="block sm-hidden"> - <MoreMenu editHref={githubEditUrl} /> - </nav> {(previous || next) && ( - <aside> - {previous && ( - <div> - Previous Article:{' '} - <a rel="prev" href={new URL(previous.link, Astro.site).pathname}> - {previous.text} - </a> - </div> - )} - {next && ( - <div> - Next Article:{' '} - <a rel="next" href={new URL(next.link, Astro.site).pathname}> - {next.text} - </a> - </div> - )} + <aside class="next-previous-nav"> + {previous && <ArticleNavigationButton rel="prev" item={previous} />} + {next && <ArticleNavigationButton rel="next" item={next} />} </aside> )} </article> @@ -57,6 +42,7 @@ const previous = index !== -1 ? (index === 0 ? null : links[index - 1]) : null; height: 100%; display: flex; flex-direction: column; + margin: auto; } .content > section { margin-bottom: 4rem; @@ -64,9 +50,16 @@ const previous = index !== -1 ? (index === 0 ? null : links[index - 1]) : null; .block { display: block; } + .next-previous-nav { + display: flex; + flex-wrap: wrap; + width: auto; + gap: 1rem; + margin-bottom: 1.5rem; + } - @media (min-width: 50em) { - .sm-hidden { + @media (min-width: 72em) { + .lg-hidden { display: none; } } diff --git a/smoke/docs-main/src/components/RightSidebar/MoreMenu.astro b/smoke/docs-main/src/components/RightSidebar/MoreMenu.astro index 31d31bdbb..5b35498a7 100644 --- a/smoke/docs-main/src/components/RightSidebar/MoreMenu.astro +++ b/smoke/docs-main/src/components/RightSidebar/MoreMenu.astro @@ -1,5 +1,4 @@ --- -import ThemeToggleButton from './ThemeToggleButton.tsx'; const { editHref } = Astro.props; --- @@ -60,15 +59,11 @@ const { editHref } = Astro.props; </a> </li> </ul> -<div style="margin: 2rem 0; text-align: center;"> - <ThemeToggleButton client:visible /> -</div> <style> .edit-on-github { text-decoration: none; font: inherit; - color: inherit; font-size: 1rem; } </style> diff --git a/smoke/docs-main/src/components/RightSidebar/RightSidebar.astro b/smoke/docs-main/src/components/RightSidebar/RightSidebar.astro index c27232cf6..142e69bc5 100644 --- a/smoke/docs-main/src/components/RightSidebar/RightSidebar.astro +++ b/smoke/docs-main/src/components/RightSidebar/RightSidebar.astro @@ -1,5 +1,6 @@ --- import TableOfContents from './TableOfContents.tsx'; +import ThemeToggleButton from './ThemeToggleButton.tsx'; import MoreMenu from './MoreMenu.astro'; const { content, githubEditUrl } = Astro.props; const headers = content.astro?.headers; @@ -9,6 +10,9 @@ const headers = content.astro?.headers; <div class="sidebar-nav-inner"> {headers && <TableOfContents client:media="(min-width: 50em)" headers={headers} />} <MoreMenu editHref={githubEditUrl} /> + <div style="margin: 2rem 0; text-align: center;"> + <ThemeToggleButton client:visible /> + </div> </div> </nav> diff --git a/smoke/docs-main/src/components/TabBox.astro b/smoke/docs-main/src/components/TabBox.astro new file mode 100644 index 000000000..a5d4bc4ae --- /dev/null +++ b/smoke/docs-main/src/components/TabBox.astro @@ -0,0 +1,104 @@ +--- +import { Markdown, Code, Prism } from 'astro/components'; +--- +<style> + .hidden { + display: none; + } + .active { + background-color: var(--theme-accent); + color: white; + font-weight: bold; + border-top-left-radius: 1em; + border-top-right-radius: 1em; + padding: 3em; + } + .tab-bar { + background-color: var(--theme-divider); + display:flex; + justify-content: flex-start; + margin-bottom:0; + padding: 0.5em; + padding-bottom: 0; + border-top-left-radius: 1em; + border-top-right-radius: 1em; + + } + pre { + border-radius: 0; + } + .code { + margin-top:0; + padding-left: 0.5em; + max-width: 100vw; + overflow: hidden; + background-color: hsla(217, 19%, 27%, 1); + } + .toggle { + padding: 0.5em; + padding-left: 1em; + padding-bottom: 0; + cursor: pointer; + width: 20%; + + } +</style> + + + +<div class="TabBox"> + <div class="tab-bar"> + <div id="install-npm" class="active toggle"><h5>npm</h5></div> + <div id="install-yarn" class="toggle"><h5>yarn</h5></div> + </div> + <div id="npm"> + <Code lang="bash" code={`# prerequisite: check that Node.js is 14.15.0+, or 16+ +node --version + +# Make a new project directory, and navigate into it +mkdir my-astro-project && cd $_ + +# prepare for liftoff... +npm init astro + +# install dependencies +npm install + +# start developing! +npm run dev`}/ > + </div> + <div id="yarn" class="hidden"> + <Code lang="bash" code={`# prerequisite: check that Node.js is 14.15.0+, or 16+ +node --version + +# Make a new project directory, and navigate into it +mkdir my-astro-project && cd $_ + +# prepare for liftoff... +yarn create astro + +# install dependencies +yarn install + +# start developing! +yarn start`}/> + </div> +</div> + +<script type="module"> +document.getElementById("install-npm").addEventListener("click", () => { + document.getElementById("npm").classList.remove("hidden"); + document.getElementById("yarn").classList.add("hidden"); + document.getElementById("install-npm").classList.add("active"); + document.getElementById("install-yarn").classList.remove("active"); + console.log("click"); + }); + + document.getElementById("install-yarn").addEventListener("click", () => { + document.getElementById("yarn").classList.remove("hidden"); + document.getElementById("npm").classList.add("hidden"); + document.getElementById("install-yarn").classList.add("active"); + document.getElementById("install-npm").classList.remove("active"); + console.log("click"); + }); + </script>
\ No newline at end of file diff --git a/smoke/docs-main/src/config.ts b/smoke/docs-main/src/config.ts index de3793bf3..e4eeb2b0c 100644 --- a/smoke/docs-main/src/config.ts +++ b/smoke/docs-main/src/config.ts @@ -1,13 +1,13 @@ export const SIDEBAR = { en: [ - { text: 'Setup', header: true }, + { text: 'Setup', header: true, type: 'learn' }, { text: 'Getting Started', link: 'en/getting-started' }, { text: 'Installation', link: 'en/installation' }, { text: 'Migration Guide', link: 'en/migrate' }, { text: 'Themes', link: 'en/themes' }, - { text: 'Integrations', link: `en/integrations/integrations`}, + { text: 'Integrations', link: `en/integrations/integrations` }, - { text: 'Basics', header: true }, + { text: 'Basics', header: true, type: 'learn' }, { text: 'Project Structure', link: 'en/core-concepts/project-structure' }, { text: 'Components', link: 'en/core-concepts/astro-components' }, { text: 'Pages', link: 'en/core-concepts/astro-pages' }, @@ -16,7 +16,7 @@ export const SIDEBAR = { { text: 'Partial Hydration', link: 'en/core-concepts/component-hydration' }, { text: 'Astro vs. X', link: 'en/comparing-astro-vs-other-tools' }, - { text: 'Guides', header: true }, + { text: 'Guides', header: true, type: 'learn' }, { text: 'Styling & CSS', link: 'en/guides/styling' }, { text: 'Markdown', link: 'en/guides/markdown-content' }, { text: 'Debugging', link: 'en/guides/debugging' }, @@ -30,7 +30,7 @@ export const SIDEBAR = { { text: 'Deploy to the web', link: 'en/guides/deploy' }, { text: 'Publish to npm', link: 'en/guides/publish-to-npm' }, - { text: 'Reference', header: true }, + { text: 'Reference', header: true, type: 'api' }, { text: 'Built-In Components', link: 'en/reference/builtin-components' }, { text: 'API Reference', link: 'en/reference/api-reference' }, { text: 'CLI Reference', link: 'en/reference/cli-reference' }, @@ -41,7 +41,7 @@ export const SIDEBAR = { { text: 'Renderer Reference', link: 'en/reference/renderer-reference' }, ], de: [ - { text: 'Einrichtung', header: true }, + { text: 'Einrichtung', header: true, type: 'learn' }, { text: 'Erste Schritte', link: 'de/getting-started' }, { text: 'Schnellstart', link: 'de/quick-start' }, { text: 'Installation', link: 'de/installation' }, @@ -49,7 +49,7 @@ export const SIDEBAR = { { text: 'Astro vs. X', link: 'de/comparing-astro-vs-other-tools' }, { text: 'Umstellung auf v0.21', link: 'de/migration/0.21.0' }, - { text: 'Grundlagen', header: true }, + { text: 'Grundlagen', header: true, type: 'learn' }, { text: 'Projektstruktur', link: 'de/core-concepts/project-structure' }, { text: 'Astro-Komponenten', link: 'de/core-concepts/astro-components' }, { text: 'Astro-Seiten', link: 'de/core-concepts/astro-pages' }, @@ -57,30 +57,30 @@ export const SIDEBAR = { { text: 'Routing', link: 'de/core-concepts/routing' }, { text: 'Partial Hydration', link: 'de/core-concepts/component-hydration' }, - { text: 'Anleitungen', header: true }, + { text: 'Anleitungen', header: true, type: 'learn' }, { text: 'Styling & CSS', link: 'de/guides/styling' }, - { text: 'Referenz', header: true }, + { text: 'Referenz', header: true, type: 'api' }, ], nl: [ - { text: 'Welkom', header: true }, + { text: 'Welkom', header: true, type: 'learn' }, { text: 'Beginnen', link: 'nl/getting-started' }, { text: 'Snel start', link: 'nl/quick-start' }, ], fi: [ - { text: 'Tervetuloa', header: true }, + { text: 'Tervetuloa', header: true, type: 'learn' }, { text: 'Aloittaminen', link: 'fi/getting-started' }, { text: 'Pika-aloitus', link: 'fi/quick-start' }, { text: 'Asennus', link: 'fi/installation' }, ], es: [ - { text: 'Configuración', header: true }, + { text: 'Configuración', header: true, type: 'learn' }, { text: 'Empezando', link: 'es/getting-started' }, { text: 'Comienzo rápido', link: 'es/quick-start' }, { text: 'Instalación', link: 'es/installation' }, { text: 'Astro vs. X', link: 'es/comparing-astro-vs-other-tools' }, - { text: 'Fundamentos', header: true }, + { text: 'Fundamentos', header: true, type: 'learn' }, { text: 'Estructura del Proyecto', link: 'es/core-concepts/project-structure', @@ -97,7 +97,7 @@ export const SIDEBAR = { link: 'es/core-concepts/component-hydration', }, - { text: 'Guías', header: true }, + { text: 'Guías', header: true, type: 'learn' }, { text: 'Estilo y CSS', link: 'es/guides/styling' }, { text: 'Markdown', link: 'es/guides/markdown-content' }, { text: 'Depuración', link: 'es/guides/debugging' }, @@ -109,7 +109,7 @@ export const SIDEBAR = { { text: 'Desplegar en la web', link: 'es/guides/deploy' }, { text: 'Publicar en npm', link: 'es/guides/publish-to-npm' }, - { text: 'Referencia', header: true }, + { text: 'Referencia', header: true, type: 'api' }, { text: 'Componentes incorporados', link: 'es/reference/builtin-components', @@ -126,7 +126,7 @@ export const SIDEBAR = { }, ], 'zh-CN': [ - { text: '起步', header: true }, + { text: '起步', header: true, type: 'learn' }, { text: '入门指南', link: 'zh-CN/getting-started' }, { text: '快速入门', link: 'zh-CN/quick-start' }, { text: '安装指南', link: 'zh-CN/installation' }, @@ -137,64 +137,64 @@ export const SIDEBAR = { }, ], 'zh-TW': [ - { text: '設定', header: true }, + { text: '設定', header: true, type: 'learn' }, { text: '新手上路', link: 'zh-TW/getting-started' }, { text: '快速開始', link: 'zh-TW/quick-start' }, { text: '安裝', link: 'zh-TW/installation' }, { text: '佈景主題', link: 'zh-TW/themes' }, ], bg: [ - { text: 'Главни', header: true }, + { text: 'Главни', header: true, type: 'learn' }, { text: 'Започваме!', link: 'bg/getting-started' }, ], fr: [ - { text: 'Bienvenue', header: true }, + { text: 'Bienvenue', header: true, type: 'learn' }, { text: 'Bien démarrer', link: 'fr/getting-started' }, { text: 'Démarrage rapide', link: 'fr/quick-start' }, { text: 'Installation', link: 'fr/installation' }, ], bn: [ - { text: 'সেটআপ', header: true }, + { text: 'সেটআপ', header: true, type: 'learn' }, { text: 'শুরু করুন', link: 'bn/getting-started' }, ], kr: [ - { text: '환영합니다', header: true }, + { text: '환영합니다', header: true, type: 'learn' }, { text: '시작하기', link: 'kr/getting-started' }, ], ar: [ - { text: 'التهيئة', header: true }, + { text: 'التهيئة', header: true, type: 'learn' }, { text: 'باشر البدأ', link: 'ar/getting-started' }, ], da: [ - { text: 'Velkommen', header: true }, + { text: 'Velkommen', header: true, type: 'learn' }, { text: 'Introduktion', link: 'da/getting-started' }, ], ja: [ - { text: 'セットアップ', header: true }, + { text: 'セットアップ', header: true, type: 'learn' }, { text: 'はじめに', link: 'ja/getting-started' }, { text: 'クイックスタート', link: 'ja/quick-start' }, { text: 'インストール', link: 'ja/installation' }, { text: 'テーマ', link: 'ja/themes' }, { text: 'Astro vs. X', link: 'ja/comparing-astro-vs-other-tools' }, - { text: '基本', header: true }, + { text: '基本', header: true, type: 'learn' }, { text: 'ディレクトリ構成', link: 'ja/core-concepts/project-structure' }, ], ru: [ - { text: 'Введение', header: true }, + { text: 'Введение', header: true, type: 'learn' }, { text: 'Начало работы', link: 'ru/getting-started' }, { text: 'Быстрый старт', link: 'ru/quick-start' }, ], it: [ - { text: 'Impostare', header: true }, + { text: 'Impostare', header: true, type: 'learn' }, { text: 'Come iniziare', link: 'it/getting-started' }, ], pl: [ - { text: 'Konfiguracja', header: true }, + { text: 'Konfiguracja', header: true, type: 'learn' }, { text: 'Na początek', link: 'pl/getting-started' }, ], hu: [ - { text: 'Beállítás', header: true }, + { text: 'Beállítás', header: true, type: 'learn' }, { text: 'Első Lépések', link: 'hu/getting-started' }, { text: 'Gyors Beállítás', link: 'hu/quick-start' }, { text: 'Telepítés', link: 'hu/installation' }, diff --git a/smoke/docs-main/src/layouts/MainLayout.astro b/smoke/docs-main/src/layouts/MainLayout.astro index 9ebe2f22e..031c2ea18 100644 --- a/smoke/docs-main/src/layouts/MainLayout.astro +++ b/smoke/docs-main/src/layouts/MainLayout.astro @@ -60,6 +60,7 @@ const lang = getLanguageFromURL(Astro.request.url.pathname); display: flex; flex-direction: column; height: 100%; + min-width: 0; } #grid-right { display: none; @@ -91,11 +92,10 @@ const lang = getLanguageFromURL(Astro.request.url.pathname); .layout { grid-template-columns: 20rem - minmax(0, var(--max-width)) + 1fr 18rem; padding-left: 0; padding-right: 0; - margin: 0 auto; } #grid-right { grid-column: 3; diff --git a/smoke/docs-main/src/pages/en/getting-started.md b/smoke/docs-main/src/pages/en/getting-started.md index b0a879df2..bbef88a38 100644 --- a/smoke/docs-main/src/pages/en/getting-started.md +++ b/smoke/docs-main/src/pages/en/getting-started.md @@ -1,72 +1,98 @@ --- +setup: | + import Button from '../../components/Button.astro' layout: ~/layouts/MainLayout.astro title: Getting Started description: A basic intro to Astro. --- - -Astro is a modern static site builder. Learn what Astro is all about from [our homepage](https://astro.build/) or [our release post](https://astro.build/blog/introducing-astro). This page is an overview of the Astro documentation and all related resources. +Static Site Generator 🚀 Bring your own Framework 🚀 Ship Less JavaScript ## Try Astro -The easiest way to install Astro is to run `npm init astro` in a new directory on your machine. Our CLI wizard will assist you in starting a new Astro project. +We've made it as easy as possible to get started with Astro either in your browser, or on your machine! + +### Online Playgrounds + +Visit [astro.new](https://astro.new) for the easiest way to "try before you buy." Choose from a variety of starter templates and start building a full, working version of Astro right in your browser! + +Or, **instantly launch our basic starter project** with just one click of a button: - 📚 Read our [Installation Guide](/en/installation) for detailed instructions. +<div style="display: flex; flex-wrap: wrap; gap: 0.5rem;"> + <Button href="https://astro.new/starter?on=codesandbox">Open in CodeSandbox</Button> + <Button href="https://astro.new/starter?on=stackblitz">Open in StackBlitz</Button> +</div> -### Example Projects +### Install Astro Locally -If you prefer to learn Astro by example, check out our [complete library of examples](https://github.com/withastro/astro/tree/main/examples) on GitHub. +Ready to install? -You can check out any of these examples on your local machine by running `npm init astro` with the `--template` CLI flag. The `--template` flag also supports third-party, community templates. +Get a new project up and running locally in no time with our easy `create-astro` CLI wizard! ```bash -# Run the init wizard and use this official template -npm init astro -- --template [OFFICIAL_EXAMPLE_NAME] -# Run the init wizard and use this community template -npm init astro -- --template [GITHUB_USER]/[REPO_NAME] -npm init astro -- --template [GITHUB_USER]/[REPO_NAME]/path/to/example +# run this command in a new directory to get started! +npm init astro ``` -### Online Playgrounds +⚙️ Our [Installation Guide](/en/installation) has full, step-by-step instructions for installing Astro with your favourite package manager. + +⚙️ See instructions for [manual setup](/en/guides/manual-setup) instead. + + +## Start building with Astro + +Jump right in and add some content and features to your site! + +🏗️ Add new [Astro (.astro) pages](/en/core-concepts/astro-pages) and/or [Markdown (.md) pages](/en/guides/markdown-content) to your site. + +🏗️ Create your first [Layout](/en/core-concepts/layouts). + +🏗️ Add additional [CSS and styling](/en/guides/styling) to your site. + +*... and even more Guides under **Learn*** -If you're interested in playing around with Astro in the browser, you can instantly spin up a new Astro project with our UI at [astro.new](https://astro.new/). -You can try Astro in online code editors like Stackblitz, CodeSandbox, Gitpod, and GitHub Codespaces. Click the "Open in Stackblitz" link in any of the examples in our [examples library](https://github.com/withastro/astro/tree/main/examples). Or, [click here](https://stackblitz.com/fork/astro) to start a new project in [Stackblitz](https://stackblitz.com/fork/astro). ## Learn Astro -All manner of people come to Astro from different backgrounds bringing with them different learning styles. Whether you prefer a more theoretical or a practical approach, we hope you'll find this section helpful. +See examples of some of the key concepts and patterns of an Astro site! + +📚 Read more about Astro’s [project structure.](/en/core-concepts/project-structure) + +📚 Learn more about Astro’s [built-in components.](/en/reference/builtin-components) + +📚 Explore Astro’s [API.](/en/reference/api-reference) + +*... and even more reference material under **API*** + +## Integrate with Astro -- If you prefer to **learn by doing**, start with our [examples library](https://github.com/withastro/astro/tree/main/examples). -- If you prefer to **learn concepts step by step**, start with our [basic concepts and guides](/en/core-concepts/project-structure). +Explore different integrations that our users have combined with Astro! -Like any unfamiliar technology, Astro comes with a slight learning curve. However, with practice and some patience, we know, you _will_ get the hang of it, in no time. +🧰 Use a CMS with your Astro project. -### Learn `.astro` Syntax +🧰 Set up eCommerce. -When you begin to learn Astro, you'll see many files using the `.astro` file extension. This is **Astro’s Component Syntax**: a special HTML-like file format which Astro uses for templating. It was designed to feel familiar to anyone with HTML or JSX experience. +🧰 Connect a database to your site. -Our helpful guide on [Astro components](/en/core-concepts/astro-components) introduces you to the Astro syntax, and is the best way to learn. +*... see our [third-party integrations](/en/integrations/integrations)* -### API Reference -This documentation section is useful when you want to learn more details about a particular Astro API. For example, [Configuration Reference](/en/reference/configuration-reference) lists all possible configuration options available to you. [Built-in Components Reference](/en/reference/builtin-components) lists all available core components, like `<Markdown />` and `<Code />`. -### Versioned Documentation +## Join our Community -This documentation always reflects the latest stable version of Astro. Once we hit the v1.0 milestone, we will add the ability to view versioned documentation. +Join us in the [Astro Discord](https://astro.build/chat) to share with and get help from an active, friendly community! -## Staying Informed +💬 Say hi in our `#introduce-yourself` channel! -The [@astrodotbuild](https://twitter.com/astrodotbuild) Twitter account is the official source for the updates from the Astro team. +💬 Ask our Support Squad a question in our `#support` channel! -We also post release announcements to our [Discord community](https://astro.build/chat) in the #announcements channel. +💬 Share what you've been working on in our `#showcase` channel! -Not every Astro release deserves its own blog post, but you can find a detailed changelog for every release in the [`CHANGELOG.md` file in the Astro repository](https://github.com/withastro/astro/blob/main/packages/astro/CHANGELOG.md). -## Something Missing? +## Learn More -If something is missing in the documentation or if you found some part confusing, please [file an issue for the documentation](https://github.com/withastro/astro/issues/new/choose) with your suggestions for improvement, or tweet at the [@astrodotbuild](https://twitter.com/astrodotbuild) Twitter account. We love hearing from you! +[Astro Blog](https://astro.build/blog/) -## Credit +[Astro changelog](https://github.com/withastro/astro/blob/main/packages/astro/CHANGELOG.md) -This getting started guide was originally based off of [React’s](https://reactjs.org/) getting started guide. +[Astro Migration Guide](/en/migrate) (for upgrading to v0.21+) diff --git a/smoke/docs-main/src/pages/en/integrations/integrations.md b/smoke/docs-main/src/pages/en/integrations/integrations.md index 271c055f2..9d3490d96 100644 --- a/smoke/docs-main/src/pages/en/integrations/integrations.md +++ b/smoke/docs-main/src/pages/en/integrations/integrations.md @@ -45,6 +45,8 @@ Here are some production sites, repositories, blog posts and videos from the com [Chris Bongers](https://aviyel.com/post/1006/adding-typesense-search-to-an-astro-static-generated-website) - **Post**: Adding Typesense Search to an Astro Website +[The Net Ninja](https://www.youtube.com/playlist?list=PL4cUxeGkcC9hZm9NYpd4G-jhoeEk0ls--) - **Video**: Figma and Astro Static Site Build + ## Repositories / Starter Templates [delucis/astro-netlify-cms](https://github.com/delucis/astro-netlify-cms/) - Astro Starter Template with Netlify CMS diff --git a/smoke/docs-main/src/pages/en/migration/0.21.0.astro b/smoke/docs-main/src/pages/en/migration/0.21.0.astro index 038b1e662..efedd1829 100644 --- a/smoke/docs-main/src/pages/en/migration/0.21.0.astro +++ b/smoke/docs-main/src/pages/en/migration/0.21.0.astro @@ -1 +1 @@ -<meta http-equiv="refresh" content="5;url=/en/migrate">
\ No newline at end of file +<meta http-equiv="refresh" content="5;url=/en/migrate" /> diff --git a/smoke/docs-main/src/pages/en/reference/configuration-reference.md b/smoke/docs-main/src/pages/en/reference/configuration-reference.md index 9c729ee0b..736450287 100644 --- a/smoke/docs-main/src/pages/en/reference/configuration-reference.md +++ b/smoke/docs-main/src/pages/en/reference/configuration-reference.md @@ -19,7 +19,19 @@ export default /** @type {import('astro').AstroUserConfig} */ ({ '@astrojs/renderer-react', '@astrojs/renderer-preact', ], + buildOptions: { + site: 'https://my-site.dev/', + sitemap: true, + pageUrlFormat: 'directory', + drafts: false, + }, + devOptions: { + hostname: 'localhost', + port: 3000, + trailingSlash: 'always', + }, vite: {}, + markdownOptions: {}, }); ``` @@ -63,10 +75,36 @@ The `renderers` option defines the framework renderers to be used by Astro. The `buildOptions` option configures how a site is built, including its base URL (`buildOptions.site`), whether it includes a sitemap (`buildOptions.sitemap`), whether markdown draft pages should be included in the build (`buildOptions.drafts`), and whether its pages should be files (`path.html`) or directories (`path/index.html`) (`buildOptions.pageUrlFormat`). +**Defaults**: + +- `buildOptions.site`: Public [origin](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Origin) used to generate sitemaps and canonical URLs. + - Your public domain, e.g.: `https://my-site.dev/`. +- `buildOptions.sitemap`: Whether to automatically generate a sitemap. + - Either `true` or `false`. + - Default: `true`. +- `buildOptions.pageUrlFormat`: Determines how files built from pages are written. + - Either `file` (ex: "/foo.html") or `directory` (ex: "/foo/index.html"). + - Default: `'directory'`. +- `buildOptions.drafts`: Determines whether markdown draft pages are included in the build. + - Either `true` or `false`. + - Default: `false`. + +Read more about [markdown draft pages][markdown-draft-pages]. + #### devOptions The `devOptions` option configures features used during development, including the server hostname (`devOptions.hostname`), the server port (`devOptions.port`), and whether urls should include a trailing slash (`devOptions.trailingSlash`). +**Defaults**: + +- `devOptions.hostname`: The hostname for the dev server. + - Default: `localhost`. +- `devOptions.port`: The port to run the dev server on. + - Default: `3000`. +- `devOptions.trailingSlash`: Trailing slash behavior of URL route matching. + - Either `always` (ex: "/foo/"), `never` (ex: "/foo"), or `ignore` (regardless of trailing "/"). + - Default: `'always'`. + #### vite The `vite` option configures the internals of Vite. These options can be explored on [ViteJS.dev](https://vitejs.dev/config/). @@ -78,3 +116,5 @@ The `markdownOptions` option assigns options to the Markdown parser. These optio --- You can view the entire configuration API on [GitHub](https://github.com/withastro/astro/blob/latest/packages/astro/src/@types/astro.ts). + +[markdown-draft-pages]: /en/guides/markdown-content#markdown-draft-pages |