Skip to content

Commit 09f34ab

Browse files
webdevnerdstuffwebdevnerdstuff
committed
Misc updates
1 parent 82ac922 commit 09f34ab

File tree

7 files changed

+98
-502
lines changed

7 files changed

+98
-502
lines changed

‎.eslintrc.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ module.exports = {
2121
],
2222
globals: {
2323
Entry: true,
24+
loadLanguages: true,
25+
Prism: true,
2426
},
2527
parserOptions: {
2628
parser: "@typescript-eslint/parser",

‎src/App.vue‎

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44
</template>
55

66
<script setup lang="ts">
7-
import { provide } from 'vue';
7+
import { ref, provide } from 'vue';
8+
import { name, } from '../package';
89
import DemoPage from '@/components/DemoPage.vue';
910
import NavBar from '@/components/Layout/NavBar.vue';
1011
@@ -17,13 +18,28 @@ provide('styleData', {
1718
},
1819
});
1920
20-
const pageLinks = {
21-
docs: '',
22-
github: '',
23-
npm: '',
21+
const packageName = name;
22+
const repoBaseUrl = `https://github.com/webdevnerdstuff/${packageName}`;
23+
24+
const links = {
25+
changeLog: `${repoBaseUrl}/blob/main/CHANGELOG.md`,
26+
docs: `https://webdevnerdstuff.github.io/${packageName}/`,
27+
github: repoBaseUrl,
28+
license: `${repoBaseUrl}/blob/main/LICENSE.md`,
29+
neonBunnyTheme: 'https://marketplace.visualstudio.com/items?itemName=WebDevNerdStuff.neon-bunny',
30+
npm: `https://www.npmjs.com/package/${packageName}`,
31+
prism: 'https://prismjs.com/',
32+
vueJs: 'https://vuejs.org/',
2433
};
2534
26-
provide('pageLinks', pageLinks);
35+
provide('links', links);
36+
37+
const codeBlockOptions = ref({
38+
browserWindow: false,
39+
preHeight: '30em',
40+
});
41+
42+
provide('codeBlockOptions', codeBlockOptions);
2743
</script>
2844

2945

‎src/components/DemoPage.vue‎

Lines changed: 47 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -25,31 +25,40 @@
2525
</div>
2626
</div>
2727

28-
<div class="container mb-5 text-center">
29-
<div aria-label="Basic example" class="btn-group mb-3" role="group">
30-
<button
31-
v-for="theme in themes"
32-
:key="theme"
33-
class="btn btn-success"
34-
:class="{
35-
active: selectedTheme === theme.value,
36-
'btn-success': selectedTheme !== theme.value,
37-
}"
38-
type="button"
39-
@click="changeTheme(theme.value)"
40-
>
41-
{{ theme.label }}
42-
</button>
28+
<div class="container mb-5">
29+
<div class="row">
30+
<div class="col-12 col-md-3">
31+
<label class="form-label" for="theme-selection-select">Theme:</label>
32+
33+
<select
34+
id="theme-selection-select"
35+
aria-label="Theme Selection"
36+
class="form-select"
37+
@change="changeTheme($event.target.value)"
38+
>
39+
<option
40+
v-for="theme in themes"
41+
:key="theme"
42+
:selected="selectedTheme === theme.value"
43+
:value="theme.value"
44+
>
45+
{{ theme.label }}
46+
</option>
47+
</select>
48+
</div>
4349
</div>
4450
</div>
4551

46-
<div class="container">
52+
<div v-if="!demoTestPage" class="container">
4753
<!-- ============================================== Installation -->
4854
<InstallationSection id="ul-installation" />
4955

5056
<!-- ============================================== Register -->
5157
<RegisterSection id="ul-register-plugin" />
5258

59+
<!-- ============================================== Usage -->
60+
<UsageSection id="ul-usage" />
61+
5362
<!-- ============================================== Props -->
5463
<PropsSection id="ul-props" />
5564

@@ -76,14 +85,18 @@
7685

7786
<FooterSection />
7887
</div>
88+
89+
<div v-else class="container">
90+
<TestingExamples />
91+
</div>
7992
</template>
8093

