initial commit by Stackbit

Author: stackbit-projects

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.github/FUNDING.yml

@@ -0,0 +1,2 @@
+ko_fi: alexanderheimbuch
+custom: https://www.amazon.de/hz/wishlist/ls/237T6KS5438PE

.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+dist/
+publish/

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

README.md

@@ -0,0 +1,101 @@
+# Casper Theme
+
+Ghosts default theme [Casper](https://github.com/TryGhost/Casper) for Vuepress.
+
+## Create with Stackbit
+
+[![Create with Stackbit](https://assets.stackbit.com/badge/create-with-stackbit.svg)](https://app.stackbit.com/create?theme=https://github.com/alexander-heimbuch/vuepress-theme-casper)
+
+## Installation
+
+Install the npm package:
+
+```bash
+$ npm i vuepress-theme-casper --save
+# or
+$ yarn add vuepress-theme-casper
+```
+
+Adapt your vuepress config `config.js`:
+
+```js
+module.exports = {
+  title: 'Theme Title',
+  description: 'Theme description',
+  base: '/',
+  theme: 'casper',
+  head: [
+    ['link', { rel: 'icon', href: '/favicon.png' }]
+  ],
+  markdown: {
+    anchor: {
+      permalink: false,
+      permalinkBefore: false
+    }
+  },
+  themeConfig: {
+    cover: '/images/cover.jpg',
+    logo: '/images/logo.png',
+    nav: [{
+      text: 'Home',
+      link: '/'
+    }, {
+      text: 'Posts',
+      link: '/posts'
+    }, {
+      text: 'Category',
+      link: '/category/some-category'
+    }, {
+      text: 'Page',
+      link: '/a-page.html'
+    }],
+
+    footer: [{
+      text: 'Latest Posts',
+      link: '/posts'
+    }, {
+      text: 'Facebook',
+      link: 'https://facebook.com/'
+    }, {
+      text: 'Twitter',
+      link: 'https://twitter.com'
+    }, {
+      text: 'Github',
+      link: 'https://github.com/'
+    }],
+    social: {
+      github: 'https://github.com',
+      twitter: 'https://twitter.com',
+      facebook: 'https://facebook.com',
+      xing: 'https://xing.de',
+      instagram: 'https://instagram.com',
+      linkedin: 'https://linkedin.com'
+    }
+  }
+}
+```
+
+## Page/Post Parameters
+
+The following parameters are available:
+
+```
+---
+title: And when we woke up, we had these bodies.
+image: https://picsum.photos/1920/1080/?random&date=2018-04-15
+publish: 2018-04-15
+type: post|page
+tags:
+  - toe-tappingly tragic
+  - thanks to the Internet
+categories:
+  - futurama
+readingTime: 10 Minutes
+---
+```
+
+The post intro uses the `<!-- more -->` tag.
+
+## Caveats
+
+* For simplicity this theme doesn't support multiple authors

blog/.vuepress/config.js

@@ -0,0 +1,13 @@
+const config = require('./data/config.json');
+
+module.exports = Object.assign(config, {
+  head: [
+    ['link', { rel: 'icon', href: '/favicon.png' }]
+  ],
+  markdown: {
+    anchor: {
+      permalink: false,
+      permalinkBefore: false
+    }
+  }
+});

blog/.vuepress/public/images/cover.jpg

@@ -0,0 +1,142 @@
+<template>
+  <div class="site-wrapper">
+    <site-header :blog="blog" :header="header">
+      <site-navigation slot="header"></site-navigation>
+    </site-header>
+    <component :is="content"></component>
+    <site-footer />
+  </div>
+</template>
+
+<script>
+import { mapActions, mapGetters } from 'vuex'
+
+import Post from './layouts/Post'
+import Page from './layouts/Page'
+import Posts from './layouts/Posts'
+
+import SiteHeader from './partials/Header'
+import SiteFooter from './partials/Footer'
+import SiteNavigation from './partials/Navigation'
+
+export default {
+  components: { Page, Posts, Post, SiteFooter, SiteHeader, SiteNavigation },
+  methods: {
+    ...mapActions(['updateSite', 'updatePage', 'updateParams']),
+      updateLayoutClass () {
+        this.$el.parentNode.className = `${this.type}-template`
+      }
+    },
+  computed: {
+    ...mapGetters(['type', 'blog', 'header']),
+
+    content () {
+      switch (this.type) {
+        case 'home':
+        case 'tags':
+        case 'posts':
+        case 'category':
+          return 'posts'
+        case 'post':
+          return 'post'
+        case 'page':
+          return 'page'
+      }
+    },
+  },
+  watch: {
+    $page () {
+      this.updatePage(this.$page)
+      this.updateLayoutClass()
+    },
+    $route () {
+      this.updateParams(this.$route.params)
+      this.updateLayoutClass()
+    }
+  },
+  mounted () {
+    this.updatePage(this.$page)
+    this.updateSite(this.$site)
+    this.updateParams(this.$route.params)
+    this.updateLayoutClass()
+
+  }
+}
+</script>
+
+<style lang="scss">
+  @import './styles/reset';
+  @import './styles/defaults';
+
+  /* 1. Global - Set up the things
+  /* ---------------------------------------------------------- */
+
+  body {
+    background: #f4f8fb;
+  }
+
+  .img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    background-position: center center;
+    background-size: cover;
+    border-radius: 100%;
+  }
+
+  .hidden {
+    visibility: hidden;
+    position: absolute;
+    text-indent: -9999px;
+  }
+
+
+  /* 2. Layout - Page building blocks
+  /* ---------------------------------------------------------- */
+
+  .site-wrapper {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+  }
+
+  .site-main {
+    z-index: 90;
+    flex-grow: 1;
+  }
+
+  /* Full width page blocks */
+  .outer {
+    position: relative;
+    padding: 0 4vw;
+  }
+
+  /* Centered content container blocks */
+  .inner {
+    margin: 0 auto;
+    max-width: 1040px;
+    width: 100%;
+  }
+
+  /* 3. Special Template Styles
+  /* ---------------------------------------------------------- */
+  @media (min-width: 900px) {
+    .home-template,
+    .category-template,
+    .tags-template,
+    .posts-template,
+    .author-template {
+      .post-feed {
+        margin-top: -70px;
+        padding-top: 0;
+      }
+
+      .site-nav {
+        position: relative;
+        top: -70px;
+      }
+    }
+
+  }
+
+</style>