Merge pull request #129 from thematters/feat/new-ui

feat: support build xml and json feed

bin/build-demo.ts

@@ -9,11 +9,11 @@ const paths = {
 }
 
 // homepage
+const { html, xml, json } = makeHomepage(MOCK_HOMEPAGE)
 fs.promises.mkdir(paths.out, { recursive: true }).catch(console.error)
-fs.writeFileSync(
-  path.resolve(paths.out, 'homepage.html'),
-  makeHomepage(MOCK_HOMEPAGE)
-)
+fs.writeFileSync(path.resolve(paths.out, 'homepage.html'), html)
+fs.writeFileSync(path.resolve(paths.out, 'rss.xml'), xml)
+fs.writeFileSync(path.resolve(paths.out, 'feed.json'), json)
 
 // article page
 makeArticlePage(MOCK_ARTICLE_PAGE).then((data) => {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@matters/ipns-site-generator",
-  "version": "0.1.0-alpha.10",
+  "version": "0.1.0-alpha.11",
   "description": "IPNS site generator for matters.news",
   "author": "https://github.com/thematters",
   "homepage": "https://github.com/matters-ipns-site-generator",

src/__tests__/makeHomepage.test.ts

@@ -6,12 +6,14 @@ jest.mock('isomorphic-fetch')
 const mockedFetch = fetch as jest.Mock
 
 describe('makeHomepage', () => {
-  test('can generate basic HTML bundle', async () => {
+  test('can generate HTML, XML and JSON of homepage', async () => {
     mockedFetch.mockResolvedValue({
       arrayBuffer: () => Promise.resolve(new ArrayBuffer(1)),
     })
 
-    const html = await makeHomepage(MOCK_HOMEPAGE)
+    const { html, xml, json } = await makeHomepage(MOCK_HOMEPAGE)
     expect(html).toMatchSnapshot()
+    expect(xml).toMatchSnapshot()
+    expect(json).toMatchSnapshot()
   })
 })

src/makeHomepage/index.ts

@@ -1,16 +1,45 @@
-import { uniqBy } from 'lodash'
-
 import { HomepageContext } from '../types'
-import { renderArticlePage, renderHomepage } from '../render'
-import { encrypt } from '../utils'
+import { renderHomepage } from '../render'
+import { stripSpaces } from '../render/utils'
 
 export type MakeHomepageData = HomepageContext
 
 /**
  * Make Homepage HTML from articles data
  */
-export const makeHomepage = (data: MakeHomepageData) => {
-  const html = renderHomepage(data)
+const makeHomepageJSONFeed = (data: MakeHomepageData) => {
+  const feed = {
+    version: 'https://jsonfeed.org/version/1.1',
+    title: data.meta.title,
+    icon: data.meta.image,
+    home_page_url: data.byline.author.uri,
+    // feed_url,
+    description: data.meta.description,
+    authors: [
+      {
+        name: data.byline.author.name,
+        url: data.byline.author.uri,
+        avatar: data.meta.image,
+      },
+    ],
+    items: data.articles.map((article) => ({
+      id: article.id,
+      title: article.title,
+      image: article.image,
+      content_html: article.content,
+      summary: stripSpaces(article.summary),
+      date_published: new Date(article.date).toISOString(),
+      tags: article.tags,
+      url: article.uri,
+      external_url: article.sourceUri,
+    })),
+  }
 
-  return html
+  return JSON.stringify(feed, null, 2)
+}
+
+export const makeHomepage = (data: MakeHomepageData) => {
+  const { html, xml } = renderHomepage(data)
+  const json = makeHomepageJSONFeed(data)
+  return { html, xml, json }
 }

src/render/index.ts

@@ -2,12 +2,13 @@ import path from 'path'
 import nunjucks from 'nunjucks'
 import { ArticlePageContext, HomepageContext } from '../types'
 
-import { shortDate, stripSpaces } from './utils'
+import { shortDate, stripSpaces, toRFC822Date } from './utils'
 
 // configure nunjucks
 nunjucks
   .configure(path.resolve(__dirname, 'views'))
   .addFilter('shortDate', shortDate)
+  .addFilter('toRFC822Date', toRFC822Date)
   .addFilter('stripSpaces', stripSpaces)
 
 // render templates
@@ -16,5 +17,8 @@ export const renderArticlePage = (context: ArticlePageContext) => {
 }
 
 export const renderHomepage = (context: HomepageContext) => {
-  return nunjucks.render('homepage/index.njk', context)
+  return {
+    html: nunjucks.render('homepage/index.njk', context),
+    xml: nunjucks.render('homepage/rss.xml.njk', context),
+  }
 }

src/render/mock.ts

@@ -12,6 +12,7 @@ const MOCK_ARTICLE = {
     'Aliquip reprehenderit elit nulla commodo sit. Aute deserunt quis cupidatat ea quis. Adipisicing magna tempor esse ea anim. Veniam aliquip laborum aliquip est laborum irure duis irure adipisicing dolore laboris in irure. Non sunt esse cillum consequat. Cupidatat qui ex fugiat ullamco cupidatat eu eu eu labore excepteur. Tempor tempor mollit nulla qui Lorem aute consectetur sint sint. Nostrud cupidatat ullamco ea elit in voluptate do mollit veniam.',
   date: '2022-11-18T08:42:04.146Z',
   uri: './Qmc919SaZGj1yeDCLHx7KMY7WMzy1PF6UjixuapcG1bfAB',
+  sourceUri: `https://matters.news/@${MOCK_AUTHOR.userName}/1-slug-Qmc919SaZGj1yeDCLHx7KMY7WMzy1PF6UjixuapcG1bfAB`,
   content: `
   <figure class="image">
     <img src="https://assets.matters.news/processed/1080w/profileCover/aa57a1ce-8926-4512-81d8-462f68fa3917.webp" data-asset-id="aa57a1ce-8926-4512-81d8-462f68fa3917">
@@ -95,13 +96,14 @@ export const MOCK_HOMEPAGE: HomepageContext = {
     json: './feed.json',
   },
   articles: [
-    MOCK_ARTICLE,
-    MOCK_ARTICLE,
-    MOCK_ARTICLE,
-    MOCK_ARTICLE,
-    MOCK_ARTICLE,
-    MOCK_ARTICLE,
-    MOCK_ARTICLE,
+    { ...MOCK_ARTICLE, id: '1' },
+    { ...MOCK_ARTICLE, id: '2' },
+    { ...MOCK_ARTICLE, id: '3' },
+    { ...MOCK_ARTICLE, id: '4' },
+    { ...MOCK_ARTICLE, id: '5' },
+    { ...MOCK_ARTICLE, id: '6' },
+    { ...MOCK_ARTICLE, id: '7' },
+    { ...MOCK_ARTICLE, id: '8' },
   ],
 }
 
@@ -130,7 +132,7 @@ export const MOCK_ARTICLE_PAGE: ArticlePageContext = {
     xml: '../rss.xml',
     json: '../feed.json',
   },
-  article: MOCK_ARTICLE,
+  article: { ...MOCK_ARTICLE, id: '1' },
 }
 
 export const MOCK_META_DATA = {

src/render/utils.ts

@@ -6,6 +6,35 @@ export function addLeadingZero(num: number, len: number = 2) {
   return `00${num}`.slice(-len)
 }
 
+export function toRFC822Date(date: string) {
+  const d = new Date(date)
+  const dayStrings = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+  const monthStrings = [
+    'Jan',
+    'Feb',
+    'Mar',
+    'Apr',
+    'May',
+    'Jun',
+    'Jul',
+    'Aug',
+    'Sep',
+    'Oct',
+    'Nov',
+    'Dec',
+  ]
+
+  const day = dayStrings[d.getUTCDay()]
+  const dayNumber = addLeadingZero(d.getUTCDate())
+  const month = monthStrings[d.getUTCMonth()]
+  const year = d.getUTCFullYear()
+  const time = `${addLeadingZero(d.getUTCHours())}:${addLeadingZero(
+    d.getUTCMinutes()
+  )}:00`
+
+  return `${day}, ${dayNumber} ${month} ${year} ${time} GMT`
+}
+
 export function shortDate(date: string) {
   const d = new Date(date)
   const dayNumber = d.getDate()

src/render/views/homepage/rss.xml.njk

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<rss version="2.0"
+  xmlns:dc="http://purl.org/dc/elements/1.1/"
+  xmlns:content="http://purl.org/rss/1.0/modules/content/"
+  xmlns:atom="http://www.w3.org/2005/Atom"
+  xmlns:media="http://search.yahoo.com/mrss/">
+
+  <channel>
+    <title><![CDATA[{{ meta.title | escape }}]]></title>
+    <link>{{ byline.author.uri }}</link>
+    <description><![CDATA[{{ meta.description | escape }}]]></description>
+
+    {% if meta.image %}
+    <image>
+      <url>{{ meta.image }}</url>
+      <title><![CDATA[{{ meta.title | escape }}]]></title>
+      <link>{{ byline.author.uri }}</link>
+    </image>
+    {% endif %}
+
+    {% for article in articles %}
+      <item>
+        <title><![CDATA[{{ article.title | escape }}]]></title>
+        <guid>{{ article.sourceUri }}</guid>
+        <link>{{ article.sourceUri }}</link>
+        <pubDate>{{ article.date | toRFC822Date }}</pubDate>
+        <description><![CDATA[{{ article.summary | stripSpaces | escape }}]]></description>
+      </item>
+    {% endfor %}
+  </channel>
+
+</rss>

src/types.ts

@@ -3,20 +3,20 @@ type Author = {
   displayName: string
 }
 
-type ArticleDigest = {
+type Article = {
+  id: string
   author: Author
   title: string
   summary: string
   date: string
-}
-
-type Article = ArticleDigest & {
+  image?: string
   content: string
   tags: string[]
 }
 
-type HomepageArticleDigest = ArticleDigest & {
+type HomepageArticleDigest = Article & {
   uri: string
+  sourceUri: string
 }
 
 type PageMeta = {