├── assets
    └── .gitignore
├── static
    ├── .gitignore
    ├── favicon.ico
    └── README.md
├── layouts
    ├── reveal.vue
    └── default.vue
├── jsconfig.json
├── .editorconfig
├── .eslintrc.js
├── plugins
    └── README.md
├── middleware
    └── README.md
├── store
    └── README.md
├── README.md
├── pages
    ├── posts
    │   ├── _slug.vue
    │   └── _y
    │   │   └── _mo
    │   │       └── _slug.vue
    ├── index.vue
    ├── _pageNumber.vue
    └── reveal
    │   └── _path.vue
├── express
    └── routes
    │   └── index.js
├── package.json
├── .gitignore
├── components
    ├── PostQuery.vue
    ├── PostTeaser.vue
    ├── Pagination.vue
    └── PostFull.vue
├── nuxt.config.js
└── prebuild
    └── index.js


/assets/.gitignore:
--------------------------------------------------------------------------------
1 | /data/


--------------------------------------------------------------------------------
/static/.gitignore:
--------------------------------------------------------------------------------
1 | /data/
2 | /media/


--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/patarapolw/blog-reveal.nuxt/master/static/favicon.ico


--------------------------------------------------------------------------------
/layouts/reveal.vue:
--------------------------------------------------------------------------------
1 | <template lang="pug">
2 | div(style="width: 100vw; height: 100vh;")
3 |   #global(style="display: none")
4 |   .reveal
5 |     .slides
6 |   nuxt
7 | </template>
8 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "baseUrl": ".",
 4 |     "paths": {
 5 |       "~/*": ["./*"],
 6 |       "@/*": ["./*"],
 7 |       "~~/*": ["./*"],
 8 |       "@@/*": ["./*"]
 9 |     }
10 |   },
11 |   "exclude": ["node_modules", ".nuxt", "dist"]
12 | }
13 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | 
12 | [*.md]
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     browser: true,
 5 |     node: true
 6 |   },
 7 |   parserOptions: {
 8 |     parser: 'babel-eslint'
 9 |   },
10 |   extends: [
11 |     '@nuxtjs',
12 |     'plugin:nuxt/recommended'
13 |   ],
14 |   // add your custom rules here
15 |   rules: {
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/plugins/README.md:
--------------------------------------------------------------------------------
1 | # PLUGINS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains Javascript plugins that you want to run before mounting the root Vue.js application.
6 | 
7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins).
8 | 


--------------------------------------------------------------------------------
/middleware/README.md:
--------------------------------------------------------------------------------
1 | # MIDDLEWARE
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains your application middleware.
6 | Middleware let you define custom functions that can be run before rendering either a page or a group of pages.
7 | 
8 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware).
9 | 


--------------------------------------------------------------------------------
/store/README.md:
--------------------------------------------------------------------------------
 1 | # STORE
 2 | 
 3 | **This directory is not required, you can delete it if you don't want to use it.**
 4 | 
 5 | This directory contains your Vuex Store files.
 6 | Vuex Store option is implemented in the Nuxt.js framework.
 7 | 
 8 | Creating a file in this directory automatically activates the option in the framework.
 9 | 
10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store).
11 | 


--------------------------------------------------------------------------------
/static/README.md:
--------------------------------------------------------------------------------
 1 | # STATIC
 2 | 
 3 | **This directory is not required, you can delete it if you don't want to use it.**
 4 | 
 5 | This directory contains your static files.
 6 | Each file inside this directory is mapped to `/`.
 7 | Thus you'd want to delete this README.md before deploying to production.
 8 | 
 9 | Example: `/static/robots.txt` is mapped as `/robots.txt`.
10 | 
11 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static).
12 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # blog-reveal.nuxt
 2 | 
 3 | > Blog-reveal creator, powered by Nuxt
 4 | 
 5 | ## Usage
 6 | 
 7 | Create `.env` with
 8 | 
 9 | ```env
10 | ROOT=<ABSOLUTE_PATH_TO_DIRECTORY_WITH_DATA_FOLDER>
11 | ```
12 | 
13 | ## Build Setup
14 | 
15 | ``` bash
16 | # install dependencies
17 | yarn install
18 | 
19 | # serve with hot reload at localhost:3000
20 | yarn dev
21 | 
22 | # build for production and launch server
23 | yarn build
24 | yarn start
25 | 
26 | # generate static project
27 | yarn generate
28 | ```
29 | 
30 | For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).
31 | 


--------------------------------------------------------------------------------
/pages/posts/_slug.vue:
--------------------------------------------------------------------------------
 1 | <template lang="pug">
 2 | post-full(:p="post")
 3 | </template>
 4 | 
 5 | <script>
 6 | import PostFull from '@/components/PostFull'
 7 | 
 8 | export default {
 9 |   components: {
10 |     PostFull
11 |   },
12 |   async asyncData ({ $axios, $payloadURL, route }) {
13 |     if (process.static && process.client && $payloadURL) { return $axios.$get($payloadURL(route)) }
14 | 
15 |     const { slug } = route.params
16 | 
17 |     const rPosts = await $axios.post(`/data/search.json`, {
18 |       q: { slug },
19 |       sort: { epoch: -1 },
20 |       limit: 1
21 |     })
22 | 
23 |     return {
24 |       post: rPosts.data[0]
25 |     }
26 |   }
27 | }
28 | </script>
29 | 


