Skip to content

Commit 12945fa

Browse files
driss-chelouatidriss-chelouati
committed
feat: add installation instructions
1 parent dc9f536 commit 12945fa

File tree

9 files changed

+403
-44
lines changed

9 files changed

+403
-44
lines changed

‎package.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,12 +33,16 @@
3333
"@nuxt/module-builder": "latest",
3434
"@nuxt/schema": "^3.0.0-rc.11",
3535
"@nuxtjs/tailwindcss": "^5.3.3",
36+
"@types/prismjs": "^1.26.0",
3637
"eslint": "8.24.0",
3738
"eslint-config-prettier": "8.5.0",
3839
"eslint-plugin-prettier-vue": "4.2.0",
3940
"eslint-plugin-tailwindcss": "3.6.1",
4041
"eslint-plugin-vuejs-accessibility": "1.2.0",
4142
"nuxt": "^3.0.0-rc.11",
43+
"prism-theme-vars": "0.2.3",
44+
"prismjs": "1.28.0",
45+
"vue-prism-component": "2.0.0",
4246
"standard-version": "^9.5.0"
4347
}
4448
}

‎playground/components/Section.vue

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<template>
2+
<section
3+
class="w-full py-16 px-4 bg-muted-100 dark:bg-muted-900 overflow-hidden"
4+
>
5+
<div class="w-full max-w-7xl mx-auto">
6+
<slot></slot>
7+
</div>
8+
</section>
9+
</template>

‎playground/components/content/BasicUsage.vue

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<script setup>
2+
const demoCode3 = `
3+
// get the ninjaToaster instance
4+
const { $nt } = useNuxtApp()
5+
6+
// show a toast with a string as content
7+
$nt.show('Hello world')
8+
`
9+
</script>
10+
11+
<template>
12+
<Section>
13+
<div class="grid grid-cols-12 gap-8">
14+
<div class="col-span-full md:col-span-5 md:col-start-2">
15+
<div class="flex flex-col justify-center h-full w-full max-w-md">
16+
<h2
17+
class="font-extrabold text-4xl text-muted-800 dark:text-white mb-2"
18+
>
19+
Show a Toast
20+
</h2>
21+
<p
22+
class="text-base text-muted-500 pb-4 border-b border-muted-200 dark:border-muted-800"
23+
>
24+
Once you've added <code>@cssninja/nuxt-toaster</code> to your
25+
project, you can immediately start showing toasts. Please note that
26+
toasts will be unstyled. Jump to the
27+
<NuxtLink to="/" class="font-medium text-primary-500"
28+
>theming section</NuxtLink
29+
>
30+
for more details.
31+
</p>
32+
</div>
33+
</div>
34+
<div class="col-span-full md:col-span-5">
35+
<div class="p-6 rounded-xl bg-muted-200 dark:bg-muted-1000">
36+
<DocCode :code="demoCode3" />
37+
</div>
38+
</div>
39+
</div>
40+
</Section>
41+
</template>

