Added about page

2026-01-21 06:34:30 +01:00 · 2024-12-31 15:05:29 -05:00
parent 7195f0d1f2
commit e19798aa22
11 changed files with 2287 additions and 91 deletions
--- a/41
+++ b/41
@@ -1,5 +1,14 @@
 #!/bin/bash

+_warn() {
+  echo -e -n "\033[1;33mWarning:\033[0m "
+  echo "${1}"
+  shift
+  for arg in "$@"; do
+    echo "         ${arg}"
+  done
+}
+
 bump_version() {
  echo "Which version part would you like to bump? ([M]ajor/[m]inor/[p]atch)"
  read -r version_part
@@ -26,26 +35,50 @@ bump_version() {
 }

 commit() {
-  # Check if package.json is staged
-  if git diff --cached --name-only | grep -q "package.json"; then
+  # First check if versions match between package.json and CHANGELOG.md
+  if ! check_versions; then
+    _warn "Version mismatch between package.json and CHANGELOG.md" "Please update the changelog or package.json before committing"
+    return 1
+  fi
+
+  # Check if package.json version has changed in staged changes
+  if git diff --cached package.json | grep -q '"version":'; then
    # Get the new version from package.json
    new_version=$(node -p "require('./package.json').version")

-    echo "package.json has been modified. Would you like to tag this release as v$new_version? (y/n)"
+    echo "Version has been changed. Would you like to tag this release as v$new_version? (y/n)"
    read -r response

    if [[ "$response" =~ ^[Yy]$ ]]; then
      git commit
      git tag -a "v$new_version" -m "Release version $new_version"
      echo "Created tag v$new_version"
-    else
+    elif [[ "$response" =~ ^[Nn]$ ]]; then
      git commit
+    else
+      _warn "Unrecognized reply: $response"
+      return 1
    fi
  else
    git commit
  fi
 }

+check_versions() {
+  # Get version from package.json
+  pkg_version=$(node -p "require('./package.json').version")
+
+  # Get latest version from CHANGELOG.md (first version entry)
+  changelog_version=$(grep -m 1 "^## Version" CHANGELOG.md | sed 's/^## Version //')
+
+  # Compare versions
+  if [ "$pkg_version" = "$changelog_version" ]; then
+    return 0
+  else
+    return 1
+  fi
+}
+
 docker_push() {
  local version=$(node -p "require('./package.json').version")
  docker tag habittrove dohsimpson/habittrove:latest
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,16 @@
 # Changelog

+## Version 0.1.2
+
+### Added
+
+- About modal
+  - display changelog and version info
+
+### Changed
+
+- show number of redeemable wishlist items on dashboard
+
 ## Version 0.1.1

 ### Added
--- a/app/actions/data.ts
+++ b/app/actions/data.ts
@@ -2,11 +2,11 @@

 import fs from 'fs/promises'
 import path from 'path'
-import { 
-  HabitsData, 
-  CoinsData, 
-  CoinTransaction, 
-  TransactionType, 
+import {
+  HabitsData,
+  CoinsData,
+  CoinTransaction,
+  TransactionType,
  WishlistItemType,
  WishlistData,
  Settings,
@@ -163,3 +163,13 @@ export async function removeCoins(
  await saveCoinsData(newData)
  return newData
 }
+
+export async function getChangelog(): Promise<string> {
+  try {
+    const changelogPath = path.join(process.cwd(), 'CHANGELOG.md')
+    return await fs.readFile(changelogPath, 'utf8')
+  } catch (error) {
+    console.error('Error loading changelog:', error)
+    return '# Changelog\n\nNo changelog available.'
+  }
+}
--- a/components/AboutModal.tsx
+++ b/components/AboutModal.tsx
@@ -0,0 +1,82 @@
+'use client'
+
+import { Dialog, DialogContent, DialogHeader } from "./ui/dialog"
+import { Button } from "./ui/button"
+import { Star, History } from "lucide-react"
+import packageJson from '../package.json'
+import { DialogTitle } from "@radix-ui/react-dialog"
+import { Logo } from "./Logo"
+import ChangelogModal from "./ChangelogModal"
+import { useState } from "react"
+
+interface AboutModalProps {
+  isOpen: boolean
+  onClose: () => void
+}
+
+export default function AboutModal({ isOpen, onClose }: AboutModalProps) {
+  const version = packageJson.version
+  const [changelogOpen, setChangelogOpen] = useState(false)
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="max-w-sm">
+        <DialogHeader>
+          <DialogTitle aria-label="about"></DialogTitle>
+        </DialogHeader>
+        <div className="space-y-6 text-center py-4">
+          <div>
+            <div className="flex justify-center mb-1">
+              <Logo />
+            </div>
+            <div className="flex items-center justify-center gap-2">
+              <p className="text-sm text-muted-foreground">v{version}</p>
+            </div>
+            <div className="py-2">
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-6 px-2"
+                onClick={() => setChangelogOpen(true)}
+              >
+                <History className="w-3 h-3 mr-1" />
+                Changelog
+              </Button>
+            </div>
+          </div>
+
+          <div className="space-y-4">
+            <div className="text-sm">
+              Created with ❤️ by{' '}
+              <a
+                href="https://github.com/dohsimpson"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="font-medium hover:underline"
+              >
+                @dohsimpson
+              </a>
+            </div>
+
+            <div className="flex justify-center">
+              <a
+                href="https://github.com/dohsimpson/habittrove"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <Button variant="outline" size="sm">
+                  <Star className="w-4 h-4 mr-2" />
+                  Star on GitHub
+                </Button>
+              </a>
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+      <ChangelogModal
+        isOpen={changelogOpen}
+        onClose={() => setChangelogOpen(false)}
+      />
+    </Dialog>
+  )
+}
--- a/components/ChangelogModal.tsx
+++ b/components/ChangelogModal.tsx
@@ -0,0 +1,39 @@
+'use client'
+
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "./ui/dialog"
+import ReactMarkdown from 'react-markdown'
+import { useEffect, useState } from "react"
+import { getChangelog } from "@/app/actions/data"
+
+interface ChangelogModalProps {
+  isOpen: boolean
+  onClose: () => void
+}
+
+export default function ChangelogModal({ isOpen, onClose }: ChangelogModalProps) {
+  const [changelog, setChangelog] = useState<string>('')
+
+  useEffect(() => {
+    if (isOpen) {
+      const loadChangelog = async () => {
+        const content = await getChangelog()
+        console.log(content)
+        setChangelog(content)
+      }
+      loadChangelog()
+    }
+  }, [isOpen])
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>Changelog</DialogTitle>
+        </DialogHeader>
+        <div className="prose dark:prose-invert prose-sm max-w-none">
+          <ReactMarkdown>{changelog}</ReactMarkdown>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
--- a/components/DailyOverview.tsx
+++ b/components/DailyOverview.tsx
@@ -126,9 +126,14 @@ export default function DailyOverview({
          </div>

          <div className="space-y-2">
+            <div className="flex items-center justify-between mb-2">
+              <h3 className="font-semibold">Wishlist Goals</h3>
+              <Badge variant="secondary">
+                {wishlistItems.filter(item => item.coinCost <= coinBalance).length}/{wishlistItems.length} Redeemable
+              </Badge>
+            </div>
            {achievableWishlistItems.length > 0 && (
              <div>
-                <h3 className="font-semibold mb-2">Wishlist Goals</h3>
                <div className={`space-y-3 transition-all duration-300 ease-in-out ${expandedWishlist ? 'max-h-[500px]' : 'max-h-[200px]'} overflow-hidden`}>
                  {achievableWishlistItems
                    .slice(0, expandedWishlist ? undefined : 1)
--- a/components/Navigation.tsx
+++ b/components/Navigation.tsx
@@ -1,12 +1,17 @@
+'use client'
+
 import Link from 'next/link'
-import { Home, Calendar, List, Gift, Coins, Settings } from 'lucide-react'
+import { Home, Calendar, List, Gift, Coins, Settings, Info } from 'lucide-react'
+import { useState } from 'react'
+import AboutModal from './AboutModal'

 const navItems = [
-  { icon: Home, label: 'Dashboard', href: '/' },
-  { icon: List, label: 'Habits', href: '/habits' },
-  { icon: Calendar, label: 'Calendar', href: '/calendar' },
-  { icon: Gift, label: 'Wishlist', href: '/wishlist' },
-  { icon: Coins, label: 'Coins', href: '/coins' },
+  { icon: Home, label: 'Dashboard', href: '/', position: 'main' },
+  { icon: List, label: 'Habits', href: '/habits', position: 'main' },
+  { icon: Calendar, label: 'Calendar', href: '/calendar', position: 'main' },
+  { icon: Gift, label: 'Wishlist', href: '/wishlist', position: 'main' },
+  { icon: Coins, label: 'Coins', href: '/coins', position: 'main' },
+  { icon: Info, label: 'About', href: '#', position: 'bottom', onClick: (setShow: (show: boolean) => void) => setShow(true) },
 ]

 interface NavigationProps {
@@ -15,22 +20,38 @@ interface NavigationProps {
 }

 export default function Navigation({ className, isMobile = false }: NavigationProps) {
+  const [showAbout, setShowAbout] = useState(false)
  if (isMobile) {
    return (
-      <nav className="lg:hidden fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 shadow-lg">
-        <div className="flex justify-around">
-          {navItems.map((item) => (
-            <Link
-              key={item.label}
-              href={item.href}
-              className="flex flex-col items-center py-2 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400"
-            >
-              <item.icon className="h-6 w-6" />
-              <span className="text-xs mt-1">{item.label}</span>
-            </Link>
-          ))}
-        </div>
-      </nav>
+      <>
+        <div className="pb-16" /> {/* Add padding at the bottom to prevent content from being hidden */}
+        <nav className="lg:hidden fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 shadow-lg">
+          <div className="flex justify-around">
+            {[...navItems.filter(item => item.position === 'main'), ...navItems.filter(item => item.position === 'bottom')].map((item) => 
+              item.onClick ? (
+                <button
+                  key={item.label}
+                  onClick={() => item.onClick?.(setShowAbout)}
+                  className="flex flex-col items-center py-2 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400"
+                >
+                  <item.icon className="h-6 w-6" />
+                  <span className="text-xs mt-1">{item.label}</span>
+                </button>
+              ) : (
+                <Link
+                  key={item.label}
+                  href={item.href}
+                  className="flex flex-col items-center py-2 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400"
+                >
+                  <item.icon className="h-6 w-6" />
+                  <span className="text-xs mt-1">{item.label}</span>
+                </Link>
+              )
+            )}
+          </div>
+        </nav>
+        <AboutModal isOpen={showAbout} onClose={() => setShowAbout(false)} />
+      </>
    )
  }

@@ -40,7 +61,7 @@ export default function Navigation({ className, isMobile = false }: NavigationPr
        <div className="flex flex-col h-0 flex-1 bg-gray-800">
          <div className="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
            <nav className="mt-5 flex-1 px-2 space-y-1">
-              {navItems.map((item) => (
+              {navItems.filter(item => item.position === 'main').map((item) => (
                <Link
                  key={item.label}
                  href={item.href}
@@ -51,9 +72,19 @@ export default function Navigation({ className, isMobile = false }: NavigationPr
                </Link>
              ))}
            </nav>
+            <div className="px-2 pb-2">
+              <button
+                onClick={() => setShowAbout(true)}
+                className="w-full group flex items-center px-2 py-2 text-sm leading-6 font-medium rounded-md text-gray-300 hover:text-white hover:bg-gray-700"
+              >
+                <Info className="mr-4 flex-shrink-0 h-6 w-6 text-gray-400" aria-hidden="true" />
+                About
+              </button>
+            </div>
          </div>
        </div>
      </div>
+      <AboutModal isOpen={showAbout} onClose={() => setShowAbout(false)} />
    </div>
  )
 }
--- a/next.config.ts
+++ b/next.config.ts
@@ -3,6 +3,13 @@ import type { NextConfig } from "next";
 const nextConfig: NextConfig = {
  /* config options here */
  output: 'standalone',
+  webpack: (config) => {
+    config.module.rules.push({
+      test: /\.md$/,
+      use: 'raw-loader'
+    })
+    return config
+  }
 };

 export default nextConfig;
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "habittrove",
-  "version": "0.1.1",
+  "version": "0.1.2",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
@@ -31,12 +31,14 @@
    "react-confetti": "^6.2.2",
    "react-day-picker": "^8.10.1",
    "react-dom": "^19.0.0",
+    "react-markdown": "^9.0.1",
    "recharts": "^2.15.0",
    "tailwind-merge": "^2.6.0",
    "tailwindcss-animate": "^1.0.7"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3",
+    "@tailwindcss/typography": "^0.5.15",
    "@types/node": "^20.17.10",
    "@types/react": "^19",
    "@types/react-dom": "^19",
@@ -44,6 +46,7 @@
    "eslint-config-next": "15.1.3",
    "eslint-plugin-unused-imports": "^4.1.4",
    "postcss": "^8",
+    "raw-loader": "^4.0.2",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,8 +1,8 @@
 import type { Config } from "tailwindcss";

 export default {
-    darkMode: ["class"],
-    content: [
+  darkMode: ["class"],
+  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
@@ -20,54 +20,57 @@ export default {
      animation: {
        celebrate: 'celebrate 1s ease-in-out'
      },
-  		colors: {
-  			background: 'hsl(var(--background))',
-  			foreground: 'hsl(var(--foreground))',
-  			card: {
-  				DEFAULT: 'hsl(var(--card))',
-  				foreground: 'hsl(var(--card-foreground))'
-  			},
-  			popover: {
-  				DEFAULT: 'hsl(var(--popover))',
-  				foreground: 'hsl(var(--popover-foreground))'
-  			},
-  			primary: {
-  				DEFAULT: 'hsl(var(--primary))',
-  				foreground: 'hsl(var(--primary-foreground))'
-  			},
-  			secondary: {
-  				DEFAULT: 'hsl(var(--secondary))',
-  				foreground: 'hsl(var(--secondary-foreground))'
-  			},
-  			muted: {
-  				DEFAULT: 'hsl(var(--muted))',
-  				foreground: 'hsl(var(--muted-foreground))'
-  			},
-  			accent: {
-  				DEFAULT: 'hsl(var(--accent))',
-  				foreground: 'hsl(var(--accent-foreground))'
-  			},
-  			destructive: {
-  				DEFAULT: 'hsl(var(--destructive))',
-  				foreground: 'hsl(var(--destructive-foreground))'
-  			},
-  			border: 'hsl(var(--border))',
-  			input: 'hsl(var(--input))',
-  			ring: 'hsl(var(--ring))',
-  			chart: {
-  				'1': 'hsl(var(--chart-1))',
-  				'2': 'hsl(var(--chart-2))',
-  				'3': 'hsl(var(--chart-3))',
-  				'4': 'hsl(var(--chart-4))',
-  				'5': 'hsl(var(--chart-5))'
-  			}
-  		},
-  		borderRadius: {
-  			lg: 'var(--radius)',
-  			md: 'calc(var(--radius) - 2px)',
-  			sm: 'calc(var(--radius) - 4px)'
-  		}
-  	}
+      colors: {
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))'
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))'
+        },
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))'
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))'
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))'
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))'
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))'
+        },
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        chart: {
+          '1': 'hsl(var(--chart-1))',
+          '2': 'hsl(var(--chart-2))',
+          '3': 'hsl(var(--chart-3))',
+          '4': 'hsl(var(--chart-4))',
+          '5': 'hsl(var(--chart-5))'
+        }
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)'
+      }
+    }
  },
-  plugins: [require("tailwindcss-animate")],
+  plugins: [
+    require("tailwindcss-animate"),
+    require('@tailwindcss/typography'),
+  ],
 } satisfies Config;