8194
<script setup>
8295
import {
8396
provide,
8497
ref,
8598
} from 'vue';
86-
import { name, version } from '../../package';
99+
import { version } from '../../package';
87100
import {
88101
ChangeLogSection,
89102
CssVariablesSection,
@@ -96,9 +109,12 @@ import {
96109
PropsSection,
97110
RegisterSection,
98111
SlotsSection,
112+
UsageSection,
99113
} from '@/components/Sections/';
114+
import { TestingExamples } from '@/components/Examples/';
100115
101116
117+
const demoTestPage = ref(false);
102118
const selectedTheme = ref('neon-bunny');
103119
const themes = [
104120
{
@@ -149,34 +165,6 @@ const themes = [
149165
150166
provide('selectedTheme', selectedTheme);
151167
152-
provide('styleData', {
153-
h2ColClass: 'col-12 mb-4',
154-
});
155-
156-
const packageName = name;
157-
const repoBaseUrl = `https://github.com/webdevnerdstuff/${packageName}`;
158-
159-
const links = {
160-
changeLog: `${repoBaseUrl}/blob/main/CHANGELOG.md`,
161-
docs: `https://webdevnerdstuff.github.io/${packageName}/`,
162-
github: repoBaseUrl,
163-
license: `${repoBaseUrl}/blob/main/LICENSE.md`,
164-
neonBunnyTheme: 'https://marketplace.visualstudio.com/items?itemName=WebDevNerdStuff.neon-bunny',
165-
npm: `https://www.npmjs.com/package/${packageName}`,
166-
prism: 'https://prismjs.com/',
167-
vueJs: 'https://vuejs.org/',
168-
};
169-
170-
provide('links', links);
171-
172-
173-
const codeBlockOptions = ref({
174-
browserWindow: false,
175-
preHeight: '30em',
176-
});
177-
178-
provide('codeBlockOptions', codeBlockOptions);
179-
180168
function changeTheme(val) {
181169
selectedTheme.value = val;
182170
}
@@ -185,7 +173,7 @@ function changeTheme(val) {
185173

186174
<style lang="scss">
187175
:root {
188-
--v-cb-label-font: 'Encode Sans Expanded', sans-serif;
176+
--v-cb-label-font: 'Encode Sans Expanded', sans-serif !important;
189177
}
190178
191179
html {
@@ -214,10 +202,23 @@ h2 {
214202
padding-bottom: 0.5rem;
215203
}
216204
205+
h5 {
206+
font-weight: 600;
207+
}
208+
217209
.vue-logo {
218210
width: 80px;
219211
}
220212
213+
.table-responsive {
214+
box-shadow: 0 3px 1px -2px hsla(0, 0%, 0%, 0.2),
215+
0 2px 2px 0 hsla(0, 0%, 0%, 0.14), 0 1px 5px 0 hsla(0, 0%, 0%, 0.12);
216+
217+
.table {
218+
margin-bottom: 0;
219+
}
220+
}
221+
221222
.boolean-style {
222223
color: hsl(240, 100%, 50%) !important;
223224
font-weight: 500;

‎src/components/Layout/NavBar.vue‎

Lines changed: 26 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
2-
<nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark mb-5">
2+
<nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-black mb-5">
33
<div class="container">
4-
<a class="navbar-brand" :href="pageLinks.docs">Vue 3 CodeBlock</a>
4+
<a class="navbar-brand" href="/vue3-code-block/">Vue 3 CodeBlock</a>
55
<button
66
aria-controls="navbarSupportedContent"
77
aria-expanded="false"
@@ -19,7 +19,7 @@
1919
<a
2020
aria-current="page"
2121
class="nav-link active"
22-
:href="pageLinks.docs"
22+
href="/vue3-code-block/"
2323
>
2424
Home
2525
</a>
@@ -98,23 +98,41 @@
9898
aria-labelledby="examples-dropdown"
9999
class="dropdown-menu dropdown-menu-dark"
100100
>
101-
<li><h6 class="dropdown-header">Dropdown Header</h6></li>
102101
<li>
103102
<a class="dropdown-item" href="#lang-examples">Languages</a>
104103
</li>
105104
<li>
106-
<a class="dropdown-item" href="#tabs-examples">Tabs</a>
105+
<a class="dropdown-item" href="#tab-examples">Tabs</a>
106+
</li>
107+
<li>
108+
<a class="dropdown-item" href="#copy-button-examples">
109+
Copy Button
110+
</a>
111+
</li>
112+
<li>
113+
<a class="dropdown-item" href="#browser-window-examples">
114+
Browser Window
115+
</a>
116+
</li>
117+
<li>
118+
<a class="dropdown-item" href="#other-prop-examples">
119+
Other Props
120+
</a>
107121
</li>
108122
</ul>
109123
</li>
110124
</ul>
111125
<div class="d-flex">
112126
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
113127
<li class="nav-item">
114-
<a class="nav-link" :href="pageLinks.github">GitHub</a>
128+
<a class="nav-link" :href="links.github" target="_blank"
129+
>GitHub</a
130+
>
115131
</li>
116132
<li class="nav-item">
117-
<a class="nav-link" :href="pageLinks.npm">NPM Package</a>
133+
<a class="nav-link" :href="links.npm" target="_blank"
134+
>NPM Package</a
135+
>
118136
</li>
119137
</ul>
120138
</div>
@@ -126,5 +144,5 @@
126144
<script setup>
127145
import { inject } from 'vue';
128146
129-
const pageLinks = inject('pageLinks');
147+
const links = inject('links');
130148
</script>

‎src/index.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
import { App, Plugin } from 'vue';
22
import { CodeBlock } from '@/plugin';
33
import { OptionsSettings } from '@/types';
4-
import '@/style.css';
4+
import '@/plugin/styles/cssVariables.css';
55

66
const CodeBlockPlugin = {
77
install(app: App, options: OptionsSettings) {
88
const codeBlockGlobalOptions = { globalOptions: true, ...options };
9-
console.log({ codeBlockGlobalOptions });
109

1110
app.provide('codeBlockGlobalOptions', codeBlockGlobalOptions);
1211
app.component('CodeBlock', CodeBlock);

‎src/main.ts‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,9 @@
11
import { createApp } from 'vue';
2-
import './style.css';
32
import App from './App.vue';
43
import CodeBlock from '@/index';
5-
import { library } from '@fortawesome/fontawesome-svg-core';
6-
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
7-
import { fas } from '@fortawesome/free-solid-svg-icons';
8-
9-
library.add(fas);
104

115
createApp(App)
126
.use(CodeBlock, {
137
theme: 'neon-bunny',
148
})
15-
.component('fa-icon', FontAwesomeIcon)
169
.mount('#app');

0 commit comments

Comments
 (0)