From 4a345249c54adfcf6d4a1a29851253d1caee4f87 Mon Sep 17 00:00:00 2001 From: LightDiscord Date: Thu, 20 Feb 2020 22:38:53 +0100 Subject: [PATCH 01/11] feat(articles): start this feature From 798fded863b91252eeead0b341fca3577015f130 Mon Sep 17 00:00:00 2001 From: LightDiscord Date: Thu, 20 Feb 2020 23:29:12 +0100 Subject: [PATCH 02/11] feat: remove part of the backend --- articles/hello-world/README.md | 3 + articles/hello-world/index.js | 19 ++ articles/index.js | 6 + index.html | 2 +- package-lock.json | 185 ++++++++++++++++++++ package.json | 2 + src/components/Articles/ArticleTile.vue | 33 ++-- src/components/Header/Articles/Articles.vue | 22 +-- src/main.js | 10 +- webpack.config.js | 16 +- 10 files changed, 258 insertions(+), 40 deletions(-) create mode 100644 articles/hello-world/README.md create mode 100644 articles/hello-world/index.js create mode 100644 articles/index.js diff --git a/articles/hello-world/README.md b/articles/hello-world/README.md new file mode 100644 index 0000000..4f005a6 --- /dev/null +++ b/articles/hello-world/README.md @@ -0,0 +1,3 @@ +# Hello, world! + +It's a body with some *italic* and **bold** text. diff --git a/articles/hello-world/index.js b/articles/hello-world/index.js new file mode 100644 index 0000000..ed9851a --- /dev/null +++ b/articles/hello-world/index.js @@ -0,0 +1,19 @@ +export const title = "Hello, world!"; + +export const uri = "hello-world"; + +export const creationDate = new Date(2020, 1, 20, 23); + +export const updateDate = new Date(2020, 1, 20, 23, 10); + +export const authors = [ + "LightDiscord" +]; + +export const tags = [ + "SDD" +]; + +export const bgImage = require('../../src/img/article-bg.png'); + +export const fetchContent = () => import('./README.md'); diff --git a/articles/index.js b/articles/index.js new file mode 100644 index 0000000..296bcc2 --- /dev/null +++ b/articles/index.js @@ -0,0 +1,6 @@ +import * as HelloWorld from './hello-world'; + +export const articles = [ + HelloWorld +]; + diff --git a/index.html b/index.html index d532d30..f71374a 100644 --- a/index.html +++ b/index.html @@ -29,7 +29,7 @@
- + diff --git a/package-lock.json b/package-lock.json index e4f17c1..c8d73ca 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1678,6 +1678,12 @@ "integrity": "sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=", "dev": true }, + "ast-types": { + "version": "0.9.6", + "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.9.6.tgz", + "integrity": "sha1-ECyenpAF0+fjgpvwxPok7oYu6bk=", + "dev": true + }, "async-each": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.1.tgz", @@ -2236,6 +2242,16 @@ } } }, + "camel-case": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-3.0.0.tgz", + "integrity": "sha1-yjw2iKTpzzpM2nd9xNy8cTJJz3M=", + "dev": true, + "requires": { + "no-case": "^2.2.0", + "upper-case": "^1.1.1" + } + }, "camelcase": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz", @@ -2350,6 +2366,23 @@ } } }, + "clean-css": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz", + "integrity": "sha512-VcMWDN54ZN/DS+g58HYL5/n4Zrqe8vHJpGA8KdgUXFU4fuP/aHNw8eld9SyEIyabIMJX/0RaY/fplOo5hYLSFA==", + "dev": true, + "requires": { + "source-map": "~0.6.0" + }, + "dependencies": { + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } + } + }, "cliui": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/cliui/-/cliui-4.1.0.tgz", @@ -3184,6 +3217,16 @@ "is-symbol": "^1.0.2" } }, + "es6-templates": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/es6-templates/-/es6-templates-0.2.3.tgz", + "integrity": "sha1-XLmsn7He1usSOTQrgdeSu7QHjuQ=", + "dev": true, + "requires": { + "recast": "~0.11.12", + "through": "~2.3.6" + } + }, "escape-html": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", @@ -3206,6 +3249,12 @@ "estraverse": "^4.1.1" } }, + "esprima": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/esprima/-/esprima-3.1.3.tgz", + "integrity": "sha1-/cpRzuYTOJXjyI1TXOSdv/YqRjM=", + "dev": true + }, "esrecurse": { "version": "4.2.1", "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.2.1.tgz", @@ -3514,6 +3563,12 @@ "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==", "dev": true }, + "fastparse": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz", + "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==", + "dev": true + }, "faye-websocket": { "version": "0.10.0", "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.10.0.tgz", @@ -4712,6 +4767,42 @@ "integrity": "sha1-DfKTUfByEWNRXfueVUPl9u7VFi8=", "dev": true }, + "html-loader": { + "version": "0.5.5", + "resolved": "https://registry.npmjs.org/html-loader/-/html-loader-0.5.5.tgz", + "integrity": "sha512-7hIW7YinOYUpo//kSYcPB6dCKoceKLmOwjEMmhIobHuWGDVl0Nwe4l68mdG/Ru0wcUxQjVMEoZpkalZ/SE7zog==", + "dev": true, + "requires": { + "es6-templates": "^0.2.3", + "fastparse": "^1.1.1", + "html-minifier": "^3.5.8", + "loader-utils": "^1.1.0", + "object-assign": "^4.1.1" + } + }, + "html-minifier": { + "version": "3.5.21", + "resolved": "https://registry.npmjs.org/html-minifier/-/html-minifier-3.5.21.tgz", + "integrity": "sha512-LKUKwuJDhxNa3uf/LPR/KVjm/l3rBqtYeCOAekvG8F1vItxMUpueGd94i/asDDr8/1u7InxzFA5EeGjhhG5mMA==", + "dev": true, + "requires": { + "camel-case": "3.0.x", + "clean-css": "4.2.x", + "commander": "2.17.x", + "he": "1.2.x", + "param-case": "2.1.x", + "relateurl": "0.2.x", + "uglify-js": "3.4.x" + }, + "dependencies": { + "commander": { + "version": "2.17.1", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz", + "integrity": "sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==", + "dev": true + } + } + }, "http-deceiver": { "version": "1.2.7", "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz", @@ -5314,6 +5405,12 @@ "js-tokens": "^3.0.0 || ^4.0.0" } }, + "lower-case": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz", + "integrity": "sha1-miyr0bno4K6ZOkv31YdcOcQujqw=", + "dev": true + }, "lru-cache": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.1.tgz", @@ -5378,6 +5475,22 @@ "object-visit": "^1.0.0" } }, + "markdown-loader": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/markdown-loader/-/markdown-loader-5.1.0.tgz", + "integrity": "sha512-xtQNozLEL+55ZSPTNwro8epZqf1h7HjAZd/69zNe8lbckDiGVHeLQm849bXzocln2pwRK2A/GrW/7MAmwjcFog==", + "dev": true, + "requires": { + "loader-utils": "^1.2.3", + "marked": "^0.7.0" + } + }, + "marked": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/marked/-/marked-0.7.0.tgz", + "integrity": "sha512-c+yYdCZJQrsRjTPhUx7VKkApw9bwDkNbHUKo1ovgcfDjb2kc8rLuRbIFyXL5WOEUwzSSKo3IXpph2K6DqB/KZg==", + "dev": true + }, "md5.js": { "version": "1.3.5", "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz", @@ -5705,6 +5818,15 @@ "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==", "dev": true }, + "no-case": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz", + "integrity": "sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==", + "dev": true, + "requires": { + "lower-case": "^1.1.1" + } + }, "node-forge": { "version": "0.9.0", "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.9.0.tgz", @@ -6051,6 +6173,15 @@ "readable-stream": "^2.1.5" } }, + "param-case": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/param-case/-/param-case-2.1.1.tgz", + "integrity": "sha1-35T9jPZTHs915r75oIWPvHK+Ikc=", + "dev": true, + "requires": { + "no-case": "^2.2.0" + } + }, "parse-asn1": { "version": "5.1.5", "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.5.tgz", @@ -6548,6 +6679,18 @@ "readable-stream": "^2.0.2" } }, + "recast": { + "version": "0.11.23", + "resolved": "https://registry.npmjs.org/recast/-/recast-0.11.23.tgz", + "integrity": "sha1-RR/TAEqx5N+bTktmN2sqIZEkYtM=", + "dev": true, + "requires": { + "ast-types": "0.9.6", + "esprima": "~3.1.0", + "private": "~0.1.5", + "source-map": "~0.5.0" + } + }, "regenerate-unicode-properties": { "version": "8.1.0", "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-8.1.0.tgz", @@ -6642,6 +6785,12 @@ } } }, + "relateurl": { + "version": "0.2.7", + "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz", + "integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=", + "dev": true + }, "remove-trailing-separator": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.0.2.tgz", @@ -7651,6 +7800,12 @@ } } }, + "through": { + "version": "2.3.8", + "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz", + "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=", + "dev": true + }, "through2": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz", @@ -7791,6 +7946,30 @@ "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=", "dev": true }, + "uglify-js": { + "version": "3.4.10", + "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz", + "integrity": "sha512-Y2VsbPVs0FIshJztycsO2SfPk7/KAF/T72qzv9u5EpQ4kB2hQoHlhNQTsNyy6ul7lQtqJN/AoWeS23OzEiEFxw==", + "dev": true, + "requires": { + "commander": "~2.19.0", + "source-map": "~0.6.1" + }, + "dependencies": { + "commander": { + "version": "2.19.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.19.0.tgz", + "integrity": "sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==", + "dev": true + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } + } + }, "unicode-canonical-property-names-ecmascript": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz", @@ -7913,6 +8092,12 @@ "integrity": "sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==", "dev": true }, + "upper-case": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-1.1.3.tgz", + "integrity": "sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg=", + "dev": true + }, "uri-js": { "version": "4.2.2", "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz", diff --git a/package.json b/package.json index 900dd9c..2444584 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,8 @@ "css-loader": "^3.4.2", "dart-sass": "^1.25.0", "file-loader": "^5.1.0", + "html-loader": "^0.5.5", + "markdown-loader": "^5.1.0", "sass-loader": "^8.0.2", "svg-inline-loader": "^0.8.2", "vue-head": "^2.0.11", diff --git a/src/components/Articles/ArticleTile.vue b/src/components/Articles/ArticleTile.vue index ef4866f..312a9a0 100644 --- a/src/components/Articles/ArticleTile.vue +++ b/src/components/Articles/ArticleTile.vue @@ -3,12 +3,11 @@
- - +