--------------------------------------------------------------------------------
/pages/posts/_y/_mo/_slug.vue:
--------------------------------------------------------------------------------
 1 | <template lang="pug">
 2 | post-full(:p="post")
 3 | </template>
 4 | 
 5 | <script>
 6 | import PostFull from '@/components/PostFull'
 7 | 
 8 | export default {
 9 |   components: {
10 |     PostFull
11 |   },
12 |   async asyncData ({ $axios, $payloadURL, route }) {
13 |     if (process.static && process.client && $payloadURL) { return $axios.$get($payloadURL(route)) }
14 | 
15 |     const { y, mo, slug } = route.params
16 | 
17 |     const rPosts = await $axios.post(`/data/search.json`, {
18 |       q: { y, mo, slug },
19 |       sort: { epoch: -1 },
20 |       limit: 1
21 |     })
22 | 
23 |     return {
24 |       post: rPosts.data[0]
25 |     }
26 |   }
27 | }
28 | </script>
29 | 


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template lang="pug">
 2 | div
 3 |   b-navbar.is-light(fixed-top)
 4 |     template(slot="brand")
 5 |       b-navbar-item(tag="nuxt-link" to="/") {{config.title}}
 6 |     template(slot="end")
 7 |       form.control(style="margin: 10px; margin-right: 2em" @submit.prevent="doSearch(q)")
 8 |         input.input.is-pulled-right.is-rounded(type="search" placeholder="Type and Enter to Search" style="width: 300px"
 9 |           v-model="q")
10 |   .columns
11 |     .column.is-three-fifths-desktop.is-offset-one-fifth-desktop
12 |       nuxt
13 | </template>
14 | 
15 | <script>
16 | export default {
17 |   data () {
18 |     return {
19 |       q: ''
20 |     }
21 |   },
22 |   computed: {
23 |     config () {
24 |       return JSON.parse(process.env.config)
25 |     }
26 |   }
27 | }
28 | </script>
29 | 


--------------------------------------------------------------------------------
/express/routes/index.js:
--------------------------------------------------------------------------------
 1 | import { Router } from 'express'
 2 | import bodyParser from 'body-parser'
 3 | 
 4 | import { config, loadDb } from '../../prebuild'
 5 | 
 6 | const app = Router()
 7 | const db = loadDb()
 8 | 
 9 | app.use(bodyParser.json())
10 | 
11 | app.get('/data/config.json', (req, res) => {
12 |   res.send(config)
13 | })
14 | 
15 | app.post('/data/search.json', async (req, res, next) => {
16 |   try {
17 |     const { q, proj, sort, skip, limit } = req.body
18 |     let c = db.find(
19 |       q,
20 |       proj
21 |     )
22 |     if (sort) {
23 |       c = c.sort(sort)
24 |     }
25 |     if (skip) {
26 |       c = c.skip(skip)
27 |     }
28 |     if (limit) {
29 |       c = c.limit(limit)
30 |     }
31 | 
32 |     res.json(await c)
33 |   } catch (e) {
34 |     next(e)
35 |   }
36 | })
37 | 
38 | module.exports = app
39 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template lang="pug">
 2 | post-query(:posts="posts" :count="count")
 3 | </template>
 4 | 
 5 | <script>
 6 | import PostQuery from '@/components/PostQuery'
 7 | 
 8 | export default {
 9 |   components: {
10 |     PostQuery
11 |   },
12 |   async asyncData ({ $axios, $payloadURL, route }) {
13 |     if (process.static && process.client && $payloadURL) { return $axios.$get($payloadURL(route)) }
14 | 
15 |     const rPosts = await $axios.post(`/data/search.json`, {
16 |       q: { epoch: { $lt: +new Date() } },
17 |       sort: { epoch: -1 },
18 |       limit: 5
19 |     })
20 | 
21 |     const rAll = await $axios.post(`/data/search.json`, {
22 |       q: { epoch: { $lt: +new Date() } },
23 |       proj: { path: 1 }
24 |     })
25 | 
26 |     return {
27 |       posts: rPosts.data,
28 |       count: rAll.data.length
29 |     }
30 |   }
31 | }
32 | </script>
33 | 


