Stylize external indicator

Author: cmpadden

components/ExternalIndicator.vue

@@ -0,0 +1,36 @@
+<script setup>
+const props = defineProps({
+  site: {
+    type: String,
+    default: "",
+  },
+});
+</script>
+
+<template>
+  <div
+    class="inline-flex items-center gap-1 rounded border border-orange-500/30 bg-orange-500/20 px-2 py-0.5"
+  >
+    <span
+      class="text-[10px] leading-none uppercase tracking-wide text-orange-300"
+      >External - {{ site }}</span
+    >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 20 20"
+      fill="currentColor"
+      class="size-3 shrink-0 text-orange-300"
+    >
+      <path
+        fill-rule="evenodd"
+        d="M4.25 5.5a.75.75 0 0 0-.75.75v8.5c0 .414.336.75.75.75h8.5a.75.75 0 0 0 .75-.75v-4a.75.75 0 0 1 1.5 0v4A2.25 2.25 0 0 1 12.75 17h-8.5A2.25 2.25 0 0 1 2 14.75v-8.5A2.25 2.25 0 0 1 4.25 4h5a.75.75 0 0 1 0 1.5h-5Z"
+        clip-rule="evenodd"
+      />
+      <path
+        fill-rule="evenodd"
+        d="M6.194 12.753a.75.75 0 0 0 1.06.053L16.5 4.44v2.81a.75.75 0 0 0 1.5 0v-4.5a.75.75 0 0 0-.75-.75h-4.5a.75.75 0 0 0 0 1.5h2.553l-9.056 8.194a.75.75 0 0 0-.053 1.06Z"
+        clip-rule="evenodd"
+      />
+    </svg>
+  </div>
+</template>

components/section/BlogPosts.vue

@@ -3,6 +3,17 @@ const props = defineProps({
   articles: Object,
   show_dates: false,
 });
+
+function externalSite(article) {
+  if (!article?.external_url) return ''
+  if (article?.external_site) return article.external_site
+  try {
+    const u = new URL(article.external_url)
+    return u.hostname.replace(/^www\./, '')
+  } catch {
+    return article.external_url
+  }
+}
 </script>
 
 <template>
@@ -20,22 +31,19 @@ const props = defineProps({
               >
                 {{ article.title }}
               </div>
-              <template v-if="article.external_url">
-                <span
-                  class="rounded border border-orange-500/30 bg-orange-500/20 px-2 py-0.5 text-[10px] uppercase tracking-wide text-orange-300"
-                  >External</span
-                >
-              </template>
-              <template v-if="show_dates">
-                <NuxtTime
-                  :datetime="article.date"
-                  class="text-sm text-gray-200"
-                  year="numeric"
-                  month="short"
-                  day="2-digit"
-                />
-              </template>
+              <div class="flex items-center gap-2 md:ml-auto">
+                <ExternalIndicator v-if="article.external_url" :site="externalSite(article)" />
+              </div>
             </div>
+            <template v-if="show_dates">
+              <NuxtTime
+                :datetime="article.date"
+                class="text-xs text-gray-300"
+                year="numeric"
+                month="short"
+                day="2-digit"
+              />
+            </template>
             <div class="line-clamp-3 text-sm text-gray-100">
               {{
                 article.description ||

pages/blog/index.vue

@@ -215,7 +215,7 @@ watch(
           <template v-for="article in paginatedArticles" :key="article._id">
             <NuxtLink :to="article.path" class="h-full">
               <div
-                class="flex flex-col justify-between space-y-3 bg-black/50 p-4 text-white drop-shadow-lg hover:ring-1 hover:ring-white"
+                class="flex flex-col justify-between space-y-2 bg-black/50 p-4 text-white drop-shadow-lg hover:ring-1 hover:ring-white"
               >
                 <div class="space-y-1">
                   <div
@@ -227,21 +227,19 @@ watch(
                       {{ article.title }}
                     </p>
                     <div class="flex items-center gap-2 md:ml-auto">
-                      <template v-if="article.external_url">
-                        <span
-                          class="rounded border border-orange-500/30 bg-orange-500/20 px-2 py-0.5 text-[10px] uppercase tracking-wide text-orange-300"
-                          >{{ externalSite(article) }}</span
-                        >
-                      </template>
-                      <NuxtTime
-                        :datetime="article.date"
-                        class="text-sm text-gray-300 md:text-right"
-                        year="numeric"
-                        month="short"
-                        day="2-digit"
+                      <ExternalIndicator
+                        v-if="article.external_url"
+                        :site="externalSite(article)"
                       />
                     </div>
                   </div>
+                  <NuxtTime
+                    :datetime="article.date"
+                    class="text-xs text-gray-300"
+                    year="numeric"
+                    month="short"
+                    day="2-digit"
+                  />
                 </div>
                 <p
                   v-if="article.description"