{{ article.title }}

 -

{{ article.author }} - {{ date }}

+

{{ author }} - {{ date }}

@@ -23,14 +22,20 @@ export default { }; }, computed: { + author() { + const { authors } = this.article; + const [first] = authors; + + return (authors.length == 1) + ? first + : `${first} (+${authors.length - 1})`; + }, + article: function() { return this.$store.state.postList.filter(post => post.id === this.id)[0]; }, date: function() { - return new Date(this.article.date).toISOString().substring(0, 10); - }, - logoSrc: function() { - return 'https://salondesdevs.io/api/icon/by-language/' + (this.article.tags[0] || 'devicon'); + return this.article.updateDate.toISOString().substring(0, 10); }, shadeStyle: function() { return { @@ -39,13 +44,13 @@ export default { } }, mounted() { - this.$refs.logo.addEventListener('load', () => { - const vibrant = new Vibrant(this.$refs.logo.getAttribute('src')); - vibrant.getPalette((err, palette) => { - if(err) return console.log(err); - this.logoColour = palette.Vibrant.getHex(); - }); - }); + // this.$refs.logo.addEventListener('load', () => { + // const vibrant = new Vibrant(this.$refs.logo.getAttribute('src')); + // vibrant.getPalette((err, palette) => { + // if(err) return console.log(err); + // this.logoColour = palette.Vibrant.getHex(); + // }); + // }); } }; diff --git a/src/components/Header/Articles/Articles.vue b/src/components/Header/Articles/Articles.vue index a48249d..250d101 100644 --- a/src/components/Header/Articles/Articles.vue +++ b/src/components/Header/Articles/Articles.vue @@ -7,8 +7,7 @@
- - +
@@ -17,7 +16,7 @@

Dernier article

{{ article.title }}

- {{ article.author + ' - ' + new Date(article.date).toISOString().substr(0,10) }} + {{ article.authors[0] }}

@@ -47,21 +46,18 @@ export default { }; }, mounted() { - this.$refs.logo.addEventListener('load', () => { - const vibrant = new Vibrant(this.$refs.logo.getAttribute('src')); - vibrant.getPalette((err, palette) => { - if(err) return console.log(err); - this.logoColour = palette.Vibrant.getHex(); - }); - }); + //this.$refs.logo.addEventListener('load', () => { + // const vibrant = new Vibrant(this.$refs.logo.getAttribute('src')); + // vibrant.getPalette((err, palette) => { + // if(err) return console.log(err); + // this.logoColour = palette.Vibrant.getHex(); + // }); + //}); }, computed: { article: function() { return this.$root.$store.state.postList[0]; }, - logoSrc: function() { - return 'https://salondesdevs.io/api/icon/by-language/' + this.article.tags[0]; - }, shadeStyle: function() { return { background: 'linear-gradient(to bottom, transparent 40%, ' + this.logoColour + ' 500%)' diff --git a/src/main.js b/src/main.js index d003114..91228be 100644 --- a/src/main.js +++ b/src/main.js @@ -74,11 +74,11 @@ const store = new Vuex.Store({ }).catch(console.trace); }, fetchArticles ({commit}) { - fetch('https://salondesdevs.io/api/posts/list') - .then(data => data.json()) - .then(posts => { - commit('setPostList', {postList: posts.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())}); - }).catch(console.log); + import('../articles').then(({ articles }) => { + const sorted = articles.sort((a, b) => a.updateDate - b.updateDate); + + commit('setPostList', {postList: sorted}); + }); } } }); diff --git a/webpack.config.js b/webpack.config.js index 4a880de..ed13bfd 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -5,16 +5,14 @@ module.exports = { mode: process.env.NODE_ENV === 'production' ? 'production' : 'development', - entry: ['whatwg-fetch', 'particles.js', './src/main.js'], + entry: { + main: ['whatwg-fetch', 'particles.js', './src/main.js'], + articles: './articles/index.js' + }, output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', - filename: 'build.js' - }, - optimization: { - splitChunks: { - chunks: 'all' - } + filename: '[name].js' }, module: { rules: [ @@ -41,6 +39,10 @@ module.exports = { { test: /\.css$/, use: ['vue-style-loader', 'css-loader'] + }, + { + test: /\.md$/, + use: ['html-loader', 'markdown-loader'] } ] }, From 2d49526008526e0fae64c76125e76323c23a1ebf Mon Sep 17 00:00:00 2001 From: LightDiscord Date: Thu, 20 Feb 2020 23:50:06 +0100 Subject: [PATCH 03/11] feat: read article --- articles/index.js | 1 + src/components/Article.vue | 12 +++++----- src/components/Article/ArticleContent.vue | 10 +++++++-- src/components/Articles/ArticleTile.vue | 2 +- src/components/Header/Article/Article.vue | 27 ++++++++++++----------- src/main.js | 27 +++++++++-------------- 6 files changed, 40 insertions(+), 39 deletions(-) diff --git a/articles/index.js b/articles/index.js index 296bcc2..f83a9e7 100644 --- a/articles/index.js +++ b/articles/index.js @@ -4,3 +4,4 @@ export const articles = [ HelloWorld ]; +export const findByUri = (uri) => articles.find(article => article.uri == uri); diff --git a/src/components/Article.vue b/src/components/Article.vue index 76a4c93..e2ca054 100644 --- a/src/components/Article.vue +++ b/src/components/Article.vue @@ -1,7 +1,7 @@