Update CLI experience (#37)

* Refactor create-freedom-stack script to use cleye for CLI arguments

- Integrated cleye for improved command-line argument parsing.
- Updated project name retrieval to enhance usability and provide help documentation.
- Modified success message formatting for clearer instructions on project setup.

* Converted Turso CLI setup script to use Cleye

* Refactor project setup and dependency management

- Updated project name from "freedom-stack" to "create-freedom-stack" and adjusted version to 1.0.2 in package-lock.json and package.json.
- Integrated `ora` for improved user feedback during dependency installation in create-freedom-stack script.
- Enhanced the setup process by adding a spinner for better visibility of installation progress.
- Cleaned up the setup-turso script by removing redundant readline interface initialization.
- Added new dependencies: `cleye` for command-line argument parsing and `ora` for spinners.

* fixed ts build errors

* bumped package version

* Update dependencies in package.json and package-lock.json

- Bump versions for several packages including @alpinejs, astro, better-auth, better-sqlite3, isomorphic-dompurify, marked, ora, prettier, and others.
- Remove outdated dependencies and update to the latest versions for improved performance and security.
- Clean up package structure by removing unnecessary entries.

These changes ensure the project is using the latest stable versions of its dependencies, enhancing overall functionality and security.

* Add 'required' attribute to form fields in post creation and editing pages

* Add GitHubButton component and update index.astro to include it

- Introduced a new GitHubButton component that fetches and displays the star count from the GitHub API.
- Updated index.astro to replace the previous GitHub link with the new GitHubButton component, enhancing user interaction.
- Adjusted the Netlify link in the Navbar for better deployment guidance.

* Update FAQ in index.astro to include Astro DB's Getting Started Guide

- Revised the answer for the question about learning the libSQL database layer to recommend starting with Astro DB's Getting Started Guide before the High Performance SQLite course.
- This change enhances the guidance provided to users seeking to learn about the database layer.

Author: cameronapak

Diff for: package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "create-freedom-stack",
   "type": "module",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Create a new Freedom Stack project - A modern, type-safe web development stack using Astro, TypeScript, HTMX, Alpine.js, and more",
   "author": "Cameron Pak",
   "license": "MIT",
@@ -51,36 +51,38 @@
     "host:login": "npx netlify login"
   },
   "dependencies": {
-    "@alpinejs/collapse": "^3.14.3",
-    "@alpinejs/intersect": "^3.14.3",
-    "@alpinejs/mask": "^3.14.3",
-    "@alpinejs/persist": "^3.14.3",
+    "@alpinejs/collapse": "^3.14.4",
+    "@alpinejs/intersect": "^3.14.4",
+    "@alpinejs/mask": "^3.14.4",
+    "@alpinejs/persist": "^3.14.4",
     "@astrojs/alpinejs": "^0.4.0",
     "@astrojs/check": "^0.9.4",
     "@astrojs/db": "^0.14.3",
     "@astrojs/netlify": "^5.5.4",
     "@astrojs/tailwind": "^5.1.2",
-    "@iconify-json/lucide": "^1.2.15",
+    "@iconify-json/lucide": "^1.2.16",
     "@iconify-json/lucide-lab": "^1.2.2",
-    "alpinejs": "^3.14.3",
-    "astro": "^4.16.14",
+    "alpinejs": "^3.14.4",
+    "astro": "^4.16.16",
     "astro-iconify": "^1.2.0",
     "astro-seo": "^0.8.4",
-    "better-auth": "^1.0.0",
-    "better-sqlite3": "^11.5.0",
+    "better-auth": "^1.0.6",
+    "better-sqlite3": "^11.6.0",
+    "cleye": "^1.3.2",
     "drizzle-orm": "^0.36.4",
     "htmx.org": "2.0.1",
-    "isomorphic-dompurify": "^2.16.0",
-    "marked": "^14.1.3",
+    "isomorphic-dompurify": "^2.17.0",
+    "marked": "^15.0.2",
+    "ora": "^8.1.1",
     "trix": "^2.1.8"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.15",
-    "@types/alpinejs": "^3.13.10",
+    "@types/alpinejs": "^3.13.11",
     "@types/better-sqlite3": "^7.6.12",
     "daisyui": "^4.12.14",
     "netlify-cli": "^17.37.2",
-    "prettier": "^3.3.3",
+    "prettier": "^3.4.1",
     "prettier-plugin-astro": "^0.14.1",
     "tailwindcss": "^3.4.15",
     "typescript": "^5.7.2"

Diff for: package.json

@@ -1,10 +1,12 @@
 #!/usr/bin/env node
 
+import { cli } from "cleye";
 import { execSync } from "child_process";
 import fs from "fs";
 import path from "path";
 import { fileURLToPath } from "url";
 import { randomUUID } from "crypto";
+import ora from "ora";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -113,29 +115,42 @@ pnpm-debug.log*
     );
   }
 
