├── netlify.toml
├── markdown
    ├── index.md
    ├── 404.md
    ├── about.md
    ├── articles
    │   ├── second.md
    │   └── markdown-tutorial.md
    └── privacy-policy.md
├── src
    ├── static
    │   ├── robots.txt
    │   ├── favicon-48x48.png
    │   ├── uploads
    │   │   ├── image.jpg
    │   │   ├── image.webp
    │   │   ├── image2.jpg
    │   │   ├── image3.jpg
    │   │   ├── image2.webp
    │   │   └── image3.webp
    │   └── admin
    │   │   ├── index.html
    │   │   └── config.yml
    ├── index.html
    ├── templates
    │   ├── missing.vue
    │   ├── home.vue
    │   ├── index.vue
    │   ├── page.vue
    │   └── post.vue
    ├── partials
    │   ├── foot.vue
    │   ├── comment.vue
    │   └── navigation.vue
    ├── js
    │   └── index.js
    └── css
    │   └── index.styl
├── .editorconfig
├── the-magic
    ├── build
    │   ├── get-time.js
    │   ├── webpack.client.config.js
    │   ├── webpack.server.config.js
    │   ├── folders.js
    │   ├── gulpfile.js
    │   ├── optimize-images.js
    │   ├── setup-dev-server.js
    │   ├── webpack.base.config.js
    │   ├── build.js
    │   ├── server.js
    │   └── render-markdown.js
    └── boot
    │   ├── async-data.js
    │   ├── store-reconciliation.js
    │   ├── meta-tags.js
    │   ├── index.js
    │   ├── router.js
    │   ├── entry-server.js
    │   ├── facebook-social.js
    │   └── analytics.js
├── .npmignore
├── LICENSE
├── .gitignore
├── package.json
├── site.config.js
└── README.md


/netlify.toml:
--------------------------------------------------------------------------------
1 | [build]
2 |   publish = "dist"
3 |   command = "yarn build"


--------------------------------------------------------------------------------
/markdown/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Home Page'
3 | ---
4 | <h1 class="text-center">Welcome to Your Site</h1>


--------------------------------------------------------------------------------
/src/static/robots.txt:
--------------------------------------------------------------------------------
1 | User-agent: *
2 | Allow: /
3 | 
4 | Sitemap: http://yoursite.netlify.com/sitemap.xml


--------------------------------------------------------------------------------
/src/static/favicon-48x48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codingfriend1/vue-static/HEAD/src/static/favicon-48x48.png


--------------------------------------------------------------------------------
/src/static/uploads/image.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codingfriend1/vue-static/HEAD/src/static/uploads/image.jpg


--------------------------------------------------------------------------------
/src/static/uploads/image.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codingfriend1/vue-static/HEAD/src/static/uploads/image.webp


--------------------------------------------------------------------------------
/src/static/uploads/image2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codingfriend1/vue-static/HEAD/src/static/uploads/image2.jpg


--------------------------------------------------------------------------------
/src/static/uploads/image3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codingfriend1/vue-static/HEAD/src/static/uploads/image3.jpg


--------------------------------------------------------------------------------
/src/static/uploads/image2.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codingfriend1/vue-static/HEAD/src/static/uploads/image2.webp


--------------------------------------------------------------------------------
/src/static/uploads/image3.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codingfriend1/vue-static/HEAD/src/static/uploads/image3.webp


--------------------------------------------------------------------------------
/markdown/404.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: '404'
3 | ---
4 | <h3 class="text-center">Sorry but that page couldn't be found</h3>
5 | <p class="text-center">Try finding a link on the <a href="/">home page</a></p>


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | # Matches multiple files with brace expansion notation
2 | [*.{js,html,sass,stylus,styl,vue}]
3 | charset = utf-8
4 | indent_style = tab
5 | indent_size = 2
6 | trim_trailing_whitespace = true


--------------------------------------------------------------------------------
/markdown/about.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'About Me'
3 | ---
4 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi tempora fugiat maiores pariatur omnis blanditiis impedit id a molestiae recusandae quas adipisci voluptates, culpa, quaerat saepe, deleniti labore ex esse.


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="google-site-verification" content="" />
 6 |     <!-- meta tags will be auto injected here -->
 7 |   </head>
 8 |   <body>
 9 |     <!--vue-ssr-outlet-->
10 |   </body>
11 | </html>


--------------------------------------------------------------------------------
/the-magic/build/get-time.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Prints the current time in ISO format for use in setting the date in your markdown articles
 3 |  * ---
 4 |  * created: "2019-06-24T13:29:45.280Z"
 5 |  * ---
 6 |  */
 7 | 
 8 | console.log(`\nThe current time is:`)
 9 | console.log(new Date().toISOString())
10 | console.log('\n')


--------------------------------------------------------------------------------
/src/templates/missing.vue:
--------------------------------------------------------------------------------
 1 | <template lang="pug">
 2 |   main.post-content.page
 3 |     div.post-body.post-body-and-feedback(v-html="file.html")
 4 | </template>
 5 | 
 6 | <script>
 7 | export default {
 8 |   store: ['file'],
 9 |   metaInfo() {
10 |     return {
11 |       meta: [
12 |         { "data-vmid": "robots", name: "robots", content: "noindex" },
13 |         { "data-vmid": "googlebot", name: "googlebot", content: "noindex" }
14 |       ]
15 |     }
16 |   }
17 | }
18 | </script>


--------------------------------------------------------------------------------
/src/partials/foot.vue:
--------------------------------------------------------------------------------
 1 | <template lang="pug">
 2 |   footer.site-footer
 3 |     | &copy; 
 4 |     | #[time(:datetime="year") {{year}}] 
 5 |     | #[address #[router-link(to="/about" rel="author") {{author}}]] 
 6 |     | {{site_title}}
 7 | </template>
 8 | 
 9 | <script>
10 | import config from 'config'
11 | export default {
12 |   store: ["files"],
13 |   data() {
14 |     return {
15 |       year: new Date().getFullYear(),
16 |       author: config.author,
17 |       description: config.description,
18 |       site_title: config.site_title
19 |     }
20 |   }
21 | }
22 | </script>


--------------------------------------------------------------------------------
/the-magic/build/webpack.client.config.js:
--------------------------------------------------------------------------------
 1 | const webpack = require('webpack')
 2 | const merge = require('webpack-merge')
 3 | const base = require('./webpack.base.config')
 4 | const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')
 5 | const folders = require('./folders.js')
 6 | 
 7 | const config = merge(base, {
 8 |   entry: {
 9 |     app: folders.entry_client
10 |   },
11 |   plugins: [
12 |     // strip dev-only code in Vue source
13 |     new webpack.DefinePlugin({
14 |       'process.env.VUE_ENV': '"client"'
15 |     }),
16 |     new VueSSRClientPlugin()
17 |   ]
18 | })
19 | 
20 | module.exports = config


--------------------------------------------------------------------------------
/markdown/articles/second.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: 'Sample Post #2'
 3 | thumbnail: /uploads/image2.jpg
 4 | silent: true
 5 | ---
 6 | 
 7 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci laborum, doloremque. Repellat sapiente incidunt voluptas, placeat. Nam consectetur maxime eaque magnam nostrum, iste voluptates facilis! Quidem sequi itaque eveniet nesciunt.
 8 | 
 9 | <!-- more -->
10 | 
11 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci corrupti commodi temporibus quaerat tempora sunt ducimus tempore provident similique error, veniam quia perferendis, libero repudiandae quo pariatur ut accusantium quibusdam.


--------------------------------------------------------------------------------
/markdown/privacy-policy.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Privacy Policy'
3 | ---
4 | <div class="legal-text">
5 |   <p class="privacy-warning">Google Analytics demographic information is collected from visitors of this site in aggregate form and will only be used to study traffic and success of this site. This contains basic info like age category (Ex: 18-35), city, gender, and interest categories. It is not personally identifiable. If you wish to not have this information collected on you simply opt out here.</p>
6 |   <p class="text-center"><a onclick="toggleTracking()">Opt-out of Google Analytics</a></p>
7 | 
8 |   <p>We use the browser's local storage to remember your selection for future visits.</p>
9 | </div>


--------------------------------------------------------------------------------
/src/js/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This file is included in the production.js build file
 3 |  * To know exactly at what point this file is inserted, view `the-magic/boot/index.js` and look for `main_js`
 4 |  * `store`, `router`, `config`, `app` are global variables for use in this file, keep in mind this script is run just before the root component is mounted
 5 |  */
 6 | 
 7 | import Vue from 'vue'
 8 | 
 9 |  Vue.filter('prettifyDate', function (value) {
10 |    var months = [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ];
11 |    var date = new Date(value);
12 |    return months[date.getMonth()] + ' ' + date.getDate() + ', ' + date.getFullYear();
13 |  })


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | 
 5 | # Runtime data
 6 | pids
 7 | *.pid
 8 | *.seed
 9 | 
10 | # Directory for instrumented libs generated by jscoverage/JSCover
11 | lib-cov
12 | 
13 | # Coverage directory used by tools like istanbul
14 | coverage
15 | 
16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
17 | .grunt
18 | 
19 | # Compiled binary addons (http://nodejs.org/api/addons.html)
20 | build/Release
21 | 
22 | dist
23 | 
24 | # Dependency directory
25 | # Commenting this out is preferred by some people, see
26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git-
27 | node_modules
28 | 
29 | # Users Environment Variables
30 | .lock-wscript
31 | 
32 | data/
33 | environment.env/
34 | environment-dev.env/
35 | 


--------------------------------------------------------------------------------
/the-magic/boot/async-data.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Runs client side only
 3 |  * Before the component mounts or updates it's route, we want to finish running any requied AJAX requests that the component may depend on to load
 4 |  */
 5 | 
 6 | import Vue from "vue";
 7 | 
 8 | Vue.mixin({
 9 |   beforeMount() {
10 |     const { asyncData } = this.$options;
11 |     if (asyncData) {
12 |       this.dataPromise = asyncData({
13 |         store: this.$store,
14 |         route: this.$route
15 |       });
16 |     }
17 |   }
18 | });
19 | 
20 | Vue.mixin({
21 |   beforeRouteUpdate(to, from, next) {
22 |     const { asyncData } = this.$options;
23 |     if (asyncData) {
24 |       asyncData({
25 |         store: this.$store,
26 |         route: to
27 |       })
28 |         .then(next)
29 |         .catch(next);
30 |     } else {
31 |       next();
32 |     }
33 |   }
34 | });
35 | 


--------------------------------------------------------------------------------
/src/static/admin/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8" />
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |   <title>Content Manager</title>
 7 | 
 8 |   <!-- Include the styles for the Netlify CMS UI, after your own styles -->
 9 |   <!-- <link rel="stylesheet" href="https://unpkg.com/netlify-cms@^1.0.0/dist/cms.css" /> -->
10 | 
11 |   <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
12 |   
13 | </head>
14 | <body>
15 |   <!-- Include the script that builds the page and powers Netlify CMS -->
16 |   <script src="https://unpkg.com/netlify-cms@2.9.3/dist/netlify-cms.js"></script>
17 |   <script>
18 |     if (window.netlifyIdentity) {
19 |       window.netlifyIdentity.on("init", user => {
20 |         if (!user) {
21 |           window.netlifyIdentity.on("login", () => {
22 |             document.location.href = "/admin/";
23 |           });
24 |         }
25 |       });
26 |     }
27 |   </script>
28 | </body>
29 | </html>


--------------------------------------------------------------------------------
/the-magic/build/webpack.server.config.js:
--------------------------------------------------------------------------------
 1 | const webpack = require('webpack')
 2 | const merge = require('webpack-merge')
 3 | const base = require('./webpack.base.config')
 4 | const nodeExternals = require('webpack-node-externals')
 5 | const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
 6 | const folders = require('./folders.js')
 7 | 
 8 | module.exports = merge(base, {
 9 |   target: 'node',
10 |   devtool: '#source-map',
11 |   entry: folders.entry_server,
12 |   output: {
13 |     path: folders.output_folder,
14 |     filename: "[name].js",
15 |     libraryTarget: 'commonjs2'
16 |   },
17 |   // https://webpack.js.org/configuration/externals/#externals
18 |   // https://github.com/liady/webpack-node-externals
19 |   externals: nodeExternals({
20 |     whitelist: /(\.css$|\.less$|\.sass$|\.scss$|\.styl$|\.stylus$|\.(png|jpe?g|gif|svg)(\?.*)?$|\.(woff2?|eot|ttf|otf)(\?.*)?$)/
21 |   }),
22 |   plugins: [
23 |     new webpack.DefinePlugin({
24 |       'process.env.VUE_ENV': '"server"'
25 |     }),
26 |     new VueSSRServerPlugin()
27 |   ]
28 | })


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2018 Jon Paul Miles
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | 
 5 | unoptimized-images/*
 6 | 
 7 | # exception to the rule
 8 | !unoptimized-images/.gitkeep 
 9 | 
10 | # Runtime data
11 | pids
12 | *.pid
13 | *.seed
14 | 
15 | _index.html
16 | 
17 | dist
18 | app/_index.html
19 | 
20 | # Directory for instrumented libs generated by jscoverage/JSCover
21 | lib-cov
22 | 
23 | # Coverage directory used by tools like istanbul
24 | coverage
25 | 
26 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
27 | .grunt
28 | 
29 | # Compiled binary addons (http://nodejs.org/api/addons.html)
30 | build/Release
31 | 
32 | # Dependency directory
33 | # Commenting this out is preferred by some people, see
34 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git-
35 | node_modules
36 | 
37 | # Users Environment Variables
38 | .lock-wscript
39 | environment.env
40 | data/
41 | public/admin/
42 | public/app/
43 | public/**/*
44 | !public/favicon.ico
45 | !public/images/**/*
46 | lib/email-templates/
47 | lib/hooks/
48 | lib/services/
49 | lib/middleware/
50 | lib/app.js
51 | lib/index.js
52 | lib/routes.js
53 | lib/renderer.js
54 | lib/seed
55 | server/compiled-ssr.js
56 | client-tests/test.js
57 | server/style.css
58 | platforms/
59 | www/
60 | environment-dev.env
61 | .env
62 | # .gitlab-ci.yml
63 | 


--------------------------------------------------------------------------------
/src/static/admin/config.yml:
--------------------------------------------------------------------------------
 1 | backend:
 2 |   name: git-gateway
 3 |   branch: master # Branch to update (optional; defaults to master)
 4 | 
 5 | media_folder: "unoptimized-images/" # Media files will be stored in the repo under public/uploads
 6 | public_folder: "/" # Folder path where uploaded files will be accessed, relative to the base of the built site
 7 | 
 8 | collections:
 9 |   - name: "articles" # Used in routes, e.g., /admin/collections/blog
10 |     label: "Article" # Used in the UI
11 |     folder: "markdown/articles" # The path to the folder where the documents are stored
12 |     create: true # Allow users to create new documents in this collection
13 |     slug: "{{slug}}" # Filename template, e.g., YYYY-MM-DD-title.md
14 |     fields: # The fields for each document, usually in front matter. 
15 |     # Remove any that aren't needed for posts
16 |       - {label: "Layout", name: "layout", widget: "hidden", default: "post", required: false}
17 |       - {label: "Title", name: "title", widget: "string"}
18 |       - {label: "Author", name: "author", widget: "string", required: false}
19 |       - {label: "Published", name: "created", widget: "datetime", required: false}
20 |       - {label: "Featured Image", name: "thumbnail", widget: "image", required: false}
21 |       - {label: "Draft", name: "draft", widget: "boolean", required: false}
22 |       - {label: "Body", name: "body", widget: "markdown"}
23 | 


--------------------------------------------------------------------------------
/the-magic/build/folders.js:
--------------------------------------------------------------------------------
 1 | const path = require("path")
 2 | const config = require('../../site.config')
 3 | 
 4 | const root = path.resolve(__dirname, "..", "..")
 5 | 
 6 | const folders = {
 7 |   root,
 8 |   node_modules: path.resolve(root, "node_modules"),
 9 |   the_magic: path.resolve(root, 'the-magic'),
10 |   boot: path.resolve(root, "the-magic", "boot"),
11 |   src: path.resolve(root, "src"),
12 |   entry_client: path.resolve(root, "the-magic", "boot", "index.js"),
13 |   entry_server: path.resolve(root, "the-magic", "boot", "entry-server.js"),
14 |   markdown_folder: path.resolve(root, config.folderStructure.markdown),
15 |   template_html_path: path.resolve(root, config.folderStructure.html),
16 |   css_path: path.resolve(root, config.folderStructure.css),
17 |   vue_path: path.resolve(root, config.folderStructure.vue),
18 |   js_path: path.resolve(root, config.folderStructure.js),
19 |   config_path: path.resolve(root, 'site.config.js'),
20 |   components_folder: path.resolve(root, config.folderStructure.components),
21 |   partials_folder: path.resolve(root, config.folderStructure.partials),
22 |   static_folder: path.resolve(root, config.folderStructure.static),
23 |   images_folder: path.resolve(root, config.folderStructure.images),
24 |   html_template: path.resolve(root, config.folderStructure.html),
25 |   output_folder: path.resolve(root, config.folderStructure.output),
26 | };
27 | 
28 | module.exports = folders


