feat: feature flag to hide the navigation input

Author: antfu

components/PanelPreview.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 const play = usePlaygroundStore()
 const preview = usePreviewStore()
+const guide = useGuideStore()
 
 const inputUrl = ref<string>('')
 const inner = ref<{ iframe?: HTMLIFrameElement | undefined }>()
@@ -49,7 +50,7 @@ function navigate() {
         <div i-ph-globe-duotone />
         <span text-sm>Preview</span>
       </div>
-      <div flex px-2 py1>
+      <div v-if="guide.features.navigation" flex px-2 py1>
         <div
           flex="~ items-center justify-center"
           mx-auto min-w-100 w-full rounded bg-faded px2 text-sm

content/1.vue/.template/index.ts

@@ -5,5 +5,6 @@ export const meta: GuideMeta = {
   features: {
     terminal: false,
     fileTree: false,
+    navigation: false,
   },
 }

content/1.vue/2.reactivity/.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,
+  },
+}

content/1.vue/3.composition-api/.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,
+  },
+}

content/1.vue/4.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,
+  },
+}

content/1.vue/5.summary/.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,
+  },
+}

content/2.concepts/2.app-vue/.template/index.ts

@@ -4,5 +4,6 @@ export const meta: GuideMeta = {
   startingFile: 'app.vue',
   features: {
     fileTree: true,
+    navigation: false,
   },
 }

stores/guide.ts

@@ -1,9 +1,10 @@
 import type { Raw } from 'vue'
 import type { GuideMeta, PlaygroundFeatures } from '~/types/guides'
 
-const defaultFeatures: PlaygroundFeatures = Object.freeze({
+const defaultFeatures = Object.freeze(<PlaygroundFeatures>{
   fileTree: false,
   terminal: false,
+  navigation: true,
 })
 
 export const useGuideStore = defineStore('guide', () => {
@@ -46,7 +47,10 @@ export const useGuideStore = defineStore('guide', () => {
     preview.location.fullPath = guide?.startingUrl || '/'
     preview.updateUrl()
 
-    features.value = guide?.features || { ...defaultFeatures }
+    features.value = {
+      ...defaultFeatures,
+      ...guide?.features,
+    }
     currentGuide.value = guide
     showingSolution.value = withSolution
 

types/guides.ts

@@ -16,4 +16,5 @@ export interface PlaygroundFeatures {
   terminal?: boolean
   fileTree?: boolean
   download?: boolean
+  navigation?: boolean
 }