‎playground/components/content/GetStarted.vue

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
<script setup>
2+
const demoCode = `
3+
# Using pnpm
4+
pnpm add -D @cssninja/nuxt-toaster
5+
6+
# Using yarn
7+
pnpm add -D @cssninja/nuxt-toaster
8+
9+
# Using npm
10+
npm install --save-dev @cssninja/nuxt-toaster
11+
`
12+
</script>
13+
14+
<template>
15+
<Section>
16+
<div class="grid grid-cols-12 gap-8">
17+
<div class="col-span-full md:col-span-5 md:col-start-2">
18+
<div class="flex flex-col justify-center h-full w-full max-w-md">
19+
<h2
20+
class="font-extrabold text-4xl text-muted-800 dark:text-white mb-2"
21+
>
22+
Get Started
23+
</h2>
24+
<p
25+
class="text-base text-muted-500 pb-4 border-b border-muted-200 dark:border-muted-800"
26+
>
27+
Nuxt Toaster is a simple toaster (notifier) handler for Nuxt.js,
28+
served as a nuxt module.Start by adding
29+
<code>@cssninja/nuxt-toaster</code> as a dependency of your project.
30+
</p>
31+
<ul class="mt-4 space-y-2">
32+
<li>
33+
<div class="flex items-center gap-3">
34+
<svg class="w-8 h-8 text-emerald-500" viewBox="0 0 256 256">
35+
<circle
36+
cx="128"
37+
cy="128"
38+
r="96"
39+
fill="currentColor"
40+
opacity=".2"
41+
/>
42+
<path
43+
fill="currentColor"
44+
d="m166.5 98.2l-53.2 50.7l-23.8-22.7a8 8 0 1 0-11 11.6l29.3 28a7.9 7.9 0 0 0 5.5 2.2a8.1 8.1 0 0 0 5.6-2.2l58.6-56a8 8 0 0 0-11-11.6Z"
45+
/>
46+
<path
47+
fill="currentColor"
48+
d="M128 24a104 104 0 1 0 104 104A104.1 104.1 0 0 0 128 24Zm0 192a88 88 0 1 1 88-88a88.1 88.1 0 0 1-88 88Z"
49+
/>
50+
</svg>
51+
<span class="text-sm text-muted-500 dark:text-muted-400"
52+
>Unstyled by default</span
53+
>
54+
</div>
55+
</li>
56+
<li>
57+
<div class="flex items-center gap-3">
58+
<svg class="w-8 h-8 text-emerald-500" viewBox="0 0 256 256">
59+
<circle
60+
cx="128"
61+
cy="128"
62+
r="96"
63+
fill="currentColor"
64+
opacity=".2"
65+
/>
66+
<path
67+
fill="currentColor"
68+
d="m166.5 98.2l-53.2 50.7l-23.8-22.7a8 8 0 1 0-11 11.6l29.3 28a7.9 7.9 0 0 0 5.5 2.2a8.1 8.1 0 0 0 5.6-2.2l58.6-56a8 8 0 0 0-11-11.6Z"
69+
/>
70+
<path
71+
fill="currentColor"
72+
d="M128 24a104 104 0 1 0 104 104A104.1 104.1 0 0 0 128 24Zm0 192a88 88 0 1 1 88-88a88.1 88.1 0 0 1-88 88Z"
73+
/>
74+
</svg>
75+
<span class="text-sm text-muted-500 dark:text-muted-400"
76+
>Render any component as a toast</span
77+
>
78+
</div>
79+
</li>
80+
<li>
81+
<div class="flex items-center gap-3">
82+
<svg class="w-8 h-8 text-emerald-500" viewBox="0 0 256 256">
83+
<circle
84+
cx="128"
85+
cy="128"
86+
r="96"
87+
fill="currentColor"
88+
opacity=".2"
89+
/>
90+
<path
91+
fill="currentColor"
92+
d="m166.5 98.2l-53.2 50.7l-23.8-22.7a8 8 0 1 0-11 11.6l29.3 28a7.9 7.9 0 0 0 5.5 2.2a8.1 8.1 0 0 0 5.6-2.2l58.6-56a8 8 0 0 0-11-11.6Z"
93+
/>
94+
<path
95+
fill="currentColor"
96+
d="M128 24a104 104 0 1 0 104 104A104.1 104.1 0 0 0 128 24Zm0 192a88 88 0 1 1 88-88a88.1 88.1 0 0 1-88 88Z"
97+
/>
98+
</svg>
99+
<span class="text-sm text-muted-500 dark:text-muted-400"
100+
>Fully customizable</span
101+
>
102+
</div>
103+
</li>
104+
</ul>
105+
</div>
106+
</div>
107+
<div class="col-span-full md:col-span-5">
108+
<div class="p-6 rounded-xl bg-muted-200 dark:bg-muted-1000">
109+
<DocCode :code="demoCode" />
110+
</div>
111+
</div>
112+
</div>
113+
</Section>
114+
</template>

‎playground/components/content/Setup.vue

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<script setup>
2+
const demoCode2 = `
3+
export default defineNuxtConfig({
4+
modules: [
5+
'@cssninja/nuxt-toaster'
6+
]
7+
})
8+
`
9+
</script>
10+
11+
<template>
12+
<Section>
13+
<div class="grid grid-cols-12 gap-8">
14+
<div class="col-span-full md:col-start-2 md:col-end-7">
15+
<div class="p-6 rounded-xl bg-muted-200 dark:bg-muted-1000">
16+
<DocCode :code="demoCode2" file="nuxt.config.ts" />
17+
</div>
18+
</div>
19+
<div class="col-span-full md:col-span-5">
20+
<div class="flex flex-col justify-center h-full w-full max-w-md">
21+
<h2
22+
class="font-extrabold text-4xl text-muted-800 dark:text-white mb-2"
23+
>
24+
Setup module
25+
</h2>
26+
<p
27+
class="text-base text-muted-500 pb-3 border-b border-muted-200 dark:border-muted-800"
28+
>
29+
To setup the module in your Nuxt project, add
30+
<code>@cssninja/nuxt-toaster</code> to the modules section of your
31+
<code>nuxt.config.js</code> or <code>nuxt.config.ts</code> file.
32+
</p>
33+
</div>
34+
</div>
35+
</div>
36+
</Section>
37+
</template>

