Config : Airtable.s + Node for dynamic content importing

.github/workflows/airtable.yml

@@ -0,0 +1,29 @@
+name: Airtable Import
+on: [push]
+jobs:
+  airtable:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js 18.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+      - uses: ruby/setup-ruby@v1
+        with:
+          bundler-cache: true
+      - name: npm install
+        run: |
+          npm install
+      - name: run Airtable Import
+        run: |
+          node airtable.js
+        env:
+           AIRTABLE_API_KEY: ${{secrets.AIRTABLE_API_KEY}}
+      - name: bundle install and build Jekyll
+        run: |
+          bundle install
+          bundle exec jekyll build
+      - name: Create Pull Request
+        uses: peter-evans/[email protected]
+

.gitignore

@@ -3,3 +3,6 @@ _site/
 .sass-cache/
 .jekyll-metadata
 .jekyll-cache/
+node_modules
+.bundle/
+vendor/

.ruby-version

@@ -1 +1 @@
-3.1.3
+3.2.2

Gemfile

@@ -2,7 +2,7 @@ source "https://rubygems.org"
 
 # Note: when updating Ruby version update update .ruby-version file as well
 # to ensure Cloud.gov environment version of Ruby matches
-ruby '3.1.3'
+ruby '3.2.2'
 
 # Hello! This is where you manage which Jekyll version is used to run.
 # When you want to use a different version, change it below, save the

Gemfile.lock

@@ -79,9 +79,11 @@ GEM
 PLATFORMS
   arm64-darwin-21
   arm64-darwin-22
+  x64-mingw-ucrt
   x64-mingw32
   x86_64-darwin-18
   x86_64-darwin-21
+  x86_64-linux
 
 DEPENDENCIES
   jekyll (~> 4.2.1)
@@ -94,7 +96,7 @@ DEPENDENCIES
   webrick
 
 RUBY VERSION
-   ruby 3.1.3p185
+   ruby 3.2.2p53
 
 BUNDLED WITH
    2.4.16

_config.yml

@@ -32,6 +32,8 @@ collections:
   blog:
     output: true
     permalink: /blog/:permalink/
+  import:
+    output: true  
 collections_dir: collections
 
 defaults:

_layouts/bios.html

@@ -0,0 +1,39 @@
+---
+layout: default
+---
+<section class="story">
+  <article class="grid-container">
+    <div class="grid-row grid-gap-lg news-row">
+      <div class="news-content-container">
+        <header>
+          <div class="breadcrumb">Team Bios</div>
+          <h1>{{ page.title }}</h1>
+          <p class="news-date">{{ page.publish_date | date: '%B %d, %Y' }}</p>
+        </header>
+        <div class="bios-content">
+          {{ content }}
+        </div>
+      </div>
+    </div>
+  </article>
+</section>
+<section class="more-news">
+  {% assign site_news = site.news %}
+  <div class="grid-container">
+    <div class="breadcrumb">More News</div>
+    <div class="grid-row grid-gap-lg">
+      {% for news in site_news limit:4 %}
+        {% if news.url != page.url %}
+          {% if forloop.index < 3 or found %}
+            <div class="tablet:grid-col-6">
+              {% include components/news-item.html news=news %}
+            </div>
+          {% endif %}
+        {% else %}
+          {% assign found = true %}
+        {% endif %}
+      {% endfor %}
+    </div>
+  </div>
+</section>
+<!-- {% include components/hiring.html %} -->

_layouts/news-landing.html

@@ -0,0 +1,39 @@
+---
+layout: default
+---
+<section class="story">
+  <article class="grid-container">
+    <div class="grid-row grid-gap-lg news-row">
+      <div class="tablet:grid-col-12 news-content-container">
+        <header>
+          <div class="breadcrumb">News</div>
+          <h1>{{ page.title }}</h1>
+          <p class="news-date">{{ page.publish_date | date: '%B %d, %Y' }}</p>
+        </header>
+        <div class="news-content">
+          {{ content }}
+        </div>
+      </div>
+    </div>
+  </article>
+</section>
+<section class="more-news">
+  {% assign site_news = site.news %}
+  <div class="grid-container">
+    <div class="breadcrumb">More News</div>
+    <div class="grid-row grid-gap-lg">
+      {% for news in site_news limit:4 %}
+        {% if news.url != page.url %}
+          {% if forloop.index < 3 or found %}
+            <div class="tablet:grid-col-6">
+              {% include components/news-item.html news=news %}
+            </div>
+          {% endif %}
+        {% else %}
+          {% assign found = true %}
+        {% endif %}
+      {% endfor %}
+    </div>
+  </div>
+</section>
+<!-- {% include components/hiring.html %} -->

airtable.js

