From 57aba37be1c26e62d50132f835d82ab029ae30c7 Mon Sep 17 00:00:00 2001 From: Atridad Lahiji Date: Sat, 1 Feb 2025 03:32:29 -0600 Subject: [PATCH] No tailwind D: --- Makefile | 26 +--- content/favourite_tools_list.md | 9 +- lib/stylegen/base.css | 14 -- lib/stylegen/gen.sh | 137 ----------------- pages/templates/home.html | 8 +- pages/templates/layouts/base.html | 7 +- pages/templates/layouts/post.html | 5 +- pages/templates/partials/header.html | 10 +- public/css/base.css | 65 ++++++++ public/css/components.css | 148 ++++++++++++++++++ public/css/layout.css | 87 +++++++++++ public/css/prose.css | 222 +++++++++++++++++++++++++++ 12 files changed, 551 insertions(+), 187 deletions(-) delete mode 100644 lib/stylegen/base.css delete mode 100755 lib/stylegen/gen.sh create mode 100644 public/css/base.css create mode 100644 public/css/components.css create mode 100644 public/css/layout.css create mode 100644 public/css/prose.css diff --git a/Makefile b/Makefile index 8629f91..a6694fd 100644 --- a/Makefile +++ b/Makefile @@ -13,8 +13,7 @@ DOCS := 📚 BINARY_NAME := atri.dad DOCKER_IMAGE := atri-dot-dad GO_FILES := $(wildcard *.go) -CSS_INPUT := lib/stylegen/base.css -CSS_OUTPUT := public/css/styles.css +# CSS files are now static and don't need generation # Docker detection DOCKER_ENV := $(shell if [ -f /.dockerenv ]; then echo true; else echo false; fi) @@ -48,9 +47,7 @@ ensure-swag: reset: @echo "$(CLEAN) Performing complete project reset..." @rm -f $(BINARY_NAME) - @rm -f $(CSS_OUTPUT) - @rm -rf public/css/* - @rm -f tailwind.config.js + @rm -rf public/css/styles.css @rm -rf docs/docs.go docs/swagger.json docs/swagger.yaml @go clean -cache -testcache -modcache @rm -rf $(BASE_PATH)/tw # Remove the 'tw' directory @@ -59,31 +56,16 @@ reset: clean: @echo "$(CLEAN) Cleaning build artifacts..." @rm -f $(BINARY_NAME) - @rm -f $(CSS_OUTPUT) - @rm -rf $(BASE_PATH)/lib/stylegen/tw # Remove the 'tw' directory + @rm -f public/css/styles.css @echo "$(CHECK) Cleanup complete" -stylegen: - @echo "$(CSS) Generating CSS styles..." - @echo "Current working directory: $$(pwd)" - @echo "Contents of current directory:" - @ls -la - @echo "\nContents of lib/stylegen:" - @ls -la lib/stylegen - @chmod +x $(BASE_PATH)/lib/stylegen/gen.sh - @$(BASE_PATH)/lib/stylegen/gen.sh \ - -e "html" \ - -d "$(BASE_PATH)/pages/templates" \ - -o "$(BASE_PATH)/public/css" - @echo "$(CHECK) CSS generation complete" - swaggergen: ensure-swag @echo "$(DOCS) Generating Swagger documentation..." @swag init @echo "$(CHECK) Swagger docs generated" # Combined generation target -generate: stylegen swaggergen +generate: swaggergen build: generate @echo "$(BUILD) Building binary..." diff --git a/content/favourite_tools_list.md b/content/favourite_tools_list.md index 3bd9a28..a6d6444 100644 --- a/content/favourite_tools_list.md +++ b/content/favourite_tools_list.md @@ -15,4 +15,11 @@ I change what I use _constantly_ in order to find something that feels just righ 7. Dataflare - A simple but powerful cross-platform database client. Supports most common databases, including LibSQL which is rare! 8. Bruno - A simple and powerful API client, similar to Postman. An critical tool to debug API endpoints. -I hope you found this helpful! This will be periodically updated to avoid outdated recommendations. \ No newline at end of file +I hope you found this helpful! This will be periodically updated to avoid outdated recommendations. + +```javascript +let x = 2; +console.log(x); +``` +## H2 +### H3 \ No newline at end of file diff --git a/lib/stylegen/base.css b/lib/stylegen/base.css deleted file mode 100644 index e21092c..0000000 --- a/lib/stylegen/base.css +++ /dev/null @@ -1,14 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; - -@layer base { - html, - container, - body { - height: 100%; - width: 100%; - overflow-y: auto; - position: fixed; - } -} diff --git a/lib/stylegen/gen.sh b/lib/stylegen/gen.sh deleted file mode 100755 index 77ae8ef..0000000 --- a/lib/stylegen/gen.sh +++ /dev/null @@ -1,137 +0,0 @@ -#!/usr/bin/env bash - -# Define the version of the binary to download -VERSION="v1.7.27" - -# Parse command-line arguments -while [[ $# -gt 0 ]]; do - case $1 in - -e|--extensions) - EXTENSIONS="$2" - shift; shift - ;; - -d|--directory) - DIRECTORY="$2" - shift; shift - ;; - -o|--output-dir) - OUTPUT_DIR="$2" - shift; shift - ;; - *) - echo "Unknown argument: $1" - exit 1 - ;; - esac -done - -# Get the directory where this script is located -SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )" -echo "Script directory: $SCRIPT_DIR" - -OS=$(uname -s) -ARCH=$(uname -m) - -# Normalize OS and ARCH identifiers -case $OS in - "Darwin") - OS="macos" - ;; - "Linux") - OS="linux" - ;; - "CYGWIN"*|"MINGW"*|"MSYS"*) - OS="windows" - ;; - *) - echo "Unknown operating system: $OS" - exit 1 - ;; -esac - -case $ARCH in - "x86_64") - ARCH="x64" - ;; - "arm64"|"aarch64") - ARCH="arm64" - ;; - *) - echo "Unsupported architecture: $ARCH" - exit 1 - ;; -esac - -echo "Detected OS: $OS" -echo "Detected Architecture: $ARCH" - -# Function to construct the binary download URL based on version, OS, and architecture -get_binary_url() { - echo "https://github.com/dobicinaitis/tailwind-cli-extra/releases/download/$VERSION/tailwindcss-extra-$OS-$ARCH" -} - -# Create the 'tw' directory for storing the downloaded binary -TW_DIR="${SCRIPT_DIR}/tw" -mkdir -p "$TW_DIR" - -# Set the binary path -BINARY="${TW_DIR}/tailwindcss-extra-${OS}-${ARCH}" - -# Check if the binary is already downloaded, otherwise download it -if [ ! -f "$BINARY" ]; then - echo "Binary not found, downloading version $VERSION..." - - DOWNLOAD_URL=$(get_binary_url) - - if [ -z "$DOWNLOAD_URL" ]; then - echo "No suitable release found for this OS and architecture." - exit 1 - fi - - # Download the binary - curl -L "$DOWNLOAD_URL" -o "$BINARY" - echo "Downloaded binary to: $BINARY" -fi - -# Make the binary executable -chmod +x "$BINARY" - -echo "Using binary: $BINARY" -echo "Extensions: $EXTENSIONS" -echo "Directory: $DIRECTORY" -echo "Output Directory: $OUTPUT_DIR" - -# Initialize an array for name conditions -name_conditions=() - -# Assuming $EXTENSIONS is a comma-separated list of extensions -IFS=',' read -ra ADDR <<< "$EXTENSIONS" -for ext in "${ADDR[@]}"; do - name_conditions+=(-name "*.$ext") -done - -# Use find with the array of conditions -INCLUDE_FILES=$(find "$DIRECTORY" -type f \( "${name_conditions[@]}" \)) - -echo "Files found: $INCLUDE_FILES" - -INCLUDE_FILES_ARRAY=$(echo "$INCLUDE_FILES" | awk '{printf "\"%s\",", $0}' | sed 's/,$//') - -# Generate Tailwind config in script directory -CONFIG_FILE="${SCRIPT_DIR}/tailwind.config.js" -echo "module.exports = { - content: [$INCLUDE_FILES_ARRAY], - theme: { - extend: {}, - }, - daisyui: { - themes: [\"night\"], - }, - plugins: [require('daisyui'), require('@tailwindcss/typography')], -}" > "$CONFIG_FILE" - -# Run the binary with the generated config -"$BINARY" build -i "${SCRIPT_DIR}/base.css" -c "$CONFIG_FILE" -o "${OUTPUT_DIR}/styles.css" --minify - -# Wait for all background processes to finish -wait diff --git a/pages/templates/home.html b/pages/templates/home.html index 7f9448f..49f91ee 100644 --- a/pages/templates/home.html +++ b/pages/templates/home.html @@ -17,7 +17,7 @@ Atridad Lahiji // Root {{define "main"}}

