3 | ![]()
8 |
11 |
12 |
13 |
14 |
68 |
--------------------------------------------------------------------------------
/packages/web/src/router/index.ts:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import VueRouter from 'vue-router'
3 |
4 | Vue.use(VueRouter)
5 |
6 | const registeredLayouts = [
7 | 'web'
8 | ]
9 |
10 | registeredLayouts.map((layout) => {
11 | Vue.component(`${layout}-layout`, () => import(`@/layouts/${layout}.vue`))
12 | })
13 |
14 | const router = new VueRouter({
15 | mode: 'history',
16 | base: process.env.BASE_URL,
17 | routes: [
18 | {
19 | path: '/comment',
20 | component: () => import('@/views/Comment.vue')
21 | },
22 | {
23 | path: '/installation',
24 | component: () => import('@/views/MarkdownDoc.vue'),
25 | props: {
26 | getMd: async () => (await import('@/assets/docs/installation.md')).default
27 | },
28 | meta: {
29 | layout: 'web'
30 | }
31 | },
32 | {
33 | path: '/guide',
34 | component: () => import('@/views/MarkdownDoc.vue'),
35 | props: {
36 | getMd: async () => (await import('@/assets/docs/guide.md')).default
37 | },
38 | meta: {
39 | layout: 'web'
40 | }
41 | },
42 | {
43 | path: '/',
44 | component: () => import('@/views/MarkdownDoc.vue'),
45 | props: {
46 | getMd: async () => (await import('@/assets/README.md')).default
47 | },
48 | meta: {
49 | layout: 'web'
50 | }
51 | },
52 | {
53 | path: '*',
54 | component: () => import('@/views/NotFound.vue')
55 | }
56 | ]
57 | })
58 |
59 | export default router
60 |
--------------------------------------------------------------------------------
/docs/guide.md:
--------------------------------------------------------------------------------
1 | # Markdown Guide
2 |
3 | ## Emphasis
4 |
5 | **bold**
6 | *italics*
7 | ~~strikethrough~~
8 |
9 | ## Headers
10 |
11 | # Big header
12 | ## Medium header
13 | ### Small header
14 | #### Tiny header
15 |
16 | ## Lists
17 |
18 | * Generic list item
19 | * Generic list item
20 | * Generic list item
21 |
22 | 1. Numbered list item
23 | 2. Numbered list item
24 | 3. Numbered list item
25 |
26 | ## Links
27 |
28 | [Text to display](http://www.example.com)
29 |
30 | ## Emojis
31 |
32 | this is a :smile: smile emoji
33 |
34 | this is a :smile: smile emoji
35 |
36 | A complete list of available emojis can be found [here](https://github.com/showdownjs/showdown/wiki/emojis).
37 |
38 | ## Quotes
39 |
40 | > This is a quote.
41 | > It can span multiple lines!
42 |
43 | ## Images
44 |
45 | 
46 |
47 | Need to upload images? Simply paste the image, and the link will be autogenerated.
48 |
49 | ## Tables
50 |
51 | | Column 1 | Column 2 | Column 3 |
52 | | -------- | -------- | -------- |
53 | | John | Doe | Male |
54 | | Mary | Smith | Female |
55 |
56 | Or without aligning the columns...
57 |
58 | | Column 1 | Column 2 | Column 3 |
59 | | -------- | -------- | -------- |
60 | | John | Doe | Male |
61 | | Mary | Smith | Female |
62 |
63 | ## Displaying code
64 |
65 | `var example = "hello!";`
66 |
67 | Or spanning multiple lines...
68 |
69 | ```js
70 | var example = "hello!";
71 | alert(example);
72 | ```
73 |
--------------------------------------------------------------------------------
/packages/web/src/assets/util.ts:
--------------------------------------------------------------------------------
1 | import SparkMD5 from 'spark-md5'
2 |
3 | export const lit = (segs: TemplateStringsArray, ...parts: string[]) =>
4 | segs.map((s, i) => `${s}${parts[i]}`).join('')
5 |
6 | /**
7 | *
8 | * @param {string} [email]
9 | * @param {number} [size]
10 | */
11 | export function getGravatarUrl (email: string, size = 96) {
12 | return `https://www.gravatar.com/avatar/${
13 | email ? SparkMD5.hash(email.trim().toLocaleLowerCase()) : '0'
14 | }?s=${size}&d=mp`
15 | }
16 |
17 | export function deepMerge (target: any, input: any) {
18 | const t = getType(target)
19 | if (t === getType(input)) {
20 | if (t === 'record') {
21 | for (const [k, v] of Object.entries(input)) {
22 | const vT = getType(v)
23 | if (['record', 'array'].includes(vT)) {
24 | deepMerge(target[k], v)
25 | } else {
26 | target[k] = v
27 | }
28 | }
29 | } else if (t === 'array') {
30 | ;(input as any[]).map((v, i) => {
31 | const vT = getType(v)
32 | if (['record', 'array'].includes(vT)) {
33 | deepMerge(target[i], v)
34 | } else {
35 | target[i] = v
36 | }
37 | })
38 | }
39 | }
40 | }
41 |
42 | export function getType (a: any) {
43 | const t = typeof a
44 | if (t === 'object') {
45 | if (!a) {
46 | return 'null'
47 | } else if (Array.isArray(a)) {
48 | return 'array'
49 | } else if (a.toString() === '[object Object]') {
50 | return 'record'
51 | } else {
52 | return a.toString()
53 | }
54 | }
55 | return t
56 | }
57 |
--------------------------------------------------------------------------------
/packages/web/src/assets/docs/guide.md:
--------------------------------------------------------------------------------
1 | # Markdown Guide
2 |
3 | ## Emphasis
4 |
5 | **bold**
6 | *italics*
7 | ~~strikethrough~~
8 |
9 | ## Headers
10 |
11 | # Big header
12 | ## Medium header
13 | ### Small header
14 | #### Tiny header
15 |
16 | ## Lists
17 |
18 | * Generic list item
19 | * Generic list item
20 | * Generic list item
21 |
22 | 1. Numbered list item
23 | 2. Numbered list item
24 | 3. Numbered list item
25 |
26 | ## Links
27 |
28 | [Text to display](http://www.example.com)
29 |
30 | ## Emojis
31 |
32 | this is a :smile: smile emoji
33 |
34 | this is a :smile: smile emoji
35 |
36 | A complete list of available emojis can be found [here](https://github.com/showdownjs/showdown/wiki/emojis).
37 |
38 | ## Quotes
39 |
40 | > This is a quote.
41 | > It can span multiple lines!
42 |
43 | ## Images
44 |
45 | 
46 |
47 | Need to upload images? Simply paste the image, and the link will be autogenerated.
48 |
49 | ## Tables
50 |
51 | | Column 1 | Column 2 | Column 3 |
52 | | -------- | -------- | -------- |
53 | | John | Doe | Male |
54 | | Mary | Smith | Female |
55 |
56 | Or without aligning the columns...
57 |
58 | | Column 1 | Column 2 | Column 3 |
59 | | -------- | -------- | -------- |
60 | | John | Doe | Male |
61 | | Mary | Smith | Female |
62 |
63 | ## Displaying code
64 |
65 | `var example = "hello!";`
66 |
67 | Or spanning multiple lines...
68 |
69 | ```js
70 | var example = "hello!";
71 | alert(example);
72 | ```
73 |
--------------------------------------------------------------------------------
/packages/web/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "web",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "vue-cli-service build --mode=development --watch --dest ../server/public",
7 | "build": "vue-cli-service build"
8 | },
9 | "dependencies": {
10 | "axios": "^0.19.2",
11 | "buefy": "^0.8.19",
12 | "core-js": "^3.6.4",
13 | "firebase": "^7.14.5",
14 | "firebaseui": "^4.5.0",
15 | "he": "^1.2.0",
16 | "highlight.js": "^10.0.3",
17 | "highlightjs-vue": "github:patarapolw/highlightjs-vue",
18 | "humanize-duration": "^3.23.0",
19 | "liquidjs": "^9.12.0",
20 | "markdown-it": "^11.0.0",
21 | "markdown-it-container": "^2.0.0",
22 | "markdown-it-emoji": "^1.4.0",
23 | "markdown-it-imsize": "github:JRileyH/markdown-it-imsize",
24 | "simplemde": "^1.11.2",
25 | "spark-md5": "^3.0.1",
26 | "vue": "^2.6.11",
27 | "vue-class-component": "^7.2.3",
28 | "vue-click-outside": "^1.1.0",
29 | "vue-property-decorator": "^8.4.1",
30 | "vue-router": "^3.1.6",
31 | "vuex": "^3.1.3"
32 | },
33 | "devDependencies": {
34 | "@types/he": "^1.1.1",
35 | "@types/humanize-duration": "^3.18.0",
36 | "@types/markdown-it": "^10.0.1",
37 | "@types/simplemde": "^1.11.7",
38 | "@types/spark-md5": "^3.0.2",
39 | "@vue/cli-plugin-babel": "~4.3.0",
40 | "@vue/cli-plugin-router": "~4.3.0",
41 | "@vue/cli-plugin-typescript": "~4.3.0",
42 | "@vue/cli-plugin-vuex": "~4.3.0",
43 | "@vue/cli-service": "~4.3.0",
44 | "pug": "^2.0.4",
45 | "pug-plain-loader": "^1.0.0",
46 | "raw-loader": "^4.0.1",
47 | "sass": "^1.26.3",
48 | "sass-loader": "^8.0.2",
49 | "typescript": "~3.8.3",
50 | "vue-template-compiler": "^2.6.11"
51 | },
52 | "engines": {
53 | "yarn": "1.x",
54 | "npm": "please-use-yarn",
55 | "node": "12.x"
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/packages/server/src/index.ts:
--------------------------------------------------------------------------------
1 | import path from 'path'
2 |
3 | import fastify from 'fastify'
4 | import fastifyStatic from 'fastify-static'
5 | import helmet from 'fastify-helmet'
6 | import pointOfView from 'point-of-view'
7 |
8 | import router from './router'
9 | import { initDatabase } from './db/schema'
10 |
11 | (async () => {
12 | await initDatabase(process.env.MONGO_URI!)
13 |
14 | const app = fastify({
15 | logger: {
16 | prettyPrint: process.env.NODE_ENV === 'development'
17 | }
18 | })
19 |
20 | const port = parseInt(process.env.PORT || '8080')
21 |
22 | app.register(helmet, {
23 | frameguard: false,
24 | contentSecurityPolicy: {
25 | directives: {
26 | 'frame-ancestors': ['"self"', ...process.env.ALOUD_SITE!.split(',')]
27 | }
28 | }
29 | })
30 |
31 | if (process.env.NODE_ENV === 'development') {
32 | app.register(require('fastify-cors'))
33 | app.addHook('preHandler', async (req) => {
34 | if (req.body) {
35 | req.log.info({ body: req.body }, 'body')
36 | }
37 | })
38 | }
39 |
40 | app.register(router, { prefix: '/api' })
41 |
42 | app.register(pointOfView, {
43 | engine: {
44 | handlebars: require('handlebars')
45 | },
46 | defaultContext: {
47 | firebaseConfig: process.env.FIREBASE_CONFIG,
48 | baseUrl: process.env.BASE_URL
49 | },
50 | // @ts-ignore
51 | root: path.resolve('public')
52 | })
53 |
54 | app.register(fastifyStatic, {
55 | root: path.resolve('public')
56 | })
57 |
58 | app.get('/', (_, reply) => {
59 | reply.view('index.html')
60 | })
61 |
62 | app.get('*.html', (_, reply) => {
63 | reply.view('index.html')
64 | })
65 |
66 | app.setNotFoundHandler((_, reply) => {
67 | reply.view('index.html')
68 | })
69 |
70 | app.listen(port, process.env.NODE_ENV === 'development' ? 'localhost' : '0.0.0.0', (err) => {
71 | if (err) {
72 | throw err
73 | }
74 |
75 | console.log(`Go to http://localhost:${port}`)
76 | })
77 | })().catch(console.error)
78 |
--------------------------------------------------------------------------------
/packages/web/src/assets/shlex.ts:
--------------------------------------------------------------------------------
1 | export interface ISplitOptions {
2 | brackets: [string, string][]
3 | split: string
4 | escape: string
5 | keepBrace?: boolean
6 | }
7 |
8 | export const defaultSplitOptions: ISplitOptions = {
9 | brackets: [
10 | ['"', '"'],
11 | ["'", "'"]
12 | ],
13 | split: ' ',
14 | escape: '\\'
15 | }
16 |
17 | /**
18 | *
19 | * @param ss
20 | * @param options
21 | *
22 | * ```js
23 | * > split('')
24 | * []
25 | * > split('a:b "c:d e:f"')
26 | * ['a:b', 'c:d e:f']
27 | * > split('a "b c" "d e"')
28 | * ['a', 'b c', 'd e']
29 | * ```
30 | */
31 | export function split (
32 | ss: string,
33 | options: ISplitOptions = defaultSplitOptions
34 | ) {
35 | const bracketStack = {
36 | data: [] as string[],
37 | push (c: string) {
38 | this.data.push(c)
39 | },
40 | pop () {
41 | return this.data.pop()
42 | },
43 | peek () {
44 | return this.data.length > 0 ? this.data[this.data.length - 1] : undefined
45 | }
46 | }
47 | const tokenStack = {
48 | data: [] as string[],
49 | currentChars: [] as string[],
50 | addChar (c: string) {
51 | this.currentChars.push(c)
52 | },
53 | flush () {
54 | const d = this.currentChars.join('')
55 | if (d) {
56 | this.data.push(d)
57 | }
58 | this.currentChars = []
59 | }
60 | }
61 |
62 | let prev = ''
63 | ss.split('').map((c) => {
64 | if (prev === options.escape) {
65 | tokenStack.addChar(c)
66 | } else {
67 | let canAddChar = true
68 |
69 | for (const [op, cl] of options.brackets) {
70 | if (c === cl) {
71 | if (bracketStack.peek() === op) {
72 | bracketStack.pop()
73 | canAddChar = false
74 | break
75 | }
76 | }
77 |
78 | if (c === op) {
79 | bracketStack.push(c)
80 | canAddChar = false
81 | break
82 | }
83 | }
84 |
85 | if (c === options.split && !bracketStack.peek()) {
86 | tokenStack.flush()
87 | } else if (options.keepBrace || canAddChar) {
88 | tokenStack.addChar(c)
89 | }
90 | }
91 |
92 | prev = c
93 | })
94 |
95 | tokenStack.flush()
96 |
97 | return tokenStack.data.map((s) => s.trim()).filter((s) => s)
98 | }
99 |
--------------------------------------------------------------------------------
/docs/installation.md:
--------------------------------------------------------------------------------
1 | # Installation
2 |
3 | ## Deploying the backend
4 |
5 | You will need both
6 |
7 | - Firebase,
8 | - Auth and Storage enabled
9 | - CORS enabled for Storage, by running `gsutil cors set cors.json gs://[BUCKET_NAME]`
10 | - MongoDB
11 |
12 | And several environment variables
13 |
14 | ```sh
15 | BASE_URL='https://
4 |
7 | Whoops!
5 | Clumsy us, we were unable to find the page you were looking for 6 |
42 | ${
43 | meta.title
44 | ? `
`
53 |
54 | return `
55 |
62 | ${innerHTML}
63 | `
64 | }
65 | })
66 |
67 | liquid.registerTag('youtube', {
68 | parse (token) {
69 | this.href = split(token.args)[0]
70 | },
71 | render () {
72 | return this.href
73 | ? `
74 | `
80 | : ''
81 | }
82 | })
83 |
84 | liquid.registerTag('speak', {
85 | parse (token) {
86 | const [href, str] = split(token.args)
87 | this.word = href
88 | this.lang = str || 'zh'
89 | },
90 | render () {
91 | const href = `https://speak-btn.now.sh/btn?q=${encodeURIComponent(
92 | this.word
93 | )}&lang=${encodeURIComponent(this.lang)}`
94 |
95 | return this.word
96 | ? `
97 | `
102 | : ''
103 | }
104 | })
105 |
--------------------------------------------------------------------------------
/packages/web/src/assets/make-html.ts:
--------------------------------------------------------------------------------
1 | import SparkMD5 from 'spark-md5'
2 | // import { unescapeAll } from 'markdown-it/lib/common/utils'
3 | import emoji from 'markdown-it-emoji'
4 | import imsize from 'markdown-it-imsize'
5 | import mdContainer from 'markdown-it-container'
6 | import MarkdownIt from 'markdown-it'
7 | import hljs from 'highlight.js'
8 | import hljsDefineVue from 'highlightjs-vue'
9 | import { liquid } from './template'
10 | import 'highlight.js/styles/default.css'
11 |
12 | hljsDefineVue(hljs)
13 |
14 | export class MakeHtml {
15 | md: MarkdownIt
16 | html = ''
17 | id: string
18 |
19 | constructor (id?: string) {
20 | this.id = id
21 | ? `el__${SparkMD5.hash(id)}`
22 | : `el__${Math.random()
23 | .toString(36)
24 | .substr(2)}`
25 | this.md = MarkdownIt({
26 | breaks: true
27 | })
28 | // .use((md) => {
29 | // const { fence } = md.renderer.rules
30 |
31 | // md.renderer.rules.fence = (tokens, idx, options, env, slf) => {
32 | // const token = tokens[idx]
33 | // const info = token.info ? unescapeAll(token.info).trim() : ''
34 | // const content = token.content
35 |
36 | // if (info === 'css parsed') {
37 | // return this._makeCss(content)
38 | // } else if (info === 'yaml link') {
39 | // return this._makeLink(yaml.safeLoad(content))
40 | // }
41 |
42 | // return fence!(tokens, idx, options, env, slf)
43 | // }
44 | // return md
45 | // })
46 | .use(emoji)
47 | .use(imsize)
48 | .use(mdContainer, 'spoiler', {
49 | validate: (params: string) => {
50 | return params.trim().match(/^spoiler(?:\s+(.*))?$/)
51 | },
52 | render: (tokens: any[], idx: number) => {
53 | const m = tokens[idx].info.trim().match(/^spoiler(?:\s+(.*))?$/)
54 |
55 | if (tokens[idx].nesting === 1) {
56 | // opening tag
57 | return (
58 | '