chore: 🔧 update Docus (#235)

danielroe · May 21, 2021 · 2d205fd · 2d205fd · vercel · May 21, 2021
1 parent e54ad12
commit 2d205fd
Show file tree

Hide file tree

Showing 21 changed files with 2,405 additions and 2,563 deletions.
diff --git a/docs/content/en/build.md b/docs/content/en/build.md
diff --git a/docs/content/en/runtime.md b/docs/content/en/runtime.md
diff --git a/docs/content/en/vue.md b/docs/content/en/vue.md
diff --git a/docs/content/settings.json b/docs/content/settings.json
diff --git a/docs/docus.config.js b/docs/docus.config.js
@@ -0,0 +1,8 @@
+export default {
+  title: 'Typed Vuex',
+  url: 'https://typed-vuex.roe.dev/',
+  twitter: 'danielcroe',
+  github: {
+    repo: 'danielroe/typed-vuex',
+  },
+}
diff --git a/docs/nuxt.config.js b/docs/nuxt.config.js
@@ -1,4 +1,5 @@
 import { withDocus } from 'docus'
 
 export default withDocus({
+  rootDir: __dirname,
 })
diff --git a/docs/package.json b/docs/package.json
@@ -1,13 +1,11 @@
 {
   "private": true,
   "scripts": {
-    "dev": "nuxt",
-    "generate": "nuxt generate",
+    "dev": "npx nuxt dev",
+    "generate": "npx nuxt generate",
     "now-build": "yarn generate"
   },
   "devDependencies": {
-    "core-js": "3.12.1",
-    "docus": "0.1.5",
-    "nuxt": "^2.15.5"
+    "docus": "^0.5.6"
   }
 }
diff --git a/docs/content/en/getting-started-nuxt.md → ...getting-started/1.getting-started-nuxt.md b/docs/content/en/getting-started-nuxt.md → ...getting-started/1.getting-started-nuxt.md
@@ -1,33 +1,32 @@
 ---
 title: Getting started (Nuxt)
 description: 'Vanilla, strongly-typed store accessor.'
-category: Getting started
-position: 2
 ---
 
 ## Install module
 
 1. Install Nuxt module:
 
-    <d-code-group>
-    <d-code-block label="Yarn" active>
-
-    ```bash
-    yarn add nuxt-typed-vuex
-    ```
-
-    </d-code-block>
-    <d-code-block label="NPM">
-
-    ```bash
-    npm install nuxt-typed-vuex --save
-    ```
-
-    </d-code-block>
-
-    </d-code-group>
-
-    <d-alert type="info">This will also install `typed-vuex` in your project, which is where the store accessor lives. All the helper functions are imported from `typed-vuex`.</d-alert>
+   :::::code-group
+   ::::code-block{label="Yarn" active}
+
+   ```bash
+   yarn add nuxt-typed-vuex
+   ```
+
+   ::::
+   code-block{label="NPM"}
+
+   ```bash
+   npm install nuxt-typed-vuex --save
+   ```
+
+   ::::
+   :::::
+
+   :::alert{type="info"}
+   This will also install `typed-vuex` in your project, which is where the store accessor lives. All the helper functions are imported from `typed-vuex`.
+   :::
 
 2. Add module to your `nuxt.config`:
 
@@ -37,11 +36,9 @@ position: 2
    ],
    ```
 
-   <d-alert type="info">
-
+   :::alert{type="info"}
    `buildModules` require Nuxt 2.10+. If you are using an older version, add `nuxt-typed-vuex` to `modules` instead.
-
-    </d-alert>
+   :::
 
 ## Add type definitions
 
@@ -73,7 +70,9 @@ export const accessorType = getAccessorType({
 })
 ```
 
-<d-alert type="info">This may look different if you split your modules into separate files for `state`, `actions`, `mutations` and `getters`.</d-alert>
+:::alert{type="info"}
+This may look different if you split your modules into separate files for `state`, `actions`, `mutations` and `getters`.
+:::
 
 ### Creating type definitions
 

diff --git a/docs/content/en/getting-started-vue.md → ....getting-started/2.getting-started-vue.md b/docs/content/en/getting-started-vue.md → ....getting-started/2.getting-started-vue.md
@@ -1,38 +1,34 @@
 ---
 title: Getting started (Vue)
 description: 'Vanilla, strongly-typed store accessor.'
-category: Getting started
-position: 3
 ---
 
 If you would like to benefit from a typed accessor to your store, but you're not using Nuxt, you can still use `typed-vuex`.
 
-<d-alert>
-
+:::alert
 Many of this project's default settings are based on Nuxt, so please file an issue if you experience any problems.