- {{.Title}} + {{.Title}}

@@ -26,7 +26,7 @@ Atridad Lahiji // Root

Places I exist:

-
+
{{range .Socials}} {{template "iconlinks" .}} {{end}} @@ -36,14 +36,14 @@ Atridad Lahiji // Root

Stuff I Use:

-
+
{{range .Tech}} {{template "iconlinks" .}} {{end}}
-
+
{{range .ButtonsLinks}} {{template "buttonlinks" .}} {{end}} diff --git a/pages/templates/layouts/base.html b/pages/templates/layouts/base.html index 4d25e6b..4d5ea33 100644 --- a/pages/templates/layouts/base.html +++ b/pages/templates/layouts/base.html @@ -5,15 +5,18 @@ + + + {{template "title" .}} {{template "head" .}} - + {{template "header" .}} -
+
{{template "main" .}}
diff --git a/pages/templates/layouts/post.html b/pages/templates/layouts/post.html index 1601495..1bb718e 100644 --- a/pages/templates/layouts/post.html +++ b/pages/templates/layouts/post.html @@ -8,12 +8,13 @@ {{template "title" .}} {{template "head" .}} + - + {{template "header" .}} -
+

{{.Name}}

diff --git a/pages/templates/partials/header.html b/pages/templates/partials/header.html index 5c4717a..fedae51 100644 --- a/pages/templates/partials/header.html +++ b/pages/templates/partials/header.html @@ -1,16 +1,16 @@ {{define "header"}} -
+
- {{template "navcontent".}} + {{template "navcontent".}}
-
+
    {{template "navitems" .}} diff --git a/public/css/base.css b/public/css/base.css new file mode 100644 index 0000000..c9e08f1 --- /dev/null +++ b/public/css/base.css @@ -0,0 +1,65 @@ +/* + * Theme Variables + * These variables replace Tailwind and DaisyUI theme configuration + * --color-pink-500 = pink-500 in Tailwind + * --color-blue-500 = blue-500 in Tailwind + * --theme-night-bg = Replaces DaisyUI's night theme background + */ +:root { + --color-pink-500: #ec4899; + --color-blue-500: #3b82f6; + --color-white: #ffffff; + --theme-night-bg: #1f2937; + --theme-night-text: #ffffff; +} + +/* + * Night Theme + * Equivalent to DaisyUI's [data-theme="night"] theme + * Sets dark mode colors for the entire site + */ +[data-theme="night"] { + background-color: var(--theme-night-bg); + color: var(--theme-night-text); +} + +/* + * Reset & Base Styles + * Replaces Tailwind's base styles and normalizes the page + * html, body = min-h-screen in Tailwind + */ +html, body { + height: 100%; + margin: 0; + font-family: ui-sans-serif, system-ui, sans-serif; + line-height: 1.5; +} + +/* + * Text Utilities + * Direct equivalents to Tailwind's text utilities: + * .text-center = text-center + * .text-white = text-white + * .text-4xl = text-4xl (2.25rem) + * .text-2xl = text-2xl (1.5rem) + * .text-xl = text-xl (1.25rem) + * .font-extrabold = font-extrabold + * .tracking-tight = tracking-tight + */ +.text-center { text-align: center; } +.text-white { color: var(--color-white); } +.text-4xl { font-size: 2.25rem; } +.text-2xl { font-size: 1.5rem; } +.text-xl { font-size: 1.25rem; } +.font-extrabold { font-weight: 800; } +.tracking-tight { letter-spacing: -0.025em; } + +/* + * Base Link Styles + * Replaces Tailwind's default link styling + * Equivalent to: no-underline text-inherit + */ +a { + color: inherit; + text-decoration: none; +} diff --git a/public/css/components.css b/public/css/components.css new file mode 100644 index 0000000..8d7b163 --- /dev/null +++ b/public/css/components.css @@ -0,0 +1,148 @@ +/* + * Gradient Text Effect + * Replaces Tailwind's bg-gradient-to-r + from-pink-500 + to-blue-500 + bg-clip-text + text-transparent + * Used for main heading text effect + */ +.gradient-text { + background: linear-gradient(to right, var(--color-pink-500), var(--color-blue-500)); + -webkit-background-clip: text; + background-clip: text; + color: transparent; +} + +/* Button Links */ +/* + * Button Component + * Replaces DaisyUI's .btn class with custom styling + * Base button with hover effects and proper alignment + */ +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.5rem 1rem; + border-radius: 0.5rem; + font-weight: 500; + transition: background-color 0.2s; + background-color: rgba(255, 255, 255, 0.1); +} + +.btn:hover { + background-color: rgba(255, 255, 255, 0.2); +} + +/* + * Icon Link Component + * Custom component for icon buttons + * Includes hover scale effect (transform: scale(1.1)) + */ +.icon-link { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.5rem; + border-radius: 0.5rem; + transition: transform 0.2s; +} + +.icon-link:hover { + transform: scale(1.1); +} + +/* Header & Navigation */ +/* + * Navigation Bar + * Replaces DaisyUI's .navbar component + * Provides a responsive header with proper spacing + */ +.navbar { + display: flex; + align-items: center; + padding: 0.5rem 1rem; + min-height: 4rem; + width: 100%; +} + +.navbar-start { + flex: 1; +} + +.navbar-end { + flex: 1; + display: flex; + justify-content: flex-end; +} + +/* + * Dropdown Menu + * Replaces DaisyUI's .dropdown component + * Used for the hamburger menu navigation + */ +.dropdown { + position: relative; + display: inline-block; +} + +/* + * Ghost Button + * Replaces DaisyUI's .btn-ghost + * Transparent button with hover effect, used for hamburger menu + */ +.btn-ghost { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0; + width: 3rem; + height: 3rem; +} + +.btn-ghost svg { + margin: 0; +} + +.dropdown-content { + display: none; + position: absolute; + right: 0; + margin-top: 0.75rem; + padding: 0.5rem; + background-color: var(--theme-night-bg); + border-radius: 0.5rem; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); + z-index: 50; +} + +.menu { + list-style: none; + padding: 0; + margin: 0; +} + +.menu-compact { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +/* + * Badge Component + * Replaces DaisyUI's .badge and .badge-accent + * Used for tags and labels with accent color variant + */ +.badge { + display: inline-flex; + align-items: center; + justify-content: center; + background-color: var(--prose-invert-code-bg); + color: var(--prose-invert-code); + padding: 0.25rem 0.75rem; + border-radius: 1rem; + font-size: 0.875rem; + font-weight: 500; +} + +.badge-accent { + background-color: var(--color-pink-500); + color: var(--color-white); +} diff --git a/public/css/layout.css b/public/css/layout.css new file mode 100644 index 0000000..78c470d --- /dev/null +++ b/public/css/layout.css @@ -0,0 +1,87 @@ +/* + * Layout Container + * Equivalent to Tailwind's container class + * Provides a responsive wrapper with auto margins + */ +.container { + width: 100%; + margin-left: auto; + margin-right: auto; + padding: 1rem; +} + +/* + * Display Utilities + * Direct equivalents to Tailwind's display utilities: + * .block = block + * .flex = flex + */ +.block { display: block; } +.flex { display: flex; } + +/* + * Height Utilities + * Matches Tailwind's height utilities: + * .h-full = h-full + * .min-h-screen = min-h-screen + */ +.h-full { height: 100%; } +.min-h-screen { min-height: 100vh; } + +/* + * Flexbox Utilities + * Direct equivalents to Tailwind's flexbox utilities: + * .flex-row = flex-row + * .flex-col = flex-col + * .flex-wrap = flex-wrap + * .items-center = items-center + * .justify-center = justify-center + */ +.flex-row { flex-direction: row; } +.flex-col { flex-direction: column; } +.flex-wrap { flex-wrap: wrap; } +.items-center { align-items: center; } +.justify-center { justify-content: center; } + +/* + * Spacing Utilities + * Matches Tailwind's spacing scale: + * .gap-2 = gap-2 (0.5rem) + * .gap-3 = gap-3 (0.75rem) + * .gap-4 = gap-4 (1rem) + * .gap-6 = gap-6 (1.5rem) + * .mx-auto = mx-auto + * .mb-2 = mb-2 + * .p-4 = p-4 + */ +.gap-2 { gap: 0.5rem; } +.gap-3 { gap: 0.75rem; } +.gap-4 { gap: 1rem; } +.gap-6 { gap: 1.5rem; } +.mx-auto { margin-left: auto; margin-right: auto; } +.mb-2 { margin-bottom: 0.5rem; } +.p-4 { padding: 1rem; } + +/* + * Main Content Area + * Replaces Tailwind's min-h-[calc(100%-64px)] + * Ensures main content area fills available space minus header + */ +main { + min-height: calc(100% - 64px); +} + +/* + * Responsive Breakpoints + * Matches Tailwind's sm: breakpoint (640px) + * .sm\:text-8xl = sm:text-8xl + * .sm\:text-[2rem] = sm:text-[2rem] + * .sm\:text-[1.5rem] = sm:text-[1.5rem] + * .sm\:gap-6 = sm:gap-6 + */ +@media (min-width: 640px) { + .sm\:text-8xl { font-size: 6rem; } + .sm\:text-\[2rem\] { font-size: 2rem; } + .sm\:text-\[1\.5rem\] { font-size: 1.5rem; } + .sm\:gap-6 { gap: 1.5rem; } +} diff --git a/public/css/prose.css b/public/css/prose.css new file mode 100644 index 0000000..5c757ef --- /dev/null +++ b/public/css/prose.css @@ -0,0 +1,222 @@ +/* Prose Theme Variables */ +:root { + --prose-invert-body: #d1d5db; + --prose-invert-headings: #fff; + --prose-invert-links: #60a5fa; + --prose-invert-bold: #fff; + --prose-invert-counters: #9ca3af; + --prose-invert-bullets: #4b5563; + --prose-invert-hr: #374151; + --prose-invert-quotes: #f3f4f6; + --prose-invert-quote-borders: #374151; + --prose-invert-captions: #9ca3af; + --prose-invert-code: #fff; + --prose-invert-code-bg: rgba(255, 255, 255, 0.1); + --prose-invert-pre-code: #d1d5db; + --prose-invert-pre-bg: #1f2937; + --prose-invert-th-borders: #4b5563; + --prose-invert-td-borders: #374151; +} + +/* Base Prose Container */ +.prose { + max-width: 65ch; + color: var(--prose-invert-body); +} + +/* Lead Paragraph */ +.prose [class~="lead"] { + color: var(--prose-invert-body); + font-size: 1.25em; + line-height: 1.6; + margin-top: 1.2em; + margin-bottom: 1.2em; +} + +/* + * Link Styles + * Replaces Tailwind Typography's link styles + * Adds underline and hover effects + */ +.prose a { + color: var(--prose-invert-links); + text-decoration: underline; + font-weight: 500; +} + +/* Strong Text */ +.prose strong { + color: var(--prose-invert-bold); + font-weight: 600; +} + +/* Lists */ +.prose ol { + counter-reset: list-counter; + margin-top: 1.25em; + margin-bottom: 1.25em; +} + +.prose ol > li { + position: relative; + counter-increment: list-counter; + padding-left: 1.75em; +} + +.prose ol > li::before { + content: counter(list-counter) "."; + position: absolute; + left: 0; + color: var(--prose-invert-counters); + font-weight: 400; +} + +.prose ul > li { + position: relative; + padding-left: 1.75em; +} + +.prose ul > li::before { + content: ""; + position: absolute; + left: 0; + top: 0.75em; + height: 0.375em; + width: 0.375em; + background-color: var(--prose-invert-bullets); + border-radius: 50%; +} + +/* Horizontal Rule */ +.prose hr { + border-color: var(--prose-invert-hr); + margin-top: 3em; + margin-bottom: 3em; +} + +/* + * Blockquote Styles + * Replaces Tailwind Typography's blockquote styles + * Adds left border and proper indentation + */ +.prose blockquote { + font-weight: 500; + font-style: italic; + color: var(--prose-invert-quotes); + border-left: 0.25rem solid var(--prose-invert-quote-borders); + margin-top: 1.6em; + margin-bottom: 1.6em; + padding-left: 1em; +} + +/* + * Heading Styles + * Replaces Tailwind Typography's heading styles + * h1 = prose-h1 (2.25em, 800 weight) + * h2 = prose-h2 (1.5em, 700 weight) + * h3 = prose-h3 (1.25em, 600 weight) + * h4 = prose-h4 (1em, 600 weight) + */ +.prose h1 { + color: var(--prose-invert-headings); + font-weight: 800; + font-size: 2.25em; + margin-top: 0; + margin-bottom: 0.8888889em; + line-height: 1.1111111; +} + +.prose h2 { + color: var(--prose-invert-headings); + font-weight: 700; + font-size: 1.5em; + margin-top: 2em; + margin-bottom: 1em; + line-height: 1.3333333; +} + +.prose h3 { + color: var(--prose-invert-headings); + font-weight: 600; + font-size: 1.25em; + margin-top: 1.6em; + margin-bottom: 0.6em; + line-height: 1.6; +} + +/* + * Code Styles + * Replaces Tailwind Typography's code styles + * code = prose-code (inline code) + * pre = prose-pre (code blocks) + * Includes syntax highlighting compatibility + */ +.prose code { + color: var(--prose-invert-code); + font-weight: 600; + font-size: 0.875em; + background-color: var(--prose-invert-code-bg); + padding: 0.25em 0.5em; + border-radius: 0.375rem; +} + +.prose pre { + color: var(--prose-invert-pre-code); + background-color: var(--prose-invert-pre-bg); + overflow-x: auto; + font-size: 0.875em; + line-height: 1.7142857; + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + border-radius: 0.375rem; + padding: 0.8571429em 1.1428571em; +} + +.prose pre code { + background-color: transparent; + border-width: 0; + border-radius: 0; + padding: 0; + font-weight: 400; + color: inherit; + font-size: inherit; + font-family: inherit; + line-height: inherit; +} + +/* + * Table Styles + * Replaces Tailwind Typography's table styles + * Includes proper borders and cell padding + */ +.prose table { + width: 100%; + table-layout: auto; + text-align: left; + margin-top: 2em; + margin-bottom: 2em; + font-size: 0.875em; + line-height: 1.7142857; +} + +.prose thead { + color: var(--prose-invert-headings); + font-weight: 600; + border-bottom: 1px solid var(--prose-invert-th-borders); +} + +.prose thead th { + vertical-align: bottom; + padding-right: 0.5714286em; + padding-bottom: 0.5714286em; + padding-left: 0.5714286em; +} + +.prose tbody tr { + border-bottom: 1px solid var(--prose-invert-td-borders); +} + +.prose tbody td { + vertical-align: top; + padding: 0.5714286em; +}