Skip to content
This repository was archived by the owner on Nov 10, 2023. It is now read-only.

Commit 4c58d3b

Browse files
webdevnerdstuffwebdevnerdstuff
committed
Update for depreciation
1 parent e8c8311 commit 4c58d3b

File tree

4 files changed

+76
-362
lines changed

4 files changed

+76
-362
lines changed

‎src/App.vue

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<template>
2-
<NavBar :selected-library="selectedLibrary" />
3-
<DemoPage @changedLibrary="updateLibrary" />
2+
<NavBar />
3+
<DemoPage />
44
<FooterBar />
55
</template>
66

77
<script setup lang="ts">
8-
import { ref, provide } from 'vue';
8+
import { provide } from 'vue';
99
import { useCoreStore } from '@/stores/index';
1010
import DemoPage from '@/components/DemoPage.vue';
1111
import NavBar from '@/components/Layout/NavBar.vue';
@@ -21,24 +21,24 @@ provide('styleData', {
2121
});
2222
2323
const store = useCoreStore();
24-
const selectedLibrary = ref({});
2524
2625
provide('links', store.links);
2726
provide('highlightJsLinks', store.highlightJsLinks);
2827
provide('prismLinks', store.prismLinks);
2928
30-
const codeBlockOptions = ref({
31-
browserWindow: false,
32-
preHeight: '30em',
33-
});
29+
</script>
3430

35-
provide('codeBlockOptions', codeBlockOptions);
3631

37-
function updateLibrary(library) {
38-
selectedLibrary.value = library.value;
32+
<style>
33+
html,
34+
body {
35+
height: 100%;
3936
}
40-
</script>
4137
42-
43-
<style scoped>
38+
#app {
39+
display: flex;
40+
flex-direction: column;
41+
height: 100%;
42+
justify-content: space-between;
43+
}
4444
</style>

‎src/components/DemoPage.vue

Lines changed: 39 additions & 206 deletions
Original file line numberDiff line numberDiff line change
@@ -1,218 +1,48 @@
11
<template>
2-
<div class="container mb-5">
3-
<div class="row mb-4">
4-
<div class="col-12 text-center">
5-
<img alt="Vue" class="vue-logo" src="../assets/vue.svg" />
2+
<div class="main-container">
3+
<div class="container mt-5 mb-5">
4+
<div class="row mb-4">
5+
<div class="col-12 text-center">
6+
<img
7+
alt="Vue"
8+
class="vue-logo"
9+
src="../assets/vue.svg"
10+
/>
11+
</div>
612
</div>
7-
</div>
8-
<div class="row mb-3">
9-
<div class="col-12 text-center">
10-
<h1>Vue 3 CodeBlock</h1>
11-
</div>
12-
<div class="col-12 text-center">
13-
<span class="badge bg-secondary rounded-pill">{{ version }}</span>
13+
<div class="row mb-3">
14+
<div class="col-12 text-center">
15+
<h1>Vue 3 CodeBlock</h1>
16+
</div>
1417
</div>
1518
</div>
16-
</div>
1719

18-
<div class="container mb-5">
19-
<div class="row">
20-
<div class="col-12">
21-
<p>
22-
The Vue 3 CodeBlock component leverages the power of
23-
<a :href="prismLinks.homepage" target="_blank">PrismJS</a>
24-
or
25-
<a :href="highlightJsLinks.homepage" target="_blank">Highlight.js</a>
26-
to provide syntax highlighting for code blocks within your
27-
application. The component takes a prop, which is the code to be
28-
highlighted, and uses PrismJS or Highlight.js to render the code with
29-
syntax highlighting. The component supports a variety of programming
30-
languages and can be customized with different themes to match your
31-
application's design. With this component, your users can display
32-
their code snippets with ease and clarity, making it easier to share
33-
and collaborate on code within your application.
34-
</p>
20+
<div class="container mb-5">
21+
<div class="row">
22+
<div class="col-12 text-center">
23+
<h2 class="text-danger ">Important Information!</h2>
24+
<p class="mb-5">
25+
This repository and npm package has been changed.
26+
</p>
27+
<p class="mb-5">
28+
You can find the new repository here:
29+
<br />
30+
<a :href="links.github">{{ links.github }}</a>
31+
</p>
32+
<p>
33+
You can find the new NPM package here:
34+
<br />
35+
<a :href="links.npm">{{ links.npm }}</a>
36+
</p>
37+
</div>
3538
</div>
3639
</div>
37-
<hr />
38-
<div class="row">
39-
<div class="col-12 mb-3">
40-
<h5>Switch between PrismJS and Highlight.js</h5>
41-
42-
<small
43-
class="d-inline-flex align-items-center px-2 py-1 fw-semibold text-success-emphasis bg-success-subtle border border-success-subtle rounded-2"
44-
>
45-
<fa-icon class="text-success me-1" icon="fa-solid fa-circle-info" />
46-
This will also update the examples and documentation below.
47-
</small>
48-
</div>
49-
<div class="col-12 col-md-3 mb-3">
50-
<select
51-
aria-label="Library Selection"
52-
class="form-select"
53-
@change="changeLibrary($event.target.value)"
54-
>
55-
<option
56-
v-for="lib in libraries"
57-
:key="lib"
58-
:selected="library === lib.id"
59-
:value="lib.id"
60-
>
61-
{{ lib.label }}
62-
</option>
63-
</select>
64-
</div>
65-
</div>
66-
<div class="row">
67-
<div class="col-12 col-md-3">
68-
<label class="form-label" for="theme-selection-select"
69-
>Select Theme:</label
70-
>
71-
72-
<select
73-
id="theme-selection-select"
74-
aria-label="Theme Selection"
75-
class="form-select"
76-
@change="changeTheme($event.target.value)"
77-
>
78-
<option
79-
v-for="theme in selectOptions"
80-
:key="theme"
81-
:selected="selectedTheme === theme.value"
82-
:value="theme.value"
83-
>
84-
{{ theme.label }}
85-
</option>
86-
</select>
87-
</div>
88-
</div>
89-
</div>
90-
91-
<div class="container">
92-
<!-- ============================================== Installation -->
93-
<InstallationSection id="ul-installation" />
94-
95-
<!-- ============================================== Register -->
96-
<RegisterSection id="ul-register-plugin" />
97-
98-
<!-- ============================================== Usage -->
99-
<UsageSection id="ul-usage" />
100-
101-
<!-- ============================================== Props -->
102-
<PropsSection id="ul-props" />
103-
104-
<!-- ============================================== Props -->
105-
<ThemesSection id="ul-themes" />
106-
107-
<!-- ============================================== Events -->
108-
<EventsSection id="ul-events" />
109-
110-
<!-- ============================================== Slots -->
111-
<SlotsSection id="ul-slots" />
112-
113-
<!-- ============================================== Examples -->
114-
<ExamplesSection id="ul-examples" />
115-
116-
<!-- ============================================== CSS Variables -->
117-
<CssVariablesSection id="ul-css-vars" />
118-
119-
<!-- ============================================== Dependencies -->
120-
<DependenciesSection id="ul-dependencies" />
121-
122-
<!-- ============================================== Change Log -->
123-
<ChangeLogSection id="ul-change-log" />
124-
125-
<!-- ============================================== License -->
126-
<LicenseSection id="ul-license" />
12740
</div>
12841
</template>
12942

