feat: connect blog data (#259)

* sketch out media functionality * add types * add AppLink wrapper to card * remove placeholder images * chore: update/rebuild * add video cat * fixed aspect ratio * add blog placeholder (temp fix) * add blogUrl to config * fix: blogUrl * setup blogPlacehoder * typo
ipfs · Jul 3, 2023 · 0166567 · 0166567
1 parent 62145e3
commit 0166567
Show file tree

Hide file tree

Showing 12 changed files with 492 additions and 670 deletions.
diff --git a/assets/css/fonts.css b/assets/css/fonts.css
@@ -13,7 +13,7 @@ p:not(:last-child) {
   @apply mb-4;
 }
 
-main a:not(.btn) {
+main a:not(.btn,.card) {
   @apply underline;
 }
 

diff --git a/components/Card2.vue b/components/Card2.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import AppLink from './AppLink.vue'
+
 interface Props {
   image?: string
   date?: string
@@ -9,12 +11,13 @@ interface Props {
   category?: string
   tags?: string
 }
-defineProps<Props>()
+const props = defineProps<Props>()
+const image = props.image?.startsWith('http') ? props.image : `/images/${props.image}`
 </script>
 
 <template>
-  <div class="rounded-lg bg-brand-light">
-    <img v-if="image" class="h-40 w-full object-cover" :src="`/images/${image}`">
+  <component :is="link ? AppLink : 'div'" class="card rounded-lg bg-brand-light" :href="link">
+    <img v-if="props.image" class="aspect-video w-full object-cover" :src="image">
     <div class="p-6 pb-0">
       <p v-if="date" class="mb-1 text-xs text-gray-400">
         {{ date }}
@@ -29,9 +32,6 @@ defineProps<Props>()
     <div class="p-6 pt-4">
       <p v-if="excerpt" class="inline-block text-base">
         {{ excerpt }}...
-        <AppLink class="text-brand-teal-dark underline" :href="link">
-          Read more
-        </AppLink>
       </p>
       <slot />
       <div v-if="category || tags" class="mt-4 flex inline-flex gap-1">
@@ -43,5 +43,5 @@ defineProps<Props>()
         </div>
       </div>
     </div>
-  </div>
+  </component>
 </template>
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -1,6 +1,7 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 
 const PUBLIC_SITE_URL = process.env.NUXT_PUBLIC_SITE_URL || 'https://ipfs.tech'
+const PUBLIC_BLOG_URL = 'https://blog.ipfs.tech'
 // strip out the protocol and trailing slash
 const PUBLIC_DOMAIN = PUBLIC_SITE_URL.replace(/(^\w+:|^)\/\//, '').replace(/\/$/, '')
 
@@ -50,6 +51,7 @@ export default defineNuxtConfig({
       siteName: 'IPFS Powers the Distributed Web',
       siteDescription: 'The InterPlanetary File System is a peer-to-peer hypermedia protocol designed to preserve and grow humanity\'s knowledge by making the web upgradeable, resilient, and more open.',
       siteImage: '/images/ipfs-social-card.png',
+      blogUrl: PUBLIC_BLOG_URL,
       language: 'en-US',
       indexable: false, // TODO: enable before launch
       plausible: {

diff --git a/package.json b/package.json
@@ -21,13 +21,13 @@
     "@antfu/eslint-config": "^0.39.6",
     "@iconify-json/carbon": "^1.1.18",
     "@nuxt/content": "^2.7.0",
-    "@nuxt/devtools": "^0.6.4",
+    "@nuxt/devtools": "^0.6.6",
     "@nuxtjs/plausible": "^0.2.1",
     "@unocss/eslint-config": "^0.53.4",
     "@unocss/nuxt": "^0.53.4",
     "@unocss/preset-icons": "^0.53.4",
     "@vueuse/nuxt": "^10.2.1",
-    "eslint": "^8.43.0",
+    "eslint": "^8.44.0",
     "nuxt": "^3.6.1",
     "nuxt-seo-kit": "^1.3.9",
     "typescript": "^5.1.6"

diff --git a/pages/index.vue b/pages/index.vue
@@ -1,5 +1,39 @@
 <script setup lang="ts">
 const { data } = await useAsyncData('data', () => queryContent('_data').findOne())
+const config = useRuntimeConfig()
+
+// TODO: temporary until we have meta images included in the feed
+const blogPlaceholderImage = `${config.public.blogUrl}/assets/img/blog-post-placeholder.af417eb0.png`
+
+// blog/news/video content
+interface Post {
+  title: string
+  date: string
+  excerpt?: string
+  url: string
+  author?: string
+  category?: string
+  tags?: string
+  image?: string
+  thumbnail?: string
+}
+
+interface BlogItems { posts: Post[] }
+interface NewsItems { news: Post[] }
+interface VideoItems { videos: Post[] }
+
+const { data: latestBlogs } = await useFetch('/index.json', {
+  baseURL: config.public.blogUrl,
+  transform: (data: BlogItems) => data.posts,
+})
+const { data: latestNews } = await useFetch('/news.json', {
+  baseURL: config.public.blogUrl,
+  transform: (data: NewsItems) => data.news,
+})
+const { data: latestVideos } = await useFetch('/videos.json', {
+  baseURL: config.public.blogUrl,
+  transform: (data: VideoItems) => data.videos,
+})
 </script>
 
 <template>
@@ -204,28 +238,13 @@ const { data } = await useAsyncData('data', () => queryContent('_data').findOne(
         </Subhead>
         <Grid>
           <Card2
-            image="blog-1.jpg"
-            date="30 January 2023"
-            heading="Interplanetary Applications: Disco Chat"
-            subhead="Discordian"
-            excerpt="Check out Disco Chat, a peer-to-peer chat application built to demonstrate the power of peer-to-peer while enabling other"
-            link="#"
-          />
-          <Card2
-            image="blog-2.jpg"
-            date="30 January 2023"
-            heading="Interplanetary Applications: Disco Chat"
-            subhead="Discordian"
-            excerpt="Check out Disco Chat, a peer-to-peer chat application built to demonstrate the power of peer-to-peer while enabling other"
-            link="#"
-          />
-          <Card2
-            image="blog-3.jpg"
-            date="30 January 2023"
-            heading="Interplanetary Applications: Disco Chat"
-            subhead="Discordian"
-            excerpt="Check out Disco Chat, a peer-to-peer chat application built to demonstrate the power of peer-to-peer while enabling other"
-            link="#"
+            v-for="item in latestBlogs"
+            :key="item.title"
+            :date="item.date"
+            :image="item.image || blogPlaceholderImage"
+            :heading="item.title"
+            :subhead="item.author"
+            :link="item.url"
           />
         </Grid>
       </div>
@@ -235,22 +254,12 @@ const { data } = await useAsyncData('data', () => queryContent('_data').findOne(
         </Subhead>
         <Grid>
           <Card2
-            date="30 January 2023"
-            heading="WebTransport in libp2p"
-            excerpt="Check out Disco Chat, a peer-to-peer chat application built to demonstrate the power of peer-to-peer while enabling other"
-            link="#"
-          />
-          <Card2
-            date="30 January 2023"
-            heading="Why the Internet Needs the Interplanetary File System"
-            excerpt="Check out Disco Chat, a peer-to-peer chat application built to demonstrate the power of peer-to-peer while enabling other"
-            link="#"
-          />
-          <Card2
-            date="30 January 2023"
-            heading="Quiet: Free and Open P2P Team Chat built with Tor, libp2p and IPFS"
-            excerpt="Check out Disco Chat, a peer-to-peer chat application built to demonstrate the power of peer-to-peer while enabling other"
-            link="#"
+            v-for="item in latestNews"
+            :key="item.title"
+            :date="item.date"
+            :heading="item.title"
+            :subhead="item.author"
+            :link="item.url"
           />
         </Grid>
       </div>
@@ -260,31 +269,14 @@ const { data } = await useAsyncData('data', () => queryContent('_data').findOne(
         </Subhead>
         <Grid>
           <Card2
-            image="video-1.jpg"
-            date="30 January 2023"
-            heading="Meet the Web3 Builders: Pinata"
-            excerpt="Check out Disco Chat, a peer-to-peer chat application built to demonstrate the power of peer-to-peer while enabling other"
-            link="#"
-            category="Video"
-            tags="#NFTs #pinning #API #community"
-          />
-          <Card2
-            image="video-2.jpg"
-            date="30 January 2023"
-            heading="Meet the Web3 Builders: Pinata"
-            excerpt="Check out Disco Chat, a peer-to-peer chat application built to demonstrate the power of peer-to-peer while enabling other"
-            link="#"
-            category="Video"
-            tags="#NFTs #pinning #API #community"
-          />
-          <Card2
-            image="video-3.jpg"
-            date="30 January 2023"
-            heading="Meet the Web3 Builders: Pinata"
-            excerpt="Check out Disco Chat, a peer-to-peer chat application built to demonstrate the power of peer-to-peer while enabling other"
-            link="#"
+            v-for="item in latestVideos"
+            :key="item.title"
+            :date="item.date"
+            :image="item.thumbnail"
+            :heading="item.title"
+            :subhead="item.author"
+            :link="item.url"
             category="Video"
-            tags="#NFTs #pinning #API #community"
           />
         </Grid>
       </div>