Merge branch 'main' into chore/nuxthub

Author: k-miyake

.github/workflows/autofix.yml

@@ -14,10 +14,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
           node-version: lts/*
+          cache: pnpm
 
       - name: Install
         run: pnpm install --frozen-lockfile

.github/workflows/ci.yml

@@ -8,40 +8,40 @@ const props = defineProps<{
 const FILE_ICONS = [
   {
     match: /\.vue$/,
-    icon: 'i-logos-vue',
+    icon: 'i-catppuccin-vue',
   },
   {
     match: /nuxt\.config\.\w+$/,
-    icon: 'i-logos-nuxt-icon scale-110',
+    icon: 'i-catppuccin-nuxt',
   },
   {
     match: /package\.json$/,
-    icon: 'i-file-icons-npm text-red scale-110',
+    icon: 'i-catppuccin-npm',
   },
   {
     match: /\.[mc]?tsx?$/,
-    icon: 'i-file-icons-typescript-alt text-blue3',
+    icon: 'i-catppuccin-typescript',
   },
   {
     match: /\.[mc]?jsx?$/,
-    icon: 'i-devicon-javascript',
+    icon: 'i-catppuccin-javascript',
   },
 ]
 
 const icon = computed(() => {
   if (props.isDirectory) {
     return props.isDirectoryOpen
-      ? 'i-ph:folder-open-duotone scale-120'
-      : 'i-ph:folder-simple-duotone scale-120'
+      ? 'i-catppuccin-folder-open'
+      : 'i-catppuccin-folder'
   }
   for (const { match, icon } of FILE_ICONS) {
     if (match.test(props.path))
       return icon
   }
-  return 'i-ph:file-duotone scale-120'
+  return 'i-catppuccin-file'
 })
 </script>
 
 <template>
-  <div :class="icon" />
+  <div :class="icon" light="brightness-60 hue-rotate-180 invert-100 saturate-200" scale-110 />
 </template>

components/FileIcon.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { NavItem, ParsedContent } from '@nuxt/content'
 
+const runtime = useRuntimeConfig()
 const {
   navigation,
   page,
@@ -58,7 +59,7 @@ const ui = useUiState()
 
 const sourceUrl = computed(() =>
   page.value?._file
-    ? `https://github.com/nuxt/learn.nuxt.com/edit/main/content/${page.value._file}`
+    ? `${runtime.public.repoUrl}/edit/main/content/${page.value._file}`
     : undefined,
 )
 

components/PanelDocs.vue

@@ -57,7 +57,7 @@ const folderCaret = computed(() => {
       :style="{
         paddingLeft: `${0.2 + 0.8 * (props.depth)}rem`,
       }"
-      :class="isFileSelected ? 'bg-active' : 'saturate-0 text-faded'"
+      :class="isFileSelected ? 'bg-active' : 'text-faded'"
       w-full flex items-center gap-1 px2 py1 text-left text-sm
       @click="handleClick"
     >

components/PanelEditorFileSystemTree.vue

@@ -5,7 +5,6 @@ const guide = useGuideStore()
 const runtime = useRuntimeConfig()
 const commands = useCommandsStore()
 
-const repo = 'https://github.com/nuxt/learn.nuxt.com'
 const buildTime = new Date(runtime.public.buildTime)
 const timeAgo = useTimeAgo(buildTime)
 
@@ -53,7 +52,7 @@ addCommands(
       <NuxtTutorialLogo h-2em />
     </NuxtLink>
     <NuxtLink
-      :href="repo"
+      :href="runtime.public.repoUrl"
       target="_blank"
     >
       <div block translate-y--2 rounded bg-orange:10 px2 py1 text-xs text-orange>
@@ -94,7 +93,7 @@ addCommands(
         <template #popper>
           <div px5 py4 grid="~ gap-y-3 gap-x-2 cols-[max-content_1fr] items-center">
             <div i-ph-package-duotone text-xl />
-            <NuxtLink :to="`${repo}/commit/${runtime.public.gitSha}`" target="_blank" title="View on GitHub">
+            <NuxtLink :to="`${runtime.public.repoUrl}/commit/${runtime.public.gitSha}`" target="_blank" title="View on GitHub">
               <time :datetime="buildTime.toISOString()" :title="buildTime.toLocaleString()">
                 Built {{ timeAgo }} (<code>{{ runtime.public.gitSha.slice(0, 5) }}</code>)
               </time>
@@ -116,7 +115,7 @@ addCommands(
         rounded p2
         title="GitHub"
         hover="bg-active"
-        :href="repo"
+        :href="runtime.public.repoUrl"
         target="_blank"
       >
         <div i-carbon-logo-github text-2xl />

components/TheNav.vue

@@ -15,11 +15,11 @@ ogImage:
 
 ## Nuxt とは?
 
-Nuxt は、[Vue.js](https://vuejs.org) を使用して、型安全でパフォーマンスが高く本番環境に適したフルスタックの Web アプリケーションやウェブサイトを作成するための直感的で拡張可能な方法を提供する、無料で[オープンソースのフレームワーク](https://github.com/nuxt/nuxt)です。Nuxt はベンダーロックインがなく、アプリケーションを[**どこでも、エッジ上でも**](https://nuxt.com/blog/nuxt-on-the-edge)デプロイすることができます。
+Nuxt は、[Vue.js](https://vuejs.org) を使用して、型安全でパフォーマンスが高く本番環境に適したフルスタックの Web アプリケーションやウェブサイトを作成するための直感的で拡張可能な方法を提供する、無料で [オープンソースのフレームワーク](https://github.com/nuxt/nuxt) です。Nuxt はベンダーロックインがなく、アプリケーションを [**どこでも、エッジ上でも**](https://nuxt.com/blog/nuxt-on-the-edge) デプロイすることができます。
 
 ## はじめに
 
-このチュートリアルでは、HTML、CSS、JavaScript の基本的な概念に既に精通していることを前提としています。Nuxt は[Vue](https://vuejs.org) の上に構築されたフルスタックフレームワークのため、Vue の基本的なチュートリアルも提供しています。
+このチュートリアルでは、HTML、CSS、JavaScript の基本的な概念に既に精通していることを前提としています。Nuxt は [Vue](https://vuejs.org) の上に構築されたフルスタックフレームワークのため、Vue の基本的なチュートリアルも提供しています。
 
 以下のトピックをクリックして学習を始めてください：
 

content/0.index.md

@@ -4,16 +4,15 @@ ogImage: true
 
 # Vueの基本
 
-Nuxt は、[Vue 3](https://vuejs.org/)というユーザーインターフェイスを構築するためのプログレッシブなフレームワークを使用しています。このセクションでは、Vue の基本について説明します。
+Nuxt は、[Vue.js](https://ja.vuejs.org/) というユーザーインターフェイスを構築するためのプログレッシブなフレームワークを使用しています。このセクションでは、Vue の基本について説明します。\
+エディタに表示されているのは、[Vueシングルファイルコンポーネント](https://ja.vuejs.org/guide/scaling-up/sfc)（SFC）です。
 
-エディタに表示されているのは、[Vueシングルファイルコンポーネント](https://vuejs.org/guide/scaling-up/sfc.html)（SFC）です。
+SFC は、HTML、CSS、および JavaScript を 1 つの `.vue` ファイル内にまとめた再利用可能な自己完結型のコードブロックです。これは、JavaScript ロジックを定義するための [`<script setup>`](https://ja.vuejs.org/api/sfc-script-setup) ブロック、HTML テンプレートを定義するための `<template>` ブロック、および CSS スタイルを定義するためのオプションの `<style>` ブロックで構成されています。右側のプレイグラウンドで実際に操作してみるか、[公式のVueドキュメント](https://ja.vuejs.org/guide/scaling-up/sfc) で詳細を読むことができます。
 
-SFC は、HTML、CSS、および JavaScript を 1 つの `.vue` ファイル内にまとめた再利用可能な自己完結型のコードブロックです。これは、JavaScript ロジックを定義するための[`<script setup>`](https://vuejs.org/api/sfc-script-setup.html)ブロック、HTML テンプレートを定義するための `<template>` ブロック、および CSS スタイルを定義するためのオプションの `<style>` ブロックで構成されています。右側のプレイグラウンドで実際に操作してみるか、[公式のVueドキュメント](https://v3.vuejs.org/guide/single-file-component.html)で詳細を読むことができます。
-
-Nuxt では、Vue SFC をそのままサポートしており、アプリケーションを構築するために使用することを強くお勧めします。Nuxt が Vue のデフォルトの Vue SFC と異なる点の 1 つは、[Vueユーティリティを自動インポート](https://nuxt.com/docs/guide/concepts/auto-imports)することです。そのため、`ref`、`computed` などの Vue API を直接インポートせずに使用することができます。
+Nuxt では Vue SFC をそのままサポートしており、アプリケーションを構築するために使用することを強くお勧めします。Nuxt が Vue のデフォルトの Vue SFC と異なる点の 1 つは、[Vueユーティリティを自動インポート](https://nuxt.com/docs/guide/concepts/auto-imports) することです。そのため、`ref`、`computed` などの Vue API を直接インポートせずに使用することができます。
 
 ::note
-**ヒント**: Vue コンポーネントを定義する方法はいくつかありますが、一般的には[Composition API](https://vuejs.org/guide/introduction.html#composition-api)を使用した[`<script setup>`](https://vuejs.org/api/sfc-script-setup.html)を使用することをお勧めします。これにより、より良い開発者体験を得ることができます。Vue を初めて使用する場合、異なる選択肢をすべて理解することにこだわる必要はありません。私たちの推奨する方法を採用すれば、最も直感的に Vue を始められるでしょう。
+**ヒント**: Vue コンポーネントを定義する方法はいくつかありますが、一般的には [Composition API](https://ja.vuejs.org/guide/introduction) を使用した [`<script setup>`](https://ja.vuejs.org/api/sfc-script-setup) を使用することをお勧めします。これにより、より良い開発者体験を得ることができます。Vue を初めて使用する場合、異なる選択肢をすべて理解することにこだわる必要はありません。私たちの推奨する方法を採用すれば、最も直感的に Vue を始められるでしょう。
 ::
 
 今後、以下のトピックについて説明します：

content/1.vue/1.index.md

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const count = ref(1)
 const doubled = computed(() => count.value * 2)
 

content/1.vue/2.reactivity/.template/files/app.vue

@@ -1,11 +1,12 @@
-<script setup>
+<script setup lang="ts">
 const count = ref(1)
 const multiplier = ref(2)
 const result = computed(() => count.value * multiplier.value)
 
 function increment() {
   count.value++
 }
+
 function multiply() {
   multiplier.value++
 }