@adaptive-sm/astro-ui 0.1.0

package/lib/generate_ai_rules/generate_agent_rules.bash

@@ -0,0 +1,9 @@
+#!/usr/bin/env bash
+
+set -x # Print all executed commands to the terminal
+set -e # Exit immediately if a command exits with a non-zero status
+
+scriptDir="$(cd "$(dirname "${BASH_SOURCE[0]}")" >/dev/null 2>&1 && pwd)"
+bash "$scriptDir"/generate_agent_rules_1_lib.bash
+bash "$scriptDir"/generate_agent_rules_2_copy.bash
+bash "$scriptDir"/generate_agent_rules_3_combine.bash

package/lib/generate_ai_rules/generate_agent_rules_1_lib.bash

@@ -0,0 +1,33 @@
+#!/bin/bash
+set -e # Exit immediately if a command exits with a non-zero status
+set -x # Print all executed commands to the terminal
+
+scriptDir="$(cd "$(dirname "${BASH_SOURCE[0]}")" >/dev/null 2>&1 && pwd)"
+# libDir="lib"
+libDir="$scriptDir/../"
+localRulesDir=".roo/rules-code"
+localMdFile=$(readlink -f $localRulesDir/astro_lib.md)
+
+mkdir -p "$localRulesDir"
+
+if [ ! -d "$libDir" ]; then
+    echo "Error: Directory $libDir does not exist." >&2
+    exit 1
+fi
+
+cat > "$localMdFile" << EOF
+# Available Astro UI Components and utility functions
+
+These components from @adaptive-sm/astro-ui can be imported using the \`~/\` alias.
+Generated at: $(date +"%Y-%m-%d %H:%M")
+
+EOF
+
+foundFiles=$(find "$libDir" \( -name "*.astro" -o -name "*.ts" -o -name "*.tsx" \) -printf "%P\n")
+if [ -z "$foundFiles" ]; then
+    echo "Error: No .astro, .ts, or .tsx files found in $libDir" >&2
+    rm -f "$localMdFile"
+    exit 1
+fi
+echo "$foundFiles" | sed 's#^#- ~/#' >> "$localMdFile"
+# echo "Found $(echo "$foundFiles" | wc -l) files."

package/lib/generate_ai_rules/generate_agent_rules_2_copy.bash

@@ -0,0 +1,14 @@
+#!/bin/bash
+set -e # Exit immediately if a command exits with a non-zero status
+set -x # Print all executed commands to the terminal
+
+srcDir="node_modules/@adaptive-sm/astro-ui/.roo"
+# srcDir="/home/david/Coding/adaptive-astro-ui/.roo/rules-code"
+dstDir=".roo"
+
+# create rules dir if missing
+mkdir -p "$dstDir"
+# copy files
+rsync -av "$srcDir/rules-code/" "$dstDir/rules-code/"
+rsync -av "$srcDir/rules-ask/" "$dstDir/rules-ask/"
+rsync -av "$srcDir/mcp.json" "$dstDir/mcp.json"

package/lib/generate_ai_rules/generate_agent_rules_3_combine.bash

@@ -0,0 +1,31 @@
+#!/usr/bin/env bash
+set -x # Print all executed commands to the terminal
+set -e # Exit immediately if a command exits with a non-zero status
+
+shopt -s nullglob          # glob returns nothing if no matches
+
+srcDir="./.roo/rules-code"
+
+# combine md files into AGENTS.md
+outfile="AGENTS.md"
+sep=$'\n\n---\n\n'
+
+# Start with a fresh output file
+: > "$outfile"
+
+first=true
+for md in $srcDir/*.md; do
+    if [[ -f "$md" ]]; then
+        # Only prepend the separator *between* files, not before the first one
+        if [[ "$first" == true ]]; then
+            first=false
+        else
+            printf %s "$sep" >> "$outfile"
+        fi
+        cat "$md" >> "$outfile"
+    fi
+done
+
+# Count and print the total number of lines in the resulting file
+total_lines=$(wc -l < "$outfile")
+echo "$outfile: $total_lines lines"

package/lib/generate_demo_list/DemoList.astro

@@ -0,0 +1,31 @@
+---
+import { classesTextLink } from "~/link/classesTextLink"
+import { classArr } from "~/utils/ui/classArr"
+import { type DemoListType } from "./DemoListType"
+
+interface Props {
+  demos: DemoListType
+  class?: string
+}
+const props = Astro.props
+
+// Extract categories and their demo pages
+const categories = Object.entries(props.demos)
+---
+
+<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+  {
+    categories.map(([category, pages]) => (
+      <section class="bg-white dark:bg-zinc-700 rounded-lg shadow-md p-4 border border-gray-200 dark:border-zinc-600">
+        <h2 class="text-xl font-bold mb-2 capitalize">{category.replace(/_/g, " ")}</h2>
+        <ul class="list-disc pl-4 space-y-1">
+          {pages.map((page) => (
+            <li class={classArr(classesTextLink)}>
+              <a href={`/demos/${category}/${page}`}>{page.replace(/_/g, " ").replaceAll("demo ", "")}</a>
+            </li>
+          ))}
+        </ul>
+      </section>
+    ))
+  }
+</div>

package/lib/generate_demo_list/DemoListType.ts

@@ -0,0 +1 @@
+export type DemoListType = Record<string, string[]>

package/lib/generate_demo_list/generateDemoList.ts

@@ -0,0 +1,55 @@
+import { readdir, writeFile } from "node:fs/promises"
+import { join } from "node:path"
+import { runCmdAsync } from "~/utils/bun/runCmdAsync"
+import type { DemoListType } from "./DemoListType"
+
+export async function generateDemoList(demosPath: string, outputPath: string) {
+  const categories = await readdir(demosPath, { withFileTypes: true })
+
+  const demoPageList: DemoListType = {}
+
+  for (const category of categories) {
+    if (category.isDirectory()) {
+      const categoryPath = join(demosPath, category.name)
+      const demoFiles = await readdir(categoryPath)
+      const files = demoFiles.filter(isDemoFile).map((file) => file.replace(/\.astro$/, ""))
+      if (files.length > 0) {
+        demoPageList[category.name] = files
+      }
+    }
+  }
+  sortDemoPageList(demoPageList)
+
+  const outputContent = `import type { DemoListType } from "~/generate_demo_list/DemoListType"
+
+export const demoList = ${JSON.stringify(demoPageList, null, 2)} satisfies DemoListType;
+`
+
+  await writeFile(outputPath, outputContent, "utf-8")
+  await formatGeneratedCodeFile(outputPath)
+}
+
+function isDemoFile(file: string) {
+  if (!file.endsWith(".astro")) return false
+  if (!file.startsWith("demo")) return false
+  return true
+}
+
+function sortDemoPageList(demoPageList: DemoListType) {
+  for (const list of Object.values(demoPageList)) {
+    sortStringsByLengthThenByCharactersInPlace(list)
+  }
+}
+
+function sortStringsByLengthThenByCharactersInPlace(arr: string[]): string[] {
+  return arr.sort((a, b) => a.length - b.length || a.localeCompare(b))
+}
+
+function sortStringsByLengthThenByCharacters(arr: string[]): string[] {
+  return sortStringsByLengthThenByCharactersInPlace([...arr])
+}
+
+async function formatGeneratedCodeFile(outputPath: string) {
+  const cmd = `bun run biome check --write ${outputPath}`.split(" ")
+  runCmdAsync(cmd)
+}

package/lib/generate_image_list/generateImageList.ts

@@ -0,0 +1,101 @@
+import imageSize from "image-size"
+import { promises as fs } from "node:fs"
+import path from "node:path"
+import type { ImageType } from "~/img/ImageType"
+import { runCmdAsync } from "~/utils/bun/runCmdAsync"
+
+const IMAGE_EXTENSIONS = new Set([".jpg", ".jpeg", ".png", ".gif", ".webp", ".avif", ".tiff", ".svg"])
+
+export async function generateImageList(
+  imageDirectory: string,
+  existingImages: Record<string, ImageType>,
+  outputPath: string,
+) {
+  // console.log("found", existingImages.length, "existing images")
+  const imageMap = await processImageFiles(imageDirectory, existingImages)
+  const sorted = sortImageMap(imageMap)
+  await writeGeneratedImagesFile(sorted, outputPath)
+  await formatGeneratedImagesCodeFile(outputPath)
+}
+
+async function writeGeneratedImagesFile(imageMap: Record<string, ImageType>, outputPath: string): Promise<void> {
+  const outputContent = `
+  import type { ImageType } from "~/img/ImageType"
+  // Auto-generated, manual changes will be lost
+export const imageList = ${JSON.stringify(imageMap, null, 2)} as const satisfies Record<string, ImageType>;
+`
+  await Bun.write(outputPath, outputContent)
+  console.log(`Generated ${Object.keys(imageMap).length} images to ${outputPath}`)
+}
+
+async function processImageFiles(
+  directory: string,
+  existingImages: Record<string, any>,
+): Promise<Record<string, ImageType>> {
+  const imageMap: Record<string, ImageType> = {}
+
+  for await (const filePath of walkDirectory(directory)) {
+    const ext = path.extname(filePath).toLowerCase()
+    if (!IMAGE_EXTENSIONS.has(ext)) {
+      console.log("ignoring " + ext, filePath)
+      continue
+    }
+
+    try {
+      const buffer = await fs.readFile(filePath)
+      const dimensions = imageSize(buffer)
+      if (!dimensions.width || !dimensions.height) continue
+
+      const relativePath = path.relative(directory, filePath)
+      const fileName = path.basename(filePath, ext)
+      let key = fileName.replace(/-/g, "_")
+      if (/^\d/.test(fileName)) {
+        key = "i" + key
+      }
+
+      const prevAlt = existingImages[key]?.alt
+      const alt = prevAlt || fileName.replace(/[-_]/g, " ")
+
+      imageMap[key] = {
+        path: relativePath,
+        width: dimensions.width,
+        height: dimensions.height,
+        alt,
+      }
+    } catch (error) {
+      console.error(`Error processing ${filePath}:`, error)
+    }
+  }
+
+  return imageMap
+}
+
+async function* walkDirectory(dir: string): AsyncGenerator<string> {
+  const entries = await fs.readdir(dir, { withFileTypes: true })
+  for (const entry of entries) {
+    const fullPath = path.join(dir, entry.name)
+    if (entry.isDirectory()) {
+      yield* walkDirectory(fullPath)
+    } else if (entry.isFile()) {
+      yield fullPath
+    }
+  }
+}
+
+function sortImageMap(m: Record<string, ImageType>): Record<string, ImageType> {
+  return Object.keys(m)
+    .sort()
+    .reduce(
+      (sorted, key) => {
+        // We know key exists in m since we're iterating its keys
+        sorted[key] = m[key]!
+        return sorted
+      },
+      {} as Record<string, ImageType>,
+    )
+}
+
+async function formatGeneratedImagesCodeFile(outputPath: string) {
+  const cmd = `bun run biome check --write ${outputPath}`.split(" ")
+  runCmdAsync(cmd)
+}

package/lib/grid/classesGridCols.ts

@@ -0,0 +1,86 @@
+import { classArr } from "~/utils/ui/classArr"
+
+export const classesGridCols2ContentFr = "grid grid-cols-[max-content_1fr]"
+export const classesGridCols3MaxMinFr = "grid grid-cols-[max-content_min-content_1fr]"
+
+/**
+ * ~600 px (37rem, ~60ch) / col
+ */
+export const classesGridCols2xl = classArr("grid grid-cols-1", "xl:grid-cols-2")
+export const classesGridCols2xl3 = classArr(classesGridCols2xl, "2xl:grid-cols-4", "3xl:grid-cols-6")
+
+/**
+ * ~400 px (25rem, ~40ch) / col
+ */
+export const classesGridCols3xl = classArr("grid grid-cols-1", "md:grid-cols-2", "xl:grid-cols-3")
+export const classesGridCols3xl3 = classArr(classesGridCols3xl, "2xl:grid-cols-6", "3xl:grid-cols-9")
+
+/**
+ * ~320 px (18rem, ~32ch) / col
+ * 4 = 4x1, 2x2
+ * xl: 1280/320 = 4
+ * lg: 1024/320 = 3.2
+ * md: 768/320 = 2.4
+ * sm: 640/320 = 2
+ * xs: 400/320 = 1.25
+ */
+export const classesGridCols4xl = classArr("grid grid-cols-1", "sm:grid-cols-2", "md:grid-cols-2", "xl:grid-cols-4")
+export const classesGridCols4xl3 = classArr(classesGridCols4xl, "2xl:grid-cols-8", "3xl:grid-cols-12")
+
+/**
+ * ~256 px (16rem, ~26ch) / col
+ * 5 = 5x1
+ * xl: 1280/256 = 5
+ * lg: 1024/256 = 4
+ * md: 768/256 = 3
+ * sm: 640/256 = 2.5
+ * xs: 400/256 = 1.56
+ */
+export const classesGridCols5xl = classArr("grid grid-cols-1", "sm:grid-cols-2", "md:grid-cols-3", "lg:grid-cols-4", "xl:grid-cols-5")
+export const classesGridCols5xl3 = classArr(classesGridCols5xl, "2xl:grid-cols-10", "3xl:grid-cols-15")
+
+/**
+ *
+ * ~200 px (13rem, ~20ch) / col
+ * 6 = 6x1, 3x2, 2x3
+ * xl: 1280/200 = 6.4
+ * lg: 1024/200 = 5.12
+ * md: 768/200 = 3.84
+ * sm: 640/200 = 3.2
+ * xs: 400/200 = 2
+ */
+export const classesGridCols6xl = classArr("grid grid-cols-2", "sm:grid-cols-3", "md:grid-cols-4", "xl:grid-cols-6")
+export const classesGridCols6xl3 = classArr(classesGridCols6xl, "2xl:grid-cols-12", "3xl:grid-cols-18")
+
+/**
+ *
+ * ~160 px (9rem, ~16ch) / col
+ * 8 = 8x1, 4x2, 2x4
+ * xl: 1280/160 = 8
+ * lg: 1024/160 = 6.4
+ * md: 768/160 = 4.8
+ * sm: 640/160 = 4
+ * xs: 400/160 = 2.5
+ */
+export const classesGridCols8xl = classArr(
+  "grid grid-cols-3",
+  "sm:grid-cols-4",
+  "md:grid-cols-5",
+  "lg:grid-cols-6",
+  "xl:grid-cols-8",
+)
+export const classesGridCols8xl3 = classArr(classesGridCols8xl, "2xl:grid-cols-16", "3xl:grid-cols-24")
+
+export function classesGridColsByCharacterLength(chars: number): string {
+  if (chars < 16) return classesGridCols8xl
+  if (chars < 20) return classesGridCols6xl
+  if (chars < 32) return classesGridCols4xl
+  if (chars < 40) return classesGridCols3xl
+  return classesGridCols2xl
+}
+
+export function classesGridColsByCharacterLengthMaxLgDialog(chars: number): string {
+  if (chars < 20) return "grid " + "grid-cols-2 " + "sm:grid-cols-3 " + "md:grid-cols-4 " + "lg:grid-cols-5 "
+  if (chars < 40) return "grid " + "grid-cols-1 " + "md:grid-cols-2 "
+  return "grid " + "grid-cols-1 "
+}

package/lib/icon/Icon1.astro

@@ -0,0 +1,21 @@
+---
+import { classMerge } from "~/utils/ui/classMerge"
+
+interface Props {
+  path: string
+  class?: string
+  title?: string
+  ariaHidden?: boolean
+}
+const props = Astro.props
+const ariaHidden = props.ariaHidden ?? !props.title
+// TODO: maybe re-add title={title}
+---
+
+<svg
+  viewBox={"0 0 24 24"}
+  aria-hidden={ariaHidden}
+  class={classMerge("size-6 align-middle dark:fill-white", props.class)}
+>
+  <path d={props.path}></path>
+</svg>

package/lib/img/ImageType.ts

@@ -0,0 +1,6 @@
+export type ImageType = {
+  path: string
+  height: number
+  width: number
+  alt: string
+}

package/lib/img/Img.astro

@@ -0,0 +1,27 @@
+---
+import { classesImgZoomInOnHover } from "./classesImgZoomInOnHover"
+import { classMerge } from "~/utils/ui/classMerge"
+
+interface Props {
+  alt: string
+  src: string
+  zoomIn?: boolean
+  class?: string
+  size?: number
+  width?: number | null | undefined
+  height?: number | null | undefined
+  loadingLazy?:boolean
+  decodeAsync?:boolean
+}
+const p = Astro.props
+---
+
+<img
+  src={p.src}
+  alt={p.alt}
+  class={classMerge(p.zoomIn && classesImgZoomInOnHover, p.class)}
+  loading={p.loadingLazy ?? true ? "lazy" : undefined}
+  decoding={p.decodeAsync ?? true ? "async" : undefined}
+  width={p.size ?? p.width}
+  height={p.size ?? p.height}
+/>

package/lib/img/TypedImg.astro

@@ -0,0 +1,26 @@
+---
+import { classArr } from "~/utils/ui/classArr"
+import type { ImageType } from "./ImageType"
+import Img from "./Img.astro"
+import { classInvertDiagram } from "~/img/classInvertDiagram"
+
+interface Props {
+  img: ImageType
+  zoomIn?: boolean
+  class?: string
+}
+const props = Astro.props
+const isSvg = props.img.path.endsWith(".svg")
+
+function imageUrl(p: string) {
+  return "/media-b2/" + p
+}
+---
+
+<Img
+  src={imageUrl(props.img.path)}
+  alt={props.img.alt}
+  class={classArr(isSvg ? classInvertDiagram : "", props.class)}
+  width={isSvg ? null : props.img.width}
+  height={isSvg ? null : props.img.height}
+/>

package/lib/img/classInvertDiagram.ts

@@ -0,0 +1 @@
+export const classInvertDiagram = "invert-diagram"

package/lib/img/classesImgZoomInOnHover.ts

@@ -0,0 +1 @@
+export const classesImgZoomInOnHover = "transform transition-transform duration-200 -translate-x-3 hover:scale-110"

package/lib/layouts/MarkdownWrapper.astro

@@ -0,0 +1,17 @@
+---
+import PageCenteredCard from "~/page/PageCenteredCard.astro"
+import { classMerge } from "~/utils/ui/classMerge"
+import { classArr } from "~/utils/ui/classArr"
+
+import "./parts/markdown.css"
+
+interface Props {
+  class?: string
+}
+
+const p = Astro.props
+---
+
+<PageCenteredCard class={classMerge("max-w-5xl my-12", p.class)} classInner={classArr("markdown-body", p.class)}>
+  <slot />
+</PageCenteredCard>

package/lib/layouts/MinimalLayout.astro

@@ -0,0 +1,67 @@
+---
+import { classArr } from "../utils/ui/classArr"
+import { objectKeys } from "~/utils/obj/objectKeys"
+import TailwindIndicator from "~/dev/TailwindIndicator.astro"
+
+export interface Props {
+  title: string
+  description?: string
+  meta?: Record<string, string>
+  class?: string
+}
+
+const props = Astro.props
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <!-- Base -->
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="generator" content={Astro.generator} />
+
+    <!-- Site -->
+    <title>{props.title}</title>
+    {props.description && <meta name="description" content={props.description} />}
+
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+
+    <!-- Icons -->
+    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
+    <link rel="icon" sizes="32x32" href="/favicon.ico" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png" />
+    <link rel="manifest" href="/site.webmanifest" />
+
+    <!-- Crawlers -->
+    <meta name="robots" content="index, follow" />
+    <meta name="googlebot" content="index, follow" />
+
+    {
+      props.meta && (
+        <Fragment>
+          {objectKeys(props.meta).map((k) => (
+            <meta property={k} content={props.meta![k]} />
+          ))}
+        </Fragment>
+      )
+    }
+  </head>
+  <body class="min-h-dvh w-full font-sans antialiased bg-background text-foreground">
+    <slot name="navbar" />
+    <main
+      id="main"
+      class={classArr(
+        "relative min-h-dvh",
+        "w-full",
+        "flex flex-col items-center",
+        props.class,
+        //
+      )}
+    >
+      <slot />
+    </main>
+    <slot name="footer" />
+    <TailwindIndicator />
+  </body>
+</html>