130-
<script setup lang='ts'>
131-
/* eslint-disable no-unused-vars */
132-
/* eslint-disable @typescript-eslint/no-unused-vars */
133-
import {
134-
inject,
135-
onBeforeMount,
136-
provide,
137-
reactive,
138-
ref,
139-
} from 'vue';
140-
import { useCoreStore } from '@/stores/index';
141-
import { version } from '../../package';
142-
import {
143-
ChangeLogSection,
144-
CssVariablesSection,
145-
DependenciesSection,
146-
EventsSection,
147-
ExamplesSection,
148-
InstallationSection,
149-
LicenseSection,
150-
PropsSection,
151-
RegisterSection,
152-
SlotsSection,
153-
ThemesSection,
154-
UsageSection,
155-
} from '@/components/Sections/';
156-
import Prism from 'prismjs';
157-
import 'prismjs/components/prism-typescript';
158-
import 'prismjs/components/prism-json';
159-
import 'prismjs/components/prism-markup-templating';
160-
import 'prismjs/components/prism-php';
161-
import 'prismjs/plugins/line-numbers/prism-line-numbers.js';
162-
import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
163-
164-
165-
const highlightJsLinks = inject('highlightJsLinks');
166-
const prismLinks = inject('prismLinks');
167-
168-
const store = useCoreStore();
169-
const library = ref('prism');
170-
const libraries = store.libraries;
171-
172-
const highlightThemes = store.highlightThemes;
173-
const neonBunnyThemes = store.neonBunnyThemes;
174-
const prismThemes = store.prismThemes;
175-
const selectOptions = ref(null);
176-
const selectedLibrary = ref(libraries.prism);
177-
const selectedTheme = ref('neon-bunny');
178-
179-
180-
onBeforeMount(() => {
181-
library.value = store.getLocalStorage() ?? store.setLocalStorage('prism');
182-
changeLibrary(library.value);
183-
});
184-
185-
const emit = defineEmits(['changedLibrary']);
186-
187-
selectOptions.value = [...neonBunnyThemes, ...prismThemes];
188-
189-
provide('selectedTheme', selectedTheme);
190-
provide('selectedLibrary', selectedLibrary);
191-
192-
if (library.value === 'highlightjs') {
193-
selectOptions.value = [...neonBunnyThemes, ...highlightThemes];
194-
selectedLibrary.value = libraries.highlightjs;
195-
}
196-
197-
function changeLibrary(val) {
198-
library.value = val;
199-
selectedLibrary.value = libraries[val];
200-
selectedTheme.value = 'neon-bunny';
201-
202-
store.setLocalStorage(library.value);
203-
emit('changedLibrary', selectedLibrary);
204-
205-
if (val === 'prism') {
206-
selectOptions.value = [...neonBunnyThemes, ...prismThemes];
207-
return;
208-
}
209-
210-
selectOptions.value = [...neonBunnyThemes, ...highlightThemes];
211-
}
212-
213-
function changeTheme(val) {
214-
selectedTheme.value = val;
215-
}
43+
<script setup>
44+
import { inject } from 'vue';
45+
const links = inject('links');
21646
</script>
21747

21848

@@ -241,7 +71,6 @@ h1 {
24171
}
24272
24373
h2 {
244-
border-bottom: 1px solid #ccc;
24574
font-size: 2rem;
24675
font-weight: 400;
24776
padding-bottom: 0.5rem;
@@ -251,6 +80,10 @@ h5 {
25180
font-weight: 600;
25281
}
25382
83+
.main-container {
84+
height: 100%;
85+
}
86+
25487
.vue-logo {
25588
width: 80px;
25689
}

0 commit comments

Comments
 (0)