diff options
Diffstat (limited to 'docs/src/layouts/MainLayout.astro')
| -rw-r--r-- | docs/src/layouts/MainLayout.astro | 220 |
1 files changed, 112 insertions, 108 deletions
diff --git a/docs/src/layouts/MainLayout.astro b/docs/src/layouts/MainLayout.astro index 12cdedd85..b439b139f 100644 --- a/docs/src/layouts/MainLayout.astro +++ b/docs/src/layouts/MainLayout.astro @@ -1,122 +1,126 @@ --- -import HeadCommon from "../components/HeadCommon.astro"; -import HeadSEO from "../components/HeadSEO.astro"; +import HeadCommon from '../components/HeadCommon.astro'; +import HeadSEO from '../components/HeadSEO.astro'; import Header from '../components/Header/Header.astro'; import Footer from '../components/Footer/Footer.astro'; import PageContent from '../components/PageContent/PageContent.astro'; import LeftSidebar from '../components/LeftSidebar/LeftSidebar.astro'; import RightSidebar from '../components/RightSidebar/RightSidebar.astro'; -import { SITE } from "../config.ts"; +import { SITE } from '../config.ts'; -const { content = {}, hideRightSidebar = false} = Astro.props; +const { content = {}, hideRightSidebar = false } = Astro.props; const currentPage = Astro.request.url.pathname; -const currentFile = `src/pages${currentPage.replace(/\/$/, "")}.md`; +const currentFile = `src/pages${currentPage.replace(/\/$/, '')}.md`; const githubEditUrl = `https://github.com/withastro/astro/blob/main/docs/${currentFile}`; -const formatTitle = (content, SITE) => content.title ? `${content.title} 🚀 ${SITE.title}` : SITE.title; +const formatTitle = (content, SITE) => + content.title ? `${content.title} 🚀 ${SITE.title}` : SITE.title; --- + <html dir={content.dir ?? 'ltr'} lang={content.lang ?? 'en-us'} class="initial"> - <head> - <HeadCommon /> - <HeadSEO {content} canonicalURL={Astro.request.canonicalURL} /> - <title>{formatTitle(content, SITE)}</title> - <style> - body { - width: 100%; - display: grid; - grid-template-rows: var(--theme-navbar-height) 1fr; - --gutter: 0.5rem; - --doc-padding: 2rem; - } - .layout { - display: grid; - grid-auto-flow: column; - grid-template-columns: - minmax(var(--gutter), 1fr) - minmax(0, var(--max-width)) - minmax(var(--gutter), 1fr); - overflow-x: hidden; - } - .layout :global(> *) { - width: 100%; - height: 100%; - } - .grid-sidebar { - height: 100vh; - position: sticky; - top: 0; - padding: 0; - } - #grid-left { - position: fixed; - background-color: var(--theme-bg); - z-index: 10; - display: none; - } - #grid-main { - padding: var(--doc-padding) var(--gutter); - grid-column: 2; - display: flex; - flex-direction: column; - height: 100%; - } - #grid-right { - display: none; - } - :global(.mobile-sidebar-toggle) { - overflow: hidden; - } - :global(.mobile-sidebar-toggle #grid-left) { - display: block; - top: 2rem; - } - @media (min-width: 50em) { - .layout { - overflow: initial; - grid-template-columns: - 20rem - minmax(0, var(--max-width)); - gap: 1em; - } - #grid-left { - display: flex; - padding-left: 2rem; - position: sticky; - grid-column: 1; - } - } + <head> + <HeadCommon /> + <HeadSEO {content} canonicalURL={Astro.request.canonicalURL} /> + <title>{formatTitle(content, SITE)}</title> + <style> + body { + width: 100%; + display: grid; + grid-template-rows: var(--theme-navbar-height) 1fr; + --gutter: 0.5rem; + --doc-padding: 2rem; + } + .layout { + display: grid; + grid-auto-flow: column; + grid-template-columns: + minmax(var(--gutter), 1fr) + minmax(0, var(--max-width)) + minmax(var(--gutter), 1fr); + overflow-x: hidden; + } + .layout :global(> *) { + width: 100%; + height: 100%; + } + .grid-sidebar { + height: 100vh; + position: sticky; + top: 0; + padding: 0; + } + #grid-left { + position: fixed; + background-color: var(--theme-bg); + z-index: 10; + display: none; + } + #grid-main { + padding: var(--doc-padding) var(--gutter); + grid-column: 2; + display: flex; + flex-direction: column; + height: 100%; + } + #grid-right { + display: none; + } + :global(.mobile-sidebar-toggle) { + overflow: hidden; + } + :global(.mobile-sidebar-toggle #grid-left) { + display: block; + top: 2rem; + } + @media (min-width: 50em) { + .layout { + overflow: initial; + grid-template-columns: + 20rem + minmax(0, var(--max-width)); + gap: 1em; + } + #grid-left { + display: flex; + padding-left: 2rem; + position: sticky; + grid-column: 1; + } + } - @media (min-width: 72em) { - .layout { - grid-template-columns: - 20rem - minmax(0, var(--max-width)) - 18rem; - padding-left: 0; - padding-right: 0; - margin: 0 auto; - } - #grid-right { - grid-column: 3; - display: flex; - } - } - </style> - </head> + @media (min-width: 72em) { + .layout { + grid-template-columns: + 20rem + minmax(0, var(--max-width)) + 18rem; + padding-left: 0; + padding-right: 0; + margin: 0 auto; + } + #grid-right { + grid-column: 3; + display: flex; + } + } + </style> + </head> - <body> - <Header currentPage={currentPage} /> - <main class="layout"> - <aside id="grid-left" class="grid-sidebar" title="Site Navigation"> - <LeftSidebar currentPage={currentPage} /> - </aside> - <div id="grid-main"> - <PageContent content={content} githubEditUrl={githubEditUrl} currentPage={currentPage}> - <slot /> - </PageContent> - </div> - <aside id="grid-right" class="grid-sidebar" title="Table of Contents"> - {!hideRightSidebar && <RightSidebar content={content} githubEditUrl={githubEditUrl} />} - </aside> - </main> - </body> + <body> + <Header {currentPage} /> + <main class="layout"> + <aside id="grid-left" class="grid-sidebar" title="Site Navigation"> + <LeftSidebar {currentPage} /> + </aside> + <div id="grid-main"> + <PageContent {content} {githubEditUrl} {currentPage}> + <slot /> + </PageContent> + </div> + <aside id="grid-right" class="grid-sidebar" title="Table of Contents"> + {!hideRightSidebar && ( + <RightSidebar content={content} githubEditUrl={githubEditUrl} /> + )} + </aside> + </main> + </body> </html> |