docs: content

antfu · antfu · commit b3af938e965f · 2024-02-01T20:31:27.000+01:00
diff --git a/components/PanelDocs.vue b/components/PanelDocs.vue
@@ -62,7 +62,7 @@ const sourceUrl = computed(() => page.value?._file
 </script>
 
 <template>
-  <div grid="~ rows-[min-content_1fr_min-content]" relative h-full>
+  <div grid="~ rows-[min-content_1fr]" relative h-full>
     <div flex="~ gap-2 items-center" border="b base dashed" bg-faded px4 py2>
       <div i-ph-book-duotone />
       <template v-for="bc, idx of breadcrumbs" :key="bc.path">
@@ -107,6 +107,18 @@ const sourceUrl = computed(() => page.value?._file
             />
           </div>
         </div>
+        <div border="t base dashed" mt-8 p3>
+          <NuxtLink
+            v-if="sourceUrl"
+            :to="sourceUrl" target="_blank"
+            flex="~ items-center gap-2"
+            text-inherit op75
+            hover="text-primary op100"
+          >
+            <div i-ph-note-pencil-duotone />
+            Edit this page
+          </NuxtLink>
+        </div>
       </article>
       <!-- Navigration Dropdown -->
       <Transition name="nav-dropdown">
@@ -121,16 +133,6 @@ const sourceUrl = computed(() => page.value?._file
         </div>
       </Transition>
     </div>
-    <div border="t base dashed" px6 py2>
-      <NuxtLink
-        v-if="sourceUrl"
-        :to="sourceUrl" target="_blank"
-        flex="~ items-center gap-2" op50 hover="text-primary op100"
-      >
-        <div i-ph-note-pencil-duotone />
-        Edit this page
-      </NuxtLink>
-    </div>
   </div>
 </template>
 
diff --git a/components/PanelEditor.vue b/components/PanelEditor.vue
@@ -92,17 +92,10 @@ const panelInitEditor = computed(() => isMounted.value || {
         >
           <FileIcon :path="play.fileSelected?.filepath || ''" />
           <span flex-auto text-sm>{{ play.fileSelected?.filepath || 'Editor' }}</span>
-          <button
-            v-if="guide.currentGuide?.solutions"
+          <ButtonShowSolution
             my--1 mr--3 flex-none rounded px2 py1 text-sm op50
             hover="bg-active op100"
-            flex="~ gap-2 items-center"
-            @click="guide.toggleSolutions()"
-          >
-            <div v-if="!guide.showingSolution " i-ph-lightbulb-filament-duotone />
-            <div v-else i-ph-arrow-counter-clockwise-duotone />
-            {{ guide.showingSolution ? 'Reset challenge' : 'Show solution' }}
-          </button>
+          />
         </div>
         <LazyPanelEditorMonaco
           v-if="play.fileSelected"
diff --git a/components/PanelEditorMonaco.client.vue b/components/PanelEditorMonaco.client.vue
@@ -44,7 +44,7 @@ const language = computed(() => {
   }
 })
 const theme = computed(() => colorMode.value === 'dark'
-  ? 'vitesse-black'
+  ? 'vitesse-dark'
   : 'vitesse-light',
 )
 
diff --git a/components/TheNav.vue b/components/TheNav.vue
@@ -39,6 +39,14 @@ addCommands(
     <NuxtLink to="/" title="Nuxt Tutorial">
       <NuxtTutorialLogo h-2em />
     </NuxtLink>
+    <NuxtLink
+      href="https://github.com/nuxt/learn.nuxt.com"
+      target="_blank"
+    >
+      <div block translate-y--2 rounded bg-orange:10 px2 py1 text-xs text-orange>
+        Working in Progress
+      </div>
+    </NuxtLink>
 
     <div flex-auto />
     <div
diff --git a/components/content/ButtonShowSolution.vue b/components/content/ButtonShowSolution.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const guide = useGuideStore()
+</script>
+
+<template>
+  <button
+    v-if="guide.currentGuide?.solutions"
+    flex="~ gap-2 items-center"
+    @click="guide.toggleSolutions()"
+  >
+    <div v-if="!guide.showingSolution " i-ph-lightbulb-filament-duotone />
+    <div v-else i-ph-arrow-counter-clockwise-duotone />
+    {{ guide.showingSolution ? 'Reset challenge' : 'Show solution' }}
+  </button>
+</template>
diff --git a/components/content/Note.vue b/components/content/Note.vue
@@ -0,0 +1,5 @@
+<template>
+  <div border="~ base rounded-lg" bg-active p3 px4 text-sm class="[&>p]:my-0 [&>p]:leading-1.75em" text-faded>
+    <slot />
+  </div>
+</template>
diff --git a/content/0.index.md b/content/0.index.md
@@ -9,10 +9,10 @@ ogImage:
 
 # Welcome to Nuxt Tutorial!
 
-[🚧 Working in Progress](https://github.com/nuxt/learn.nuxt.com#todolist){.text-orange}
-
 This is an interactive tutorial that is composed with guides and challenges to help you learn [Nuxt](https://nuxt.com/) and its concepts step by step.
 
+The goal of this tutorial is to quickly give you an experience of what it feels like to work with Nuxt and Vue, **right in the browser**. It does not aim to be comprehensive, and you don't need to understand everything before moving on. All playgrounds are editable with a full-featured editor and dev environment, so you can play with the code and see the result right away and learn by doing.
+
 ## What's Nuxt?
 
 Nuxt is a free and [open-source framework](https://github.com/nuxt/nuxt) with an intuitive and extendable way to create type-safe, performant and production-grade full-stack web applications and websites with [Vue.js](https://vuejs.org). Nuxt has no vendor lock-in, allowing you to deploy your application [**everywhere, even on the edge**](https://nuxt.com/blog/nuxt-on-the-edge).
diff --git a/content/1.vue/1.index.md b/content/1.vue/1.index.md
@@ -6,31 +6,16 @@ ogImage: true
 
 Nuxt integrates [Vue 3](https://vuejs.org/), a progressive framework for building user interfaces. In this section, we will cover the basics of Vue.
 
-A typical [Vue Single-File Component](https://vuejs.org/guide/scaling-up/sfc.html) (a.k.a. `*.vue` files, abbreviated as SFC) looks like this:
+What you see in the editor is a [Vue Single-File Component](https://vuejs.org/guide/scaling-up/sfc.html)(SFC).
 
-```vue
-<script setup>
-import { ref } from 'vue'
-const count = ref(0)
-</script>
-
-<template>
-  <button @click="count++">
-    Count is: {{ count }}
-  </button>
-</template>
-
-<style scoped>
-button {
-  font-weight: bold;
-}
-</style>
-```
-
-Vue SFC is a natural extension of the classic trio of HTML, CSS and JavaScript. It compose with a `<script setup>` block to define the JavaScript logic, a `<template>` block to define the HTML template and optional `<style>` blocks to define the CSS style. You can play with it using it the playground on the right, or read more about it in the [official Vue documentation](https://v3.vuejs.org/guide/single-file-component.html).
+An SFC is a reusable self-contained block of code that encapsulates HTML, CSS and JavaScript that belong together, written inside a .vue file. It's composed with a [`<script setup>`](https://vuejs.org/api/sfc-script-setup.html)) block to define the JavaScript logic, a `<template>` block to define the HTML template and optional `<style>` blocks to define the CSS style. You can play with it using it the playground on the right, or read more about it in the [official Vue documentation](https://v3.vuejs.org/guide/single-file-component.html).
 
 In Nuxt, we supports Vue SFC out-of-box and highly recommend you to use it to build your application. One thing that is different from Vue's default Vue SFC is that in Nuxt we [auto-imports the Vue utilities](https://nuxt.com/docs/guide/concepts/auto-imports) for you, so you can use `ref`, `computed` and other Vue APIs directly without importing them.
 
+::note
+**Tips**: You might heard that there are a few different ways to define a Vue component. In general, we recommend using [`<script setup>`](https://vuejs.org/api/sfc-script-setup.html) with [Composition API](https://vuejs.org/guide/introduction.html#composition-api) to get the best developer experience. If you are new to Vue, don't worry too much about understanding all different choices, you can follow what we recommend as we believe it's also the most intuitive way to get started with Vue.
+::
+
 Going forward, we will cover the following topics:
 
 - [Reactivity](/vue/reactivity)
diff --git a/content/1.vue/2.reactivity/.template/files/app.vue b/content/1.vue/2.reactivity/.template/files/app.vue
@@ -0,0 +1,18 @@
+<script setup>
+const count = ref(1)
+const doubled = computed(() => count.value * 2)
+
+function increment() {
+  count.value++
+}
+</script>
+
+<template>
+  <div>
+    <p>count is {{ count }}</p>
+    <p>doubled is {{ doubled }}</p>
+    <button @click="increment">
+      +1
+    </button>
+  </div>
+</template>
diff --git a/content/1.vue/2.reactivity/.template/solutions/app.vue b/content/1.vue/2.reactivity/.template/solutions/app.vue
@@ -0,0 +1,25 @@
+<script setup>
+const count = ref(1)
+const multiplier = ref(2)
+const result = computed(() => count.value * multiplier.value)
+
+function increment() {
+  count.value++
+}
+function multiply() {
+  multiplier.value++
+}
+</script>
+
+<template>
+  <div>
+    <p>count is {{ count }}</p>
+    <p>result is {{ result }}</p>
+    <button @click="increment">
+      +1
+    </button>
+    <button @click="multiply">
+      x{{ multiplier }}
+    </button>
+  </div>
+</template>
diff --git a/content/1.vue/2.reactivity/index.md b/content/1.vue/2.reactivity/index.md
@@ -1,3 +1,38 @@
-# Vue Reactivity
+---
+ogImage: true
+---
 
-// TODO:
+# Reactivity Part 1
+
+Vue provides [a great reactivity system](https://vuejs.org/guide/essentials/reactivity-fundamentals.html) that tracks changes to the data and triggers updates automatically, allowing you have your UI always up-to-date with the data. Vue's reactivity comes with a few primitives: `ref`, `reactive`, `computed` and `watch`.
+
+- [`ref()`](https://vuejs.org/api/reactivity-core.html#ref) creates a container to hold a single value, that can be tracked automatically when the value changes. Value can be accessed or updated via `.value` property.
+
+- [`computed()`](https://vuejs.org/api/reactivity-core.html#computed) takes a getter function and returns a `ref` object, that reflects the return value of the getter function.
+
+Here in the playground, we created a ref object `count` to hold a number, a computed object `double` that calculates the double of `count`. Vue will smartly know that `double` depends on `count`, so whenever `count` changes, `double` will re-calculate automatically.
+
+Try click the button to increase the `count` value - you will see the value of `double` also reflects the change.
+
+::note
+**Note**: Refs will be [auto unwrapped by Vue](https://vuejs.org/guide/essentials/reactivity-fundamentals.html#declaring-reactive-state-1) when referenced in the `<template>`, `.value` is only needed when accessing the ref in `<script>` or JavaScript outside of Vue components.
+::
+
+## Challenge
+
+Now let's get our hands on it! Try to modify the code, make the multiplier also reactively updatable (current hard-coded as `2`).
+
+To do that, you can:
+
+1. Create a variable `multiplier` with `ref()` and set it to `2`
+2. Rename `double` to `result` in both the `<script>` and `<template>`
+3. Update the implementation of `result` to return `count.value * multiplier.value`{lang=js}
+4. Add another button to increase the `multiplier` value
+
+That's it! Now when you click the multiplier button, you will see the result get changed with the new multiplier.
+
+If you get stuck, you can check the solution by clicking the button below, or on the top-right corner of the editor.
+
+:ButtonShowSolution{.bg-faded.px4.py2.rounded.border.border-base.hover:bg-active.hover:text-primary.hover:border-primary:50}
+
+Feel free to play more to explore your ideas! Once you are done, let's move on to the next section to learn a bit more about the reactivity system.
diff --git a/content/1.vue/3.reactivity-2/.template/files/app.vue b/content/1.vue/3.reactivity-2/.template/files/app.vue
@@ -0,0 +1,18 @@
+<script setup>
+const count = ref(1)
+const doubled = computed(() => count.value * 2)
+
+function increment() {
+  count.value++
+}
+</script>
+
+<template>
+  <div>
+    <p>count is {{ count }}</p>
+    <p>doubled is {{ doubled }}</p>
+    <button @click="increment">
+      +1
+    </button>
+  </div>
+</template>
diff --git a/content/1.vue/3.reactivity-2/.template/index.ts b/content/1.vue/3.reactivity-2/.template/index.ts
diff --git a/content/1.vue/3.reactivity-2/.template/solutions/app.vue b/content/1.vue/3.reactivity-2/.template/solutions/app.vue
@@ -0,0 +1,25 @@
+<script setup>
+const count = ref(1)
+const multiplier = ref(2)
+const result = computed(() => count.value * multiplier.value)
+
+function increment() {
+  count.value++
+}
+function multiply() {
+  multiplier.value++
+}
+</script>
+
+<template>
+  <div>
+    <p>count is {{ count }}</p>
+    <p>result is {{ result }}</p>
+    <button @click="increment">
+      +1
+    </button>
+    <button @click="multiply">
+      x{{ multiplier }}
+    </button>
+  </div>
+</template>
diff --git a/content/1.vue/3.reactivity-2/index.md b/content/1.vue/3.reactivity-2/index.md
@@ -0,0 +1,9 @@
+---
+ogImage: true
+---
+
+# Reactivity Part 2
+
+In the previous section, we learned about `ref` and `computed`. In this section, we will learn about `reactive` and `watch` that fullfills our basic needs for reactivity.
+
+// TODO:
diff --git a/content/1.vue/4.composition-api/.template/index.ts b/content/1.vue/4.composition-api/.template/index.ts
diff --git a/content/1.vue/4.composition-api/index.md b/content/1.vue/4.composition-api/index.md
diff --git a/content/1.vue/5.components/.template/index.ts b/content/1.vue/5.components/.template/index.ts
@@ -0,0 +1,10 @@
+import type { GuideMeta } from '~/types/guides'
+
+export const meta: GuideMeta = {
+  startingFile: 'app.vue',
+  features: {
+    terminal: false,
+    fileTree: false,
+    navigation: false,
+  },
+}
diff --git a/content/1.vue/5.components/index.md b/content/1.vue/5.components/index.md
diff --git a/monaco/shiki.ts b/monaco/shiki.ts
@@ -3,7 +3,7 @@ import { getHighlighterCore } from 'shiki/core'
 import getWasmInlined from 'shiki/wasm'
 
 import langVue from 'shiki/langs/vue.mjs'
-import themeBlack from 'shiki/themes/vitesse-black.mjs'
+import themeDark from 'shiki/themes/vitesse-dark.mjs'
 import themeLight from 'shiki/themes/vitesse-light.mjs'
 
 let highlighter: Promise<HighlighterCore> | undefined
@@ -12,7 +12,7 @@ export async function getShiki() {
   if (highlighter)
     return highlighter
 
-  const darkColors = (themeBlack as any).colors as Record<string, string>
+  const darkColors = (themeDark as any).colors as Record<string, string>
   darkColors['editor.background'] = '#00000000'
   darkColors['editor.lineHighlightBackground'] = '#00000000'
 
@@ -22,7 +22,7 @@ export async function getShiki() {
     ],
     themes: [
       themeLight as any,
-      themeBlack as any,
+      themeDark as any,
     ],
     loadWasm: getWasmInlined,
   })
diff --git a/styles/prose.css b/styles/prose.css
@@ -2,6 +2,10 @@
   --un-prose-links: #00dc82;
 }
 
+.prose :where(p,ul,ol,pre):not(:where(.not-prose,.not-prose *)) {
+  line-height: 2rem;
+}
+
 .prose a {
   text-decoration: none;
 }
@@ -32,9 +36,20 @@
 }
 
 .prose :where(:not(pre) > code):not(:where(.not-prose, .not-prose *)) {
-  border-radius: 0.2rem;
-  padding: 0.2em 0.4em;
-  --uno: bg-code text-primary/75;
+  padding: 0.1em 0.4em 0.15em 0.4em;
+  --uno: bg-inline-code border rounded border-inline-code text-faded;
+}
+
+.prose :where(a > code):not(:where(.not-prose, .not-prose *)) {
+  --uno: border-dashed important-text-emerald;
+}
+
+.prose :where(a > code):hover:not(:where(.not-prose, .not-prose *)) {
+  --uno: important-border-emerald/50;
+}
+
+.prose :where(a:has(> code)):not(:where(.not-prose, .not-prose *)) {
+  text-decoration: none !important
 }
 
 .prose :where(:not(pre) > code):not(:where(.not-prose, .not-prose *))::before,
diff --git a/templates/basic/.layer-playground/styles/base.css b/templates/basic/.layer-playground/styles/base.css
@@ -12,3 +12,7 @@ html.dark {
   color-scheme: dark;
   background: #020420;
 }
+
+button {
+  margin-right: 5px;
+}
diff --git a/uno.config.ts b/uno.config.ts
@@ -14,9 +14,13 @@ export default defineConfig({
     'border-base': 'border-gray-200 dark:border-gray-800',
     'bg-active': 'bg-gray:10',
     'bg-faded': 'bg-gray:5',
-    'bg-code': 'bg-gray:8',
     'bg-base': 'bg-white dark:bg-[#020420]',
-    'text-faded': 'text-gray6:100 dark:text-gray:100',
+    'text-faded': 'text-gray6:100 dark:text-gray3:80',
+
+    'bg-code': 'bg-gray/5',
+
+    'bg-inline-code': 'bg-gray-100 dark:bg-gray-800/75',
+    'border-inline-code': 'border-gray-200 dark:border-gray-700/75',
 
     'z-embedded-docs': 'z-100',
     'z-embedded-docs-raised': 'z-101',

Original file line number	Diff line number	Diff line change
`@@ -44,7 +44,7 @@ const language = computed(() => {`
`44`	`44`	`}`
`45`	`45`	`})`
`46`	`46`	`const theme = computed(() => colorMode.value === 'dark'`
`47`		`- ? 'vitesse-black'`
	`47`	`+ ? 'vitesse-dark'`
`48`	`48`	`: 'vitesse-light',`
`49`	`49`	`)`
`50`	`50`