Merge pull request #19 from webdevnerdstuff/dev

Dev

Author: webdevnerdstuff

package.json

@@ -107,6 +107,7 @@
 		"postcss-html": "^1.5.0",
 		"postcss-scss": "^4.0.6",
 		"prettier": "^2.8.8",
+		"prismjs": "^1.29.0",
 		"roboto-fontface": "^0.10.0",
 		"rollup": "^3.24.0",
 		"rollup-plugin-polyfill-node": "^0.12.0",

pnpm-lock.yaml

@@ -1,7 +1,10 @@
 <template>
 	<v-app id="home">
 		<!-- ====================================================== App Bar -->
-		<AppBar @updated-drawer="toggleDrawer" />
+		<AppBar
+			@changed-theme="updateCodeBlockTheme"
+			@updated-drawer="toggleDrawer"
+		/>
 
 		<!-- ====================================================== Navigation Drawer -->
 		<v-navigation-drawer
@@ -10,25 +13,14 @@
 			:color="drawerOptions.color"
 			:elevation="drawerOptions.elevation"
 		>
-			<!-- <v-list>
-				<v-list-item>
-					<v-list-item-title class="text-h6">
-						Drilldown Table
-					</v-list-item-title>
-					<v-list-item-subtitle></v-list-item-subtitle>
-				</v-list-item>
-			</v-list>
-
-			<v-divider></v-divider> -->
-
 			<MenuComponent :drawerOptions="drawerOptions" />
 		</v-navigation-drawer>
 
 		<!-- ====================================================== Main Container -->
 		<v-main class="main-container pb-10">
 			<v-responsive>
 				<v-container class="px-10">
-					<DocsComponent />
+					<DocsPage :codeBlockOptions="codeBlockSettings" />
 				</v-container>
 			</v-responsive>
 		</v-main>
@@ -37,10 +29,13 @@
 
 <script setup>
 import { provide, ref } from 'vue';
-import AppBar from './layout/AppBar.vue';
-import MenuComponent from './components/MenuComponent.vue';
-import DocsComponent from './components/DocsComponent.vue';
+import AppBar from './documentation/layout/AppBar.vue';
+import MenuComponent from './documentation/components/MenuComponent.vue';
+import DocsPage from './documentation/DocsPage.vue';
 import { useCoreStore } from './stores/index';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+import Prism from 'prismjs';
+import 'prismjs/components/prism-typescript.js';
 
 
 const store = useCoreStore();
@@ -51,6 +46,23 @@ const drawerOptions = ref({
 	elevation: 10,
 });
 
+const codeBlockPlugin = 'prismjs';
+const codeBlockLightTheme = 'tomorrow';
+const codeBlockDarkTheme = 'tomorrow';
+
+const codeBlockSettings = ref({
+	plugin: codeBlockPlugin,
+	theme: codeBlockDarkTheme,
+});
+
+function updateCodeBlockTheme(val) {
+	codeBlockSettings.value.theme = codeBlockLightTheme;
+
+	if (val === 'dark') {
+		codeBlockSettings.value.theme = codeBlockDarkTheme;
+	}
+}
+
 provide('drawerOptions', drawerOptions);
 provide('links', store.links);