Skip to content

Commit dfc2439

Browse files
webdevnerdstuffwebdevnerdstuff
authored
Merge pull request #5 from webdevnerdstuff/dev
Dev
2 parents b78c9c5 + cba7743 commit dfc2439

File tree

6 files changed

+128
-2
lines changed

6 files changed

+128
-2
lines changed

‎src/App.vue

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
<script setup lang="ts">
88
import { ref, provide } from 'vue';
9-
import { name, } from '../package';
9+
import { dependencies, name } from '../package';
1010
import DemoPage from '@/components/DemoPage.vue';
1111
import NavBar from '@/components/Layout/NavBar.vue';
1212
import FooterBar from '@/components/Layout/FooterBar.vue';
@@ -22,15 +22,19 @@ provide('styleData', {
2222
2323
const packageName = name;
2424
const repoBaseUrl = `https://github.com/webdevnerdstuff/${packageName}`;
25+
const prismVersion = dependencies.prismjs.replace('^', '');
2526
2627
const links = {
2728
changeLog: `${repoBaseUrl}/blob/main/CHANGELOG.md`,
2829
docs: `https://webdevnerdstuff.github.io/${packageName}/`,
2930
github: repoBaseUrl,
31+
jsDelivr: 'https://www.jsdelivr.com/',
32+
jsDelivrPrism: `https://cdn.jsdelivr.net/gh/PrismJS/prism@${prismVersion}/themes/`,
3033
license: `${repoBaseUrl}/blob/main/LICENSE.md`,
3134
neonBunnyTheme: 'https://marketplace.visualstudio.com/items?itemName=WebDevNerdStuff.neon-bunny',
3235
npm: `https://www.npmjs.com/package/${packageName}`,
3336
prism: 'https://prismjs.com/',
37+
prismThemes: 'https://github.com/PrismJS/prism-themes',
3438
uaParser: 'https://www.npmjs.com/package/ua-parser-js',
3539
vueJs: 'https://vuejs.org/',
3640
};

‎src/components/DemoPage.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,9 @@
6969
<!-- ============================================== Props -->
7070
<PropsSection id="ul-props" />
7171

72+
<!-- ============================================== Props -->
73+
<ThemesSection id="ul-themes" />
74+
7275
<!-- ============================================== Events -->
7376
<EventsSection id="ul-events" />
7477

@@ -119,6 +122,7 @@ import {
119122
PropsSection,
120123
RegisterSection,
121124
SlotsSection,
125+
ThemesSection,
122126
UsageSection,
123127
} from '@/components/Sections/';
124128
import { TestingExamples } from '@/components/Examples/';

‎src/components/Layout/NavBar.vue

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,9 @@
5252
<li>
5353
<a class="dropdown-item" href="#ul-props">Props</a>
5454
</li>
55+
<li>
56+
<a class="dropdown-item" href="#ul-themes">Themes</a>
57+
</li>
5558
<li>
5659
<a class="dropdown-item" href="#ul-events">Events</a>
5760
</li>

‎src/components/Sections/PropsSection.vue

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
</thead>
1818
<tbody>
1919
<tr v-for="(prop, key) in componentProps" :key="prop">
20-
<td valign="top">{{ key }}</td>
20+
<td :id="prop?.id" valign="top">{{ key }}</td>
2121
<td class="prop-type" valign="top">{{ prop.type }}</td>
2222
<td class="prop-default" valign="top">{{ prop.default }}</td>
2323
<td valign="top" v-html="prop.description"></td>
@@ -153,6 +153,7 @@ const componentProps = {
153153
theme: {
154154
type: '[String, Boolean]',
155155
required: false,
156+
id: 'props-theme-option',
156157
default: 'neon-bunny',
157158
description: `<p>The theme to be used for the code block. Available options include:</p>
158159
<p>

‎src/components/Sections/ThemesSection.vue

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<template>
2+
<div class="row mb-5">
3+
<div :class="styleData.h2ColClass">
4+
<h2>Themes</h2>
5+
</div>
6+
7+
<div class="col-12">
8+
<p>
9+
There are a few options for theming the code block. Using the components
10+
built in method allows you to be able to dynamically change the theme
11+
easily. If you choose, you can also use your own custom theme.
12+
</p>
13+
14+
<p>
15+
The first way is to use one of the two custom themes
16+
(<code>neon-bunny</code>,
17+
<code>neon-bunny-carrot</code>) built into the component that are based
18+
off of my own VSCode
19+
<a :href="links.neonBunnyTheme" target="_blank">Neon Bunny Theme</a>.
20+
</p>
21+
22+
<CodeBlock
23+
:code="bunnyThemeExample"
24+
label="Using the Neon Bunny Themes"
25+
lang="html"
26+
:theme="selectedTheme"
27+
/>
28+
29+
<p>
30+
Another other is to use the main
31+
<a :href="links.prism" target="_blank">PrismJS</a> themes. If you use
32+
the component to load the theme, you just need to set the
33+
<a href="#props-theme-option">theme</a> prop to the desired theme. When
34+
you load it this way, the component will use a <code>fetch</code> call
35+
to load them themes from the
36+
<a :href="links.jsDelivrPrism" target="_blank">jsDelivr CDN</a>.
37+
Fetching the PrismJS themes from a CDN was the best method I could
38+
figure out at this time to dynamically load the themes, while making it
39+
easier for you to use them. You can also link to another CDN of your
40+
choice.
41+
</p>
42+
43+
<CodeBlock
44+
:code="themePropExample"
45+
label="Using the theme prop"
46+
lang="html"
47+
:theme="selectedTheme"
48+
/>
49+
50+
<p>
51+
You can also load the themes the traditional way of importing them
52+
directly from the PrismJS package in <code>node_modules</code>. Themes
53+
from their
54+
<a :href="links.prismThemes" target="_blank">Prism themes</a>
55+
repository can be used this way as well (not build into the component).
56+
</p>
57+
58+
<CodeBlock
59+
:code="importJsExample"
60+
label="Using import (javascript)"
61+
lang="html"
62+
:theme="selectedTheme"
63+
/>
64+
65+
<p>Alternatively you can import the theme into your css/sass/scss.</p>
66+
67+
<CodeBlock
68+
:code="importCssExample"
69+
label="Using import (css/sass/scss)"
70+
lang="html"
71+
:theme="selectedTheme"
72+
/>
73+
</div>
74+
</div>
75+
</template>
76+
77+
<script setup>
78+
import { inject } from 'vue';
79+
80+
const links = inject('links');
81+
const styleData = inject('styleData');
82+
const selectedTheme = inject('selectedTheme');
83+
84+
const bunnyThemeExample = `<CodeBlock
85+
:code="myCode"
86+
label="Neon Bunny Theme"
87+
lang="html"
88+
theme="neon-bunny"
89+
/>
90+
91+
<CodeBlock
92+
:code="myCode"
93+
label="Neon Bunny Carrot Theme"
94+
lang="html"
95+
theme="neon-bunny-carrot"
96+
/>`;
97+
98+
const themePropExample = `<CodeBlock
99+
:code="myCode"
100+
label="Build in Theming"
101+
lang="html"
102+
theme="coy"
103+
/>`;
104+
105+
const importJsExample = `<script setup>
106+
import 'prismjs/themes/prism-coy.css';
107+
<\/script>`;
108+
109+
const importCssExample = `<style>
110+
@import 'prismjs/themes/prism-coy.css';
111+
<\/style>`;
112+
</script>;

‎src/components/Sections/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import LicenseSection from '@/components/Sections/LicenseSection.vue';
99
import PropsSection from '@/components/Sections/PropsSection.vue';
1010
import SlotsSection from '@/components/Sections/SlotsSection.vue';
1111
import RegisterSection from '@/components/Sections/RegisterSection.vue';
12+
import ThemesSection from '@/components/Sections/ThemesSection.vue';
1213
import UsageSection from '@/components/Sections/UsageSection.vue';
1314

1415
export {
@@ -23,5 +24,6 @@ export {
2324
PropsSection,
2425
SlotsSection,
2526
RegisterSection,
27+
ThemesSection,
2628
UsageSection,
2729
};

0 commit comments

Comments
 (0)