Develop blog

blog/.vuepress/components/Categories.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <ul class="categories-list">
+      <li v-for="category in $category.list" :key="category.path">
+        <span
+          v-if="$page.frontmatter.title == category.name + ' '"
+          class="active-link"
+        >
+          {{ category.name | capitalize }}
+        </span>
+
+        <router-link v-else class="page-link" :to="category.path">
+          {{ category.name | capitalize }}
+        </router-link>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import { capitalize } from '../filters'
+
+export default {
+  filters: {
+    capitalize
+  }
+}
+</script>
+
+<style scoped>
+.categories-list {
+  display: flex;
+  list-style-type: none;
+  padding: 1rem 3rem;
+  text-align: center;
+  margin-top: -0.5rem !important;
+  justify-content: space-around;
+}
+.page-link {
+  color: var(--btcpay-header-link);
+  text-decoration: none !important;
+  font-weight: var(--btcpay-font-weight-semibold);
+}
+.page-link:hover,
+.page-link:focus {
+  color: var(--btcpay-header-link-accent);
+}
+.active-link,
+.active-link:hover {
+  cursor: default;
+  color: var(--btcpay-header-link-active);
+  font-weight: var(--btcpay-font-weight-semibold);
+}
+</style>

blog/.vuepress/components/PostMeta.vue

@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <h1 class="index-post-title">
+      {{ $page.frontmatter.title }}
+    </h1>
+    <p class="meta">
+      Posted in
+
+      <router-link
+        v-if="!Array.isArray($page.frontmatter.category)"
+        :to="'/category/' + $page.frontmatter.category"
+        class="meta-link"
+      >
+        {{ $page.frontmatter.category | capitalize }}</router-link
+      >
+
+      <span v-else v-for="(item, index) in $page.frontmatter.category" :key="item">
+        <router-link :to="'/category/' + item" class="meta-link">{{
+          item | capitalize
+        }}</router-link
+        ><span v-if="index != $page.frontmatter.category.length - 1">, </span>
+      </span>
+
+      by
+
+      <router-link
+        v-if="!Array.isArray($page.frontmatter.author)"
+        :to="'/author/' + $page.frontmatter.author"
+        class="meta-link"
+      >
+        {{ $page.frontmatter.author }}</router-link
+      >
+
+      <span v-else v-for="(item, index) in $page.frontmatter.author" :key="item">
+        <router-link :to="'/author/' + item" class="meta-link">{{
+          item
+        }}</router-link
+        ><span v-if="index != $page.frontmatter.author.length - 1">, </span>
+      </span>
+
+      on
+
+      {{ new Date($page.frontmatter.date).getMonth() + 1 }}/{{
+        new Date($page.frontmatter.date).getDate() + 1
+      }}/{{ new Date($page.frontmatter.date).getFullYear() }}
+    </p>
+
+    <img
+      v-if="$page.frontmatter.coverImage"
+      :src="$page.frontmatter.coverImage"
+      class="cover-image"
+    />
+  </div>
+</template>
+
+<script>
+import { capitalize } from '../filters'
+
+export default {
+  filters: {
+    capitalize
+  }
+}
+</script>
+
+<style scoped>
+.meta {
+  padding-top: 0.5rem;
+}
+</style>

