feat: add article toggle button

Author: su8ru

src/components/ArticleCard.astro

@@ -5,15 +5,16 @@ import { getFaviconUrl, type Article } from '../libs/articles';
 
 interface Props {
   article: Article;
+  class?: string;
 }
 
-const { article } = Astro.props;
+const { article, class: className } = Astro.props;
 
 const date = dayjs(article.createdAt).format('YYYY-MM-DD');
 const faviconSrc = getFaviconUrl(article.site);
 ---
 
-<article>
+<article class={className}>
   <a href={article.url}>
     <h3>{article.title}</h3>
     <div class="info">

src/components/ArticleList.astro

@@ -0,0 +1,47 @@
+---
+import { getArticles } from '../libs/articles';
+import ArticleCard from './ArticleCard.astro';
+import ArticleListButton from './ArticleListButton.tsx';
+
+const articles = await getArticles();
+---
+
+<div class="container" id="article-list" style={{ '--display-all': 'none' }}>
+  {
+    articles.map((article, i) => (
+      <ArticleCard
+        article={article}
+        class={i > 3 ? 'old-article' : undefined}
+      />
+    ))
+  }
+  <div class="spacer spacer-articles"></div>
+</div>
+
+<div class="center">
+  <ArticleListButton client:idle />
+</div>
+
+<style>
+  .container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    margin-top: 32px;
+  }
+  .spacer {
+    height: 0;
+    flex-grow: 1;
+    flex-basis: 250px;
+  }
+  .center {
+    display: flex;
+    justify-content: center;
+  }
+</style>
+
+<style is:global>
+  .old-article {
+    display: var(--display-all);
+  }
+</style>

src/components/ArticleListButton.module.css

@@ -0,0 +1,19 @@
+.button {
+  display: inline-block;
+  padding: 4px 12px;
+  border-radius: 8px;
+  border: none;
+  background: rgb(var(--text-color-rgb) / 0.08);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.button:hover {
+  background: rgb(var(--text-color-rgb) / 0.12);
+}
+.icon {
+  margin-top: -1px;
+}
+.label {
+  font-weight: 600;
+}

src/components/ArticleListButton.tsx

@@ -0,0 +1,54 @@
+import { useState } from 'preact/hooks';
+import Styles from './ArticleListButton.module.css';
+
+const ArticleListButton = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <button
+      className={Styles.button}
+      onClick={() => {
+        setOpen(!open);
+        const listElm = document.getElementById('article-list');
+        listElm?.style.setProperty('--display-all', !open ? 'block' : 'none');
+      }}
+    >
+      {open ? (
+        <>
+          <svg
+            viewBox="0 0 15 15"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            width="15"
+            height="15"
+            className={Styles.icon}
+          >
+            <path
+              d="M1 10l6.5-7 6.5 7"
+              stroke="currentColor"
+              stroke-linecap="square"
+            ></path>
+          </svg>
+          <span className={Styles.label}>直近の記事のみ表示</span>
+        </>
+      ) : (
+        <>
+          <svg
+            viewBox="0 0 15 15"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            width="15"
+            height="15"
+            className={Styles.icon}
+          >
+            <path d="M7.5 1v13M1 7.5h13" stroke="currentColor"></path>
+          </svg>
+          <span className={Styles.label}>すべて表示</span>
+        </>
+      )}
+      <slot />
+    </button>
+  );
+};
+
+export default ArticleListButton;

src/pages/index.astro

@@ -7,11 +7,9 @@ import Hero from '../components/Hero.astro';
 import Section from '../components/Section.astro';
 import More from '../components/More.astro';
 import WorkCard from '../components/WorkCard.astro';
-import { getArticles } from '../libs/articles';
-import ArticleCard from '../components/ArticleCard.astro';
+import ArticleList from '../components/ArticleList.astro';
 
 const works = await getCollection('works', (w) => w.data.pinned);
-const articles = await getArticles();
 ---
 
 <Base title={null}>
@@ -27,22 +25,19 @@ const articles = await getArticles();
     </Section>
     <Section>
       <h2 id="works">Works</h2>
-      <div class="container">
+      <div class="works-container">
         {
           works
             .sort((a, b) => (a.data.date > b.data.date ? -1 : 1))
             .map((work) => <WorkCard work={work} />)
         }
-        <div class="spacer spacer-works"></div>
+        <div class="works-spacer"></div>
       </div>
       <More href="/works">つくったものをもっと見る</More>
     </Section>
     <Section>
       <h2>Articles</h2>
-      <div class="container">
-        {articles.map((article) => <ArticleCard article={article} />)}
-        <div class="spacer spacer-articles"></div>
-      </div>
+      <ArticleList />
     </Section>
     <Footer />
   </main>
@@ -54,22 +49,17 @@ const articles = await getArticles();
       padding-top: 32px;
       border-radius: 32px 32px 0 0;
     }
-    .container {
+    .works-container {
       display: flex;
       flex-wrap: wrap;
       gap: 16px;
       margin-top: 32px;
     }
-    .spacer {
+    .works-spacer {
       height: 0;
       flex-grow: 1;
-    }
-    .spacer-works {
       flex-basis: 300px;
     }
-    .spacer-articles {
-      flex-basis: 250px;
-    }
   </style>
 
   <style is:global>

tsconfig.json

@@ -1,3 +1,7 @@
 {
-  "extends": "astro/tsconfigs/strict"
+  "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact"
+  }
 }