--------------------------------------------------------------------------------
/pages/_pageNumber.vue:
--------------------------------------------------------------------------------
 1 | <template lang="pug">
 2 | post-query(:posts="posts" :count="count")
 3 | </template>
 4 | 
 5 | <script>
 6 | import PostQuery from '@/components/PostQuery'
 7 | 
 8 | export default {
 9 |   components: {
10 |     PostQuery
11 |   },
12 |   async asyncData ({ $axios, $payloadURL, route }) {
13 |     if (process.static && process.client && $payloadURL) { return $axios.$get($payloadURL(route)) }
14 | 
15 |     const rPosts = await $axios.post(`/data/search.json`, {
16 |       q: { epoch: { $lt: +new Date() } },
17 |       sort: { epoch: -1 },
18 |       offset: (route.params.pageNumber - 1) * 5,
19 |       limit: 5
20 |     })
21 | 
22 |     const rAll = await $axios.post(`/data/search.json`, {
23 |       q: { epoch: { $lt: +new Date() } },
24 |       proj: { path: 1 }
25 |     })
26 | 
27 |     return {
28 |       posts: rPosts.data,
29 |       count: rAll.data.length
30 |     }
31 |   }
32 | }
33 | </script>
34 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "blog-reveal.nuxt",
 3 |   "version": "1.0.0",
 4 |   "description": "Blog-reveal creator, powered by Nuxt",
 5 |   "author": "Pacharapol Withayasakpunt",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "nuxt",
 9 |     "build": "nuxt build",