--------------------------------------------------------------------------------
/src/partials/comment.vue:
--------------------------------------------------------------------------------
 1 | <template lang="pug">
 2 |   div
 3 |     div(v-if="commentsEnabled" role="article")
 4 |       section.like-and-share
 5 |         h4.text-center Do you like this article? Let us know
 6 |         .text-center
 7 |           .fb-like(:data-href="social_url", data-layout='button_count', data-action='like', data-size='large', data-show-faces='true', data-share='true')
 8 |       section.comment
 9 |         h3 Join the conversation
10 |         .fb-comments(:data-href="social_url" data-numposts="5" data-width="100%")
11 |     div(v-else).text-center
12 |       .button(@click="loadComments") Load comments
13 | </template>
14 | 
15 | <script>
16 | import config from 'config'
17 | export default {
18 |   name: "comment",
19 |   store: ['file', 'social_url', 'commentsEnabled'],
20 |   methods: {
21 |     loadComments() {
22 |       window.enableComments()
23 |       this.commentsEnabled = true;
24 |       setTimeout(() => {
25 |         if (window.fbAsyncInit) {
26 |           window.fbAsyncInit();
27 |         }
28 |       }, 100);
29 |     }
30 |   },
31 |   updated() {
32 |     if(this.commentsEnabled) {
33 |       if (window.fbAsyncInit) {
34 |         window.fbAsyncInit();
35 |       }
36 |     }
37 |   },
38 |   mounted() {
39 |     if(this.commentsEnabled) {
40 |       setTimeout(() => {
41 |         if (window.fbAsyncInit) {
42 |           window.fbAsyncInit();
43 |         }
44 |       }, 250);
45 |     }
46 |   }
47 | }
48 | </script>


--------------------------------------------------------------------------------
/the-magic/build/gulpfile.js:
--------------------------------------------------------------------------------
 1 | const gulp = require("gulp");
 2 | const path = require("path");
 3 | const inject = require("gulp-inject");
 4 | const camelCase = require("lodash.camelcase");
 5 | const config = require("../../site.config.js");
 6 | const folders = require('./folders.js')
 7 | 
 8 | const globalize_components_file = path.resolve(folders.boot, "router.js")
 9 | 
10 | const globalize_components_folder = globalize_components_file.replace(
11 |   path.basename(globalize_components_file), ""
12 | );
13 | 
14 | gulp.task("default", function(done) {
15 |   return gulp
16 |     .src(globalize_components_file)
17 |     .pipe(
18 |       inject(
19 |         gulp.src([
20 |           folders.components_folder + "/**/*.vue",
21 |           folders.partials_folder + "/**/*.vue",
22 |           "!" + folders.components_folder + "/**/index.vue"
23 |         ], {
24 |           read: false
25 |         }),
26 |         {
27 |           relative: false,
28 |           starttag: "// globalize vue components",
29 |           endtag: "// end globalize vue components",
30 |           transform: function(filepath, file, i, length) {
31 |             let title = filepath.replace(/^.*[\\\/]/, "");
32 |             title = camelCase(title.substr(0, title.lastIndexOf(".")));
33 |             let fp = filepath.replace("/", "");
34 |             return `${title}: Vue.component('${title}', require("${fp}").default),`;
35 |           }
36 |         }
37 |       )
38 |     )
39 |     .pipe(gulp.dest(globalize_components_folder));
40 | });
41 | 


--------------------------------------------------------------------------------
/src/partials/navigation.vue:
--------------------------------------------------------------------------------
 1 | <template lang="pug">
 2 | div
 3 |   header.site-header.no-print(v-show="$route.path !== '/analytics'")
 4 |     .site-image
 5 |       .site-meta
 6 |         //- .site-logo
 7 |         //-   picture
 8 |         //-     source(:srcset="logo.replace('.png', '.webp')" type="image/webp")
 9 |         //-     source(:srcset="logo" type="image/jpeg")
10 |         //-     img(:src="logo", title="" alt="")
11 |         h2.site-title
12 |           router-link(to="/", rel='home') {{site_title}}
13 |         p.h3.site-description(role="doc-subtitle") {{description}}
14 |   nav.navigation.no-print
15 |     ul.nav.navbar-nav.navbar-right(role="menubar")
16 |       li
17 |         router-link(exact to="/" role="menuitem").block Home
18 |       li
19 |         router-link(exact to="/about" role="menuitem").block About
20 |       li
21 |         router-link(exact to="/privacy-policy" role="menuitem").block Privacy Policy
22 | </template>
23 | 
24 | <script>
25 | import config from 'config'
26 | export default {
27 |   store: ["files"],
28 |   data() {
29 |     return {
30 |       logo: config.logo,
31 |       description: config.description,
32 |       site_title: config.site_title
33 |     }
34 |   },
35 |   computed: {
36 |     posts() {
37 |       return this.files.filter(file => file.url.indexOf("articles/") > -1);
38 |     },
39 |     pages() {
40 |       return this.files
41 |         .filter(file => file.url !== "/404")
42 |         .filter(file => file.url.match(/\//g).length === 1);
43 |     }
44 |   }
45 | };
46 | </script>
47 | 


--------------------------------------------------------------------------------
/src/templates/home.vue:
--------------------------------------------------------------------------------
 1 | <template lang="pug">
 2 |   main
 3 |     header(v-html='file.html')
 4 |     div(role="menu").teasers
 5 |       div.teaser(v-for="post in posts" :class="post.draft ? 'draft': ''")
 6 |         header.teaser-image(v-if="post.thumbnail")
 7 |           router-link(:to="post.url", role="menuitem").block.no-border
 8 |             img(:src="post.thumbnail", :alt="post.alt")
 9 |         article
10 |           header
11 |             router-link(:to="post.url").no-border.block
12 |               h2.teaser-title {{post.title}}
13 |               time.teaser-meta(:datetime="post.created") {{post.created | prettifyDate}} 
14 |               span.reading-time-meta  - {{post.readingTime}} min read
15 |           div
16 |             p.teaser-preview(v-html="post.excerpt")
17 |           footer
18 |             router-link(:to="post.url").no-border.block
19 |               .read-article.button Read more
20 | </template>
21 | 
22 | <script>
23 | import Vue from 'vue'
24 | import config from 'config'
25 | 
26 | export default {
27 |   name: 'home',
28 |   store: ['file', 'files'],
29 |   computed: {
30 |     posts() {
31 |       return this.files
32 |         // Unless we are in development mode, don't list articles that are in draft mode.
33 |         .filter(file => file.url.indexOf('articles/') > -1 && (!file.draft || process.env.NODE_ENV !== 'production'))
34 |     },
35 |   },
36 |   metaInfo() {
37 |     return this.file
38 |       ? {
39 |           link: [
40 |             { rel: 'canonical', href: config.site_url },
41 |           ]
42 | 
43 |         } 
44 |       : {}
45 |   }
46 | }
47 | </script>
48 | 
49 | <style lang="stylus">
50 |   
51 | </style>
52 | 


--------------------------------------------------------------------------------
/the-magic/build/optimize-images.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Gathers fullsized images in the designated images folder and reduces their filesize for use on the web and saves them ot the designated static folder using the same structure they had in the images folder
 3 |  */
 4 | 
 5 | const path = require("path")
 6 | const imagemin = require("imagemin-keep-folder")
 7 | const imageminJpegRecompress = require("imagemin-jpeg-recompress")
 8 | const webp = require("imagemin-webp")
 9 | const imageminOptipng = require("imagemin-optipng")
10 | const folders = require("./folders.js")
11 | 
12 | const PNG = path.join(folders.images_folder, `**`, `*.png`)
13 | const JPG = path.join(folders.images_folder, `**`, `*.jpg`)
14 | const JPEG = path.join(folders.images_folder, `**`, `*.jpeg`)
15 | 
16 | imagemin([PNG], {
17 |   use: [
18 |     webp({
19 |       lossless: true,
20 |     }),
21 |   ],
22 |   replaceOutputDir: (output) => {
23 |     return path.join(folders.static_folder, path.basename(output))
24 |   },
25 | })
26 | 
27 | imagemin([PNG], {
28 |   use: [
29 |     imageminOptipng({
30 |       optimizationLevel: 3,
31 |     }),
32 |   ],
33 |   replaceOutputDir: (output) => {
34 |     return path.join(folders.static_folder, path.basename(output))
35 |   },
36 | })
37 | 
38 | imagemin([JPG, JPEG], {
39 |   use: [
40 |     webp({
41 |       quality: 80, // Quality setting from 0 to 100
42 |     }),
43 |   ],
44 |   replaceOutputDir: (output) => {
45 |     return path.join(folders.static_folder, path.basename(output))
46 |   },
47 | })
48 | 
49 | imagemin([JPG, JPEG], {
50 |   use: [
51 |     imageminJpegRecompress({
52 |       accurate: true,
53 |       quality: "high",
54 |       min: 50,
55 |       max: 90,
56 |       loops: 6,
57 |       progressive: true,
58 |       strip: true,
59 |       target: 0.9,
60 |     }),
61 |   ],
62 |   replaceOutputDir: (output) => {
63 |     return path.join(folders.static_folder, path.basename(output))
64 |   },
65 | })
66 | 


--------------------------------------------------------------------------------
/the-magic/boot/store-reconciliation.js:
--------------------------------------------------------------------------------
 1 | // The server may have made changes to the store before rendering the initial html. It writes those changes to window.__INITIAL_STATE__. We need to set out local store to be the same as the server so vue does not throw an hydration error (server and client html out of sync)
 2 | import Vue from "vue";
 3 | import VueStash from "vue-stash";
 4 | import router from "./router";
 5 | import config from "config";
 6 | import './facebook-social';
 7 | Vue.use(VueStash);
 8 | const defaultStore = config.store;
 9 | 
10 | let store = defaultStore;
11 | 
12 | /**
13 |  * When our Vue and Markdown files are rendered into HTML, Server-Side Rendering will save the server-side rendered state of the store to the variable `window.__INITIAL_STATE__`
14 |  * We want to set our client-side store to initialize with whatever is in this variable, so the server and client store will be in sync
15 |  */
16 | try {
17 |   if (typeof window !== "undefined" && window.__INITIAL_STATE__) {
18 |     store = window.__INITIAL_STATE__;
19 |   }
20 | } catch (err) {}
21 | 
22 | 
23 | /**
24 |  * Before loading the URL, finding the markdown file matching that URL and set the markdown's rendered HTML and metadata object as the `file` property of the store. If a markdown file cannot be found, then load a 404 page
25 |  */
26 | router.beforeEach((to, from, next) => {
27 |   let path = to.path.replace('.html', '').replace('.htm', '');
28 |   const found = store.files.find(post => post.url === path);
29 | 
30 |   /**
31 |    * Setting `postBodyEl` will enable scroll tracking with Google Analytics on a page.
32 |    * Scrolling tracking is how we determine if the article was completely read (the user reaches the bottom of the article content).
33 |    * We want to reset this value between pages in case there's a page that we don't want to track
34 |    */
35 |   if(typeof postBodyEl !== 'undefined') {
36 |     global.postBodyEl = null;
37 |   }
38 | 
39 |   if (!found) {
40 |     router.replace("/404");
41 |   } else {
42 | 
43 |     store.file = found;
44 | 
45 |     /**
46 |      * `social_url` is used for matching Facebook Comments and Likes to the current page in the `:data-href="$store.social_url"` attribute
47 |      */
48 |     store.social_url = config.site_url + store.file.url;
49 |   }
50 |   next();
51 | });
52 | 
53 | export default store;
54 | 


--------------------------------------------------------------------------------
/src/templates/index.vue:
--------------------------------------------------------------------------------
 1 | <template lang="pug">
 2 |   div#app
 3 |     #cookieConsent(ref="cookieConsent")
 4 |       span This website is using cookies. 
 5 |       router-link(to="/privacy-policy").no-border More info
 6 |       a.cookieConsentOK(@click="enableTracking()") Got it!
 7 |     navigation
 8 |     div
 9 |       router-view
10 |     foot
11 | </template>
12 | 
13 | <script>
14 | import config from "config"
15 | import Vue from 'vue'
16 | 
17 | export default {
18 |   name: 'index',
19 |   methods: {
20 |     enableTracking () {
21 |       global.toggleTracking(true)
22 |     },
23 |   },
24 |   mounted() {
25 |     if(!this.$isServer && typeof localStorage !== 'undefined' && config.googleAnalyticsId) {
26 |       let consent = localStorage.getItem('no-cookie-consent')
27 |       window.cookieConsentEl = this.$refs['cookieConsent']
28 |       if(!consent) {
29 |         this.$refs['cookieConsent'].style.display = 'block'
30 |       }
31 | 
32 |       if(consent === 'true') {
33 |         window.allowCookies = true
34 |         this.$ga.enable()
35 |       } else if(consent === 'false') {
36 |         window.allowCookies = false
37 |         this.$ga.disable()
38 |       } else {
39 |         window.allowCookies = undefined
40 |       }
41 |     }
42 |     
43 |     
44 |   }
45 | };
46 | </script>
47 | 
48 | <style lang="stylus">
49 |   #cookieConsent {
50 |     background-color: rgba(20,20,20,0.8);
51 |     min-height: 26px;
52 |     color: white;
53 |     line-height: 26px;
54 |     padding: 12px 0 12px 30px;
55 |     font-size: 16px;
56 |     position: fixed;
57 |     bottom: 0;
58 |     left: 0;
59 |     right: 0;
60 |     z-index: 9999;
61 |     display: none;
62 |   }
63 |   #cookieConsent a {
64 |     color: #4B8EE7;
65 |     text-decoration: none;
66 |   }
67 |   #cookieConsent span {
68 |     padding: 5px 0;
69 |   }
70 |   #closeCookieConsent {
71 |     float: right;
72 |     display: inline-block;
73 |     cursor: pointer;
74 |     height: 20px;
75 |     width: 20px;
76 |     margin: -15px 0 0 0;
77 |     font-weight: bold;
78 |   }
79 |   #closeCookieConsent:hover {
80 |     color: #FFF;
81 |   }
82 |   #cookieConsent a.cookieConsentOK {
83 |     background-color: #fafafa;
84 |     color: #000;
85 |     display: inline-block;
86 |     border-radius: 5px;
87 |     padding: 5px 20px;
88 |     cursor: pointer;
89 |     float: right;
90 |     margin: 0 60px 0 10px;
91 |   }
92 |   #cookieConsent a.cookieConsentOK:hover {
93 |     background-color: #fafafa;
94 |   }
95 | </style>
96 | 


--------------------------------------------------------------------------------
/the-magic/boot/meta-tags.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * To save a lot of typing in the developer's templates, we set the default meta tag configuration for the root object
 3 |  * These properties can be overridden in subroutes
 4 |  */
 5 | 
 6 | import config from 'config';
 7 | 
 8 | export default {
 9 |   title: config.site_title,
10 |   link: [
11 |     { rel: 'alternate', type: 'application/rss+xml', title: `${config.site_url} > Feed`, href: `${config.site_url + '/feed.xml'}` }
12 |   ],
13 |   meta: [
14 |     {
15 |       name: "viewport",
16 |       content: "width=device-width, initial-scale=1"
17 |     },
18 |     { "data-vmid": 'url', name: "url", content: config.site_url },
19 |     { "data-vmid": 'identifier-URL', name: "identifier-URL", content: config.site_url },
20 |     { "data-vmid": 'og:url', name: "og:url", content: config.site_url },
21 |     { "data-vmid": 'owner', name: "owner", content: config.author },
22 |     { "data-vmid": "author", name: "author", content: config.author },
23 |     { "data-vmid": 'copyright', name: "copyright", content: config.author },
24 |     { "data-vmid": 'medium', name: "medium", content: "blog" },
25 |     { "data-vmid": 'robots', name: "robots", content: "index,follow" },
26 |     { "data-vmid": 'description', name: "description", content: config.description },
27 |     { "data-vmid": 'keywords', name: "keywords", content: config.keywords },
28 |     { "data-vmid": 'language', name: "language", content: config.language },
29 |     { "data-vmid": 'fb:app_id', property:"fb:app_id", content: config.facebook_id },
30 |     { "data-vmid": 'og:locale', property:"og:locale", content: config.locale },
31 |     { "data-vmid": 'og:site_name', property:"og:site_name", content: config.site_title },
32 |     { "data-vmid": 'og:title', property: "og:title", content: config.site_title },
33 |     { "data-vmid": 'og:description', property: "og:description", content: config.description },
34 |     { "data-vmid": 'og:image', property: "og:image", content: config.site_url + config.logo },
35 |     { "data-vmid": 'twitter:image', name: "twitter:image", content: config.site_url + config.logo },
36 |     { "data-vmid": 'twitter:card', name: "twitter:card", content: config.twitterCard },
37 |     { "data-vmid": 'twitter:creator', name: "twitter:creator", content: config.twitterCreator },
38 |     { "data-vmid": 'twitter:title', name: "twitter:title", content: config.site_title },
39 |     {
40 |       "data-vmid": 'twitter:description',
41 |       name: "twitter:description",
42 |       content: config.description
43 |     },
44 |     { "data-vmid": 'pagename', name: "pagename", content: config.site_title }
45 |   ]
46 | }


