Work on the editor

.eslintrc-auto-import.json

@@ -82,6 +82,9 @@
     "Watch": true,
     "toNative": true,
     "Vue": true,
-    "ComponentBase": true
+    "ComponentBase": true,
+    "EditorComponent": true,
+    "VueMarkdown": true,
+    "MarkdownRenderer": true
   }
 }

.eslintrc.cjs

@@ -63,9 +63,7 @@ module.exports = {
 		],
 		'@stylistic/function-paren-newline': [
 			'error',
-			{
+			'multiline-arguments'
-				minItems: 5
-			}
 		],
 		'@stylistic/indent': [
 			'error',
@@ -141,7 +139,10 @@ module.exports = {
 		],
 		'@stylistic/quotes': [
 			'error',
-			'single'
+			'single',
+			{
+				allowTemplateLiterals: true
+			}
 		],
 		'@stylistic/rest-spread-spacing': [
 			'error',
@@ -187,6 +188,14 @@ module.exports = {
 			2
 		],
 		'vue/multi-word-component-names': 'off',
-		'vue/require-typed-ref': 'error'
+		'vue/require-typed-ref': 'error',
+		'vue/block-lang': [
+			'error',
+			{
+				script: {
+					lang: 'ts'
+				}
+			}
+		]
 	}
 };

auto-imports.d.ts