blog/.vuepress/components/Sponsors.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="theme-default-content sponsors">
+    <hr />
+    <p>
+      We are proudly supported by these entities through the
+      <a href="https://foundation.btcpayserver.org/" target="_blank"
+        >BTCPay Server Foundation</a
+      >:
+    </p>
+    <div class="sponsors-logos">
+      <a href="https://www.kraken.com" target="_blank" class="sponsor-item">
+        <img class="logo" src="/images/krakenlogo-150x150.png" />
+        Kraken
+      </a>
+      <a
+        href="https://twitter.com/sqcrypto"
+        target="_blank"
+        class="sponsor-item"
+      >
+        <img class="logo" src="/images/squarecrypto-150x150.png" />
+        Square Crypto
+      </a>
+      <a href="https://acinq.co/" target="_blank" class="sponsor-item">
+        <img class="logo" src="/images/acinq-logo-289x300.png" />
+        ACINQ
+      </a>
+      <a href="https://www.lunanode.com/" target="_blank" class="sponsor-item">
+        <img class="logo" src="/images/lunanode-150x150.png" />
+        LunaNode
+      </a>
+      <a
+        href="https://walletofsatoshi.com/"
+        target="_blank"
+        class="sponsor-item"
+      >
+        <img class="logo" src="/images/walletofsatoshi-150x150.png" />
+        Wallet of Satoshi
+      </a>
+      <a href="https://nomics.com/" target="_blank" class="sponsor-item">
+        <img class="logo" src="/images/nomicspng-150x150.png" />
+        Nomics
+      </a>
+      <a href="https://coincards.com/" target="_blank" class="sponsor-item">
+        <img class="logo" src="/images/coincards-150x150.png" />
+        Coincards
+      </a>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.sponsors hr {
+  margin-top: -3rem !important;
+}
+
+.sponsors-logos {
+  display: flex;
+  justify-content: space-around;
+  padding-bottom: 3rem;
+  flex-wrap: wrap;
+}
+
+.sponsor-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 5px;
+}
+
+.sponsor-item img {
+  max-width: 60px;
+}
+</style>

blog/.vuepress/config.js

@@ -1,3 +1,4 @@
+const { capitalize } = require('./filters')
 const { resolve } = require('path')
 const implicitFigures = require('markdown-it-implicit-figures')
 const slugify = require('./slugify')