--------------------------------------------------------------------------------
/src/templates/page.vue:
--------------------------------------------------------------------------------
 1 | <template lang="pug">
 2 |   main.post-content.page
 3 |     header.post-header
 4 |       h1.post-title {{file.title}}
 5 |     div.post-body.post-body-and-feedback(v-html="file.html")
 6 | </template>
 7 | 
 8 | <script>
 9 | import config from 'config'
10 | import Vue from 'vue'
11 | export default {
12 |   name: 'page',
13 |   store: ["file", "users"],
14 | 
15 |   /**
16 |    * Async Data Example
17 |    * Server Side Rendering will wait for the promise to resolve before rendering the static html file. Thus the results of api calls can be rendered into the static html.
18 |    */
19 |   // asyncData({ store, route }) {
20 |   //   return new Promise((resolve, reject) => {
21 |   //     fetch('https://randomuser.me/api/', {
22 |   //       method: 'get'
23 |   //     })
24 |   //       .then(result => result.json())
25 |   //       .then(result => {
26 |   //         Vue.set(store, 'users', result.results)
27 |   //         resolve(result.results)
28 |   //       })
29 |   //       .catch(reject);
30 |   //   })
31 |   // },
32 | 
33 |   metaInfo() {
34 |     return this.file
35 |       ? {
36 |           title: this.file.title,
37 |           link: [
38 |             { rel: 'canonical', href: config.site_url + this.file.url }
39 |           ],
40 |           meta: [
41 |             { "data-vmid": "og:type", property: "og:type", content: "page" },
42 | 
43 |             { "data-vmid": "url", name: "url", content: config.site_url + this.file.url },
44 |             { "data-vmid": "identifier-URL", name: "identifier-URL", content: config.site_url + this.file.url },
45 |             { "data-vmid": "og:url", property: "og:url", content: config.site_url + this.file.url },
46 |             {
47 |               "data-vmid": "og:description", property: "og:description",
48 |               content: this.file.description || config.description
49 |             },
50 |             {
51 |               "data-vmid": "twitter:description", name: "twitter:description",
52 |               content: this.file.description || config.description
53 |             },
54 |             {
55 |               "data-vmid": "description", name: "description",
56 |               content: this.file.description || config.description
57 |             },
58 | 
59 |             { "data-vmid": "twitter:title", name: "twitter:title", content: this.file.title },
60 |             { "data-vmid": "og:title", property: "og:title", content: this.file.title },
61 |             { "data-vmid": "pagename", name: "pagename", content: this.file.title },
62 |             { "data-vmid": "author", name: "author", content: this.file.author || config.author }
63 |           ]
64 |         }
65 |       : {};
66 |   }
67 | };
68 | </script>
69 | 


--------------------------------------------------------------------------------
/the-magic/boot/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Client Side SSR file
 3 |  * Here we make the router, store, the site config, and the app global variables
 4 |  */
 5 | 
 6 | import Vue from "vue";
 7 | import path from 'path';
 8 | import store from "./store-reconciliation";
 9 | import router from "./router";
10 | import config from "../../site.config.js";
11 | 
12 | import meta_tags from './meta-tags.js';
13 | 
14 | Vue.config.productionTip = false;
15 | 
16 | /**
17 |  * Make our store, router, and site.config.js (`config`) global so it can be used instantly in any of our templates, js files or components
18 |  */
19 | global.store = store
20 | global.router = router
21 | global.config = config
22 | 
23 | /**
24 |  * This is our config.folderStructure.css entry file in `/site.config.js`
25 |  */
26 | require(main_css);
27 | 
28 | /**
29 |  * This is our `config.folderStructure.vue` entry file in `/site.config.js`
30 |  */
31 | let Root = require(main_vue).default;
32 | 
33 | Root = Object.assign({}, {
34 | 
35 |   /**
36 |    * We assign our default meta tags in `./meta-tags.js` to our root component
37 |    */
38 |   metaInfo() {
39 |     return meta_tags
40 |   },
41 | }, Root);
42 | 
43 | /**
44 |  * Here we construct the root component and connect the Vue-Stash Store and Vue-Router
45 |  */
46 | global.app = new Vue(
47 |   Object.assign(
48 |     {
49 |       router: global.router,
50 |       data: { store: global.store },
51 |     },
52 |     Root
53 |   )
54 | );
55 | 
56 | /**
57 |  * This is our config.folderStructure.js entry file from `/site.config.js`
58 |  */
59 | require(main_js);
60 | 
61 | 
62 | if (Vue.prototype.$isServer) {
63 |   /**
64 |    * If we are rendering the component on the server we simply want to mount the root component without loading any server-side scripts
65 |    */
66 |   app.$mount("#app");
67 | } else {
68 | 
69 |   /**
70 |    * If we are rendering the root component on the client, we want to first complete any ajax requests and include their data in our rendered templates
71 |    */
72 |   require("./async-data");
73 | 
74 |   /**
75 |    * If the user has set `googleAnalyticsId` in `/site.config.js` and we are rendering client-side we want to load our `./analytics.js` script
76 |    */
77 |   if(global.config.googleAnalyticsId) {
78 |     require("./analytics.js")
79 |   }
80 |   
81 |   /**
82 |    * If the user has set a `facebook_id` in `/site.config.js` then we want to initialize facebook comments and likes
83 |    * The `facebook_id` is the App ID you would normally use in the meta tag
84 |    * ```html
85 |    * <meta property="fb:app_id" content="[[facebook_id]]"/>
86 |    * ````
87 |    */
88 |   if(global.config.facebook_id) {
89 |     require("./facebook-social.js")
90 |   }
91 | 
92 |   app.$mount("#app");
93 | }
94 | 
95 | /**
96 |  * It's important that we export the our root component, router, and store 
97 |  */
98 | export default { app, router, store };
99 | 


--------------------------------------------------------------------------------
/the-magic/build/setup-dev-server.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Retrieved from 
 3 |  * https://github.com/vuejs/vue-hackernews-2.0/blob/master/build/setup-dev-server.js
 4 |  * By Evan You
 5 |  */
 6 | 
 7 | const fs = require('fs')
 8 | const path = require('path')
 9 | const MFS = require('memory-fs')
10 | const webpack = require('webpack')
11 | const chokidar = require('chokidar')
12 | const clientConfig = require('./webpack.client.config')
13 | const serverConfig = require('./webpack.server.config')
14 | 
15 | const readFile = (fs, file) => {
16 |   try {
17 |     return fs.readFileSync(path.join(clientConfig.output.path, file), 'utf-8')
18 |   } catch (e) {}
19 | }
20 | 
21 | module.exports = function setupDevServer (app, templatePath, cb) {
22 |   let bundle
23 |   let template
24 |   let clientManifest
25 | 
26 |   let ready
27 |   const readyPromise = new Promise(r => { ready = r })
28 |   const update = () => {
29 |     if (bundle && clientManifest) {
30 |       ready()
31 |       cb(bundle, {
32 |         template,
33 |         clientManifest
34 |       })
35 |     }
36 |   }
37 | 
38 |   // read template from disk and watch
39 |   template = fs.readFileSync(templatePath, 'utf-8')
40 |   chokidar.watch(templatePath).on('change', () => {
41 |     template = fs.readFileSync(templatePath, 'utf-8')
42 |     console.log('index.html template updated.')
43 |     update()
44 |   })
45 | 
46 |   // modify client config to work with hot middleware
47 |   clientConfig.entry.app = ['webpack-hot-middleware/client', clientConfig.entry.app]
48 |   clientConfig.output.filename = '[name].js'
49 |   clientConfig.plugins.push(
50 |     new webpack.HotModuleReplacementPlugin(),
51 |     new webpack.NoEmitOnErrorsPlugin()
52 |   )
53 | 
54 |   // dev middleware
55 |   const clientCompiler = webpack(clientConfig)
56 |   const devMiddleware = require('webpack-dev-middleware')(clientCompiler, {
57 |     publicPath: clientConfig.output.publicPath,
58 |     noInfo: true
59 |   })
60 |   app.use(devMiddleware)
61 |   clientCompiler.plugin('done', stats => {
62 |     stats = stats.toJson()
63 |     stats.errors.forEach(err => console.error(err))
64 |     stats.warnings.forEach(err => console.warn(err))
65 |     if (stats.errors.length) return
66 |     clientManifest = JSON.parse(readFile(
67 |       devMiddleware.fileSystem,
68 |       'vue-ssr-client-manifest.json'
69 |     ))
70 |     update()
71 |   })
72 | 
73 |   // hot middleware
74 |   app.use(require('webpack-hot-middleware')(clientCompiler, { heartbeat: 5000 }))
75 | 
76 |   // watch and update server renderer
77 |   const serverCompiler = webpack(serverConfig)
78 |   const mfs = new MFS()
79 |   serverCompiler.outputFileSystem = mfs
80 |   serverCompiler.watch({}, (err, stats) => {
81 |     if (err) throw err
82 |     stats = stats.toJson()
83 |     if (stats.errors.length) return
84 | 
85 |     // read bundle generated by vue-ssr-webpack-plugin
86 |     bundle = JSON.parse(readFile(mfs, 'vue-ssr-server-bundle.json'))
87 |     update()
88 |   })
89 | 
90 |   return readyPromise
91 | }


--------------------------------------------------------------------------------
/the-magic/boot/router.js:
--------------------------------------------------------------------------------
 1 | import Vue from"vue";
 2 | import Meta from "vue-meta";
 3 | import VueRouter from 'vue-router'
 4 | import config from "config";
 5 | import camelCase from "lodash.camelcase";
 6 | 
 7 | /**
 8 |  * `the-magic/build/gulpfile.js` will automatically inject `.vue` files located in the specified `components` and `partials` folder paths (See `/site.config.js`) into this `components` constant between the comments:
 9 |  * // globalize vue components
10 |  comment: Vue.component('comment', require("../../src/partials/comment.vue").default),
11 |  foot: Vue.component('foot', require("../../src/partials/foot.vue").default),
12 |  navigation: Vue.component('navigation', require("../../src/partials/navigation.vue").default),
13 |  home: Vue.component('home', require("../../src/templates/home.vue").default),
14 |  missing: Vue.component('missing', require("../../src/templates/missing.vue").default),
15 |  page: Vue.component('page', require("../../src/templates/page.vue").default),
16 |  post: Vue.component('post', require("../../src/templates/post.vue").default),
17 |  // end globalize vue components
18 |  * This makes our components available globally under the camelCase version of the file-name (without the extension)
19 |  */
20 | const components = {
21 |   // globalize vue components
22 |   comment: Vue.component('comment', require("../../src/partials/comment.vue").default),
23 |   foot: Vue.component('foot', require("../../src/partials/foot.vue").default),
24 |   navigation: Vue.component('navigation', require("../../src/partials/navigation.vue").default),
25 |   home: Vue.component('home', require("../../src/templates/home.vue").default),
26 |   missing: Vue.component('missing', require("../../src/templates/missing.vue").default),
27 |   page: Vue.component('page', require("../../src/templates/page.vue").default),
28 |   post: Vue.component('post', require("../../src/templates/post.vue").default),
29 |   // end globalize vue components
30 | };
31 | 
32 | /**
33 |  * Takes the routes and their matching `string` component names in `/site.config.js`` and replaces with string with the component using the same name
34 |  */
35 | const routes = config.routes
36 |   .map(route => {
37 |     route.component = camelCase(route.component);
38 |     return components[route.component]
39 |       ? Object.assign({}, route, { component: components[route.component] })
40 |       : null;
41 |   })
42 |   .filter(a => a);
43 | 
44 | Vue.use(Meta, {
45 |   tagIDKeyName: 'data-vmid'
46 | });
47 | Vue.use(VueRouter);
48 | 
49 | const router = new VueRouter({
50 |   mode: "history",
51 |   hashbang: false,
52 |   routes,
53 |   scrollBehavior (to, from, savedPosition) {
54 |     return new Promise((resolve, reject) => {
55 | 
56 |       /**
57 |        * Here is where you determine scroll position for the page you navigate to
58 |        * We are returning the scroll position to the top of the page between scrolls
59 |        */
60 |       resolve({x: 0, y: 0})
61 |     })    
62 |   }
63 | });
64 | 
65 | export default router;
66 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-static",
 3 |   "description": "A static site generator in Vue.js",
 4 |   "version": "0.0.0",
 5 |   "homepage": "",
 6 |   "main": "server",
 7 |   "keywords": [
 8 |     "Vue.js",
 9 |     "static-site-generator"
10 |   ],
11 |   "author": {
12 |     "name": "Jon Paul Miles",
13 |     "email": "codingfriend1@gmail.com"
14 |   },
15 |   "contributors": [],
16 |   "bugs": {},
17 |   "directories": {
18 |     "lib": "server"
19 |   },
20 |   "engines": {
21 |     "node": ">=7.6.0",
22 |     "yarn": ">= 0.18.0"
23 |   },
24 |   "scripts": {
25 |     "serve": "http-server --silent -p8080 dist",
26 |     "gulp": "gulp --gulpfile the-magic/build/gulpfile.js",
27 |     "optimize": "node the-magic/build/optimize-images.js",
28 |     "time": "node the-magic/build/get-time.js",
29 |     "start": "npm run gulp && node the-magic/build/server",
30 |     "build:client": "cross-env NODE_ENV=production webpack --config the-magic/build/webpack.client.config.js --no-info --hide-modules",
31 |     "build:server": "cross-env NODE_ENV=production webpack --config the-magic/build/webpack.server.config.js --no-info --hide-modules",
32 |     "build": "rimraf dist && npm run gulp && npm run build:client && npm run build:server && cross-env NODE_ENV=production node the-magic/build/build.js"
33 |   },
34 |   "dependencies": {
35 |     "compression": "^1.7.4",
36 |     "express": "^4.17.1",
37 |     "gray-matter": "^4.0.2",
38 |     "lodash.camelcase": "^4.3.0",
39 |     "lodash.throttle": "^4.1.1",
40 |     "node-fetch": "^2.6.0",
41 |     "route-cache": "^0.4.4",
42 |     "serve-favicon": "^2.5.0",
43 |     "vue": "^2.6.10",
44 |     "vue-analytics": "^5.17.0",
45 |     "vue-meta": "git+https://github.com/codingfriend1/vue-meta.git#dev",
46 |     "vue-router": "^3.0.6",
47 |     "vue-server-renderer": "^2.6.10",
48 |     "vue-stash": "^2.0.1-beta"
49 |   },
50 |   "devDependencies": {
51 |     "colors": "^1.3.3",
52 |     "compression-webpack-plugin": "^3.0.0",
53 |     "copy-webpack-plugin": "^5.0.3",
54 |     "cross-env": "^5.2.0",
55 |     "css-loader": "^3.0.0",
56 |     "file-loader": "^4.0.0",
57 |     "friendly-errors-webpack-plugin": "^1.7.0",
58 |     "gulp": "^4.0.2",
59 |     "gulp-inject": "^5.0.5",
60 |     "http-server": "^0.11.1",
61 |     "imagemin": "^6.1.0",
62 |     "imagemin-jpeg-recompress": "^6.0.0",
63 |     "imagemin-keep-folder": "^5.3.2",
64 |     "imagemin-optipng": "^7.0.0",
65 |     "imagemin-webp": "^5.1.0",
66 |     "json-loader": "^0.5.7",
67 |     "klaw": "^3.0.0",
68 |     "markdown-it": "^8.4.2",
69 |     "markdown-it-attrs": "^2.4.1",
70 |     "markdown-it-gallery": "^0.1.6",
71 |     "markdown-it-modify-token": "^1.0.2",
72 |     "mini-css-extract-plugin": "^0.7.0",
73 |     "npm-run-all": "^4.1.5",
74 |     "progress-bar-webpack-plugin": "^1.12.1",
75 |     "pug": "^2.0.4",
76 |     "pug-plain-loader": "^1.0.0",
77 |     "raw-loader": "^3.0.0",
78 |     "rimraf": "^2.6.3",
79 |     "stylus": "^0.54.5",
80 |     "stylus-loader": "^3.0.2",
81 |     "url-loader": "^2.0.1",
82 |     "vue-loader": "15.7.0",
83 |     "vue-template-compiler": "^2.6.10",
84 |     "webpack": "^4.35.0",
85 |     "webpack-cli": "^3.3.5",
86 |     "webpack-dev-middleware": "^3.7.0",
87 |     "webpack-hot-middleware": "^2.25.0",
88 |     "webpack-merge": "^4.2.1",
89 |     "webpack-node-externals": "^1.7.2"
90 |   }
91 | }
92 | 


