feat: clean up (a lot) (#247)

License: MIT
Signed-off-by: Henrique Dias <hacdias@gmail.com>

.gitignore

@@ -27,9 +27,7 @@ stroke*.svg
 public
 dist
 /src/resources
-/src/data
 /src/content
-/src/layouts/partials/indexes
 /src/static/fonts
 /src/static/app.css
 /src/static/app.js

Makefile

@@ -1,6 +0,0 @@
-build:
-	npm --version
-	node --version
-	npm install
-	npm run lint
-	npm run build

package.json

@@ -3,9 +3,9 @@
   "version": "1.0.0",
   "private": true,
   "dependencies": {
-    "ipfs-css": "^0.5.2",
-    "lunr": "^2.3.0",
-    "tachyons": "^4.10.0"
+    "ipfs-css": "^0.12.0",
+    "lunr": "^2.3.6",
+    "tachyons": "^4.11.1"
   },
   "scripts": {
     "start": "node ./scripts/dev.js",
@@ -18,24 +18,22 @@
     "build:css": "postcss --no-map --use postcss-import cssnano -o src/static/app.css src/css/*.css",
     "build:js": "browserify -g uglifyify src/js/app.js -o src/static/app.js",
     "build:data": "node ./scripts/make-data.js",
-    "build:hugo": "hugo -s src -d ../public --cleanDestinationDir",
-    "build:minify": "html-minifier --input-dir=./public --output-dir=./public --file-ext=html --collapse-whitespace --remove-comments"
+    "build:hugo": "hugo -s src -d ../public --cleanDestinationDir --minify --gc"
   },
   "devDependencies": {
-    "babel-eslint": "^8.2.6",
-    "browserify": "^16.2.2",
-    "chokidar": "^2.0.4",
-    "cssnano": "^4.0.1",
-    "ecstatic": "^3.2.1",
-    "fs-extra": "^6.0.1",
-    "html-minifier": "^3.5.19",
-    "hugo-bin": "^0.29.0",
-    "node-yaml": "^3.1.1",
-    "npm-run-all": "^4.1.3",
-    "postcss-cli": "^5.0.1",
-    "postcss-import": "^11.1.0",
+    "babel-eslint": "^10.0.1",
+    "browserify": "^16.2.3",
+    "chokidar": "^2.1.5",
+    "cssnano": "^4.1.10",
+    "ecstatic": "^4.1.2",
+    "fs-extra": "^7.0.1",
+    "hugo-bin": "^0.43.4",
+    "node-yaml": "^3.2.0",
+    "npm-run-all": "^4.1.5",
+    "postcss-cli": "^6.1.2",
+    "postcss-import": "^12.0.1",
     "shx": "^0.3.2",
-    "standard": "^11.0.1",
+    "standard": "^12.0.1",
     "uglifyify": "^5.0.1",
     "watch": "^1.0.2"
   },

scripts/data.js

@@ -1,23 +1,34 @@
 const fs = require('fs')
-const path = require('path')
+const { join } = require('path')
 const yaml = require('node-yaml')
-const { sortAbc } = require('./utils')
-const dataDir = path.join(__dirname, '../data')
+const { sortAbc, sortInv, slugify } = require('./utils')
 
+const dir = join(__dirname, '../data')
 const trimIfExists = (str) => str ? str.trim() : undefined
 
-const files = fs.readdirSync(dataDir)
-  .map(file => path.join(dataDir, file))
+module.exports = fs.readdirSync(dir)
+  .map(file => join(dir, file))
   .map(file => yaml.readSync(file))
   .map(file => {
-    file.content = file.content.map(({ title, description, ...file }) => ({
+    file.slug = slugify(file.title)
+    file.type = 'category'
+
+    file.content = file.content.map(({ title, description, ...meta }, i) => ({
+      ...meta,
       title: trimIfExists(title),
       description: trimIfExists(description),
-      ...file
+      category: file.slug,
+      color: file.color,
+      index: i
     }))
 
+    let sort = (a, b) => sortAbc(a.title, b.title)
+
+    if (file.slug === 'articles') {
+      sort = (a, b) => sortInv(a.date, b.date)
+    }
+
+    file.content = file.content.sort(sort)
     return file
   })
   .sort((a, b) => sortAbc(a.title, b.title))
-
-module.exports = files

scripts/make-data.js

@@ -1,126 +1,50 @@
 const lunr = require('lunr')
 const fs = require('fs-extra')
-const path = require('path')
-const { slugify, capitalize, sortAbc } = require('./utils')
+const { join } = require('path')
 
-const dataDir = path.join(__dirname, '../src/data')
-const contentDir = path.join(__dirname, '../src/content')
-const indexesDir = path.join(__dirname, '../src/layouts/partials/indexes')
+function getData () {
+  let data = require('./data')
 
-const processDataType = (data) => {
-  const content = data.content.map(info => {
-    const { website, ...more } = info
-
-    return {
-      website: website,
-      categories: [data.title.toLowerCase()],
-      ...more
-    }
+  data.push({
+    title: 'Awesome IPFS',
+    slug: '_index',
+    content: data
+      .reduce((arr, cat) => arr.concat(cat.content), [])
+      .map((el, i) => ({
+        ...el,
+        index: i
+      }))
   })
 
-  delete data.content
-
-  return {
-    info: { ...data },
-    content: content
-  }
+  data.forEach(makeIndex)
+  return data
 }
 
-const writeContentFile = (data) => {
-  const basename = slugify(data.title)
-  const filename = path.join(contentDir, `${basename}.md`)
-
-  fs.writeFileSync(filename, JSON.stringify(data))
-}
-
-const makeIndex = (data) => {
-  const indexes = { 'index': [] }
-
-  const checkField = (field, el) => {
-    if (Array.isArray(el[field])) {
-      el[field].forEach(t => {
-        const key = `${field}_${t}`
-
-        if (indexes[key]) {
-          indexes[key].push(el.index)
-        } else {
-          indexes[key] = [el.index]
-        }
-      })
-    }
-  }
-
-  data.forEach(el => {
-    indexes.index.push(el.index)
-    checkField('tags', el)
-    checkField('categories', el)
-  })
-
-  data = data.map(({index, title, description = '', tags = [], categories = []}) => ({
+function makeIndex (category) {
+  const data = category.content.map(({ index, title, description = '', tags = [], category = '' }) => ({
     ref: index,
-    data: `${title} ${description} ${tags.join(' ')} ${categories.join(' ')}`
+    data: `${title} ${description} ${tags.join(' ')} ${category}`
   }))
 
-  for (const index in indexes) {
-    const idx = lunr(function () {
-      this.ref('ref')
-      this.field('data')
-
-      indexes[index].map(i => data[i]).forEach(this.add.bind(this))
-    })
-
-    const file = path.join(indexesDir, index + '.html')
-    const json = JSON.stringify(idx).replace(`'`, `\\'`)
-
-    fs.writeFileSync(file, `<script>var idx = JSON.parse(\`${json}\`);</script>`)
-  }
+  category.index = lunr(function () {
+    this.ref('ref')
+    this.field('data')
+    data.forEach(this.add.bind(this))
+  })
 }
 
 const process = () => {
-  fs.ensureDirSync(dataDir)
-  fs.ensureDirSync(contentDir)
-  fs.ensureDirSync(indexesDir)
-  fs.emptyDirSync(dataDir)
-  fs.emptyDirSync(contentDir)
-  fs.emptyDirSync(indexesDir)
+  const dir = join(__dirname, '../src/content')
+  fs.ensureDirSync(dir)
+  fs.emptyDirSync(dir)
 
-  let data = []
-  let types = []
-  let typesObj = {}
+  const data = getData()
 
-  require('./data')
-    .map(processDataType)
-    .forEach(({info, content}) => {
-      types.push(info)
-      data.push(content)
-    })
-
-  data = data.reduce((a, v) => a.concat(v), [])
-    .sort((a, b) => sortAbc(a.title, b.title))
-    .map((v, i) => { v.index = i; return v })
-
-  data.forEach(writeContentFile)
-  makeIndex(data)
-
-  types = types.map(t => {
-    t.title = capitalize(t.title)
-    return t
-  }).sort((a, b) => {
-    if (a.weight < b.weight) {
-      return -1
-    }
-
-    if (a.weight > b.weight) {
-      return 1
-    }
-
-    return 0
-  }).forEach(type => {
-    typesObj[type.title.toLowerCase()] = type
-  })
-
-  const pt = path.join(dataDir, 'categories.json')
-  fs.writeFileSync(pt, JSON.stringify(typesObj))
+  for (const { index, slug, ...meta } of data) {
+    const filename = join(dir, slug + '.md')
+    fs.writeFileSync(filename, `${JSON.stringify(meta)}
+<script>var idx = JSON.parse(\`${JSON.stringify(index).replace(`'`, `\\'`)}\`);</script>`)
+  }
 }
 
 process()

scripts/make-readme.js

@@ -3,18 +3,12 @@ const path = require('path')
 const files = require('./data')
 const readme = path.join(__dirname, '../README.md')
 const template = path.join(__dirname, 'readme-template.md')
-const { slugify, sortInv, sortAbc } = require('./utils')
+const { slugify } = require('./utils')
 
 const toc = files.map(cat => `- [${cat.title}](#${slugify(cat.title)})`).join('\n')
 
 const sections = files.map(category => {
-  let sort = (a, b) => sortAbc(a.title, b.title)
-
-  if (category.title === 'Articles') {
-    sort = (a, b) => sortInv(a.date, b.date)
-  }
-
-  const content = category.content.sort(sort).map(item => {
+  const content = category.content.map(item => {
     let block = '- '
     let mainUrl = ''
 

scripts/utils.js

@@ -20,12 +20,9 @@ const slugify = (text) => text.toString()
   .replace(/^-+/, '')
   .replace(/-+$/, '')
 
-const capitalize = (text) => `${text.charAt(0).toUpperCase()}${text.slice(1).toLowerCase()}`
-
 module.exports = {
   sort,
   sortInv,
   sortAbc,
-  slugify,
-  capitalize
+  slugify
 }

src/layouts/_default/baseof.html

@@ -11,15 +11,12 @@
         <img alt="IPFS" src="{{ .Site.BaseURL }}/images/logo.png" class="w3 h3 mr3">
         <h1 class="f3 white">Awesome IPFS</h1>
       </a>
-  
-      {{ $site := .Site }}
-      {{ range $name, $taxonomy := .Site.Taxonomies.categories }}
-      {{ $color := (index $site.Data.categories $name).color }}
-      {{ $icon := print (index $site.Data.categories $name).icon ".svg" }}
-      <a href="/categories/{{ $name | urlize }}"
-        class="flex-grow-1 flex items-center justify-center white no-underline pa2 bg-animate dib bg-{{ $color }}-muted hover-bg-{{ $color }}">
-        <span class="w2 h2 fill-white mr2">{{ partial (print "icons/" $icon ) }}</span>
-        {{ $name }}
+
+      {{ range (where .Site.Pages "Type" "category") }}
+      <a href="{{ .RelPermalink }}"
+        class="flex-grow-1 flex items-center justify-center white no-underline pa2 bg-animate dib bg-{{ .Params.color }}-muted hover-bg-{{ .Params.color }}">
+        <span class="w2 h2 fill-white mr2">{{ partial (print "icons/" .Params.icon ".svg" ) }}</span>
+        {{ .Title }}
       </a>
       {{ end }}
     </nav>

src/layouts/_default/list.html

@@ -1,9 +0,0 @@
-{{ define "main" }}
-
-{{- $p1 := (print .Data.Plural "_") -}}
-{{- $p2 := lower .Title -}}
-{{- $partial := print $p1 $p2 -}}
-{{- partial "list" .Data.Pages -}}
-{{- partial (print "indexes/" $partial) -}}
-
-{{ end }}

src/layouts/_default/single.html

@@ -0,0 +1,3 @@
+{{ define "main" }} 
+{{ partial "list" . }}
+{{ end }}

src/layouts/index.html

@@ -1,7 +1,3 @@
-{{ define "main" }}
-
-{{ partial "list" .Pages }}
-{{ partial "indexes/index" }}
-
+{{ define "main" }} 
+{{ partial "list" . }}
 {{ end }}
-

src/layouts/partials/list.html

@@ -12,74 +12,75 @@
 </div>
 
 <main class="CardContainer mv4 flex flex-wrap justify-between" >
-  {{ range (sort . "Params.index") -}}
-    <article data-ref="{{ .Params.index }}" class="Card flex flex-column bg-white shadow-4 grow2 br1 dark-gray b--black-10 flex-grow-1 ma2">
-      {{ $cat := index .Params.categories 0 }}
-      {{ $color := (index .Site.Data.categories $cat).color }}
-      <div class="bg-navy ttu fw6 tracked montserrat bg-{{ $color }}-muted br1 br--top white pv1 ph2 ph3-ns f7 b w-100">
-        {{ humanize $cat }}
+  {{ range (sort .Params.content "index") -}}
+  <article data-ref="{{ .index }}" class="Card flex flex-column bg-white shadow-4 grow2 br1 dark-gray b--black-10 flex-grow-1 ma2">
+    <div class="bg-navy ttu fw6 tracked montserrat bg-{{ .color }}-muted br1 br--top white pv1 ph2 ph3-ns f7 b w-100">
+      {{ humanize .category }}
+    </div>
+
+    <div class="pa2 ph3-ns pb3-ns flex flex-column flex-grow-1">
+      <div class="dt w-100 mt1">
+        <div class="dtc">
+          <a target="_blank" class="no-underline charcoal" href="{{ if .website }}{{ .website }}{{ else if .source }}{{ .source }}{{ else if .demo }}{{ .demo }}{{ end }}">
+            <h1 class="f5 mw5 f4-ns mv0">{{- .title -}}</h1>
+          </a>
+        </div>
       </div>
 
-      <div class="pa2 ph3-ns pb3-ns flex flex-column flex-grow-1">
-        <div class="dt w-100 mt1">
-          <div class="dtc">
-            <a target="_blank" class="no-underline charcoal" href="{{ if .Params.website }}{{ .Params.website }}{{ else if .Params.source }}{{ .Params.source }}{{ else if .Params.demo }}{{ .Params.demo }}{{ end }}">
-              <h1 class="f5 mw5 f4-ns mv0">{{- .Title -}}</h1>
-            </a>
-          </div>
-        </div>
+      {{- if isset . "date" -}}
+        {{ template  "text" dateFormat "January 2, 2006" .date }}
+      {{- end -}}
 
-        {{- if isset .Params "date" -}}
-          {{ template  "text" .Date.Format "January 2, 2006" }}
-        {{- end -}}
+      {{- if isset . "description" -}}
+        {{ template  "text" .description }}
+      {{- end -}}
 
-        {{- if isset .Params "description" -}}
-          {{ template  "text" .Params.description }}
-        {{- end -}}
+      {{- if isset . "size" -}}
+        {{ template  "text" (print "Size: " .size) }}
+      {{- end -}}
 
-        {{- if isset .Params "size" -}}
-          {{ template  "text" (print "Size: " .Params.size) }}
-        {{- end -}}
-
-        {{- if isset .Params "hash" -}}
-          <div class="mt2 mw5">
-            <a href="https://ipfs.io{{ .Params.hash }}" target="_blank" alt="Website" title="Website" class="aqua hover-teal">
-              <abbr title="{{ .Params.hash }}">
-                {{ $length := sub (len .Params.hash) 5 }}
-                <code>{{ substr .Params.hash 0 10 }}...{{ substr .Params.hash $length 5 }}</code>
-              </abbr>
-            </a>
-          </div>
-        {{- end -}}
-
-        {{- if isset .Params "picture" -}}
+      {{- if isset . "hash" -}}
         <div class="mt2 mw5">
-          <a target="_blank" class="no-underline charcoal" href="{{ if .Params.website }}{{ .Params.website }}{{ else if .Params.source }}{{ .Params.source }}{{ else if .Params.demo }}{{ .Params.demo }}{{ end }}">
-            <img class="br2" src="{{ .Site.BaseURL }}{{ .Params.picture }}" >
+          <a href="https://ipfs.io{{ .hash }}" target="_blank" alt="Website" title="Website" class="aqua hover-teal">
+            <abbr title="{{ .hash }}">
+              {{ $length := sub (len .hash) 5 }}
+              <code>{{ substr .hash 0 10 }}...{{ substr .hash $length 5 }}</code>
+            </abbr>
           </a>
         </div>
-        {{ end }}
+      {{- end -}}
 
-        <div class="flex pt2 mt-auto align-center justify-begin">
-          {{- if isset .Params "website" -}}
-          <a href="{{ .Params.website }}" target="_blank" alt="Website" title="Website">
-            {{ partial "icons/globe.svg" }}
-          </a>
-          {{- end -}}
-
-          {{- if isset .Params "source" -}}
-          <a href="{{ .Params.source }}" target="_blank" alt="Source Code" title="Source Code">
-            {{ partial "icons/code.svg" }}
-          </a>
-          {{- end -}}
-
-          {{- if isset .Params "demo" -}}
-          <a href="{{ .Params.demo }}" target="_blank" alt="Demo" title="Demo">
-            {{ partial "icons/flask.svg" }}
-          </a>
-          {{- end -}}
-        </div>
+      {{- if isset . "picture" -}}
+      <div class="mt2 mw5">
+        <a target="_blank" class="no-underline charcoal" href="{{ if .website }}{{ .website }}{{ else if .source }}{{ .source }}{{ else if .demo }}{{ .demo }}{{ end }}">
+          <img class="br2" src="{{ .picture | relURL }}" >
+        </a>
       </div>
-    </article>
+      {{ end }}
+
+      <div class="flex pt2 mt-auto align-center justify-begin">
+        {{- if isset . "website" -}}
+        <a href="{{ .website }}" target="_blank" alt="Website" title="Website">
+          {{ partial "icons/globe.svg" }}
+        </a>
+        {{- end -}}
+
+        {{- if isset . "source" -}}
+        <a href="{{ .source }}" target="_blank" alt="Source Code" title="Source Code">
+          {{ partial "icons/code.svg" }}
+        </a>
+        {{- end -}}
+
+        {{- if isset .  "demo" -}}
+        <a href="{{ .demo }}" target="_blank" alt="Demo" title="Demo">
+          {{ partial "icons/flask.svg" }}
+        </a>
+        {{- end -}}
+      </div>
+      
+    </div>
+  </article>
   {{ end }}
 </main>
+
+{{ .Content }}