feature: add base setup and integration to nuxthub

.env.example

@@ -0,0 +1,2 @@
+NUXT_HUB_PROJECT_URL=https://my-nuxhub.project.dev
+NUXT_HUB_PROJECT_SECRET_KEY=my-project-secret-used-in-cloudflare-env

.github/workflows/deploy.yml

@@ -0,0 +1,36 @@
+name: Deploy with NuxtHub CLI
+on: push
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+        with:
+          run_install: false
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: "pnpm"
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+      - uses: actions/cache@v4
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Deploy with nuxthub
+        run: npx nuxthub deploy
+        env:
+          NUXT_HUB_PROJECT_KEY: ${{ secrets.NUXT_HUB_PROJECT_KEY}}
+          NUXT_HUB_USER_TOKEN: ${{ secrets.NUXT_HUB_USER_TOKEN }}

.vscode/settings.json

@@ -5,5 +5,5 @@
   "editor.quickSuggestions": {
     "strings": "on"
   },
-  "cSpell.words": ["pinia", "slideover", "Slideover"]
+  "cSpell.words": ["nuxtjs", "pinia", "slideover", "Slideover"]
 }

app/app.config.ts

@@ -1,8 +1,8 @@
 export default defineAppConfig({
   ui: {
     colors: {
-      primary: "rose",
-      neutral: "zinc",
+      primary: "indigo",
+      neutral: "slate",
     },
     theme: {
       transitions: "out-in",

app/app.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-const colorMode = useColorMode()
+import favicon from "~/assets/images/favicon.svg"
 
+const colorMode = useColorMode()
 const color = computed(() => (colorMode.value === "dark" ? "#111827" : "white"))
 
 useHead({
@@ -9,14 +10,14 @@ useHead({
     { name: "viewport", content: "width=device-width, initial-scale=1" },
     { key: "theme-color", name: "theme-color", content: color },
   ],
-  link: [{ rel: "icon", href: "/favicon.ico" }],
+  link: [{ rel: "icon", type: "image/svg+xml", href: favicon }],
   htmlAttrs: {
     lang: "en",
   },
 })
 
 useSeoMeta({
-  titleTemplate: "%s - Sinta-se acompanhado",
+  titleTemplate: "Wladi Veras  • %s",
   ogImage: "https://saas-template.nuxt.dev/social-card.png",
   twitterImage: "https://saas-template.nuxt.dev/social-card.png",
   twitterCard: "summary_large_image",
@@ -40,11 +41,13 @@ useSeoMeta({
 @import "@nuxt/ui";
 
 :root {
-  --font-family-sans: "Montserrat", sans-serif;
+  font-family: "Fira Code", "Fira Mono", "Roboto Mono", monospace;
+  --font-family-sans: "Fira Code", "Fira Mono", "Roboto Mono", monospace;
+
   --breakpoint-3xl: 1920px;
 
   --ui-primary: var(--ui-color-primary-700);
-  --ui-radius: var(--radius-xl);
+  --ui-radius: var(--radius-md);
 
   --ui-text-dimmed: var(--ui-color-neutral-400);
   --ui-text-muted: var(--ui-color-neutral-500);

app/components/Logo.vue

@@ -0,0 +1,78 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    :width="props.height"
+    zoomAndPan="magnify"
+    viewBox="0 0 375 374.999991"
+    :height="props.width"
+    :preserveAspectRatio="props.preserveAspectRatio"
+    :class="props.className"
+  >
+    <defs>
+      <clipPath id="2d366c7b85">
+        <path
+          d="M 0 80.246094 L 375 80.246094 L 375 294.746094 L 0 294.746094 Z M 0 80.246094 "
+          clip-rule="nonzero"
+        />
+      </clipPath>
+    </defs>
+    <g clip-path="url(#2d366c7b85)">
+      <path
+        :fill="props.color"
+        d="M 1.335938 90.273438 L 121.652344 291.519531 C 122.847656 293.523438 125.007812 294.75 127.34375 294.75 C 129.675781 294.75 131.835938 293.523438 133.03125 291.519531 L 187.5 200.410156 L 241.96875 291.519531 C 243.167969 293.523438 245.328125 294.75 247.660156 294.75 C 249.988281 294.75 252.148438 293.523438 253.347656 291.519531 L 373.664062 90.273438 C 374.890625 88.222656 374.917969 85.675781 373.738281 83.597656 C 372.5625 81.523438 370.359375 80.242188 367.976562 80.242188 L 307.132812 80.242188 C 304.777344 80.242188 302.601562 81.488281 301.410156 83.515625 L 253.710938 164.839844 C 251.859375 167.996094 252.917969 172.054688 256.074219 173.910156 C 259.230469 175.761719 263.292969 174.703125 265.144531 171.546875 L 310.925781 93.5 L 356.289062 93.5 L 247.660156 275.203125 L 195.222656 187.496094 L 253.347656 90.273438 C 254.574219 88.222656 254.601562 85.675781 253.421875 83.597656 C 252.246094 81.523438 250.042969 80.242188 247.660156 80.242188 L 186.8125 80.242188 C 184.460938 80.242188 182.285156 81.488281 181.097656 83.515625 L 133.394531 164.839844 C 131.542969 167.996094 132.601562 172.054688 135.757812 173.910156 C 138.914062 175.761719 142.976562 174.703125 144.828125 171.546875 L 190.609375 93.5 L 235.972656 93.5 L 181.828125 184.0625 C 181.8125 184.089844 181.792969 184.121094 181.777344 184.148438 L 127.34375 275.203125 L 18.710938 93.5 L 116.191406 93.5 L 102.859375 118.007812 C 101.113281 121.222656 102.300781 125.25 105.515625 126.996094 C 108.730469 128.746094 112.757812 127.554688 114.507812 124.34375 L 133.164062 90.039062 C 134.28125 87.984375 134.234375 85.496094 133.039062 83.484375 C 131.84375 81.472656 129.679688 80.242188 127.34375 80.242188 L 7.027344 80.242188 C 4.640625 80.242188 2.4375 81.523438 1.257812 83.597656 C 0.0820312 85.675781 0.109375 88.222656 1.335938 90.273438 "
+        :fill-opacity="props.opacity"
+        fill-rule="nonzero"
+      />
+    </g>
+  </svg>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  width?: number | string
+  height?: number | string
+  color?: string
+  opacity?: number
+  preserveAspectRatio?: string
+  className?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  width: 500,
+  height: 500,
+  color: "#000000",
+  opacity: 1,
+  preserveAspectRatio: "xMidYMid meet",
+  className: "cursor-pointer hover:opacity-75 logo-animate",
+})
+</script>
+
+<style scoped>
+svg {
+  transition: all 0.3s ease;
+}
+.logo-hover:hover {
+  transform: scale(1.1);
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.logo-animate:hover {
+  animation: pulse 2s infinite;
+}
+
+svg path {
+  transition: fill 0.3s ease;
+}
+</style>