--------------------------------------------------------------------------------
/markdown/articles/markdown-tutorial.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: 'Markdown Tutorial'
  3 | thumbnail: /uploads/image.jpg
  4 | draft: false
  5 | description: "A quick and simple markdown tutorial"
  6 | ---
  7 | 
  8 | Guide from [Markdown syntax guide by Atlassian](https://confluence.atlassian.com/bitbucketserver/markdown-syntax-guide-776639995.html)
  9 | 
 10 | ### Headings
 11 | 
 12 | ```md
 13 | # This is an H1
 14 | ## This is an H2
 15 | ###### This is an H6
 16 | 
 17 | This is also an H1
 18 | ==================
 19 | 
 20 | This is also an H2
 21 | ------------------
 22 | ```
 23 | 
 24 | ### Paragraphs
 25 | Paragraphs are separated by empty lines. To create a new paragraph, press <return> twice.
 26 | 
 27 | ```md
 28 | Paragraph 1
 29 | 
 30 | Paragraph 2
 31 | ```
 32 | 
 33 | ### Character styles
 34 | 
 35 | ```md
 36 | *Italic characters* 
 37 | _Italic characters_
 38 | **bold characters**
 39 | __bold characters__
 40 | ~~strikethrough text~~
 41 | ```
 42 | 
 43 | ### Unordered list
 44 | 
 45 | ```md
 46 | *  Item 1
 47 | *  Item 2
 48 | *  Item 3
 49 |     *  Item 3a
 50 |     *  Item 3b
 51 |     *  Item 3c
 52 | Ordered list
 53 | 1.  Step 1
 54 | 2.  Step 2
 55 | 3.  Step 3
 56 |     1.  Step 3.1
 57 |     2.  Step 3.2
 58 |     3.  Step 3.3
 59 | List in list
 60 | 1.  Step 1
 61 | 2.  Step 2
 62 | 3.  Step 3
 63 |     *  Item 3a
 64 |   *  Item 3b
 65 |   *  Item 3c
 66 | ```
 67 | 
 68 | ### Quotes or citations
 69 | Introducing my quote:
 70 | 
 71 | ```
 72 | > Neque porro quisquam est qui 
 73 | > dolorem ipsum quia dolor sit amet, 
 74 | > consectetur, adipisci velit...
 75 | ```
 76 | 
 77 | ### Inline code characters
 78 | 
 79 | ```md
 80 | Use the backtick to refer to a `function()`.
 81 |  
 82 | There is a literal ``backtick (`)`` here.
 83 | ```
 84 | 
 85 | ### Code blocks
 86 | 
 87 | ````md
 88 | Indent every line of the block by at least 4 spaces.
 89 | 
 90 | This is a normal paragraph:
 91 | 
 92 |     This is a code block.
 93 |     With multiple lines.
 94 | 
 95 | Alternatively, you can use 3 backtick quote marks before and after the block, like this:
 96 | 
 97 | ```
 98 | This is a code block
 99 | ```
100 | 
101 | To add syntax highlighting to a code block, add the name of the language immediately
102 | after the backticks: 
103 | 
104 | ```javascript
105 | var oldUnload = window.onbeforeunload;
106 | window.onbeforeunload = function() {
107 |     saveCoverage();
108 |     if (oldUnload) {
109 |         return oldUnload.apply(this, arguments);
110 |     }
111 | };
112 | ```
113 | ````
114 | 
115 | Within a code block, ampersands (&) and angle brackets (< and >) are automatically converted into HTML entities.
116 | 
117 | ### Links to external websites
118 | 
119 | ```md
120 | This is [an example](http://www.example.com/) inline link.
121 | 
122 | [This link](http://example.com/ "Title") has a title attribute.
123 | 
124 | Links are also auto-detected in text: http://example.com/
125 | ```
126 | 
127 | ### CSS classes {.text-center}
128 | 
129 | This is a paragraph with a class of "text-center" added
130 | {.text-center}
131 | 
132 | ```md
133 | ### This is a centered heading {.text-center}
134 | 
135 | This is a paragraph with a class of "text-center" added
136 | {.text-center}
137 | ```
138 | 
139 | ---
140 | For more information visit:
141 | 
142 | [www.markdowntutorial.com](https://www.markdowntutorial.com/)


--------------------------------------------------------------------------------
/the-magic/boot/entry-server.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Runs on server only
 3 |  * When our `/the-magic/build/build.js` or `/the-magic/build/server.js` attempt to render our Vue and Markdown files into raw HTML files at `renderer.renderToString()` for better SEO, it critically depends on this file to determine which files to render for a given route, to load all necessary subcomponents for that route and render each, and add any data from our server side AJAX requests that need to be embedded in the raw HTML file. If the store is modified, we also need to deliver a copy of that state to the renderer so the client will initialize it's store in the same condition.
 4 |  */
 5 | 
 6 | import Vue from "vue";
 7 | import path from "path";
 8 | import colors from 'colors';
 9 | 
10 | /**
11 |  * For using fetch for async data server-side
12 |  */
13 | global.fetch = require("node-fetch")
14 | 
15 | export default context => {
16 | 
17 |   /**
18 |    * It's ok to return a promise to the renderer
19 |    */
20 |   return new Promise((resolve, reject) => {
21 | 
22 |     let { store, app, router } = require(`./index.js`).default;
23 | 
24 |     /**
25 |      * Initialize Vue-Meta
26 |      */
27 |     const meta = app.$meta();
28 | 
29 |     Object.assign(store, context);
30 | 
31 |     /**
32 |      * The `context` argument provides the url the user is attempting to access in the browser with `context.file.url`. We tell the router to load this route and all it's necessary subcomponents
33 |      */
34 |     router.push(context.file.url);
35 |     
36 |     /**
37 |      * We wait for the router to finish loading all necessary components to this route
38 |      */
39 |     router.onReady(() => {
40 |       let matchedComponents = router.getMatchedComponents();
41 | 
42 |       // no matched routes
43 |       if (!matchedComponents.length) {
44 |         return reject(colors.red(`${context.file.url}`) + colors.grey(` from `) + colors.red(context.file.path.replace(__dirname, '')) + colors.grey(` is not routed to any vue templates. Match a vue template to this url in the ` + colors.green(`site.config.js`) + ` routes.\n\r`)
45 |         );
46 |       }
47 | 
48 |       /**
49 |        * For every subcomponent for this route, we check if any of them require AJAX requests to be run and completed before we render. This is helpful in the case that you want to fetch some data at the moment the user or Search Engine Bot load the page and embed the results in the rendered HTML file
50 |        * We provide each `asyncData()` function the store and current route in case that information is needed for making the AJAX request
51 |        */
52 |       Promise.all(
53 |         matchedComponents.map(Component => {
54 |           if (Component.options.asyncData) {
55 | 
56 |             // call `asyncData()` on all matched route components
57 |             return Component.options.asyncData({
58 |               store,
59 |               route: router.currentRoute
60 |             });
61 |           }
62 |         })
63 |       )
64 |         .then(() => {
65 |           /**
66 |            * AJAX requests or loading the components may have modified our server-side store. It's critical that the server rendering fully matches the client-side rendering on the each's initial render and to have matching pages the store needs to be in the same state on the client and server. Therefore, since our basic store may have been modified by our server-side rendering process, we need to provide the modifications to the context so the client can initialize it's store with the state the server renderer left it in.
67 |            */
68 |           context.state = store;
69 | 
70 |           /**
71 |            * We also need to provide our meta data rendered by Vue-Meta to our context object so we can inject these tags into our rendered HTML
72 |            */
73 |           context.meta = meta;
74 |           resolve(app);
75 |         })
76 |         .catch(reject);
77 |     });
78 |   });
79 | };
80 | 


--------------------------------------------------------------------------------
/site.config.js:
--------------------------------------------------------------------------------
  1 | const site_url = "https://yoursite.netlify.com";
  2 | 
  3 | module.exports = {
  4 |   site_title: `Your site title`,
  5 |   site_url,
  6 |   description: "Your site description",
  7 |   author: "You",
  8 |   keywords: "",
  9 |   medium: "blog",
 10 |   language: "English",
 11 |   locale: "en_US",
 12 |   logo: "/uploads/logo.png",
 13 | 
 14 |   twitterCard: "summary_large_image",
 15 |   twitterCreator: "@your_twitter_username",
 16 | 
 17 |   /**
 18 |    * If you set a `facebook_id` then we will initialize facebook comments and likes
 19 |    * The `facebook_id` is the App ID you would normally use in the meta tag
 20 |    * ```html
 21 |    * <meta property="fb:app_id" content="[[facebook_id]]"/>
 22 |    * ````
 23 |    */
 24 |   facebook_id: null,
 25 | 
 26 |   
 27 |   googleAnalyticsId: "",
 28 |   mailChimpUrl: "",
 29 | 
 30 |   /**
 31 |    * Tell us where your entry files are located relative to this repository root directory
 32 |    */
 33 |   folderStructure: {
 34 | 
 35 |     /**
 36 |      * Show us where your lead js file is that imports all other scripts
 37 |      * @type {String}
 38 |      */
 39 |     js: 'src/js/index.js',
 40 | 
 41 |     /**
 42 |      * Lead stylus file that imports all other stylesheets
 43 |      * @type {String}
 44 |      */
 45 |     css: 'src/css/index.styl',
 46 | 
 47 |     /**
 48 |      * Tell us where your root vue component is
 49 |      * @type {String}
 50 |      */
 51 |     vue: 'src/templates/index.vue',
 52 | 
 53 |     /**
 54 |      * Tell us where your main html template is
 55 |      * @type {String}
 56 |      */
 57 |     html: 'src/index.html',
 58 | 
 59 |     /**
 60 |      * Tell us what folder we should search in for your larger vue components so we can globalize them
 61 |      * @type {String}
 62 |      */
 63 |     components: 'src',
 64 | 
 65 |     /**
 66 |      * Tells us what folder your smaller vue components are in
 67 |      * @type {String}
 68 |      */
 69 |     partials: 'src/partials',
 70 | 
 71 |     /**
 72 |      * Show us what folder we should copy your static assets from
 73 |      * This is also the folder that we will save optimized images to
 74 |      * @type {String}
 75 |      */
 76 |     static: 'src/static',
 77 | 
 78 |     /**
 79 |      * Name of the folder where you will keep fullsized images to be optimized by `npm run optimize`
 80 |      * @type {String}
 81 |      */
 82 |     images: 'unoptimized-images',
 83 | 
 84 |     /**
 85 |      * Show us what folder you want us to save your generated files in
 86 |      * @type {String}
 87 |      */
 88 |     output: 'dist',
 89 | 
 90 |     /**
 91 |      * Tells us where your markdown files are
 92 |      * @type {String}
 93 |      */
 94 |     markdown: 'markdown'
 95 |   },
 96 | 
 97 |   /**
 98 |    * For each route, list the url and the template that should be used to render that route
 99 |    *
100 |    * Write the name of the .vue file found in your templates folder as the component string
101 |    *
102 |    * The path will attempt to match the natural folder structure of the markdown folder unless you specifically override the path in the url metadata of the markdown file
103 |    */
104 |   routes: [
105 |     {
106 |       path: "/",
107 |       component: "home"
108 |     },
109 |     {
110 |       path: "/404",
111 |       component: "missing"
112 |     },
113 |     {
114 |       path: "/:page?",
115 |       component: "page"
116 |     },
117 |     {
118 |       path: "/articles/:article?",
119 |       component: "post"
120 |     },
121 |     { path: "*", redirect: "/404" }
122 |   ],
123 | 
124 |   /**
125 |    * Data that will be available across all your templates
126 |    */
127 |   store: {
128 |     file: {},
129 |     files: [],
130 |     social_url: site_url,
131 |     commentsEnabled: false
132 |   },
133 | 
134 |   /**
135 |    * Based on `markdown-it-gallery`
136 |    */
137 |   markdown_gallery: {
138 |     galleryClass: 'gallery',
139 |     galleryTag: 'div',
140 |     imgClass: 'gallery-image',
141 |     wrapImagesInLinks: true,
142 |     linkClass: 'gallery-link',
143 |     linkTarget: '_blank',
144 |     imgTokenType: 'image',
145 |     linkTokenType: 'link',
146 |     imageFilterFn: token => /galleries\//.test(token.attrGet('src')),
147 |     // imageSrcFn: token => token.attrGet('src').replace(/(\.\w+$)/, '$1'),
148 |     // linkHrefFn: token => token.attrGet('src').replace(/(\.\w+$)/, '$1'),
149 |   }
150 | };
151 | 


--------------------------------------------------------------------------------
/the-magic/boot/facebook-social.js:
--------------------------------------------------------------------------------
  1 | import Vue from "vue";
  2 | import config from "config";
  3 | 
  4 | /**
  5 |  * We only want to enable facebook comments if we are client-side and we haven't already initialized this script
  6 |  */
  7 | if (!Vue.prototype.$isServer && !window.fbAsyncInit) {
  8 | 
  9 |     /**
 10 |      * If you run `enableComments()` in your code it will download the remote facebook script to enable facebook comments and likes on your pages
 11 |      */
 12 |     window.enableComments = function() {
 13 |         (function(d, s, id) {
 14 |             var js,
 15 |                 fjs = d.getElementsByTagName(s)[0];
 16 |             js = d.createElement(s);
 17 |             js.id = id;
 18 |             js.src = "https://connect.facebook.net/en_US/all.js";
 19 | 
 20 |             if (d.getElementById(id)) {
 21 |                 //if <script id="facebook-jssdk"> exists
 22 |                 delete window.FB;
 23 |                 fjs.parentNode.replaceChild(js, fjs);
 24 |             } else {
 25 |                 fjs.parentNode.insertBefore(js, fjs);
 26 |             }
 27 |         })(document, "script", "facebook-jssdk");
 28 | 
 29 |         window.fbAsyncInit = function() {
 30 |             if (typeof FB != "undefined" && FB != null) {
 31 |                 FB.init({
 32 |                     appId: config.facebook_id, //App ID from the app dashboard
 33 |                     status: true, //Check Facebook Login status
 34 |                     xfbml: true //Look for social plugins on the page
 35 |                 });
 36 | 
 37 |                 /**
 38 |                  * If Google Analytics is loaded, we want to track if the user is logged in, if they liked/unliked, commented on, or shared a post
 39 |                  */
 40 |                 if(typeof ga !== 'undefined') {
 41 |                     // //Logged In Users
 42 |                     FB.getLoginStatus(function(response) {
 43 |                         if (response.status !== "unknown") {
 44 |                             ga("set", "dimension2", "Logged In");
 45 |                         }
 46 |                     });
 47 |                     //Facebook Likes
 48 |                     FB.Event.subscribe("edge.create", function(href, widget) {
 49 |                         ga("send", {
 50 |                             hitType: "social",
 51 |                             socialNetwork: "Facebook",
 52 |                             socialAction: "Like",
 53 |                             socialTarget: href,
 54 |                             page: document.title.replace(
 55 |                                 " | ",
 56 |                                 config.site_title,
 57 |                                 ""
 58 |                             )
 59 |                         });
 60 |                     });
 61 |                     //Facebook Unlikes
 62 |                     FB.Event.subscribe("edge.remove", function(href, widget) {
 63 |                         ga("send", {
 64 |                             hitType: "social",
 65 |                             socialNetwork: "Facebook",
 66 |                             socialAction: "Unlike",
 67 |                             socialTarget: href,
 68 |                             page: document.title.replace(
 69 |                                 " | ",
 70 |                                 config.site_title,
 71 |                                 ""
 72 |                             )
 73 |                         });
 74 |                     });
 75 |                     //Facebook Send/Share
 76 |                     FB.Event.subscribe("message.send", function(href, widget) {
 77 |                         ga("send", {
 78 |                             hitType: "social",
 79 |                             socialNetwork: "Facebook",
 80 |                             socialAction: "Send",
 81 |                             socialTarget: href,
 82 |                             page: document.title.replace(
 83 |                                 " | ",
 84 |                                 config.site_title,
 85 |                                 ""
 86 |                             )
 87 |                         });
 88 |                     });
 89 |                     //Facebook Comments
 90 |                     FB.Event.subscribe("comment.create", function(href, widget) {
 91 |                         ga("send", {
 92 |                             hitType: "social",
 93 |                             socialNetwork: "Facebook",
 94 |                             socialAction: "Comment",
 95 |                             socialTarget: href,
 96 |                             page: document.title.replace(
 97 |                                 " | ",
 98 |                                 config.site_title,
 99 |                                 ""
100 |                             )
101 |                         });
102 |                     });
103 |                 }
104 |             }
105 |         };
106 |     }
107 | }
108 | 


--------------------------------------------------------------------------------
/the-magic/boot/analytics.js:
--------------------------------------------------------------------------------
  1 | import Vue from "vue";
  2 | import config from "config";
  3 | import router from "./router";
  4 | import throttle from 'lodash.throttle';
  5 | 
  6 | if (!Vue.prototype.$isServer && config.googleAnalyticsId) {
  7 | 
  8 |   const BOTTOM_READING_HEIGHT = 100
  9 |   const reader_scroll_percent = 90
 10 |   global.furthest_scroll = 1
 11 |   const debug = false
 12 |   let already_read = false
 13 |   let windowHeight = window.innerHeight
 14 | 
 15 |   /**
 16 |    * Get scroll position of element
 17 |    * @param {object} el DOM element
 18 |    * @return {number} Scroll position of DOM element
 19 |    */
 20 |   function getOffset( el ) {
 21 |     var _x = 0;
 22 |     var _y = 0;
 23 |     while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
 24 |       _x += el.offsetLeft - el.scrollLeft;
 25 |       _y += el.offsetTop - el.scrollTop;
 26 |       el = el.offsetParent;
 27 |     }
 28 |     return _y;
 29 |   }
 30 | 
 31 |   /**
 32 |    * Get relative scroll position to the main content of your articles in percent form
 33 |    * @return {number} A percent of how much of the article has been read
 34 |    */
 35 |   window.getScrollPosition = function() {
 36 |     if(!window.postBodyEl) { return 0 }
 37 | 
 38 |     let element_position_on_page = getOffset(window.postBodyEl)
 39 |     let relative_scroll_position = windowHeight + window.pageYOffset - element_position_on_page - BOTTOM_READING_HEIGHT;
 40 |     
 41 |     let contentHeight = postBodyEl.clientHeight
 42 | 
 43 |     return Math.round((relative_scroll_position / contentHeight) * 100)
 44 |   }
 45 | 
 46 |   /**
 47 |    * Notify Google Analytics that the visitor has read the page
 48 |    */
 49 |   global.notify_read = function() {
 50 |     already_read = true
 51 |     if(debug) {
 52 |       alert(`Thanks for reading ${window.store.file.title}, Scroll: ${global.furthest_scroll}%`)
 53 |     } else {
 54 |       Vue.prototype.$ga.set('metric2', 1);
 55 |       Vue.prototype.$ga.event('Interest', 'Reads', window.store.file.title)
 56 |     }
 57 |   }
 58 | 
 59 |   /**
 60 |    * Measure the visitor's scroll position and see if it covered most of the article content
 61 |    */
 62 |   global.trackScrolling = throttle(() => {
 63 |     global.furthest_scroll = Math.max(getScrollPosition(), global.furthest_scroll)
 64 | 
 65 |     let reader = global.furthest_scroll > reader_scroll_percent
 66 | 
 67 |     if(reader && !already_read) {
 68 |       notify_read()
 69 |       window.removeEventListener("scroll", trackScrolling)
 70 |     }
 71 |   }, 400)
 72 | 
 73 |   /**
 74 |    * Reset trackScrolling
 75 |    */
 76 |   function after_navigating() {
 77 |     already_read = false
 78 |     global.furthest_scroll = 1
 79 |     window.removeEventListener("scroll", trackScrolling)
 80 |     if(window.allowCookies) {
 81 |       window.addEventListener("scroll", trackScrolling);
 82 |     }
 83 |     
 84 |   }
 85 | 
 86 |   router.afterEach(after_navigating);
 87 | 
 88 | 
 89 |   const VueAnalytics = require("vue-analytics").default;
 90 |   const disableStr = "ga-disable-" + config.googleAnalyticsId;
 91 |   Vue.use(VueAnalytics, {
 92 |     id: config.googleAnalyticsId,
 93 |     router,
 94 |     disabled: localStorage.getItem('no-cookie-consent') !== 'true',
 95 |     autoTracking: {
 96 |       pageviewTemplate(route) {
 97 |         let file = store.files.find(file => {
 98 |           return file.url === route.path;
 99 |         });
100 |         return {
101 |           page: route.path,
102 |           title: file ? file.title : "home",
103 |           location: window.location.href
104 |         };
105 |       },
106 |       shouldRouterUpdate(to, from) {
107 |         return to.path !== from.path;
108 |       }
109 |     },
110 |     beforeFirstHit () {
111 |       after_navigating()
112 |     }
113 |   });
114 |   
115 |   // Opt-out function
116 |   global.toggleTracking = function toggleTracking(bool) {
117 | 
118 |     if(!config.googleAnalyticsId) { return false; }
119 | 
120 |     if(typeof window.allowCookies === 'undefined') {
121 |       window.allowCookies = true
122 |     }
123 | 
124 |     window.allowCookies = typeof bool === 'boolean' ? bool : !window.allowCookies
125 | 
126 |     localStorage.setItem('no-cookie-consent', window.allowCookies)
127 | 
128 |     if(cookieConsentEl) {
129 |       cookieConsentEl.style.display = 'none'
130 |     }
131 |     
132 |     if(window.allowCookies) {
133 |       Vue.prototype.$ga.enable()
134 |       if(typeof bool !== 'boolean') {
135 |         alert(`You have re-enabled Google Analytics data collection. This data will be collected.`);
136 |       }
137 |     } else {
138 |       Vue.prototype.$ga.disable()
139 |       alert(
140 |         "Google Analytics data will no longer be collected on you on this site."
141 |       );
142 | 
143 |       // Delete all existing cookies
144 |       document.cookie
145 |         .split(";")
146 |         .forEach(function(c) { 
147 |           document.cookie = c
148 |             .replace(/^ +/, "")
149 |             .replace(/=.*/, "=;expires=" + new Date()
150 |             .toUTCString() + 
151 |             ";path=/"); 
152 |         });
153 |     }
154 |   };
155 | }
156 | 


