feat: initialize project with nuxt layers concept

viandwi24 · Mar 19, 2023 · 7b6c0f6 · 7b6c0f6
commit 7b6c0f6
Show file tree

Hide file tree

Showing 37 changed files with 8,620 additions and 0 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_size = 2
+indent_style = space
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,9 @@
+node_modules
+*.log*
+.nuxt
+.nitro
+.cache
+.output
+.env
+dist
+.DS_Store
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1 @@
+shamefully-hoist=true
diff --git a/README.md b/README.md
@@ -0,0 +1,19 @@
+# Nuxt 3 Awesome Starter
+a Nuxt 3 starter template with a lot of useful features, integrated with TailwindCSS 3. Easy use and implemented in Nuxt Layer, you can extend this template with zero config.
+
+> **NOTES** 
+> - This Project using "pnpm" as package manager
+
+## Features
+- [x] 💨 [Tailwind CSS v3](https://tailwindcss.com/) with [Windicss](https://windicss.org/)
+- [x] ✨ [Headless UI](https://headlessui.dev/)
+- [x] 🔔 [Nuxt Icon](https://icones.js.org/)
+- [x] 🛹 [State & Store Management (Pinia)](https://pinia.vuejs.org/)
+- [x] 📦 [Vue Composition Collection (Vueuse)](https://vueuse.org/)
+- [x] 🌙 Switch Theme (light, dark, system, realtime)
+- [x] 🇮🇩 Language Switcher
+- [x] 🪝 Built-in Component & Layout
+- [x] Eslint & Prettier
+- [x] Configurable Theme (Easy to change)
+  - [x] Primary Colors
+  - [x] Font
diff --git a/app.config.ts b/app.config.ts
@@ -0,0 +1,87 @@
+import { AppConfigInput } from 'nuxt/schema'
+import type { RouteLocationRaw } from 'vue-router'
+
+export interface NuxtAwesomeAppConfig {
+  /** title name */
+  name?: string
+
+  /** project config */
+  project?: {
+    /** links */
+    links?: {
+      /** project github link */
+      github?: string
+    }
+  }
+
+  /** layout config */
+  layout?: {
+    /** page layout */
+    page?: {
+      /** navbar */
+      navbar?: {
+        /** menus in navbar */
+        menus?: {
+          type?: 'link' | 'button'
+          title?: string
+          to?: RouteLocationRaw | undefined
+        }[]
+      }
+    }
+    /** footer */
+    footer?: {
+      /** footer year */
+      year?: number
+    }
+  }
+
+  /** author config */
+  author?: {
+    /** author name */
+    name?: string
+    /** author links */
+    links?: {
+      /** author github link */
+      github?: string
+      /** author medium link */
+      medium?: string,
+      /** author website link */
+      website?: string
+    }
+  }
+}
+
+declare module '@nuxt/schema' {
+  interface AppConfigInput {
+    awesome?: NuxtAwesomeAppConfig
+  }
+}
+
+export default defineAppConfig({
+  awesome: {
+    name: 'Nuxt 3 Awesome Starter',
+    project: {
+      links: {
+        github: 'https://github.com/viandwi24/nuxt3-awesome-starter',
+      }
+    },
+    layout: {
+      page: {
+        navbar: {
+          menus: []
+        }
+      },
+      footer: {
+        year: 2022,
+      },
+    },
+    author: {
+      name: 'viandwi24',
+      links: {
+        github: 'https://github.com/viandwi24',
+        medium: 'https://viandwi24.medium.com',
+        website: 'https://viandwi24.site',
+      },
+    },
+  } as NuxtAwesomeAppConfig
+})
diff --git a/app.vue b/app.vue
@@ -0,0 +1,8 @@
+<template>
+  <Html class="dark">
+    <NuxtLayout>
+      <NuxtLoadingIndicator />
+      <NuxtPage />
+    </NuxtLayout>
+  </Html>
+</template>
diff --git a/app/app.config.ts b/app/app.config.ts
@@ -0,0 +1,28 @@
+export default defineAppConfig({
+  awesome: {
+    name: 'Nuxt 3 Awesome Starter',
+    project: {
+      links: {
+        github: 'https://github.com/viandwi24/nuxt3-awesome-starter',
+      }
+    },
+    layout: {
+      page: {
+        navbar: {
+          menus: []
+        }
+      },
+      footer: {
+        year: 2022,
+      },
+    },
+    author: {
+      name: 'viandwi24',
+      links: {
+        github: 'https://github.com/viandwi24',
+        medium: 'https://viandwi24.medium.com',
+        website: 'https://viandwi24.site',
+      },
+    },
+  }
+})
diff --git a/app/nuxt.config.ts b/app/nuxt.config.ts
@@ -0,0 +1,7 @@
+export default defineNuxtConfig({
+  extends: '../',
+  modules: [
+    // for dev only
+    '@nuxt/devtools'
+  ]
+})
diff --git a/app/pages/about.vue b/app/pages/about.vue
@@ -0,0 +1,3 @@
+<template>
+  <NuxtWelcome />
+</template>
diff --git a/app/pages/blank.vue b/app/pages/blank.vue
@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+definePageMeta({ layout: 'page' })
+</script>
+
+<template>
+  <LayoutPageWrapper>
+    <LayoutPageHeader>
+      <LayoutPageTitle text="Blank Page" class="capitalize" />
+    </LayoutPageHeader>
+    <LayoutPageSection>
+      <LayoutPageSectionTitle text="Section Title" />
+      <div>My Content</div>
+    </LayoutPageSection>
+    <LayoutPageSection>
+      <LayoutPageSectionTitle text="Another Section" />
+      <div>My Content</div>
+    </LayoutPageSection>
+  </LayoutPageWrapper>
+</template>
diff --git a/app/pages/index.vue b/app/pages/index.vue
@@ -0,0 +1,177 @@
+<script lang="ts" setup>
+definePageMeta({ layout: 'page' })
+
+const { awesome } = useAppConfig()
+
+const titlesText = computed<string[]>(() => 'Nuxt 3[]Awesome[]Starter'.split('[]'))
+const leadingsText = computed(() => [
+  {
+    text: titlesText.value[0],
+    startColor: '#007CF0',
+    endColor: '#00DFD8',
+    delay: 0,
+  },
+  {
+    text: titlesText.value[1],
+    startColor: '#7928CA',
+    endColor: '#FF0080',
+    delay: 2,
+  },
+  {
+    text: titlesText.value[2],
+    startColor: '#FF4D4D',
+    endColor: '#F9CB28',
+    delay: 4,
+  },
+])
+</script>
+
+<template>
+  <LayoutPageWrapper class="flex-1 flex">
+    <LayoutPageSection class="flex-1 flex">
+      <div class="flex-1 flex flex-col items-center justify-center">
+        <h1 class="text-center mt-4">
+          <span
+            v-for="(item, i) in leadingsText"
+            :key="i"
+            :style="`--content: '${item.text}'; --start-color: ${
+              item.startColor
+            }; --end-color: ${item.endColor}; --animation-name: anim-fg-${
+              i + 1
+            }`"
+            class="animated-text-bg drop-shadow-xl text-5xl xl:text-7xl 2xl:text-8xl block font-black uppercase"
+          >
+            <span class="animated-text-fg">{{ item.text }}</span>
+          </span>
+        </h1>
+        <div class="px-4 mt-6 text-center max-w-[600px]">
+          a starter template for Nuxt 3 with minimalist themes design, built in components, drawer & menus, and more.
+        </div>
+        <div
+          class="flex space-x-4 ml-2 mt-8 justify-center md:justify-start"
+        >
+          <AwesomeButton
+            size="lg"
+            text="Nuxt 3"
+            class="font-extrabold"
+            href="https://nuxt.com"
+            _target="blank"
+          />
+          <AwesomeButton
+            v-if="awesome?.project?.links?.github"
+            size="lg"
+            text="Github"
+            type="secondary"
+            class="font-extrabold"
+            :href="awesome?.project?.links?.github"
+            _target="blank"
+          />
+        </div>
+      </div>
+      <div class="top-0 left-0 absolute w-screen">
+        <div class="absolute right-0 top-0 w-[300px] h-screen py-10 pt-12 z-0 flex">
+          <div class="flex-1 rounded-l-9xl bg-gradient-to-l from-blue-600/18"></div>
+        </div>
+        <div class="absolute left-0 top-0 w-[300px] h-screen py-10 pt-12 z-0 flex">
+          <div class="flex-1 rounded-r-9xl bg-gradient-to-r from-green-600/18"></div>
+        </div>
+      </div>
+    </LayoutPageSection>
+  </LayoutPageWrapper>
+</template>
+
+<style lang="scss">
+:root {
+  --padding: 0.05em;
+}
+
+@keyframes anim-fg-1 {
+  0%,
+  16.667%,
+  100% {
+    opacity: 1;
+  }
+  33.333%,
+  83.333% {
+    opacity: 0;
+  }
+}
+@keyframes anim-fg-2 {
+  0%,
+  16.667%,
+  66.667%,
+  100% {
+    opacity: 0;
+  }
+  33.333%,
+  50% {
+    opacity: 1;
+  }
+}
+@keyframes anim-fg-3 {
+  0%,
+  50%,
+  100% {
+    opacity: 0;
+  }
+  66.667%,
+  83.333% {
+    opacity: 1;
+  }
+}
+.animated-text-bg {
+  position: relative;
+  display: block;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  content: var(--content);
+  display: block;
+  width: 100%;
+  color: theme('colors.slate.800');
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 0;
+  padding-left: var(--padding);
+  padding-right: var(--padding);
+  &:before {
+    content: var(--content);
+    position: absolute;
+    display: block;
+    width: 100%;
+    color: theme('colors.slate.800');
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 0;
+    padding-left: var(--padding);
+    padding-right: var(--padding);
+  }
+}
+.animated-text-fg {
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  padding-left: var(--padding);
+  padding-right: var(--padding);
+  background-image: linear-gradient(
+    90deg,
+    var(--start-color),
+    var(--end-color)
+  );
+  position: relative;
+  opacity: 0;
+  z-index: 1;
+  animation: var(--animation-name) 8s infinite;
+}
+html.dark {
+  .animated-text-bg {
+    color: theme('colors.gray.100');
+    &:before {
+      color: theme('colors.gray.100');
+    }
+  }
+}
+</style>
diff --git a/app/pages/post.vue b/app/pages/post.vue
@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+definePageMeta({ layout: 'page' })
+</script>
+
+<template>
+  <LayoutPageSection class="flex">
+    <div>aweawe</div>
+  </LayoutPageSection>
+</template>