@voidzero-dev/vitepress-theme 0.0.11 → 0.0.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/assets/terminal-background.jpg +0 -0
  2. package/components/Eyebrow.vue +11 -0
  3. package/components/Footer.vue +44 -0
  4. package/components/Header.vue +38 -0
  5. package/components/RiveAnimation.vue +144 -0
  6. package/components/Terminal.vue +165 -0
  7. package/components/terminal-animations/TerminalAnimation1.vue +53 -0
  8. package/components/terminal-animations/TerminalAnimation2.vue +58 -0
  9. package/components/terminal-animations/TerminalAnimation3.vue +45 -0
  10. package/components/terminal-animations/TerminalAnimation4.vue +49 -0
  11. package/components/terminal-animations/TerminalAnimation5.vue +50 -0
  12. package/components/terminal-animations/TerminalAnimation6.vue +54 -0
  13. package/index.ts +44 -0
  14. package/package.json +18 -21
  15. package/{dist/index.css → style.css} +7 -7
  16. package/dist/_virtual/_/plugin-vue/export-helper.js +0 -11
  17. package/dist/assets/cta-background-CgYtVhnO.jpg +0 -1
  18. package/dist/assets/cta-background.jpg +0 -1
  19. package/dist/index.d.ts +0 -2
  20. package/dist/index.js +0 -3
  21. package/dist/vitepress/assets/cta-background.js +0 -5
  22. package/dist/vitepress/components/Eyebrow.js +0 -18
  23. package/dist/vitepress/components/Footer.js +0 -72
  24. package/dist/vitepress/components/Header.js +0 -34
  25. package/dist/vitepress/components/RiveAnimation.js +0 -117
  26. package/dist/vitepress/components/Terminal.js +0 -161
  27. package/dist/vitepress/components/icons/VZIconBluesky.js +0 -21
  28. package/dist/vitepress/components/icons/VZIconGitHub.js +0 -21
  29. package/dist/vitepress/components/icons/VZIconLogo.js +0 -24
  30. package/dist/vitepress/components/icons/VZIconTwitter.js +0 -21
  31. package/dist/vitepress/components/terminal-animations/TerminalAnimation1.js +0 -37
  32. package/dist/vitepress/components/terminal-animations/TerminalAnimation2.js +0 -44
  33. package/dist/vitepress/components/terminal-animations/TerminalAnimation3.js +0 -37
  34. package/dist/vitepress/components/terminal-animations/TerminalAnimation4.js +0 -37
  35. package/dist/vitepress/components/terminal-animations/TerminalAnimation5.js +0 -37
  36. package/dist/vitepress/components/terminal-animations/TerminalAnimation6.js +0 -37
  37. package/dist/vitepress/index.d.ts +0 -34
  38. package/dist/vitepress/index.js +0 -21
  39. /package/{dist/assets → assets}/checkmark.svg +0 -0
  40. /package/{dist/assets → assets}/primary-button-background.jpg +0 -0
  41. /package/{dist/fonts → fonts}/APK-Protocol-Medium.woff2 +0 -0
  42. /package/{dist/fonts → fonts}/KHTeka-Medium.woff2 +0 -0
  43. /package/{dist/fonts → fonts}/KHTeka-Regular.woff2 +0 -0
  44. /package/{dist/fonts → fonts}/KHTekaMono-Medium.woff2 +0 -0
  45. /package/{dist/fonts → fonts}/KHTekaMono-Regular.woff2 +0 -0