--------------------------------------------------------------------------------
/the-magic/build/webpack.base.config.js:
--------------------------------------------------------------------------------
  1 | require('colors')
  2 | const path = require('path')
  3 | const webpack = require('webpack')
  4 | const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
  5 | const MiniCssExtractPlugin = require('mini-css-extract-plugin')
  6 | const CopyWebpackPlugin = require("copy-webpack-plugin")
  7 | const ProgressBarPlugin = require("progress-bar-webpack-plugin")
  8 | const CompressionWebpackPlugin = require("compression-webpack-plugin")
  9 | const { VueLoaderPlugin } = require('vue-loader')
 10 | const folders = require('./folders.js')
 11 | const NODE_ENV = process.env.NODE_ENV || 'development'
 12 | const isProd = NODE_ENV === 'production'
 13 | 
 14 | module.exports = {
 15 |   stats: "errors-only",
 16 |   mode: NODE_ENV,
 17 |   devtool: isProd
 18 |     ? '#source-map'
 19 |     : '#cheap-module-source-map',
 20 |   output: {
 21 |     path: folders.output_folder,
 22 |     publicPath: "/",
 23 |     filename: "production.js",
 24 |     sourceMapFilename: "[file].map"
 25 |   },
 26 |   resolve: {
 27 |     alias: {
 28 |       vue: "vue/dist/vue.esm.js",
 29 |       config: folders.config_path,
 30 |       src: folders.src,
 31 |       static: folders.static_folder,
 32 |       templates: folders.components_folder,
 33 |     }
 34 |   },
 35 |   module: {
 36 |     noParse: /es6-promise\.js$/, // avoid webpack shimming process
 37 |     rules: [
 38 |       {
 39 |         test: /\.vue$/,
 40 |         loader: "vue-loader",
 41 |         exclude: folders.node_modules,
 42 |         include: [folders.components_folder, folders.partials_folder],
 43 |         options: {
 44 |           optimizeSSR: false,
 45 |           compilerOptions: {
 46 |             preserveWhitespace: false
 47 |           }
 48 |         }
 49 |       },
 50 |       {
 51 |         test: /\.json$/,
 52 |         loader: "json-loader"
 53 |       },
 54 |       {
 55 |         test: /\.pug$/,
 56 |         oneOf: [
 57 |           // this applies to `<template lang="pug">` in Vue components
 58 |           {
 59 |             resourceQuery: /^\?vue/,
 60 |             use: ['pug-plain-loader']
 61 |           },
 62 |           // this applies to pug imports inside JavaScript
 63 |           {
 64 |             use: ['raw-loader', 'pug-plain-loader']
 65 |           }
 66 |         ],
 67 |         exclude: folders.node_modules,
 68 |         include: [folders.components_folder, folders.partials_folder],
 69 |       },
 70 |       {
 71 |         test: /\.css$/,
 72 |         use: [
 73 |           !isProd ? 'vue-style-loader': MiniCssExtractPlugin.loader,
 74 |           'css-loader',
 75 |         ],
 76 |       },
 77 |       {
 78 |         test: /\.(scss|sass)$/,
 79 |         use: [
 80 |           !isProd ? 'vue-style-loader': MiniCssExtractPlugin.loader,
 81 |           'css-loader',
 82 |           'sass-loader'
 83 |         ],
 84 |         include: [folders.css_path, folders.components_folder, folders.partials_folder]
 85 |       },
 86 |       {
 87 |         test: /\.styl(us)?$/,
 88 |         use: [
 89 |           !isProd ? 'vue-style-loader': MiniCssExtractPlugin.loader,
 90 |           'css-loader',
 91 |           'stylus-loader'
 92 |         ],
 93 |         exclude: folders.node_modules,
 94 |         include: [folders.css_path, folders.components_folder, folders.partials_folder]
 95 |       },
 96 |       {
 97 |         test: /\.svg$/,
 98 |         loader: "raw-loader"
 99 |       },
100 |       {
101 |         test: /\.(png|jpe?g|gif)(\?.*)?$/,
102 |         loader: "url-loader",
103 |         options: {
104 |           limit: 10000,
105 |           name: "img/[name].[ext]"
106 |         }
107 |       },
108 |       {
109 |         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
110 |         loader: "url-loader",
111 |         options: {
112 |           limit: 10000,
113 |           name: "fonts/[name].[ext]"
114 |         }
115 |       }
116 |     ]
117 |   },
118 |   performance: {
119 |     maxEntrypointSize: 300000,
120 |     hints: isProd ? 'warning' : false
121 |   },
122 |   plugins: [
123 |     new webpack.DefinePlugin({
124 |       main_js: JSON.stringify(folders.js_path),
125 |       main_css: JSON.stringify(folders.css_path), 
126 |       main_vue: JSON.stringify(folders.vue_path),
127 | 
128 |       // strip dev-only code in Vue source
129 |       'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
130 |     }),
131 |     new MiniCssExtractPlugin({
132 |       filename: "production.css"
133 |     }),
134 |     new CopyWebpackPlugin([
135 |       {
136 |         from: path.join(folders.static_folder, "/**/*"),
137 |         context: folders.static_folder,
138 |         to: folders.output_folder
139 |       }
140 |     ]),
141 |     new VueLoaderPlugin(),
142 |     new FriendlyErrorsPlugin({
143 |       clearConsole: true
144 |     }),
145 |     ...isProd ? [
146 |       new CompressionWebpackPlugin({
147 |         filename: "[path].gz[query]",
148 |         algorithm: "gzip",
149 |         test: /\.(js|css)$/,
150 |         threshold: 10240,
151 |         minRatio: 0.8
152 |       }),
153 |     ] : [
154 |       new ProgressBarPlugin({
155 |         format: " [:bar] " + ":percent".bold + " (:msg)"
156 |       }),
157 |     ]
158 |   ]
159 | }
160 | 


--------------------------------------------------------------------------------
/src/templates/post.vue:
--------------------------------------------------------------------------------
  1 | <template lang="pug">
  2 | div
  3 |   div(v-if="!file.draft || hasPermission")
  4 |     main.post-content-and-feedback
  5 |       article.post-content
  6 |         header.post-header
  7 |           div.post-info
  8 |             .post-avatar
  9 |             .h5.post-meta(role="contentinfo")
 10 |               address
 11 |                 router-link(to="/about", rel='author').no-border  {{file.author || author}} 
 12 |               div.time
 13 |                 time(:datetime="file.created")  {{file.created | prettifyDate}} 
 14 |                 span.dot 
 15 |                 span#reading-time  {{file.readingTime}} min read
 16 |           h1.post-title {{file.title}}
 17 |         div.post-body-and-feedback
 18 |           div.post-body(v-html='file.html' ref="postBody" role="main")
 19 |           footer.post-feedback.no-print
 20 |             comment
 21 |         footer
 22 | 
 23 | 
 24 | 
 25 |     aside.sidebar.no-print
 26 |       div.post-list.no-print(role="navigation")
 27 |         header
 28 |           p.h4 Articles
 29 |         ul(role="menu")
 30 |           li.list-article-title(v-for="post in posts", :key="post.url", :class="post.url === $route.path ? 'active' : ''")
 31 |             router-link(exact :to="post.url" class="no-border" role="menuitem") {{post.title}}
 32 |   div(v-else)
 33 |     main.post-content-and-feedback
 34 |       header.post-header
 35 |         h1.post-title This article isn't ready
 36 |       div.post-body-and-feedback
 37 |         p
 38 |           | Sorry, but this post is currently being edited and isn't ready for reading. However if the author has given you a password for early access you may see it.
 39 | </template>
 40 | 
 41 | <script>
 42 | import config from"config"
 43 | 
 44 | export default {
 45 |   name: 'post',
 46 |   store: ["file", "files"],
 47 |   data() {
 48 |     return {
 49 |       author: config.author,
 50 |       hasPermission: process.env.NODE_ENV !== 'production'
 51 |     }
 52 |   },
 53 |   computed: {
 54 |     posts() {
 55 |       return this.files.filter(file => file.url.indexOf("articles/") > -1 && (!file.draft || process.env.NODE_ENV !== 'production'));
 56 |     }
 57 |   },
 58 |   beforeRouteUpdate(to, from, next) {
 59 |     next();
 60 |     this.$nextTick(() => {
 61 |       window.postBodyEl = this.$refs["postBody"]
 62 |     });
 63 |     return true;
 64 |   },
 65 |   metaInfo() {
 66 |     let meta = this.file
 67 |       ? {
 68 |           title: this.file.title,
 69 |           link: [
 70 |             { rel: 'canonical', href: config.site_url + this.file.url },
 71 |           ],
 72 |           meta: [
 73 | 
 74 | 
 75 |             { "data-vmid": "og:type", property: "og:type", content: "article" },
 76 |             { "data-vmid": "article:published_time", property: "article:published_time", content: this.file.created },
 77 |             { "data-vmid": "article:modified_time", property: "article:modified_time", content: this.file.updated },
 78 |             { "data-vmid": "article:author", property: "article:author", content: this.file.author || config.author },
 79 | 
 80 |             { "data-vmid": "url", name: "url", content: config.site_url + this.file.url },
 81 |             { "data-vmid": "identifier-URL", name: "identifier-URL", content: config.site_url + this.file.url },
 82 |             { "data-vmid": "og:url", property: "og:url", content: config.site_url + this.file.url },
 83 |             {
 84 |               "data-vmid": "og:description", property: "og:description",
 85 |               content: this.file.description || config.description
 86 |             },
 87 |             {
 88 |               "data-vmid": "twitter:description", name: "twitter:description",
 89 |               content: this.file.description || config.description
 90 |             },
 91 |             {
 92 |               "data-vmid": "description", name: "description",
 93 |               content: this.file.description || config.description
 94 |             },
 95 |             { "data-vmid": 'keywords', name: "keywords", content: this.file.keywords || config.keywords },
 96 |             { "data-vmid": "twitter:title", name: "twitter:title", content: this.file.title },
 97 |             { "data-vmid": "og:title", property: "og:title", content: this.file.title },
 98 |             { "data-vmid": "pagename", name: "pagename", content: this.file.title },
 99 |             { "data-vmid": "author", name: "author", content: this.file.author || config.author }
100 |           ]
101 |         }
102 |       : {};
103 | 
104 |       if(this.file.draft) {
105 |         meta.meta = meta.meta.concat([
106 |           { "data-vmid": "robots", name: "robots", content: "noindex" },
107 |           { "data-vmid": "googlebot", name: "googlebot", content: "noindex" }
108 |         ])
109 |       }
110 |       return meta
111 |   },
112 |   mounted() {
113 |     if(!this.$isServer) {
114 |       if(process.env.NODE_ENV === 'production' && this.file.draft) {
115 |         let input = window.prompt('Please enter the password to read this unfinished article: ')
116 | 
117 |         this.hasPermission = input === this.file.password || input === config.draft_preview_password
118 |         if(!this.hasPermission) {
119 |           window.alert('Sorry but that password was not correct, please wait until the article is published.')
120 |         }
121 |       }
122 | 
123 |       this.$nextTick(() => {
124 |         window.postBodyEl = this.$refs["postBody"]
125 |       });
126 |     }
127 |   }
128 | };
129 | </script>
130 | 