‎playground/components/doc/Code.vue

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<script lang="ts">
2+
import 'prismjs'
3+
import 'prism-theme-vars/base.css'
4+
</script>
5+
6+
<script setup lang="ts">
7+
import Prism from 'vue-prism-component'
8+
9+
export interface DocCodeProps {
10+
code: string
11+
language?: string
12+
file?: string
13+
}
14+
15+
const props = withDefaults(defineProps<DocCodeProps>(), {
16+
language: 'javascript',
17+
file: undefined,
18+
})
19+
</script>
20+
21+
<template>
22+
<div
23+
class="w-full rounded-xl border border-muted-200 bg-white transition-colors ease-linear dark:border-muted-700 dark:bg-muted-800"
24+
>
25+
<div
26+
class="flex h-14 w-full items-center justify-between rounded-t-lg px-6"
27+
>
28+
<div class="flex items-center gap-2">
29+
<span
30+
class="h-3 w-3 rounded-full border-2 border-transparent bg-red-400 dark:border-red-400 dark:bg-transparent"
31+
></span>
32+
<span
33+
class="h-3 w-3 rounded-full border-2 border-transparent bg-yellow-400 dark:border-yellow-400 dark:bg-transparent"
34+
></span>
35+
<span
36+
class="h-3 w-3 rounded-full border-2 border-transparent bg-green-400 dark:border-green-400 dark:bg-transparent"
37+
></span>
38+
</div>
39+
<span v-if="props.file" class="block ml-auto text-sm text-muted-400">{{
40+
props.file
41+
}}</span>
42+
</div>
43+
<div class="-mt-6 w-full rounded-b-lg border-t-0 px-4 pb-4">
44+
<Prism :language="props.language">{{ props.code }}</Prism>
45+
</div>
46+
</div>
47+
</template>
48+
49+
<style>
50+
:root {
51+
--prism-foreground: #393a34;
52+
--prism-background: #f8f8f8;
53+
--prism-comment: #758575;
54+
--prism-namespace: #444;
55+
--prism-string: #bc8671;
56+
--prism-punctuation: #80817d;
57+
--prism-literal: #36acaa;
58+
--prism-keyword: #248459;
59+
--prism-function: #849145;
60+
--prism-deleted: #9a050f;
61+
--prism-class: #2b91af;
62+
--prism-builtin: #8b5cf6;
63+
--prism-property: #d1368b;
64+
--prism-regex: #ad502b;
65+
--prism-selector: #4e2196;
66+
}
67+
68+
.dark {
69+
--prism-foreground: #d4d4d4;
70+
--prism-background: #090f17;
71+
--prism-namespace: #aaa;
72+
--prism-comment: #758575;
73+
--prism-string: #ce9178;
74+
--prism-punctuation: #8f9fbf;
75+
--prism-literal: #36acaa;
76+
--prism-keyword: #38a776;
77+
--prism-function: #dcdcaa;
78+
--prism-deleted: #9a050f;
79+
--prism-class: #4ec9b0;
80+
--prism-builtin: #8b5cf6;
81+
--prism-property: #d1368b;
82+
--prism-regex: #ad502b;
83+
--prism-selector: #3a96a1;
84+
}
85+
</style>
86+
87+
<style scoped>
88+
:deep(pre[class*='language-']) {
89+
background: none !important;
90+
}
91+
92+
:deep(code[class*='language-']) {
93+
background: none !important;
94+
}
95+
96+
:deep(pre.language-javascript) {
97+
color: #7eb6f6 !important;
98+
}
99+
</style>
100+

‎playground/components/shims.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
declare module 'vue-prism-component'

0 commit comments

Comments
 (0)