Skip to content

Commit a410275

Browse files
kettasoftkettasoft
authored
Merge pull request #31 from kettasoft/docs-handle
Update documentation theme and add particles background
2 parents b9f20a9 + c5d9a08 commit a410275

File tree

10 files changed

+936
-461
lines changed

10 files changed

+936
-461
lines changed

‎docs/.vuepress/client.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { defineClientConfig } from "@vuepress/client";
2+
import Particles from "vue3-particles";
3+
import ParticlesBackground from "./components/ParticlesBackground.vue";
4+
5+
export default defineClientConfig({
6+
enhance({ app }) {
7+
app.use(Particles);
8+
},
9+
10+
setup() {},
11+
12+
rootComponents: [ParticlesBackground],
13+
});

‎docs/.vuepress/components/ParticlesBackground.vue‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
<template>
2+
<div class="particles-wrapper">
3+
<Particles
4+
id="tsparticles"
5+
:particlesInit="particlesInit"
6+
:options="particleOptions"
7+
/>
8+
</div>
9+
</template>
10+
11+
<script setup>
12+
import { computed, ref, onMounted } from "vue";
13+
import { loadSlim } from "tsparticles-slim";
14+
15+
const isDark = ref(false);
16+
17+
onMounted(() => {
18+
if (typeof document !== "undefined") {
19+
isDark.value = document.documentElement.classList.contains("dark");
20+
21+
const observer = new MutationObserver(() => {
22+
isDark.value = document.documentElement.classList.contains("dark");
23+
});
24+
25+
observer.observe(document.documentElement, {
26+
attributes: true,
27+
attributeFilter: ["class"],
28+
});
29+
}
30+
});
31+
32+
const particlesInit = async (engine) => {
33+
await loadSlim(engine);
34+
};
35+
36+
const particleOptions = computed(() => ({
37+
background: {
38+
color: {
39+
value: "transparent",
40+
},
41+
},
42+
fpsLimit: 60,
43+
interactivity: {
44+
events: {
45+
onClick: {
46+
enable: false,
47+
mode: "push",
48+
},
49+
onHover: {
50+
enable: true,
51+
mode: "repulse",
52+
},
53+
resize: true,
54+
},
55+
modes: {
56+
push: {
57+
quantity: 2,
58+
},
59+
repulse: {
60+
distance: 120,
61+
duration: 0.6,
62+
},
63+
},
64+
},
65+
particles: {
66+
color: {
67+
value: "#ff4e3c",
68+
},
69+
links: {
70+
color: "#ff4e3c",
71+
distance: 120,
72+
enable: true,
73+
opacity: isDark.value ? 0.2 : 0.15,
74+
width: 1,
75+
},
76+
collisions: {
77+
enable: false,
78+
},
79+
move: {
80+
direction: "none",
81+
enable: true,
82+
outModes: {
83+
default: "out",
84+
},
85+
random: true,
86+
speed: 0.6,
87+
straight: false,
88+
},
89+
number: {
90+
density: {
91+
enable: true,
92+
area: 800,
93+
},
94+
value: 50,
95+
},
96+
opacity: {
97+
value: isDark.value ? 0.4 : 0.2,
98+
},
99+
shape: {
100+
type: "circle",
101+
},
102+
size: {
103+
value: { min: 1, max: 2 },
104+
},
105+
},
106+
detectRetina: true,
107+
}));
108+
</script>
109+
110+
<style scoped>
111+
/* .particles-wrapper {
112+
position: fixed;
113+
top: 0;
114+
left: 0;
115+
width: 100%;
116+
height: 100%;
117+
z-index: -1;
118+
pointer-events: none;
119+
}
120+
121+
.particles-wrapper:hover {
122+
pointer-events: auto;
123+
} */
124+
</style>

