Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 7523923

Browse filesBrowse files
rohrigrohrig
committed
fix(tuts) fix css warnings
1 parent 0519988 commit 7523923
Copy full SHA for 7523923

File tree

Expand file treeCollapse file tree

7 files changed

+617
-37
lines changed
Filter options
Expand file treeCollapse file tree

7 files changed

+617
-37
lines changed

‎components/content/Alert.vue

Copy file name to clipboard
+12-23Lines changed: 12 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
<template>
22
<div class="p-4 mt-4 mb-4 rounded-lg alert text-sm leading-relaxed" :class="[type]">
33
<div class="flex items-start">
4-
<InjectComponent
4+
<div
55
v-if="icon"
66
:component="icon"
77
class="inline-flex mr-2 w-5 h-5 justify-center items-center text-1.2rem"
88
>
99
{{ icon }}
1010

11-
</InjectComponent>
11+
</div>
1212
<slot/>
1313
<div class="flex-grow alert-content">
14-
<Markdown unwrap="p">
14+
<ContentSlot unwrap="p">
1515
<template #between>
1616
<br> <slot/>
1717
</template>
18-
</Markdown>
18+
</ContentSlot>
1919
</div>
2020
</div>
2121
</div>
@@ -44,79 +44,68 @@ export default defineComponent({
4444
.alert {
4545
&.success {
4646
@apply bg-green-50 dark:bg-green-800 dark:bg-opacity-25 text-green-600 dark:text-green-200;
47-
>>> {
48-
code {
47+
:deep(code) {
4948
@apply bg-green-100 dark:bg-green-900 dark:bg-opacity-50 shadow-none text-current;
5049
}
5150
a:hover {
5251
code {
5352
@apply border-green-400 dark:border-green-700;
5453
}
55-
}
5654
}
5755
}
5856
&.info {
5957
@apply bg-blue-50 dark:bg-blue-800 dark:bg-opacity-25 text-blue-600 dark:text-blue-200;
60-
>>> {
61-
code {
58+
:deep(code) {
6259
@apply bg-blue-100 dark:bg-blue-900 dark:bg-opacity-50 shadow-none text-current;
6360
}
6461
a:hover {
6562
code {
6663
@apply border-blue-400 dark:border-blue-700;
6764
}
68-
}
6965
}
7066
}
7167
&.warning {
7268
@apply bg-yellow-50 dark:bg-yellow-800 dark:bg-opacity-25 text-yellow-600 dark:text-yellow-100;
73-
>>> {
74-
code {
69+
:deep(code) {
7570
@apply bg-yellow-100 dark:bg-yellow-900 dark:bg-opacity-50 shadow-none text-current;
7671
}
7772
a:hover {
7873
code {
7974
@apply border-yellow-400 dark:border-yellow-700;
8075
}
8176
}
82-
}
77+
8378
}
8479
&.danger {
8580
@apply bg-red-50 dark:bg-red-800 dark:bg-opacity-25 text-red-600 dark:text-red-100;
86-
>>> {
87-
code {
81+
:deep(code) {
8882
@apply bg-red-100 dark:bg-red-900 dark:bg-opacity-50 shadow-none text-current;
8983
}
9084
a:hover {
9185
code {
9286
@apply border-red-400 dark:border-red-700;
9387
}
9488
}
95-
}
9689
}
9790
98-
>>> {
99-
strong {
91+
:deep(strong) {
10092
@apply font-semibold text-current;
10193
}
10294
a {
10395
@apply underline border-none font-semibold text-current;
10496
code {
10597
@apply border border-transparent border-dashed;
10698
}
107-
}
10899
}
109100
}
110101
111-
.alert >>> p {
102+
.alert :deep(p) {
112103
@apply m-0 !important;
113104
}
114105
115106
.dark .alert {
116-
>>> {
117-
a {
107+
:deep(a) {
118108
@apply text-current;
119109
}
120-
}
121110
}
122111
</style>

‎content/tutorials/state-in-nuxt3.md

Copy file name to clipboardExpand all lines: content/tutorials/state-in-nuxt3.md
+3-1Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,12 @@ Every time we visit or refresh **localhost:3000/api/counter** the count will in
2525
You may be tempted to believe that if the count survived a browser refresh, it must must persistent, right?
2626
We must keep in mind, the browser is not the only thing that can restart. The server can as well.
2727

28-
::alert{type=danger icon=🚨}
28+
::alert{background=bg-purple-800 icon=🚨}
2929
Don't let this fool you into thinking this is persistent state. As soon as you restart the server, the count will be back to 0!
3030
::
3131

32+
33+
3234
```js [/api/counter.ts]
3335
let count = 0
3436

‎nuxt.config.ts

Copy file name to clipboardExpand all lines: nuxt.config.ts
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11

22
// https://v3.nuxtjs.org/api/configuration/nuxt.config
33
export default defineNuxtConfig({
4-
modules: ['@nuxtjs/tailwindcss', '@nuxtjs/color-mode', '@nuxt/content'],
4+
modules: ['@nuxtjs/tailwindcss', '@nuxtjs/color-mode', '@nuxt/content', 'nuxt-icon'],
55
tailwindcss: {
66
cssPath: '~/assets/css/tailwind.css',
77
configPath: 'tailwind.config.js',

‎package.json

Copy file name to clipboardExpand all lines: package.json
+6-2Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,25 @@
55
"dev": "nuxt dev",
66
"generate": "nuxt generate",
77
"preview": "nuxt preview",
8-
"test": "echo todo",
8+
"test": "vitest",
99
"prisma:generate": "dotenv -e .env -- npx prisma generate",
1010
"prisma:migrate": "dotenv -e .env -- npx prisma migrate deploy --name prod"
1111
},
1212
"devDependencies": {
1313
"@nuxt/content": "^2.1.1",
1414
"@nuxt/postcss8": "^1.1.3",
15+
"@nuxt/test-utils-edge": "^3.0.0-rc.13-27777092.59d8c51",
1516
"@nuxtjs/color-mode": "^3.1.8",
1617
"@nuxtjs/tailwindcss": "^6.0.1",
1718
"@types/bcrypt": "^5.0.0",
1819
"@types/uuid": "^8.3.4",
1920
"autoprefixer": "^10.4.12",
21+
"jsdom": "^20.0.1",
2022
"nuxt": "^3.0.0-rc.12",
23+
"nuxt-icon": "^0.1.7",
2124
"postcss": "^8.4.18",
22-
"tailwindcss": "^3.2.1"
25+
"tailwindcss": "^3.2.1",
26+
"vitest": "^0.24.3"
2327
},
2428
"dependencies": {
2529
"@formkit/auto-animate": "^1.0.0-beta.3",

‎tests/registar.test.ts

Copy file name to clipboard
+13Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { describe, it, expect } from 'vitest'
2+
import { fileURLToPath } from 'node:url'
3+
import { setup, $fetch } from '@nuxt/test-utils-edge'
4+
describe('ssr', async () => {
5+
await setup({
6+
rootDir: fileURLToPath(new URL('./fixture', import.meta.url)),
7+
})
8+
it('renders the index page', async () => {
9+
// Get response to a server-rendered page with `$fetch`.
10+
const html = await $fetch('/')
11+
expect(html).toContain('Full Stack')
12+
})
13+
})

‎vitest.config.js

Copy file name to clipboard
+9Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { defineConfig } from "vitest/config";
2+
export default defineConfig({
3+
test: {
4+
environment: "jsdom",
5+
deps: {
6+
inline: [/@nuxt\/test-utils-edge/],
7+
},
8+
},
9+
})

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.