Skip to content

Commit d24b254

Browse files
webdevnerdstuffwebdevnerdstuff
committed
Adding new documentaion page/design
1 parent 6396013 commit d24b254

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+8678
-783
lines changed

Diff for: ‎index.html

-6
Original file line numberDiff line numberDiff line change
@@ -34,12 +34,6 @@
3434
<meta property="og:image:width" content="1200" />
3535
<meta property="og:image:height" content="630" />
3636

37-
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
38-
integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
39-
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
40-
integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N"
41-
crossorigin="anonymous"></script>
42-
4337
<link rel="preconnect" href="https://fonts.googleapis.com">
4438
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
4539
<link

Diff for: ‎playground/index.html

+32-16
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,49 @@
11
<!DOCTYPE html>
2-
<html lang="en" data-bs-theme="dark">
2+
<html
3+
lang="en"
4+
data-bs-theme="dark"
5+
>
36

47
<head>
58
<meta charset="UTF-8" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
9+
<meta
10+
name="viewport"
11+
content="width=device-width, initial-scale=1.0"
12+
/>
713
<title>Vue 3 CodeBlock Playground</title>
814

9-
<meta name="description"
10-
content="Vue 3 CodeBlock - Highlight your code with ease using this syntax highlighting component powered by PrismJS or Highlight.js." />
15+
<meta
16+
name="description"
17+
content="Vue 3 CodeBlock - Highlight your code with ease using this syntax highlighting component powered by PrismJS or Highlight.js."
18+
/>
1119

12-
13-
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
14-
integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
15-
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
16-
integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N"
17-
crossorigin="anonymous"></script>
18-
19-
<link rel="preconnect" href="https://fonts.googleapis.com">
20-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
20+
<link
21+
rel="preconnect"
22+
href="https://fonts.googleapis.com"
23+
>
24+
<link
25+
rel="preconnect"
26+
href="https://fonts.gstatic.com"
27+
crossorigin
28+
>
2129
<link
2230
href="https://fonts.googleapis.com/css2?family=Encode+Sans+Expanded:wght@300;400;600&family=Open+Sans&display=swap"
23-
rel="stylesheet">
31+
rel="stylesheet"
32+
>
2433

25-
<link rel="icon" type="image/svg+xml" href="/vue.svg" />
34+
<link
35+
rel="icon"
36+
type="image/svg+xml"
37+
href="/vue.svg"
38+
/>
2639
</head>
2740

2841
<body>
2942
<div id="app"></div>
30-
<script type="module" src="../src/playground/configs/playground.ts"></script>
43+
<script
44+
type="module"
45+
src="../src/playground/configs/playground.ts"
46+
></script>
3147

3248
</body>
3349

Diff for: ‎src/App.vue

+100-24
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,120 @@
11
<template>
2-
<NavBar :selected-library="selectedLibrary" />
3-
<DemoPage @changedLibrary="updateLibrary" />
4-
<FooterBar />
2+
<v-app id="home">
3+
<!-- ====================================================== App Bar -->
4+
<AppBar
5+
:selectedLibrary="selectedLibrary"
6+
@updated-drawer="toggleDrawer"
7+
/>
8+
9+
<!-- ====================================================== Navigation Drawer -->
10+
<v-navigation-drawer
11+
v-model="drawer"
12+
:absolute="drawerOptions.absolute"
13+
:color="drawerOptions.color"
14+
:elevation="drawerOptions.elevation"
15+
>
16+
<MenuComponent :drawerOptions="drawerOptions" />
17+
</v-navigation-drawer>
18+
19+
<!-- ====================================================== Main Container -->
20+
<v-main class="pb-10">
21+
<v-container
22+
class="px-7"
23+
style="max-width: 90%;"
24+
>
25+
<DocsPage
26+
@changedLibrary="selectedLibrary = $event"
27+
@changedTheme="selectedTheme = $event"
28+
/>
29+
</v-container>
30+
</v-main>
31+
</v-app>
532
</template>
633

7-
<script setup lang="ts">
8-
import { ref, provide } from 'vue';
9-
import { useCoreStore } from '@/stores/index';
10-
import DemoPage from '@/components/DemoPage.vue';
11-
import NavBar from '@/components/Layout/NavBar.vue';
12-
import FooterBar from '@/components/Layout/FooterBar.vue';
34+
<script setup>
35+
import { provide, ref } from 'vue';
36+
import { useDisplay } from 'vuetify';
37+
import AppBar from './documentation/layout/AppBar.vue';
38+
import MenuComponent from './documentation/components/MenuComponent.vue';
39+
import DocsPage from './documentation/DocsPage.vue';
40+
import { useCoreStore } from './stores/index';
41+
// eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
42+
import Prism from 'prismjs';
43+
import 'prismjs/components/prism-typescript.js';
1344
1445
15-
provide('styleData', {
16-
h2ColClass: 'col-12 mb-4',
17-
fieldWidth: {
18-
maxWidth: '100%',
19-
width: '300px',
20-
},
21-
});
46+
const { smAndUp } = useDisplay();
2247
48+
const isSmAndUp = computed(() => smAndUp.value);
2349
const store = useCoreStore();
24-
const selectedLibrary = ref({});
50+
const drawer = ref(isSmAndUp.value);
51+
const drawerOptions = ref({
52+
absolute: false,
53+
color: '',
54+
elevation: 10,
55+
});
2556
26-
provide('links', store.links);
27-
provide('highlightJsLinks', store.highlightJsLinks);
28-
provide('prismLinks', store.prismLinks);
57+
const selectedLibrary = ref(store.libraries[1]);
58+
const selectedTheme = ref('neon-bunny');
59+
60+
provide('selectedLibrary', selectedLibrary);
61+
provide('selectedTheme', selectedTheme);
2962
3063
const codeBlockOptions = ref({
3164
browserWindow: false,
3265
preHeight: '30em',
3366
});
3467
35-
provide('codeBlockOptions', codeBlockOptions);
68+
provide('codeBlockOptions', codeBlockOptions.value);
69+
provide('drawerOptions', drawerOptions);
70+
provide('links', store.links);
3671
37-
function updateLibrary(library) {
38-
selectedLibrary.value = library.value;
72+
function toggleDrawer() {
73+
drawer.value = !drawer.value;
3974
}
4075
</script>
4176

4277

43-
<style scoped>
78+
<style lang="scss">
79+
html {
80+
scroll-behavior: smooth;
81+
scroll-padding-top: 70px;
82+
}
83+
84+
.top-app-bar {
85+
z-index: 99 !important;
86+
87+
.nav-drawer-btn {
88+
.nav-drawer-icon {
89+
height: 18px;
90+
width: 18px;
91+
}
92+
}
93+
}
94+
95+
.v-heading {
96+
position: relative;
97+
98+
> a {
99+
color: rgb(var(--v-theme-primary));
100+
display: inline-block;
101+
inset: 0;
102+
margin: 0 -0.7em;
103+
position: absolute;
104+
105+
&:not(:hover, :focus) {
106+
opacity: 0;
107+
}
108+
}
109+
}
110+
111+
.name-item:not(:hover, :focus) span {
112+
opacity: 0;
113+
}
114+
115+
.v-divider {
116+
margin: 0;
117+
}
44118
</style>
119+
120+

0 commit comments

Comments
 (0)