--------------------------------------------------------------------------------
/the-magic/build/build.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Renders all markdown files into html files and injects webpack assets
  3 |  * Also renders sitemap.xml and feed.xml to the designated output folder
  4 |  */
  5 | 
  6 | const isProd = process.env.NODE_ENV === "production";
  7 | const path = require("path");
  8 | const url = require("url");
  9 | const fs = require("fs");
 10 | const { createBundleRenderer } = require("vue-server-renderer");
 11 | const mkdirp = require("mkdirp");
 12 | const config = require("../../site.config");
 13 | const webpack = require('webpack');
 14 | const { renderMarkdownFolder } = require("./render-markdown.js");
 15 | const folders = require('./folders.js');
 16 | 
 17 | const sitemap_template = `<?xml version="1.0" encoding="utf-8" ?>
 18 | <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
 19 | <!-- Urls will be auto injected -->
 20 | </urlset>`;
 21 | 
 22 | const feed_template = `<?xml version="1.0" encoding="utf-8" ?>
 23 | <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
 24 |   <channel>
 25 |     <title>${config.site_title}</title>
 26 |     <author>${config.author}</author>
 27 |     <link>${config.site_url}</link>
 28 |     <description>${config.description}</description>
 29 |     <atom:link href="${config.site_url}/feed.xml" rel="self" type="application/rss+xml"></atom:link>
 30 |     <!-- Urls will be auto injected -->
 31 |   </channel>
 32 | </rss>`;
 33 | 
 34 | function createFile(url, html) {
 35 |   url += !path.extname(url) ? ".html" : "";
 36 | 
 37 |   url = path.join(folders.output_folder, url);
 38 | 
 39 |   mkdirp(path.dirname(url), function(err) {
 40 |     if (err) return cb(err);
 41 |     fs.writeFile(url, html, err => {
 42 |       if (err) {
 43 |         return console.log(err);
 44 |       }
 45 |       console.log(`${url.replace(__dirname, "")} was created.`);
 46 |     });
 47 |   });
 48 | }
 49 | 
 50 | const serverBundlePath = path.join(
 51 |   folders.output_folder,
 52 |   "vue-ssr-server-bundle.json"
 53 | );
 54 | 
 55 | let ssrClientBundlePath = path.resolve(
 56 |   folders.output_folder, 'vue-ssr-client-manifest.json'
 57 | )
 58 | 
 59 | if (!fs.existsSync(serverBundlePath)) {
 60 |   throw new Error(`vue-ssr-server-bundle.json should be in the designated output folder`)
 61 |   return false
 62 | }
 63 | 
 64 | const template = fs.readFileSync(folders.html_template, 'utf-8')
 65 | const bundle = require(serverBundlePath)
 66 | 
 67 | // The client manifests are optional, but it allows the renderer
 68 | // to automatically infer preload/prefetch links and directly add <script>
 69 | // tags for any async chunks used during render, avoiding waterfall requests.
 70 | const clientManifest = require(ssrClientBundlePath)
 71 | let renderer = createBundleRenderer(bundle, {
 72 |   template,
 73 |   clientManifest
 74 | })
 75 | 
 76 | renderMarkdownFolder().then(files => {
 77 |   files.forEach(file => {
 78 |     // if (!file || (file.draft && process.env.NODE_ENV === 'production')) {
 79 |     //   return;
 80 |     // }
 81 | 
 82 |     if(!file) { return }
 83 | 
 84 |     const context = {
 85 |       file,
 86 |       files
 87 |     };
 88 | 
 89 |     renderer.renderToString(context, (err, html) => {
 90 |       if (err) {
 91 |         console.warn(`Error with SSR`, err);
 92 |       }
 93 | 
 94 |       const {
 95 |         title,
 96 |         htmlAttrs,
 97 |         bodyAttrs,
 98 |         link,
 99 |         style,
100 |         script,
101 |         noscript,
102 |         meta
103 |       } = context.meta.inject();
104 | 
105 |       html = html.replace(
106 |         "<!-- meta tags will be auto injected here -->",
107 |         meta.text() +
108 |           title.text() +
109 |           link.text() +
110 |           style.text() +
111 |           script.text() +
112 |           noscript.text()
113 |       );
114 | 
115 |       createFile(file.url === "/" ? "/index" : file.url, html);
116 |     });
117 |   });
118 | 
119 |   let filtered_files = files
120 |     .filter(file => file.url.indexOf("404") === -1)
121 |     .filter(file => file.draft !== true)
122 |     .filter(file => file.url !== "/analytics")
123 |     .filter(file => !file.silent)
124 | 
125 |   let sitemap_string = filtered_files
126 |     .map(file => {
127 |       file.url.replace("/(.html$)/", "");
128 |       file.absolute_url = url.resolve(config.site_url, file.url);
129 |       return file;
130 |     })
131 |     .map(file => {
132 |       return `
133 |         <url>
134 |           <loc>${file.absolute_url}</loc>
135 |           <priority>1.0</priority>
136 |           <lastmod>${new Date(file.updated).toISOString()}</lastmod>
137 |         </url>
138 |       `;
139 |     })
140 |     .join("");
141 | 
142 |   let sitemap_html = sitemap_template.replace(
143 |     "<!-- Urls will be auto injected -->",
144 |     sitemap_string
145 |   );
146 | 
147 |   createFile("sitemap.xml", sitemap_html);
148 | 
149 | 
150 |   let feed_string = filtered_files
151 |     .map(file => {
152 |       file.absolute_url = url.resolve(config.site_url, file.url).replace("/(.html$)/", "");
153 |       return file;
154 |     })
155 |     .map(file => {
156 |       return `<item>
157 |           <title>${file.title}</title>
158 |           <author>${file.author || config.author}</author>
159 |           <pubdate>${file.created}</pubdate>
160 |           <description>${file.excerpt || config.description}</description>
161 |           <link>${file.absolute_url}</link>
162 |           <guid ispermalink="true">${file.absolute_url}</guid></item>`;
163 |     })
164 |     .join("");
165 | 
166 |   let feed_xml = feed_template.replace(
167 |     "<!-- Urls will be auto injected -->",
168 |     feed_string
169 |   );
170 | 
171 |   createFile("feed.xml", feed_xml);
172 | });
173 | 


--------------------------------------------------------------------------------
/the-magic/build/server.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Based off of
  3 |  * https://github.com/vuejs/vue-hackernews-2.0/blob/master/server.js
  4 |  * By Evan You
  5 |  * Contains modifications
  6 |  */
  7 | 
  8 | const fs = require('fs')
  9 | const path = require('path')
 10 | const LRU = require('lru-cache')
 11 | const express = require('express')
 12 | const favicon = require('serve-favicon')
 13 | const compression = require('compression')
 14 | const microcache = require('route-cache')
 15 | const resolve = file => path.resolve(__dirname, file)
 16 | const { createBundleRenderer } = require('vue-server-renderer')
 17 | const { renderMarkdownFile, renderMarkdownFolder } = require("./render-markdown.js");
 18 | const folders = require('./folders.js')
 19 | const isProd = process.env.NODE_ENV === 'production'
 20 | const useMicroCache = process.env.MICRO_CACHE !== 'false'
 21 | const serverInfo =
 22 |   `express/${require('express/package.json').version} ` +
 23 |   `vue-server-renderer/${require('vue-server-renderer/package.json').version}`
 24 | 
 25 | const app = express()
 26 | 
 27 | function createRenderer (bundle, options) {
 28 |   // https://github.com/vuejs/vue/blob/dev/packages/vue-server-renderer/README.md#why-use-bundlerenderer
 29 |   return createBundleRenderer(bundle, Object.assign(options, {
 30 |     // for component caching
 31 |     // cache: LRU({
 32 |     //   max: 1000,
 33 |     //   maxAge: 1000 * 60 * 15
 34 |     // }),
 35 |     // this is only needed when vue-server-renderer is npm-linked
 36 |     basedir: folders.output_folder,
 37 |     // recommended for performance
 38 |     runInNewContext: false
 39 |   }))
 40 | }
 41 | 
 42 | let renderer
 43 | let readyPromise
 44 | let files = []
 45 | 
 46 | renderMarkdownFolder().then(rendered_files => {
 47 |   files = rendered_files
 48 | })
 49 | 
 50 | const templatePath = folders.template_html_path
 51 | if (isProd) {
 52 |   // In production: create server renderer using template and built server bundle.
 53 |   // The server bundle is generated by vue-ssr-webpack-plugin.
 54 |   const template = fs.readFileSync(templatePath, 'utf-8')
 55 |   const bundle = require('../../dist/vue-ssr-server-bundle.json')
 56 |   // The client manifests are optional, but it allows the renderer
 57 |   // to automatically infer preload/prefetch links and directly add <script>
 58 |   // tags for any async chunks used during render, avoiding waterfall requests.
 59 |   const clientManifest = require('../../dist/vue-ssr-client-manifest.json')
 60 |   renderer = createRenderer(bundle, {
 61 |     template,
 62 |     clientManifest
 63 |   })
 64 | } else {
 65 |   // In development: setup the dev server with watch and hot-reload,
 66 |   // and create a new renderer on bundle / index template update.
 67 |   readyPromise = require('./setup-dev-server')(
 68 |     app,
 69 |     templatePath,
 70 |     (bundle, options) => {
 71 |       renderer = createRenderer(bundle, options)
 72 |     }
 73 |   )
 74 | }
 75 | 
 76 | const serve = (path, cache) => express.static(resolve(path), {
 77 |   maxAge: cache && isProd ? 1000 * 60 * 60 * 24 * 30 : 0
 78 | })
 79 | 
 80 | app.use(compression({ threshold: 0 }))
 81 | app.use(favicon(isProd ? '../../dist/favicon-48x48.png': path.join(folders.static_folder, 'favicon-48x48.png')))
 82 | app.use('/dist', serve('../../dist', true))
 83 | // app.use('/public', serve('./public', true))
 84 | app.use('/manifest.json', serve('../../manifest.json', true))
 85 | app.use('/service-worker.js', serve('../../dist/service-worker.js'))
 86 | 
 87 | // since this app has no user-specific content, every page is micro-cacheable.
 88 | // if your app involves user-specific content, you need to implement custom
 89 | // logic to determine whether a request is cacheable based on its url and
 90 | // headers.
 91 | // 1-second microcache.
 92 | // https://www.nginx.com/blog/benefits-of-microcaching-nginx/
 93 | app.use(microcache.cacheSeconds(1, req => useMicroCache && req.originalUrl))
 94 | 
 95 | function getMarkdownPath(url) {
 96 |   let matching_markdown_file = files.find(file => file.url === url)
 97 | 
 98 |   if(!matching_markdown_file) {
 99 |     matching_markdown_file = files.find(file => file.url === `/404`)
100 | 
101 |     if(!matching_markdown_file) {
102 |       throw new Error(`You must have a markdown file and vue component template for a 404 route.`)
103 |     }
104 |   }
105 | 
106 |   return matching_markdown_file && matching_markdown_file.path || null
107 | }
108 | 
109 | async function render (req, res) {
110 |   const s = Date.now()
111 | 
112 |   res.setHeader("Content-Type", "text/html")
113 |   res.setHeader("Server", serverInfo)
114 | 
115 |   const handleError = err => {
116 |     if (err.url) {
117 |       res.redirect(err.url)
118 |     } else if(err.code === 404) {
119 |       res.status(404).send('404 | Page Not Found')
120 |     } else {
121 |       // Render Error Page or Redirect
122 |       res.status(500).send('500 | Internal Server Error')
123 |       console.error(`error during render : ${req.url}`)
124 |       console.error(err.stack)
125 |     }
126 |   }
127 | 
128 |   let file = {}
129 |   let file_path = getMarkdownPath(req.url, files)
130 | 
131 |   if(file_path === null) {
132 |     return res.send(isProd ? `This page does not exist` : `
133 |       <h1>Whoops!</h1>
134 |       <p>There is no markdown file to handle "${req.url}". Please create or alter a markdown file to accommodate this route or include a 404 markdown file and then restart the server.
135 |       </p>`
136 |     )
137 |   }
138 | 
139 |   ;([files, file] = await renderMarkdownFile(file_path, files))
140 | 
141 |   const context = {
142 |     file,
143 |     files
144 |   }
145 |   renderer.renderToString(context, (err, html) => {
146 |     if (err) {
147 |       return handleError(err)
148 |     }
149 |     res.send(html)
150 |     if (!isProd) {
151 |       console.log(`whole request: ${Date.now() - s}ms`)
152 |     }
153 |   })
154 | }
155 | 
156 | app.get('*', isProd ? render : (req, res) => {
157 |   Promise.all([readyPromise, renderMarkdownFolder]).then(() => render(req, res))
158 | })
159 | 
160 | const port = process.env.PORT || 8080
161 | app.listen(port, () => {
162 |   console.log(`server started at localhost:${port}`)
163 | })


