refactor: mk DocsLayout.astro

Yue-plus · Sep 3, 2024 · 7e51f0b · 7e51f0b
1 parent 89b8840
commit 7e51f0b
Show file tree

Hide file tree

Showing 12 changed files with 117 additions and 72 deletions.
diff --git a/src/components/DemoSubNavigationItems.ts b/src/components/DemoSubNavigationItems.ts
@@ -0,0 +1,6 @@
+import type {SubNavigationItem} from "../_types/SubNavigationItem.ts";
+
+const DemoSubNavigationItems: SubNavigationItem[] = [...Array(100)]
+    .map((item, index): SubNavigationItem => ({title: `子导航项 - ${index}`, href: ""}))
+
+export default DemoSubNavigationItems
diff --git a/src/components/DocsToolPanel.tsx b/src/components/DocsToolPanel.tsx
@@ -1,4 +1,5 @@
 import {IconArrow} from "./SvgIcons.tsx";
+import GoBackTool from "./GoBackTool.tsx";
 
 function ToTop() {
     return <div
@@ -12,6 +13,7 @@ function ToTop() {
 export default function DocsToolPanel() {
     // TODO: 文档索引、回到顶部、沉浸模式
     return <>
+        <GoBackTool/>
         <ToTop/>
     </>
 }
diff --git a/src/components/GoBackTool.tsx b/src/components/GoBackTool.tsx
@@ -0,0 +1,25 @@
+import {IconArrow} from "./SvgIcons.tsx";
+
+export default function GoBackTool({goBackHref}: { goBackHref?: string }) {
+    const base = import.meta.env.BASE_URL
+    return <>
+        <a href={goBackHref ? goBackHref : base} target="_self"
+           className="w-[14.875rem] h-[3.75rem] text-inherit no-underline hover:text-black hover:bg-white bg-[#5a5a5a] px-[2.5rem] flex items-center justify-between cursor-pointer transition-[color,background-color] duration-300">
+            <IconArrow className="w-2 rotate-180 pointer-events-none"/>
+            <div>
+                <div className="text-[1.25rem] font-bold">{goBackHref ? "返回列表" : "返回首页"}</div>
+                <div className="text-[.875rem] font-benderBold">GO BACK</div>
+            </div>
+        </a>
+        {
+            goBackHref &&
+            <a href={base} target="_self"
+               className="w-[10.5rem] h-[3.75rem] text-inherit no-underline hover:text-black hover:bg-white bg-[#3f3f3f] px-[2.25rem] flex items-center justify-between cursor-pointer transition-[color,background-color] duration-300">
+                <div>
+                    <div className="text-[1.25rem] font-bold">返回首页</div>
+                    <div className="text-[.875rem] font-benderBold">HOMEPAGE</div>
+                </div>
+            </a>
+        }
+    </>
+}
diff --git a/src/content/docs/02-开发者文档/布局.md b/src/content/docs/02-开发者文档/布局.md
@@ -10,3 +10,4 @@ title: 布局
 
 - [RootLayout](../../demo/RootLayoutSlot)
   + [InfoLayout](../../demo/InfoLayoutSlot)
+    * [DocsLayout](../../demo/DocsLayoutSlot)
diff --git a/src/layouts/DocsLayout.astro b/src/layouts/DocsLayout.astro
@@ -0,0 +1,55 @@
+---
+import type {MarkdownHeading} from "astro"
+import type {SubNavigationItem} from "../_types/SubNavigationItem"
+import InfoLayout from "./InfoLayout.astro"
+import DocsLeftAside from "../components/DocsLeftAside.astro"
+import DocsLeftAsideSwitch from "../components/DocsLeftAsideSwitch"
+import DemoSubNavigationItems from "../components/DemoSubNavigationItems"
+import DocumentIndexUL from "../components/DocumentIndexUL.astro"
+import DocsToolPanel from "../components/DocsToolPanel"
+
+interface Props {
+    title?: string
+    subNavigationItems?: SubNavigationItem[]
+    headings?: MarkdownHeading[]
+}
+
+const {title, subNavigationItems, headings} = Astro.props
+const tabTitle = title ? title + " - 文档" : "文档"
+---
+
+<InfoLayout title="DOCS" subTitle="文档" {...{tabTitle, subNavigationItems}}>
+    <nav slot="left-aside"
+         class="h-full mix-blend-difference bg-list-texture bg-cover bg-center bg-opacity-30 flex flex-col">
+        <DocsLeftAside/>
+        <DocsLeftAsideSwitch client:load/>
+    </nav>
+
+
+    <div id="docs-content"
+         class="max-w-[80.75rem] h-full mx-auto overflow-y-auto transition-[height] duration-300">
+        {/* TODO: 面包屑导航 */}
+        {
+            headings && headings.length > 0 &&
+                <details class="pb-8 landscape:hidden">
+                    <summary class="text-black bg-white text-[24px] font-bold px-3 font-oswaldMedium">
+                        Document Index - 文档索引
+                    </summary>
+                    <DocumentIndexUL {...{headings}}/>
+                </details>
+        }
+        <slot/>
+    </div>
+
+    {
+        headings && headings.length > 0 &&
+            <nav slot="aside-header">
+                <h2 class="text-black bg-white text-[1.75rem] font-bold px-3 font-oswaldMedium">
+                    Document Index - 文档索引
+                </h2>
+                <DocumentIndexUL {...{headings}}/>
+            </nav>
+    }
+
+    <DocsToolPanel slot="tool-panel" client:load/>
+</InfoLayout>
diff --git a/src/layouts/InfoLayout.astro b/src/layouts/InfoLayout.astro
@@ -1,23 +1,19 @@
 ---
-import type {SubNavigationItem} from "../_types/SubNavigationItem";
+import type {SubNavigationItem} from "../_types/SubNavigationItem"
 import RootLayout from "./RootLayout.astro"
-import {IconArrow} from "../components/SvgIcons"
 import LineDecorator from "../components/LineDecorator"
 import PageTracker from "../components/PageTracker"
 
 interface Props {
     title?: string
     subTitle?: string
     tabTitle?: string
-    goBackHref?: string
     subNavigationItems?: SubNavigationItem[]
 }
 
-const base = import.meta.env.BASE_URL
 const title = Astro.props.title ?? "INFO"
 const subTitle = Astro.props.subTitle ?? "情报中心"
 const tabTitle = Astro.props.tabTitle ?? "情报中心"
-const goBackHref = Astro.props.goBackHref
 const subNavigationItems = Astro.props.subNavigationItems
 ---
 
@@ -75,31 +71,10 @@ const subNavigationItems = Astro.props.subNavigationItems
     {
         Astro.slots.has("tool-panel") &&
             <div id="info-layout-tool-panel-slot"
-                 class="h-[3.75rem] mb-[5.75rem] absolute bottom-0 right-0 z-10">
+                 class="h-[3.75rem] mb-[9.5rem] portrait:mb-[5.75rem] absolute bottom-0 right-0 flex z-10">
                 <slot name="tool-panel"/>
             </div>
     }
-    <!-- TODO: ↑↓ 两个合并为一个 ToolPanel 统一布局 -->
-    <div class="flex justify-end mb-[9.5rem] portrait:mb-[5.75rem] fixed bottom-0 right-0 z-10">
-        <a href={goBackHref ? goBackHref : base} target="_self"
-           class="w-[14.875rem] h-[3.75rem] text-inherit no-underline hover:text-black hover:bg-white bg-[#5a5a5a] px-[2.5rem] flex items-center justify-between cursor-pointer transition-[color,background-color] duration-300">
-            <IconArrow className="w-2 rotate-180 pointer-events-none"/>
-            <div>
-                <div class="text-[1.25rem] font-bold">{goBackHref ? "返回列表" : "返回首页"}</div>
-                <div class="text-[.875rem] font-benderBold">GO BACK</div>
-            </div>
-        </a>
-        {
-            goBackHref &&
-                <a href={base} target="_self"
-                   class="w-[10.5rem] h-[3.75rem] text-inherit no-underline hover:text-black hover:bg-white bg-[#3f3f3f] px-[2.25rem] flex items-center justify-between cursor-pointer transition-[color,background-color] duration-300">
-                    <div>
-                        <div class="text-[1.25rem] font-bold">返回首页</div>
-                        <div class="text-[.875rem] font-benderBold">HOMEPAGE</div>
-                    </div>
-                </a>
-        }
-    </div>
 </RootLayout>
 
 <script>

diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
@@ -2,6 +2,7 @@
 import {getCollection} from "astro:content";
 // import {Debug} from 'astro:components'
 import InfoLayout from "../../layouts/InfoLayout.astro";
+import GoBackTool from "../../components/GoBackTool";
 
 export async function getStaticPaths() {
     const allBlog = await getCollection("blog")
@@ -18,9 +19,11 @@ const goBackHref = import.meta.env.BASE_URL + "blog"
 const tabTitle = entry?.data?.title ?? "无标题"
 ---
 
-<InfoLayout title="BLOG" subTitle="博客" {...{tabTitle, goBackHref}}>
+<InfoLayout title="BLOG" subTitle="博客" {...{tabTitle}}>
     <article class="max-w-[80.75rem] mx-auto">
         <Content/>
     </article>
     <!--<Debug {entry} />-->
+
+    <GoBackTool slot="tool-panel" client:load {...{goBackHref}}/>
 </InfoLayout>
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
@@ -3,6 +3,7 @@ import {getCollection} from 'astro:content'
 // import {Debug} from 'astro:components'
 import InfoLayout from "../../layouts/InfoLayout.astro"
 import InfoCard from "../../components/InfoCard.astro"
+import GoBackTool from "../../components/GoBackTool"
 
 const base = import.meta.env.BASE_URL
 const allBlog = await getCollection("blog");
@@ -24,4 +25,6 @@ const allBlog = await getCollection("blog");
     <div slot="aside-footer">
         <!-- TODO: 分组类型选择 -->
     </div>
+
+    <GoBackTool slot="tool-panel" client:load/>
 </InfoLayout>
diff --git a/src/pages/demo/DocsLayoutSlot.astro b/src/pages/demo/DocsLayoutSlot.astro
@@ -0,0 +1,10 @@
+---
+import DocsLayout from "../../layouts/DocsLayout.astro";
+import DemoSlotBlock from "../../components/DemoSlotBlock.astro";
+import DemoSubNavigationItems from "../../components/DemoSubNavigationItems";
+---
+
+<DocsLayout subNavigationItems={DemoSubNavigationItems}>
+    <DemoSlotBlock title="Slot" fontSize="25rem"
+                   background="linear-gradient(to bottom right, darkred, darkgreen)"/>
+</DocsLayout>
diff --git a/src/pages/demo/InfoLayoutSlot.astro b/src/pages/demo/InfoLayoutSlot.astro
@@ -2,12 +2,10 @@
 import InfoLayout from "../../layouts/InfoLayout.astro";
 import DemoSlotBlock from "../../components/DemoSlotBlock.astro";
 import {SubNavigationItem} from "../../_types/SubNavigationItem";
-
-const subNavigationItems: SubNavigationItem[] = [...Array(100)]
-    .map((item, index): SubNavigationItem => ({title: `子导航项 - ${index}`, href: ""}))
+import DemoSubNavigationItems from "../../components/DemoSubNavigationItems";
 ---
 
-<InfoLayout {...{subNavigationItems}}>
+<InfoLayout subNavigationItems={DemoSubNavigationItems}>
     <DemoSlotBlock slot="left-aside" title="LeftAsideSlot" fontSize="3rem"
                    background="linear-gradient(to bottom right, darkblue, darksalmon)"/>
 

diff --git a/src/pages/docs/[...slug].astro b/src/pages/docs/[...slug].astro
@@ -2,10 +2,8 @@
 import {getCollection} from 'astro:content'
 // import {Debug} from 'astro:components'
 import type {SubNavigationItem} from "../../_types/SubNavigationItem"
-import InfoLayout from "../../layouts/InfoLayout.astro"
-import DocsLeftAside from "../../components/DocsLeftAside.astro"
+import DocsLayout from "../../layouts/DocsLayout.astro"
 import DocsToolPanel from "../../components/DocsToolPanel"
-import DocumentIndexUL from "../../components/DocumentIndexUL.astro"
 import DocsLeftAsideSwitch from "../../components/DocsLeftAsideSwitch"
 
 export async function getStaticPaths() {
@@ -18,42 +16,17 @@ export async function getStaticPaths() {
 const base = import.meta.env.BASE_URL
 const {entry} = Astro.props
 const {Content, headings} = await entry.render()
-const tabTitle = entry?.data?.title ?? "无标题"
+const title = entry?.data?.title ?? "无标题"
 const subNavigationItems: SubNavigationItem[] = (await getCollection("docs"))
     .map(({id, slug, body, collection, data}, index) => ({
         title: data.title ?? id,
         href: base + "docs/" + slug.split("-").slice(1).join("-"),
     }))
 ---
 
-<InfoLayout title="DOCS" subTitle="文档" tabTitle={tabTitle + " - 文档"} {...{subNavigationItems}}>
-    <nav slot="left-aside"
-         class="h-full mix-blend-difference bg-list-texture bg-cover bg-center bg-opacity-30 flex flex-col">
-        <DocsLeftAside/>
-        <DocsLeftAsideSwitch client:load/>
-    </nav>
-
-    <div id="docs-content"
-         class="max-w-[80.75rem] h-full mx-auto overflow-y-auto transition-[height] duration-300">
+<DocsLayout {...{title, subNavigationItems, headings}}>
         <!--<Debug {allDocs}/>-->
-        <!-- TODO: 面包屑导航 -->
-        <details class="pb-8 landscape:hidden">
-            <summary class="text-black bg-white text-[24px] font-bold px-3 font-oswaldMedium">
-                Document Index - 文档索引
-            </summary>
-            <DocumentIndexUL {...{headings}}/>
-        </details>
         <article>
             <Content/>
         </article>
-    </div>
-
-    <nav slot="aside-header">
-        <h2 class="text-black bg-white text-[1.75rem] font-bold px-3 font-oswaldMedium">
-            Document Index - 文档索引
-        </h2>
-        <DocumentIndexUL {...{headings}}/>
-    </nav>
-
-    <DocsToolPanel slot="tool-panel" client:load/>
-</InfoLayout>
+</DocsLayout>
diff --git a/src/pages/docs/index.astro b/src/pages/docs/index.astro
@@ -2,7 +2,7 @@
 import {getCollection} from 'astro:content'
 // import {Debug} from 'astro:components'
 import type {SubNavigationItem} from "../../_types/SubNavigationItem"
-import InfoLayout from "../../layouts/InfoLayout.astro"
+import DocsLayout from "../../layouts/DocsLayout.astro"
 import DocsLeftAside from "../../components/DocsLeftAside.astro"
 import DocsLeftAsideSwitch from "../../components/DocsLeftAsideSwitch"
 import {IconArrow} from "../../components/SvgIcons"
@@ -15,13 +15,7 @@ const subNavigationItems: SubNavigationItem[] = (await getCollection("docs"))
     }))
 ---
 
-<InfoLayout title="DOCS" subTitle="文档" tabTitle="文档" {...{subNavigationItems}}>
-    <nav slot="left-aside"
-         class="h-full mix-blend-difference bg-list-texture bg-cover bg-center bg-opacity-30 flex flex-col">
-        <DocsLeftAside/>
-        <DocsLeftAsideSwitch client:load/>
-    </nav>
-
+<DocsLayout title="首页" {...{subNavigationItems}}>
     <article class="h-full flex flex-col justify-center">
         <!--<Debug/>-->
         <h1 class="font-benderBold">Astro Arknights 文档</h1>
@@ -35,4 +29,4 @@ const subNavigationItems: SubNavigationItem[] = (await getCollection("docs"))
             <IconArrow className="w-2 pointer-events-none"/>
         </a>
     </article>
-</InfoLayout>
+</DocsLayout>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -10,3 +10,4 @@ title: 布局

		- [RootLayout](../../demo/RootLayoutSlot)
		+ [InfoLayout](../../demo/InfoLayoutSlot)
		* [DocsLayout](../../demo/DocsLayoutSlot)