feat: improved devtools tab

.npmrc

@@ -1,2 +1,3 @@
 shamefully-hoist=true
 strict-peer-dependencies=false
+ignore-workspace-root-check=true

README.md

@@ -74,15 +74,15 @@ Whether you're helping us fix bugs, improve the docs, or spread the word, we'd l
 
 [prismic]: https://prismic.io
 
-<!-- TODO: Replace link with a more useful one if available -->
+<!-- Replace link with a more useful one if available -->
 
 [playground]: https://stackblitz.com/github/nuxt-modules/prismic/tree/master/examples/minimal?file=pages%2Findex.vue
 [nuxt-docs]: https://prismic.nuxtjs.org
 [prismic-docs]: https://prismic.io/docs/technical-reference/prismicio-vue?version=v4
 [changelog]: ./CHANGELOG.md
 [contributing]: ./CONTRIBUTING.md
 
-<!-- TODO: Replace link with a more useful one if available -->
+<!-- Replace link with a more useful one if available -->
 
 [forum-question]: https://community.prismic.io
 [repo-bug-report]: https://github.com/nuxt-modules/prismic/issues/new?assignees=&labels=bug&template=bug_report.md&title=

client/app/pages/index.vue

@@ -9,44 +9,125 @@ const { status, start, stop, config } = await useSlicemachine(props.rpc)
 </script>
 
 <template>
-	<div class="relative p-4 n-bg-base flex flex-col gap-4 h-screen">
-		<h1 class="text-3xl font-bold">
-			<span class="i-logos:prismic-icon" /> @nuxtjs/prismic
-		</h1>
+	<div class="relative p-4 n-bg-base space-y-4">
+		<header>
+			<h1 class="inline-block rounded border border-zinc-600 bg-zinc-900 p-1.5 heading text-m">
+				<span class="i-simple-icons:prismic align-sub" /> @nuxtjs/prismic
+			</h1>
+		</header>
 
-		<NCard class="grid gap-4">
-			<h2 class="px-4 mt-4 text-xl font-bold">
-				Slicemachine
-			</h2>
-			<section class="flex gap-2 mt-4 px-4">
-				<SlicemachineStatusTip
-					:running="status.running"
-					class="flex-1"
-				/>
-				<NButton @click="status.running ? stop() : start()">
-					{{ status.running ? 'Stop' : 'Start' }} Slicemachine
-				</NButton>
-			</section>
-
-			<NSectionBlock
-				text="Configuration"
-				icon="carbon:settings"
-				:open="false"
-				header-class="hover:op100"
+		<main class="grid grid-cols-2 grid-auto-flow gap-4">
+			<NCard class="col-span-2 p-4 space-y-4">
+				<h2 class="text-m heading">
+					<span class="i-carbon:tools-alt align-sub" /> Slicemachine
+				</h2>
+				<section class="flex gap-2">
+					<SlicemachineStatusTip
+						:running="status.running"
+						class="flex-1"
+					/>
+					<NButton @click="status.running ? stop() : start()">
+						{{ status.running ? 'Stop' : 'Start' }} Slicemachine
+					</NButton>
+				</section>
+			</NCard>
+			<NCard class="p-4 space-y-4">
+				<h2 class="text-m heading">
+					<span class="i-carbon:notebook-reference align-sub" /> Documentation
+				</h2>
+				<h3>Nuxt</h3>
+				<p class="flex gap-2 flex-wrap">
+					<NButton
+						to="https://prismic.io/docs/content-modeling"
+						icon="i-carbon-ruler-alt"
+						target="_blank"
+					>
+						Model Content
+					</NButton>
+					<NButton
+						to="https://prismic.io/docs/nuxt-3-define-routes"
+						icon="i-carbon-3d-curve-manual"
+						target="_blank"
+					>
+						Define Routes
+					</NButton>
+					<NButton
+						to="https://prismic.io/docs/nuxt-3-fetch-data"
+						icon="i-carbon-download"
+						target="_blank"
+					>
+						Fetch Data
+					</NButton>
+					<NButton
+						to="https://prismic.io/docs/nuxt-3-template-content"
+						icon="i-carbon-paint-brush"
+						target="_blank"
+					>
+						Template Content
+					</NButton>
+				</p>
+				<h3>APIs</h3>
+				<p class="flex gap-2 flex-wrap">
+					<NButton
+						to="https://prismic.io/docs/technical-reference/prismicio-client"
+						icon="i-carbon-satellite-radar"
+						target="_blank"
+					>
+						@prismicio/client
+					</NButton>
+					<NButton
+						to="https://prismic.io/docs/technical-reference/prismicio-vue"
+						icon="i-carbon-logo-vue"
+						target="_blank"
+					>
+						@prismicio/vue
+					</NButton>
+					<NButton
+						to="https://prismic.nuxtjs.org/"
+						icon="i-simple-icons-nuxtdotjs"
+						target="_blank"
+					>
+						@nuxtjs/prismic
+					</NButton>
+				</p>
+			</NCard>
+			<NCard
+				v-if="config && 'repositoryName' in config && config.repositoryName"
+				class="p-4 space-y-4"
 			>
-				<NCodeBlock
-					v-if="config"
-					:lines="false"
-					:code="JSON.stringify(config, null, 2)"
-					lang="json"
-				/>
-				<p
-					v-else
-					class="op-1/2"
-				>
-					Slicemachine configuration file not found! Please create one at the root of your project.
+				<h2 class="text-m heading">
+					<span class="i-carbon:tools-alt align-sub" /> Repository
+				</h2>
+				<p class="flex gap-2 flex-wrap">
+					<NButton
+						:to="`https://${config.repositoryName}.prismic.io/builder/working`"
+						icon="i-carbon-book"
+						target="_blank"
+					>
+						Documents
+					</NButton>
+					<NButton
+						:to="`https://${config.repositoryName}.prismic.io/builder/medias`"
+						icon="i-carbon-image"
+						target="_blank"
+					>
+						Media Library
+					</NButton>
+					<NButton
+						:to="`https://${config.repositoryName}.prismic.io/settings/repository`"
+						icon="i-carbon-settings"
+						target="_blank"
+					>
+						Settings
+					</NButton>
 				</p>
-			</NSectionBlock>
-		</NCard>
+			</NCard>
+		</main>
 	</div>
 </template>
+
+<style scoped>
+.heading {
+	@apply font-bold uppercase tracking-wider font-mono;
+}
+</style>

client/nuxt.config.ts

@@ -9,7 +9,7 @@ export default defineNuxtConfig({
 		baseURL: '/__prismic-client',
 	},
 	devServer: {
-		port: 3300,
+		port: 5173,
 	},
 	future: {
 		compatibilityVersion: 4,

package.json

@@ -65,6 +65,7 @@
 	"devDependencies": {
 		"@iconify-json/carbon": "^1.2.5",
 		"@iconify-json/logos": "^1.2.4",
+		"@iconify-json/simple-icons": "^1.2.18",
 		"@nuxt/devtools-ui-kit": "^1.7.0",
 		"@nuxt/eslint-config": "^0.7.4",
 		"@nuxt/module-builder": "^0.8.4",

playground/slicemachine.config.json

@@ -1,3 +1,3 @@
 {
-	"foo": "bar"
-}
+	"repositoryName": "nextjs-starter-prismic-blog"
+}