Merge pull request #23 from takejohn/feature/17-breadcrumb

パンくずリストの実装 (#17)
TeamSekai · Jun 22, 2024 · 3eda51c · 3eda51c
2 parents 4794e78 + e34e818
commit 3eda51c
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 14 deletions.
diff --git a/packages/astro/src/components/Breadcrumb.astro b/packages/astro/src/components/Breadcrumb.astro
@@ -0,0 +1,28 @@
+---
+import Link from "./Link.astro";
+
+interface Props {
+    path: string[];
+}
+
+const { path } = Astro.props;
+
+const breadcrumb = [];
+const pathLength = path.length;
+for (let i = 0 ; i <= pathLength ; i++) {
+    breadcrumb.push(path.slice(0, i));
+}
+---
+
+<div class="breadcrumb">
+    {breadcrumb.map(
+        (path, i) =>
+            <Link path={path} emphasized={i == breadcrumb.length - 1}/>
+    )}
+</div>
+
+<style>
+    .breadcrumb {
+        display: flex;
+    }
+</style>
diff --git a/packages/astro/src/components/Header.astro b/packages/astro/src/components/Header.astro
@@ -1,25 +1,37 @@
 ---
 import UploadButton from "../components/UploadButton.astro";
+import Breadcrumb from "./Breadcrumb.astro";
 import IconButton from "./IconButton.astro";
+
+interface Props {
+    path: string[];
+}
+
+const { path } = Astro.props;
 ---
 
 <div class="header">
-    <div class="title-box">
-        <h1>CDN File list</h1>
-    </div>
-    <div class="button-box">
-        <IconButton id="list-layout-button" title="リスト形式" src="/static/list.svg" />
-    </div>
-    <div class="button-box">
-        <IconButton id="grid-layout-button" title="グリッド形式" src="/static/grid.svg" />
+    <div class="header-top">
+        <div class="title-box">
+            <h1>CDN File list</h1>
+        </div>
+        <div class="button-box">
+            <IconButton id="list-layout-button" title="リスト形式" src="/static/list.svg" />
+        </div>
+        <div class="button-box">
+            <IconButton id="grid-layout-button" title="グリッド形式" src="/static/grid.svg" />
+        </div>
+        <div class="button-box">
+            <UploadButton />
+        </div>
     </div>
-    <div class="button-box">
-        <UploadButton />
+    <div class="header-bottom">
+        <Breadcrumb path={path}></Breadcrumb>
     </div>
 </div>
 
 <style>
-    .header {
+    .header-top {
         display: flex;
         top: 0;
         margin-bottom: 8px;
@@ -34,6 +46,10 @@ import IconButton from "./IconButton.astro";
     .button-box {
         margin: 0.25em;
     }
+
+    .header-bottom {
+        margin-bottom: 8px;
+    }
 </style>
 
 <!-- Google tag (gtag.js) -->

diff --git a/packages/astro/src/components/Link.astro b/packages/astro/src/components/Link.astro
@@ -0,0 +1,33 @@
+---
+interface Props {
+    path: string[];
+    emphasized?: boolean;
+}
+
+const { path, emphasized } = Astro.props;
+const href = '/' + path.join('/');
+const basename = path.length > 0 ? path.at(-1) : '';
+---
+
+<a href={href}>
+    <p class={emphasized ? "emphasized" : ""}>{basename}/</p>
+</a>
+
+<style>
+    a {
+        color: black;
+        text-decoration: none;
+    }
+
+    p {
+        background-color: #c0c0c080;
+        width: fit-content;
+        padding: 0.5em;
+        border-radius: 0.5em;
+        margin-right: 2px;
+    }
+
+    p.emphasized, p:hover {
+        background-color: #c0c0c0;
+    }
+</style>
diff --git a/packages/astro/src/layouts/Layout.astro b/packages/astro/src/layouts/Layout.astro
@@ -3,7 +3,12 @@ import { ViewTransitions } from "astro:transitions";
 import Header from "../components/Header.astro";
 import Dialog from "../components/Dialog.astro";
 
+interface Props {
+    path: string[];
+}
+
 let bodyClass = Astro.url.searchParams.get('layout') == 'grid' ? 'grid-layout' : null;
+const { path } = Astro.props;
 ---
 
 <!DOCTYPE html>
@@ -19,7 +24,7 @@ let bodyClass = Astro.url.searchParams.get('layout') == 'grid' ? 'grid-layout' :
     <body class={bodyClass}>
         <div id="body-wrapper">
             <div id="header-wrapper">
-                <Header />
+                <Header path={path} />
             </div>
             <div id="list-wrapper">
                 <slot />

diff --git a/packages/astro/src/pages/[...path].astro b/packages/astro/src/pages/[...path].astro
@@ -7,10 +7,10 @@ import NotFound from "../components/NotFound.astro";
 const dirPath: string = Astro.params.path ?? '';
 let files: DirectoryEntry[] | null = null;
 let parentDir: string | null = null;
+const pathDirs = dirPath.split("/").filter((dirname) => dirname != "");
 
 try {
     files = await getDirectoryEntries(dirPath);
-    const pathDirs = dirPath.split("/");
     const length = pathDirs.length;
     if (length > 0 && pathDirs[0].length > 0) {
         parentDir = "/" + pathDirs.slice(0, length - 1).join("/");
@@ -24,6 +24,6 @@ if (files == null) {
 }
 ---
 
-<Layout>
+<Layout path={pathDirs}>
     {files != null ? <List parentDir={parentDir} files={files} /> : <NotFound />}
 </Layout>