Fixed Header, Mobile Layouts and Donate page

.nuxt/tailwind.config.cjs

@@ -1,4 +1,4 @@
-// generated by the @nuxtjs/tailwindcss <https://github.com/nuxt-modules/tailwindcss> module at 5/24/2024, 12:36:12 AM
+// generated by the @nuxtjs/tailwindcss <https://github.com/nuxt-modules/tailwindcss> module at 5/24/2024, 12:43:29 PM
 const configMerger = require("/Users/rezajafar/peakofeloquence-app/node_modules/@nuxtjs/tailwindcss/dist/runtime/merger.mjs");
 
 const inlineConfig = {"content":[],"theme":{"extend":{}},"plugins":[],"darkMode":"class"};

components/Header.vue

@@ -1,6 +1,47 @@
+<template>
+  <UHeader :links="links">
+    <!-- Logo -->
+    <template #logo>
+      <div class="flex items-center">
+        <img
+          v-if="colorMode.preference === 'dark'"
+          src="/public/gold-gradient-icon.png"
+          alt="Logo"
+          class="h-5 w-auto mr-3"
+        />
+        <img
+          v-if="colorMode.preference === 'light'"
+          src="/public/dark-gradient-icon.png"
+          alt="Logo"
+          class="h-5 w-auto mr-3"
+        />
+        <!-- <span class="text-md font-light text-gray-900 dark:text-gray-100 font-custom">
+          peakofeloquence.org
+        </span> -->
+      </div>
+    </template>
+
+    <!-- Header Right -->
+    <template #right>
+      <UColorModeButton />
+      <UButton label="Donate" color="gray" to="/donate" />
+    </template>
+
+    <UButton
+      v-for="(link, index) in links"
+      :key="index"
+      v-bind="{ color: 'gray', variant: 'ghost', ...link }"
+    />
+
+    <template #panel> </template>
+  </UHeader>
+</template>
+
 <script setup lang="ts">
-import type { NavItem } from "@nuxt/content/dist/runtime/types";
+import { ref, inject } from "vue";
 import { useAppConfig, useColorMode } from "#imports";
+import type { NavItem } from "@nuxt/content/dist/runtime/types";
+
 const appConfig = useAppConfig();
 const navigation = inject<Ref<NavItem[]>>("navigation", ref([]));
 const colorMode = useColorMode();
@@ -27,43 +68,4 @@ const links = [
     to: "/blog",
   },
 ];
-
-// Define the mapContentNavigation method
-function mapContentNavigation(navigation: NavItem[]): NavItem[] {
-  // Your logic here to map the navigation items
-  return navigation;
-}
 </script>
-
-<template>
-  <UHeader :links="links">
-    <!-- Logo -->
-    <template #logo>
-      <div class="flex items-center">
-        <img
-          v-if="colorMode.preference === 'light'"
-          src="/nav-logo-dark.png"
-          alt="Logo"
-          class="h-7 w-auto mr-3"
-        />
-        <img v-else src="/nav-logo-light.png" alt="Logo" class="h-7 w-auto mr-3" />
-      </div>
-    </template>
-
-    <!-- Header Right -->
-    <template #right>
-      <UColorModeButton />
-      <UButton label="Donate" color="gray" to="/donate" />
-    </template>
-
-    <UButton
-      v-for="(link, index) in links"
-      :key="index"
-      v-bind="{ color: 'gray', variant: 'ghost', ...link }"
-    />
-
-    <template #panel>
-      <UNavigationTree :links="mapContentNavigation(navigation)" default-open />
-    </template>
-  </UHeader>
-</template>

eslint.config.mjs

@@ -1,6 +1,20 @@
 // @ts-check
-import withNuxt from './.nuxt/eslint.config.mjs'
+import { defineConfig } from 'eslint-define-config';
 
-export default withNuxt(
-  // Your custom configs here
-)
+export default defineConfig({
+  parser: 'vue-eslint-parser',
+  parserOptions: {
+    parser: '@typescript-eslint/parser',
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  },
+  extends: [
+    'plugin:vue/vue3-recommended',
+    'plugin:@typescript-eslint/recommended',
+    'prettier'
+  ],
+  plugins: ['vue', '@typescript-eslint'],
+  rules: {
+    // Add your custom rules here
+  }
+});

nuxt.config.ts

@@ -1,3 +1,6 @@
+// nuxt.config.ts
+import { defineNuxtConfig } from 'nuxt/config';
+
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   // Plugins (if needed, uncomment)
@@ -16,29 +19,26 @@ export default defineNuxtConfig({
     '@vueuse/nuxt',
     'nuxt-og-image',
     '@nuxtjs/sitemap',
-    'nuxt-icon',
-    //'nuxt-simple-sitemap',
+    'nuxt-icon'
   ],
   hooks: {
     'components:extend': (components) => {
-      const globals = components.filter(c => ['UButton'].includes(c.pascalName))
-      globals.forEach(c => c.global = true)
+      const globals = components.filter(c => ['UButton'].includes(c.pascalName));
+      globals.forEach(c => c.global = true);
     }
   },
   ui: {
     icons: ['heroicons', 'simple-icons']
   },
   routeRules: {
-    '/api/search.json': { prerender: true },
-    // '/docs': { redirect: '/docs/getting-started', prerender: false }
+    '/api/search.json': { prerender: true }
   },
   devtools: {
     enabled: true
   },
   typescript: {
     strict: false
   },
-  // Sitemap configuration
   sitemap: {
     hostname: 'https://www.peakofeloquence.org',
     gzip: true,
@@ -53,5 +53,4 @@ export default defineNuxtConfig({
       '/node_modules/**'
     ],
   }
-})
-
+});

