Minor clean-up; format

Author: cmpadden

components/MoreLink.vue

@@ -13,7 +13,7 @@ const props = defineProps({
       :to="props.to"
       class="flex items-center text-sm font-bold text-white hover:text-orange-500"
     >
-      <span class="translate-y-0.5">More</span>
+      <span class="translate-y-0.5"><slot></slot></span>
       <svg
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 24 24"

components/section/BlogPosts.vue

@@ -7,32 +7,27 @@ const props = defineProps({
 
 <template>
   <section class="container mx-auto space-y-2">
-    <div class="grid grid-cols-1 gap-4 lg:grid-cols-3">
+    <div class="grid grid-cols-1 gap-3">
       <div v-for="(article, ix) of articles" :key="ix">
         <NuxtLink :to="article.path">
           <div
-            class="h-full space-y-2 bg-orange-500/50 p-4 text-white drop-shadow-lg hover:ring-1 hover:ring-white"
+            class="h-full space-y-2 bg-black/50 p-3 text-white drop-shadow-lg hover:ring-1 hover:ring-white"
           >
-            <div>
+            <div class="flex">
               <div
                 class="line-clamp-1 flex-1 text-lg font-bold md:text-xl"
                 :title="article.title"
               >
                 {{ article.title }}
               </div>
-              <div class="space-x-2">
-                <NuxtTime
-                  v-if="show_dates"
-                  :datetime="article.date"
-                  class="text-sm text-gray-200"
-                  year="numeric"
-                  month="short"
-                  day="2-digit"
-                />
-                <span v-if="ix === 0" class="text-xs font-bold uppercase italic"
-                  >latest</span
-                >
-              </div>
+              <NuxtTime
+                v-if="show_dates"
+                :datetime="article.date"
+                class="text-sm text-gray-200"
+                year="numeric"
+                month="short"
+                day="2-digit"
+              />
             </div>
             <div class="line-clamp-3 text-sm text-gray-100">
               {{ article.description }}
@@ -41,6 +36,6 @@ const props = defineProps({
         </NuxtLink>
       </div>
     </div>
-    <MoreLink to="/blog" />
+    <MoreLink to="/blog">See all posts</MoreLink>
   </section>
 </template>

components/section/Playground.vue

@@ -111,9 +111,9 @@ const filtered_links = computed(() => {
     class="to-background-dark bg-gradient-to-b from-transparent text-white"
   >
     <div class="container mx-auto py-8 text-white">
-      <div class="mb-2 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+      <div class="mb-2 grid grid-cols-1 gap-3 sm:grid-cols-3">
         <nuxt-link
-          class="relative text-orange-500 ring-2 hover:text-white hover:ring-white"
+          class="relative text-orange-500 ring-2 ring-white hover:text-white hover:ring-orange-500"
           v-for="link in filtered_links"
           :key="link.title"
           :to="link.link"
@@ -145,7 +145,9 @@ const filtered_links = computed(() => {
           </div>
         </nuxt-link>
       </div>
-      <MoreLink to="/playground" v-if="route.path !== '/playground'" />
+      <MoreLink to="/playground" v-if="route.path !== '/playground'"
+        >See all experiments</MoreLink
+      >
     </div>
   </section>
 </template>

content/blog/nuxt-p5js-3d-models.md

@@ -1,5 +1,5 @@
 ---
-title: "Render three-dimensional models in NuxtContent with p5js"
+title: "Render three-dimensional models in `NuxtContent` with p5.js"
 date: "2024-12-31"
 tags: ["nuxt", "p5js", "3d"]
 categories: ["examples"]

pages/index.vue

@@ -1,20 +1,20 @@
 <script setup>
-const data = await queryCollection("content")
+const articles = await queryCollection("content")
   .order("date", "DESC")
-  .limit(6)
+  .limit(3)
   .all();
 </script>
 
 <template>
   <div class="min-h-screen bg-emerald-950 bg-[url('/images/noise.svg')]">
     <section class="bg-gradient-to-b from-background to-transparent py-2">
-      <div class="container mx-auto my-12">
+      <div class="container mx-auto my-7">
         <div class="text-orange-500">
           <Logo />
         </div>
       </div>
     </section>
-    <SectionBlogPosts :articles="data" :show_dates="true" />
-    <SectionPlayground :limit="8" showImages linkToPlayground />
+    <SectionBlogPosts :articles="articles" :show_dates="true" />
+    <SectionPlayground :limit="6" showImages linkToPlayground />
   </div>
 </template>

pages/playground/conway.vue

@@ -3,7 +3,13 @@ definePageMeta({ layout: "light" });
 </script>
 
 <template>
-    <main class="bg-white flex h-[1024px] justify-center border-2 border-gray-500">
-        <iframe src="https://cmpadden.github.io/conway/" width="100%" height="100%"></iframe>
-    </main>
+  <main
+    class="flex h-[1024px] justify-center border-2 border-gray-500 bg-white"
+  >
+    <iframe
+      src="https://cmpadden.github.io/conway/"
+      width="100%"
+      height="100%"
+    ></iframe>
+  </main>
 </template>

pages/playground/french/index.vue

@@ -123,14 +123,11 @@ const wordIndex = ref<number>(0);
 const search = ref("");
 const suggestions = ref([]);
 
-const { data: conjugations } = await useFetch(
-  "/api/french-conjugations",
-  {
-    transform: (value) => {
-      return value as Conjugation[];
-    },
+const { data: conjugations } = await useFetch("/api/french-conjugations", {
+  transform: (value) => {
+    return value as Conjugation[];
   },
-);
+});
 
 const word = computed(() => {
   if (conjugations.value) {

pages/playground/palettes/mountains.vue

@@ -17,9 +17,9 @@ const src = `${fullUrl}?embed=1`;
           loading="lazy"
         />
       </div>
-      <div class="text-center text-lg font-mono">
-        Click inside the sketch to redraw the layered waves. Colors and logic now
-        live in the standalone p5 playground.
+      <div class="text-center font-mono text-lg">
+        Click inside the sketch to redraw the layered waves. Colors and logic
+        now live in the standalone p5 playground.
       </div>
       <a
         :href="fullUrl"

pages/playground/palettes/variance.vue

@@ -17,7 +17,7 @@ const src = `${fullUrl}?embed=1`;
           loading="lazy"
         />
       </div>
-      <div class="text-center text-lg font-mono">
+      <div class="text-center font-mono text-lg">
         Watch a fixed palette drift with light RGB variance. Reload or tap the
         standalone sketch to sample a new grid.
       </div>

pages/playground/stl-model-render.vue

@@ -18,11 +18,22 @@ const src = `${viewerBase}?${query.toString()}`;
     </div>
     <div>
       Powered by the vanilla
-      <a class="text-blue-500 underline" href="https://p5js.org" target="_blank" rel="noreferrer">p5js</a>
+      <a
+        class="text-blue-500 underline"
+        href="https://p5js.org"
+        target="_blank"
+        rel="noreferrer"
+        >p5js</a
+      >
       WEBGL renderer.
     </div>
     <div class="h-[28rem] border-2 border-white">
-      <iframe :src="src" title="STL demo" class="h-full w-full" loading="lazy" />
+      <iframe
+        :src="src"
+        title="STL demo"
+        class="h-full w-full"
+        loading="lazy"
+      />
     </div>
     <a
       :href="fullUrl"