@@ -0,0 +1,54 @@
1
+ <script setup lang="ts">
2
+ import Typewriter from 'typewriter-effect/dist/core'
3
+ import {onMounted, onUnmounted} from "vue";
4
+
5
+ const props = defineProps<{
6
+ onAnimationComplete?: () => void
7
+ }>()
8
+
9
+ let typewriter;
10
+
11
+ onMounted(() => {
12
+ const target = document.getElementById('terminal-code');
13
+ typewriter = new Typewriter(target, {
14
+ loop: false,
15
+ delay: 1,
16
+ })
17
+ typewriter
18
+ .typeString(`<span>$ vite build</span>`)
19
+ .pauseFor(200)
20
+ .pasteString(`<span class="block w-full h-[1rem]"></span>`)
21
+ .pasteString(`<div class="block"><span class="text-vite">VITE+ v1.0.0</span> <span class="text-aqua">building for production</span></div>`)
22
+ .pauseFor(100)
23
+ .pasteString(`<div class="block">transforming...</div>`)
24
+ .pauseFor(400)
25
+ .pasteString(`<div class="block"><span class="text-zest">✓</span> <span class="text-grey">32 modules transformed...</span></div>`)
26
+ .pauseFor(300)
27
+ .pasteString(`<div class="block">rendering chunks...</div>`)
28
+ .pasteString(`<div class="block">computing gzip size...</div>`)
29
+ .pasteString(`<div class="block text-grey"><span class="w-72 inline-block">dist/<span class="text-white">index.html</span></span>&nbsp;&nbsp;0.46 kB | gzip: 0.30 kB</div>`)
30
+ .pasteString(`<div class="block text-grey"><span class="w-72 inline-block">dist/assets/<span class="text-vite">react-CHdo91hT.svg</span></span>&nbsp;&nbsp;4.13 kB | gzip: 2.05 kB</div>`)
31
+ .pasteString(`<div class="block text-grey"><span class="w-72 inline-block">dist/assets/<span class="text-electric">index-D8b4DHJx.css</span></span>&nbsp;&nbsp;1.39 kB | gzip: 0.71 kB</div>`)
32
+ .pasteString(`<div class="block text-grey"><span class="w-72 inline-block">dist/assets/<span class="text-aqua">index-CAl1KfkQ.js</span></span>188.06 kB | gzip: 59.21 kB</div>`)
33
+ .pasteString(`<div class="block"><span class="text-zest">✓ built in 308ms</span></div>`)
34
+ .pasteString(`<span class="block w-full h-[1rem]"></span>`)
35
+ .callFunction(() => {
36
+ if (props.onAnimationComplete) {
37
+ props.onAnimationComplete()
38
+ }
39
+ })
40
+ .start();
41
+ })
42
+
43
+ onUnmounted(() => {
44
+ if(typewriter){
45
+ typewriter.stop()
46
+ }
47
+ })
48
+ </script>
49
+
50
+ <template>
51
+ <p class="font-mono text-sm text-white leading-[1.5rem]">
52
+ <span id="terminal-code"></span>
53
+ </p>
54
+ </template>
package/index.ts ADDED
@@ -0,0 +1,44 @@
1
+ /**
2
+ * @voidzero-dev/vitepress-theme
3
+ *
4
+ * Shared VitePress theme providing base styles, fonts, and design tokens
5
+ * for VoidZero projects.
6
+ *
7
+ * Usage:
8
+ * Extend this theme in your project's VitePress theme.
9
+ *
10
+ * @example
11
+ * ```ts
12
+ * // In your-project/.vitepress/theme/index.ts
13
+ * import Theme from '@voidzero-dev/vitepress-theme'
14
+ * import './overrides.css' // Your project-specific styles
15
+ *
16
+ * export default {
17
+ * extends: Theme,
18
+ * Layout: YourLayout
19
+ * }
20
+ * ```
21
+ */
22
+
23
+ import type { Theme } from 'vitepress'
24
+ import Footer from './components/Footer.vue'
25
+ import Header from './components/Header.vue'
26
+ import Terminal from './components/Terminal.vue'
27
+ import Eyebrow from './components/Eyebrow.vue'
28
+ import RiveAnimation from './components/RiveAnimation.vue'
29
+
30
+ // NOTE: We don't import style.css here because the consuming theme
31
+ // needs to import Tailwind first, then our styles.
32
+ // See the usage example in the JSDoc comment above.
33
+
34
+ export default {
35
+ Layout: () => null, // Base theme provides no layout, consuming themes must provide one
36
+ enhanceApp({ app }) {
37
+ // Register shared components globally - available in all consuming projects
38
+ app.component('Footer', Footer)
39
+ app.component('Header', Header)
40
+ app.component('Terminal', Terminal)
41
+ app.component('Eyebrow', Eyebrow)
42
+ app.component('RiveAnimation', RiveAnimation)
43
+ }
44
+ } satisfies Theme
package/package.json CHANGED
@@ -1,26 +1,22 @@
1
1
  {
2
2
  "name": "@voidzero-dev/vitepress-theme",
3
- "version": "0.0.11",
3
+ "version": "0.0.12",
4
4
  "description": "Shared VitePress theme for VoidZero projects",
5
5
  "type": "module",
6
- "license": "MIT",
7
- "main": "./dist/index.js",
8
- "types": "./dist/index.d.ts",
6
+ "main": "./index.ts",
9
7
  "exports": {
10
8
  ".": {
11
- "style": "./dist/index.css",
12
- "types": "./dist/index.d.ts",
13
- "import": "./dist/index.js"
14
- },
15
- "./index.css": "./dist/index.css"
9
+ "style": "./style.css",
10
+ "import": "./index.ts"
11
+ }
16
12
  },
