Merge pull request #106 from zackha/dev

Dev

.env.example

@@ -1 +1 @@
-GQL_HOST=https://example.com/graphql
+GQL_HOST="https://example.com/graphql"

.gitignore

@@ -1,9 +1,24 @@
-node_modules
-*.log*
+# Nuxt dev/build outputs
+.output
+.data
 .nuxt
 .nitro
 .cache
-.output
-.env
 dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
 .DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

README.md

@@ -1,42 +1,43 @@
-<p align="center">
-  <img width="64" align="center" src="https://github.com/zackha/nuxtcommerce/assets/79358543/ac0ae5da-b077-4c5d-9e56-23a6b16498ed">
-</p>
-<h1 align="center">
-  NuxtCommerce
-</h1>
-<p align="center">
-  An open-source, dynamic e-commerce solution powered by Nuxt 3 and GraphQL, headless storefront replacement for Woocommerce. Featuring a user interface in the style of Pinterest and fully customizable (Vue, Nuxt3).
-</p>
-
-### [🚀 Live Demo](https://nuxtcommerce.netlify.app/)
-
-## Introduction
-NuxtCommerce is a dynamic and lively e-commerce platform developed with Nuxt 3. Developed for WooCommerce, NuxtCommerce optimizes data flow with [WPGraphQL](https://github.com/wp-graphql/wp-graphql), offering an efficient shopping experience. It stands out with its Pinterest-style user-friendly interface and fashion-oriented structure. With its dark mode feature and open-source nature, it offers flexibility and continuous development opportunities.
-
-If your product stocks and prices are not changeable, and you are not continuously uploading new products, it could be beneficial for you to opt for [Woonuxt](https://github.com/scottyzen/woonuxt#readme). This project, developed by [scottyzen](https://github.com/scottyzen), is static, thus providing a faster solution.
-
-## Stack
-
-- Nuxt3 / Vue
-- Headless Storefront
-- GraphQL with Apollo Client
-- Tailwind CSS
-- Pinterest Interface
-- Developed for WooCommerce
-- Dynamic
-- Open Source
-- Suitable for Fashion Category
-- Dark Mode
-
-## Contributing
-
-Contributions of any kind are welcome! You can open an issue for requests, bug reports, or general feedback, or you can directly create a pull request(PR).
-
-## Contact
-
-Don't hesitate to get in touch if you have any questions or suggestions:
-
-Email: [email protected]</br>
-Twitter: [@ZHatlen](https://twitter.com/ZHatlen)
-
-![Nuxtcommerce](https://github.com/zackha/nuxtcommerce/assets/79358543/0fbd5415-f449-4a7f-9031-33f8be0e447c)
+<p align="center">
+  <img width="64" align="center" src="https://github.com/zackha/nuxtcommerce/assets/79358543/ac0ae5da-b077-4c5d-9e56-23a6b16498ed">
+</p>
+<h1 align="center">
+  NuxtCommerce
+</h1>
+<p align="center">
+  An open-source, dynamic e-commerce solution powered by Nuxt 3 and GraphQL, headless storefront replacement for Woocommerce. Featuring a user interface in the style of Pinterest and fully customizable (Vue, Nuxt3).
+</p>
+
+### [🚀 Live Demo](https://nuxtcommerce.netlify.app/)
+
+## Introduction
+
+NuxtCommerce is a dynamic and lively e-commerce platform developed with Nuxt 3. Developed for WooCommerce, NuxtCommerce optimizes data flow with [WPGraphQL](https://github.com/wp-graphql/wp-graphql), offering an efficient shopping experience. It stands out with its Pinterest-style user-friendly interface and fashion-oriented structure. With its dark mode feature and open-source nature, it offers flexibility and continuous development opportunities.
+
+If your product stocks and prices are not changeable, and you are not continuously uploading new products, it could be beneficial for you to opt for [Woonuxt](https://github.com/scottyzen/woonuxt#readme). This project, developed by [scottyzen](https://github.com/scottyzen), is static, thus providing a faster solution.
+
+## Stack
+
+- Nuxt3 / Vue
+- Headless Storefront
+- GraphQL with Apollo Client
+- Tailwind CSS
+- Pinterest Interface
+- Developed for WooCommerce
+- Dynamic
+- Open Source
+- Suitable for Fashion Category
+- Dark Mode
+
+## Contributing
+
+Contributions of any kind are welcome! You can open an issue for requests, bug reports, or general feedback, or you can directly create a pull request(PR).
+
+## Contact
+
+Don't hesitate to get in touch if you have any questions or suggestions:
+
+Email: [email protected]</br>
+Twitter: [@ZHatlen](https://twitter.com/ZHatlen)
+
+![Nuxtcommerce](https://github.com/zackha/nuxtcommerce/assets/79358543/0fbd5415-f449-4a7f-9031-33f8be0e447c)

app.config.ts

@@ -0,0 +1,5 @@
+export default defineAppConfig({
+  ui: {
+    primary: 'red',
+  },
+});

app.vue

@@ -1,26 +1,28 @@
 <template>
-  <NuxtLayout>
+  <AppHeader />
+  <div class="pt-20 min-h-[calc(100vh-72px)]">
     <NuxtPage />
-  </NuxtLayout>
+  </div>
+  <AppFooter />
 </template>
 
 <style lang="postcss">
 .dark {
   @apply bg-black text-neutral-100;
   color-scheme: dark;
 }
-.v-enter-active {
+.dropdown-enter-active {
   @apply transition duration-200 ease-out;
 }
-.v-enter-from,
-.v-leave-to {
+.dropdown-enter-from,
+.dropdown-leave-to {
   @apply translate-y-5 opacity-0;
 }
-.v-enter-to,
-.v-leave-from {
+.dropdown-enter-to,
+.dropdown-leave-from {
   @apply transform opacity-100;
 }
-.v-leave-active {
+.dropdown-leave-active {
   @apply transition duration-150 ease-in;
 }
 </style>

components/AppFooter.vue

@@ -1,27 +1,28 @@
+<script setup>
+const config = useRuntimeConfig();
+const colorMode = useColorMode();
+
+const toggleDark = () => {
+  colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark';
+};
+
+const colorModeIcon = computed(() => (colorMode.preference === 'dark' ? 'i-iconamoon-mode-dark-fill' : 'i-iconamoon-mode-light-fill'));
+</script>
+
 <template>
-  <div class="my-8 flex items-center justify-between px-8 text-[13px] font-semibold text-secondary-text dark:text-secondary-text-d">
+  <div class="my-5 flex items-center justify-between px-5 text-[13px] font-semibold text-secondary-text dark:text-secondary-text-d">
     <div>
       <a class="hover:text-black hover:dark:text-neutral-100" href="https://github.com/zackha/nuxtcommerce" target="_blank">NuxtCommerce v{{ config.public.version }}</a>
-      - by <a class="hover:text-black hover:dark:text-neutral-100" href="https://me.zackha.com" target="_blank">Zack Hatlen</a>
+      - by
+      <a class="hover:text-black hover:dark:text-neutral-100" href="https://zackha.com" target="_blank">Sefa Bulak</a>
     </div>
     <div>
       <button
         @click="toggleDark"
         class="box-border flex h-8 items-center gap-1.5 rounded-lg p-2 transition-all bg-neutral-800/5 hover:bg-neutral-800/10 hover:text-black active:scale-95 dark:bg-white/10 hover:dark:bg-white/20 hover:dark:text-neutral-100">
-        <div class="flex"><Icon :name="colorModeIcon" size="16" /></div>
+        <div class="flex"><UIcon :name="colorModeIcon" size="16" /></div>
         <div class="capitalize leading-3">{{ colorMode.preference }}</div>
       </button>
     </div>
   </div>
 </template>
-
-<script setup lang="ts">
-const config = useRuntimeConfig();
-const colorMode = useColorMode();
-
-const toggleDark = () => {
-  colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark';
-};
-
-const colorModeIcon = computed(() => (colorMode.preference === 'dark' ? 'solar:moon-bold' : 'solar:sun-2-bold'));
-</script>