Setup

IDE Config

Configured VS Code for TailwindCSS Intellisense. See IDE.

Create New App

Created Nuxt 3 app using NuxtUI starter template:

pnpm dlx nuxi@latest init -t ui refactor-stga

Backup and Publish to GitHub

Initialized repo and published as public.

Backup Name: 0000refactor-V0.0-Nuxt-UI-Starter

Initial Content

Added /content directory under project root, to store Captain's Log.

Since this repo is public, /content can be viewed as a source by any Markdown CMS client, [like this one)(https://annebrown.ca/docs-refactor).

Initial Config

nuxt.config.ts:

//<--------@/nuxt.config.ts---------------------------------------------------->

export default defineNuxtConfig({

    telemetry: false, // F Telemetry

    devtools: {
        enabled: true,
    },
})
//<--------@/nuxt.config.ts---------------------------------------------------->

Project Architecture

Root

Project root contains config files, plus the public/, content/, and server/ directories.

Source Directory

Used app as source directory, instead of src, in anticipation of new structure to be introduced in Nuxt 4.

nuxt.config.ts:

srcDir: 'app/',

Moved app.vue and app.config.ts from root to source directory.

Added /components/splash/ for landing page components.

Added /components/ship/ for project-wide components

Tailwind

Color Scales

Created custom color scales from original site's primary and secondary colors (See Palette).

Tailwind Config File

Created tailwind.config.ts and added palette colors:

//-------@/tailwind.config.ts-------------------------------------------------->
import type { Config } from 'tailwindcss'
import defaultTheme from 'tailwindcss/defaultTheme'

export default <Partial<Config>>{
    theme: {
        extend: {
            colors: {
                'primary': '#165D8F', /* venice-blue-500 */
                'venice-blue': {
                    '50': '#f2f8fd',
                    '100': '#e4f0fa',
                    '200': '#c2e0f5',
                    '300': '#8cc8ed',
                    '400': '#4fabe1',
                    '500': '#2891cf',
                    '600': '#1a73af',
                    '700': '#165d8f',
                    '800': '#164e76',
                    '900': '#184362',
                    '950': '#102a41',
                },
                'secondary': '38AF34', /* apple-400 */
                'apple': {
                    '50': '#f3fbf2',
                    '100': '#e2f8e0',
                    '200': '#c4f0c2',
                    '300': '#95e392',
                    '400': '#5fcd5b',
                    '500': '#38af34',
                    '600': '#2a9326',
                    '700': '#237421',
                    '800': '#205c1f',
                    '900': '#1b4c1b',
                    '950': '#0a290b',
                },
            } // colors
        } // extend
    } // theme
} 
//-------@/tailwind.config.ts-------------------------------------------------->

Logos

Copied original favicon.ico and logo.svg to /public

UI Module

Configure nuxt.config.ts to expose UI components globally:

  ui: {
    global: true
  },

Site Scaffolding

Project-Wide Layout

Create placeholder components for header and footer:

Header:

<!--------@/app/components/ship/Bow.vue---------------------------------------->
<template><div>
    <p>Bow</p>
</div></template>
<!--------@/app/components/ship/Bow.vue---------------------------------------->

Footer:

<!--------@/app/components/ship/Transom.vue------------------------------------>
<template><div>
    <p>Transom</p>
</div></template>
<!--------@/app/components/ship/Transom.vue------------------------------------>

Set project-wide scaffolding in app.vue:

<!--------@/app.vue------------------------------------------------------------>
<template><div>

    <!-- A11y -->
    <NuxtRouteAnnouncer /><!-- Assistive Technologies --> 
    
    <UCard>

        <!-- Bow -->
        <template #header>
            <ShipBow />
        </template>

        <!-- Midships -->
        <NuxtPage />

        <!-- Transom -->
        <template #footer>
            <ShipTransom />
        </template>

    </UCard>

</div></template>
<!--------@/app.vue------------------------------------------------------------>

Nuxt Route Announcer informs assistive technologies about page title changes, for users relying on screen readers.

Landing Page

Created landing page component placeholders (Hero, Answer, etc.) like:

<!--------@/app/components/splash/Hero.vue------------------------------------->
<template><div>
    <p>Hero</p>
</div></template>
<!--------@/app/components/splash/Hero.vue------------------------------------->

Created ship-wide page signature @/components/ship/PageSignature.vue:

<!--------@/app/components/ship/PageSignature.vue------------------------------>
<template><div>
    <p class="py-8 text-center text-2xl weight-bold text-primary">
        Together we can find a better way!
    </p>
</div></template>
<!--------@/app/components/ship/PageSignature.vue------------------------------>

Created landing page scaffolding @/pages/index.vue:

<!--------@/pages/index.vue---------------------------------------------------->
<template><div>
      <SplashHero />
      <SplashAnswer />
      <SplashVideo />
      <SplashOnlyLatest />
      <SplashJoin />
      <SplashTestimonials />
      <ShipPageSignature />
</div></template>

<script setup lang='ts'>
    definePageMeta({ 
        title: 'Save the Grove Again', 
    })
</script>
<!--------@/pages/index.vue---------------------------------------------------->

Backup Site and Push Mods

Pushed changes to GitHub. Backup Name: 0001refactor-V0.1-skeleton

Deploy

Deployed to Vercel at: [refactor.savethegroveagain.com)(https://refactor.savethegroveagain.com)