docs: add doc site

nuxt-modules · Feb 16, 2022 · 713b0b8 · 713b0b8
1 parent cb9cdf4
commit 713b0b8
Show file tree

Hide file tree

Showing 17 changed files with 34,217 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 Replace all on all files (README.md, CONTRIBUTING.md, bug_report.md, package.json):
 - @nuxtjs/prismic
-- Easily connect your Nuxt.js application to your content hosted on Prismic
+- Easily connect your Nuxt 3 application to your content hosted on Prismic
 - nuxt-community/prismic-module
 - prismic-module
 
@@ -26,7 +26,20 @@ Easily connect your Nuxt.js application to your content hosted on [Prismic][pris
 ## Install
 
 ```bash
-npm install --save-dev @nuxtjs/prismic
+npm install --save-dev @nuxtjs/prismic@alpha # or yarn add --dev @nuxtjs/prismic@alpha
+```
+
+Then, add `@nuxtjs/prismic` to the `buildModules` section of your Nuxt config and configure your Prismic API endpoint:
+
+```javascript
+import { defineNuxtConfig } from 'nuxt3'
+
+export default defineNuxtConfig({
+	buildModules: ['@nuxtjs/prismic'],
+	prismic: {
+		endpoint: 'my-repository'
+	},
+});
 ```
 
 ## Documentation
@@ -55,8 +68,8 @@ Whether you're helping us fix bugs, improve the docs, or spread the word, we'd l
 
 <!-- TODO: Replace link with a more useful one if available -->
 
-[nuxt-docs]: https://prismic.nuxtjs.org
-[prismic-docs]: https://prismic.io/docs
+[nuxt-docs]: https://v3.prismic.nuxtjs.org
+[prismic-docs]: https://prismic.io/docs/technical-reference/prismicio-vue?version=v3
 [changelog]: ./CHANGELOG.md
 [contributing]: ./CONTRIBUTING.md
 

diff --git a/docs/.gitignore b/docs/.gitignore
@@ -0,0 +1 @@
+sw.*
diff --git a/docs/assets/css/main.css b/docs/assets/css/main.css
@@ -0,0 +1,3 @@
+html.dark .app-header {
+  background-color: rgba(23, 28, 45, 0.75);
+}
diff --git a/docs/components/PageTocBottom.vue b/docs/components/PageTocBottom.vue
@@ -0,0 +1,74 @@
+<template>
+	<div>
+		<h5
+			class="text-sm font-semibold text-gray-900 dark:text-gray-100 py-1"
+		>
+			Resources
+		</h5>
+		<ul class="font-medium dark:text-gray-400">
+			<li>
+				<a
+					href="https://github.com/nuxt-community/prismic-module/blob/next/CHANGELOG.md"
+					target="_blank"
+					rel="noopener"
+					class="flex items-center transition duration-200 py-2 group dark:hover:text-gray-100 hover:text-gray-900"
+				>
+					<span>✨ &nbsp;Release Notes</span>
+					<svg
+						fill="none"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+						class="w-4 h-4 ml-2 text-gray-400 opacity-0 group-hover:opacity-100"
+					>
+						<path d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+					</svg>
+				</a>
+			</li>
+			<li>
+				<a
+					href="https://community.prismic.io"
+					target="_blank"
+					rel="noopener"
+					class="flex items-center transition duration-200 py-2 group dark:hover:text-gray-100 hover:text-gray-900"
+				>
+					<span>📣 &nbsp;Community Forum</span>
+					<svg
+						fill="none"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+						class="w-4 h-4 ml-2 text-gray-400 opacity-0 group-hover:opacity-100"
+					>
+						<path d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+					</svg>
+				</a>
+			</li>
+			<li>
+				<a
+					href="https://prismic.io/docs/technical-reference/prismicio-vue?version=v3&utm_campaign=devexp&utm_source=nuxt3doc&utm_medium=doc"
+					target="_blank"
+					rel="noopener"
+					class="flex items-center transition duration-200 py-2 group dark:hover:text-gray-100 hover:text-gray-900"
+				>
+					<span>📚 &nbsp;Official Documentation</span>
+					<svg
+						fill="none"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+						class="w-4 h-4 ml-2 text-gray-400 opacity-0 group-hover:opacity-100"
+					>
+						<path d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+					</svg>
+				</a>
+			</li>
+		</ul>
+	</div>
+</template>
diff --git a/docs/content/en/index.md b/docs/content/en/index.md
@@ -0,0 +1,220 @@
+---
+title: "Documentation"
+description: "Easily connect your Nuxt 3 application to your content hosted on Prismic"
+category: "Home"
+version: 1.2
+badge: ""
+draft: false
+features:
+  - Add Prismic to your Nuxt app in seconds
+  - Access Prismic SDK through composition and options API
+  - Prismic previews supported
+---
+
+<style>
+.prose h2 {
+	margin-top: 6rem;
+}
+.prose h3 {
+	margin-top: 1rem;
+}
+
+.nuxt-content-highlight {
+	margin-top: 1rem;
+	margin-bottom: 1rem;
+}
+</style>
+
+<d-alert type="info">
+
+This is the documentation for [`@nuxtjs/prismic` version 3](https://github.com/nuxt-community/prismic-module), the [Prismic](https://prismic.io?utm_campaign=devexp&utm_source=nuxt3doc&utm_medium=homepage) module for [Nuxt 3](https://v3.nuxtjs.org).
+
+If you're using [Nuxt 2](https://nuxtjs.org) or [Nuxt Bridge](https://v3.nuxtjs.org/getting-started/bridge), check out the documentation for the previous version of the `@nuxtjs/prismic` at [prismic.nuxtjs.org](https://prismic.nuxtjs.org).
+
+</d-alert>
+
+<d-list :items="features"></d-list>
+
+## Module Status
+
+Similar to Nuxt 3, this module is currently under heavy development. We try to implement new features and port existing ones to Nuxt 3 following the new framework progress and growing feature set.
+
+### How to help?
+
+This module is for now considered, like Nuxt 3, as _unstable_, however feel free to play with it and [share your feedback](https://github.com/nuxt-community/prismic-module/issues/new/choose) with us!
+
+## Installation
+
+Add `@nuxtjs/prismic@alpha` dependency to your project:
+
+<d-code-group class="my-4">
+  <d-code-block label="Yarn" active>
+
+```bash
+yarn add --dev @nuxtjs/prismic@alpha
+```
+
+  </d-code-block>
+  <d-code-block label="NPM">
+
+```bash
+npm install --save-dev @nuxtjs/prismic@alpha
+```
+
+  </d-code-block>
+</d-code-group>
+
+Then, add `@nuxtjs/prismic` to the `buildModules` section of your Nuxt config and configure your Prismic API endpoint:
+
+```javascript[nuxt.config.[jt]s]
+import { defineNuxtConfig } from 'nuxt3'
+
+export default defineNuxtConfig({
+	buildModules: ['@nuxtjs/prismic'],
+	prismic: {
+		endpoint: 'my-repository'
+	},
+});
+```
+
+For more configuration options, refer to the [configuration reference](#configuration-reference) section.
+
+## Examples
+
+Here are few Nuxt-specific examples, for how to use the module refer to the comprehensive [`@prismicio/vue` documentation](https://prismic.io/docs/technical-reference/prismicio-vue?version=v3&utm_campaign=devexp&utm_source=nuxt3doc&utm_medium=doc)
+
+### Fetching content
+
+An [`@prismicio/client`](https://prismic.io/docs/technical-reference/prismicio-client?utm_campaign=devexp&utm_source=nuxt3doc&utm_medium=doc) instance is available through the globally available `usePrismic()` composable. You can use it to fetch content from your Prismic repository inside Nuxt composables:
+
+```vue[app.vue]
+<script setup>
+const { client } = usePrismic()
+const { data: home } = await useAsyncData('home', () => client.getByUID('page', 'home'))
+</script>
+```
+
+### Templating content
+
+The module injects multiple components to template Prismic data which are made available globally in your application:
+
+<d-code-group class="my-4">
+  <d-code-block label="prismic-rich-text" active>
+
+```html
+<prismic-rich-text :field="doc.text" />
+```
+
+  </d-code-block>
+  <d-code-block label="prismic-text">
+
+```html
+<prismic-text :field="doc.text" />
+```
+
+  </d-code-block>
+  <d-code-block label="prismic-link">
+
+```html
+<prismic-link :field="doc.link">My link</prismic-link>
+```
+
+  </d-code-block>
+  <d-code-block label="prismic-image">
+
+```html
+<prismic-image :field="doc.image" />
+```
+
+  </d-code-block>
+  <d-code-block label="prismic-embed">
+
+```html
+<prismic-embed :field="doc.embed" />
+```
+
+  </d-code-block>
+  <d-code-block label="slice-zone">
+
+```html
+<slice-zone :slices="doc.body" :components="components" />
+```
+
+  </d-code-block>
+</d-code-group>
+
+Learn more about injected components in the [`@prismicio/vue` documentation](https://prismic.io/docs/technical-reference/prismicio-vue?version=v3&utm_campaign=devexp&utm_source=nuxt3doc&utm_medium=doc#components-usage)
+
+### Custom preview page
+
+You can override the default preview page by creating a page at the route configured for the preview (default: `/preview`):
+
+```vue[~/pages/preview.vue]
+<template>
+	<p>Loading Prismic preview...</p>
+</template>
+
+<script setup>
+// The following code is quite boilerplate for now, a simpler composable will be provided in the future
+import { onMounted } from 'vue'
+
+const { client, options: { linkResolver } } = usePrismic()
+const { push } = useRouter()
+onMounted(async () => {
+	const redirectURL = await client.resolvePreviewURL({
+		linkResolver,
+		defaultURL: '/'
+	})
+
+	push(redirectURL ?? '/')
+})
+</script>
+```
+
+## Configuration Reference
+
+You can configure `@nuxtjs/prismic` with the `prismic` property in your Nuxt config.
+
+```javascript[nuxt.config.[jt]s]
+import { defineNuxtConfig } from 'nuxt3'
+
+export default defineNuxtConfig({
+	prismic: {
+		/* configuration */
+	},
+});
+```
+
+#### `...PrismicPluginOptions`
+
+Refer to [`@prismicio/vue` documentation](https://prismic.io/docs/technical-reference/prismicio-vue?version=v3&utm_campaign=devexp&utm_source=nuxt3doc&utm_medium=doc#plugin-usage) for available options.
+
+#### `preview`
+
+- Type: `string | false`
+- Default: `/preview`
+
+The route to use for the preview page, disable previews with `false`.
+
+```javascript[nuxt.config.[jt]s]
+prismic: {
+  preview: false // disable previews
+}
+```
+
+### Interface
+
+```typescript
+type PrismicModuleOptions = PrismicPluginOptions & {
+	preview?: string | false
+}
+```
+
+### Defaults
+
+```
+{
+	injectComponents: true,
+	preview: '/preview'
+}
+```
diff --git a/docs/content/settings.json b/docs/content/settings.json
@@ -0,0 +1,25 @@
+{
+	"title": "@nuxtjs/prismic",
+	"description": "Easily connect your Nuxt 3 application to your content hosted on Prismic",
+	"url": "https://prismic.nuxtjs.org",
+	"layout": "single",
+	"logo": {
+		"light": "/logo-light.svg",
+		"dark": "/logo-dark.svg"
+	},
+	"header": {
+		"logo": true,
+		"title": false
+	},
+	"twitter": "@prismicio",
+	"github": {
+		"repo": "nuxt-community/prismic-module",
+		"branch": "master",
+		"dir": "docs",
+		"releases": false
+	},
+	"colors": {
+		"primary": "#5163ba"
+	},
+	"credits": false
+}
diff --git a/docs/nuxt.config.js b/docs/nuxt.config.js
@@ -0,0 +1,27 @@
+import { withDocus } from 'docus'
+
+export default withDocus({
+	head: {
+		script: [
+			{ src: 'https://cdn.jsdelivr.net/npm/js-confetti@0.8.0/dist/js-confetti.browser.js', body: true },
+			{
+				innerHTML: `
+if (typeof JSConfetti !== "undefined") {
+	console
+	new JSConfetti().addConfetti({
+		emojis: ["🌲", "📚", "📐", "🚀"],
+		emojiSize: 60,
+	});
+}
+`
+			}
+		]
+	},
+	generate: {
+		fallback: true
+	},
+	buildModules: ['vue-plausible'],
+	plausible: {
+		domain: 'prismic.nuxtjs.org'
+	}
+})