@@ -0,0 +1,123 @@
+const fs = require('fs');
+const Airtable = require('airtable');
+
+const base = new Airtable({apiKey: process.env.AIRTABLE_API_KEY}).base('appuZMt69pZnTis2t');
+
+const xdContent = {};
+const cacheFilePath = './airtable-cache.json';
+const newsFilePath = './collections/_import/news.md';
+const biosFilePath = './collections/_import/bios.md';
+
+// Utility function we'll use to compare our data
+const deepCompare = (arg1, arg2) => {
+    if (JSON.stringify(arg1) === JSON.stringify(arg2)){
+      if (JSON.stringify(arg1) === '[object Object]' || Array.isArray(arg1)){
+        if (Object.keys(arg1).length !== Object.keys(arg2).length ){
+          return false;
+        }
+        return (Object.keys(arg1).every((key) => {
+          return deepCompare(arg1[key],arg2[key]);
+        }));
+      }
+      return (arg1===arg2);
+    }
+    return false;
+}
+
+// Fetch our airtable content and generate some markup with it
+// Optionally (if newer), write to our cache file with new data
+const fetchAirtablePromise = (path) => new Promise((resolve, reject) => {
+
+    base('xd.gov Content').select({
+        // Selecting the first 3 records in Grid view:
+        maxRecords: 20,
+        view: "Grid view"
+    }).eachPage((records, fetchNextPage) => {
+        // This function will get called for each page of records.
+        // Grab only content with a content type field
+        const filteredRecords = records.filter(record => record.fields['Content Type'] !== undefined);
+        // Filter content types to set as xdContent keys
+        const xdFieldNames = new Set(filteredRecords.filter(record => record.fields['Content Type'] !== undefined).map(record => record.fields['Content Type'][0]));
+        xdFieldNames.forEach(name => xdContent[name] = []);
+
+        filteredRecords.forEach((record) => {
+            let fieldType = record.fields['Content Type'];
+            xdContent[fieldType].push(record.fields);
+        });               
+
+        // If there are more records, `page` will get called again.
+        // If there are no more records, `done` will get called.
+        fetchNextPage();
+
+        resolve(xdContent)
+
+    }, function done(err) {
+        if (err) { console.error(err); reject(error); return; }
+    });
+
+});
+
+const generateXdMarkup = (content) => {
+    let newsMarkDown = '---\n' + 'layout: news-landing\n' + 'title: News\n' + '---';
+
+    // Create News page elements 
+    content['News'].forEach(({ Name: name, Blurb: blurb }) => {
+        newsMarkDown += `\n<div>\n<h3>${name}</h3>\n<p>${blurb}</p>\n</div>`;
+    })    
+
+    let biosMarkdown = '---\n' + 'layout: bios\n' + 'title: Bios\n' + '---';
+
+    // Create Bios page elements
+    content['Bio for team page'].forEach(({ Name: name, Blurb: blurb, Images: images }) => {
+        if ([name, blurb, images].every(item => item !== undefined)) {
+            biosMarkdown += `\n<div>\n<img id="${images[0].id}" alt="Image of ${name}" src="${images[0].url}" />\n<h3>${name}</h3>\n<p>${blurb}</p>\n</div>`
+        }
+    })
+
+    // Keep log for Action debugging
+    console.log(newsMarkDown, biosMarkdown);
+
+    return [newsMarkDown, biosMarkdown];
+}
+
+fetchAirtablePromise(cacheFilePath, newsFilePath, biosFilePath)
+    .then((data) => {
+
+        const cacheData = fs.readFileSync(cacheFilePath);
+
+        // Compare our cache with the newly fetched data.
+        // If the same, we don't need to continue.
+        if (deepCompare(JSON.parse(cacheData), data)) {
+            console.log('Data is a match to cache, aborting.');
+            return;
+        }
+
+        const markup = generateXdMarkup(data);
+
+        // Write to json airtable-cache file
+        fs.writeFile(cacheFilePath, JSON.stringify(data, null, 2), (error) => {
+            if (error) {
+                console.log('An error has occurred ', error);
+                return;
+            }
+            console.log('Data written successfully to disk');
+        }); 
+
+        // Write to json airtable-cache file
+        fs.writeFile(newsFilePath, markup[0], (error) => {
+            if (error) {
+                console.log('An error has occurred ', error);
+                return;
+            }
+            console.log('News markup written successfully to disk');
+        });
+
+        // Write to json airtable-cache file
+        fs.writeFile(biosFilePath, markup[1], (error) => {
+            if (error) {
+                console.log('An error has occurred ', error);
+                return;
+            }
+            console.log('Bios markup written successfully to disk');
+        });        
+    })

assets/css/_pages/_all.scss

@@ -2,4 +2,5 @@
 @import "apply";
 @import "home";
 @import "privacy";
-@import "projects";
+@import "projects";
+@import "bios";

assets/css/_pages/_bios.scss

@@ -0,0 +1,34 @@
+.page-bios {
+    .bios-content {
+        display: grid;
+        grid-template-columns: 100%;
+        width: 100%;
+        grid-gap: 12px;
+
+        @media only screen and(min-width: $tablet-size) {
+            grid-template-columns: 1fr 1fr;
+
+        }        
+
+        @media only screen and(min-width: $desktop-size) {
+            grid-template-columns: 1fr 1fr 1fr;
+
+        }
+
+        > div {
+            padding: 16px;
+            background: #f7f7f7;
+            display: flex;
+            flex-flow: column;
+
+            img {
+                max-height: 200px;
+                align-self: center;                
+            }
+
+            h3 {
+                margin-bottom: 0;
+            }
+        }        
+    }
+}