package.json

@@ -8,7 +8,8 @@
     "generate": "yarn nuxt generate",
     "preview": "yarn nuxt preview",
     "postinstall": "yarn nuxt prepare",
-    "lint": "yarn eslint .",
+    "lint": "eslint --ext .js,.ts,.vue .",
+    "format": "prettier --write .",
     "typecheck": "yarn nuxt typecheck"
   },
   "dependencies": {
@@ -39,8 +40,14 @@
     "@nuxt/eslint-config": "^0.3.12",
     "@nuxt/typescript-build": "^3.0.2",
     "@nuxthq/studio": "^1.1.0",
-    "eslint": "^8.56.0",
+    "@typescript-eslint/eslint-plugin": "^7.10.0",
+    "@typescript-eslint/parser": "^7.10.0",
+    "eslint": "^9.3.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-define-config": "^2.1.0",
+    "eslint-plugin-vue": "^9.26.0",
     "nuxt-icon": "^0.6.10",
+    "prettier": "^3.2.5",
     "vue-tsc": "^2.0.17"
   }
 }

pages/about/[...slug].vue

@@ -27,11 +27,6 @@ useSeoMeta({
   ogDescription: page.value.description,
 });
 
-defineOgImage({
-  title: page.value.title,
-  description: page.value.description,
-});
-
 const headline = computed(() => findPageHeadline(page.value!));
 </script>
 

pages/donate.vue

@@ -2,7 +2,7 @@
   <div class="donation-page">
     <UContainer class="donation-container">
       <div
-        class="content-wrapper flex flex-col md:flex-row justify-between items-start w-full"
+        class="content-wrapper flex flex-col md:flex-row justify-between items-center md:items-start w-full"
       >
         <div class="donation-description md:w-1/2 md:pr-8">
           <h2
@@ -44,11 +44,11 @@
           <p
             class="text-lg text-center md:text-left mb-8 text-gray-800 dark:text-gray-300 leading-relaxed italic"
           >
-            "I hope to continuatlly improve this website and make it a valuable resource
+            "I hope to continually improve this website and make it a valuable resource
             for everyone. Your support means the world to me!" 🌍
           </p>
         </div>
-        <div class="iframe-container md:w-1/2">
+        <div class="iframe-container md:w-1/2 w-full">
           <iframe
             id="kofiframe"
             src="https://ko-fi.com/peakofeloquence/?hidefeed=true&widget=true&embed=true&preview=true"
@@ -72,7 +72,7 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 100vh;
+  min-height: 100vh; /* Use min-height instead of height to allow content overflow */
   background-color: #f9fafb; /* Tailwind gray-50 */
   padding: 20px;
 }

pages/index.vue

@@ -70,15 +70,15 @@ useSeoMeta({
       :description="section.description"
       :align="section.align"
       :features="section.features"
-      class="bg-grayscale-50 dark:bg-gray-900"
+      class="bg-gray-900 text-gray-100 py-12 px-6 sm:px-12 flex flex-col lg:flex-row items-center lg:items-start space-y-8 lg:space-y-0 lg:space-x-12"
     >
       <template #title>
-        <h2 class="custom-title-class">{{ section.title }}</h2>
+        <h2 class="text-4xl font-bold mb-4">{{ section.title }}</h2>
       </template>
       <template #description>
-        <p class="custom-description-class">{{ section.description }}</p>
+        <p class="text-lg text-gray-300 mb-6">{{ section.description }}</p>
       </template>
-      <Placeholder2 />
+      <Placeholder />
     </ULandingSection>
 
     <ULandingSection
@@ -110,14 +110,14 @@ useSeoMeta({
         >
           <ULandingTestimonial
             v-bind="testimonial"
-            class="bg-grayscale-200 dark:bg-gray-700"
+            class="bg-grayscale-200 dark:bg-gray-800"
           />
         </div>
       </UPageColumns>
     </ULandingSection>
 
     <ULandingSection class="bg-grayscale-50 dark:bg-gray-900">
-      <ULandingCTA v-bind="page.cta" class="bg-grayscale-200 dark:bg-gray-700" />
+      <ULandingCTA v-bind="page.cta" class="bg-grayscale-200 dark:bg-gray-800" />
     </ULandingSection>
   </div>
 </template>
@@ -133,8 +133,8 @@ useSeoMeta({
 .hero-title-gradient {
   background: linear-gradient(
     to right,
-    #e0c3fc,
-    #ffffff,
+    #68685a,
+    #e6e4db,
     #ac8e62
   ); /* Enhanced gradient for readability */
   -webkit-background-clip: text;

pages/letters/[...slug].vue

@@ -27,11 +27,6 @@ useSeoMeta({
   ogDescription: page.value.description,
 });
 
-defineOgImage({
-  title: page.value.title,
-  description: page.value.description,
-});
-
 const headline = computed(() => findPageHeadline(page.value!));
 </script>
 

pages/resources/[...slug].vue

@@ -27,11 +27,6 @@ useSeoMeta({
   ogDescription: page.value.description,
 });
 
-defineOgImage({
-  title: page.value.title,
-  description: page.value.description,
-});
-
 const headline = computed(() => findPageHeadline(page.value!));
 </script>
 

pages/sayings/[...slug].vue

@@ -27,11 +27,6 @@ useSeoMeta({
   ogDescription: page.value.description,
 });
 
-defineOgImage({
-  title: page.value.title,
-  description: page.value.description,
-});
-
 const headline = computed(() => findPageHeadline(page.value!));
 </script>