17
13
  "files": [
18
- "dist"
14
+ "index.ts",
15
+ "style.css",
16
+ "fonts",
17
+ "assets",
18
+ "components"
19
19
  ],
20
- "scripts": {
21
- "dev": "tsdown --watch",
22
- "build": "tsdown"
23
- },
24
20
  "peerDependencies": {
25
21
  "vitepress": "^2.0.0-alpha.12",
26
22
  "vue": "^3.5.0"
@@ -29,14 +25,15 @@
29
25
  "@rive-app/canvas": "^2.31.6",
30
26
  "@tailwindcss/typography": "^0.5.19",
31
27
  "@tailwindcss/vite": "^4.1.13",
32
- "reka-ui": "^2.5.1",
33
28
  "tailwindcss": "^4.1.13",
29
+ "reka-ui": "^2.5.1",
34
30
  "typewriter-effect": "^2.22.0"
35
31
  },
36
- "devDependencies": {
37
- "tsdown": "^0.15.11",
38
- "typescript": "^5.9.3",
39
- "unplugin-vue": "^7.0.4",
40
- "vue-tsc": "^3.1.2"
41
- }
32
+ "keywords": [
33
+ "vitepress",
34
+ "theme",
35
+ "voidzero",
36
+ "tailwind"
37
+ ],
38
+ "license": "MIT"
42
39
  }
@@ -13,31 +13,31 @@
13
13
  @font-face {
14
14
  font-family: 'APK Protocol';
15
15
  font-weight: 500;
16
- src: url('fonts/APK-Protocol-Medium.woff2') format('woff2');
16
+ src: url('./fonts/APK-Protocol-Medium.woff2') format('woff2');
17
17
  }
18
18
 
19
19
  @font-face {
20
20
  font-family: 'KH Teka';
21
21
  font-weight: 400;
22
- src: url('fonts/KHTeka-Regular.woff2') format('woff2');
22
+ src: url('./fonts/KHTeka-Regular.woff2') format('woff2');
23
23
  }
24
24
 
25
25
  @font-face {
26
26
  font-family: 'KH Teka';
27
27
  font-weight: 500;
28
- src: url('fonts/KHTeka-Medium.woff2') format('woff2');
28
+ src: url('./fonts/KHTeka-Medium.woff2') format('woff2');
29
29
  }
30
30
 
31
31
  @font-face {
32
32
  font-family: 'KH Teka Mono';
33
33
  font-weight: 400;
34
- src: url('fonts/KHTekaMono-Regular.woff2') format('woff2');
34
+ src: url('./fonts/KHTekaMono-Regular.woff2') format('woff2');
35
35
  }
36
36
 
37
37
  @font-face {
38
38
  font-family: 'KH Teka Mono';
39
39
  font-weight: 500;
40
- src: url('fonts/KHTekaMono-Medium.woff2') format('woff2');
40
+ src: url('./fonts/KHTekaMono-Medium.woff2') format('woff2');
41
41
  }
42
42
 
43
43
  @custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
@@ -178,7 +178,7 @@
178
178
  right: -3px;
179
179
  bottom: -3px;
180
180
  background-color: #CCCCCC;
181
- background-image: url('assets/primary-button-background.jpg');
181
+ background-image: url('./assets/primary-button-background.jpg');
182
182
  background-size: 150% 150%;
183
183
  background-position: center;
184
184
  border-radius: calc(0.5rem + 3px);
@@ -273,7 +273,7 @@
273
273
  transform: translateY(-50%);
274
274
  width: 20px;
275
275
  height: 20px;
276
- background-image: url('assets/checkmark.svg');
276
+ background-image: url('./assets/checkmark.svg');
277
277
  background-size: contain;
278
278
  background-repeat: no-repeat;
279
279
  background-position: center;