-
-</d-alert>
+:::
 
 ## Setup
 
 1. Install package:
 
-   <d-code-group>
-    <d-code-block label="Yarn" active>
+   :::::code-group
+   ::::code-block{label="Yarn" active}
 
-    ```bash
-    yarn add typed-vuex
-    ```
+   ```bash
+   yarn add typed-vuex
+   ```
 
-    </d-code-block>
-    <d-code-block label="NPM">
+   ::::
+   ::::code-block{label="NPM"}
 
-    ```bash
-    npm install typed-vuex --save
-    ```
+   ```bash
+   npm install typed-vuex --save
+   ```
 
-    </d-code-block>
-   </d-code-group>
+   ::::
+   :::::
 
 2. Instantiate your accessor
 

diff --git a/docs/content/en/index.md → docs/pages/en/1.index.md b/docs/content/en/index.md → docs/pages/en/1.index.md
@@ -1,16 +1,6 @@
 ---
 title: Introduction
 description: 'Vanilla, strongly-typed store accessor.'
-category: Getting started
-position: 1
-list:
-  - store definition with vanilla Vuex code
-  - strongly typed accessor
-  - fast performance
-  - small footprint
-  - compatible with Nuxt
-  - access this.$axios and the app/store instance from within actions
-  - minimal setup/boilerplate
 ---
 
 Nuxt Typed Vuex is made up of two packages:
@@ -24,7 +14,17 @@ Typing vanilla Vuex is complicated. Many people choose a class-based approach wi
 
 `nuxt-typed-vuex` was developed to address this problem. It features:
 
-<list :items="list"></list>
+:::list
+
+- store definition with vanilla Vuex code
+- strongly typed accessor
+- fast performance
+- small footprint
+- compatible with Nuxt
+- access this.\$axios and the app/store instance from within actions
+- minimal setup/boilerplate
+
+:::
 
 ![Image showing autocomplete on this.$accessor](./images/screenshot1.png)
 

diff --git a/docs/content/en/accessor-introduction.md → ...en/2.accessor/1..accessor-introduction.md b/docs/content/en/accessor-introduction.md → ...en/2.accessor/1..accessor-introduction.md
@@ -1,8 +1,6 @@
 ---
 title: Introduction
 description: 'Vanilla, strongly-typed store accessor.'
-category: Accessor
-position: 10
 ---
 
 The accessor serves two purposes:
@@ -16,11 +14,9 @@ The accessor serves two purposes:
 2. Getters take priority over state (so state is not included if a getter of the same name exists).
 3. Modules are namespaced.
 
-<d-alert type="warning">
-
+:::alert{type="warning"}
 Because the accessor is flattened, you should avoid using the same name more than once between your getters, state, mutations and actions or you may receive the following error: `Cannot set property <name> of #<Object> which has only a getter.`
-
-</d-alert>
+:::
 
 So, for example:
 

diff --git a/docs/content/en/dynamic-modules.md → .../pages/en/2.accessor/2.dynamic-modules.md b/docs/content/en/dynamic-modules.md → .../pages/en/2.accessor/2.dynamic-modules.md
@@ -1,8 +1,6 @@
 ---
 title: Dynamic modules
 description: 'Vanilla, strongly-typed store accessor.'
-category: Accessor
-position: 11
 ---
 
 You can also use `typed-vuex` with dynamic modules.

diff --git a/docs/content/en/customisation.md → docs/pages/en/2.accessor/3.customisation.md b/docs/content/en/customisation.md → docs/pages/en/2.accessor/3.customisation.md
@@ -1,8 +1,6 @@
 ---
 title: Customisation
 description: 'Vanilla, strongly-typed store accessor.'
-category: Accessor
-position: 12
 ---
 
 You might choose to customise the accessor function using the helper function `useAccessor`. You pass this an object with `state`, `actions`, `mutations`, etc. Child modules are within a `modules` property.