@@ -7,9 +7,11 @@ export {}
 declare global {
   const Component: typeof import('vue-facing-decorator')['Component']
   const ComponentBase: typeof import('vue-facing-decorator')['ComponentBase']
+  const EditorComponent: typeof import('./src/components/EditorComponent.vue')['default']
   const Emit: typeof import('vue-facing-decorator')['Emit']
   const Hook: typeof import('vue-facing-decorator')['Hook']
   const Inject: typeof import('vue-facing-decorator')['Inject']
+  const MarkdownRenderer: typeof import('./src/components/MarkdownRenderer.vue')['default']
   const Model: typeof import('vue-facing-decorator')['Model']
   const NavbarComponent: typeof import('./src/components/NavbarComponent.vue')['default']
   const Prop: typeof import('vue-facing-decorator')['Prop']
@@ -20,6 +22,7 @@ declare global {
   const VModel: typeof import('vue-facing-decorator')['VModel']
   const Vanilla: typeof import('vue-facing-decorator')['Vanilla']
   const Vue: typeof import('vue-facing-decorator')['Vue']
+  const VueMarkdown: typeof import('vue-markdown')['VueMarkdown']
   const Watch: typeof import('vue-facing-decorator')['Watch']
   const toNative: typeof import('vue-facing-decorator')['toNative']
 }

components.d.ts

@@ -8,6 +8,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     EditorComponent: typeof import('./src/components/EditorComponent.vue')['default']
+    MarkdownRenderer: typeof import('./src/components/MarkdownRenderer.vue')['default']
     NavbarComponent: typeof import('./src/components/NavbarComponent.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

package.json

@@ -1,49 +1,51 @@
 {
-  "name": "the-bingo-experience",
+	"name": "the-bingo-experience",
-  "version": "0.0.0",
+	"version": "0.0.0",
-  "private": true,
+	"private": true,
-  "scripts": {
+	"scripts": {
-    "dev": "vite",
+		"dev": "vite",
-    "build": "run-p type-check \"build-only {@}\" --",
+		"build": "run-p type-check \"build-only {@}\" --",
-    "preview": "vite preview",
+		"preview": "vite preview",
-    "test:unit": "vitest",
+		"test:unit": "vitest",
-    "build-only": "vite build",
+		"build-only": "vite build",
-    "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
+		"type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
+		"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
-  },
+	},
-  "dependencies": {
+	"dependencies": {
-    "@quasar/extras": "^1.16.8",
+		"@quasar/extras": "^1.16.8",
-    "class-transformer": "^0.5.1",
+		"@types/markdown-it": "^13.0.6",
-    "pinia": "^2.1.7",
+		"class-transformer": "^0.5.1",
-    "quasar": "^2.13.1",
+		"markdown-it": "^13.0.2",
-    "reflect-metadata": "^0.1.13",
+		"pinia": "^2.1.7",
-    "vue": "^3.3.4",
+		"quasar": "^2.13.1",
-    "vue-facing-decorator": "^3.0.4",
+		"reflect-metadata": "^0.1.13",
-    "vue-router": "^4.2.5"
+		"vue": "^3.3.4",
-  },
+		"vue-facing-decorator": "^3.0.4",
-  "devDependencies": {
+		"vue-router": "^4.2.5"
-    "@quasar/vite-plugin": "^1.6.0",
+	},
-    "@rushstack/eslint-patch": "^1.3.3",
+	"devDependencies": {
-    "@stylistic/eslint-plugin": "^1.1.0",
+		"@quasar/vite-plugin": "^1.6.0",
-    "@tsconfig/node18": "^18.2.2",
+		"@rushstack/eslint-patch": "^1.3.3",
-    "@types/jsdom": "^21.1.3",
+		"@stylistic/eslint-plugin": "^1.1.0",
-    "@types/node": "^18.18.5",
+		"@tsconfig/node18": "^18.2.2",
-    "@vitejs/plugin-vue": "^4.4.0",
+		"@types/jsdom": "^21.1.3",
-    "@vitejs/plugin-vue-jsx": "^3.0.2",
+		"@types/node": "^18.18.5",
-    "@vue/eslint-config-typescript": "^12.0.0",
+		"@vitejs/plugin-vue": "^4.4.0",
-    "@vue/test-utils": "^2.4.1",
+		"@vitejs/plugin-vue-jsx": "^3.0.2",
-    "@vue/tsconfig": "^0.4.0",
+		"@vue/eslint-config-typescript": "^12.0.0",
-    "eslint": "^8.49.0",
+		"@vue/test-utils": "^2.4.1",
-    "eslint-plugin-vue": "^9.17.0",
+		"@vue/tsconfig": "^0.4.0",
-    "jsdom": "^22.1.0",
+		"eslint": "^8.49.0",
-    "npm-run-all2": "^6.1.1",
+		"eslint-plugin-vue": "^9.17.0",
-    "sass": "1.32.12",
+		"jsdom": "^22.1.0",
-    "typescript": "~5.2.0",
+		"npm-run-all2": "^6.1.1",
-    "unplugin-auto-import": "^0.16.7",
+		"sass": "1.32.12",
-    "unplugin-vue-components": "^0.25.2",
+		"typescript": "~5.2.0",
-    "unplugin-vue-router": "^0.7.0",
+		"unplugin-auto-import": "^0.16.7",
-    "vite": "^4.4.11",
+		"unplugin-vue-components": "^0.25.2",
-    "vitest": "^0.34.6",
+		"unplugin-vue-router": "^0.7.0",
-    "vue-tsc": "^1.8.19"
+		"vite": "^4.4.11",
-  }
+		"vitest": "^0.34.6",
-}
+		"vue-tsc": "^1.8.19"
+	}
+}

pnpm-lock.yaml

@@ -8,9 +8,15 @@ dependencies:
   '@quasar/extras':
     specifier: ^1.16.8
     version: 1.16.8
+  '@types/markdown-it':
+    specifier: ^13.0.6
+    version: 13.0.6
   class-transformer:
     specifier: ^0.5.1
     version: 0.5.1
+  markdown-it:
+    specifier: ^13.0.2
+    version: 13.0.2
   pinia:
     specifier: ^2.1.7
     version: 2.1.7(typescript@5.2.2)(vue@3.3.8)
@@ -840,6 +846,21 @@ packages:
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
     dev: true
 
+  /@types/linkify-it@3.0.5:
+    resolution: {integrity: sha512-yg6E+u0/+Zjva+buc3EIb+29XEg4wltq7cSmd4Uc2EE/1nUVmxyzpX6gUXD0V8jIrG0r7YeOGVIbYRkxeooCtw==}
+    dev: false
+
+  /@types/markdown-it@13.0.6:
+    resolution: {integrity: sha512-0VqpvusJn1/lwRegCxcHVdmLfF+wIsprsKMC9xW8UPcTxhFcQtoN/fBU1zMe8pH7D/RuueMh2CaBaNv+GrLqTw==}
+    dependencies:
+      '@types/linkify-it': 3.0.5
+      '@types/mdurl': 1.0.5
+    dev: false
+
+  /@types/mdurl@1.0.5:
+    resolution: {integrity: sha512-6L6VymKTzYSrEf4Nev4Xa1LCHKrlTlYCBMTlQKFuddo1CvQcE52I0mwfOJayueUC7MJuXOeHTcIU683lzd0cUA==}
+    dev: false
+
   /@types/node@18.18.9:
     resolution: {integrity: sha512-0f5klcuImLnG4Qreu9hPj/rEfFq6YRc5n2mAjSsH+ec/mJL+3voBH0+8T7o8RpFjH7ovc+TRsL/c7OYIQsPTfQ==}
     dependencies:
@@ -1338,7 +1359,6 @@ packages:
 
   /argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
-    dev: true
 
   /array-union@2.1.0:
     resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
@@ -1666,6 +1686,11 @@ packages:
     resolution: {integrity: sha512-T5q3pjQon853xxxHUq3ZP68ZpvJHuSMY2+BZaW3QzjS4HvNuvsMmZ/+lU+nCrftre1jFZ+OSlExynXWBihnXzw==}
     dev: true
 
+  /entities@3.0.1:
+    resolution: {integrity: sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==}
+    engines: {node: '>=0.12'}
+    dev: false
+
   /entities@4.5.0:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
@@ -2264,6 +2289,12 @@ packages:
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     dev: true
 
+  /linkify-it@4.0.1:
+    resolution: {integrity: sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==}
+    dependencies:
+      uc.micro: 1.0.6
+    dev: false
+
   /local-pkg@0.4.3:
     resolution: {integrity: sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==}
     engines: {node: '>=14'}
@@ -2331,6 +2362,21 @@ packages:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.15
 
+  /markdown-it@13.0.2:
+    resolution: {integrity: sha512-FtwnEuuK+2yVU7goGn/MJ0WBZMM9ZPgU9spqlFs7/A/pDIUNSOQZhUgOqYCficIuR2QaFnrt8LHqBWsbTAoI5w==}
+    hasBin: true
+    dependencies:
+      argparse: 2.0.1
+      entities: 3.0.1
+      linkify-it: 4.0.1
+      mdurl: 1.0.1
+      uc.micro: 1.0.6
+    dev: false
+
+  /mdurl@1.0.1:
+    resolution: {integrity: sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==}
+    dev: false
+
   /memorystream@0.3.1:
     resolution: {integrity: sha512-S3UwM3yj5mtUSEfP41UZmt/0SCoVYUcU1rkXv+BQ5Ig8ndL4sPoJNBUJERafdPb5jjHJGuMgytgKvKIf58XNBw==}
     engines: {node: '>= 0.10.0'}
@@ -2959,6 +3005,10 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
+  /uc.micro@1.0.6:
+    resolution: {integrity: sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==}
+    dev: false
+
   /ufo@1.3.1:
     resolution: {integrity: sha512-uY/99gMLIOlJPwATcMVYfqDSxUR9//AUcgZMzwfSTJPDKzA1S8mX4VLqa+fiAtveraQUBCz4FFcwVZBGbwBXIw==}
     dev: true

src/components/EditorComponent.vue

@@ -1,3 +1,156 @@
 <template>
-  <span>Editor</span>
+  <div class="row q-pa-lg items-center justify-evenly q-col-gutter-md">
+    <div class="col-12" :style="{ 'max-width': '400px' }">
+      <q-card flat bordered>
+        <q-card-section horizontal>
+          <q-card-section>
+            <div class="text-h5 q-mt-sm q-mb-xs">New Game</div>
+            <div class="text-caption text-grey">
+              Add a new game
+            </div>
+          </q-card-section>
+
+          <q-space></q-space>
+
+          <q-card-section class="col-5 flex flex-center">
+            <q-avatar square size="100px">
+              <q-icon name="add" size="4rem"/>
+            </q-avatar>
+          </q-card-section>
+        </q-card-section>
+
+        <q-separator />
+
+        <q-card-actions>
+          <q-btn flat color="green" label="Add" />
+
+          <q-space/>
+
+          <q-btn flat color="blue" icon="upload" label="Import" />
+        </q-card-actions>
+      </q-card>
+    </div>
+  </div>
+
+  <div class="row q-pa-lg items-center justify-evenly q-col-gutter-md">
+    <div class="col-12">
+      <div class="row items-center justify-evenly">
+        <div class="col-4">
+          <q-input filled v-model="search" label="Search for games..." />
+        </div>
+      </div>
+    </div>
+
+    <div class="col" v-for="(game, index) of filtered_games" :key="game.id" :style="{ 'max-width': '500px' }">
+      <q-card flat bordered>
+        <q-card-section horizontal>
+          <q-card-section>
+            <div class="text-h5 q-mt-sm q-mb-xs">{{ game.name }}</div>
+            <div class="text-caption text-grey">
+              {{ game.short_description }}
+            </div>
+          </q-card-section>
+
+          <q-space></q-space>
+
+          <q-card-section class="col-5 flex justify-end">
+            <q-avatar square size="100px">
+              <q-img
+                :src="`https://picsum.photos/200/200?_=${index}`"
+                width="100%"
+                height="100%"
+              />
+            </q-avatar>
+          </q-card-section>
+        </q-card-section>
+
+        <q-separator />
+
+        <q-card-actions>
+          <q-btn flat icon="help" @click="selected_game = game">
+            <q-tooltip>
+              Learn more...
+            </q-tooltip>
+          </q-btn>
+          <q-btn flat icon="edit" color="green">
+            <q-tooltip>
+              Edit
+            </q-tooltip>
+          </q-btn>
+          <q-btn flat icon="delete" color="red">
+            <q-tooltip>
+              Delete
+            </q-tooltip>
+          </q-btn>
+
+          <q-space/>
+
+          <q-btn flat color="blue" icon="download" label="Export" />
+        </q-card-actions>
+      </q-card>
+    </div>
+  </div>
+
+  <q-dialog v-model="learn_more">
+    <q-card style="min-width: 700px; max-width: 80vw; min-height: 10vh; max-height: 80vh;">
+      <q-card-section class="row items-start">
+        <div class="col-2">
+          <q-avatar square size="200px">
+            <q-img
+              src="https://picsum.photos/200/200"
+              width="100%"
+              height="100%"
+            />
+          </q-avatar>
+        </div>
+        <div class="col-6">
+          <div class="text-h3">{{ selected_game?.name }}</div>
+          <div class="text-h6 text-grey">
+            {{ selected_game?.short_description }}
+          </div>
+        </div>
+      </q-card-section>
+
+      <q-card-section class="q-pt-none">
+        <MarkdownRenderer :text="selected_game?.description"/>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
 </template>
+
+<script lang="ts">
+import type {
+	BingoGame
+} from '@/js/Bingo.js';
+import {
+	games
+} from '@/js/ParseGamesJSON.js';
+
+@Component
+class EditorComponent extends Vue {
+	games: BingoGame[] = Array.from(games.values());
+
+	selected_game: BingoGame | undefined = undefined;
+
+	@Watch('selected_game')
+	onSelectedGameChange(newGame: BingoGame | undefined) {
+		if (newGame)
+			this.learn_more = true;
+	}
+
+	learn_more: boolean = false;
+
+	@Watch('learn_more')
+	onPopupClose(newValue: boolean) {
+		if (!newValue)
+			this.selected_game = undefined;
+	}
+
+	search: string = '';
+
+	get filtered_games(): BingoGame[] {
+		return this.games.filter(game => game.name.toLocaleLowerCase().includes(this.search.toLocaleLowerCase()));
+	}
+}
+export default toNative(EditorComponent);
+</script>

src/components/MarkdownRenderer.vue

@@ -0,0 +1,22 @@
+<template>
+  <div v-html="markdown"></div>
+</template>
+
+<script lang="ts">
+import MarkdownIt from 'markdown-it';
+const md = new MarkdownIt();
+
+@Component
+class MarkdownRenderer extends Vue {
+	@Prop({
+		default: false,
+		required: true
+	})
+		text!: string;
+
+	get markdown(): string {
+		return md.render(this.text);
+	}
+}
+export default toNative(MarkdownRenderer);
+</script>

src/js/Bingo.ts

@@ -10,11 +10,13 @@ function stringCompare(a: string, b: string) {
 }
 
 export class BingoGame {
-	id: string;
+	id!: string;
 
-	name: string;
+	name!: string;
 
-	description: string;
+	short_description!: string;
+
+	description!: string;
 
 	generator: 'simple' | 'srl_v5' | 'srl_v8' = 'simple';
 
@@ -24,9 +26,10 @@ export class BingoGame {
 	@Type(() => BingoGroup)
 		groups: BingoGroup[] = [];
 
-	constructor(id: string, name: string, description: string) {
+	constructor(id: string, name: string, short_description: string, description: string) {
 		this.id = id;
 		this.name = name;
+		this.short_description = short_description;
 		this.description = description;
 	}
 
@@ -83,9 +86,40 @@ export class BingoGame {
 		return group ? this.removeGroup(group) : false;
 	}
 
+	getGroupByName(name: string): BingoGroup | undefined {
+		return this.groups.find(group => stringCompare(group.name, name));
+	}
+
 	getGoalsByTags(...tags: string[]): BingoGoal[] {
 		return this.goals.filter(goal => goal.tags.some(_tag => tags.some(tag => stringCompare(_tag, tag))));
 	}
+
+	getGoalsByGroup(includeParents: boolean, ...groups: BingoGroup[]): BingoGoal[] {
+		const result: BingoGoal[] = [];
+
+		this.goals.map(goal => {
+			const goal_group = goal.group;
+
+			if (includeParents) {
+				let parent = goal_group.parent;
+				while (parent) {
+					if (groups.includes(parent)) {
+						result.push(goal);
+
+						return;
+					}
+
+					parent = parent.parent;
+				}
+			}
+
+			if (groups.includes(goal_group)) {
+				result.push(goal);
+			}
+		});
+
+		return result;
+	}
 }
 
 function getRandomInt(max: number): number {
@@ -95,15 +129,15 @@ function getRandomInt(max: number): number {
 export class BingoGoal {
 	// id: string; // uuid-by-string maybe? https://www.npmjs.com/package/uuid-by-string
 
-	name: string;
+	name!: string;
 
-	group?: BingoGroup;
+	group!: BingoGroup;
 
 	tags: string[] = [];
 
 	possible_spaces: number[] = [];
 
-	constructor(name: string, group?: BingoGroup) {
+	constructor(name: string, group: BingoGroup) {
 		this.name = name;
 		this.group = group;
 
@@ -153,7 +187,12 @@ export class BingoGroup {
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function test(): void {
-	const game = new BingoGame('yakuza_0', 'Yakuza 0', 'The funny game we used for all bingos.');
+	const game = new BingoGame(
+		'yakuza_0',
+		'Yakuza 0',
+		'The funny game we used for all bingos.',
+		'Very long text here haha lmao'
+	);
 	const battle_group = new BingoGroup('Battle');
 	const defeat_enemies = new BingoGroup('Defeat enemies on the street', battle_group);
 	game.addGroup(battle_group);

src/js/ParseGamesJSON.ts

@@ -8,11 +8,18 @@ import {
 	instanceToPlain
 } from 'class-transformer';
 
-function run() {
+import markdown_text from '@/js/testmarkdown.js';
-	const games: Map<string, BingoGame> = new Map;
 
+export const games: Map<string, BingoGame> = new Map;
+
+function run() {
 	for (const j_game of json) {
-		const game = new BingoGame(j_game.game_name, j_game.game_name, 'Empty Description');
+		const game = new BingoGame(
+			j_game.game_name,
+			j_game.game_name,
+			'Short Description',
+			markdown_text
+		);
 
 		for (const j_cat of j_game.categories) {
 			const category = new BingoGroup(j_cat.category_name);
@@ -32,10 +39,22 @@ function run() {
 		}
 
 		games.set(game.name, game);
+
+		for (let i = 0; i < 3; i++)
+			games.set(`${ game.name }-${ i }`, game);
 	}
 
-	console.log(instanceToPlain(games));
+	// const game = games.get('Yakuza 0');
-	console.log(JSON.stringify(instanceToPlain(games)));
+	// console.log(instanceToPlain(game));
+	// console.log(JSON.stringify(instanceToPlain(game)));
+
+	// const game = games.get('Yakuza 0');
+	// const group = game?.getGroupByName('Adventure');
+	// if (!group)
+	// 	return;
+
+	// const goals = game?.getGoalsByGroup(true, group);
+	// console.log(goals);
 }
 
 run();

src/js/testmarkdown.ts

@@ -0,0 +1,247 @@
+const text = `---
+__Advertisement :)__
+
+- __[pica](https://nodeca.github.io/pica/demo/)__ - high quality and fast image
+  resize in browser.
+- __[babelfish](https://github.com/nodeca/babelfish/)__ - developer friendly
+  i18n with plurals support and easy syntax.
+
+You will like those projects!
+
+---
+
+# h1 Heading 8-)
+## h2 Heading
+### h3 Heading
+#### h4 Heading
+##### h5 Heading
+###### h6 Heading
+
+
+## Horizontal Rules
+
+___
+
+---
+
+***
+
+
+## Typographic replacements
+
+Enable typographer option to see result.
+
+(c) (C) (r) (R) (tm) (TM) (p) (P) +-
+
+test.. test... test..... test?..... test!....
+
+!!!!!! ???? ,,  -- ---
+
+"Smartypants, double quotes" and 'single quotes'
+
+
+## Emphasis
+
+**This is bold text**
+
+__This is bold text__
+
+*This is italic text*
+
+_This is italic text_
+
+~~Strikethrough~~
+
+
+## Blockquotes
+
+
+> Blockquotes can also be nested...
+>> ...by using additional greater-than signs right next to each other...
+> > > ...or with spaces between arrows.
+
+
+## Lists
+
+Unordered
+
++ Create a list by starting a line with \`+\`, \`-\`, or \`*\`
++ Sub-lists are made by indenting 2 spaces:
+  - Marker character change forces new list start:
+    * Ac tristique libero volutpat at
+    + Facilisis in pretium nisl aliquet
+    - Nulla volutpat aliquam velit
++ Very easy!
+
+Ordered
+
+1. Lorem ipsum dolor sit amet
+2. Consectetur adipiscing elit
+3. Integer molestie lorem at massa
+
+
+1. You can use sequential numbers...
+1. ...or keep all the numbers as \`1.\`
+
+Start numbering with offset:
+
+57. foo
+1. bar
+
+
+## Code
+
+Inline \`code\`
+
+Indented code
+
+    // Some comments
+    line 1 of code
+    line 2 of code
+    line 3 of code
+
+
+Block code "fences"
+
+\`\`\`
+Sample text here...
+\`\`\`
+
+Syntax highlighting
+
+\`\`\` js
+var foo = function (bar) {
+  return bar++;
+};
+
+console.log(foo(5));
+\`\`\`
+
+## Tables
+
+| Option | Description |
+| ------ | ----------- |
+| data   | path to data files to supply the data that will be passed into templates. |
+| engine | engine to be used for processing templates. Handlebars is the default. |
+| ext    | extension to be used for dest files. |
+
+Right aligned columns
+
+| Option | Description |
+| ------:| -----------:|
+| data   | path to data files to supply the data that will be passed into templates. |
+| engine | engine to be used for processing templates. Handlebars is the default. |
+| ext    | extension to be used for dest files. |
+
+
+## Links
+
+[link text](http://dev.nodeca.com)
+
+[link with title](http://nodeca.github.io/pica/demo/ "title text!")
+
+Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
+
+
+## Images
+
+![Minion](https://octodex.github.com/images/minion.png)
+![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")
+
+Like links, Images also have a footnote style syntax
+
+![Alt text][id]
+
+With a reference later in the document defining the URL location:
+
+[id]: https://octodex.github.com/images/dojocat.jpg  "The Dojocat"
+
+
+## Plugins
+
+The killer feature of \`markdown-it\` is very effective support of
+[syntax plugins](https://www.npmjs.org/browse/keyword/markdown-it-plugin).
+
+
+### [Emojies](https://github.com/markdown-it/markdown-it-emoji)
+
+> Classic markup: :wink: :crush: :cry: :tear: :laughing: :yum:
+>
+> Shortcuts (emoticons): :-) :-( 8-) ;)
+
+see [how to change output](https://github.com/markdown-it/markdown-it-emoji#change-output) with twemoji.
+
+
+### [Subscript](https://github.com/markdown-it/markdown-it-sub) / [Superscript](https://github.com/markdown-it/markdown-it-sup)
+
+- 19^th^
+- H~2~O
+
+
+### [\<ins>](https://github.com/markdown-it/markdown-it-ins)
+
+++Inserted text++
+
+
+### [\<mark>](https://github.com/markdown-it/markdown-it-mark)
+
+==Marked text==
+
+
+### [Footnotes](https://github.com/markdown-it/markdown-it-footnote)
+
+Footnote 1 link[^first].
+
+Footnote 2 link[^second].
+
+Inline footnote^[Text of inline footnote] definition.
+
+Duplicated footnote reference[^second].
+
+[^first]: Footnote **can have markup**
+
+    and multiple paragraphs.
+
+[^second]: Footnote text.
+
+
+### [Definition lists](https://github.com/markdown-it/markdown-it-deflist)
+
+Term 1
+
+:   Definition 1
+with lazy continuation.
+
+Term 2 with *inline markup*
+
+:   Definition 2
+
+        { some code, part of Definition 2 }
+
+    Third paragraph of definition 2.
+
+_Compact style:_
+
+Term 1
+  ~ Definition 1
+
+Term 2
+  ~ Definition 2a
+  ~ Definition 2b
+
+
+### [Abbreviations](https://github.com/markdown-it/markdown-it-abbr)
+
+This is HTML abbreviation example.
+
+It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on.
+
+*[HTML]: Hyper Text Markup Language
+
+### [Custom containers](https://github.com/markdown-it/markdown-it-container)
+
+::: warning
+*here be dragons*
+:::`;
+
+export default text;

tsconfig.app.json

@@ -6,7 +6,8 @@
 		"components.d.ts",
 		"src/**/*",
 		"src/**/*.vue",
-		"src/**/*.json"
+		"src/**/*.json",
+		"src/**/*.md"
 	],
 	"exclude": [
 		"src/**/__tests__/*"

vite.config.ts

@@ -57,7 +57,8 @@ export default defineConfig({
 
 					'toNative',
 					'Vue'
-				]
+				],
+				'vue-markdown': [ 'VueMarkdown' ]
 			} ],
 			dirs: [ './src/components/**' ],
 			dts: true,