feat(templates/nuxt-sanity): Add template

aziontech · Oct 24, 2024 · 6dc9ba7 · 6dc9ba7
1 parent 9b67030
commit 6dc9ba7
Show file tree

Hide file tree

Showing 22 changed files with 11,072 additions and 0 deletions.
diff --git a/templates/nuxt/sanity-nuxt-clean/.env.example b/templates/nuxt/sanity-nuxt-clean/.env.example
@@ -0,0 +1,10 @@
+# Required - The ID of your Sanity project
+NUXT_SANITY_PROJECT_ID=""
+# Required - The dataset of your Sanity project
+NUXT_SANITY_DATASET=""
+# Required - The generated read token, used to fetch data on the server
+NUXT_SANITY_API_READ_TOKEN=""
+# Optional - The Sanity API version to use
+NUXT_SANITY_API_VERSION=""
+# Optional - The URL of your Sanity Studio
+NUXT_SANITY_STUDIO_URL=""
diff --git a/templates/nuxt/sanity-nuxt-clean/.github/workflows/main.yml b/templates/nuxt/sanity-nuxt-clean/.github/workflows/main.yml
@@ -0,0 +1,39 @@
+name: Main Edge Deploy
+
+on:
+  pull_request:
+    types:
+      - closed
+    branches:
+      - "main"
+
+jobs:
+  deploy:
+    if: github.event.pull_request.merged == true
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: write
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Use Node.js 18.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: Install NPM dependencies
+        run: npm i
+
+      - name: Install Azion CLI
+        run: |
+          curl -o azionlinux https://downloads.azion.com/linux/x86_64/azion
+          sudo mv azionlinux /usr/bin/azion
+          sudo chmod u+x /usr/bin/azion
+
+      - name: Azion Action Deploy
+        run: |
+          azion -t ${{ secrets.AZION_PERSONAL_TOKEN }}
+          azion deploy
diff --git a/templates/nuxt/sanity-nuxt-clean/.gitignore b/templates/nuxt/sanity-nuxt-clean/.gitignore
@@ -0,0 +1,13 @@
+node_modules
+*.log*
+.nuxt
+.nitro
+.cache
+.output
+dist
+.DS_Store
+
+# Azion
+.edge
+.vulcan
+
diff --git a/templates/nuxt/sanity-nuxt-clean/README.md b/templates/nuxt/sanity-nuxt-clean/README.md
@@ -0,0 +1,42 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# yarn
+yarn install
+
+# npm
+npm install
+
+# pnpm
+pnpm install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`
+
+```bash
+npm run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+npm run build
+```
+
+Locally preview production build:
+
+```bash
+npm run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
diff --git a/templates/nuxt/sanity-nuxt-clean/app.vue b/templates/nuxt/sanity-nuxt-clean/app.vue
@@ -0,0 +1,227 @@
+<template>
+  <a
+    v-if="previewEnabled && !inFrame"
+    :href="`/preview/disable?redirect=${route.fullPath}`"
+    class="preview-toggle"
+  >
+    <span>Preview Enabled</span>
+    <span>Disable Preview</span>
+  </a>
+
+  <div class="container">
+    <header class="header">
+      <a class="header__title" href="/">Nuxt + Sanity</a>
+    </header>
+    <main>
+      <NuxtPage />
+    </main>
+    <footer class="footer">
+      <p class="footer__text">
+        Made with
+        <svg
+          data-sanity-icon="heart-filled"
+          width="1em"
+          height="1em"
+          viewBox="0 0 25 25"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M17 16C15.8 17.3235 12.5 20.5 12.5 20.5C12.5 20.5 9.2 17.3235 8 16C5.2 12.9118 4.5 11.7059 4.5 9.5C4.5 7.29412 6.1 5.5 8.5 5.5C10.5 5.5 11.7 6.82353 12.5 8.14706C13.3 6.82353 14.5 5.5 16.5 5.5C18.9 5.5 20.5 7.29412 20.5 9.5C20.5 11.7059 19.8 12.9118 17 16Z"
+            fill="currentColor"
+            stroke="currentColor"
+            stroke-width="1.2"
+          ></path>
+        </svg>
+        at Sanity
+      </p>
+    </footer>
+  </div>
+</template>
+
+<script setup lang="ts">
+const route = useRoute()
+const { enabled: previewEnabled, inFrame } = useSanityVisualEditingState()
+</script>
+
+<style>
+:root {
+  --space-0: 0;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 20px;
+  --space-5: 32px;
+  --space-6: 52px;
+  --space-7: 84px;
+  --space-8: 136px;
+  --space-9: 220px;
+
+  --font-family-sans: Inter;
+  --font-family-serif: PT Serif;
+  --font-family-mono: IBM Plex Mono;
+
+  --font-size-0: 12px;
+  --font-size-1: 14px;
+  --font-size-2: 16px;
+  --font-size-3: 18px;
+  --font-size-4: 20px;
+  --font-size-5: 24px;
+  --font-size-6: 30px;
+  --font-size-7: 36px;
+  --font-size-8: 48px;
+  --font-size-9: 60px;
+  --font-size-10: 72px;
+
+  --line-height-0: 16px;
+  --line-height-1: 20px;
+  --line-height-2: 24px;
+  --line-height-3: 28px;
+  --line-height-4: 28px;
+  --line-height-5: 32px;
+  --line-height-6: 36px;
+  --line-height-7: 40px;
+  --line-height-8: 48px;
+  --line-height-9: 60px;
+  --line-height-10: 72px;
+  --line-height-11: 96px;
+  --line-height-12: 128px;
+
+  --white: #fff;
+  --black: #101112;
+  --gray-200: #ced2d9;
+  --gray-600: #6e7683;
+  --blue-600: #1e61cd;
+  --magenta-100: #f9d7eb;
+
+  --max-width-0: 320px;
+  --max-width-1: 768px;
+}
+
+html {
+  background-color: var(--white);
+  font-family: var(--font-family-sans), var(--font-family-serif), sans-serif;
+  text-size-adjust: 100%;
+}
+
+body {
+  margin: 0;
+}
+</style>
+
+<style scoped>
+.container {
+  margin: 0 auto;
+}
+
+main {
+  margin-top: 45px;
+}
+
+.header {
+  display: flex;
+  padding: 0 var(--space-1);
+  border-bottom: 1px solid #ced2d9;
+
+  z-index: 10;
+  background: var(--white);
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+
+  & .header__title {
+    font-weight: 800;
+    font-size: var(--font-size-3);
+    line-height: var(--line-height-1);
+    padding-left: var(--space-2);
+    margin: var(--space-3) 0;
+    text-decoration: none;
+    color: var(--black);
+  }
+}
+
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: 0 var(--space-3);
+
+  & .footer__text {
+    font-size: var(--font-size-1);
+    line-height: var(--line-height-1);
+    display: flex;
+    align-items: center;
+    gap: 2px;
+  }
+}
+
+@media (min-width: 575px) {
+  .container {
+    max-width: var(--max-width-1);
+    padding: 0 var(--space-4);
+  }
+
+  main {
+    margin-top: unset;
+  }
+
+  .header {
+    position: unset;
+    border-bottom: none;
+    margin: var(--space-3) 0;
+    padding: var(--space-2) 0;
+    background: unset;
+
+    & .header__title {
+      margin: var(--space-3) 0 var(--space-2);
+      font-size: var(--font-size-5);
+    }
+  }
+
+  .footer {
+    margin: var(--space-3) 0;
+  }
+}
+
+.preview-toggle {
+  backdrop-filter: blur(12px);
+  border-radius: 0.25rem;
+  bottom: 1rem;
+  box-shadow:
+    0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  color: #1f2937;
+  display: block;
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1rem;
+  padding-bottom: 0.5rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.5rem;
+  position: fixed;
+  right: 1rem;
+  text-align: center;
+  text-decoration: none;
+  z-index: 50;
+}
+
+.preview-toggle:hover {
+  background-color: #ef4444;
+  color: #ffffff;
+}
+
+.preview-toggle span:first-child {
+  display: block;
+}
+.preview-toggle:hover span:first-child {
+  display: none;
+}
+
+.preview-toggle span:last-child {
+  display: none;
+}
+.preview-toggle:hover span:last-child {
+  display: block;
+}
+</style>
diff --git a/templates/nuxt/sanity-nuxt-clean/azion.config.cjs b/templates/nuxt/sanity-nuxt-clean/azion.config.cjs
@@ -0,0 +1,8 @@
+module.exports = {
+  build: {
+    preset: {
+      name: 'nuxt'
+    }
+  }
+}
+
diff --git a/templates/nuxt/sanity-nuxt-clean/components/BlockContent.vue b/templates/nuxt/sanity-nuxt-clean/components/BlockContent.vue
@@ -0,0 +1,14 @@
+<script>
+export default {
+  props: {
+    blocks: {
+      type: Array,
+      required: true,
+    },
+  },
+}
+</script>
+
+<template>
+  <SanityContent :blocks="blocks" />
+</template>