update other guide & config pages

docs/.vitepress/config/cms/blocks.ts

@@ -1,14 +1,116 @@
-import { DecapCmsField } from 'vite-plugin-decap-cms'
+import { createField, DecapCmsField, fieldToSnakeCase, Options } from 'vite-plugin-decap-cms'
+
+type Block = NonNullable<NonNullable<Options['script']>['markdownEditorComponents']>[number]
+
+interface ComponentBlockOptions {
+    id: string
+    label: string
+    props: DecapCmsField[]
+    templateField?: {
+        label: string
+        labelSingular: string
+        nameLabel?: string
+        contentLabel?: string
+        names?: string[]
+    }
+}
+
+// TODO: fix enters while transitioning
+function createComponentBlock (options: ComponentBlockOptions): Block {
+    const { id, label, props, templateField } = options
+
+    interface ComponentData {
+        templates: {
+            name: string | null;
+            content: string;
+        }[]
+        props: Record<string, unknown>
+    }
+
+    return {
+        id,
+        label,
+        pattern: new RegExp(`^<${id}(.*)>((.|\\n)*?)<\\/${id}>$`, 'm'),
+        fields: [
+            createField('object', {
+                name: 'props',
+                label: 'Properties',
+                required: false,
+                collapsed: true,
+                fields: props.map(fieldToSnakeCase),
+            }),
+            templateField != undefined ? createField('list', {
+                name: 'templates',
+                label: templateField.label,
+                label_singular: templateField.labelSingular,
+                allow_add: true,
+                required: false,
+                min: 1,
+                fields: [
+                    createField(templateField.names ? 'select' : 'string', {
+                        name: 'name',
+                        required: false,
+                        label: templateField.nameLabel ?? 'Name',
+                        // @ts-expect-error
+                        options: templateField.names,
+                    }),
+                    createField('markdown', {
+                        name: 'content',
+                        required: true,
+                        label: templateField.contentLabel ?? 'Content',
+                    }),
+                ].filter((n): n is NonNullable<typeof n> => n != undefined),
+            }) : undefined,
+        ].filter(n => n) as Block['fields'],
+        fromBlock: function (match): ComponentData {
+            console.log(match)
+            const props = match.at(1), slots = match.at(2)
+
+            return {
+                props: props != undefined
+                    ? props.split(/(?= :)(?<=")/)
+                        .map(str => str.trim().replace(':', '').split('=', 2))
+                        .reduce((obj, value) => ({ ...obj, [value[0]]: value[1] }), {})
+                    : {},
+                templates: slots != undefined
+                    ? slots.split('</template>').filter(str => str.length).map((slot) => {
+                        //@ts-ignore
+                        const results = /^<template #(.*)>(.*)/ms.exec(slot) ?? []
+                        console.log([slots], slot, results)
+                        const name = results.at(1)
+
+                        return {
+                            name: name ?? null,
+                            content: results.at(2) ?? slot,
+                        }
+                    }) : [],
+            }
+        },
+        toBlock: function (data: ComponentData) {
+            const templates = data.templates.map(({ name, content }) => {
+                return `<template${name ? ` #${name}` : ''}>\n${content}\n</template>`
+            })
+
+            const props = Object.entries(data.props)
+                .reduce((str, prop) => str + ` :${prop[0]}="${prop[1]}"`, ' ')
+
+            return `<${id}${props}>\n${templates}\n</${id}>`
+        },
+        toPreview: function (data: ComponentData) {
+            return ''
+        },
+    }
+}
 
 type BlockFields = { summary?: string, contents: string, type: string }
 
-export const customContainerBlock = {
+const customContainerBlock: Block = {
     id: 'custom-block',
-    label: 'Custom block',
+    label: 'Custom comtainer',
     fields: [
         {
             name: 'type',
-            label: 'Type of block',
+            label: 'Type of comtainer',
             widget: 'select',
             required: true,
             options: [
@@ -36,7 +138,7 @@ export const customContainerBlock = {
     ] satisfies DecapCmsField[],
     // @ts-expect-error Needs flag to work
     pattern: /^:::(\w+)(.*?)\n(.*?)\n^:::$/ms,
-    fromBlock: function (match: RegExpMatchArray): BlockFields {
+    fromBlock: function (match): BlockFields { 
         return {
             type: match[1],
             summary: match[2],
@@ -50,3 +152,61 @@ export const customContainerBlock = {
         return `:::${data.type} ${data.summary}\n${data.contents}\n:::`
     },
 }
+
+export default [
+    customContainerBlock,
+    createComponentBlock({
+        id: 'steps',
+        label: 'Steps component',
+        templateField: {
+            label: 'Steps',
+            labelSingular: 'step',
+        },
+        props: [
+            createField('string', {
+                name: 'color',
+                label: 'Color',
+                required: false,
+            }),
+        ],
+    }),
+    createComponentBlock({
+        id: 'tabs',
+        label: 'Tabs component',
+        templateField: {
+            label: 'Tabs',
+            labelSingular: 'tab',
+            nameLabel: 'Id',
+        },
+        props: [
+            createField('list', {
+                name: 'tabs',
+                label: 'Tab names',
+                label_singular: 'name',
+                allow_add: true,
+                required: true,
+            }),
+            createField('string', {
+                name: 'startTab',
+                label: 'Start tab name',
+                required: false,
+            }),
+            createField('string', {
+                name: 'searchParam',
+                label: 'Search parameter',
+                required: false,
+            }),
+        ]
+    }),
+    createComponentBlock({
+        id: 'ActionBlock',
+        label: 'Action block component',
+        templateField: {
+            label: 'Content',
+            labelSingular: 'content',
+            names: ['left', 'right'],
+            nameLabel: 'Position',
+        },
+        props: [],
+    }),
+]

docs/.vitepress/config/cms/collections.ts

@@ -140,7 +140,8 @@ export default function (): DecapCmsCollection[] {
                 return createFolderCollection({
                     base,
                     label: config.text ?? items[0].text!,
-                    mediaFolder: '',
+                    description: config.description,
+                    mediaFolder: config.mediaFolder,
                 })
             }),
     ]

docs/.vitepress/config/cms/index.ts

@@ -8,7 +8,7 @@ import {
     WEBSITE_URL,
 } from '../shared'
 
-import { customContainerBlock } from './blocks'
+import markdownEditorComponents from './blocks'
 import createCollections, { getCollectionItemEditLink } from './collections'
 import { mediaFolder, publicFolder } from './options'
 
@@ -23,9 +23,7 @@ export default decap({
         title: config.cms.title,
     },
     script: {
-        markdownEditorComponents: [
-            customContainerBlock,
-        ],
+        markdownEditorComponents,
     },
     config: {
         backend: {

docs/.vitepress/config/navbar.ts

@@ -78,6 +78,10 @@ export default <DefaultTheme.NavItem[]>[
                 text: 'References',
                 link: '/resources/references/guide'
             },
+            {
+                text: 'Tips and Tricks',
+                link: '/tipstricks/'
+            },
             {
                 text: 'Community',
                 items: [
@@ -121,12 +125,16 @@ export default <DefaultTheme.NavItem[]>[
                 text: 'Roadmap',
                 link: '/more/roadmap'
             },
+            {
+                text: 'UE5',
+                link: '/more/ue5'
+            },
             {
                 text: 'Contribute',
                 items: [
                     {
                         text: 'Contributing guide',
-                        link: GITHUB_REPOSITORY_URL + `/blob/${GITHUB_DEFAULT_BRANCH}/CONTRIBUTING.md`
+                        link: `${GITHUB_REPOSITORY_URL}/blob/${GITHUB_DEFAULT_BRANCH}/CONTRIBUTING.md`
                     },
                     {
                         text: 'GitHub',

docs/.vitepress/config/sidebar.ts

@@ -417,15 +417,14 @@ const sidebar: Sidebar = {
         base: '/cheatsheet/',
         meta: {
             description: '',
-            mediaFolder: '',
+            mediaFolder: 'cheatsheets/',
         },
         items: [
             {
-                text: 'Cheat Sheets',
-                collapsed: false,
+                text: 'Cheatsheets',
                 items: [
                     {
-                        text: 'Cheat Sheets',
+                        text: 'Cheatsheets',
                         link: 'index.html',
                     },
                     {
@@ -481,6 +480,20 @@ const sidebar: Sidebar = {
         ]
     },
 
+    '/tipstricks/': {
+        base: '/tipstricks/',
+        meta: {
+            description: 'Tips and tricks',
+            mediaFolder: 'tipstricks/',
+        },
+        items: [
+            {
+                text: 'Tips & tricks',
+                link: 'index.html'
+            },
+        ]
+    },
+
     '/resources/references/': {
         base: '/resources/references/',
         meta: {
@@ -490,25 +503,15 @@ const sidebar: Sidebar = {
         items: [
             {
                 text: 'References',
-                collapsed: false,
                 items: [
                     {
-                        text: 'Guide',
+                        text: 'Guide links',
                         link: 'guide',
                     },
-                    {
-                        text: 'Psyonix Links',
-                        link: 'psyonix',
-                    },
-                    {
-                        text: 'UE5',
-                        link: 'ue5',
-                    },
                 ]
             },
             {
-                text: 'Kismet References',
-                collapsed: false,
+                text: 'Kismet',
                 items: [
                     {
                         text: 'Kismet nodes',
@@ -532,7 +535,6 @@ const sidebar: Sidebar = {
         items: [
             {
                 text: 'More Information',
-                collapsed: false,
                 items: [
                     {
                         text: 'About',
@@ -550,6 +552,10 @@ const sidebar: Sidebar = {
                         text: 'Roadmap',
                         link: 'roadmap',
                     },
+                    {
+                        text: 'UE5',
+                        link: 'ue5'
+                    }
                 ],
             },
         ]

docs/.vitepress/theme/index.ts

@@ -7,6 +7,13 @@ export default {
     ...ThemeRLMM,
     enhanceApp (ctx) {
         ThemeRLMM.enhanceApp(ctx)
-        ctx.app.component('DocFeatures', DocFeatures)
+
+        const components = [
+            ['DocFeatures', DocFeatures],
+        ] as const
+
+        for (const [name, component] of components) {
+            ctx.app.component(name, component)
+        }
     },
 } satisfies Theme