hp-archive: 市民向けの情報をアイコンと色で見やすく

1 files changed, 242 insertions, 15 deletions

diff --git a/src/components/KodairaNews.astro b/src/components/KodairaNews.astro
index ffe1b89..a8a0d5c 100644
--- a/src/components/KodairaNews.astro
+++ b/src/components/KodairaNews.astro
@@ -21,6 +21,18 @@ const CATS: { id: CatId | "all"; label: string }[] = [
 
 const X = (id: string) => `https://twitter.com/kodaira_tokyo/status/${id}`;
 
+const X_ACCOUNT = "https://twitter.com/kodaira_tokyo";
+const X_LOGO =
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231 5.451-6.231Zm-1.161 17.52h1.833L7.084 4.126H5.117l11.966 15.644Z"/></svg>';
+
+const LABEL: Record<CatId, string> = {
+  status: "障害・復旧",
+  procedure: "手続き・申請",
+  meeting: "審議会・議会",
+  event: "イベント・募集",
+  other: "その他",
+};
+
 const posts: Post[] = [
   {
     date: "10月16日",
@@ -272,11 +284,20 @@ const countOf = (id: CatId | "all") =>
 ---
 
 <div class="kd-news" data-kodaira-news>
+  <header class="kd-news-head">
+    <span class="kd-news-x" set:html={X_LOGO}></span>
+    <span class="kd-news-head-text">
+      <strong>小平市公式X</strong>
+      <span class="kd-news-handle">@kodaira_tokyo</span>
+    </span>
+    <a class="kd-news-follow" href={X_ACCOUNT} rel="noopener">Xで見る</a>
+  </header>
+
   <fieldset class="kd-news-filter">
     <legend class="kd-news-legend">分類で絞る</legend>
     {
       CATS.map((c) => (
-        <label class="kd-news-chip">
+        <label class={`kd-news-chip kd-news-chip--${c.id}`}>
           <input type="radio" name="kd-news-cat" value={c.id} checked={c.id === "all"} />
           <span>
             {c.label}
@@ -293,15 +314,20 @@ const countOf = (id: CatId | "all") =>
     <ul class="kd-news-list">
       {
         posts.map((p) => (
-          <li data-cat={p.cat}>
-            {p.date}{" "}
-            {p.links.map((l, i) => (
-              <>
-                {i > 0 && "／"}
-                <a href={l.url}>{l.text}</a>
-              </>
-            ))}
-            {p.note && `（${p.note}）`}
+          <li data-cat={p.cat} class={`kd-news-item kd-news-item--${p.cat}`}>
+            <span class={`kd-news-badge kd-news-badge--${p.cat}`}>{LABEL[p.cat]}</span>
+            <span class="kd-news-date">{p.date}</span>
+            <span class="kd-news-body">
+              {p.links.map((l, i) => (
+                <>
+                  {i > 0 && "／"}
+                  <a href={l.url} rel="noopener">
+                    {l.text}
+                  </a>
+                </>
+              ))}
+              {p.note && `（${p.note}）`}
+            </span>
           </li>
         ))
       }
@@ -312,10 +338,65 @@ const countOf = (id: CatId | "all") =>
 </div>
 
 <style>
+  .kd-news-head {
+    display: flex;
+    align-items: center;
+    gap: 0.65rem;
+    margin: 0 0 0.7rem;
+    padding: 0.6rem 0.85rem;
+    border: 1px solid var(--sl-color-gray-5);
+    border-radius: 10px;
+    background: var(--sl-color-bg-sidebar);
+  }
+  .kd-news-x {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    width: 1.9rem;
+    height: 1.9rem;
+    border-radius: 50%;
+    background: var(--sl-color-text);
+    color: var(--sl-color-bg);
+  }
+  .kd-news-x :global(svg) {
+    width: 1.05rem;
+    height: 1.05rem;
+    display: block;
+  }
+  .kd-news-head-text {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    line-height: 1.25;
+  }
+  .kd-news-head-text strong {
+    font-size: 0.95rem;
+  }
+  .kd-news-handle {
+    font-size: 0.78rem;
+    opacity: 0.7;
+  }
+  .kd-news-follow {
+    flex: none;
+    margin-left: auto;
+    padding: 0.3rem 0.75rem;
+    border: 1px solid var(--sl-color-gray-5);
+    border-radius: 999px;
+    color: var(--sl-color-text-accent);
+    font-size: 0.82rem;
+    font-weight: 700;
+    text-decoration: none;
+    white-space: nowrap;
+  }
+  .kd-news-follow:hover {
+    background: var(--sl-color-accent-low);
+  }
+
   .kd-news-filter {
     display: flex;
     flex-wrap: wrap;
-    gap: 0.4rem 1rem;
+    gap: 0.4rem;
     align-items: center;
     margin: 0 0 0.5rem;
     padding: 0.5rem 0.8rem;
@@ -328,23 +409,90 @@ const countOf = (id: CatId | "all") =>
     opacity: 0.7;
   }
   .kd-news-chip {
+    position: relative;
     display: inline-flex;
     align-items: center;
     gap: 0.35rem;
-    font-size: 0.85rem;
+    padding: 0.18rem 0.65rem;
+    border: 1px solid var(--sl-color-gray-5);
+    border-radius: 999px;
+    font-size: 0.82rem;
     cursor: pointer;
   }
   .kd-news-chip input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
     margin: 0;
+    opacity: 0;
   }
   .kd-news-chip:has(input:checked) {
     font-weight: 700;
   }
+  .kd-news-chip:has(input:focus-visible) {
+    outline: 2px solid var(--sl-color-accent);
+    outline-offset: 2px;
+  }
   .kd-news-count {
-    margin-left: 0.25rem;
+    margin-left: 0.15rem;
     font-size: 0.75em;
     opacity: 0.7;
   }
+  .kd-news-chip--all:has(input:checked) {
+    color: var(--sl-color-text-accent);
+    border-color: currentColor;
+    background: var(--sl-color-accent-low);
+  }
+  .kd-news-chip--status:has(input:checked) {
+    color: #b3261e;
+    border-color: #f2b8b5;
+    background: #fce8e6;
+  }
+  .kd-news-chip--procedure:has(input:checked) {
+    color: #0b57d0;
+    border-color: #a8c7fa;
+    background: #e8f0fe;
+  }
+  .kd-news-chip--meeting:has(input:checked) {
+    color: #6a1b9a;
+    border-color: #ce93d8;
+    background: #f3e5f5;
+  }
+  .kd-news-chip--event:has(input:checked) {
+    color: #1b5e20;
+    border-color: #a5d6a7;
+    background: #e8f5e9;
+  }
+  .kd-news-chip--other:has(input:checked) {
+    color: #455a64;
+    border-color: #b0bec5;
+    background: #eceff1;
+  }
+  :global([data-theme="dark"]) .kd-news-chip--status:has(input:checked) {
+    color: #ffb4ab;
+    border-color: rgba(255, 180, 171, 0.45);
+    background: rgba(255, 180, 171, 0.14);
+  }
+  :global([data-theme="dark"]) .kd-news-chip--procedure:has(input:checked) {
+    color: #a8c7fa;
+    border-color: rgba(168, 199, 250, 0.45);
+    background: rgba(168, 199, 250, 0.14);
+  }
+  :global([data-theme="dark"]) .kd-news-chip--meeting:has(input:checked) {
+    color: #ce93d8;
+    border-color: rgba(206, 147, 216, 0.45);
+    background: rgba(206, 147, 216, 0.16);
+  }
+  :global([data-theme="dark"]) .kd-news-chip--event:has(input:checked) {
+    color: #a5d6a7;
+    border-color: rgba(165, 214, 167, 0.45);
+    background: rgba(165, 214, 167, 0.14);
+  }
+  :global([data-theme="dark"]) .kd-news-chip--other:has(input:checked) {
+    color: #cfd8dc;
+    border-color: rgba(207, 216, 220, 0.4);
+    background: rgba(207, 216, 220, 0.12);
+  }
   .kd-news-hint {
     margin: 0 0 0.4rem;
     font-size: 0.8rem;
@@ -361,18 +509,97 @@ const countOf = (id: CatId | "all") =>
   }
   .kd-news-list {
     margin: 0;
-    padding-inline-start: 1.3rem;
+    padding: 0;
+    list-style: none;
   }
   .kd-news-list li {
-    margin-bottom: 0.35rem;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 0.45rem;
+    margin-bottom: 0.5rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px dashed var(--sl-color-gray-6, var(--sl-color-gray-5));
     line-height: 1.6;
   }
   .kd-news-list li:last-child {
     margin-bottom: 0;
+    padding-bottom: 0;
+    border-bottom: none;
   }
   .kd-news-list li.is-hidden {
     display: none;
   }
+  .kd-news-badge {
+    flex: none;
+    padding: 0.1rem 0.45rem;
+    border: 1px solid transparent;
+    border-radius: 999px;
+    font-size: 0.68rem;
+    font-weight: 700;
+    line-height: 1.5;
+    white-space: nowrap;
+  }
+  .kd-news-date {
+    flex: none;
+    font-size: 0.78rem;
+    opacity: 0.75;
+    font-variant-numeric: tabular-nums;
+  }
+  .kd-news-body {
+    flex: 1 1 12rem;
+    min-width: 0;
+  }
+  .kd-news-badge--status {
+    color: #b3261e;
+    background: #fce8e6;
+    border-color: #f2b8b5;
+  }
+  .kd-news-badge--procedure {
+    color: #0b57d0;
+    background: #e8f0fe;
+    border-color: #a8c7fa;
+  }
+  .kd-news-badge--meeting {
+    color: #6a1b9a;
+    background: #f3e5f5;
+    border-color: #ce93d8;
+  }
+  .kd-news-badge--event {
+    color: #1b5e20;
+    background: #e8f5e9;
+    border-color: #a5d6a7;
+  }
+  .kd-news-badge--other {
+    color: #455a64;
+    background: #eceff1;
+    border-color: #b0bec5;
+  }
+  :global([data-theme="dark"]) .kd-news-badge--status {
+    color: #ffb4ab;
+    background: rgba(255, 180, 171, 0.14);
+    border-color: rgba(255, 180, 171, 0.4);
+  }
+  :global([data-theme="dark"]) .kd-news-badge--procedure {
+    color: #a8c7fa;
+    background: rgba(168, 199, 250, 0.14);
+    border-color: rgba(168, 199, 250, 0.4);
+  }
+  :global([data-theme="dark"]) .kd-news-badge--meeting {
+    color: #ce93d8;
+    background: rgba(206, 147, 216, 0.16);
+    border-color: rgba(206, 147, 216, 0.4);
+  }
+  :global([data-theme="dark"]) .kd-news-badge--event {
+    color: #a5d6a7;
+    background: rgba(165, 214, 167, 0.14);
+    border-color: rgba(165, 214, 167, 0.4);
+  }
+  :global([data-theme="dark"]) .kd-news-badge--other {
+    color: #cfd8dc;
+    background: rgba(207, 216, 220, 0.12);
+    border-color: rgba(207, 216, 220, 0.35);
+  }
   .kd-news-none {
     margin: 0.5rem 0 0;
     font-size: 0.85rem;