@@ -1,11 +0,0 @@
1
- //#region \0/plugin-vue/export-helper
2
- var export_helper_default = (sfc, props) => {
3
- const target = sfc.__vccOpts || sfc;
4
- for (const [key, val] of props) {
5
- target[key] = val;
6
- }
7
- return target;
8
- };
9
-
10
- //#endregion
11
- export { export_helper_default as default };
@@ -1 +0,0 @@
1
- PLACEHOLDER - Replace with actual cta-background.jpg from viteplus.dev repository
@@ -1 +0,0 @@
1
- PLACEHOLDER - Replace with actual cta-background.jpg from viteplus.dev repository
package/dist/index.d.ts DELETED
@@ -1,2 +0,0 @@
1
- import { VPTheme } from "./vitepress/index.js";
2
- export { VPTheme, VPTheme as default };
package/dist/index.js DELETED
@@ -1,3 +0,0 @@
1
- import vitepress_default, { VPTheme } from "./vitepress/index.js";
2
-
3
- export { VPTheme, vitepress_default as default };
@@ -1,5 +0,0 @@
1
- //#region src/vitepress/assets/cta-background.jpg
2
- var cta_background_default = "assets/cta-background-CgYtVhnO.jpg";
3
-
4
- //#endregion
5
- export { cta_background_default as default };
@@ -1,18 +0,0 @@
1
- import { createElementBlock, createElementVNode, defineComponent, openBlock, toDisplayString } from "vue";
2
-
3
- //#region src/vitepress/components/Eyebrow.vue
4
- const _hoisted_1 = { class: "wrapper wrapper--ticks border-t p-5 pl-10" };
5
- const _hoisted_2 = { class: "text-nickel dark:text-white text-xs font-medium font-mono uppercase tracking-wide" };
6
- const _sfc_main = /* @__PURE__ */ defineComponent({
7
- __name: "Eyebrow",
8
- props: { title: {} },
9
- setup(__props) {
10
- return (_ctx, _cache) => {
11
- return openBlock(), createElementBlock("section", _hoisted_1, [createElementVNode("span", _hoisted_2, toDisplayString(__props.title), 1)]);
12
- };
13
- }
14
- });
15
- var Eyebrow_default = _sfc_main;
16
-
17
- //#endregion
18
- export { Eyebrow_default as default };
@@ -1,72 +0,0 @@
1
- import VZIconGitHub_default from "./icons/VZIconGitHub.js";
2
- import VZIconBluesky_default from "./icons/VZIconBluesky.js";
3
- import VZIconTwitter_default from "./icons/VZIconTwitter.js";
4
- import cta_background_default from "../assets/cta-background.js";
5
- import { createElementBlock, createElementVNode, createStaticVNode, createTextVNode, createVNode, defineComponent, normalizeStyle, openBlock, toDisplayString, unref } from "vue";
6
-
7
- //#region src/vitepress/components/Footer.vue
8
- const _hoisted_1 = {
9
- class: "bg-primary",
10
- "data-theme": "dark"
11
- };
12
- const _hoisted_2 = { class: "wrapper" };
13
- const _hoisted_3 = { class: "px-5 md:px-24 pt-10 md:pt-16 pb-16 md:pb-30 flex flex-col md:flex-row gap-10 md:gap-0 md:justify-between" };
14
- const _hoisted_4 = { class: "flex flex-col gap-3" };
15
- const _hoisted_5 = {
16
- href: "https://github.com/voidzero-dev",
17
- target: "_blank",
18
- rel: "noopener noreferrer",
19
- class: "text-white text-base flex gap-3 items-center"
20
- };
21
- const _hoisted_6 = {
22
- href: "https://web-cdn.bsky.app/profile/voidzero.dev",
23
- target: "_blank",
24
- rel: "noopener noreferrer",
25
- class: "text-white text-base flex gap-3 items-center"
26
- };
27
- const _hoisted_7 = {
28
- href: "https://x.com/voidzerodev",
29
- target: "_blank",
30
- rel: "noopener noreferrer",
31
- class: "text-white text-base flex gap-3 items-center"
32
- };
33
- const _hoisted_8 = { class: "wrapper wrapper--ticks border-t py-5 px-5 md:px-24" };
34
- const _hoisted_9 = { class: "text-sm" };
35
- const _sfc_main = /* @__PURE__ */ defineComponent({
36
- __name: "Footer",
37
- setup(__props) {
38
- return (_ctx, _cache) => {
39
- return openBlock(), createElementBlock("footer", _hoisted_1, [createElementVNode("section", _hoisted_2, [createElementVNode("div", {
40
- class: "bg-wine bg-cover py-16 md:py-30 px-5 md:px-0 overflow-clip flex flex-col items-center justify-center gap-8 md:gap-12",
41
- style: normalizeStyle({ backgroundImage: `url(${unref(cta_background_default)})` })
42
- }, [..._cache[0] || (_cache[0] = [createElementVNode("h2", { class: "text-white w-full md:w-2xl text-center text-balance" }, "Take your team's productivity to the next level with Vite+", -1), createElementVNode("div", { class: "flex items-center gap-5" }, [createElementVNode("a", {
43
- href: "https://tally.so/r/nGWebL",
44
- target: "_blank",
45
- rel: "noopener noreferrer",
46
- class: "button"
47
- }, "Register your interest"), createElementVNode("a", {
48
- href: "https://voidzero.dev/posts/announcing-vite-plus?utm_source=viteplusdev&utm_content=bottom_learn_more",
49
- target: "_blank",
50
- rel: "noopener noreferrer",
51
- class: "button"
52
- }, " Learn more ")], -1)])], 4), createElementVNode("div", _hoisted_3, [_cache[5] || (_cache[5] = createStaticVNode("<div><p class=\"text-grey text-xs font-mono uppercase tracking-wide mb-8\">Company</p><ul class=\"flex flex-col gap-3\"><li><a href=\"https://voidzero.dev/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"text-white text-base\">VoidZero</a></li><li><a href=\"https://vite.dev/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"text-white text-base\">Vite</a></li><li><a href=\"https://rolldown.rs/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"text-white text-base\">Rolldown</a></li><li><a href=\"https://vitest.dev/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"text-white text-base\">Vitest</a></li><li><a href=\"https://oxc.rs/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"text-white text-base\">Oxc</a></li></ul></div>", 1)), createElementVNode("div", null, [_cache[4] || (_cache[4] = createElementVNode("p", { class: "text-grey text-xs font-mono uppercase tracking-wide mb-8" }, "Social", -1)), createElementVNode("ul", _hoisted_4, [
53
- createElementVNode("li", null, [createElementVNode("a", _hoisted_5, [createVNode(VZIconGitHub_default, {
54
- class: "size-5",
55
- "aria-label": "GitHub"
56
- }), _cache[1] || (_cache[1] = createTextVNode("GitHub", -1))])]),
57
- createElementVNode("li", null, [createElementVNode("a", _hoisted_6, [createVNode(VZIconBluesky_default, {
58
- class: "size-5",
59
- "aria-label": "Bluesky"
60
- }), _cache[2] || (_cache[2] = createTextVNode("Bluesky", -1))])]),
61
- createElementVNode("li", null, [createElementVNode("a", _hoisted_7, [createVNode(VZIconTwitter_default, {
62
- class: "size-5",
63
- "aria-label": "Twitter"
64
- }), _cache[3] || (_cache[3] = createTextVNode("X.com", -1))])])
65
- ])])])]), createElementVNode("section", _hoisted_8, [createElementVNode("p", _hoisted_9, [createTextVNode("© " + toDisplayString((/* @__PURE__ */ new Date()).getFullYear()) + " VoidZero Inc. ", 1), _cache[6] || (_cache[6] = createElementVNode("span", { class: "hidden sm:inline" }, "All Rights Reserved.", -1))])])]);
66
- };
67
- }
68
- });
69
- var Footer_default = _sfc_main;
70
-
71
- //#endregion
72
- export { Footer_default as default };
@@ -1,34 +0,0 @@
1
- import VZIconLogo_default from "./icons/VZIconLogo.js";
2
- import { Fragment, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, renderList, renderSlot, toDisplayString, unref } from "vue";
3
- import { useData, useRoute } from "vitepress";
4
-
5
- //#region src/vitepress/components/Header.vue
6
- const _hoisted_1 = { class: "wrapper px-6 py-7 flex items-center justify-between" };
7
- const _hoisted_2 = { class: "flex items-center gap-10" };
8
- const _hoisted_3 = { href: "/" };
9
- const _hoisted_4 = { class: "nav" };
10
- const _hoisted_5 = ["href"];
11
- const _hoisted_6 = { class: "flex items-center gap-6" };
12
- const _sfc_main = /* @__PURE__ */ defineComponent({
13
- __name: "Header",
14
- setup(__props) {
15
- const { site, theme } = useData();
16
- const nav = theme.value.nav;
17
- const route = useRoute();
18
- return (_ctx, _cache) => {
19
- return openBlock(), createElementBlock("header", _hoisted_1, [createElementVNode("div", _hoisted_2, [createElementVNode("a", _hoisted_3, [createVNode(VZIconLogo_default, {
20
- class: "h-4",
21
- "aria-label": unref(site).title
22
- }, null, 8, ["aria-label"])]), createElementVNode("ul", _hoisted_4, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(nav), (navItem) => {
23
- return openBlock(), createElementBlock("li", { key: navItem.link }, [createElementVNode("a", {
24
- class: normalizeClass({ active: unref(route).path === navItem.link }),
25
- href: navItem.link
26
- }, toDisplayString(navItem.text), 11, _hoisted_5)]);
27
- }), 128))])]), createElementVNode("div", _hoisted_6, [renderSlot(_ctx.$slots, "right-side", {}, () => [createCommentVNode(" Right-aligned links / calls-to-action ")])])]);
28
- };
29
- }
30
- });
31
- var Header_default = _sfc_main;
32
-
33
- //#endregion
34
- export { Header_default as default };
@@ -1,117 +0,0 @@
1
- import { computed, createElementBlock, createElementVNode, defineComponent, normalizeClass, onMounted, onUnmounted, openBlock, ref } from "vue";
2
- import * as rive from "@rive-app/canvas";
3
-
4
- //#region src/vitepress/components/RiveAnimation.vue
5
- const _hoisted_1 = ["width", "height"];
6
- const _sfc_main = /* @__PURE__ */ defineComponent({
7
- __name: "RiveAnimation",
8
- props: {
9
- desktopSrc: {},
10
- mobileSrc: {},
11
- breakpoint: { default: 768 },
12
- stateMachines: { default: "State Machine 1" },
13
- canvasClass: { default: "w-full" },
14
- desktopWidth: {},
15
- desktopHeight: {},
16
- mobileWidth: {},
17
- mobileHeight: {}
18
- },
19
- setup(__props) {
20
- const props = __props;
21
- const canvasRef = ref(null);
22
- const containerRef = ref(null);
23
- let riveInstance = null;
24
- let hasStarted = ref(false);
25
- let observer = null;
26
- const isMobile = ref(false);
27
- const checkMobile = () => {
28
- isMobile.value = window.innerWidth < props.breakpoint;
29
- };
30
- const getCurrentSrc = () => {
31
- return isMobile.value && props.mobileSrc ? props.mobileSrc : props.desktopSrc;
32
- };
33
- const currentWidth = computed(() => {
34
- return isMobile.value && props.mobileWidth ? props.mobileWidth : props.desktopWidth;
35
- });
36
- const currentHeight = computed(() => {
37
- return isMobile.value && props.mobileHeight ? props.mobileHeight : props.desktopHeight;
38
- });
39
- const loadAnimation = () => {
40
- if (!canvasRef.value || riveInstance) return;
41
- const src = getCurrentSrc();
42
- riveInstance = new rive.Rive({
43
- src,
44
- canvas: canvasRef.value,
45
- autoplay: false,
46
- stateMachines: props.stateMachines,
47
- onLoad: () => {
48
- riveInstance?.resizeDrawingSurfaceToCanvas();
49
- }
50
- });
51
- };
52
- const playAnimation = () => {
53
- if (riveInstance) {
54
- riveInstance.play();
55
- }
56
- };
57
- const cleanupAnimation = () => {
58
- if (riveInstance) {
59
- riveInstance.cleanup();
60
- riveInstance = null;
61
- }
62
- };
63
- const handleResize = () => {
64
- const wasMobile = isMobile.value;
65
- checkMobile();
66
- if (wasMobile !== isMobile.value) {
67
- const wasPlaying = hasStarted.value;
68
- cleanupAnimation();
69
- loadAnimation();
70
- if (wasPlaying) {
71
- playAnimation();
72
- }
73
- }
74
- };
75
- onMounted(() => {
76
- checkMobile();
77
- loadAnimation();
78
- observer = new IntersectionObserver((entries) => {
79
- entries.forEach((entry) => {
80
- if (entry.isIntersecting && !hasStarted.value) {
81
- hasStarted.value = true;
82
- playAnimation();
83
- }
84
- });
85
- }, { threshold: .1 });
86
- if (containerRef.value) {
87
- observer.observe(containerRef.value);
88
- }
89
- window.addEventListener("resize", handleResize);
90
- });
91
- onUnmounted(() => {
92
- cleanupAnimation();
93
- if (observer && containerRef.value) {
94
- observer.unobserve(containerRef.value);
95
- observer.disconnect();
96
- }
97
- window.removeEventListener("resize", handleResize);
98
- });
99
- return (_ctx, _cache) => {
100
- return openBlock(), createElementBlock("div", {
101
- ref_key: "containerRef",
102
- ref: containerRef,
103
- class: "pointer-events-none touch-none select-none"
104
- }, [createElementVNode("canvas", {
105
- ref_key: "canvasRef",
106
- ref: canvasRef,
107
- width: currentWidth.value,
108
- height: currentHeight.value,
109
- class: normalizeClass(__props.canvasClass)
110
- }, null, 10, _hoisted_1)], 512);
111
- };
112
- }
113
- });
114
- var RiveAnimation_default = _sfc_main;
115
-
116
- //#endregion
117
- export { RiveAnimation_default as default };
@@ -1,161 +0,0 @@
1
- import TerminalAnimation1_default from "./terminal-animations/TerminalAnimation1.js";
2
- import TerminalAnimation2_default from "./terminal-animations/TerminalAnimation2.js";
3
- import TerminalAnimation3_default from "./terminal-animations/TerminalAnimation3.js";
4
- import TerminalAnimation4_default from "./terminal-animations/TerminalAnimation4.js";
5
- import TerminalAnimation5_default from "./terminal-animations/TerminalAnimation5.js";
6
- import TerminalAnimation6_default from "./terminal-animations/TerminalAnimation6.js";
7
- import { createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, onMounted, onUnmounted, openBlock, ref, unref, withCtx } from "vue";
8
- import { TabsContent, TabsList, TabsRoot, TabsTrigger } from "reka-ui";
9
-
10
- //#region src/vitepress/components/Terminal.vue
11
- const AUTO_ADVANCE_DELAY = 1500;
12
- const _sfc_main = /* @__PURE__ */ defineComponent({
13
- __name: "Terminal",
14
- setup(__props) {
15
- const activeTab = ref("tab1");
16
- const autoPlayEnabled = ref(true);
17
- let autoAdvanceTimeout = null;
18
- const sectionRef = ref(null);
19
- const isVisible = ref(false);
20
- let observer = null;
21
- const tabSequence = [
22
- "tab1",
23
- "tab2",
24
- "tab3",
25
- "tab4",
26
- "tab5",
27
- "tab6"
28
- ];
29
- const goToNextTab = () => {
30
- const currentIndex = tabSequence.indexOf(activeTab.value);
31
- const nextIndex = (currentIndex + 1) % tabSequence.length;
32
- activeTab.value = tabSequence[nextIndex];
33
- };
34
- const onAnimationComplete = () => {
35
- if (!autoPlayEnabled.value) return;
36
- if (autoAdvanceTimeout) {
37
- clearTimeout(autoAdvanceTimeout);
38
- }
39
- autoAdvanceTimeout = setTimeout(() => {
40
- goToNextTab();
41
- }, AUTO_ADVANCE_DELAY);
42
- };
43
- const onTabChange = () => {
44
- autoPlayEnabled.value = false;
45
- if (autoAdvanceTimeout) {
46
- clearTimeout(autoAdvanceTimeout);
47
- autoAdvanceTimeout = null;
48
- }
49
- };
50
- onMounted(() => {
51
- if (!sectionRef.value) return;
52
- observer = new IntersectionObserver((entries) => {
53
- entries.forEach((entry) => {
54
- if (entry.isIntersecting && !isVisible.value) {
55
- isVisible.value = true;
56
- observer?.disconnect();
57
- }
58
- });
59
- }, {
60
- threshold: .2,
61
- rootMargin: "0px"
62
- });
63
- observer.observe(sectionRef.value);
64
- });
65
- onUnmounted(() => {
66
- if (autoAdvanceTimeout) {
67
- clearTimeout(autoAdvanceTimeout);
68
- }
69
- if (observer) {
70
- observer.disconnect();
71
- }
72
- });
73
- return (_ctx, _cache) => {
74
- return openBlock(), createElementBlock("section", {
75
- ref_key: "sectionRef",
76
- ref: sectionRef,
77
- class: "wrapper border-t h-[40rem] bg-wine bg-[url(/terminal-background.jpg)] bg-cover bg-top flex justify-center pt-28 overflow-clip"
78
- }, [createElementVNode("div", {
79
- class: normalizeClass([
80
- "self-stretch px-4 sm:px-8 py-5 sm:py-7 relative bg-primary rounded-tl-lg rounded-tr-lg inline-flex flex-col justify-start items-start gap-2 overflow-hidden w-[62rem] outline-1 outline-offset-[3px] outline-white/30",
81
- "transition-transform duration-1000",
82
- isVisible.value ? "translate-y-0" : "translate-y-24"
83
- ]),
84
- style: { "transition-timing-function": "cubic-bezier(0.16, 1, 0.3, 1)" }
85
- }, [isVisible.value ? (openBlock(), createBlock(unref(TabsRoot), {
86
- key: 0,
87
- modelValue: activeTab.value,
88
- "onUpdate:modelValue": [_cache[0] || (_cache[0] = ($event) => activeTab.value = $event), onTabChange]
89
- }, {
90
- default: withCtx(() => [
91
- createVNode(unref(TabsList), {
92
- "aria-label": "features",
93
- class: normalizeClass([
94
- "absolute bottom-6 left-1/2 -translate-x-1/2 flex items-center p-1 rounded-md border border-white/10",
95
- "transition-transform duration-700 delay-300",
96
- isVisible.value ? "translate-y-0" : "translate-y-12"
97
- ]),
98
- style: { "transition-timing-function": "cubic-bezier(0.16, 1, 0.3, 1)" }
99
- }, {
100
- default: withCtx(() => [
101
- createVNode(unref(TabsTrigger), { value: "tab1" }, {
102
- default: withCtx(() => [..._cache[1] || (_cache[1] = [createTextVNode(" new ", -1)])]),
103
- _: 1
104
- }),
105
- createVNode(unref(TabsTrigger), { value: "tab2" }, {
106
- default: withCtx(() => [..._cache[2] || (_cache[2] = [createTextVNode(" dev ", -1)])]),
107
- _: 1
108
- }),
109
- createVNode(unref(TabsTrigger), { value: "tab3" }, {
110
- default: withCtx(() => [..._cache[3] || (_cache[3] = [createTextVNode(" lint ", -1)])]),
111
- _: 1
112
- }),
113
- createVNode(unref(TabsTrigger), { value: "tab4" }, {
114
- default: withCtx(() => [..._cache[4] || (_cache[4] = [createTextVNode(" fmt ", -1)])]),
115
- _: 1
116
- }),
117
- createVNode(unref(TabsTrigger), { value: "tab5" }, {
118
- default: withCtx(() => [..._cache[5] || (_cache[5] = [createTextVNode(" test ", -1)])]),
119
- _: 1
120
- }),
121
- createVNode(unref(TabsTrigger), { value: "tab6" }, {
122
- default: withCtx(() => [..._cache[6] || (_cache[6] = [createTextVNode(" build ", -1)])]),
123
- _: 1
124
- })
125
- ]),
126
- _: 1
127
- }, 8, ["class"]),
128
- createVNode(unref(TabsContent), { value: "tab1" }, {
129
- default: withCtx(() => [createVNode(TerminalAnimation1_default, { "on-animation-complete": onAnimationComplete })]),
130
- _: 1
131
- }),
132
- createVNode(unref(TabsContent), { value: "tab2" }, {
133
- default: withCtx(() => [createVNode(TerminalAnimation2_default, { "on-animation-complete": onAnimationComplete })]),
134
- _: 1
135
- }),
136
- createVNode(unref(TabsContent), { value: "tab3" }, {
137
- default: withCtx(() => [createVNode(TerminalAnimation3_default, { "on-animation-complete": onAnimationComplete })]),
138
- _: 1
139
- }),
140
- createVNode(unref(TabsContent), { value: "tab4" }, {
141
- default: withCtx(() => [createVNode(TerminalAnimation4_default, { "on-animation-complete": onAnimationComplete })]),
142
- _: 1
143
- }),
144
- createVNode(unref(TabsContent), { value: "tab5" }, {
145
- default: withCtx(() => [createVNode(TerminalAnimation5_default, { "on-animation-complete": onAnimationComplete })]),
146
- _: 1
147
- }),
148
- createVNode(unref(TabsContent), { value: "tab6" }, {
149
- default: withCtx(() => [createVNode(TerminalAnimation6_default, { "on-animation-complete": onAnimationComplete })]),
150
- _: 1
151
- })
152
- ]),
153
- _: 1
154
- }, 8, ["modelValue"])) : createCommentVNode("v-if", true)], 2)], 512);
155
- };
156
- }
157
- });
158
- var Terminal_default = _sfc_main;
159
-
160
- //#endregion
161
- export { Terminal_default as default };