Merge pull request #82 from cmpadden/feat/external-blog-indicator

Adds indicator of blogs hosted externally

Author: cmpadden

components/Header.vue

@@ -10,7 +10,7 @@ const route = useRoute();
         <HeadlessMenu as="div" class="relative z-50 inline-block text-left">
           <div>
             <HeadlessMenuButton
-              class="align-middle transform text-gray-700 transition-all duration-300 ease-in-out hover:scale-110 hover:text-orange-500 active:scale-95 dark:text-white"
+              class="transform align-middle text-gray-700 transition-all duration-300 ease-in-out hover:scale-110 hover:text-orange-500 active:scale-95 dark:text-white"
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -108,7 +108,7 @@ const route = useRoute();
                           ? 'bg-orange-500/50 text-white dark:text-white'
                           : 'text-gray-700 dark:text-white',
                         $route.path === '/playground' ? 'bg-orange-500' : '',
-                        'y-2 group flex w-full items-center px-2 text-sm',
+                        'group flex w-full items-center px-2 py-2 text-sm',
                       ]"
                     >
                       <svg

components/section/BlogPosts.vue

@@ -13,24 +13,34 @@ const props = defineProps({
           <div
             class="h-full space-y-2 bg-black/50 p-3 text-white drop-shadow-lg hover:ring-1 hover:ring-white"
           >
-            <div class="flex">
+            <div class="flex items-center gap-2">
               <div
                 class="line-clamp-1 flex-1 text-lg font-bold md:text-xl"
                 :title="article.title"
               >
                 {{ article.title }}
               </div>
-              <NuxtTime
-                v-if="show_dates"
-                :datetime="article.date"
-                class="text-sm text-gray-200"
-                year="numeric"
-                month="short"
-                day="2-digit"
-              />
+              <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>
             <div class="line-clamp-3 text-sm text-gray-100">
-              {{ article.description }}
+              {{
+                article.description ||
+                article.meta?.excerpt?.children?.[0]?.value
+              }}
             </div>
           </div>
         </NuxtLink>

content.config.ts

@@ -6,10 +6,25 @@ export default defineContentConfig({
       source: '**/*.md',
       type: 'page',
       schema: z.object({
+        // required
         tags: z.array(z.string()),
         categories: z.array(z.string()),
-        img: z.string(),
         date: z.date(),
+
+        // optional/expanded
+        title: z.string().optional(),
+        description: z.string().optional(),
+        cover_image: z.string().optional(),
+        // legacy compatibility
+        img: z.string().optional(),
+
+        // external linking
+        external_url: z.string().url().optional(),
+        external_site: z.string().optional(),
+
+        // seo
+        canonical_url: z.string().url().optional(),
+        draft: z.boolean().optional(),
       })
     })
   }

content/blog/using-codex-for-education-at-dagster-labs.md

@@ -3,13 +3,16 @@ title: 'Using Codex for education at Dagster Labs'
 date: "2025-10-27"
 tags: ["ai", "education"]
 categories: ["ai"]
+description: "How we structure docs so AI tools can reason with them effectively."
+external_url: "https://developers.openai.com/blog/codex-for-documentation-dagster"
+external_site: "OpenAI Developer Blog"
 ---
 
 I recently had the opportunity to showcase how we use Codex for educational content at Dagster Labs which was featured on the OpenAI developer blog; you can find a full copy of that post below.
 
 <!--more-->
 
-https://developers.openai.com/blog/codex-for-documentation-dagster
+
 
 ## Overview
 

pages/blog/[...slug].vue

@@ -4,6 +4,34 @@ const route = useRoute();
 const { data: page } = await useAsyncData(route.path, () => {
   return queryCollection("content").path(route.path).first();
 });
+
+watchEffect(() => {
+  if (!page.value) return;
+  const isExternal = Boolean((page.value as any).external_url);
+  const canonical =
+    (page.value as any).canonical_url || (page.value as any).external_url;
+
+  useHead({
+    meta: [
+      // avoid duplicate indexing for external summaries
+      isExternal ? { name: "robots", content: "noindex,follow" } : undefined,
+    ].filter(Boolean) as any,
+    link: [
+      canonical ? { rel: "canonical", href: canonical } : undefined,
+    ].filter(Boolean) as any,
+  });
+});
+
+function externalSite(p: any) {
+  if (!p?.external_url) return "";
+  if (p?.external_site) return p.external_site;
+  try {
+    const u = new URL(p.external_url);
+    return u.hostname.replace(/^www\./, "");
+  } catch {
+    return p.external_url;
+  }
+}
 </script>
 
 <template>
@@ -14,8 +42,11 @@ const { data: page } = await useAsyncData(route.path, () => {
     <!-- title -->
     <div class="flex">
       <!-- https://content.nuxt.com/components/content-slot -->
-      <template v-if="page.cover_image">
-        <img class="mr-4 h-16 border-2 border-black" :src="page.cover_image" />
+      <template v-if="page.cover_image || page.img">
+        <img
+          class="mr-4 h-16 border-2 border-black"
+          :src="page.cover_image || page.img"
+        />
       </template>
 
       <h1 class="text-2xl font-bold md:text-3xl">
@@ -66,6 +97,25 @@ const { data: page } = await useAsyncData(route.path, () => {
       </div>
     </div>
 
+    <!-- external banner and CTA (below title/date, above content) -->
+    <div
+      v-if="page.external_url"
+      class="flex items-center justify-between gap-4 rounded border border-orange-500/30 bg-orange-500/10 p-3"
+    >
+      <div class="text-sm text-gray-200">
+        The original version of this article can be found on the
+
+        <a
+          :href="page.external_url"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="font-semibold text-orange-300"
+        >
+          {{ externalSite(page) }} </a
+        >.
+      </div>
+    </div>
+
     <!--
         - Remove maximum width of prose content: https://github.com/tailwindlabs/tailwindcss-typography#overriding-max-width
         - Use prose-pre:bg-white to work with @nuxt/content syntax highlighting, otherwise background-color defaults to `.prose:where(pre)`

pages/blog/index.vue

@@ -64,6 +64,17 @@ const paginatedArticles = computed(() => {
   return visibleArticles.value.slice(start, start + pageSize);
 });
 
+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;
+  }
+}
+
 function toggleTag(tag) {
   if (selectedTags.value.includes(tag)) {
     selectedTags.value = selectedTags.value.filter((el) => el !== tag);
@@ -201,46 +212,51 @@ watch(
     <div class="container mx-auto space-y-8">
       <div class="space-y-4">
         <div class="grid gap-4">
-          <NuxtLink
-            v-for="article in paginatedArticles"
-            :key="article._id"
-            :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"
-            >
-              <div class="space-y-1">
-                <div
-                  class="flex flex-col gap-1 md:flex-row md:items-center md:gap-3"
-                >
-                  <p
-                    class="text-lg font-semibold text-orange-400 md:flex-1 md:text-xl"
+          <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"
+              >
+                <div class="space-y-1">
+                  <div
+                    class="flex flex-col gap-1 md:flex-row md:items-center md:gap-3"
                   >
-                    {{ article.title }}
-                  </p>
-                  <NuxtTime
-                    :datetime="article.date"
-                    class="text-sm text-gray-300 md:text-right"
-                    year="numeric"
-                    month="short"
-                    day="2-digit"
-                  />
+                    <p
+                      class="text-lg font-semibold text-orange-400 md:flex-1 md:text-xl"
+                    >
+                      {{ 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"
+                      />
+                    </div>
+                  </div>
                 </div>
+                <p
+                  v-if="article.description"
+                  class="line-clamp-3 text-sm text-gray-100"
+                >
+                  {{ article.description }}
+                </p>
+                <ContentRenderer
+                  v-else-if="article.meta?.excerpt"
+                  :value="article.meta.excerpt"
+                  class="line-clamp-4 text-sm text-gray-100"
+                />
               </div>
-              <p
-                v-if="article.description"
-                class="line-clamp-3 text-sm text-gray-100"
-              >
-                {{ article.description }}
-              </p>
-              <ContentRenderer
-                v-else-if="article.meta?.excerpt"
-                :value="article.meta.excerpt"
-                class="line-clamp-4 text-sm text-gray-100"
-              />
-            </div>
-          </NuxtLink>
+            </NuxtLink>
+          </template>
         </div>
 
         <div class="flex items-center justify-between text-sm text-gray-300">

server/routes/atom.ts

@@ -29,18 +29,23 @@ export default defineEventHandler(async (event) => {
     articles.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
 
     articles.forEach((article) => {
+      const isExternal = Boolean((article as any).external_url)
+      const link = isExternal ? (article as any).external_url : `${BASE_URL}${article.path}`
+      const id = link
+      const imagePath = (article as any).cover_image || (article as any).img
+
       feed.addItem({
         title: article.title ? article.title : "Missing Title",
-        id: article.path,
-        link: `${BASE_URL}${article.path}`,
-        description: article.description,
+        id,
+        link,
+        description: (article as any).description,
         author: [
           {
             name: AUTHOR_NAME,
           },
         ],
         date: new Date(article.date),
-        image: article.cover_image ? `${BASE_URL}/${article.cover_image}` : undefined
+        image: imagePath ? (imagePath.startsWith('http') ? imagePath : `${BASE_URL}${imagePath.startsWith('/') ? '' : '/'}${imagePath}`) : undefined
       });
     });
 

server/routes/sitemap.xml.ts

@@ -18,8 +18,10 @@ export default defineEventHandler(async (event) => {
     sitemap.write({ url: '/playground/french' });
     sitemap.write({ url: '/playground/matrix' });
 
-    // Dynamically generate routes for Nuxt markdown content
-    articles.forEach((article) => sitemap.write({ url: article.path, changefreq: 'monthly' }));
+    // Dynamically generate routes for Nuxt markdown content (exclude external summaries)
+    articles
+      .filter((a: any) => !a.external_url)
+      .forEach((article) => sitemap.write({ url: article.path, changefreq: 'monthly' }));
     sitemap.end();
 
     return (await streamToPromise(sitemap));