Merge pull request #137 from life-itself/latest-releases

[site/home]: Latest releases section from page frontmatter

notes/collective-action-problems-and-climate-change.md

@@ -1,17 +1,15 @@
 ---
 title: Collective Action Problems & Climate Change
 created: 2022-04-13
-date: 2022-04-13
-description: "In episode #6 in our series of deep dives into crypto and web3, Rufus Pollock and Stephen Diehl explore the interaction of climate change and public goods problems. They focus on KlimaDAO as an example of an attempted solution to solve a public goods problem within the climate space using a Decentralized Autonomous Organization."
+date: 2022-03-01
+description: 'In this episode we use the example of KlimaDAO to explore the interaction between climate change and the public goods problem.'
+image: /img/Collective Action Climate.png
 youtube: https://www.youtube.com/watch?v=SLXtnCL6IxE
 podcast: https://anchor.fm/life-itself/episodes/Collective-Action-Problems--Climate-Change-e1h4o6e/a-a7gpq18
-featured: false
+featured: true
 aliases: notes/collective-action-problems-and-climate-change.md
 ---
 
-{/* https://www.youtube.com/watch?v=SLXtnCL6IxE */}
-
-{/* Podcast: https://anchor.fm/life-itself/episodes/Collective-Action-Problems--Climate-Change-e1h4o6e/a-a7gpq18 */}
 * Wiki topic: [public-goods-problem](../concepts/public-goods-problem.md)
 
 ***

notes/pia-mancini-open-collective-dialogue.md

@@ -1,6 +1,12 @@
 ---
+title: Open Collective, Steward Ownership & Exit to Community with Pia Mancini
 created: 2022-04-13
 date: 2022-04-08
+description: 'In this episode with Pia Mancini about her work to make community finance transparent and sustainable with Open Collective, her commitment ot steward ownership and the value of an exit to community.'
+image: /img/Pia Mancini Thumbnail.jpg
+youtube: https://www.youtube.com/watch?v=C2KYJiQVtIM
+featured: true
+aliases: notes/pia-mancini-open-collective-dialogue.md
 ---
 
 # Dialogue with Pia Mancini on Open Collective

notes/post-state-technocracy.md

@@ -1,17 +1,15 @@
 ---
-title: Post-State Technocracy
+title: Web3 and Post-State Technocracy
 created: 2022-03-21
-date: 2022-03-21
-description: "In episode #4 of our ongoing deep dive into web3 and crypto, Rufus Pollock and Stephen Diehl do a deep dive into the Silicon Valley utopian ideas of crypto assets and explore the notion that crypto assets are a means to create a new form of 'network state' outside of the existing international order."
+date: 2022-02-17
+description: "In this episode we explore the aspirational transition from the existing US-led international order to a world in which blockchain technology and technocracy are the new foundations for global human governance."
+image: /img/technocracy.jpg
 youtube: https://www.youtube.com/watch?v=gZ0iCJkM3PU
 podcast: https://anchor.fm/life-itself/episodes/On-Web3-and-Post-State-Technocracy-with-Stephen-Diehl--Rufus-Pollock-e1g4cpe
-featured: false
+featured: true
 aliases: notes/post-state-technocracy.md
 ---
 
-{/* https://www.youtube.com/watch?v=gZ0iCJkM3PU */}
-
-{/* Podcast: https://anchor.fm/life-itself/episodes/On-Web3-and-Post-State-Technocracy-with-Stephen-Diehl--Rufus-Pollock-e1g4cpe */}
 * Wiki Topic: [Post-state technocracy](../concepts/post-state-technocracy.md)
 
 ***

site/components/Home/Latest.js

