Fix/update modules

package.json

@@ -51,6 +51,7 @@
     "@fontsource-variable/jetbrains-mono": "^5.2.8",
     "@fontsource-variable/m-plus-1": "^5.2.10",
     "@fontsource/noto-color-emoji": "^5.2.12",
+    "@iconify-json/mdi": "^1.2.3",
     "@nanostores/persistent": "^0.10.2",
     "bits-ui": "^2.0.0",
     "cheerio": "^1.2.0",

src/ambient.d.ts

@@ -0,0 +1,4 @@
+declare module "the-new-css-reset";
+declare module "@fontsource-variable/m-plus-1";
+declare module "@fontsource-variable/jetbrains-mono";
+declare module "@fontsource/noto-color-emoji";

src/lib/components/BlogDetails.svelte

@@ -36,13 +36,13 @@
   <div id="image" style={`view-transition-name: ${details.id}-thumbnail`}>
     <BlogImage imageData={details.ogpImg} alt={details.title} />
   </div>
-</div>
-
-<article>
   <div id="date-at">
     <p>公開日：{formatDate(details.publishedAt)}</p>
     <p>更新日：{formatDate(details.updatedAt)}</p>
   </div>
+</div>
+
+<article>
   <!-- eslint-disable-next-line svelte/no-at-html-tags -->
   {@html rewriteHTML(details.content)}
 </article>
@@ -61,6 +61,7 @@
       :not(h1) {
         padding-inline: $spacing-2;
       }
+
       div {
         display: grid;
         grid-template-columns: 1fr;
@@ -90,6 +91,12 @@
       display: block;
       padding: $spacing-5;
     }
+
+    #date-at {
+      display: flex;
+      flex-direction: column;
+      padding: $spacing-5;
+    }
   }
 
   @include mobile {
@@ -132,11 +139,7 @@
     padding: auto 0;
     line-height: 1.8;
     text-align: justify;
-
-    #date-at {
-      display: flex;
-      flex-direction: column;
-    }
+    margin: $spacing-5 0;
   }
 
   @include mobile {

src/lib/components/BlogLink.svelte

@@ -81,4 +81,8 @@
     margin: 5px;
     font-size: 0.8em;
   }
+
+  h1:hover {
+    text-decoration: underline;
+  }
 </style>

src/lib/components/BlogList.svelte

@@ -56,6 +56,6 @@
     padding: 0 $spacing-8;
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-    gap: $spacing-8;
+    gap: $spacing-10;
   }
 </style>

src/lib/components/TagAndSort.svelte

@@ -78,7 +78,7 @@
     position: relative;
 
     @include mobile {
-      grid-template-columns: 1fr;
+      grid-template-columns: 1fr 1fr;
     }
 
     button {

src/lib/utils/middlewares/rewriters/add-anchor-copy.ts

@@ -15,5 +15,5 @@ export function addAnchorCopy(html: string): string {
     $elem.prepend(btn);
   });
 
-  return $.html();
+  return $("body").html() ?? html;
 }

src/lib/utils/middlewares/rewriters/figure.ts

@@ -19,5 +19,5 @@ export function processFigure(html: string): string {
     );
   });
 
-  return $.html();
+  return $("body").html() ?? html;
 }

src/lib/utils/middlewares/rewriters/highlight.ts

@@ -35,5 +35,5 @@ export function highlight(html: string): string {
     $container.addClass("code-block");
   });
 
-  return $.html();
+  return $("body").html() ?? html;
 }

src/routes/+error.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-  import { page } from "$app/stores";
+  import { page } from "$app/state";
 </script>
 
 <div>
-  <div class="status">{$page.status}</div>
+  <div class="status">{page.status}</div>
   <hr />
-  <h1 class="message">{$page.error?.message}</h1>
+  <h1 class="message">{page.error?.message}</h1>
 </div>
 
 <style lang="scss">

src/routes/+layout.svelte

@@ -1,10 +1,14 @@
 <script lang="ts">
+  import { addCollection } from "@iconify/svelte";
+  import mdiIcons from "@iconify-json/mdi/icons.json";
   import extend from "just-extend";
   import type { Snippet } from "svelte";
   import { MetaTags } from "svelte-meta-tags";
+
+  addCollection(mdiIcons as Parameters<typeof addCollection>[0]);
   import { setupViewTransition } from "sveltekit-view-transition";
   import type { LayoutData } from "./$types";
-  import { page } from "$app/stores";
+  import { page } from "$app/state";
   import Footer from "$lib/components/Footer.svelte";
   import Header from "$lib/components/Header.svelte";
 
@@ -20,7 +24,7 @@
   let { data, children }: { data: LayoutData; children: Snippet } = $props();
 
   const metaTags = $derived(
-    extend(true, {}, data.baseMetaTags, $page.data.pageMetaTags),
+    extend(true, {}, data.baseMetaTags, page.data.pageMetaTags),
   );
 </script>
 

src/routes/+page.svelte

@@ -46,7 +46,7 @@
   <Marker>blogs</Marker>
 </h2>
 
-<section>
+<section id="blogs">
   <BlogList blogs={data.blogList} {limit} />
 </section>
 
@@ -98,6 +98,10 @@
     padding-block: $spacing-10;
   }
 
+  #blogs {
+    padding: $spacing-10;
+  }
+
   #arrow {
     display: flex;
     flex-direction: column;

src/routes/about/+page.svelte

@@ -56,20 +56,20 @@
     </p>
     <ul>
       <li>
-        <a href="https://svelte.jp/">Svelte / SvelteKit</a>
+        <a target="_blank" href="https://svelte.jp/">Svelte / SvelteKit</a>
       </li>
       <li>
-        <a href="https://www.typescriptlang.org/">TypeScript</a>
+        <a target="_blank" href="https://www.typescriptlang.org/">TypeScript</a>
       </li>
       <li>
-        <a href="https://sass-lang.com/">SCSS</a>
+        <a target="_blank" href="https://sass-lang.com/">SCSS</a>
       </li>
       <li>
-        <a href="https://microcms.io/">microCMS</a>
+        <a target="_blank" href="https://microcms.io/">microCMS</a>
       </li>
     </ul>
     <p>
-      このサイトは、<a href="https://github.com/misc-org/misc-mdn.dev">GitHub</a
+      このサイトは、<a target="_blank" href="https://github.com/misc-org/misc-mdn.dev">GitHub</a
       >でソースコードを公開しています。
     </p>
   </article>
@@ -104,14 +104,19 @@
       }
 
       div {
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+        display: flex;
+        flex-direction: column;
         gap: $spacing-5;
 
         div {
+          min-width: 400px;
           padding: $spacing-2;
           border-radius: 5px;
           background-color: #d9d9d9;
+
+          @include mobile {
+            min-width: 300px;
+          }
         }
 
         p {