+  console.log("\n🕊️ Running create-freedom-stack...\n\n");
+
   // Install dependencies
-  console.log("Installing dependencies...");
-  execSync("npm install", { stdio: "inherit" });
+  const spinner = ora("Installing dependencies...").start();
+  try {
+    execSync("npm install", { stdio: ["pipe", "pipe", "pipe"] });
+    spinner.succeed("Dependencies installed successfully!");
+  } catch (error) {
+    spinner.fail("Failed to install dependencies");
+    console.error(error.message);
+    process.exit(1);
+  }
 
   console.log(`
 🚀 Freedom Stack project created successfully!
 
 To get started:
-  cd ${projectName}
-  npm run db:setup      # Set up your Turso database
-  npm run dev          # Start the development server
+  1. cd ${projectName}
+  2. npm run db:setup     # Set up your Turso database
+  3. npm run dev          # Start the development server
 
 Visit http://localhost:4321 to see your app.
   `);
 }
 
-// Get project name from command line arguments
-const projectName = process.argv[2];
-
-if (!projectName) {
-  console.error("Please specify a project name:");
-  console.error("  npx create-freedom-stack my-app");
-  process.exit(1);
-}
+const argv = cli({
+  name: "create-freedom-stack",
+  version: "0.1.0",
+  description: "Create a new Freedom Stack project with best practices and modern tooling",
+  flags: {},
+  parameters: ["<projectName>"],
+  help: {
+    description: "Create a new Freedom Stack project",
+    examples: ["npx create-freedom-stack my-app"]
+  }
+});
 
+const { projectName } = argv._;
 createProject(projectName);

Diff for: scripts/create-freedom-stack.js

@@ -1,14 +1,11 @@
 #!/usr/bin/env node
 
+import { cli } from "cleye";
 import { execSync } from "child_process";
 import fs from "fs";
 import path from "path";