@@ -32,7 +30,9 @@ export default async ({ store }: Context, inject: Inject) => {
 }
 ```
 
-<d-alert>If you are using a custom accessor in a Nuxt project, bear in mind that `useAccessor` used on its own will treat modules as non-namespaced unless they include `namespaced: true`.</d-alert>
+:::alert
+If you are using a custom accessor in a Nuxt project, bear in mind that `useAccessor` used on its own will treat modules as non-namespaced unless they include `namespaced: true`.
+:::
 
 ## Typing your custom accessor
 

diff --git a/docs/content/en/state.md → docs/pages/en/3.store/1.state.md b/docs/content/en/state.md → docs/pages/en/3.store/1.state.md
@@ -1,8 +1,6 @@
 ---
 title: State
 description: 'Vanilla, strongly-typed store accessor.'
-category: Store
-position: 20
 ---
 
 In order to use the accessor, you should define your state with a function that returns the initial state of the store.

diff --git a/docs/content/en/getters.md → docs/pages/en/3.store/2.getters.md b/docs/content/en/getters.md → docs/pages/en/3.store/2.getters.md
@@ -1,19 +1,15 @@
 ---
 title: Getters
 description: 'Vanilla, strongly-typed store accessor.'
-category: Store
-position: 21
 ---
 
 A getter is a function that receives `state`, `getters`, `rootState` and `rootGetters`.
 
 This package provides a helper function to reduce boilerplate: `getterTree`. This function adds typings and returns the getters passed to it, without transforming them.
 
-<d-alert>
-
+:::alert
 `typed-vuex` does not currently type-check anything but the state received.
-
-</d-alert>
+:::
 
 ```ts
 // Vanilla
@@ -37,8 +33,6 @@ export const getters = getterTree(state, {
 })
 ```
 
-<d-alert type="info">
-
+:::alert{type="info"}
 Even if you do not use the `getterTree` helper function, make sure not to use the `GetterTree` type provided by Vuex. This will interfere with type inference. You won't lose out by omitting it, as Typescript will complain if you pass an improperly formed getter into [the `getAccessorType` function](/getting-started-nuxt#add-type-definitions).
-
-</d-alert>
+:::
diff --git a/docs/content/en/mutations.md → docs/pages/en/3.store/3.mutations.md b/docs/content/en/mutations.md → docs/pages/en/3.store/3.mutations.md
@@ -1,8 +1,6 @@
 ---
 title: Mutations
 description: 'Vanilla, strongly-typed store accessor.'
-category: Store
-position: 22
 ---
 
 Mutations are functions that receive store state and an optional payload.
@@ -37,10 +35,10 @@ export const mutations = mutationTree(state, {
 })
 ```
 
-<d-alert type="info">
+:::alert{type="info"}
 
 1. Even if you do not use the `mutationTree` helper function, make sure not to use the `MutationTree` type provided by Vuex. This will interfere with type inference. You won't lose out by omitting it, as Typescript will complain if you pass an improperly formed mutation into [the `getAccessorType` function](/getting-started-nuxt#add-type-definitions).
 
 2. This package does not support [object-style commits](https://vuex.vuejs.org/guide/mutations.html#object-style-commit).
 
-</d-alert>
+:::
diff --git a/docs/content/en/actions.md → docs/pages/en/3.store/4.actions.md b/docs/content/en/actions.md → docs/pages/en/3.store/4.actions.md
@@ -1,23 +1,23 @@
 ---
 title: Actions
 description: 'Vanilla, strongly-typed store accessor.'
-category: Store
-position: 23
 ---
 
 Actions are async functions that have access to the Vuex instance and are passed a context object and optional payload.
 
 This package provides a helper function to reduce boilerplate: `actionTree`. This function adds typings and returns the actions passed to it, without transforming them.
 
-<d-alert>If you use the helper function, only the `commit` method is typed - and only for mutations within the module.</d-alert>
+:::alert
+If you use the helper function, only the `commit` method is typed - and only for mutations within the module.
+:::
 
-<d-alert type="info">
+:::alert{type="info"}
 
 1. Even if you do not use the `actionTree` helper function, make sure not to use the `ActionTree` type provided by Vuex. This will interfere with type inference. You won't lose out by omitting it, as Typescript will complain if you pass an incompatible action into [the `getAccessorType` function](/getting-started-nuxt#add-type-definitions).
 
 2. This package does not support [object-style dispatches](https://vuex.vuejs.org/guide/actions.html).
 
-</d-alert>
+:::
 
 ## Referencing other modules
 

diff --git a/docs/pages/en/4.examples/1.build.md b/docs/pages/en/4.examples/1.build.md
@@ -0,0 +1,7 @@
+---
+title: Normal usage
+description: 'Vanilla, strongly-typed store accessor.'
+fullscreen: true
+---
+
+:::code-sandbox{src="https://codesandbox.io/s/github/danielroe/typed-vuex/tree/main/examples/nuxt?from-embed"}
diff --git a/docs/pages/en/4.examples/2.runtime.md b/docs/pages/en/4.examples/2.runtime.md
@@ -0,0 +1,7 @@
+---
+title: Typescript runtime
+description: 'Vanilla, strongly-typed store accessor.'
+fullscreen: true
+---
+
+:::code-sandbox{src="https://codesandbox.io/s/github/danielroe/typed-vuex/tree/main/examples/nuxt-ts?from-embed"}