feat: twitter cards (#228)

* Add twitter card images

* Add MarkdownContent component

* Twitter cards and data

* Change markdown file to yaml file

* Convert html in _data to yaml

* rm marked

* use nuxt markdown lib (for now)

* enable componentIslands

* use component islands to render markdown on server

* rebuild pnpm-lock

* flatten props

* use carbon twitter icon

* squish imgs

---------

Co-authored-by: cw <[email protected]>

components/MarkdownContent.server.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+// @ts-expect-error avoid lint error
+import markdownParser from '@nuxt/content/transformers/markdown'
+
+export interface MarkdownRenderProps {
+  content?: string
+  cid?: string
+}
+const props = withDefaults(defineProps<MarkdownRenderProps>(), { content: '', cid: '<some-id>' })
+const parsedMarkdown = await markdownParser.parse(props.cid, props.content)
+</script>
+
+<template>
+  <ContentRenderer :value="parsedMarkdown" v-bind="$attrs" />
+</template>

components/TwitterCard.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+interface Props {
+  name?: string
+  handle?: string
+  post?: string
+  image?: string
+  time?: string
+  date?: string
+  retweet?: {
+    name?: string
+    handle?: string
+    post?: string
+    image?: string
+    time?: string
+    date?: string
+  }
+}
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="twitter-card mb-8 break-inside-avoid rounded-xl bg-brand-light p-4">
+    <div class="mb-4 w-full flex items-center gap-2">
+      <img :src="`/images/twitter-profile-${handle}.jpg`" :alt="handle" class="h-9 w-9 flex-none rounded-full">
+      <div class="flex-1">
+        <p class="font-bold">
+          {{ name }}
+        </p>
+        <p>@{{ handle }}</p>
+      </div>
+      <div alt="twitter-bird" class="i-carbon-logo-twitter h-7 w-8 flex-none fill-current color-[#2aa9e0]" />
+    </div>
+    <div class="twitter-post mb-4">
+      <MarkdownContent v-if="post" :content="post" />
+    </div>
+    <img v-if="image" :src="`/images/${image}`" class="mb-4 w-full">
+    <div v-if="retweet" class="mb-4 border rounded-md p-3">
+      <div class="mb-2 w-full flex items-center gap-1">
+        <img :src="`/images/twitter-profile-${handle}.jpg`" :alt="handle" class="h-5 w-5 flex-none rounded-full">
+        <p class="flex-1">
+          <span class="font-bold">{{ retweet.name }}</span> @{{ retweet.handle }}, {{ retweet.date }}
+        </p>
+      </div>
+      <div class="twitter-post">
+        <MarkdownContent v-if="retweet.post" :content="retweet.post" />
+      </div>
+      <img v-if="retweet.image" :src="`/images/${retweet.image}`" class="mt-4 w-full">
+    </div>
+    <p>
+      {{ time }} • {{ date }}
+    </p>
+  </div>
+</template>
+
+<style lang="postcss">
+  .twitter-card {
+    @apply text-xs;
+  }
+  .twitter-card p {
+    @apply mb-0 text-xs;
+  }
+  .twitter-post p {
+    @apply text-xs mb-3;
+  }
+  .twitter-post p:last-child {
+    @apply mb-0;
+  }
+</style>

content/_data.yml

@@ -54,4 +54,106 @@ browserCards:
     title: Firefox Extension
     description: |
       IPFS browser extension
-    link: https://www.protocol.ai
+    link: https://www.protocol.ai
+twitterCards:
+  - name: Horacio Herrera
+    handle: hhg2288
+    post: |
+      IPFS Community round table!!
+    image: twitter-horracio.jpg
+    time: 5:23 PM
+    date: Oct 30, 2022
+  - name: Protocol Labs
+    handle: protocollabs
+    post: |
+      Scenes from Day 1 of [#IPFSCamp](https://twitter.com/hashtag/IPFSCamp) at [#LabWeek](https://twitter.com/hashtag/LabWeek).
+
+      Head to Convento do Beato for another day of talks, workshops, connection & more for the IPFS
+
+      Community. Happening all day.
+
+      Details
+      [https://2022.ipfs.camp](https://2022.ipfs.camp)
+    image: twitter-protocol.jpg
+    time: 2:30 PM
+    date: Oct 29, 2022
+  - name: shann.lens
+    handle: shanvasion
+    post: |
+      Huge respect for the [@protocollabs](https://twitter.com/protocollabs) ecosystem [#IPFSCamp](https://twitter.com/hashtag/IPFSCamp) Today was incredible. I met some of the absolute smartest and kindest ppl. Overheard many discussions about how projects are going to achieve adoption. The energy is all about action
+    time: 2:30 PM
+    date: Oct 29, 2022
+    retweet:
+      name: IPFS
+      handle: IPFS
+      post: |
+        Ready for round 2?
+        
+        Join us for [#IPFSCamp](https://twitter.com/hashtag/IPFSCamp) tomorrow, kicking off at 10am for a full day of talks, workshops, hacking, and more.
+      image: twitter-shann.jpg
+      date: Oct 28, 2022
+  - name: Sneha Mishra
+    handle: sneha_bb
+    post: |
+      Realising the power of decentralisation w [@IPFS](https://twitter.com/ipfs) [@Filecoin](https://twitter.com/filecoin) fighting for the common people against Violence, Evidence Tampering, Wrongful Voting, Control over publishing/media industry....
+    image: twitter-sneha.jpg
+    time: 3:57 PM
+    date: Oct 30, 2022
+  - name: shann.lens
+    handle: shanvasion
+    post: |
+      Huge respect for the [@protocollabs](https://twitter.com/protocollabs) ecosystem [#IPFSCamp](https://twitter.com/hashtag/IPFSCamp) Today was incredible. I met some of the absolute smartest and kindest ppl. Overheard many discussions about how projects are going to achieve adoption. The energy is all about action
+    time: 2:30 PM
+    date: Oct 29, 2022
+    retweet:
+      name: IPFS
+      handle: IPFS
+      post: |
+        Ready for round 2?
+
+        Join us for [#IPFSCamp](https://twitter.com/hashtag/IPFSCamp) tomorrow, kicking off at 10am for a full day of talks, workshops, hacking, and more.
+      image: twitter-shann.jpg
+      date: Oct 28, 2022
+  - name: Pixelmatters
+    handle: pixelmatters_
+    post: |
+      What a day we had yesterday at [LabWeek22](https://twitter.com/hashtag/LabWeek22), the first-ever decentralized conference hosted by our partner [@protocollabs](https://twitter.com/protocollabs)
+
+      It's an event where teams are innovating and building a collective future. #plsummit
+    image: twitter-pixelmatters.jpg
+    time: 7:27 PM
+    date: Oct 25, 2022
+  - name: omoju.eth
+    handle: omojumiller
+    post: |
+      Super excited about this. I really, really, like being a part of [@protocollabs](https://twitter.com/protocollabs) family!
+
+      My team and I like their approach to building a thriving eco-system of #Web3 companies solving major problems [LabWeek22](https://twitter.com/hashtag/LabWeek22).
+    time: 3:57 PM
+    date: Oct 30, 2022
+    retweet:
+      name: Protocol Labs
+      handle: protocollabs
+      post: |
+        Only two weeks until we're together in Lisbon for [LabWeek22](https://twitter.com/hashtag/LabWeek22)! Events are filling up fast [http://22.labweek.io](http://22.labweek.io) for the latest news and to reserve your spot!
+        
+        Lisbon, Portugal<br>
+        Oct 24 - Nov 4, 2022<br>
+        [http://22.labweek.io](http://22.labweek.io)
+      image: twitter-omojueth.jpg
+      date: Oct 11, 2022
+  - name: Satellite_im
+    handle: satellite_im
+    post: |
+      Satellite's [@weveloper](weveloper) is up front now showing off our Iridium project, which is the special sauce that powers Satellite Core's messaging platform. [#IPFSCamp](https://twitter.com/hashtag/IPFSCamp)
+    image: twitter-satelliteim.jpg
+    time: 3:57 PM
+    date: Oct 30, 2022
+  - name: Protocol Labs
+    handle: protocollabs
+    post: |
+      At Hacker Base this morning, great to see some of the [@Web3Storage](https://twitter.com/Web3Storage) team in person [@hugomrdias](https://twitter.com/hugomrdias) [@gozala](https://twitter.com/gozala) [@bengo](https://twitter.com/bengo) [@vascosantos10](https://twitter.com/vascosantos10) [@_alanshaw](https://twitter.com/_alanshaw)
+      #labweek22
+    image: twitter-protocol-2.jpg
+    time: 1:23 PM
+    date: Oct 25, 2022

nuxt.config.ts

@@ -32,6 +32,7 @@ export default defineNuxtConfig({
   ],
   experimental: {
     inlineSSRStyles: false,
+    componentIslands: true,
   },
   runtimeConfig: {
     public: {

package.json

@@ -2,7 +2,7 @@
   "name": "ipfs-website",
   "version": "3.0.0",
   "private": true,
-  "packageManager": "pnpm@8.4.0",
+  "packageManager": "pnpm@8.5.0",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev",

pages/community.vue

@@ -1,3 +1,7 @@
+<script setup lang="ts">
+const { data } = await useAsyncData('data', () => queryContent('_data').findOne())
+</script>
+
 <template>
   <div>
     <seo-tags
@@ -216,6 +220,13 @@
       <Heading center>
         Community Voices
       </Heading>
+      <div class="columns-2 gap-8 md:columns-3">
+        <TwitterCard
+          v-for="(card, index) in data?.twitterCards"
+          :key="index"
+          v-bind="card"
+        />
+      </div>
     </PageSection>
     <PageSection dark-gradient bottom-tight overlay="constellations-telescope.svg" overlay-position="top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
       <div class="text-white">

pages/help.vue

@@ -1,6 +1,4 @@
 <script>
-import MarkdownContent from '../components/MarkdownContent'
-
 export default {
   components: {
     MarkdownContent,

pages/legal.vue

@@ -1,6 +1,4 @@
 <script>
-import MarkdownContent from '../components/MarkdownContent'
-
 export default {
   components: {
     MarkdownContent,

pages/media.vue

@@ -1,6 +1,4 @@
 <script>
-import MarkdownContent from '../components/MarkdownContent'
-
 export default {
   components: {
     MarkdownContent,