-import { fileURLToPath } from "url";
 import readline from "readline";
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
 const rl = readline.createInterface({
   input: process.stdin,
   output: process.stdout
@@ -27,7 +24,7 @@ function checkTursoAuth() {
   }
 }
 
-async function setupTurso() {
+async function setupTurso(argv) {
   console.log("🔧 Setting up Turso database...");
 
   try {
@@ -49,13 +46,14 @@ async function setupTurso() {
       console.log("\nRun these commands in order:");
       console.log("1. turso auth login");
       console.log("2. npm run db:setup");
-      rl.close();
       process.exit(1);
     }
 
-    // Get database name from user
+    // Use database name from CLI args or prompt
     const dbName =
-      (await question("\nEnter a name for your database (default: freedom-stack-db): ")) || "freedom-stack-db";
+      argv.flags.name ||
+      (await question("\nEnter a name for your database (default: freedom-stack-db): ")) ||
+      "freedom-stack-db";
 
     // Create database
     console.log(`\n📚 Creating database: ${dbName}...`);
@@ -67,7 +65,6 @@ async function setupTurso() {
         console.log("\nRun these commands in order:");
         console.log("1. turso auth login");
         console.log("2. npm run db:setup");
-        rl.close();
         process.exit(1);
       }
       throw error;
@@ -125,4 +122,29 @@ npm run dev                 # To start your development server
   }
 }
 
-setupTurso();
+cli(
+  {
+    name: "setup-turso",
+    version: "0.1.0",
+    description: "Set up a Turso database for your Freedom Stack project",
+    flags: {
+      name: {
+        type: String,
+        description: "Name of the database to create",
+        alias: "n"
+      },
+      force: {
+        type: Boolean,
+        description: "Override existing database if it exists",
+        alias: "f",
+        default: false
+      }
+    },
+    help: {
+      examples: ["npm run db:setup", "npm run db:setup --name my-database", "npm run db:setup -n my-database --force"]
+    }
+  },
+  async (argv) => {
+    await setupTurso(argv);
+  }
+);

Diff for: scripts/setup-turso.js

@@ -31,7 +31,7 @@ export function setAuthCookiesFromResponse(cookiesArray: string[], cookies: Astr
 
 async function handleAuthResponse(
   apiCall: () => Promise<Response>,
-  context: ActionAPIContext,
+  _context: ActionAPIContext,
   errorCode: ActionErrorCode
 ) {
   try {

Diff for: src/actions/auth.ts

@@ -15,6 +15,5 @@ const { content, id = "content", name = "content", alpineRefName = "contentInput
 </div>
 
 <script>
-  // @ts-ignore - no types available
-  import Trix from "trix";
+  import "trix";
 </script>

Diff for: src/components/TrixEditor.astro

@@ -0,0 +1,23 @@
+---
+import { Icon } from "astro-iconify";
+
+// https://docs.astro.build/en/basics/astro-pages/#page-partials
+const repo = await fetch("https://api.github.com/repos/cameronapak/freedom-stack", {
+  headers: {
+    // Cache for 4 hours
+    "Cache-Control": "public, max-age=14400",
+    // Accept JSON response
+    Accept: "application/json"
+  }
+});
+const repoData = await repo.json();
+const stars = repoData.stargazers_count;
+---
+
+<a id="cta-secondary" href="https://github.com/cameronapak/freedom-stack" class="max-sm:w-full btn btn-outline btn-sm">
+  GitHub
+  <div class="badge flex items-center gap-1">
+    <Icon pack="lucide" name="star" class="w-4 h-4" />
+    <span>{stars}</span>
+  </div>
+</a>

Diff for: src/components/server/GithubButton.astro

@@ -5,7 +5,6 @@ export const partial = true;
 
 <iframe
   src="https://www.youtube.com/embed/dQw4w9WgXcQ"
-  frameborder="0"
   class="aspect-video max-w-sm w-full rounded-lg shadow-lg"
   allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
   allowfullscreen

Diff for: src/pages/api/htmx-partials/rick-roll.astro

@@ -1,5 +1,4 @@
 ---
-import { actions } from "astro:actions";
 import { Posts, db, desc, eq } from "astro:db";
 import Icon from "astro-iconify";
 import Layout from "@/layouts/Layout.astro";

Diff for: src/pages/dashboard/index.astro

@@ -22,7 +22,7 @@ let post;
 // Fetch the post
 post = await db.select().from(Posts).where(eq(Posts.slug, slug)).get();
 
-const result = await Astro.getActionResult(actions.posts.update);
+const result = Astro.getActionResult(actions.posts.update);
 if (result?.data?.success) {
   post = result.data.post;
   return Astro.redirect(`/posts/${post.slug}`);
@@ -64,6 +64,7 @@ if (!post) {
                 class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                 id="title"
                 name="title"
+                required
                 value={post.title || ""}
                 placeholder="Enter the post title"
               />
@@ -81,6 +82,7 @@ if (!post) {
                 class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                 id="pubDate"
                 name="pubDate"
+                required
                 placeholder="Select the publication date"
                 type="date"
               />
@@ -96,7 +98,8 @@ if (!post) {
               id="description"
               name="description"
               placeholder="Enter a brief description of the post"
-              rows="3">{post.description || ""}</textarea
+              rows="3"
+              required>{post.description || ""}</textarea
             >
           </div>
           <div class="grid grid-cols-2 gap-6">
@@ -124,6 +127,7 @@ if (!post) {
                 type="text"
                 class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                 id="slug"
+                required
                 name="slug"
                 placeholder="blog-post-slug"
                 pattern="[a-z0-9\\-]+"

Diff for: src/pages/dashboard/posts/edit/[slug].astro

@@ -48,6 +48,7 @@ if (result?.data?.success) {
                 class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                 id="title"
                 name="title"
+                required
                 placeholder="Enter the post title"
               />
             </div>
@@ -78,6 +79,7 @@ if (result?.data?.success) {
               class="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
               id="description"
               name="description"
+              required
               placeholder="Enter a brief description of the post"
               rows="3"></textarea>
           </div>
@@ -107,6 +109,7 @@ if (result?.data?.success) {
                 class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                 id="slug"
                 name="slug"
+                required
                 placeholder="blog-post-slug"
                 pattern="[a-z0-9\\-]+"
                 x-data="{ slug: '' }"