Merge branch 'release/v2.0.1'

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## [2.0.1] - 2020-04-17
+### Added
+- Brought back support for split views. [#13](https://github.com/pixelandtonic/vuepress-theme-craftdocs/issues/13)
+
 ## [2.0.0] - 2020-04-15
 ### Added
 - Started a changelog 😎.

README.md

@@ -73,7 +73,43 @@ $success = Craft::$app->elements->saveElement($entry);
 ```
 
 :::
+
 ````
+## Split Views
+
+You can create split view pages by adding `split: true` to your page’s frontmatter:
+
+```yaml
+---
+split: true
+---
+```
+
+In split view, any content that contains a horizontal rule (`---`) will be divided into `left` and `right` portions, starting and ending at the closest H2/H3 headings.
+
+```markdown
+## Cool Headings
+
+Left-side content
+
+---
+
+Right-side content
+```
+
+In split view, code toggles can share a single page-wide toggle UI, floated at the top of the right-hand content pane. To do this, add a `code` list to your page’s frontmatter:
+
+```yaml
+---
+split: true
+code:
+  - php
+  - twig
+---
+```
+
+(Use the same language handles defined by `themeConfig.codeLanguages` in `.vuepress/config.js`.)
+
 
 ## Upgrading from v1.3.x
 

Storage.js

@@ -0,0 +1,24 @@
+const storagePrefix = function (base) {
+  let p = base.replace(/^\//, "").replace(/\/$/, "").replace(/\//g, ".");
+  return p ? p + "." : "";
+};
+
+const setStorage = function (name, value, base) {
+  if (typeof localStorage === "undefined") {
+    return;
+  }
+  localStorage[storagePrefix(base) + name] = value;
+};
+
+const getStorage = function (name, base) {
+  if (typeof localStorage === "undefined") {
+    return;
+  }
+  name = storagePrefix(base) + name;
+  if (typeof localStorage[name] === "undefined") {
+    return;
+  }
+  return localStorage[name];
+};
+
+export { storagePrefix, getStorage, setStorage };

components/CodeLanguageSwitcher.vue

@@ -0,0 +1,42 @@
+<template>
+  <ul class="code-language-switcher split">
+    <li v-for="(language, index) in $page.frontmatter.code" :key="index">
+      <a
+        :class="{ active: $store.state.codeLanguage === language }"
+        @click="$store.commit('changeCodeLanguage', language)"
+        >{{ $site.themeConfig.codeLanguages[language] }}</a
+      >
+    </li>
+  </ul>
+</template>
+
+<style lang="stylus">
+.code-language-switcher.split
+    border-radius 0
+</style>
+
+<script>
+import { getStorage } from "../Storage";
+
+export default {
+  mounted() {
+    if (
+      this.$page.frontmatter.code.indexOf(this.$store.state.codeLanguage) === -1
+    ) {
+      let storageValue = getStorage("codeLanguage", this.$site.base);
+
+      if (
+        typeof storageValue !== "undefined" &&
+        this.$page.frontmatter.code.indexOf(storageValue) !== -1
+      ) {
+        this.$store.commit("changeCodeLanguage", storageValue);
+      } else {
+        this.$store.commit(
+          "changeCodeLanguage",
+          this.$page.frontmatter.code[0]
+        );
+      }
+    }
+  },
+};
+</script>

components/CodeToggle.vue

@@ -5,8 +5,7 @@
         <a
           :class="{ active: language === selectedLanguage }"
           @click="setLanguage(language)"
-          >{{ getLanguageLabel(language) }}</a
-        >
+        >{{ getLanguageLabel(language) }}</a>
       </li>
     </ul>
     <div v-for="(language, index) in languages" :key="index">
@@ -19,17 +18,16 @@
 .code-toggle {
   margin: 0.85rem 0;
 
-  div[class*="language-"] {
+  div[class*='language-'] {
     border-radius: 0 0 6px 6px;
 
     &:before {
       display: none;
     }
   }
 
-  & > div > div[class*="language-"] {
-    & > pre,
-    & > pre[class*="language-"] {
+  & > div > div[class*='language-'] {
+    & > pre, & > pre[class*='language-'] {
       margin: 0;
     }
   }
@@ -59,13 +57,13 @@ ul.code-language-switcher {
       line-height: 2.2rem;
       cursor: pointer;
       border-radius: 4px;
-      color lighten($textColor, 20%)
+      color: lighten($textColor, 20%);
 
       &:hover {
         text-decoration: none !important;
 
         &:not(.active) {
-          background: rgba(255,255,255,0.5);
+          background: rgba(255, 255, 255, 0.5);
         }
       }
 
@@ -84,7 +82,7 @@ export default {
 
   data() {
     return {
-      selectedLanguage: this.languages[0],
+      selectedLanguage: this.languages[0]
     };
   },
 
@@ -95,7 +93,7 @@ export default {
       }
 
       return this.$page.frontmatter.split && this.$page.frontmatter.code;
-    },
+    }
   },
 
   methods: {
@@ -125,7 +123,7 @@ export default {
           ? this.$store.state.codeLanguage
           : this.selectedLanguage)
       );
-    },
-  },
+    }
+  }
 };
 </script>

components/Page.vue

@@ -0,0 +1,35 @@
+<template>
+  <main class="page">
+    <!-- CodeLanguageSwitcher is the only addition to the default Page component -->
+    <CodeLanguageSwitcher
+      v-if="$page.frontmatter.split && $page.frontmatter.code"
+    />
+    <slot name="top" />
+
+    <Content class="theme-default-content" />
+    <PageEdit />
+
+    <PageNav v-bind="{ sidebarItems }" />
+
+    <slot name="bottom" />
+  </main>
+</template>
+
+<script>
+import PageEdit from "@parent-theme/components/PageEdit.vue";
+import PageNav from "@parent-theme/components/PageNav.vue";
+import CodeLanguageSwitcher from "./CodeLanguageSwitcher.vue";
+
+export default {
+  components: { PageEdit, PageNav, CodeLanguageSwitcher },
+  props: ["sidebarItems"],
+};
+</script>
+
+<style lang="stylus">
+@require '~@parent-theme/styles/wrapper.styl'
+
+.page
+  padding-bottom 2rem
+  display block
+</style>

enhanceApp.js

@@ -1,8 +1,14 @@
+import Vuex from "vuex";
 import CodeToggle from "./components/CodeToggle";
+import { setStorage } from "./Storage";
 
 export default ({ Vue, options, router, siteData }) => {
+  const base = siteData.base;
+
   Vue.component("code-toggle", CodeToggle);
 
+  Vue.use(Vuex);
+
   Vue.mixin({
     computed: {
       $title() {
@@ -20,4 +26,22 @@ export default ({ Vue, options, router, siteData }) => {
       },
     },
   });
+
+  Object.assign(options, {
+    data: {
+      codeLanguage: null,
+    },
+
+    store: new Vuex.Store({
+      state: {
+        codeLanguage: null,
+      },
+      mutations: {
+        changeCodeLanguage(state, language) {
+          state.codeLanguage = language;
+          setStorage("codeLanguage", language, base);
+        },
+      },
+    }),
+  });
 };

layouts/Layout.vue

@@ -18,7 +18,11 @@
       </template>
     </Sidebar>
 
-    <Home v-if="$page.frontmatter.home" />
+    <div class="custom-layout" v-if="$page.frontmatter.layout">
+      <component :is="$page.frontmatter.layout" />
+    </div>
+
+    <Home v-else-if="$page.frontmatter.home" />
 
     <Page v-else :sidebar-items="sidebarItems">
       <template #top>
@@ -34,7 +38,7 @@
 <script>
 import Home from "@parent-theme/components/Home.vue";
 import Navbar from "@parent-theme/components/Navbar.vue";
-import Page from "@parent-theme/components/Page.vue";
+import Page from "@theme/components/Page.vue";
 import Sidebar from "@parent-theme/components/Sidebar.vue";
 import { resolveSidebarItems } from "../util";
 
@@ -95,7 +99,7 @@ export default {
           "no-navbar": !this.shouldShowNavbar,
           "sidebar-open": this.isSidebarOpen,
           "no-sidebar": !this.shouldShowSidebar,
-          "split": this.$page.frontmatter.split
+          split: this.$page.frontmatter.split,
         },
         userPageClass,
       ];

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuepress-theme-craftdocs",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "vuepress-theme",
   "main": "index.js",
   "repository": "https://github.com/pixelandtonic/vuepress-theme-craftdocs",
@@ -9,7 +9,8 @@
   "private": false,
   "dependencies": {
     "markdown-it": "^10.0.0",
-    "vuepress-plugin-container": "^2.0.2"
+    "vuepress-plugin-container": "^2.0.2",
+    "vuex": "^3.1.3"
   },
   "devDependencies": {},
   "scripts": {}

styles/index.styl

@@ -197,4 +197,5 @@ div.table {
 }
 
 @require '~@theme/styles/mobile.styl'
+@require '~@theme/styles/split.styl'