Adding documentation

Author: webdevnerdstuff

src/App.vue

@@ -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
@@ -17,7 +20,7 @@
 		<v-main class="main-container pb-10">
 			<v-responsive>
 				<v-container class="px-10">
-					<DocsPage />
+					<DocsPage :codeBlockOptions="codeBlockSettings" />
 				</v-container>
 			</v-responsive>
 		</v-main>
@@ -30,6 +33,9 @@ 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();
@@ -40,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);
 

src/documentation/DocsPage.vue

@@ -42,8 +42,10 @@
 					<v-col cols="12">
 						<CodeBlock
 							code="pnpm add vuetify-drilldown-table"
-							highlightjs
+							:highlightjs="codeBlockSettings.plugin === 'highlightjs'"
 							lang="plain"
+							:prismjs="codeBlockSettings.plugin === 'prismjs'"
+							:theme="codeBlockSettings.theme"
 						>
 							<template #label>
 								Using <a
@@ -56,8 +58,10 @@
 					<v-col cols="12">
 						<CodeBlock
 							code="npm i vuetify-drilldown-table"
-							highlightjs
+							:highlightjs="codeBlockSettings.plugin === 'highlightjs'"
 							lang="plain"
+							:prismjs="codeBlockSettings.plugin === 'prismjs'"
+							:theme="codeBlockSettings.theme"
 						>
 							<template #label>Using npm:</template>
 						</CodeBlock>
@@ -70,16 +74,19 @@
 		<DescriptionSection />
 
 		<!-- Usage -->
-		<UsageSection />
+		<UsageSection :codeBlockOptions="codeBlockOptions" />
 
 		<!-- Props -->
 		<PropsSection />
 
+		<!-- Cell Rendering -->
+		<CellRenderingSection :codeBlockOptions="codeBlockOptions" />
+
 		<!-- Events -->
 		<EventsSection />
 
 		<!-- Slots -->
-		<SlotsSection />
+		<SlotsSection :codeBlockOptions="codeBlockOptions" />
 
 		<!-- Example -->
 		<ExampleSection />
@@ -99,6 +106,7 @@
 import { inject, provide, reactive, ref } from 'vue';
 import packageInfo from '../../package.json';
 import {
+	CellRenderingSection,
 	DependenciesSection,
 	DescriptionSection,
 	EventsSection,
@@ -110,6 +118,15 @@ import {
 	UsageSection,
 } from '@/documentation/sections';
 
+
+const props = defineProps({
+	codeBlockOptions: {
+		required: true,
+		type: Object,
+	},
+});
+
+const codeBlockSettings = computed(() => props.codeBlockOptions);
 const links = inject('links');
 
 const classes = reactive({

src/documentation/layout/AppBar.vue

@@ -144,6 +144,7 @@ function getTheme() {
 function setTheme() {
 	themeName.value = store.setTheme(themeName.value);
 	theme.global.name.value = themeName.value;
+	emit('changedTheme', themeName.value);
 }
 
 function toggleDrawer() {