@@ -1,32 +1,4 @@
-
-const posts = [
-  {
-    title: 'Open Collective, Steward Ownership & Exit to Community with Pia Mancini',
-    href: 'https://www.youtube.com/watch?v=C2KYJiQVtIM',
-    category: { name: 'Video', href: '#' },
-    description: 'In this episode with Pia Mancini about her work to make community finance transparent and sustainable with Open Collective, her commitment ot steward ownership and the value of an exit to community.',
-    imageUrl: '/img/Pia Mancini Thumbnail.jpg'
-  },
-  {
-    title: 'Collective Action Problems & Climate Change',
-    href: 'https://www.youtube.com/watch?v=SLXtnCL6IxE',
-    category: { name: 'Video', href: '#' },
-    description: 'In this episode we use the example of KlimaDAO to explore the interaction between climate change and the public goods problem.',
-    datetime: '2022-03-01',
-    imageUrl: '/img/Collective Action Climate.png'
-  },
-  {
-    title: 'Web3 and Post-State Technocracy',
-    href: 'https://www.youtube.com/watch?v=gZ0iCJkM3PU',
-    category: { name: 'Video', href: '#' },
-    description: 'In this episode we explore the aspirational transition from the existing US-led international order to a world in which blockchain technology and technocracy are the new foundations for global human governance.',
-    datetime: '2022-02-17',
-    imageUrl: '/img/technocracy.jpg',
-  },
-]
-
-
-export function Latest() {
+export function Latest({ posts }) {
   return (
     <div className="relative pt-16 pb-20 px-4 sm:px-6 lg:pt-24 lg:pb-28 lg:px-8">
       <div className="absolute inset-0">
@@ -40,21 +12,29 @@ export function Latest() {
           </p>
         </div>
         <div className="mt-12 max-w-lg mx-auto grid gap-5 lg:grid-cols-3 lg:max-w-none">
-          {posts.map((post) => (
+          {posts && posts.map((post) => (
             <div key={post.title} className="flex flex-col rounded-lg shadow-lg overflow-hidden">
               <div className="flex-shrink-0">
-                <img className="h-48 w-full object-cover" src={post.imageUrl} alt="" />
+                {post.image ? <img className="h-48 w-full object-cover" src={post.image} alt={post.title} />
+                 : <div className="h-20 w-full bg-slate-500" />
+                }
               </div>
               <div className="flex-1 bg-slate-800 p-6 flex flex-col justify-between">
                 <div className="flex-1">
                   <p className="text-sm font-medium text-indigo-600 dark:text-yellow-500">
-                    <a href={post.category.href} className="hover:underline">
-                      {post.category.name}
-                    </a>
+                    {post.youtube && ["watch", "embed"].some(v => post.youtube.includes(v)) && (
+                      <a href={post.youtube} className="hover:underline">
+                      Video
+                    </a>)}
                   </p>
-                  <a href={post.href} className="block mt-2">
+                  <a href={post.link} className="block mt-2">
                     <p className="text-xl font-semibold text-slate-900 dark:text-slate-300">{post.title}</p>
-                    <p className="mt-3 text-base text-gray-500">{post.description}</p>
+                    <p className="mt-3 text-base text-gray-500">
+                      {post.description && post.description.length > 150 && !!post.image
+                        ? `${post.description.slice(0, 150)} ...` 
+                        : post.description
+                      }
+                    </p>
                   </a>
                 </div>
               </div>

site/content/test.md

@@ -1,4 +1,14 @@
-# Test (Obsidian) wiki link syntax
+---
+title: Test frontmatter in markdown
+created: 2022-04-26
+date: 2022-04-26
+description: 'In this test episode with somebody about their work to make community finance transparent and sustainable with Open Collective, their commitment ot steward ownership and the value of an exit to community.'
+youtube: https://youtube.com/
+featured: false
+---
+
+
+## Test (Obsidian) wiki link syntax
 
 1. Internal link  
     *`[[recent-events]]`*  
@@ -23,7 +33,7 @@
 
 ***
 
-# Test video embed links in markdown
+## Test video embed links in markdown
 
 This youtube link (https://www.youtube.com/embed/K5JtPTyc0y0) surrounded by newlines in markdown would display as follows:
 

site/pages/index.js

@@ -4,16 +4,38 @@ import Features from 'components/Home/Features'
 import Why from 'components/Home/Why'
 import GetInvolved from 'components/Home/Get-Involved'
 import { NextSeo } from 'next-seo'
+import { allOtherPages } from 'contentlayer/generated'
 
-export default function Home(props) {
+export default function Home({ featuredPages }) {
   return (
     <>
-      <NextSeo title='Home' />
+      <NextSeo title="Home" />
       <Hero />
-      <Latest />
+      <Latest posts={featuredPages} />
       <Features />
       <Why />
       <GetInvolved />
     </>
-  )
+  );
+}
+
+export async function getStaticProps () {
+  const featuredPages = allOtherPages
+    .filter((page) => page.featured !== undefined && page.featured)
+    .sort((a, b) => new Date(b.date) - new Date(a.date))
+    .map((page) => {
+      return {
+        title: page.title ?? null,
+        description: page.description ?? null,
+        image: page.image ?? null,
+        youtube: page.youtube ?? null,
+        link: `/${page._raw.flattenedPath}`,
+      }
+    })
+
+  return {
+    props: {
+      featuredPages
+    }
+  }
 }