‎docs/.vuepress/config.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ export default defineUserConfig({
88
title: "Filterable",
99
description: "Kettasoft Filterable - Powerful Eloquent Filtering Package",
1010

11+
head: [["link", { rel: "icon", href: "favicon.ico" }]],
12+
1113
plugins: [
1214
{
1315
name: "@vuepress/plugin-search",
@@ -16,12 +18,12 @@ export default defineUserConfig({
1618

1719
theme: defaultTheme({
1820
repo: "https://github.com/kettasoft/filterable",
19-
// logo: "/docs/logo.png",
21+
logo: "/images/logo.png",
2022

2123
colorModeSwitch: true,
24+
colorMode: "dark",
2225
sidebarDepth: 3,
2326
logoAlt: null,
24-
logo: null,
2527
selectLanguageText: "ar",
2628
selectLanguageName: "ar",
2729
lastUpdated: true,

‎docs/.vuepress/public/favicon.ico‎

15 KB
Binary file not shown.

‎docs/.vuepress/public/images/logo.png‎

100755100644
82 KB
Loading

‎docs/.vuepress/styles/index.scss‎

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
:root {
2+
--vp-c-accent: #ff2d20;
3+
--vp-c-accent-bg: #ff4e3c;
4+
--vp-c-accent-hover: #ff5e4c;
5+
--vp-c-accent-text: var(--vp-c-white);
6+
--vp-c-accent-soft: rgba(255, 45, 32, 0.1);
7+
8+
--vp-c-bg: #ffffff;
9+
--vp-c-bg-alt: #f8f8f8;
10+
--vp-c-bg-elv: #ffffff;
11+
12+
--vp-c-text: #1f2937;
13+
--vp-c-text-mute: rgba(31, 41, 55, 0.78);
14+
--vp-c-text-subtle: rgba(31, 41, 55, 0.56);
15+
16+
--vp-c-divider: #e5e7eb;
17+
--vp-c-border: #d1d5db;
18+
--vp-c-border-hard: #9ca3af;
19+
--vp-c-shadow: rgba(0, 0, 0, 0.15);
20+
21+
--vp-c-control: rgba(142, 150, 170, 0.1);
22+
--vp-c-control-hover: rgba(142, 150, 170, 0.16);
23+
--vp-c-control-disabled: #eaeaea;
24+
25+
--vp-navbar-c-bg: var(--vp-c-bg);
26+
--vp-sidebar-c-bg: var(--vp-c-bg);
27+
28+
/* Badges */
29+
--badge-c-tip-text: #10b981;
30+
--badge-c-tip-bg: rgba(16, 185, 129, 0.14);
31+
--badge-c-warning-text: #f59e0b;
32+
--badge-c-warning-bg: rgba(245, 158, 11, 0.14);
33+
--badge-c-danger-text: #ef4444;
34+
--badge-c-danger-bg: rgba(239, 68, 68, 0.14);
35+
--badge-c-important-text: #8b5cf6;
36+
--badge-c-important-bg: rgba(139, 92, 246, 0.14);
37+
--badge-c-info-text: #3b82f6;
38+
--badge-c-info-bg: rgba(59, 130, 246, 0.14);
39+
--badge-c-note-text: #6b7280;
40+
--badge-c-note-bg: rgba(107, 114, 128, 0.14);
41+
42+
/* Code tabs */
43+
--vp-c-code-tab-title: rgb(255 255 255 / 90%);
44+
--vp-c-code-tab-bg: var(--vp-c-bg-alt);
45+
--vp-c-code-tab-active: var(--vp-c-accent);
46+
}
47+
48+
[data-theme="dark"] {
49+
--vp-c-accent: #ff4e3c;
50+
--vp-c-accent-bg: #ffe5e3;
51+
--vp-c-accent-hover: #ff6f55;
52+
--vp-c-accent-text: var(--vp-c-white);
53+
--vp-c-accent-soft: rgba(255, 45, 32, 0.2);
54+
--vp-c-gutter: #374151;
55+
--vp-c-bg: #0f172a;
56+
--vp-c-bg-alt: #1e293b;
57+
--vp-c-bg-elv: #111827;
58+
--vp-c-white: #ffffff;
59+
--vp-c-text: #f3f4f6;
60+
--vp-c-text-mute: rgba(243, 244, 246, 0.78);
61+
--vp-c-text-subtle: rgba(243, 244, 246, 0.56);
62+
--vp-c-divider: #374151;
63+
--vp-c-border: #4b5563;
64+
--vp-c-border-hard: #6b7280;
65+
--vp-c-shadow: rgba(0 0 0 0.4);
66+
--vp-c-control: rgba(142, 150, 170, 0.1);
67+
--vp-c-control-hover: rgba(142, 150, 170, 0.16);
68+
--vp-c-control-disabled: #2c2c2c;
69+
70+
--vp-navbar-c-bg: var(--vp-c-bg);
71+
--vp-sidebar-c-bg: var(--vp-c-bg);
72+
73+
/* Badges */
74+
--badge-c-tip-text: #10b981;
75+
--badge-c-tip-bg: rgba(16, 185, 129, 0.25);
76+
--badge-c-warning-text: #f59e0b;
77+
--badge-c-warning-bg: rgba(245, 158, 11, 0.25);
78+
--badge-c-danger-text: #ef4444;
79+
--badge-c-danger-bg: rgba(239, 68, 68, 0.25);
80+
--badge-c-important-text: #8b5cf6;
81+
--badge-c-important-bg: rgba(139, 92, 246, 0.25);
82+
--badge-c-info-text: #3b82f6;
83+
--badge-c-info-bg: rgba(59, 130, 246, 0.25);
84+
--badge-c-note-text: #6b7280;
85+
--badge-c-note-bg: rgba(107, 114, 128, 0.25);
86+
87+
/* Code tabs */
88+
--vp-c-code-tab-title: rgb(255 255 255 / 90%);
89+
--vp-c-code-tab-bg: var(--vp-c-bg-elv);
90+
--vp-c-code-tab-active: var(--vp-c-accent);
91+
92+
--code-c-bg: rgb(19, 19, 31);
93+
}
94+
95+
a {
96+
color: var(--vp-c-accent);
97+
text-decoration: none;
98+
transition: color 0.2s ease, text-shadow 0.2s ease;
99+
}
100+
101+
a.vp-hero-action-button {
102+
border-radius: 0.375em;
103+
transition: all 0.3s;
104+
}
105+
106+
a.vp-hero-action-button.primary {
107+
background-color: var(--vp-c-accent) !important;
108+
border: none !important;
109+
padding: 0.75em 1.5em;
110+
box-shadow: 0 4px 6px rgba(255, 45, 32, 0.1);
111+
transition: background-color 0.2s ease, box-shadow 0.2s ease;
112+
}
113+
114+
a.vp-hero-action-button.primary:hover {
115+
background-color: var(--vp-c-accent-hover) !important;
116+
box-shadow: 0 6px 8px rgba(255, 45, 32, 0.2);
117+
}
118+
119+
a.vp-hero-action-button.secondary:hover {
120+
// background-color: var(--vp-c-accent);
121+
color: var(--vp-c-white);
122+
border-color: var(--vp-c-accent-hover);
123+
background-color: var(--vp-c-accent);
124+
box-shadow: 0 6px 8px rgba(255, 45, 32, 0.2);
125+
}
126+
127+
// Tokens
128+
/* ==============================
129+
Dracula Theme Code Tokens
130+
============================== */
131+
html.dark {
132+
/* Background color */
133+
--vp-c-bg: #282a36;
134+
--vp-c-bg-alt: #44475a;
135+
--vp-c-text: #f8f8f2;
136+
}
137+
138+
/* Tokens */
139+
// .token.keyword {
140+
// color: #ffcb8b;
141+
// font-weight: bold;
142+
// }
143+
144+
.token.class-name {
145+
color: #a9c77d;
146+
}
147+
148+
.token.class-name-definition,
149+
.token.class-name.type-declaration,
150+
.token.class-name.static-context {
151+
color: #ffcb6b;
152+
}
153+
154+
.token.variable {
155+
color: #f8f8f2;
156+
}
157+
158+
.token.keyword {
159+
color: #c792ea;
160+
font-weight: bold;
161+
}
162+
163+
.token.function {
164+
color: #82aaff;
165+
}
166+
167+
.token.string {
168+
color: #f1fa8c;
169+
}
170+
171+
.token.number {
172+
color: #bd93f9;
173+
}
174+
175+
.token.comment {
176+
color: #6272a4;
177+
font-style: italic;
178+
}
179+
180+
.token.operator {
181+
color: #8be9fd;
182+
}

0 commit comments

Comments
 (0)