article page

Author: NeilChaudhari

data/articles.json

@@ -0,0 +1,8 @@
+[
+    {
+        "title": "Local Programming Program Goes Global",
+        "summary": "Local Blogger Dan Woog writes about the FPA in his blog \"06880\"",
+        "link": "https://06880danwoog.com/2023/07/28/gfa-programming-program-goes-global/",
+        "photo": "https://i0.wp.com/06880danwoog.com/wp-content/uploads/2023/07/Fairfield-Programming-Association-1.jpg?resize=1024%2C785&ssl=1"
+    }
+]

src/components/article.js

@@ -0,0 +1,28 @@
+import * as React from "react"
+import { GatsbyImage } from "gatsby-plugin-image"
+import { Link } from "gatsby"
+
+function Article({title, summary, link, photo}){
+
+    let slug = title.toLowerCase()
+    let description = summary.split(" ").slice(0, 40).join(" ")
+
+    return (
+    <Link className="block w-full h-full" to={`/team/${slug}`}>
+      <div className="rounded shadow p-4 h-full">
+        <img src={photo} class="rounded-full w-1/2 mb-4" />
+        <h3 className="text-lg font-bold">
+          {title}
+        </h3>
+        <p className="text-md">{description || ""}</p>
+      </div>
+      <a href={link} class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
+        Read more
+        <svg class="w-3.5 h-3.5 ml-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
+        </svg>
+      </a>
+    </Link>
+    )
+}
+export default Article

src/pages/press.js

@@ -3,9 +3,11 @@ import { Link } from "gatsby"
 import Layout from "../components/layout"
 import Seo from "../components/seo"
 
-function PressPage({location}) {
-    const releases = require('../../data/general.json').press
+import Article from "../components/article"
 
+function PressPage({location}) {
+    //const releases = require('../../data/general.json').press
+    const releases = require('../../data/articles.json')
   return (
     <Layout location={location} crumbLabel="Press">
         <section>
@@ -26,13 +28,19 @@ function PressPage({location}) {
         </section>
         <section>
             <div className="max-w-6xl mx-auto pb-16 px-4 flex">
+                {/*
                 <div class="space-y-4 w-full">
                     <ul>
                         { 
                             releases.map(item => <li class="list-disc mb-4"><Link class="text-sky-400 hover:text-sky-500 hover:underline" to={item.path}>{item.name}</Link></li>)
                         }
                     </ul>
                 </div>
+                    */}
+                <div class="grid gap-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-4 mt-6">
+                    {releases
+                    .map(item => Article(item))}
+                </div>    
             </div>
         </section>
     </Layout>