10 |     "start": "nuxt start",
11 |     "generate": "nuxt generate",
12 |     "lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
13 |   },
14 |   "dependencies": {
15 |     "@nuxtjs/axios": "^5.3.6",
16 |     "@nuxtjs/dotenv": "^1.4.0",
17 |     "cors": "^2.8.5",
18 |     "dayjs": "^1.8.19",
19 |     "dot-prop": "^5.2.0",
20 |     "dotenv": "^8.2.0",
21 |     "express": "^4.17.1",
22 |     "fast-glob": "^3.1.1",
23 |     "fs-extra": "^8.1.0",
24 |     "gray-matter": "^4.0.2",
25 |     "hyperscript": "^2.0.2",
26 |     "js-yaml": "^3.13.1",
27 |     "nedb-promises": "^4.0.1",
28 |     "nuxt": "^2.0.0",
29 |     "nuxt-buefy": "^0.3.2",
30 |     "nuxt-express-module": "^0.0.11",
31 |     "nuxt-payload-extractor": "^0.0.14",
32 |     "scope-css": "^1.2.1",
33 |     "showdown": "^1.9.1"
34 |   },
35 |   "devDependencies": {
36 |     "@nuxtjs/eslint-config": "^1.0.1",
37 |     "@nuxtjs/eslint-module": "^1.0.0",
38 |     "babel-eslint": "^10.0.1",
39 |     "eslint": "^6.1.0",
40 |     "eslint-plugin-nuxt": ">=0.4.2",
41 |     "pug": "^2.0.4",
42 |     "pug-plain-loader": "^1.0.0",
43 |     "sass": "^1.25.0",
44 |     "sass-loader": "^8.0.2"
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Created by .ignore support plugin (hsz.mobi)
 2 | ### Node template
 3 | # Logs
 4 | /logs
 5 | *.log
 6 | npm-debug.log*
 7 | yarn-debug.log*
 8 | yarn-error.log*
 9 | 
10 | # Runtime data
11 | pids
12 | *.pid
13 | *.seed
14 | *.pid.lock
15 | 
16 | # Directory for instrumented libs generated by jscoverage/JSCover
17 | lib-cov
18 | 
19 | # Coverage directory used by tools like istanbul
20 | coverage
21 | 
22 | # nyc test coverage
23 | .nyc_output
24 | 
25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
26 | .grunt
27 | 
28 | # Bower dependency directory (https://bower.io/)
29 | bower_components
30 | 
31 | # node-waf configuration
32 | .lock-wscript
33 | 
34 | # Compiled binary addons (https://nodejs.org/api/addons.html)
35 | build/Release
36 | 
37 | # Dependency directories
38 | node_modules/
39 | jspm_packages/
40 | 
41 | # TypeScript v1 declaration files
42 | typings/
43 | 
44 | # Optional npm cache directory
45 | .npm
46 | 
47 | # Optional eslint cache
48 | .eslintcache
49 | 
50 | # Optional REPL history
51 | .node_repl_history
52 | 
53 | # Output of 'npm pack'
54 | *.tgz
55 | 
56 | # Yarn Integrity file
57 | .yarn-integrity
58 | 
59 | # dotenv environment variables file
60 | .env
61 | 
62 | # parcel-bundler cache (https://parceljs.org/)
63 | .cache
64 | 
65 | # next.js build output
66 | .next
67 | 
68 | # nuxt.js build output
69 | .nuxt
70 | 
71 | # Nuxt generate
72 | dist
73 | 
74 | # vuepress build output
75 | .vuepress/dist
76 | 
77 | # Serverless directories
78 | .serverless
79 | 
80 | # IDE / Editor
81 | .idea
82 | 
83 | # Service worker
84 | sw.*
85 | 
86 | # Mac OSX
87 | .DS_Store
88 | 
89 | # Vim swap files
90 | *.swp
91 | 


--------------------------------------------------------------------------------
/components/PostQuery.vue:
--------------------------------------------------------------------------------
 1 | <template lang="pug">
 2 | section(style="margin-top: 1em")
 3 |   h1.title(v-if="tag" style="margin-bottom: 0.5em")
 4 |     span Tag:&nbsp;
 5 |     strong {{tag}}
 6 |   post-teaser(v-for="p in posts" :key="p.slug" :p="p")
 7 |   pagination(:page="pageNumber" :count="Math.ceil(count / 5)" :base="tag ? '/tag/': '/'")
 8 | </template>
 9 | 
10 | <script>
11 | import PostTeaser from './PostTeaser'
12 | import Pagination from './Pagination'
13 | 
14 | export default {
15 |   components: {
16 |     PostTeaser,
17 |     Pagination
18 |   },
19 |   props: {
20 |     tag: {
21 |       type: String,
22 |       default: ''
23 |     },
24 |     posts: {
25 |       type: Array,
26 |       default: () => []
27 |     },
28 |     count: {
29 |       type: Number,
30 |       default: 0
31 |     },
32 |     pageNumber: {
33 |       type: Number,
34 |       default: 1
35 |     }
36 |   },
37 |   head () {
38 |     const p = this.posts[0] || {}
39 | 
40 |     return {
41 |       title: this.tag ? `Tag: ${this.tag}` : 'All posts',
42 |       meta: [
43 |         ...(p.excerpt ? [
44 |           { hid: 'description', name: 'description', content: p.excerpt },
45 |           { hid: 'og:description', property: 'og:description', content: p.excerpt },
46 |           { hid: 'twitter:description', property: 'twitter:description', content: p.excerpt }
47 |         ] : []),
48 |         ...(p.image ? [
49 |           { hid: 'og:image', property: 'og:image', content: p.image },
50 |           { hid: 'twitter:image', property: 'twitter:image', content: p.image },
51 |           { hid: 'twitter:card', property: 'twitter:card', content: 'summary_large_image' }
52 |         ] : [])
53 |       ]
54 |     }
55 |   }
56 | }
57 | </script>
58 | 


--------------------------------------------------------------------------------
/components/PostTeaser.vue:
--------------------------------------------------------------------------------
 1 | <template lang="pug">
 2 | section.card(style="margin-bottom: 1em")
 3 |   .card-content
 4 |     h2.title
 5 |       nuxt-link.hoverable(:to="url") {{p.frontmatter.title}}
 6 |     div(style="height: 1.5em; margin-bottom: 2em;")
 7 |       small.is-pulled-right {{dateString}}
 8 | 
 9 |     .columns(v-if="p.frontmatter.image" style="flex-direction: row-reverse;")
10 |       .column.is-two-fifths
11 |         figure.image
12 |           img.lazyload(:alt="p.frontmatter.title" :data-src="p.frontmatter.image")
13 |       .column
14 |         .content(v-html="toHtml(p.excerpt)")
15 |     .content(v-else v-html="toHtml(p.excerpt)")
16 | 
17 |     div(style="height: 20px")
18 |       nuxt-link.button.is-outlined.is-danger.is-pulled-right(:to="url") Read more
19 | </template>
20 | 
21 | <script>
22 | import dayjs from 'dayjs'
23 | import showdown from 'showdown'
24 | import LocalizedFormat from 'dayjs/plugin/localizedFormat'
25 | 
26 | dayjs.extend(LocalizedFormat)
27 | 
28 | const mdConverter = new showdown.Converter()
29 | mdConverter.setFlavor('github')
30 | 
31 | export default {
32 |   props: {
33 |     p: {
34 |       type: Object,
35 |       required: true
36 |     }
37 |   },
38 |   computed: {
39 |     url () {
40 |       const m = this.p.epoch ? dayjs(this.p.epoch) : null
41 |       return m ? `/posts/${m.format('YYYY')}/${m.format('MM')}/${this.p.slug}` : `/posts/${this.p.slug}`
42 |     },
43 |     dateString () {
44 |       const m = this.p.epoch ? dayjs(this.p.epoch) : null
45 |       return m ? m.format('LL') : ''
46 |     }
47 |   },
48 |   methods: {
49 |     toHtml (md) {
50 |       return mdConverter.makeHtml(md.replace(/<[^<]*?$/s, ''))
51 |     }
52 |   }
53 | }
54 | </script>
55 | 
56 | <style lang="scss" scoped>
57 | a.hoverable:hover {
58 |   color: blue;
59 | }
60 | </style>
61 | 


--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
 1 | import { config } from './prebuild'
 2 | 
 3 | export default {
 4 |   mode: 'universal',
 5 |   /*
 6 |   ** Headers of the page
 7 |   */
 8 |   head: {
 9 |     titleTemplate: config.title ? `%s - ${config.title}` : '%s',
10 |     meta: [
11 |       { charset: 'utf-8' },
12 |       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
13 |       { hid: 'description', name: 'description', content: config.description }
14 |     ],
15 |     link: [
16 |       { rel: 'icon', type: 'image/x-icon', href: '/media/favicon.ico' }
17 |     ]
18 |   },
19 |   /*
20 |   ** Customize the progress-bar color
21 |   */
22 |   loading: { color: '#fff' },
23 |   /*
24 |   ** Global CSS
25 |   */
26 |   css: [
27 |   ],
28 |   /*
29 |   ** Plugins to load before mounting the App
30 |   */
31 |   plugins: [
32 |   ],
33 |   /*
34 |   ** Nuxt.js dev-modules
35 |   */
36 |   buildModules: [
37 |     // Doc: https://github.com/nuxt-community/eslint-module
38 |     '@nuxtjs/eslint-module'
39 |   ],
40 |   /*
41 |   ** Nuxt.js modules
42 |   */
43 |   modules: [
44 |     // Doc: https://buefy.github.io/#/documentation
45 |     'nuxt-buefy',
46 |     // Doc: https://axios.nuxtjs.org/usage
47 |     '@nuxtjs/axios',
48 |     // Doc: https://github.com/nuxt-community/dotenv-module
49 |     '@nuxtjs/dotenv',
50 |     'nuxt-payload-extractor',
51 |     'nuxt-express-module'
52 |   ],
53 |   /*
54 |   ** Axios module configuration
55 |   ** See https://axios.nuxtjs.org/options
56 |   */
57 |   axios: {
58 |   },
59 |   /*
60 |   ** Build configuration
61 |   */
62 |   build: {
63 |     /*
64 |     ** You can extend webpack config here
65 |     */
66 |     extend (config, ctx) {
67 |     }
68 |   },
69 |   hooks: {
70 |     // build: {
71 |     //   done () {
72 |     //     rawServer.close()
73 |     //   }
74 |     // },
75 |     // generate: {
76 |     //   done () {
77 |     //     rawServer.close()
78 |     //   }
79 |     // }
80 |   },
81 |   env: {
82 |     config: JSON.stringify(config)
83 |   }
84 | }
85 | 


--------------------------------------------------------------------------------
/components/Pagination.vue:
--------------------------------------------------------------------------------
 1 | <template lang="pug">
 2 | section
 3 |   nav.pagination.is-centered(v-if="count > 1" role="navigation" aria-label="pagination")
 4 |     nuxt-link.pagination-previous(v-if="prevCount > 0" :to="formatTo(page - 1)") &lt;
 5 |     button.pagination-previous(v-else disabled) &lt;
 6 | 
 7 |     nuxt-link.pagination-next(v-if="nextCount > 0" :to="formatTo(count)") &gt;
 8 |     button.pagination-next(v-else disabled) &gt;
 9 | 
10 |     ul.pagination-list
11 |       li(v-if="prevCount >= 2")
12 |         nuxt-link.pagination-link(aria-label="Goto page 1" :to="formatTo(1)") 1
13 |       li(v-if="prevCount > 2")
14 |         span.pagination-ellipsis &hellip;
15 |       li(v-if="prevCount >= 1")
16 |         nuxt-link.pagination-link(:aria-label="'Goto page ' + (page - 1)" :to="formatTo(page - 1)") {{page - 1}}
17 |       li
18 |         a.pagination-link.is-current(:aria-label="'Page ' + page" aria-current="page") {{0}}
19 |       li(v-if="nextCount >= 1")
20 |         nuxt-link.pagination-link(:aria-label="'Goto page ' + (page + 1)" :to="formatTo(page + 1)") {{page + 1}}
21 |       li(v-if="nextCount > 2")
22 |         span.pagination-ellipsis &hellip;
23 |       li(v-if="nextCount >= 2")
24 |         nuxt-link.pagination-link(:aria-label="'Goto page ' + count" :to="formatTo(count)") 1
25 | </template>
26 | 
27 | <script>
28 | export default {
29 |   props: {
30 |     base: {
31 |       type: String,
32 |       required: true
33 |     },
34 |     page: {
35 |       type: Number,
36 |       required: true
37 |     },
38 |     count: {
39 |       type: Number,
40 |       required: true
41 |     }
42 |   },
43 |   computed: {
44 |     prevCount () {
45 |       return this.page - 1
46 |     },
47 |     nextCount () {
48 |       return this.count - this.page
49 |     }
50 |   },
51 |   methods: {
52 |     formatTo (p) {
53 |       const q = typeof location !== 'undefined' ? new URL(location.href).searchParams.get('q') : ''
54 |       if (q) {
55 |         return p !== 1 ? `/${p}?q=${encodeURIComponent(q)}` : `/?q=${encodeURIComponent(q)}`
56 |       } else {
57 |         return p !== 1 ? `${this.base}${p}?q=${encodeURIComponent(q)}` : `${this.base}?q=${encodeURIComponent(q)}`
58 |       }
59 |     }
60 |   }
61 | }
62 | </script>
63 | 


--------------------------------------------------------------------------------
/components/PostFull.vue:
--------------------------------------------------------------------------------
 1 | <template lang="pug">
 2 | .card(style="margin-top: 1em")
 3 |   .card-content(v-if="!['reveal', 'slides'].includes(p.type)")
 4 |     h1.title {{p.frontmatter.title}}
 5 |     div(style="height: 1.5em; margin-bottom: 2em;")
 6 |       small.is-pulled-right {{dateString}}
 7 | 
 8 |     .media(v-if="p.frontmatter.image")
 9 |       figure.image
10 |         img.lazyload(:alt="p.frontmatter.title" :src="p.frontmatter.image")
11 | 
12 |     .content(v-html="toHtml(p.content)")
13 |   .card-content(v-else)
14 |     iframe.reveal-iframe(frameborder="0" :src="revealUrl")
15 | </template>
16 | 
17 | <script>
18 | import dayjs from 'dayjs'
19 | import showdown from 'showdown'
20 | import LocalizedFormat from 'dayjs/plugin/localizedFormat'
21 | 
22 | dayjs.extend(LocalizedFormat)
23 | 
24 | const mdConverter = new showdown.Converter()
25 | mdConverter.setFlavor('github')
26 | 
27 | export default {
28 |   props: {
29 |     p: {
30 |       type: Object,
31 |       required: true
32 |     }
33 |   },
34 |   computed: {
35 |     revealUrl () {
36 |       return `${process.env.baseUrl || '/'}reveal/${encodeURIComponent(this.p.path).replace('.', '--')}`
37 |     },
38 |     dateString () {
39 |       const m = this.p.epoch ? dayjs(this.p.epoch) : null
40 |       return m ? m.format('LL') : ''
41 |     }
42 |   },
43 |   methods: {
44 |     toHtml (md) {
45 |       return mdConverter.makeHtml(md.replace(/<[^<>]*?$/s, ''))
46 |     }
47 |   },
48 |   head () {
49 |     const p = this.p
50 | 
51 |     return {
52 |       title: p.title,
53 |       meta: [
54 |         ...(p.excerpt ? [
55 |           { hid: 'description', name: 'description', content: p.excerpt },
56 |           { hid: 'og:description', property: 'og:description', content: p.excerpt },
57 |           { hid: 'twitter:description', property: 'twitter:description', content: p.excerpt }
58 |         ] : []),
59 |         ...(p.image ? [
60 |           { hid: 'og:image', property: 'og:image', content: p.image },
61 |           { hid: 'twitter:image', property: 'twitter:image', content: p.image },
62 |           { hid: 'twitter:card', property: 'twitter:card', content: 'summary_large_image' }
63 |         ] : [])
64 |       ]
65 |     }
66 |   }
67 | }
68 | </script>
69 | 
70 | <style lang="scss">
71 | .reveal-iframe {
72 |   width: 100%;
73 |   height: 500px;
74 | }
75 | </style>
76 | 


--------------------------------------------------------------------------------
/prebuild/index.js:
--------------------------------------------------------------------------------
  1 | import path from 'path'
  2 | 
  3 | import fs from 'fs-extra'
  4 | import dotenv from 'dotenv'
  5 | import matter from 'gray-matter'
  6 | import glob from 'fast-glob'
  7 | import DataStore from 'nedb-promises'
  8 | import yaml from 'js-yaml'
  9 | import dayjs from 'dayjs'
 10 | 
 11 | dotenv.config()
 12 | 
 13 | export function loadDb () {
 14 |   const db = new DataStore()
 15 | 
 16 |   glob.sync('**/*.md', {
 17 |     cwd: path.join(process.env.ROOT, 'data')
 18 |   }).map((f) => {
 19 |   // eslint-disable-next-line prefer-const
 20 |     let { data, content, excerpt } = matter(fs.readFileSync(path.join(process.env.ROOT, 'data', f), 'utf8'), {
 21 |       engines: {
 22 |         yaml: s => yaml.safeLoad(s, {
 23 |           schema: yaml.JSON_SCHEMA
 24 |         })
 25 |       },
 26 |       excerpt_separator: '<!-- excerpt_separator -->'
 27 |     })
 28 | 
 29 |     const ps = f.split('/')
 30 |     let slug = ps[ps.length - 1].replace(/\.md$/, '');
 31 |     (() => {
 32 |       const m = /^(\d{4}-\d{2}-\d{2})-(.+)$/.exec(slug)
 33 |       if (m) {
 34 |         data.date = data.date || m[1]
 35 |         slug = m[2]
 36 |       }
 37 |     })()
 38 | 
 39 |     const type = data.type || ps[0]
 40 | 
 41 |     if (!data.title) {
 42 |       const m = /^.*?# ([^\n]+)(.+)$/s.exec(content)
 43 |       if (m) {
 44 |         data.title = m[1]
 45 |         if (!['reveal', 'slides'].includes(type)) {
 46 |           content = m[2]
 47 |         }
 48 |       }
 49 |     }
 50 | 
 51 |     const epoch = data.date ? customDateStringToEpoch(data.date) : undefined
 52 |     const m = epoch ? dayjs(epoch) : undefined
 53 | 
 54 |     excerpt = (excerpt || content).replace(/<[^>]+>?/g, '').substr(0, 140)
 55 | 
 56 |     db.insert({
 57 |       path: f,
 58 |       type,
 59 |       slug,
 60 |       excerpt,
 61 |       frontmatter: data,
 62 |       epoch,
 63 |       content,
 64 |       y: m ? m.format('YYYY') : undefined,
 65 |       mo: m ? m.format('MM') : undefined
 66 |     })
 67 |   })
 68 | 
 69 |   return db
 70 | }
 71 | 
 72 | // eslint-disable-next-line import/no-mutable-exports
 73 | export let config = {}
 74 | if (fs.existsSync(path.join(process.env.ROOT, 'config.json'))) {
 75 |   config = require(path.join(process.env.ROOT, 'config.json'))
 76 | }
 77 | 
 78 | if (fs.existsSync(path.join(process.env.ROOT, 'data/media'))) {
 79 |   fs.copySync(
 80 |     path.join(process.env.ROOT, 'data/media'),
 81 |     'static/media'
 82 |   )
 83 | }
 84 | 
 85 | function customDateStringToEpoch (date) {
 86 |   if (!date) {
 87 |     return undefined
 88 |   }
 89 | 
 90 |   /**
 91 |    * Moment will default timezone to local if not specified, unlike Date.parse
 92 |    *
 93 |    * https://momentjs.com/docs/#/parsing/
 94 |    *
 95 |    * See #please-read
 96 |    */
 97 |   let m = dayjs(date, [
 98 |     'YYYY-MM-DD HH:MM ZZ',
 99 |     'YYYY-MM-DD ZZ',
100 |     'YYYY-MM-DD HH:MM',
101 |     'YYYY-MM-DD'
102 |   ])
103 | 
104 |   if (m.isValid()) {
105 |     /**
106 |      * moment().unix() is in seconds
107 |      */
108 |     return m.unix() * 1000
109 |   }
110 | 
111 |   m = dayjs(date)
112 | 
113 |   if (m.isValid()) {
114 |     return m.unix() * 1000
115 |   }
116 | 
117 |   return undefined
118 | }
119 | 


--------------------------------------------------------------------------------
/pages/reveal/_path.vue:
--------------------------------------------------------------------------------
  1 | <template lang="pug">
  2 | div
  3 | </template>
  4 | 
  5 | <script>
  6 | import scopeCss from 'scope-css'
  7 | import h from 'hyperscript'
  8 | import showdown from 'showdown'
  9 | 
 10 | const mdConverter = new showdown.Converter()
 11 | mdConverter.setFlavor('github')
 12 | 
 13 | export default {
 14 |   layout: 'reveal',
 15 |   data () {
 16 |     return {
 17 |       raw: []
 18 |     }
 19 |   },
 20 |   head () {
 21 |     return {
 22 |       link: [
 23 |         { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/reveal.js@3.8.0/css/reveal.min.css' },
 24 |         { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/reveal.js@3.8.0/css/theme/white.css' }
 25 |       ],
 26 |       script: [
 27 |         { src: 'https://cdn.jsdelivr.net/npm/reveal.js@3.8.0/js/reveal.min.js', async: true }
 28 |       ]
 29 |     }
 30 |   },
 31 |   async asyncData ({ $axios, $payloadURL, route }) {
 32 |     if (process.static && process.client && $payloadURL) { return $axios.$get($payloadURL(route)) }
 33 | 
 34 |     const rPosts = await $axios.post(`/data/search.json`, {
 35 |       q: { type: 'reveal', path: decodeURIComponent(route.params.path).replace('--', '.') },
 36 |       limit: 1,
 37 |       proj: { content: 1 }
 38 |     })
 39 | 
 40 |     return {
 41 |       post: rPosts.data[0]
 42 |     }
 43 |   },
 44 |   mounted () {
 45 |     this.setMarkdown(this.post.content)
 46 |     window.Reveal.initialize({
 47 |       dependencies: [
 48 |         {
 49 |           src: 'https://cdn.jsdelivr.net/npm/reveal.js@3.8.0/plugin/highlight/highlight.js',
 50 |           async: true
 51 |         }
 52 |       ]
 53 |     })
 54 |   },
 55 |   methods: {
 56 |     setMarkdown (s) {
 57 |       const globalEl = document.getElementById('global')
 58 |       Array.from(globalEl.querySelectorAll('style.ref')).map(el => el.remove())
 59 | 
 60 |       let xOffset = 0
 61 |       s.split(/\r?\n(?:===|---)\r?\n/g).map((el, x) => {
 62 |         this.raw[x] = this.raw[x] || []
 63 |         const newRawSs = el.split(/\r?\n--\r?\n/g).map(ss => this.parseSlide(ss))
 64 |         if (newRawSs.every(ss => !ss.html)) {
 65 |           xOffset++
 66 |         }
 67 | 
 68 |         x -= xOffset
 69 | 
 70 |         let yOffset = 0
 71 |         return newRawSs.map((thisRaw, y) => {
 72 |           if (!thisRaw.html) {
 73 |             yOffset++
 74 |             return
 75 |           }
 76 | 
 77 |           y -= yOffset
 78 | 
 79 |           let section = this.getSlide(x)
 80 |           let subSection = this.getSlide(x, y)
 81 | 
 82 |           if (!this.raw[x][y] || (this.raw[x][y] && this.raw[x][y].raw !== thisRaw.raw)) {
 83 |             const container = document.createElement('div')
 84 |             container.className = 'container'
 85 |             container.innerHTML = thisRaw.html
 86 | 
 87 |             if (section && subSection) {
 88 |               const oldContainers = subSection.getElementsByClassName('container')
 89 |               Array.from(oldContainers).forEach(el => el.remove())
 90 |               subSection.appendChild(container)
 91 |             } else {
 92 |               subSection = document.createElement('section')
 93 |               subSection.append(container)
 94 | 
 95 |               if (section) {
 96 |                 section.appendChild(subSection)
 97 |               } else {
 98 |                 section = document.createElement('section')
 99 |                 section.appendChild(subSection)
100 |                 document.querySelector('.reveal .slides').appendChild(section)
101 |               }
102 |             }
103 | 
104 |             Array.from(container.querySelectorAll('pre code:not(.hljs)')).forEach((el) => {
105 |               if (window.hljs) {
106 |                 window.hljs.highlightBlock(el)
107 |               }
108 |             })
109 |           }
110 | 
111 |           return thisRaw
112 |         }).filter(el => el)
113 |       }).filter(el => el && el.length > 0)
114 |     },
115 |     parseSlide (text) {
116 |       const id = this.hash(text)
117 |       const raw = text
118 |       let type = 'regular'
119 |       let html = text
120 |       const [firstLine, ...lines] = html.split('\n')
121 |       const newType = firstLine.substr(3)
122 |       if (newType === 'hidden') {
123 |         type = 'hidden'
124 |         return { html: '', raw, id, type }
125 |       } else if (newType === 'global') {
126 |         type = 'global'
127 |         html = lines.join('\n')
128 |       }
129 | 
130 |       html = html.replace(/(?:^|\n)\/\/ css=([A-Za-z0-9\-_]+\.css)(?:$|\n)/g, (p0, ref) => {
131 |         const i = raw.indexOf(p0)
132 |         const globalEl = document.getElementById('global')
133 |         const className = `ref${i}`
134 | 
135 |         let el = globalEl.querySelector(`style.ref.${className}`)
136 |         if (!el) {
137 |           el = document.createElement('style')
138 |           el.classList.add('ref', className)
139 |           globalEl.appendChild(el)
140 |         }
141 | 
142 |         fetch(ref).then(r => r.text()).then((content) => {
143 |           if (type !== 'global') {
144 |             content = scopeCss(content, `#${id}`)
145 |           }
146 |           el.innerHTML = content
147 |         })
148 | 
149 |         return ''
150 |       })
151 | 
152 |       html = html.replace(/(?:^|\n)(\/\/ slide\n)?```(\S+)\n([^]+?)\n```(?:$|\n)/g, (p0, subtype, lang, content) => {
153 |         if (type !== 'global' && !subtype) {
154 |           return p0
155 |         }
156 | 
157 |         if (lang === 'css') {
158 |           const globalEl = document.getElementById('global')
159 |           if (type !== 'global') {
160 |             content = scopeCss(content, `#${id}`)
161 |           }
162 |           let el = globalEl.querySelector('style.main')
163 |           if (!el) {
164 |             el = document.createElement('style')
165 |             el.className = 'main'
166 |             globalEl.appendChild(el)
167 |           }
168 |           el.innerHTML = content
169 |           return ''
170 |         } else if (lang === 'pre') {
171 |           return h('pre', content).outerHTML
172 |         } else {
173 |           return mdConverter.makeHtml(content, lang)
174 |         }
175 |       })
176 | 
177 |       if (type === 'global') {
178 |         document.body.insertAdjacentHTML('beforeend', html)
179 |         return { html: '', raw, id, type }
180 |       }
181 | 
182 |       return {
183 |         html: h(`#${id}`, {
184 |           innerHTML: mdConverter.makeHtml(html)
185 |         }).outerHTML,
186 |         raw,
187 |         id,
188 |         type
189 |       }
190 |     },
191 |     getSlide (x, y) {
192 |       const s = document.querySelectorAll('.slides > section')
193 |       const hSlide = s[x]
194 | 
195 |       if (typeof y === 'number') {
196 |         if (hSlide) {
197 |           return Array.from(hSlide.children).filter(el => el.tagName.toLocaleUpperCase() === 'SECTION')[y]
198 |         }
199 | 
200 |         return undefined
201 |       }
202 | 
203 |       return hSlide
204 |     },
205 |     hash (str) {
206 |       let hash = 0
207 |       for (let i = 0; i < str.length; i++) {
208 |         hash = ((hash << 5) - hash) + str.charCodeAt(i)
209 |         hash = hash & hash
210 |       }
211 |       return 'h' + Math.round(Math.abs(hash)).toString(36)
212 |     }
213 |   }
214 | }
215 | </script>
216 | 
217 | <style lang="scss">
218 | .container {
219 |   max-height: 90vh;
220 |   overflow: scroll;
221 | }
222 | 
223 | img, video, iframe {
224 |   max-height: 80vh;
225 |   max-width: 80vw;
226 | }
227 | </style>
228 | 


--------------------------------------------------------------------------------