@@ -20,15 +21,16 @@ module.exports = {
   title,
   description: "Official BTCPay Server Blog",
   head: [
-    ["link", { rel: "stylesheet", href: "/styles/btcpayserver-variables.css" }]
+    ["link", { rel: "stylesheet", href: "/styles/btcpayserver-variables.css" }],
+    ['link', { rel: "shortcut icon", href: "/favicon.ico" }],
   ],
-  chainWebpack (config) {
+  chainWebpack(config) {
     config.module
       .rule('md')
       .test(/\.md$/)
       .use(preprocessMarkdown)
-        .loader(preprocessMarkdown)
-        .end()
+      .loader(preprocessMarkdown)
+      .end()
   },
   plugins: [
     ['seo', {
@@ -59,14 +61,60 @@ module.exports = {
           hostname: baseUrl,
           exclude: ['/404.html']
         },
-      },]
+        directories: [
+          {
+            id: 'post',
+            dirname: '_posts',
+            title: '', // effectively sets home page title to just "BTCPay Server Blog"
+            path: '/',
+            pagination: {
+              lengthPerPage: 3,
+              getPaginationPageTitle(pageNumber) {
+                return `Page ${pageNumber}`
+              }
+            },
+            itemPermalink: '/:slug',
+          },
+        ],
+        frontmatters: [
+          {
+            id: 'category',
+            keys: ['category', 'categories'],
+            path: '/category/',
+            title: '', // sets extended title of individual category pages (follows author name)
+            frontmatter: {
+              title: 'Categories', // sets title of /category/ page
+            },
+            pagination: {
+              getPaginationPageTitle(pageNumber, key) {
+                return `${capitalize(key)} - Page ${pageNumber}`
+              }
+            },
+          },
+          {
+            id: 'author',
+            keys: ['author', 'authors'],
+            path: '/author/',
+            title: '', // sets extended title of individual author pages (follows category name)
+            frontmatter: {
+              title: 'Authors', // sets title of /author/ page
+            },
+            pagination: {
+              getPaginationPageTitle(pageNumber, key) {
+                return `${key} - Page ${pageNumber}`
+              }
+            }
+          },
+        ],
+      },],
   ],
   markdown: {
-    extendMarkdown (md) {
+    extendMarkdown(md) {
       md.use(implicitFigures)
     },
     pageSuffix,
-    slugify
+    slugify,
+    lineNumbers: true,
   },
   themeConfig: {
     domain: baseUrl,
@@ -76,6 +124,13 @@ module.exports = {
     docsDir: "blog",
     sidebarDepth: 0,
     nav: [
+      { text: 'Home', link: `/` },
+      { text: 'Releases', link: `/category/releases/` },
+      { text: 'Stories', link: `/category/stories/` },
+      { text: 'Guides', link: `/category/guides/` },
+      { text: 'Announcements', link: `/category/announcements/` },
+      { text: 'Features', link: `/category/features/` },
+      { text: 'Plugins', link: `/category/plugins/` },
       {
         text: "Website",
         link: "https://btcpayserver.org/",
@@ -95,7 +150,7 @@ module.exports = {
         text: "Twitter",
         link: "https://twitter.com/BtcpayServer",
         rel: "noopener noreferrer twitter"
-      }
+      },
     ]
   }
 }

blog/.vuepress/enhanceApp.js

@@ -1,4 +1,5 @@
 const redirects = require('./redirects')
+const { COLOR_MODES, STORE_ATTR, setColorMode } = require('./themeSwitch')
 
 // https://v1.vuepress.vuejs.org/guide/basic-config.html#app-level-enhancements
 const openVideo = embedEl => {
@@ -28,17 +29,6 @@ const handleClick = e => {
 }
 
 // Theme Switch
-const COLOR_MODES = ['light', 'dark']
-const THEME_ATTR = 'data-btcpay-theme'
-const STORE_ATTR = 'btcpay-theme'
-
-function setColorMode (mode) {
-  if (COLOR_MODES.includes(mode)) {
-    window.localStorage.setItem(STORE_ATTR, mode)
-    document.documentElement.setAttribute(THEME_ATTR, mode)
-  }
-}
-
 if (typeof process === 'undefined' || process.env.VUE_ENV !== 'server') {
   const systemColorMode = window.matchMedia('(prefers-color-scheme: dark)').matches ? COLOR_MODES[1] : COLOR_MODES[0]
   const userColorMode = window.localStorage.getItem(STORE_ATTR)
@@ -57,31 +47,6 @@ export default ({ router }) => {
 
       // initial page rendering
       app.$once('hook:mounted', () => {
-        setTimeout(() => {
-          // append theme switch
-          const navbar = document.querySelector('.navbar .links')
-          if (navbar) {
-            var btn = document.createElement('button')
-            const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
-            btn.setAttribute('class', 'btcpay-theme-switch')
-            svg.setAttribute('viewBox','0 0 10 10')
-            svg.setAttribute('width','10')
-            svg.setAttribute('height','10')
-            svg.innerHTML = '<path class="btcpay-theme-switch-dark" transform="translate(1 1)" d="M2.72 0A3.988 3.988 0 000 3.78c0 2.21 1.79 4 4 4 1.76 0 3.25-1.14 3.78-2.72-.4.13-.83.22-1.28.22-2.21 0-4-1.79-4-4 0-.45.08-.88.22-1.28z"/><path class="btcpay-theme-switch-light" transform="translate(1 1)" d="M4 0c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5S4.28 0 4 0zM1.5 1c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm5 0c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zM4 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM.5 3.5c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm7 0c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zM1.5 6c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm5 0c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zM4 7c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5S4.28 7 4 7z"/>'
-            btn.appendChild(svg)
-            navbar.appendChild(btn)
-
-            document.querySelectorAll(".btcpay-theme-switch").forEach(function (link) {
-              link.addEventListener("click", function (e) {
-                e.preventDefault()
-                const current = document.documentElement.getAttribute(THEME_ATTR) || COLOR_MODES[0]
-                const mode = current === COLOR_MODES[0] ? COLOR_MODES[1] : COLOR_MODES[0]
-                setColorMode(mode)
-              })
-            })
-          }
-        }, 250)
-
         // temporary fix for https://github.com/vuejs/vuepress/issues/2428
         setTimeout(() => {
           const { hash } = document.location

blog/.vuepress/filters.js

@@ -0,0 +1,5 @@
+module.exports = {
+  capitalize (value) {
+    return value.replace(/^\w/, c => c.toUpperCase())
+  }
+}