Astroでギャラリーその2

---import { getImageFiles, getDirectories } from '@utils/fileUtil.ts';import ImageList from '@components/ImageList.astro';import MyImage from "@components/MyImage.astro";import { LOCAL_IMAGE_ROOT, WEB_IMAGE_ROOT } from '@config/config';const { currentDir } = Astro.props;const localDir = currentDir + "/";const thumbnailSize = "96px";const subDir = (() => {try {  return getDirectories(localDir);}catch(e) {  console.log(e)  return [];}})();const imageSrc: string[] = [];const imageFiles = (() => {  try {    return getImageFiles(localDir);  } catch (e) {    console.log(e);    return [""];  }})();imageFiles.reverse();for (const s of imageFiles) {  const imageUrl = WEB_IMAGE_ROOT + localDir.replace(LOCAL_IMAGE_ROOT, "") + s;  imageSrc.push(imageUrl);  console.log(imageUrl);}---<div style="display:inline;">  {    imageSrc.map((f) => (      <span class="image">        <a data-fancybox={localDir} href={f}>          <MyImage           src={f}           width={thumbnailSize}           height={thumbnailSize}           alt={f}          />        </a>      </span>    ))  }</div>{subDir.map((dir) => (    <input type="checkbox" name="imagelist" id={`${localDir}${dir}`} class="toggle" />    <label for={`${localDir}${dir}`} class="Label">{dir}</label>    <ul class="content">    { <li> <ImageList currentDir={`${localDir}${dir}`} /> </li> }    </ul>    ))}

---import BaseLayout from "@layouts/BaseLayout.astro";import ImageList from "@components/ImageList.astro";import { LOCAL_IMAGE_ROOT } from "@config/config";---<BaseLayout description="ブログの画像一覧です">  <h1>画像一覧</h1>  <ImageList currentDir={LOCAL_IMAGE_ROOT} />  <link rel="stylesheet" href="/fancybox/fancybox.css" />  <script is:inline src="/fancybox/fancybox.umd.js"></script></BaseLayout>