@sit-onyx/nuxt-docs 0.0.0 → 0.1.0-dev-20251104085331
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.
- package/app/assets/icons/bun.svg +1 -0
- package/app/assets/icons/npm.svg +1 -0
- package/app/assets/icons/pnpm.svg +1 -0
- package/app/assets/icons/yarn.svg +1 -0
- package/app/components/PackageManagerCodeTabs.vue +38 -0
- package/app/components/content/NpmInstallCodeTabs.vue +26 -0
- package/app/components/content/ProsePre.vue +51 -0
- package/package.json +17 -17
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#fbf0df" d="M29 17c0 5.65-5.82 10.23-13 10.23S3 22.61 3 17c0-3.5 2.24-6.6 5.66-8.44S14.21 4.81 16 4.81s3.32 1.54 7.34 3.71C26.76 10.36 29 13.46 29 17"/><path fill="none" stroke="#000" d="M16 27.65c7.32 0 13.46-4.65 13.46-10.65 0-3.72-2.37-7-5.89-8.85-1.39-.75-2.46-1.41-3.37-2l-1.13-.69A6.14 6.14 0 0 0 16 4.35a6.9 6.9 0 0 0-3.3 1.23c-.42.24-.86.51-1.32.8-.87.54-1.83 1.13-3 1.73C4.91 10 2.54 13.24 2.54 17c0 6 6.14 10.65 13.46 10.65Z"/><ellipse cx="21.65" cy="18.62" fill="#febbd0" rx="2.17" ry="1.28"/><ellipse cx="10.41" cy="18.62" fill="#febbd0" rx="2.17" ry="1.28"/><path fill-rule="evenodd" d="M11.43 18.11a2 2 0 1 0-2-2.05 2.05 2.05 0 0 0 2 2.05m9.2 0a2 2 0 1 0-2-2.05 2 2 0 0 0 2 2.05"/><path fill="#fff" fill-rule="evenodd" d="M10.79 16.19a.77.77 0 1 0-.76-.77.76.76 0 0 0 .76.77m9.2 0a.77.77 0 1 0 0-1.53.77.77 0 0 0 0 1.53"/><path fill="#b71422" stroke="#000" stroke-width=".75" d="M18.62 19.67a3.3 3.3 0 0 1-1.09 1.75 2.48 2.48 0 0 1-1.5.69 2.53 2.53 0 0 1-1.5-.69 3.28 3.28 0 0 1-1.08-1.75.26.26 0 0 1 .29-.3h4.58a.27.27 0 0 1 .3.3Z"/><path fill="#ccbea7" fill-rule="evenodd" d="M14.93 5.75a6.1 6.1 0 0 1-2.09 4.62c-.1.09 0 .27.11.22 1.25-.49 2.94-1.94 2.23-4.88-.03-.15-.25-.11-.25.04m.85 0a6 6 0 0 1 .57 5c0 .13.12.24.21.13.83-1 1.54-3.11-.59-5.31-.1-.11-.27.04-.19.17Zm1-.06a6.1 6.1 0 0 1 2.53 4.38c0 .14.21.17.24 0 .34-1.3.15-3.51-2.66-4.66-.12-.02-.21.18-.09.27ZM9.94 9.55a6.27 6.27 0 0 0 3.89-3.33c.07-.13.28-.08.25.07-.64 3-2.79 3.59-4.13 3.51-.14-.01-.14-.21-.01-.25"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#c12127" d="M2 2h28v28H2"/><path fill="#fff" d="M7.25 7.25h17.5v17.5h-3.5v-14H16v14H7.25"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#f9ad00" d="M30 10.75h-8.749V2H30Zm-9.626 0h-8.75V2h8.75Zm-9.625 0H2V2h8.749ZM30 20.375h-8.749v-8.75H30Z"/><path fill="currentColor" d="M20.374 20.375h-8.75v-8.75h8.75Zm0 9.625h-8.75v-8.75h8.75ZM30 30h-8.749v-8.75H30Zm-19.251 0H2v-8.75h8.749Z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#2188b6" d="M28.208 24.409a10.5 10.5 0 0 0-3.959 1.822 23.7 23.7 0 0 1-5.835 2.642 1.63 1.63 0 0 1-.983.55 62 62 0 0 1-6.447.577c-1.163.009-1.876-.3-2.074-.776a1.573 1.573 0 0 1 .866-2.074 4 4 0 0 1-.514-.379c-.171-.171-.352-.514-.406-.388-.225.55-.343 1.894-.947 2.5-.83.839-2.4.559-3.328.072-1.019-.541.072-1.813.072-1.813a.73.73 0 0 1-.992-.343 4.85 4.85 0 0 1-.667-2.949 5.37 5.37 0 0 1 1.749-2.895 9.3 9.3 0 0 1 .658-4.4 10.45 10.45 0 0 1 3.165-3.661S6.628 10.747 7.35 8.817c.469-1.262.658-1.253.812-1.308a3.6 3.6 0 0 0 1.452-.857 5.27 5.27 0 0 1 4.41-1.7S15.2 1.4 16.277 2.09a18.4 18.4 0 0 1 1.533 2.886s1.281-.748 1.425-.469a11.33 11.33 0 0 1 .523 6.132 14 14 0 0 1-2.6 5.411c-.135.225 1.551.938 2.615 3.887.983 2.7.108 4.96.262 5.212.027.045.036.063.036.063s1.127.09 3.391-1.308a8.5 8.5 0 0 1 4.277-1.604 1.081 1.081 0 0 1 .469 2.11Z"/></svg>
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
<script lang="ts" setup>
|
|
2
|
+
import type { OnyxCodeTabProps } from "sit-onyx";
|
|
3
|
+
import bunIcon from "~/assets/icons/bun.svg?raw";
|
|
4
|
+
import npmIcon from "~/assets/icons/npm.svg?raw";
|
|
5
|
+
import pnpmIcon from "~/assets/icons/pnpm.svg?raw";
|
|
6
|
+
import yarnIcon from "~/assets/icons/yarn.svg?raw";
|
|
7
|
+
|
|
8
|
+
type PackageManager = "pnpm" | "npm" | "yarn" | "bun";
|
|
9
|
+
|
|
10
|
+
type Props = {
|
|
11
|
+
/**
|
|
12
|
+
* Code snippet for the corresponding package manager.
|
|
13
|
+
*/
|
|
14
|
+
[T in PackageManager]?: string;
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
const props = defineProps<Props>();
|
|
18
|
+
|
|
19
|
+
const selectedTab = ref("pnpm");
|
|
20
|
+
|
|
21
|
+
const tabs = computed(() => {
|
|
22
|
+
// icons are imported from: https://icon-sets.iconify.design/vscode-icons/?keyword=vsco
|
|
23
|
+
const tabs = [
|
|
24
|
+
{ value: "pnpm", icon: pnpmIcon, language: "sh", code: props.pnpm ?? "" },
|
|
25
|
+
{ value: "npm", icon: npmIcon, language: "sh", code: props.npm ?? "" },
|
|
26
|
+
{ value: "yarn", icon: yarnIcon, language: "sh", code: props.yarn ?? "" },
|
|
27
|
+
{ value: "bun", icon: bunIcon, language: "sh", code: props.bun ?? "" },
|
|
28
|
+
] satisfies OnyxCodeTabProps[];
|
|
29
|
+
|
|
30
|
+
return tabs.filter((tab) => tab.code);
|
|
31
|
+
});
|
|
32
|
+
</script>
|
|
33
|
+
|
|
34
|
+
<template>
|
|
35
|
+
<OnyxUnstableCodeTabs v-model="selectedTab">
|
|
36
|
+
<OnyxUnstableCodeTab v-for="tab in tabs" v-bind="tab" :key="tab.value" :label="tab.value" />
|
|
37
|
+
</OnyxUnstableCodeTabs>
|
|
38
|
+
</template>
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
<script lang="ts" setup>
|
|
2
|
+
const props = defineProps<{
|
|
3
|
+
/**
|
|
4
|
+
* Package (or space separated multiple packages) to install.
|
|
5
|
+
*/
|
|
6
|
+
packages: string;
|
|
7
|
+
/**
|
|
8
|
+
* Whether to install as dev dependency.
|
|
9
|
+
*/
|
|
10
|
+
dev?: boolean;
|
|
11
|
+
}>();
|
|
12
|
+
|
|
13
|
+
const scripts = computed(() => {
|
|
14
|
+
const command = `${props.dev ? "-D " : ""}${props.packages}`;
|
|
15
|
+
return {
|
|
16
|
+
pnpm: `pnpm add ${command}`,
|
|
17
|
+
npm: `npm install ${command}`,
|
|
18
|
+
yarn: `yarn add ${command}`,
|
|
19
|
+
bun: `bun add ${command}`,
|
|
20
|
+
};
|
|
21
|
+
});
|
|
22
|
+
</script>
|
|
23
|
+
|
|
24
|
+
<template>
|
|
25
|
+
<PackageManagerCodeTabs v-bind="scripts" />
|
|
26
|
+
</template>
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
const props = withDefaults(
|
|
3
|
+
defineProps<{
|
|
4
|
+
/**
|
|
5
|
+
* Raw code snippet.
|
|
6
|
+
*/
|
|
7
|
+
code?: string;
|
|
8
|
+
/**
|
|
9
|
+
* Code language
|
|
10
|
+
*
|
|
11
|
+
* @example js, ts, html, css, etc.
|
|
12
|
+
*/
|
|
13
|
+
language?: string;
|
|
14
|
+
/**
|
|
15
|
+
* Filename.
|
|
16
|
+
*/
|
|
17
|
+
filename?: string;
|
|
18
|
+
/**
|
|
19
|
+
* Highlighted code line numbers.
|
|
20
|
+
*/
|
|
21
|
+
highlights?: number[];
|
|
22
|
+
meta?: string;
|
|
23
|
+
class?: string;
|
|
24
|
+
}>(),
|
|
25
|
+
{
|
|
26
|
+
code: "",
|
|
27
|
+
},
|
|
28
|
+
);
|
|
29
|
+
|
|
30
|
+
defineSlots<{
|
|
31
|
+
/**
|
|
32
|
+
* Renderer code snippet.
|
|
33
|
+
*/
|
|
34
|
+
default(): unknown;
|
|
35
|
+
}>();
|
|
36
|
+
|
|
37
|
+
const value = "tab-1";
|
|
38
|
+
</script>
|
|
39
|
+
|
|
40
|
+
<template>
|
|
41
|
+
<OnyxUnstableCodeTabs :model-value="value">
|
|
42
|
+
<OnyxUnstableCodeTab
|
|
43
|
+
:value
|
|
44
|
+
:code="props.code"
|
|
45
|
+
:language="props.language"
|
|
46
|
+
:label="props.filename"
|
|
47
|
+
>
|
|
48
|
+
<pre :class="props.class"><slot></slot></pre>
|
|
49
|
+
</OnyxUnstableCodeTab>
|
|
50
|
+
</OnyxUnstableCodeTabs>
|
|
51
|
+
</template>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sit-onyx/nuxt-docs",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.1.0-dev-20251104085331",
|
|
4
4
|
"description": "Nuxt layer/template for creating documentations with the onyx design system",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": "Schwarz IT KG",
|
|
@@ -30,34 +30,34 @@
|
|
|
30
30
|
"@nuxtjs/color-mode": ">= 3",
|
|
31
31
|
"@nuxtjs/i18n": ">= 10",
|
|
32
32
|
"sass-embedded": ">= 1",
|
|
33
|
-
"@sit-onyx/icons": "^1.
|
|
34
|
-
"@sit-onyx/nuxt": "^1.0.
|
|
35
|
-
"sit-onyx": "^1.
|
|
33
|
+
"@sit-onyx/icons": "^1.2.0-dev-20251104085331",
|
|
34
|
+
"@sit-onyx/nuxt": "^1.0.1",
|
|
35
|
+
"sit-onyx": "^1.4.0-dev-20251104085331"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"@fontsource-variable/source-code-pro": ">= 5",
|
|
39
39
|
"@fontsource-variable/source-sans-3": ">= 5",
|
|
40
40
|
"@nuxt/content": ">= 3",
|
|
41
41
|
"@nuxt/image": ">= 1",
|
|
42
|
-
"@nuxt/test-utils": "^3.
|
|
42
|
+
"@nuxt/test-utils": "^3.20.1",
|
|
43
43
|
"@nuxtjs/color-mode": ">= 3",
|
|
44
|
-
"@playwright/experimental-ct-vue": "1.
|
|
45
|
-
"@playwright/test": "1.
|
|
46
|
-
"nuxt": "4.0
|
|
47
|
-
"sass-embedded": "1.
|
|
48
|
-
"typescript": "5.9.
|
|
49
|
-
"vue": "3.5.
|
|
50
|
-
"@sit-onyx/icons": "^1.
|
|
51
|
-
"@sit-onyx/nuxt": "^1.0.
|
|
52
|
-
"
|
|
53
|
-
"sit-onyx": "^1.0
|
|
44
|
+
"@playwright/experimental-ct-vue": "1.56.1",
|
|
45
|
+
"@playwright/test": "1.56.1",
|
|
46
|
+
"nuxt": "4.2.0",
|
|
47
|
+
"sass-embedded": "1.93.2",
|
|
48
|
+
"typescript": "5.9.3",
|
|
49
|
+
"vue": "3.5.22",
|
|
50
|
+
"@sit-onyx/icons": "^1.2.0-dev-20251104085331",
|
|
51
|
+
"@sit-onyx/nuxt": "^1.0.1",
|
|
52
|
+
"sit-onyx": "^1.4.0-dev-20251104085331",
|
|
53
|
+
"@sit-onyx/shared": "^0.1.0"
|
|
54
54
|
},
|
|
55
55
|
"scripts": {
|
|
56
56
|
"dev": "pnpm dev:prepare && nuxi dev playground",
|
|
57
57
|
"dev:prepare": "nuxt prepare playground",
|
|
58
|
-
"build": "nuxt build playground",
|
|
58
|
+
"build": "pnpm dev:prepare && nuxt build playground",
|
|
59
59
|
"generate": "nuxt generate playground",
|
|
60
60
|
"preview": "nuxt preview playground",
|
|
61
|
-
"test:playwright": "pnpm dev:prepare &&
|
|
61
|
+
"test:playwright": "pnpm dev:prepare && cd playground && pnpm test:playwright"
|
|
62
62
|
}
|
|
63
63
|
}
|