Merge pull request #24 from IPLSplatoon/new-docs

New documentation site

Author: inkfarer

.eslintignore

@@ -1,4 +1,3 @@
 webpack.config.js
-webpack.config.example-page.js
 node_modules/**/*
 dist/**/*

.github/workflows/ci.yml

@@ -9,12 +9,15 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout this repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
+
+      - name: Enable Corepack before setting up Node
+        run: corepack enable
 
       - name: Set up Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
-          node-version: '16'
+          node-version-file: '.node-version'
           cache: 'yarn'
 
       - name: Install dependencies
@@ -39,18 +42,21 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout this repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
+
+      - name: Enable Corepack before setting up Node
+        run: corepack enable
 
       - name: Set up Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
-          node-version: '16'
+          node-version-file: '.node-version'
           registry-url: 'https://registry.npmjs.org'
           cache: 'yarn'
 
       - name: Install dependencies
         run: yarn
       - run: yarn build
-      - run: yarn publish
+      - run: yarn npm publish
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -1,7 +1,17 @@
 node_modules
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
 dist
 
 result.json
 
 # Files from packaging for local testing
 /*.tgz
+
+docs/.vitepress/dist
+docs/.vitepress/cache

.idea/Components.iml

@@ -0,0 +1 @@
+20.5.1

.node-version

@@ -0,0 +1 @@
+nodeLinker: node-modules

.yarnrc.yml

@@ -1,3 +1,7 @@
+# 2.10.1
+
+- Move docs to a vitepress-powered concoction, combining the previously separate plain-text docs and locally built examples into a single site
+
 # 2.10.0
 
 - ipl-select emits the full option object on update as an additional parameter

CHANGELOG.md

@@ -1,6 +1,6 @@
 # @iplsplatoon/vue-components
 
-[Docs](https://ipl-vue-components.readthedocs.io)
+[Docs](https://vue-components.iplabs.work/)
 
 Vue components for internal Inkling Performance Labs utilities, most notably [ipl-overlay-controls.](https://github.com/inkfarer/ipl-overlay-controls)
 

README.md

@@ -0,0 +1,27 @@
+import MarkdownIt from 'markdown-it'
+import container from 'markdown-it-container'
+
+export const demoPlugin = (md: MarkdownIt) => {
+    md.use(container, 'demo', {
+        validate(params) {
+            return params.trim().match(/^demo\s+(.*)$/) != null
+        },
+
+        render(tokens, idx, _options, env) {
+            const token = tokens[idx];
+            if (token.type.endsWith('open')) {
+                const componentName = token.info.trim().split(' ')[1]
+                return md.render(`
+<div class="demo-section">\n
+<demo source-file="${componentName}" />\n
+<IplExpandingSpace title="View Source" class="source-example">\n
+<<< @/examples/${componentName}.vue#example{vue-html}
+</IplExpandingSpace>\n
+</div>
+                `, env)
+            } else {
+                return ''
+            }
+        }
+    } satisfies container.ContainerOpts)
+}

docs/.vitepress/DemoMarkdownPlugin.ts

@@ -0,0 +1,84 @@
+<template>
+    <div class="demo-preview">
+        <component :is="component" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { shallowRef } from 'vue';
+
+const props = defineProps<{
+    sourceFile: string
+}>()
+
+const component = shallowRef(null)
+import(`../../examples/${props.sourceFile}.vue`).then(result => {
+    component.value = result.default
+})
+</script>
+
+<style lang="scss">
+@use 'src/styles/colors';
+
+html.dark .demo-preview > *:first-child {
+    --line-color: #37445C;
+}
+
+.demo-preview {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    > * {
+        width: 100%;
+    }
+}
+
+.demo-preview > *:first-child {
+    $grid-size: 8px;
+    $grid-width: 1px;
+    --line-color: #E5E9F0;
+
+    background-size: $grid-size $grid-size;
+    background-position: $grid-size $grid-size;
+    background-color: var(--vp-c-bg);
+    background-image:
+        linear-gradient(to right, var(--line-color) $grid-width, transparent $grid-width),
+        linear-gradient(to bottom, var(--line-color) $grid-width, transparent $grid-width);
+
+    font-family: 'Roboto', sans-serif;
+    font-weight: 400;
+    padding: 24px;
+
+    &.resizable {
+        resize: horizontal;
+        overflow: hidden;
+        max-width: 100%;
+        min-width: 150px;
+    }
+}
+
+.demo-preview > *.alt-background:first-child {
+    background-color: var(--vp-c-bg-alt);
+}
+
+.demo-preview > *.gray-background:first-child {
+    background-color: #bbb;
+    --line-color: #999 !important;
+}
+
+.width-capped-content > * {
+    max-width: 400px;
+    margin: 0 auto;
+}
+
+.demo-preview > *:not(:first-child, .ipl-expansion-panel__content) {
+    background-color: var(--vp-c-bg);
+    border-radius: 8px;
+    padding: 8px;
+}
+
+.demo-preview > *:not(:first-child) {
+    margin-top: 8px;
+}
+</style>