diff options
Diffstat (limited to 'examples/docs/src/layouts/MainLayout.astro')
| -rw-r--r-- | examples/docs/src/layouts/MainLayout.astro | 214 |
1 files changed, 107 insertions, 107 deletions
diff --git a/examples/docs/src/layouts/MainLayout.astro b/examples/docs/src/layouts/MainLayout.astro index cdadebe61..92e0bcf44 100644 --- a/examples/docs/src/layouts/MainLayout.astro +++ b/examples/docs/src/layouts/MainLayout.astro @@ -1,122 +1,122 @@ --- -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 * as CONFIG from "../config"; +import * as CONFIG from '../config'; const { content = {} } = Astro.props; const currentPage = Astro.request.url.pathname; -const currentFile = `src/pages${currentPage.replace(/\/$/, "")}.md`; -const githubEditUrl = CONFIG.GITHUB_EDIT_URL && (CONFIG.GITHUB_EDIT_URL + currentFile); +const currentFile = `src/pages${currentPage.replace(/\/$/, '')}.md`; +const githubEditUrl = CONFIG.GITHUB_EDIT_URL && CONFIG.GITHUB_EDIT_URL + currentFile; --- <html dir={content.dir ?? 'ltr'} lang={content.lang ?? 'en-us'} class="initial"> - <head> - <HeadCommon /> - <HeadSEO {content} canonicalURL={Astro.request.canonicalURL} /> - <title>{content.title ? `${content.title} 🚀 ${CONFIG.SITE.title}` : CONFIG.SITE.title}</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>{content.title ? `${content.title} 🚀 ${CONFIG.SITE.title}` : CONFIG.SITE.title}</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}> - <slot /> - </PageContent> - </div> - <aside id="grid-right" class="grid-sidebar" title="Table of Contents"> - <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}> + <slot /> + </PageContent> + </div> + <aside id="grid-right" class="grid-sidebar" title="Table of Contents"> + <RightSidebar {content} {githubEditUrl} /> + </aside> + </main> + </body> </html> |