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

New UI and template engine

.github/workflows/publish.yml

@@ -54,5 +54,5 @@ jobs:
         uses: 8398a7/action-slack@v3
         with:
           status: ${{ job.status }}
-          author_name: matters-html-formatter
+          author_name: ipns-site-generator
           fields: repo,message,commit,author,action,eventName,ref,workflow,job,took

.github/workflows/release.yml

@@ -43,5 +43,5 @@ jobs:
         uses: 8398a7/action-slack@v3
         with:
           status: ${{ job.status }}
-          author_name: matters-html-formatter
+          author_name: matters-ipns-site-generator
           fields: repo,message,commit,author,action,eventName,ref,workflow,job,took

.gitignore

@@ -12,3 +12,4 @@ npm-install.log
 coverage/
 .husky/
 tags
+demo

README.md

@@ -1,93 +1,55 @@
-# Matters HTML Formatter
+# Matters IPNS Site Generator
 
-Utility functions to format HTML string. Can be used to create encrypted HTML page with decryption code embedded, generate HTML bundle, and create content metadata. Used at matters.news before adding content to IPFS.
+Matters IPNS Site Generator is currently used by matters.news, to genereate HTML files of article & user homepage before adding to IPFS & IPNS.
+
+It can be used to create encrypted HTML page with decryption code embedded, generate HTML bundle, and create content metadata.
 
 ## Installation
 
 ### NPM
 
 ```sh
-npm install --save @matters/matters-html-formatter
+npm install --save @matters/ipns-site-generator
 ```
 
 ## Usage
 
-### Create an encrypted HTML
-
-Pass in a HTML string as content, and return a HTML string with the content encrypted and the encrytion key. The returned HTML can be then written to a file or add to IPFS. During rendering, the HTML will be decrypted by adding `key=${encrytion-key}` in query parameter, and also include a simple UI to prompt key enter.
-
-Support payment pointer for Web Monetization. See [test](./src/__tests__/formatHTML.test.ts) for more detail.
-
-```js
-import { makeHtmlBundle } from "@matters/matters-html-formatter"
-
-const { bundle, key } = await makeHtmlBundle({
-  title: "test article",
-  author: {
-    name: "test-user",
-    link: {
-      url: "https://matters.news/@test-user",
-      text: "Test User",
-    },
-  },
-  content: `<p>test article</p>`,
-  paymentPointer: "$pay-me", // used for Web Monetization
-  encrypt: true, // argument for whether encrypt or not, if false returned key will be null
-})
-```
-
-### Create HTML bundle and metadata for uploading to IPFS
-
-`makeHtmlBundle` returns an array of object that contains path and buffer data that can be added with IPFS API directly. See [test](./src/__tests__/makeHtmlBundle.test.ts) for more detail.
+### Create HTML bundle for uploading to IPFS
 
-`makeMetaData` returns content metadata object used at Matters. See [test](./src/__tests__/makeMetaData.test.ts) for more detail.
+`makeArticlePage` returns an array of object that contains path and buffer data that can be added with IPFS API directly. See [test](./src/__tests__/makeArticlePage.test.ts) for more detail.
 
 ```js
-import { makeHtmlBundle, makeMetaData } from "@matters/matters-html-formatter"
+import { makeArticlePage } from '@matters/ipns-site-generator'
 
 const article = {
-  title: "test article",
-  author: {
-    name: "test-user",
-    link: {
-      url: "https://matters.news/@test-user",
-      text: "Test User",
-    },
-  },
-  content: `<p>test article</p>`,
+  meta: { ... },
+  byline: { ... },
+  rss: { ... },
+  article: { ... },
 }
 
 // this creates an array of object containing path and buffer data,
 // which IPFS recognizes as a folder
-const { bundle } = await makeHtmlBundle(article)
-
-// this is the hash that will render out html content on IPFS gateways,
-// or use ipfs-only-hash if you only want to get the hash
-const contentHash = ipfs.add(htmlBundle, { pin: true })
-
-// additional information for article, including previously generated contentHash
-const articleInfo = {
-  contentHash,
-  author: {
-    name: "test-user",
-    url: "user-home-page",
-    description: "this is a test user",
-  },
-  description: "This is a piece of test content",
-  image: "image-url",
-}
+const { bundle } = await makeArticlePage(article)
+```
 
-// this create the standard format of meta data,
-// should be merged with ISCN standard in the future
-const metaData = makeMetaData(articleInfo)
+### Create an encrypted HTML
 
-const cid = await ipfs.dag.put(metaData, {
-  format: "dag-cbor",
-  pin: true,
-  hashAlg: "sha2-256",
+Pass in a HTML string as content, and return a HTML string with the content encrypted and the encrytion key. The returned HTML can be then written to a file or add to IPFS. During rendering, the HTML will be decrypted by adding `key=${encrytion-key}` in query parameter, and also include a simple UI to prompt key enter.
+
+Support payment pointer for Web Monetization. See [test](./src/__tests__/makeArticlePage.test.ts) for more detail.
+
+```js
+import { makeArticlePage } from '@matters/ipns-site-generator'
+
+const { bundle, key } = await makeArticlePage({
+  encrypted: true, // argument for whether encrypt or not, if false returned key will be null
+  paymentPointer: '$pay-me', // used for Web Monetization
+  meta: { ... },
+  byline: { ... },
+  rss: { ... },
+  article: { ... },
 })
-// this is the final media hash used in the end of article url at matters.news
-const mediaHash = cid.toV1().toString()	// cid.toBaseEncodedString()
 ```
 
 ## Unit test

bin/build-demo.ts

@@ -0,0 +1,34 @@
+import path from 'path'
+import fs from 'fs'
+
+import nunjucks from 'nunjucks'
+
+import { makeArticlePage, makeHomepage } from '../src'
+import { MOCK_ARTICLE_PAGE, MOCK_HOMEPAGE } from '../src/render/mock'
+
+const paths = {
+  out: path.resolve(__dirname, '../demo'),
+}
+
+// homepage
+fs.promises.mkdir(paths.out, { recursive: true }).catch(console.error)
+fs.writeFileSync(
+  path.resolve(paths.out, 'homepage.html'),
+  makeHomepage(MOCK_HOMEPAGE)
+)
+
+// article page
+makeArticlePage(MOCK_ARTICLE_PAGE).then((data) => {
+  const content = data.bundle[0]?.content.toString() || ''
+
+  fs.promises.mkdir(paths.out, { recursive: true }).catch(console.error)
+  fs.writeFileSync(path.resolve(paths.out, 'article.html'), content)
+})
+
+// encrypted article page
+makeArticlePage({ ...MOCK_ARTICLE_PAGE, encrypted: true }).then((data) => {
+  const content = data.bundle[0]?.content.toString() || ''
+  console.log('key: ', data.key)
+  fs.promises.mkdir(paths.out, { recursive: true }).catch(console.error)
+  fs.writeFileSync(path.resolve(paths.out, 'article-encrypted.html'), content)
+})