From a23f5fbc969fdd919effae1ad3a5fafdda0c4ed1 Mon Sep 17 00:00:00 2001
From: WebDevNerdStuff <webdevnerdstuff@gmail.com>
Date: Thu, 4 May 2023 19:51:27 -0700
Subject: [PATCH 1/2] Fixed trailing comma

---
 tsconfig.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tsconfig.json b/tsconfig.json
index 8a4ddc7..84fa668 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -45,7 +45,7 @@
     ],
 	"include": [
 		"src/**/*.ts",
-		"src/**/*.vue",
+		"src/**/*.vue"
 	],
 	"references": [
 		{

From 386ab72e36436026230a770d91df4637afcb7cf2 Mon Sep 17 00:00:00 2001
From: WebDevNerdStuff <webdevnerdstuff@gmail.com>
Date: Thu, 4 May 2023 19:56:36 -0700
Subject: [PATCH 2/2] Updating sass to use @use instead of @import

---
 src/components/Sections/ThemesSection.vue | 46 +++++++++++++----------
 src/plugin/CodeBlock.vue                  | 19 +++++++---
 src/plugin/StatusIcons.vue                |  2 +-
 3 files changed, 41 insertions(+), 26 deletions(-)

diff --git a/src/components/Sections/ThemesSection.vue b/src/components/Sections/ThemesSection.vue
index 206f442..070d046 100644
--- a/src/components/Sections/ThemesSection.vue
+++ b/src/components/Sections/ThemesSection.vue
@@ -16,7 +16,10 @@
 				(<code>neon-bunny</code>,
 				<code>neon-bunny-carrot</code>) built into the component that are based
 				off of my own VSCode
-				<a :href="links.neonBunnyTheme" target="_blank">Neon Bunny Theme</a>.
+				<a
+					:href="links.neonBunnyTheme"
+					target="_blank"
+				>Neon Bunny Theme</a>.
 			</p>
 
 			<CodeBlock
@@ -32,28 +35,24 @@
 			<p>
 				Another other is to use the main
 				<a
-					:href="
-						selectedLibrary.id === 'prism'
-							? prismLinks.homepage
-							: highlightJsLinks.homepage
-					"
+					:href="selectedLibrary.id === 'prism'
+						? prismLinks.homepage
+						: highlightJsLinks.homepage
+						"
 					target="_blank"
-					>{{ selectedLibrary.label }}</a
-				>
+				>{{ selectedLibrary.label }}</a>
 				themes. If you use the component to load the theme, you just need to set
 				the
 				<a href="#props-theme-option">theme</a> prop to the desired theme. When
 				you load it this way, the component will use a <code>fetch</code> call
 				to load them themes from the
 				<a
-					:href="
-						selectedLibrary.id === 'prism'
-							? prismLinks.cdn
-							: highlightJsLinks.cdn
-					"
+					:href="selectedLibrary.id === 'prism'
+						? prismLinks.cdn
+						: highlightJsLinks.cdn
+						"
 					target="_blank"
-					>jsDelivr CDN</a
-				>. Fetching the {{ selectedLibrary.label }} themes from a CDN was the
+				>jsDelivr CDN</a>. Fetching the {{ selectedLibrary.label }} themes from a CDN was the
 				best method I could figure out at this time to dynamically load the
 				themes, while making it easier for you to use them. You can also link to
 				another CDN of your choice.
@@ -92,7 +91,10 @@
 
 			<p v-if="selectedLibrary.id === 'prism'">
 				Themes from their
-				<a :href="prismLinks.themes" target="_blank">Prism themes</a>
+				<a
+					:href="prismLinks.themes"
+					target="_blank"
+				>Prism themes</a>
 				repository can be used this way as well.
 				<span v-html="tabIconCopy"></span>
 			</p>
@@ -115,11 +117,15 @@
 			<CodeBlock
 				:code="examples[selectedLibrary.id].importCss"
 				:highlightjs="selectedLibrary.id === 'highlightjs'"
-				label="Using import (css/sass/scss)"
+				label="Using <code>@use</code> (css/sass/scss)"
 				lang="html"
 				:prismjs="selectedLibrary.id === 'prism'"
 				:theme="selectedTheme"
-			/>
+			>
+				<template #label>
+					Using <code>@use</code> (css/sass/scss)
+				</template>
+			</CodeBlock>
 		</div>
 	</div>
 </template>
@@ -153,7 +159,7 @@ const examples = {
   theme="neon-bunny-carrot"
 />`,
 		importCss: `<style>
-  @import 'prismjs/themes/prism-coy.css';
+  @use 'prismjs/themes/prism-coy.css';
 <\/style>`,
 		importJs: `<script setup>
   import 'prismjs/themes/prism-coy.css';
@@ -190,7 +196,7 @@ const examples = {
   theme="neon-bunny-carrot"
 />`,
 		importCss: `<style>
-  @import 'highlight.js/styles/base16/onedark.css';
+  @use 'highlight.js/styles/base16/onedark.css';
 <\/style>`,
 		importJs: `<script setup>
   import 'highlight.js/styles/base16/onedark.css';
diff --git a/src/plugin/CodeBlock.vue b/src/plugin/CodeBlock.vue
index e012a07..6d2ace6 100644
--- a/src/plugin/CodeBlock.vue
+++ b/src/plugin/CodeBlock.vue
@@ -1,18 +1,27 @@
 <template>
-	<div class="v-code-block v-code-block--mb-5" :class="codeBlockClasses">
+	<div
+		class="v-code-block v-code-block--mb-5"
+		:class="codeBlockClasses"
+	>
 		<div
 			v-if="label || tabs || slots.label || slots.tabs"
 			class="v-code-block--header"
 			:style="headerStyles"
 		>
-			<div class="v-code-block--label v-code-block--pb-1" :class="labelClasses">
+			<div
+				class="v-code-block--label v-code-block--pb-1"
+				:class="labelClasses"
+			>
 				<template v-if="slots.label">
 					<slot name="label" />
 				</template>
 				<template v-else>{{ props.label }}</template>
 			</div>
 
-			<div class="v-code-block--tabs" :style="tabGroupStyle">
+			<div
+				class="v-code-block--tabs"
+				:style="tabGroupStyle"
+			>
 				<template v-if="slots.tabs">
 					<slot name="tabs" />
 				</template>
@@ -658,7 +667,7 @@ function runCode(): void {
 </script>
 
 <style lang="scss">
-@import './styles/utilities';
+@use './styles/utilities';
 
 .v-code-block {
 	&- {
@@ -676,5 +685,5 @@ function runCode(): void {
 </style>
 
 <style lang="scss" scoped>
-@import './styles/main';
+@use './styles/main';
 </style>
diff --git a/src/plugin/StatusIcons.vue b/src/plugin/StatusIcons.vue
index 0ae56b1..7bcbe52 100644
--- a/src/plugin/StatusIcons.vue
+++ b/src/plugin/StatusIcons.vue
@@ -51,5 +51,5 @@ defineProps({
 </script>
 
 <style lang="scss">
-@import './styles/themeStyles';
+@use './styles/themeStyles';
 </style>