--------------------------------------------------------------------------------
/the-magic/build/render-markdown.js:
--------------------------------------------------------------------------------
  1 | const fs = require("fs");
  2 | const klaw = require("klaw");
  3 | const path = require("path");
  4 | const matter = require("gray-matter");
  5 | const MarkDownIt = require('markdown-it');
  6 | const galleryPlugin = require('markdown-it-gallery');
  7 | const config = require('../../site.config.js');
  8 | const attrs = require('markdown-it-attrs');
  9 | const folders = require('./folders.js')
 10 | const colors = require('colors');
 11 |  
 12 | const md = MarkDownIt({
 13 |   html: true,
 14 |   linkify: false,
 15 |   typographer: false,
 16 | })
 17 |   .use(attrs)
 18 |   .use(require('markdown-it-modify-token'))
 19 |   .use(galleryPlugin, config.markdown_gallery)
 20 | 
 21 | 
 22 | /**
 23 |  * Retrieves all the text prior to the first <!-- more --> html comment.
 24 |  * Is used to create a summary of the article for SEO purposes and preview during navigation
 25 |  * @param {string} content A string containing raw markdown text
 26 |  * @return {string} The text before the first html 'more' comment
 27 |  */
 28 | function excerpt(content) {
 29 |   if(content) {
 30 |     if(content.indexOf("<!-- more-->") == -1 && content.indexOf("<!-- more -->") == -1) {
 31 |       return "";
 32 |     } else if(content.indexOf("<!-- more-->") > 0) {
 33 |       return content.split("<!-- more-->")[0];
 34 |     } else if(content.indexOf("<!-- more -->") > 0) {
 35 |       return content.split("<!-- more -->")[0];
 36 |     }
 37 |   } else {
 38 |     return content;
 39 |   }
 40 | }
 41 | 
 42 | /**
 43 |  * Counts the number of words in an html string
 44 |  * @param {string} html Expected to be the rendered html string from a markdown file
 45 |  * @return {number} Number of whole words in the html string
 46 |  */
 47 | function get_word_count(html) {
 48 |   let words = html.replace(/<[^>]*>/g," ");
 49 |   words = words.replace(/\s+/g, ' ');
 50 |   words = words.trim();
 51 | 
 52 |   return words.split(" ").length
 53 | }
 54 | 
 55 | /**
 56 |  * Returns the number of minutes an average reader would need to read a given number of words
 57 |  * @param {number} word_count The number of words to read
 58 |  * @return {number} The number of minutes it would take an average reader to read
 59 |  */
 60 | function get_reading_time(word_count) {
 61 |   const orientation_seconds = 4
 62 |   const words_per_minute = 275;
 63 |   const readable_content = 1;
 64 | 
 65 |   const reading_time_in_minutes = Math.round(word_count / words_per_minute) * readable_content
 66 | 
 67 |   return reading_time_in_minutes
 68 | }
 69 | 
 70 | /**
 71 |  * Convert a single markdown file into a file object for consumption in Vue.js
 72 |  * @param {string} file_path Full path to the file from root of system
 73 |  * @return {object} Returns an object containing the file metadata and rendered html
 74 |  */
 75 | function render_file(file_path) {
 76 |   // Filter function to retrieve .md files
 77 |   if(path.extname(file_path) !== ".md") return null;
 78 | 
 79 |   // If markdown file, read contents //
 80 |   const data = fs.readFileSync(file_path, "utf8");
 81 |   // Convert to frontmatter object and markdown content //
 82 |   let fileInfo = matter(data);
 83 |   fileInfo = Object.assign({}, fileInfo.data, fileInfo);
 84 | 
 85 |   let stats = fs.statSync(file_path)
 86 | 
 87 |   fileInfo.updated = fileInfo.updated
 88 |     ? new Date(fileInfo.updated).toISOString()
 89 |     : stats.mtime;
 90 |   fileInfo.created = fileInfo.created
 91 |     ? new Date(fileInfo.created).toISOString()
 92 |     : stats.birthtime;
 93 | 
 94 |   fileInfo.url =
 95 |     fileInfo.url ||
 96 |     file_path
 97 |       .replace(folders.markdown_folder, "")
 98 |       .replace(path.extname(file_path), "");
 99 | 
100 |   if (fileInfo.url === "/index") {
101 |     fileInfo.url = "/";
102 |   }
103 | 
104 |   fileInfo.html = md.render(fileInfo.content);
105 |   fileInfo.wordCount = get_word_count(fileInfo.html);
106 |   fileInfo.readingTime = get_reading_time(fileInfo.wordCount);
107 | 
108 |   fileInfo.excerpt = md
109 |     .render(fileInfo.excerpt || excerpt(fileInfo.content))
110 |     .replace(/(<([^>]+)>)/gi, "");
111 | 
112 |   fileInfo.description = fileInfo.description || fileInfo.excerpt
113 |     .slice(0, 297) + "...";
114 | 
115 |   fileInfo.excerpt = fileInfo.excerpt || fileInfo.description
116 | 
117 |   fileInfo.path = file_path.replace(path.join(__dirname, '..'), '')
118 | 
119 |   delete fileInfo.orig;
120 |   delete fileInfo.data;
121 |   delete fileInfo.content;
122 | 
123 |   return fileInfo
124 | }
125 | 
126 | /**
127 |  * Decide what conditions are required for the file to be added to the rendered markdown files in production
128 |  */
129 | function add_file_to_array(fileInfo, file_path, files) {
130 |   if(fileInfo) {
131 |     let index = files.findIndex(file => file.url === fileInfo.url)
132 | 
133 |     if(index > -1) {
134 |       files[index] = fileInfo
135 |       console.log(colors.blue(`"${path.basename(file_path)}" updated.`))
136 |     } else {
137 |       /**
138 |        * If you don't want to even write files that are in draft mode uncomment this snippet and comment the one below
139 |        */
140 |       // if (!fileInfo.draft || process.env.NODE_ENV !== 'production') {
141 |       // files.push(fileInfo);
142 |       // }
143 | 
144 |       /**
145 |        * Leave line unmodifed if you wish to allow certain users with a password to see draft files.
146 |        */
147 |       files.push(fileInfo);
148 |       console.log(colors.blue(`"${path.basename(file_path)}" added.`))
149 |     }    
150 |   }
151 |   return files;
152 | }
153 | 
154 | /**
155 |  * Render all markdown files
156 |  * Retrieves all markdown files, renders each one's html, and saves the output as an array of file objects containing the rendered html and file metadata
157 |  * @return {Promise} Returns a list of file objects with rendered html
158 |  */
159 | exports.renderMarkdownFolder = function renderMarkdownFolder() {
160 |   return new Promise(resolve => {
161 |     let files = [];
162 |     if (fs.existsSync(folders.markdown_folder)) {
163 |       klaw(folders.markdown_folder)
164 |         .on("data", item => {
165 |           const fileInfo = render_file(item.path);
166 |           files = add_file_to_array(fileInfo, item.path, files);
167 |         })
168 |         .on("error", console.log)
169 |         .on("end", () => {
170 |           files = files.sort(function(a, b) {
171 |             return new Date(b.created) - new Date(a.created);
172 |           });
173 |           resolve(files);
174 |         });
175 |     } else {
176 |       resolve(files);
177 |     }
178 |   });
179 | };
180 | 
181 | /**
182 |  * Render one specific markdown file and upsert it to the array of markdown files
183 |  * @param {string} file_path Full path to the file from root of system
184 |  * @param {Object[]} files List of currently rendered file objects
185 |  * @return {Promise} Returns a list of file objects with rendered html
186 |  */
187 | exports.renderMarkdownFile = function renderMarkdownFile(file_path, files = []) {
188 |   return new Promise(resolve => {
189 | 
190 |     const fileInfo = render_file(file_path);
191 | 
192 |     files = add_file_to_array(fileInfo, file_path, files);
193 | 
194 |     files = files.sort(function(a, b) {
195 |       return new Date(b.created) - new Date(a.created);
196 |     });
197 | 
198 |     resolve([ files, fileInfo]);
199 |   });
200 | }
201 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Vue Static
  2 | 
  3 | A Vue version of React Static by Nozzle.io
  4 | 
  5 | ### How to start
  6 | 
  7 | Run
  8 | 
  9 | ```
 10 | yarn install
 11 | yarn start
 12 | ```
 13 | 
 14 | Open `localhost:3000`
 15 | 
 16 | ### To do a production build
 17 | 
 18 | Run
 19 | 
 20 | ```bash
 21 | yarn build
 22 | yarn serve
 23 | ```
 24 | 
 25 | Contents are in `dist` folder.
 26 | 
 27 | ### You can deploy to netlify quickly
 28 | 
 29 | [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/codingfriend1/vue-static)
 30 | 
 31 | ## How it works
 32 | 
 33 | The concepts are simple.
 34 | 
 35 | We collect all the data from your markdown files, render them to html, and provide them to your vue components in the store as a `files` array, sorted by date created, using [vue-stash](https://github.com/cklmercer/vue-stash). You then have access to render this data in your templates.
 36 | 
 37 | Each file look like this:
 38 | 
 39 | ```js
 40 | {
 41 |   title: 'Sample Post #2',
 42 |   thumbnail: '/uploads/image2.jpg',
 43 |   isEmpty: false,
 44 |   excerpt: '',
 45 |   updated: "2018-07-14T17:49:36.883Z",
 46 |   created: "2018-07-11T21:24:28.844Z",
 47 |   url: '/articles/second',
 48 |   description: '...',
 49 |   wordCount: 35,
 50 |   readingTime: 0,
 51 |   html: '<h1>This is sample post #2.</h1>\n<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci laborum, doloremque. Repellat sapiente incidunt voluptas, placeat. Nam consectetur maxime eaque magnam nostrum, iste voluptates facilis! Quidem sequi itaque eveniet nesciunt.</p>'
 52 | }
 53 | ```
 54 | 
 55 | 1.  `html` contains the markdown rendered to a html string
 56 | 2.  `url` is the folder path inside the templates folder or the url meta information provided in the file.
 57 | 3.  `updated` is the date of the last time the file was modified
 58 | 4.  `created` is the birthdate of the file or date it was created
 59 | 5.  `wordCount` A close estimate of the number of visible words in the markdown file.
 60 | 6.  `readingTime` At a rate of 275 wpm, how long it would take to read the article, rounded.
 61 | 7.  Any other information you add to the file's meta will also be in the object, including the title.
 62 | 
 63 | In the `site.config.js` you define which routes use which templates (use the string component filename instead of the actual imported component).
 64 | 
 65 | ```js
 66 | routes: [
 67 |   {
 68 |     path: "/",
 69 |     component: "home"
 70 |   },
 71 |   {
 72 |     path: "/:page?",
 73 |     component: "page"
 74 |   },
 75 |   {
 76 |     path: "/articles/:article?",
 77 |     component: "post"
 78 |   },
 79 |   {
 80 |     path: "/404",
 81 |     component: "missing"
 82 |   },
 83 |   { path: "*", redirect: "/404" }
 84 | ];
 85 | ```
 86 | 
 87 | You also declare which route a markdown file wants either by:
 88 | 
 89 | 1.  it's relative folder structure within the `markdown` folder. Ex: articles > second.md === '/articles/second'
 90 | 2.  or specifying a `url` param in the markdown meta.
 91 | 
 92 | ```markdown
 93 | ---
 94 | url: '/website/url'
 95 | draft: false
 96 | created: "2018-07-11T21:24:28.844Z"
 97 | ---
 98 | ```
 99 | 
100 | When you're finished run build and it will make a static site of plain html files for good SEO but also with vue router and client side code. This means initial load has good SEO and navigation is super quick.
101 | 
102 | _NOTE: Markdown files with `draft: true` will be password protected. You can instead prevent them from being rendered at all in the `the-magic/build/render-markdown.js` file._
103 | 
104 | ```js
105 | /**
106 |  * If you don't want to even write files that are in draft mode uncomment this snippet and comment the one below
107 |  */
108 | // if (!fileInfo.draft || process.env.NODE_ENV !== 'production') {
109 | // files.push(fileInfo);
110 | // }
111 | 
112 | /**
113 |  * Leave line unmodifed if you wish to allow certain users with a password to see draft files.
114 |  */
115 | files.push(fileInfo);
116 | ```
117 | 
118 | ### Markdown Editor
119 | 
120 | This repo is setup to work with Netlify CMS. You have to enable identity service and make an api gateway access code to allow netlify to edit your git files.
121 | 
122 | Services > Git Gateway
123 | 
124 | You can access the CMS at `yoursite.com/admin` and log in.
125 | 
126 | When you get the invite and click on the link the email it will redirect you to your site with an identity token. Something like:
127 | 
128 | ```
129 | ...com#invite_token=1212094019284
130 | ```
131 | 
132 | You have to add admin in front of it for it to work
133 | 
134 | ```
135 | ...com/admin#invite_token=1212094019284
136 | ```
137 | 
138 | If you are looking for a good markdown editor for mac, I recommend [Typora](https://typora.io/). Just point it to your markdown folder and you'll be able to edit your files. You can also stylize the css to match your site.
139 | 
140 | ### Site Config
141 | 
142 | In the `site.config.js` in the root of the repo you can add information to use across the site anywhere where you import `config`:
143 | 
144 | ```js
145 | import config from "config";
146 | ```
147 | 
148 | ```js
149 | {
150 | 
151 |   /**
152 |    * Tell us where your entry files are located relative to this repository root directory
153 |    */
154 |   folderStructure: {
155 | 
156 |     /**
157 |      * Show us where your lead js file is that imports all other scripts
158 |      * @type {String}
159 |      */
160 |     js: 'src/js/index.js',
161 | 
162 |     /**
163 |      * Lead stylus file that imports all other stylesheets
164 |      * @type {String}
165 |      */
166 |     css: 'src/css/index.styl',
167 | 
168 |     /**
169 |      * Tell us where your root vue component is
170 |      * @type {String}
171 |      */
172 |     vue: 'src/templates/index.vue',
173 | 
174 |     /**
175 |      * Tell us where your main html template is
176 |      * @type {String}
177 |      */
178 |     html: 'src/index.html',
179 | 
180 |     /**
181 |      * Tell us what folder we should search in for your larger vue components so we can globalize them
182 |      * @type {String}
183 |      */
184 |     components: 'src/templates',
185 | 
186 |     /**
187 |      * Tells us what folder your smaller vue components are in
188 |      * @type {String}
189 |      */
190 |     partials: 'src/partials',
191 | 
192 |     /**
193 |      * Show us what folder we should copy your static assets from
194 |      * This is also the folder that we will save optimized images to
195 |      * @type {String}
196 |      */
197 |     static: 'src/static',
198 | 
199 |     /**
200 |      * Name of the folder where you will keep fullsized images to be optimized by `npm run optimize`
201 |      * @type {String}
202 |      */
203 |     images: 'unoptimized-images',
204 | 
205 |     /**
206 |      * Show us what folder you want us to save your generated files in
207 |      * @type {String}
208 |      */
209 |     output: 'dist',
210 | 
211 |     /**
212 |      * Tells us where your markdown files are
213 |      * @type {String}
214 |      */
215 |     markdown: 'markdown'
216 |   },
217 | 
218 |   // Default store
219 |   store: {
220 |     file: {},
221 |     files: []
222 |   },
223 | 
224 |   /**
225 |    * If you type in this password when prompted you may see pages that are in draft mode on the live site.
226 |    */
227 |   draft_preview_password: 'your_global_password_for_viewing_drafts',
228 | 
229 |   site_title: `Your site title`,
230 |   site_url,
231 |   description: "Your site description",
232 |   author: "You",
233 |   keywords: "",
234 |   medium: "blog",
235 |   language: "English",
236 |   locale: "en_US",
237 |   logo: "/uploads/logo.png",
238 | 
239 |   twitterCard: "summary_large_image",
240 |   twitterCreator: "@your_twitter_username",
241 | 
242 |   facebook_id: 111,
243 |   googleAnalyticsId: ""
244 | }
245 | ```
246 | 
247 | You can have any folder structure you want as long as you specify where your entry files are in `site.config.js` > `folderStructure`.
248 | 
249 | ### sitemap.xml and feed.xml
250 | 
251 | A `sitemap.xml` and `feed.xml` are created when running `yarn build` and includes all files that do NOT have 
252 | 
253 | ```md
254 | ---
255 | silent: true
256 | ---
257 | ```
258 | 
259 | #### Static Folder
260 | 
261 | The contents of the `static` folder will be copied directly as is to the output folder during build and development.
262 | 
263 | When you run
264 | 
265 | ```
266 | npm run optimize
267 | ```
268 | 
269 | images in the designated images folder will be optimized by `the-magic/commands/optimize-images.js` and saved to the designated static folder.
270 | 
271 | ### Article excerpts
272 | 
273 | A utility function in `render-markdown.js` exists that will take all the content before the first `<!-- more -->` comment and make everything before it the article excerpt:
274 | 
275 | ```html
276 | <!-- more -->
277 | ```
278 | 
279 | #### Aliases
280 | 
281 | I've setup a couple handy aliases in webpack so that instead of having to write the relative path when requiring the `site.config.js` or the `theme` folder you can type the alias.
282 | 
283 | 1.  `config` - `site.config.js`
284 | 2.  `templates` - An alias to `src/templates`
285 | 3.  `src` - An alias to the root src folder
286 | 4.  `static` - An alias to `src/static`
287 | 
288 | ### Image Compression
289 | optimize-images.js will reduce your image sizes. Drag the files you wish to reduce into the designated images folder. Run:
290 | 
291 | ```bash
292 | npm run optimize
293 | ```
294 | 
295 | The compressed jpegs, pngs and webp images will be output to the designated static folder with the same filenames and relative paths. You can change this setting and compression levels in the `optimize-images.js` file.
296 | 
297 | ## License
298 | 
299 | Copyright (c) Jon Paul Miles 2018
300 | 
301 | Licensed under the [MIT license](LICENSE).


--------------------------------------------------------------------------------
/src/css/index.styl:
--------------------------------------------------------------------------------
  1 | *
  2 |   box-sizing: border-box
  3 |   border: 0
  4 |   padding: 0
  5 |   margin: 0
  6 |   outline: 0
  7 |   -webkit-font-smoothing: antialiased
  8 | 
  9 | html
 10 |   font-size: 10px
 11 |   
 12 | a
 13 |   color: inherit
 14 |   text-decoration: none
 15 | 
 16 | img
 17 |   width: 100%
 18 |   max-width: 100%
 19 | 
 20 | pre
 21 |   white-space: pre-wrap
 22 |   color: white
 23 |   background: #282923
 24 |   padding: 1em
 25 |   
 26 | $font-primary = 'Open Sans', "Palatino Linotype", 'Didact Gothic', Helvetica, sans-serif
 27 | $font-secondary = "Open Sans", 'Didact Gothic', "Palatino Linotype", sans-serif
 28 | 
 29 | $color-text = #222
 30 | $color-bg = #fff
 31 | 
 32 | $max-width-content = 1200px
 33 | 
 34 | $width-teaser = 350px
 35 | 
 36 | body
 37 |   background: $color-bg
 38 |   background: #f2f2f2
 39 |   color: $color-text
 40 |   font-family: $font-primary
 41 |   font-size: 1.8rem
 42 | 
 43 | .post-content-and-feedback,
 44 | .page
 45 |   width: 66%
 46 |   margin-right: -0.25em
 47 |   display: inline-block
 48 |   padding: 0 1em
 49 |   margin: 0 auto
 50 |   max-width: $max-width-content
 51 | 
 52 | .post-body-and-feedback
 53 |   background-color: #fff
 54 |   padding: 40px
 55 |   padding-bottom: 15px
 56 |   font-size: 18px
 57 |   border-radius: 5px
 58 |   color: #444
 59 |   margin-bottom: 1em
 60 | 
 61 | .post-avatar
 62 |   display: inline-block
 63 |   border-radius: 100%
 64 |   background-size: 40px
 65 |   width: 40px
 66 |   height: 40px
 67 |   vertical-align: middle
 68 |   margin-right: 15px
 69 |   
 70 | .webp .post-avatar
 71 |   background-image: url("/uploads/image.webp")
 72 |   
 73 | .no-webp .post-avatar
 74 |   background-image: url("/uploads/image.jpg")
 75 | 
 76 | .post-header
 77 |   color: #444
 78 |   font-weight: bold
 79 | 
 80 | .inline-desktop
 81 |   display: inline-block
 82 | 
 83 | .reading-time
 84 |   margin-bottom: 0.5em
 85 |   margin-top: 0.5em
 86 |   height: 30px
 87 | 
 88 | .letter-body
 89 |   background-color: #fff
 90 |   padding: 40px
 91 |   border-radius: 5px
 92 | 
 93 | .h1,
 94 | h1
 95 |   font-size: 2.5em
 96 |   line-height: 1.2em
 97 |   margin: 0.5em 0 0.5em
 98 |   
 99 | .h2,
100 | h2
101 |   font-size: 2em
102 |   line-height: 1.4em
103 |   margin: 1.5em 0 0.5em
104 |   
105 | .h3,
106 | h3
107 |   font-size: 1.6em
108 |   line-height: 1.4em
109 |   margin: 1em 0 0.5em
110 |   
111 | .h4,
112 | h4
113 |   font-size: 1.3em
114 |   line-height: 1.4em
115 |   margin: 1.5em 0 0.5em
116 | 
117 | .h5,
118 | h5
119 |   font-size: 1.1em
120 |   font-weight: bold
121 |   line-height: 1.4em
122 |   margin: 1.5em 0 0.5em
123 | 
124 | div
125 |   line-height: 1.75em
126 |   font-weight: 400
127 |   font-style: normal
128 | 
129 |   a:not(.button):not(.no-border)
130 |     border-bottom: 2px solid $color-text
131 |     
132 | .post-meta
133 |   display: inline-block
134 |   vertical-align: middle
135 |   font-weight: normal
136 | 
137 | p
138 |   margin-bottom: 1.7em
139 |   line-height: 1.75em
140 |   font-weight: 400
141 |   font-style: normal
142 | 
143 |   a:not(.button):not(.no-border)
144 |     border-bottom: 2px solid $color-text
145 |     
146 | .videoWrapper
147 |   position: relative;
148 |   padding-bottom: 56.25%; /* 16:9 */
149 |   padding-top: 25px;
150 |   height: 0;
151 |   
152 | .videoWrapper iframe
153 |   position: absolute;
154 |   top: 0;
155 |   left: 0;
156 |   width: 100%;
157 |   height: 100%;
158 | 
159 | figcaption
160 |   text-align: center
161 |   font-size: 14px
162 |   line-height: 1.6em
163 | 
164 | .no-border
165 |   a
166 |     border-bottom: 0 !important
167 | 
168 | .block
169 |   display: block
170 |     
171 | ul,
172 | ol
173 |   margin-left: 1.5em
174 |   margin-bottom: 1.25em
175 |   li
176 |       line-height: 1.75em
177 |       font-weight: 400
178 |       font-style: normal
179 | 
180 | input
181 |   display: block
182 |   padding: 0.75em 1em
183 |   border: 2px solid grey
184 |   border-radius: 3px
185 |   margin: 0.5em 0
186 |   font-size: 16px
187 |   color: $color-text
188 |   font-family: $font-primary
189 | 
190 | label
191 |   font-size: 16px
192 |   color: $color-text
193 |   font-family: $font-primary
194 | 
195 | .intro
196 |   max-width: 800px
197 |   margin-right: auto
198 |   margin-left: auto
199 |   padding: 0 1em
200 |   h1
201 |     font-size: 1.6em
202 |     line-height: 1.2em
203 |     margin: 1em 0 0.5em
204 | 
205 | .hello-friend
206 |   margin-bottom: 0.4em
207 | 
208 | .subscribe-button
209 |   padding: 1em
210 |   background-color: #2980B9
211 | 
212 | .side-img
213 |   max-width: 300px
214 | 
215 | .likes
216 |   display: inline-block
217 |   vertical-align: middle
218 | 
219 | .align-middle
220 |   display: inline-block
221 |   vertical-align: middle
222 | 
223 | .read-article
224 |   margin-right: 1.5em
225 |   margin-bottom: 1em
226 | 
227 | #mc_embed_signup
228 |   clear: left
229 |   input
230 |     width: 100%
231 | 
232 | blockquote
233 |   margin: 15px 0
234 |   padding: 1.2em 1.7em 1.7em
235 |   line-height: 1.5em
236 |   color: rgba(0,0,0,.4)
237 |   background: #f8f8f8
238 |   font-family: $font-primary
239 |   border-radius: 3px
240 | 
241 |   p
242 |     margin-bottom: 1.2em
243 | 
244 |   p:last-child
245 |     margin-bottom: 0
246 | 
247 |   ol, ul
248 |     padding-left: 1.2em
249 | 
250 | .text-center
251 |   text-align: center
252 | 
253 | .text-white
254 |   color: white
255 | 
256 | .float-right
257 |   float: right
258 |   width: auto
259 |   margin-left: 1em
260 |   margin-bottom: 0.5em
261 | 
262 | .float-left
263 |   float: left
264 |   width: auto
265 |   margin-right: 1em
266 |   margin-bottom: 0.5em
267 | 
268 | address
269 |   display: inline
270 | 
271 | .title
272 |   font-size: 1.9em
273 |   font-family: $font-secondary
274 |   line-height: 1.4em
275 | 
276 | .title-small
277 |   font-weight: normal
278 |   font-size: 2rem
279 |   font-family: $font-secondary
280 |   line-height: 1.4em
281 | 
282 | .meta
283 |   font-family: $font-primary
284 |     
285 | @media (max-width: 850px)
286 |     .post-title
287 |         font-size: 1.5em
288 |         line-height: 1.38em
289 | 
290 |     .post-content-and-feedback
291 |         padding: 0 0.5em 1em
292 |         margin: 0 0
293 |         border-radius: 0
294 |     .post-body-and-feedback
295 |         padding: 30px
296 |         padding-bottom: 15px
297 | 
298 |     .post-header
299 |         padding: 0 1.5em
300 |         
301 | @media (max-width: 500px)
302 |     .float-left
303 |         float: none
304 |         text-align: center
305 |         margin-left: auto
306 |         margin-right: auto
307 |         max-width: 100%
308 |         width: auto
309 |         display: block
310 |         margin-bottom: 0.5em
311 |     .float-right
312 |         float: none
313 |         text-align: center
314 |         margin-left: auto
315 |         margin-right: auto
316 |         max-width: 100%
317 |         width: auto
318 |         display: block
319 |         margin-bottom: 0.5em
320 | 
321 |     .intro
322 |         h1
323 |             font-size: 1.2em
324 |             line-height: 1.2em
325 |             margin: 1em 0 0.5em
326 | 
327 |     .inline-desktop
328 |         display: block
329 | 
330 |     .post-body-and-feedback
331 |         padding: 10px
332 | 
333 |     .letter-body
334 |         padding: 15px
335 | 
336 |     .post-body
337 |         padding: 0.5em
338 |     blockquote
339 |         padding: 1em
340 |         
341 | @media print
342 |   .button
343 |     display: none
344 |   // img
345 |   //  display: none
346 |   
347 |   .post-title
348 |     font-size: 2.5em !important
349 |     margin-bottom: 0.25em !important
350 |   .post-avatar
351 |     display: none
352 |   
353 |   .post-meta
354 |     margin-top: 0 !important
355 |     padding-top: 0 !important
356 |     margin-left: 2em
357 |     
358 |   .post-body-and-feedback
359 |     padding-top: 0 !important
360 | 
361 |   h2, h3, h4
362 |     page-break-before: avoid
363 |     page-break-after: avoid
364 | 
365 |   pre, blockquote
366 |     page-break-inside: avoid
367 | 
368 |   body
369 |     font-size: 12px
370 | 
371 |   p
372 |     margin-bottom: 1.6em
373 |     line-height: 1.6em
374 | 
375 |   a
376 |     border-bottom: none !important
377 | 
378 |   .post-header
379 |     text-align: center
380 |     
381 |   blockquote
382 |     margin: 0 0 0.5em 1em !important
383 |     padding: 0.8em 1em 1em !important
384 |     line-height: 1.5em !important
385 |     color: #666
386 |     background: #eee
387 |     font-family: $font-primary
388 |     border-left: 1px solid grey
389 | 
390 |     p
391 |       margin-bottom: 0.8em
392 | 
393 |     p:last-child
394 |       margin-bottom: 0
395 | 
396 |     ol, ul
397 |       padding-left: 0.8em
398 | 
399 |   .no-print
400 |     display: none
401 | 
402 | .post-title
403 |   @extend .title
404 |   margin-bottom: 15px
405 |   margin-top: 0.5em
406 | 
407 | .post-meta
408 |   @extend .meta
409 |   margin: auto
410 |   font-size 16px
411 |   address
412 |     font-weight bold
413 |     font-style normal
414 |   .time
415 |     color: #757575
416 |     
417 |   .dot:after
418 |     content: '\00B7'
419 |     
420 | .post-header
421 |   text-align: left
422 | 
423 | .post-content-and-feedback
424 |   width: 66%
425 |   margin-right: -0.25em
426 |   display: inline-block
427 |   // width: 66%
428 |   // max-width: 800px
429 |   // margin-left: auto
430 |   // margin-right: auto
431 |   vertical-align: top
432 |   word-wrap: break-word
433 |   p, li
434 |       color: #444
435 | 
436 | .post-content.page
437 |   width: auto
438 |   margin: 0 auto
439 |   display: block
440 |   max-width: 850px
441 | 
442 | .post-readmore
443 |   text-align: center
444 | 
445 | .sidebar
446 |   display: inline-block
447 |   width: 33%
448 |   vertical-align: top
449 |   box-sizing: border-box
450 |   padding: 0 1.5em 1.5em
451 |   margin-bottom: 1.2em
452 |   background-color: #f8f8f8
453 |   border-radius: 5px
454 | 
455 |   ul
456 |     margin-left: 0
457 |     margin-bottom: 0
458 |     .router-link-active
459 |       li
460 |         color: #444
461 |         a
462 |             color: inherit
463 |     li.active
464 |       color: #444
465 |       a
466 |           color: inherit
467 |     li
468 |       // margin-bottom: 0.85em
469 |       padding: 6px 10px 10px 12px
470 |       border-bottom: 1px solid #e7e6e6
471 |       border-bottom: 1px solid #ddd
472 |       list-style: none
473 |       font-size: 16px
474 |       line-height: 21px
475 |       position: relative
476 |       a
477 |         display: block
478 |         color: #2ba0a3
479 |       a:before
480 |         content: "\203A"
481 |         font-weight: bold
482 |         font-size: 1.5em
483 |         // border-color: transparent #008C31
484 |         // border-style: solid
485 |         // border-width: 0.35em 0 0.35em 0.45em
486 |         display: block
487 |         height: 0
488 |         width: 0
489 |         left: -6px
490 |         // top: 50%
491 |         // transform: translateY(-50%)
492 |         position: absolute
493 | .comments
494 |   max-width: 850px
495 |   padding: 0 0em
496 |   box-sizing: border-box
497 |   margin: 0 auto
498 | @media (max-width: 850px)
499 |   .post-content-and-feedback
500 |     width: auto
501 |     display: block
502 |     margin-right: 0
503 |   .post-body-and-feedback
504 |     margin: 0 -0.5em
505 |   .sidebar
506 |     width: auto
507 |     display: block
508 |     padding-left: 0
509 |     padding: 1em
510 |     border-radius: 0
511 |     margin-bottom: 0em
512 | 
513 |     h3
514 |       margin: 0.5em 0 0.5em
515 | .site-image
516 |   background-image: url("/uploads/image3.jpg")
517 |   background-color: #1d1d1d
518 |   height: 430px
519 |   background-repeat: no-repeat
520 |   background-size: 100% auto
521 |   background-position: center center
522 |   position: relative
523 |   
524 | .webp .site-image
525 |   background-image: url("/uploads/image3.webp")
526 |   
527 | .no-webp .site-image
528 |   background-image: url("/uploads/image3.jpg")
529 | 
530 | .site-meta
531 |   position: absolute
532 |   top: 50%
533 |   left: 50%
534 |   width: 440px
535 |   max-width: 80%
536 |   -webkit-transform: translate(-50%, -50%)
537 |   -ms-transform: translate(-50%, -50%)
538 |   -moz-transform: translate(-50%, -50%)
539 |   -o-transform: translate(-50%, -50%)
540 |   transform: translate(-50%, -50%)
541 |   display: inline-block
542 |   padding: 1.4em 1.4em
543 |   background-color: #1d1d1d
544 |   color: white
545 |   border-radius: 3px
546 |   text-align: center
547 | 
548 |   .site-logo
549 |       display: inline-block
550 |       img
551 |           max-width: 50px
552 |           margin-bottom: 0.5em
553 |           margin-top: -0.5em
554 | 
555 |   .site-title
556 |     text-transform: uppercase
557 |     letter-spacing: 4px
558 |     font-weight: 700
559 |     font-size: 2.5rem
560 |     font-family: "Raleway", sans-serif
561 |     margin: 0
562 |     text-align: center
563 |     width: 100%
564 |     word-wrap: break-word
565 |     
566 |   .site-description
567 |     color: #fff
568 |     font-family: "Raleway", sans-serif
569 |     font-size: 1.8rem
570 |     line-height: 1.7em
571 |     font-weight: 300
572 |     opacity: .6
573 |     text-align: center
574 |     
575 | @media (max-width: 670px)
576 |   .site-image
577 |     height: 230px
578 | 
579 |   .site-meta
580 |     padding: 1em
581 |     
582 |     .site-logo
583 |       display: inline-block
584 |       img
585 |         max-width: 30px
586 |         margin-bottom: 0.5em
587 |         margin-top: -0.5em
588 | 
589 |     .site-title
590 |       font-size: 1.4rem
591 |       
592 |     .site-description
593 |       font-size: 1.35rem
594 |   
595 |   .post-header
596 |     padding: 0 1em
597 |     .post-title
598 |       margin-top: 0.5em
599 |       font-size: 1.3em
600 |       margin-bottom: 10px
601 |       
602 |     .post-avatar
603 |       width: 40px
604 |       height: 40px
605 |       background-size: 40px
606 |       margin-right: 16px
607 |       
608 |     .reading-time
609 |       margin-bottom: 0.5em;
610 |       margin-top: 0.5em;
611 |   
612 |   .navigation
613 |     margin-bottom: 2rem !important
614 | 
615 | .navigation
616 |   background: #34495E
617 |   color: $color-bg
618 |   left: 0
619 |   padding: 0px
620 |   width: 100%
621 |   z-index: 10
622 |   margin-bottom: 2rem
623 | 
624 |   ul
625 |     display: flex
626 |     justify-content: center
627 |     list-style: none
628 |     margin-bottom: 0 !important
629 |     margin-left: 0 !important
630 |     
631 |   li
632 |     @extend .meta
633 |     padding: 0
634 | 
635 |   li
636 |     a
637 |       padding: 9px 12px
638 |       cursor pointer
639 |     .router-link-active
640 |       color: $color-bg
641 |       border-bottom: 2px solid $color-bg !important
642 | 
643 | .draft.teaser
644 |     color: grey !important
645 |     
646 |     .teaser-title:after
647 |       content: ' (draft)'
648 |       
649 |     .read-article.button
650 |       background-color: grey
651 | 
652 | .teasers
653 |   display: flex
654 |   flex-flow: row wrap
655 |   margin-bottom: 1em
656 |   background-color: #fff
657 |   padding: 40px
658 | 
659 | .teaser
660 |   flex: 1 1 $width-teaser
661 |   padding: 20px 20px 30px 20px
662 | 
663 | .teaser-image
664 |   margin-bottom: 10px
665 |   text-align: center
666 |   img
667 |     max-width: 100%
668 |     max-height: 300px
669 |     width: auto
670 | 
671 | .teaser-title
672 |   @extend .title-small
673 |   font-weight: bold
674 |   margin-bottom: 5px
675 |   margin-top: 0px
676 | 
677 | .teaser-preview
678 |   margin-top: 0.5em
679 |   font-size: 0.85em
680 |   line-height: 1.5em
681 |   color: #666
682 |   p
683 |     font-style: italic !important
684 |     
685 | .button
686 |   background: #222
687 |   color: #fff
688 |   display: inline-block
689 |   font: normal bold 1.2rem/1 $font-secondary
690 |   letter-spacing: 3px
691 |   padding: 20px 20px
692 |   text-transform: uppercase
693 |   cursor pointer
694 |   -webkit-transition: -webkit-transform 0.25s
695 |   transition: -webkit-transform 0.25s
696 |   transition: transform 0.25s
697 |   transition: transform 0.25s,-webkit-transform 0.25s
698 | 
699 | .read-article.button
700 |   padding: 1em
701 |   background-color: #347FB1
702 |   border-radius: 3px
703 | 
704 | .button.blue
705 |   background-color: #347FB1
706 |   border-radius: 3px
707 | 
708 | .teaser-meta
709 |   @extend .meta
710 |   text-transform: uppercase
711 |   font-size: 0.8em
712 |   
713 | .reading-time-meta
714 |   @extend .meta
715 |   font-size: 0.8em
716 | 
717 | @media (max-width: 850px)
718 |   .teasers
719 |     padding: 1em 0px
720 |     
721 | 
722 | .site-footer
723 |   text-align: center
724 |   padding-bottom: 2rem
725 |   padding-top: 0.75em
726 |   color: #666
727 |   word-wrap: break-word
728 | 
729 | .legal-text
730 |   padding: 2em
731 | 
732 |   .h3
733 |     margin-bottom: 1em
734 |   .privacy-warning
735 |     text-align: left
736 |     font-size: 16px
737 |   p
738 |     margin-bottom: 1em
739 | 
740 | @media (max-width: 850px)
741 |   .legal-text
742 |     padding: 15px


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