glenn
/
personal-website
mirror of https://github.com/glenneth1/personal-website.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix line endings and update build configuration 

- Normalize line endings across all files
- Update build script with improved port configuration (default 9000)
- Sync content files formatting
- Update JavaScript and CSS files
This commit is contained in:
Glenn Thompson 2025-07-07 06:46:12 +03:00
parent fe828e1fcf
commit 15a4e025ec
57 changed files with 16756 additions and 15160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
.gitignore vendored
View File

@ -1,36 +1,36 @@
# Dependencies
node_modules/
/.pnp
.pnp.js
# Production build
/build
# Development
.env
.env.local
.env.development.local
.env.test.local
.env.production.local
# IDE and Editor files
.idea/
.vscode/
*.sublime-project
*.sublime-workspace
*.code-workspace
# Logs
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# System Files
.DS_Store
Thumbs.db
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Dependencies
node_modules/
/.pnp
.pnp.js
# Production build
/build
# Development
.env
.env.local
.env.development.local
.env.test.local
.env.production.local
# IDE and Editor files
.idea/
.vscode/
*.sublime-project
*.sublime-workspace
*.code-workspace
# Logs
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# System Files
.DS_Store
Thumbs.db
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache

42
LICENSE
View File

@ -1,21 +1,21 @@
MIT License
Copyright (c) 2024 Glenn Thompson
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
MIT License
Copyright (c) 2024 Glenn Thompson
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

140
README.md
View File

@ -1,70 +1,70 @@
# Glenn Thompson's Personal Website
A modern, responsive personal blog built to share experiences in technology, engineering, and travel, with a focus on life in the Middle East and technical explorations.
Visit the live site at [https://glenneth.org](https://glenneth.org)
## Features
- Responsive design optimized for all devices
- Clean, modern UI with subtle animations
- RSS feed support for blog posts
- Markdown-to-HTML conversion for content
- Dedicated sections for:
- Technical blog posts
- Travel stories
- Engineering insights
- About me
- Project showcase
## Technology Stack
- HTML5
- CSS (Tailwind CSS for styling)
- JavaScript
- Node.js for build tools
- Live-server for development
- Static site generation with markdown support
## Local Development
1. Clone this repository
2. Install dependencies:
```bash
npm install
```
3. Start the development server:
```bash
./serve.sh
```
This will start a live-server instance with auto-reload on port 3001.
## Content Management
### Adding New Blog Posts
1. Create a new markdown file in `content/posts/`
2. Include frontmatter with title, date, and tags:
```markdown
---
title: Your Post Title
author: Glenn Thompson
date: YYYY-MM-DD HH:MM
tags: tech, programming, travel
---
```
3. Run the build script to convert markdown to HTML:
```bash
./build.sh
```
This will:
- Convert any new or modified markdown files to HTML
- Update the RSS feed
- Generate the deployment package
## Deployment
The site is deployed as a static website. Run `./deploy.sh` to create a deployment package.
## RSS Feed
An RSS feed is available at `/feed.xml` for subscribing to blog updates.
## Contact
For any inquiries, please reach out to [glenn@glenneth.org](mailto:glenn@glenneth.org)
## License
MIT License
# Glenn Thompson's Personal Website
A modern, responsive personal blog built to share experiences in technology, engineering, and travel, with a focus on life in the Middle East and technical explorations.
Visit the live site at [https://glenneth.org](https://glenneth.org)
## Features
- Responsive design optimized for all devices
- Clean, modern UI with subtle animations
- RSS feed support for blog posts
- Markdown-to-HTML conversion for content
- Dedicated sections for:
- Technical blog posts
- Travel stories
- Engineering insights
- About me
- Project showcase
## Technology Stack
- HTML5
- CSS (Tailwind CSS for styling)
- JavaScript
- Node.js for build tools
- Live-server for development
- Static site generation with markdown support
## Local Development
1. Clone this repository
2. Install dependencies:
```bash
npm install
```
3. Start the development server:
```bash
./serve.sh
```
This will start a live-server instance with auto-reload on port 3001.
## Content Management
### Adding New Blog Posts
1. Create a new markdown file in `content/posts/`
2. Include frontmatter with title, date, and tags:
```markdown
---
title: Your Post Title
author: Glenn Thompson
date: YYYY-MM-DD HH:MM
tags: tech, programming, travel
---
```
3. Run the build script to convert markdown to HTML:
```bash
./build.sh
```
This will:
- Convert any new or modified markdown files to HTML
- Update the RSS feed
- Generate the deployment package
## Deployment
The site is deployed as a static website. Run `./deploy.sh` to create a deployment package.
## RSS Feed
An RSS feed is available at `/feed.xml` for subscribing to blog updates.
## Contact
For any inquiries, please reach out to [glenn@glenneth.org](mailto:glenn@glenneth.org)
## License
MIT License

344
build.sh
View File

@ -1,172 +1,172 @@
#!/bin/bash
# Default settings
PORT=9000 # Changed default to avoid common conflicts
SERVE=false
DEBUG=false
# Parse command line arguments
while [[ "$#" -gt 0 ]]; do
case $1 in
--serve) SERVE=true ;;
--port) PORT="$2"; shift ;;
--debug) DEBUG=true ;;
*) echo "Unknown parameter: $1"; exit 1 ;;
esac
shift
done
# Function to log debug messages
log_debug() {
if [ "$DEBUG" = true ]; then
echo "[DEBUG] $1"
fi
}
# Function to cleanup and exit
cleanup() {
echo -e "\nShutting down server..."
pkill -f "live-server.*:$PORT" 2>/dev/null
exit 0
}
# Function to check if a port is in use
check_port() {
local port=$1
nc -z localhost "$port" >/dev/null 2>&1
if [ $? -eq 0 ]; then
return 0 # Port is in use
fi
return 1 # Port is free
}
# Function to find next available port
find_available_port() {
local port=$1
local max_port=$((port + 100)) # Don't search indefinitely
while [ "$port" -lt "$max_port" ]; do
if ! check_port "$port"; then
echo "$port"
return 0
fi
port=$((port + 1))
done
echo "Error: No available ports found between $1 and $max_port" >&2
exit 1
}
# Set up trap for Ctrl+C (SIGINT) if serving
if [ "$SERVE" = true ]; then
trap cleanup SIGINT
fi
# Directory structure
MD_DIR="content/posts"
DEPLOY_DIR="deploy"
POSTS_DEPLOY_DIR="$DEPLOY_DIR/content/posts"
DIST_DIR="$DEPLOY_DIR/dist"
SRC_DIR="src"
# Ensure all required directories exist
dirs_to_create=(
"$MD_DIR"
"$DEPLOY_DIR"
"$POSTS_DEPLOY_DIR"
"$DIST_DIR"
"$SRC_DIR"
)
for dir in "${dirs_to_create[@]}"; do
if [ ! -d "$dir" ]; then
echo "Creating directory: $dir"
mkdir -p "$dir"
fi
done
# Build CSS first to ensure styles are available
echo "Building CSS..."
if ! npm run build; then
echo "Error: Failed to build CSS"
exit 1
fi
echo "Checking for new markdown files..."
CONVERTED_COUNT=0
# Loop through all markdown files
for md_file in "$MD_DIR"/*.md; do
# Skip if no markdown files found
[[ -e "$md_file" ]] || continue
base_name=$(basename "$md_file")
html_file="$POSTS_DEPLOY_DIR/${base_name%.md}.html"
local_html_file="$MD_DIR/${base_name%.md}.html"
log_debug "Processing $base_name"
# Check if HTML file doesn't exist or markdown file is newer
if [[ ! -f "$html_file" ]] || [[ "$md_file" -nt "$html_file" ]]; then
echo "Converting $base_name to HTML..."
if ! node "$SRC_DIR/js/md-to-html.js" "$md_file" "$html_file"; then
echo "Error: Failed to convert $base_name to HTML"
exit 1
fi
cp "$html_file" "$local_html_file"
((CONVERTED_COUNT++))
fi
done
echo "Converted $CONVERTED_COUNT new or modified files"
# Update summaries in index.html
echo "Updating blog post summaries in index.html..."
if ! npm run update-summaries; then
echo "Error: Failed to update summaries"
exit 1
fi
# Generate RSS feed
echo "Generating RSS feed..."
if ! node "$SRC_DIR/js/generate-rss.js"; then
echo "Error: Failed to generate RSS feed"
exit 1
fi
# Copy necessary files to deploy directory
echo "Copying files to deploy directory..."
cp index.html "$DEPLOY_DIR/"
cp -r dist/* "$DEPLOY_DIR/dist/"
# If --serve flag is provided, start the server
if [ "$SERVE" = true ]; then
# Find available port if specified port is in use
FINAL_PORT=$(find_available_port "$PORT")
echo "Starting local server on port $FINAL_PORT..."
echo "Visit http://localhost:$FINAL_PORT to view your site"
echo "Press Ctrl+C to stop the server"
# Copy deploy files to root for local development
cp -r "$DEPLOY_DIR"/* .
# Ensure live-server exists
if [ ! -f "./node_modules/.bin/live-server" ]; then
echo "Error: live-server not found. Please run 'npm install' first."
exit 1
fi
# Start live-server with specific options
./node_modules/.bin/live-server \
--port="$FINAL_PORT" \
--no-browser \
--watch="*.html,*.css,content/**/*.html" \
--wait=50 \
--quiet \
--ignore=node_modules \
.
# Keep script running until Ctrl+C
wait
fi
#!/bin/bash
# Default settings
PORT=9000 # Changed default to avoid common conflicts
SERVE=false
DEBUG=false
# Parse command line arguments
while [[ "$#" -gt 0 ]]; do
case $1 in
--serve) SERVE=true ;;
--port) PORT="$2"; shift ;;
--debug) DEBUG=true ;;
*) echo "Unknown parameter: $1"; exit 1 ;;
esac
shift
done
# Function to log debug messages
log_debug() {
if [ "$DEBUG" = true ]; then
echo "[DEBUG] $1"
fi
}
# Function to cleanup and exit
cleanup() {
echo -e "\nShutting down server..."
pkill -f "live-server.*:$PORT" 2>/dev/null
exit 0
}
# Function to check if a port is in use
check_port() {
local port=$1
nc -z localhost "$port" >/dev/null 2>&1
if [ $? -eq 0 ]; then
return 0 # Port is in use
fi
return 1 # Port is free
}
# Function to find next available port
find_available_port() {
local port=$1
local max_port=$((port + 100)) # Don't search indefinitely
while [ "$port" -lt "$max_port" ]; do
if ! check_port "$port"; then
echo "$port"
return 0
fi
port=$((port + 1))
done
echo "Error: No available ports found between $1 and $max_port" >&2
exit 1
}
# Set up trap for Ctrl+C (SIGINT) if serving
if [ "$SERVE" = true ]; then
trap cleanup SIGINT
fi
# Directory structure
MD_DIR="content/posts"
DEPLOY_DIR="deploy"
POSTS_DEPLOY_DIR="$DEPLOY_DIR/content/posts"
DIST_DIR="$DEPLOY_DIR/dist"
SRC_DIR="src"
# Ensure all required directories exist
dirs_to_create=(
"$MD_DIR"
"$DEPLOY_DIR"
"$POSTS_DEPLOY_DIR"
"$DIST_DIR"
"$SRC_DIR"
)
for dir in "${dirs_to_create[@]}"; do
if [ ! -d "$dir" ]; then
echo "Creating directory: $dir"
mkdir -p "$dir"
fi
done
# Build CSS first to ensure styles are available
echo "Building CSS..."
if ! npm run build; then
echo "Error: Failed to build CSS"
exit 1
fi
echo "Checking for new markdown files..."
CONVERTED_COUNT=0
# Loop through all markdown files
for md_file in "$MD_DIR"/*.md; do
# Skip if no markdown files found
[[ -e "$md_file" ]] || continue
base_name=$(basename "$md_file")
html_file="$POSTS_DEPLOY_DIR/${base_name%.md}.html"
local_html_file="$MD_DIR/${base_name%.md}.html"
log_debug "Processing $base_name"
# Check if HTML file doesn't exist or markdown file is newer
if [[ ! -f "$html_file" ]] || [[ "$md_file" -nt "$html_file" ]]; then
echo "Converting $base_name to HTML..."
if ! node "$SRC_DIR/js/md-to-html.js" "$md_file" "$html_file"; then
echo "Error: Failed to convert $base_name to HTML"
exit 1
fi
cp "$html_file" "$local_html_file"
((CONVERTED_COUNT++))
fi
done
echo "Converted $CONVERTED_COUNT new or modified files"
# Update summaries in index.html
echo "Updating blog post summaries in index.html..."
if ! npm run update-summaries; then
echo "Error: Failed to update summaries"
exit 1
fi
# Generate RSS feed
echo "Generating RSS feed..."
if ! node "$SRC_DIR/js/generate-rss.js"; then
echo "Error: Failed to generate RSS feed"
exit 1
fi
# Copy necessary files to deploy directory
echo "Copying files to deploy directory..."
cp index.html "$DEPLOY_DIR/"
cp -r dist/* "$DEPLOY_DIR/dist/"
# If --serve flag is provided, start the server
if [ "$SERVE" = true ]; then
# Find available port if specified port is in use
FINAL_PORT=$(find_available_port "$PORT")
echo "Starting local server on port $FINAL_PORT..."
echo "Visit http://localhost:$FINAL_PORT to view your site"
echo "Press Ctrl+C to stop the server"
# Copy deploy files to root for local development
cp -r "$DEPLOY_DIR"/* .
# Ensure live-server exists
if [ ! -f "./node_modules/.bin/live-server" ]; then
echo "Error: live-server not found. Please run 'npm install' first."
exit 1
fi
# Start live-server with specific options
./node_modules/.bin/live-server \
--port="$FINAL_PORT" \
--no-browser \
--watch="*.html,*.css,content/**/*.html" \
--wait=50 \
--quiet \
--ignore=node_modules \
.
# Keep script running until Ctrl+C
wait
fi

368
content/drafts/2025-03-12-lessons-learned-custom-ssg.md
View File

@ -1,184 +1,184 @@
---
title: "Lessons Learned: One Year with a Custom Static Site Generator"
date: 2025-03-12
tags: [web, development, javascript, static-site, node, tailwind, lessons]
---
It's been just over a year since I [transitioned from Haunt to my own custom static site generator](/content/posts/2025-01-02-from-haunt-to-custom.html) for this website. What started as an experiment to gain more control over my publishing workflow has evolved into a valuable learning experience that has shaped how I approach web development projects.
In this post, I'll share the key lessons I've learned, challenges I've faced, and insights I've gained from building and maintaining my own static site generator.
## The Technical Evolution
### Initial Implementation vs. Current State
When I first built my static site generator, it was a simple Node.js script that converted markdown to HTML and injected it into a template. The feature set was minimal:
- Basic markdown parsing with marked
- Simple templating with string literals
- Manual asset management
- Command-line build process
Today, the system has evolved considerably:
- Enhanced markdown processing with syntax highlighting and custom extensions
- Tailwind CSS integration with optimized builds
- Automated image optimization
- Tag-based organization and filtering
- RSS feed generation
- Incremental builds for faster development
This evolution wasn't planned from the beginning—it emerged organically as I used the system and identified pain points and opportunities for improvement.
### The Power of Incremental Improvements
One of the most valuable lessons I've learned is the power of incremental improvements. Rather than trying to build a comprehensive system upfront, I started with the minimum viable solution and gradually added features as needed.
This approach allowed me to:
1. Get the site up and running quickly
2. Learn from actual usage rather than anticipated needs
3. Focus development efforts on genuine pain points
4. Avoid overengineering and unnecessary complexity
For example, I didn't initially implement an image optimization pipeline. Only after manually optimizing images for several posts did I recognize the value of automating this process. The resulting solution was more practical and tailored to my specific workflow than if I had tried to design it upfront.
## Unexpected Challenges
### Dependency Management
One of the most surprising challenges was dependency management. While I deliberately kept external dependencies minimal, even the few libraries I did use occasionally introduced breaking changes or security vulnerabilities that required attention.
For instance, when updating the marked library for markdown processing, I had to adapt to changes in its API and configuration options. This highlighted the importance of:
- Carefully evaluating dependencies before adoption
- Writing good tests to catch breaking changes
- Considering the long-term maintenance implications of each dependency
### Browser Compatibility
Another unexpected challenge was ensuring browser compatibility. While static sites are generally more resilient than complex web applications, I still encountered issues with:
- CSS features not supported in older browsers
- JavaScript syntax compatibility
- Image format support (particularly with WebP and AVIF formats)
These challenges led me to implement better progressive enhancement strategies and more thorough testing across different browsers and devices.
### Content Management Workflow
Perhaps the most significant challenge was refining the content management workflow. While I initially focused on the technical aspects of generating the site, I quickly realized that the author experience was equally important.
Pain points included:
- Managing front matter consistently
- Previewing content during writing
- Organizing and reusing images
- Maintaining consistent formatting
To address these issues, I developed additional tools and scripts to streamline the content creation process, including a front matter template generator and a live preview server.
## Community Engagement
### Sharing the Journey
One unexpected benefit of building my own static site generator has been the community engagement it has fostered. By documenting my process and sharing code snippets, I've connected with other developers interested in similar approaches.
These interactions have:
- Provided valuable feedback and suggestions
- Inspired new features and improvements
- Created opportunities for collaboration
- Helped others solve similar problems
I've received numerous emails and comments from readers who have adapted aspects of my approach for their own projects, which has been incredibly rewarding.
### Open Source Contributions
Working on my own static site generator has also led to contributions to open source projects. As I encountered limitations or bugs in the libraries I was using, I often found myself submitting pull requests or opening issues.
This has not only improved the tools I rely on but has also deepened my understanding of the broader ecosystem and connected me with other developers working on similar problems.
## Performance Insights
### Build Performance vs. Runtime Performance
An interesting lesson has been the distinction between build performance and runtime performance. Initially, I focused primarily on optimizing the runtime performance of the site—ensuring fast page loads, minimal JavaScript, and optimized assets.
However, as the site grew, build performance became increasingly important. Slow builds hindered the content creation process and made it less enjoyable to update the site.
This led me to implement:
- Incremental builds that only process changed files
- Parallel processing for independent tasks
- Caching of intermediate build artifacts
- More efficient asset processing pipelines
These optimizations significantly improved the development experience without compromising the performance of the published site.
### The Value of Measurement
Another key lesson has been the importance of measurement in performance optimization. Rather than making assumptions about performance bottlenecks, I've learned to rely on data from:
- Lighthouse scores and reports
- Chrome DevTools performance profiles
- Build time measurements
- Real User Monitoring (RUM) data
This data-driven approach has often revealed surprising insights, such as the significant impact of font loading on perceived performance and the importance of optimizing the critical rendering path.
## Security Considerations
Building and maintaining my own static site generator has also deepened my understanding of web security. Even though static sites are inherently more secure than dynamic applications, there are still important considerations:
- Content Security Policy (CSP) implementation
- Secure handling of third-party resources
- Protection against common vulnerabilities in dependencies
- Secure deployment processes (as detailed in my [recent post about my development environment](/content/posts/2025-03-08-my-dev-environment-2025.html))
I've implemented a comprehensive security strategy that includes regular dependency audits, strict CSP headers, and secure deployment practices using GPG encryption for credentials.
## Future Roadmap
As I look to the future of my custom static site generator, several areas of improvement stand out:
### Content Management Improvements
- Better support for content types beyond blog posts
- Enhanced media management
- Improved drafting and scheduling capabilities
- Better support for content updates and versioning
### Build System Enhancements
- Further build performance optimizations
- Better incremental build support
- Improved error reporting and diagnostics
- Integration with modern build tools like esbuild
### Frontend Innovations
- Enhanced progressive enhancement strategies
- Better offline support with service workers
- Improved accessibility features
- More sophisticated interaction patterns without sacrificing performance
## Conclusion: Was It Worth It?
The question I'm most frequently asked about my custom static site generator is whether it was worth the effort compared to using an established solution like Hugo, Eleventy, or Next.js.
My answer is an unequivocal yes, but with an important caveat: it was worth it for my specific goals and learning objectives.
Building a custom solution has provided:
1. **Deep learning opportunities** across the full web development stack
2. **Complete control** over the implementation and feature set
3. **Minimal dependencies** leading to a more maintainable codebase
4. **Tailored workflows** specific to my content creation process
5. **Performance optimizations** focused on my particular use cases
However, I wouldn't recommend this approach for everyone. If your primary goal is to get a site up quickly with minimal development effort, established static site generators offer tremendous value and a wealth of community support.
The key is to align your tooling choices with your specific goals, constraints, and learning objectives. For me, the journey of building and evolving my own static site generator has been as valuable as the destination—a fast, secure, and maintainable website that perfectly suits my needs.
I'd love to hear about your experiences with static site generators, whether custom-built or established solutions. What lessons have you learned? What challenges have you faced? Share your thoughts in the comments or reach out via email.
---
title: "Lessons Learned: One Year with a Custom Static Site Generator"
date: 2025-03-12
tags: [web, development, javascript, static-site, node, tailwind, lessons]
---
It's been just over a year since I [transitioned from Haunt to my own custom static site generator](/content/posts/2025-01-02-from-haunt-to-custom.html) for this website. What started as an experiment to gain more control over my publishing workflow has evolved into a valuable learning experience that has shaped how I approach web development projects.
In this post, I'll share the key lessons I've learned, challenges I've faced, and insights I've gained from building and maintaining my own static site generator.
## The Technical Evolution
### Initial Implementation vs. Current State
When I first built my static site generator, it was a simple Node.js script that converted markdown to HTML and injected it into a template. The feature set was minimal:
- Basic markdown parsing with marked
- Simple templating with string literals
- Manual asset management
- Command-line build process
Today, the system has evolved considerably:
- Enhanced markdown processing with syntax highlighting and custom extensions
- Tailwind CSS integration with optimized builds
- Automated image optimization
- Tag-based organization and filtering
- RSS feed generation
- Incremental builds for faster development
This evolution wasn't planned from the beginning—it emerged organically as I used the system and identified pain points and opportunities for improvement.
### The Power of Incremental Improvements
One of the most valuable lessons I've learned is the power of incremental improvements. Rather than trying to build a comprehensive system upfront, I started with the minimum viable solution and gradually added features as needed.
This approach allowed me to:
1. Get the site up and running quickly
2. Learn from actual usage rather than anticipated needs
3. Focus development efforts on genuine pain points
4. Avoid overengineering and unnecessary complexity
For example, I didn't initially implement an image optimization pipeline. Only after manually optimizing images for several posts did I recognize the value of automating this process. The resulting solution was more practical and tailored to my specific workflow than if I had tried to design it upfront.
## Unexpected Challenges
### Dependency Management
One of the most surprising challenges was dependency management. While I deliberately kept external dependencies minimal, even the few libraries I did use occasionally introduced breaking changes or security vulnerabilities that required attention.
For instance, when updating the marked library for markdown processing, I had to adapt to changes in its API and configuration options. This highlighted the importance of:
- Carefully evaluating dependencies before adoption
- Writing good tests to catch breaking changes
- Considering the long-term maintenance implications of each dependency
### Browser Compatibility
Another unexpected challenge was ensuring browser compatibility. While static sites are generally more resilient than complex web applications, I still encountered issues with:
- CSS features not supported in older browsers
- JavaScript syntax compatibility
- Image format support (particularly with WebP and AVIF formats)
These challenges led me to implement better progressive enhancement strategies and more thorough testing across different browsers and devices.
### Content Management Workflow
Perhaps the most significant challenge was refining the content management workflow. While I initially focused on the technical aspects of generating the site, I quickly realized that the author experience was equally important.
Pain points included:
- Managing front matter consistently
- Previewing content during writing
- Organizing and reusing images
- Maintaining consistent formatting
To address these issues, I developed additional tools and scripts to streamline the content creation process, including a front matter template generator and a live preview server.
## Community Engagement
### Sharing the Journey
One unexpected benefit of building my own static site generator has been the community engagement it has fostered. By documenting my process and sharing code snippets, I've connected with other developers interested in similar approaches.
These interactions have:
- Provided valuable feedback and suggestions
- Inspired new features and improvements
- Created opportunities for collaboration
- Helped others solve similar problems
I've received numerous emails and comments from readers who have adapted aspects of my approach for their own projects, which has been incredibly rewarding.
### Open Source Contributions
Working on my own static site generator has also led to contributions to open source projects. As I encountered limitations or bugs in the libraries I was using, I often found myself submitting pull requests or opening issues.
This has not only improved the tools I rely on but has also deepened my understanding of the broader ecosystem and connected me with other developers working on similar problems.
## Performance Insights
### Build Performance vs. Runtime Performance
An interesting lesson has been the distinction between build performance and runtime performance. Initially, I focused primarily on optimizing the runtime performance of the site—ensuring fast page loads, minimal JavaScript, and optimized assets.
However, as the site grew, build performance became increasingly important. Slow builds hindered the content creation process and made it less enjoyable to update the site.
This led me to implement:
- Incremental builds that only process changed files
- Parallel processing for independent tasks
- Caching of intermediate build artifacts
- More efficient asset processing pipelines
These optimizations significantly improved the development experience without compromising the performance of the published site.
### The Value of Measurement
Another key lesson has been the importance of measurement in performance optimization. Rather than making assumptions about performance bottlenecks, I've learned to rely on data from:
- Lighthouse scores and reports
- Chrome DevTools performance profiles
- Build time measurements
- Real User Monitoring (RUM) data
This data-driven approach has often revealed surprising insights, such as the significant impact of font loading on perceived performance and the importance of optimizing the critical rendering path.
## Security Considerations
Building and maintaining my own static site generator has also deepened my understanding of web security. Even though static sites are inherently more secure than dynamic applications, there are still important considerations:
- Content Security Policy (CSP) implementation
- Secure handling of third-party resources
- Protection against common vulnerabilities in dependencies
- Secure deployment processes (as detailed in my [recent post about my development environment](/content/posts/2025-03-08-my-dev-environment-2025.html))
I've implemented a comprehensive security strategy that includes regular dependency audits, strict CSP headers, and secure deployment practices using GPG encryption for credentials.
## Future Roadmap
As I look to the future of my custom static site generator, several areas of improvement stand out:
### Content Management Improvements
- Better support for content types beyond blog posts
- Enhanced media management
- Improved drafting and scheduling capabilities
- Better support for content updates and versioning
### Build System Enhancements
- Further build performance optimizations
- Better incremental build support
- Improved error reporting and diagnostics
- Integration with modern build tools like esbuild
### Frontend Innovations
- Enhanced progressive enhancement strategies
- Better offline support with service workers
- Improved accessibility features
- More sophisticated interaction patterns without sacrificing performance
## Conclusion: Was It Worth It?
The question I'm most frequently asked about my custom static site generator is whether it was worth the effort compared to using an established solution like Hugo, Eleventy, or Next.js.
My answer is an unequivocal yes, but with an important caveat: it was worth it for my specific goals and learning objectives.
Building a custom solution has provided:
1. **Deep learning opportunities** across the full web development stack
2. **Complete control** over the implementation and feature set
3. **Minimal dependencies** leading to a more maintainable codebase
4. **Tailored workflows** specific to my content creation process
5. **Performance optimizations** focused on my particular use cases
However, I wouldn't recommend this approach for everyone. If your primary goal is to get a site up quickly with minimal development effort, established static site generators offer tremendous value and a wealth of community support.
The key is to align your tooling choices with your specific goals, constraints, and learning objectives. For me, the journey of building and evolving my own static site generator has been as valuable as the destination—a fast, secure, and maintainable website that perfectly suits my needs.
I'd love to hear about your experiences with static site generators, whether custom-built or established solutions. What lessons have you learned? What challenges have you faced? Share your thoughts in the comments or reach out via email.

292
content/posts/2024-04-08-glove80-review.html
View File

@ -1,147 +1,147 @@
<!DOCTYPE html>
<html lang="en" class="bg-base-bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta property="og:title" content=""Aesthetic Meets Ergonomics: My Deep Dive into the Glove80 Keyboard"">
<meta property="og:description" content="">
<meta property="og:url" content="https://glenneth.orgcontent/posts/2024-04-08-glove80-review">
<title>"Aesthetic Meets Ergonomics: My Deep Dive into the Glove80 Keyboard" - Glenn Thompson</title>
<link rel="alternate" type="application/rss+xml" title="Glenn Thompson's Blog" href="/feed.xml" />
<link href="../../dist/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
.prose-palenight {
--tw-prose-body: #bfc7d5;
--tw-prose-headings: #ffd580;
--tw-prose-links: #82aaff;
--tw-prose-code: #c792ea;
--tw-prose-pre-bg: #1b1e2b;
}
.prose h2 {
color: var(--tw-prose-headings);
font-family: Merriweather, serif;
font-weight: 700;
font-size: 1.5rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.prose p {
margin-bottom: 1rem;
line-height: 1.625;
}
.prose a {
color: var(--tw-prose-links);
text-decoration: none;
}
.prose a:hover {
color: #89ddff;
}
.prose code {
color: var(--tw-prose-code);
font-family: 'JetBrains Mono', monospace;
}
.prose pre {
background-color: var(--tw-prose-pre-bg);
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
margin-bottom: 1rem;
}
.prose ul, .prose ol {
margin-top: 0.5rem;
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.prose ul {
list-style-type: disc;
}
.prose ol {
list-style-type: decimal;
}
</style>
</head>
<body class="bg-base-bg text-palenight-50">
<nav class="bg-base-darker/80 backdrop-blur-sm shadow-sm border-b border-palenight-400/20 mb-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="/" class="text-accent-yellow font-serif text-xl font-bold">Glenn Thompson</a>
<div class="flex items-center gap-2 text-accent-yellow text-sm font-bold">
<span>["personal", "tech", "keyboards", "glove80"]</span>
<span>•</span>
<time datetime=""2024-04-08 16:50"">Invalid Date</time>
<span>•</span>
<span>5 min read</span>
</div>
</div>
</div>
</nav>
<main class="pt-24 pb-16 px-4">
<div class="max-w-4xl mx-auto">
<div class="content text-palenight-100 space-y-6">
<header class="mb-8">
<h1 class="text-4xl font-serif font-bold text-accent-yellow">"Aesthetic Meets Ergonomics: My Deep Dive into the Glove80 Keyboard"</h1>
<div class="flex items-center gap-4 text-palenight-300 mt-4">
<time datetime=""2024-04-08 16:50"">"2024-04-08 16:50"</time>
<span>•</span>
<span>5 min read</span>
<span>•</span>
<span>By "Glenn Thompson"</span>
</div>
<div class="flex flex-wrap gap-2 mt-4">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">["personal"</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">"tech"</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">"keyboards"</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">"glove80"]</span>
</div>
</header>
<article class="prose prose-palenight max-w-none">
<h2>In the quest for the ultimate ergonomic keyboard, aesthetics often take a backseat to functionality. Yet, when I first laid eyes on the Glove80, I was struck by its elegant design—a refreshing departure from the utilitarian look typical of many ergonomic keyboards. Unlike the retro vibes of the Kinesis Advantage or the DIY aesthetics of most Dactyls, the Glove80 boasts a modern, sleek appearance that complements the contemporary design language of Apple, Google, and LG devices. With its clean lines and visually appealing legends, the Glove80 not only promises ergonomic comfort but does so with style, standing out amidst a sea of competitors.</h2>
<p>As my career trajectory veered from being an integral member of an electrical engineering team to assuming the role of Deputy Project Manager, the nature of my daily activities underwent a significant transformation. The hands-on tasks of yesteryears were gradually replaced by a deluge of documentations—writing, reviewing, and endless typing. This shift brought with it an unwelcome companion: discomfort in my hands and wrists, a stark reminder of the ergonomic pitfalls of conventional keyboards. It was in this context that my quest for a more ergonomic typing solution began, leading me towards the world of ALICE layout keyboards, with the <a href="https://www.keychron.com/products/keychron-q10-pro-alice-layout-qmk-via-wireless-custom-mechanical-keyboard"><strong>Q10 Pro</strong> by Keychron</a> being my initial foray into this new realm.</p>
<p>However, the relief was partial, and the shadow of wrist strain persisted, urging me to delve deeper into the ergonomic keyboard universe. My search for a truly ergonomic solution brought me to the doorstep of the <a href="https://www.moergo.com"><strong>Glove80</strong> by MoErgo</a>. Boasting a unique split design, concave key wells, and a commitment to ergonomics that seemed almost tailor-made for my situation, the Glove80 held the promise of being the oasis I was desperately seeking in the desert of my wrist discomfort.</p>
<p>This journey from an ALICE layout keyboard user to a Glove80 enthusiast was not just about finding a better typing tool; it was about embracing a healthier typing posture and redefining my interaction with computers. After a month of integrating the Glove80 into my workflow, I&#39;m ready to share my insights and experiences. This review will explore the initial adaptation period, the impact on my wrist health, and whether the Glove80 lives up to its promise as an ergonomic game-changer.</p>
<h3>First Impressions: Feel and Experience</h3>
<p>Upon beginning my typing journey with the Glove80, two aspects immediately stood out. The unique choc spacing, combined with finger-specific curves for each key column, facilitated effortless access to the bottom and number rows, as well as several function keys—without the need to move my hands. This ease of reach extended to the thumb keys, thoughtfully laid out in an arc to match the natural movement of my thumbs. Additionally, the keyboard&#39;s low profile on the desk encouraged a neutral wrist position, enhancing comfort during long typing sessions. These features converged to create a typing experience that was not just comfortable but intuitively aligned with natural hand movements.</p>
<h4>The Details That Matter</h4>
<h5>Ergonomics at Its Core</h5>
<p>The hallmark of the Glove80 is its ergonomics, designed to seamlessly integrate with the user&#39;s hand movements. After fine-tuning the tenting and tilting angles—made possible by the adjustable feet on each half of the keyboard—my hands naturally fell into the optimal typing position. The thoughtfully designed key layout meant that reaching for higher rows required merely straightening or curling my fingers, aided by the keyboard&#39;s choc spacing. Each column&#39;s unique height and curve catered to the different lengths of my fingers, further minimizing strain.</p>
<h5>Key Innovations</h5>
<p>The Glove80 introduces keycaps with a novel MCC profile, featuring raised sides and a central cylindrical channel, made from a slick POM material. This design supports the natural sliding of fingers across keys, reducing the need to lift hands while typing. The keyboard&#39;s thumb clusters are another highlight, offering six easily accessible keys per hand. This ergonomic layout ensures that most keys are within reach without stretching, a testament to the keyboard&#39;s user-centric design.</p>
<h5>Beyond Typing: Features and Flexibility</h5>
<ul>
<li><strong>Tenting and Adjustability:</strong> The Glove80&#39;s customizable tenting angles, enhanced by sturdy locking nuts, ensure a tailored typing experience that can be finely adjusted to individual preferences.</li>
<li><strong>Comfortable Palm Rest:</strong> The integrated, detachable palm rest offers additional comfort, catering to different typing styles with ease.</li>
<li><strong>Switch Selection:</strong> While the standard Kailh choc switches are adequate, enthusiasts might prefer customizing their keyboard with preferred switches for an optimized typing feel. I opted for the lighter Kailh Choc V1, Red Pro Linear 35gf switches.</li>
<li><strong>Keycaps:</strong> The high-quality POM keycaps, combined with attractive and durable legends, enhance the keyboard&#39;s tactile and visual appeal.</li>
<li><strong>Tech-Savvy Features:</strong> From its easy-to-use firmware updates via a web interface to seamless Bluetooth connectivity and impressive battery life, the Glove80 is designed for a modern, wireless world.</li>
<li><strong>RGB Lighting:</strong> While currently limited in customization, the RGB LEDs offer aesthetic versatility to match any setup.</li>
</ul>
<h3>Concluding Thoughts</h3>
<p>The Glove80 keyboard represents a significant leap forward in ergonomic design, marrying aesthetics with unmatched comfort and functionality. Its thoughtful features—from the infinitely adjustable tenting to the innovative keycap design—set a new standard for what ergonomic keyboards can be. While there&#39;s room for improvement in switch selection and RGB customization, these are minor quibbles in an otherwise outstanding product. For those in search of ergonomic excellence without compromising on style or performance, the Glove80 is an investment worth making, promising a typing experience that&#39;s not just comfortable but truly enjoyable.</p>
</article>
</div>
</div>
</main>
<footer class="bg-base-darker text-palenight-200 py-12 border-t border-palenight-400/20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<p class="text-palenight-300">&copy; 2024 Glenn Thompson. All rights reserved.</p>
<div class="webring-text mt-6">
<p class="text-palenight-300">I am part of the <a href="https://systemcrafters.net" target="_blank" class="text-accent-blue hover:text-accent-cyan">System Crafters</a> webring:</p>
</div>
<div class="craftering mt-2 flex items-center justify-center gap-4 text-accent-blue">
<a href="https://craftering.systemcrafters.net/@glenneth/previous" class="hover:text-accent-cyan">Previous</a>
<a href="https://craftering.systemcrafters.net/@glenneth" class="hover:text-accent-cyan">Random</a>
<a href="https://craftering.systemcrafters.net/@glenneth/next" class="hover:text-accent-cyan">Next</a>
</div>
<p class="text-palenight-300 mt-2">
<a href="mailto:glenn@glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenn@glenneth.org</a> |
<a href="https://glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenneth.org</a>
</p>
</div>
</div>
</footer>
</body>
<!DOCTYPE html>
<html lang="en" class="bg-base-bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta property="og:title" content=""Aesthetic Meets Ergonomics: My Deep Dive into the Glove80 Keyboard"">
<meta property="og:description" content="">
<meta property="og:url" content="https://glenneth.orgcontent/posts/2024-04-08-glove80-review">
<title>"Aesthetic Meets Ergonomics: My Deep Dive into the Glove80 Keyboard" - Glenn Thompson</title>
<link rel="alternate" type="application/rss+xml" title="Glenn Thompson's Blog" href="/feed.xml" />
<link href="../../dist/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
.prose-palenight {
--tw-prose-body: #bfc7d5;
--tw-prose-headings: #ffd580;
--tw-prose-links: #82aaff;
--tw-prose-code: #c792ea;
--tw-prose-pre-bg: #1b1e2b;
}
.prose h2 {
color: var(--tw-prose-headings);
font-family: Merriweather, serif;
font-weight: 700;
font-size: 1.5rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.prose p {
margin-bottom: 1rem;
line-height: 1.625;
}
.prose a {
color: var(--tw-prose-links);
text-decoration: none;
}
.prose a:hover {
color: #89ddff;
}
.prose code {
color: var(--tw-prose-code);
font-family: 'JetBrains Mono', monospace;
}
.prose pre {
background-color: var(--tw-prose-pre-bg);
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
margin-bottom: 1rem;
}
.prose ul, .prose ol {
margin-top: 0.5rem;
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.prose ul {
list-style-type: disc;
}
.prose ol {
list-style-type: decimal;
}
</style>
</head>
<body class="bg-base-bg text-palenight-50">
<nav class="bg-base-darker/80 backdrop-blur-sm shadow-sm border-b border-palenight-400/20 mb-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="/" class="text-accent-yellow font-serif text-xl font-bold">Glenn Thompson</a>
<div class="flex items-center gap-2 text-accent-yellow text-sm font-bold">
<span>["personal", "tech", "keyboards", "glove80"]</span>
<span>•</span>
<time datetime=""2024-04-08 16:50"">Invalid Date</time>
<span>•</span>
<span>5 min read</span>
</div>
</div>
</div>
</nav>
<main class="pt-24 pb-16 px-4">
<div class="max-w-4xl mx-auto">
<div class="content text-palenight-100 space-y-6">
<header class="mb-8">
<h1 class="text-4xl font-serif font-bold text-accent-yellow">"Aesthetic Meets Ergonomics: My Deep Dive into the Glove80 Keyboard"</h1>
<div class="flex items-center gap-4 text-palenight-300 mt-4">
<time datetime=""2024-04-08 16:50"">"2024-04-08 16:50"</time>
<span>•</span>
<span>5 min read</span>
<span>•</span>
<span>By "Glenn Thompson"</span>
</div>
<div class="flex flex-wrap gap-2 mt-4">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">["personal"</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">"tech"</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">"keyboards"</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">"glove80"]</span>
</div>
</header>
<article class="prose prose-palenight max-w-none">
<h2>In the quest for the ultimate ergonomic keyboard, aesthetics often take a backseat to functionality. Yet, when I first laid eyes on the Glove80, I was struck by its elegant design—a refreshing departure from the utilitarian look typical of many ergonomic keyboards. Unlike the retro vibes of the Kinesis Advantage or the DIY aesthetics of most Dactyls, the Glove80 boasts a modern, sleek appearance that complements the contemporary design language of Apple, Google, and LG devices. With its clean lines and visually appealing legends, the Glove80 not only promises ergonomic comfort but does so with style, standing out amidst a sea of competitors.</h2>
<p>As my career trajectory veered from being an integral member of an electrical engineering team to assuming the role of Deputy Project Manager, the nature of my daily activities underwent a significant transformation. The hands-on tasks of yesteryears were gradually replaced by a deluge of documentations—writing, reviewing, and endless typing. This shift brought with it an unwelcome companion: discomfort in my hands and wrists, a stark reminder of the ergonomic pitfalls of conventional keyboards. It was in this context that my quest for a more ergonomic typing solution began, leading me towards the world of ALICE layout keyboards, with the <a href="https://www.keychron.com/products/keychron-q10-pro-alice-layout-qmk-via-wireless-custom-mechanical-keyboard"><strong>Q10 Pro</strong> by Keychron</a> being my initial foray into this new realm.</p>
<p>However, the relief was partial, and the shadow of wrist strain persisted, urging me to delve deeper into the ergonomic keyboard universe. My search for a truly ergonomic solution brought me to the doorstep of the <a href="https://www.moergo.com"><strong>Glove80</strong> by MoErgo</a>. Boasting a unique split design, concave key wells, and a commitment to ergonomics that seemed almost tailor-made for my situation, the Glove80 held the promise of being the oasis I was desperately seeking in the desert of my wrist discomfort.</p>
<p>This journey from an ALICE layout keyboard user to a Glove80 enthusiast was not just about finding a better typing tool; it was about embracing a healthier typing posture and redefining my interaction with computers. After a month of integrating the Glove80 into my workflow, I&#39;m ready to share my insights and experiences. This review will explore the initial adaptation period, the impact on my wrist health, and whether the Glove80 lives up to its promise as an ergonomic game-changer.</p>
<h3>First Impressions: Feel and Experience</h3>
<p>Upon beginning my typing journey with the Glove80, two aspects immediately stood out. The unique choc spacing, combined with finger-specific curves for each key column, facilitated effortless access to the bottom and number rows, as well as several function keys—without the need to move my hands. This ease of reach extended to the thumb keys, thoughtfully laid out in an arc to match the natural movement of my thumbs. Additionally, the keyboard&#39;s low profile on the desk encouraged a neutral wrist position, enhancing comfort during long typing sessions. These features converged to create a typing experience that was not just comfortable but intuitively aligned with natural hand movements.</p>
<h4>The Details That Matter</h4>
<h5>Ergonomics at Its Core</h5>
<p>The hallmark of the Glove80 is its ergonomics, designed to seamlessly integrate with the user&#39;s hand movements. After fine-tuning the tenting and tilting angles—made possible by the adjustable feet on each half of the keyboard—my hands naturally fell into the optimal typing position. The thoughtfully designed key layout meant that reaching for higher rows required merely straightening or curling my fingers, aided by the keyboard&#39;s choc spacing. Each column&#39;s unique height and curve catered to the different lengths of my fingers, further minimizing strain.</p>
<h5>Key Innovations</h5>
<p>The Glove80 introduces keycaps with a novel MCC profile, featuring raised sides and a central cylindrical channel, made from a slick POM material. This design supports the natural sliding of fingers across keys, reducing the need to lift hands while typing. The keyboard&#39;s thumb clusters are another highlight, offering six easily accessible keys per hand. This ergonomic layout ensures that most keys are within reach without stretching, a testament to the keyboard&#39;s user-centric design.</p>
<h5>Beyond Typing: Features and Flexibility</h5>
<ul>
<li><strong>Tenting and Adjustability:</strong> The Glove80&#39;s customizable tenting angles, enhanced by sturdy locking nuts, ensure a tailored typing experience that can be finely adjusted to individual preferences.</li>
<li><strong>Comfortable Palm Rest:</strong> The integrated, detachable palm rest offers additional comfort, catering to different typing styles with ease.</li>
<li><strong>Switch Selection:</strong> While the standard Kailh choc switches are adequate, enthusiasts might prefer customizing their keyboard with preferred switches for an optimized typing feel. I opted for the lighter Kailh Choc V1, Red Pro Linear 35gf switches.</li>
<li><strong>Keycaps:</strong> The high-quality POM keycaps, combined with attractive and durable legends, enhance the keyboard&#39;s tactile and visual appeal.</li>
<li><strong>Tech-Savvy Features:</strong> From its easy-to-use firmware updates via a web interface to seamless Bluetooth connectivity and impressive battery life, the Glove80 is designed for a modern, wireless world.</li>
<li><strong>RGB Lighting:</strong> While currently limited in customization, the RGB LEDs offer aesthetic versatility to match any setup.</li>
</ul>
<h3>Concluding Thoughts</h3>
<p>The Glove80 keyboard represents a significant leap forward in ergonomic design, marrying aesthetics with unmatched comfort and functionality. Its thoughtful features—from the infinitely adjustable tenting to the innovative keycap design—set a new standard for what ergonomic keyboards can be. While there&#39;s room for improvement in switch selection and RGB customization, these are minor quibbles in an otherwise outstanding product. For those in search of ergonomic excellence without compromising on style or performance, the Glove80 is an investment worth making, promising a typing experience that&#39;s not just comfortable but truly enjoyable.</p>
</article>
</div>
</div>
</main>
<footer class="bg-base-darker text-palenight-200 py-12 border-t border-palenight-400/20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<p class="text-palenight-300">&copy; 2024 Glenn Thompson. All rights reserved.</p>
<div class="webring-text mt-6">
<p class="text-palenight-300">I am part of the <a href="https://systemcrafters.net" target="_blank" class="text-accent-blue hover:text-accent-cyan">System Crafters</a> webring:</p>
</div>
<div class="craftering mt-2 flex items-center justify-center gap-4 text-accent-blue">
<a href="https://craftering.systemcrafters.net/@glenneth/previous" class="hover:text-accent-cyan">Previous</a>
<a href="https://craftering.systemcrafters.net/@glenneth" class="hover:text-accent-cyan">Random</a>
<a href="https://craftering.systemcrafters.net/@glenneth/next" class="hover:text-accent-cyan">Next</a>
</div>
<p class="text-palenight-300 mt-2">
<a href="mailto:glenn@glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenn@glenneth.org</a> |
<a href="https://glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenneth.org</a>
</p>
</div>
</div>
</footer>
</body>
</html>

82
content/posts/2024-04-08-glove80-review.md
View File

@ -1,41 +1,41 @@
---
title: "Aesthetic Meets Ergonomics: My Deep Dive into the Glove80 Keyboard"
author: "Glenn Thompson"
date: "2024-04-08 16:50"
tags: ["personal", "tech", "keyboards", "glove80"]
---
## In the quest for the ultimate ergonomic keyboard, aesthetics often take a backseat to functionality. Yet, when I first laid eyes on the Glove80, I was struck by its elegant design—a refreshing departure from the utilitarian look typical of many ergonomic keyboards. Unlike the retro vibes of the Kinesis Advantage or the DIY aesthetics of most Dactyls, the Glove80 boasts a modern, sleek appearance that complements the contemporary design language of Apple, Google, and LG devices. With its clean lines and visually appealing legends, the Glove80 not only promises ergonomic comfort but does so with style, standing out amidst a sea of competitors.
As my career trajectory veered from being an integral member of an electrical engineering team to assuming the role of Deputy Project Manager, the nature of my daily activities underwent a significant transformation. The hands-on tasks of yesteryears were gradually replaced by a deluge of documentations—writing, reviewing, and endless typing. This shift brought with it an unwelcome companion: discomfort in my hands and wrists, a stark reminder of the ergonomic pitfalls of conventional keyboards. It was in this context that my quest for a more ergonomic typing solution began, leading me towards the world of ALICE layout keyboards, with the [**Q10 Pro** by Keychron](https://www.keychron.com/products/keychron-q10-pro-alice-layout-qmk-via-wireless-custom-mechanical-keyboard) being my initial foray into this new realm.
However, the relief was partial, and the shadow of wrist strain persisted, urging me to delve deeper into the ergonomic keyboard universe. My search for a truly ergonomic solution brought me to the doorstep of the [**Glove80** by MoErgo](https://www.moergo.com). Boasting a unique split design, concave key wells, and a commitment to ergonomics that seemed almost tailor-made for my situation, the Glove80 held the promise of being the oasis I was desperately seeking in the desert of my wrist discomfort.
This journey from an ALICE layout keyboard user to a Glove80 enthusiast was not just about finding a better typing tool; it was about embracing a healthier typing posture and redefining my interaction with computers. After a month of integrating the Glove80 into my workflow, I'm ready to share my insights and experiences. This review will explore the initial adaptation period, the impact on my wrist health, and whether the Glove80 lives up to its promise as an ergonomic game-changer.
### First Impressions: Feel and Experience
Upon beginning my typing journey with the Glove80, two aspects immediately stood out. The unique choc spacing, combined with finger-specific curves for each key column, facilitated effortless access to the bottom and number rows, as well as several function keys—without the need to move my hands. This ease of reach extended to the thumb keys, thoughtfully laid out in an arc to match the natural movement of my thumbs. Additionally, the keyboard's low profile on the desk encouraged a neutral wrist position, enhancing comfort during long typing sessions. These features converged to create a typing experience that was not just comfortable but intuitively aligned with natural hand movements.
#### The Details That Matter
##### Ergonomics at Its Core
The hallmark of the Glove80 is its ergonomics, designed to seamlessly integrate with the user's hand movements. After fine-tuning the tenting and tilting angles—made possible by the adjustable feet on each half of the keyboard—my hands naturally fell into the optimal typing position. The thoughtfully designed key layout meant that reaching for higher rows required merely straightening or curling my fingers, aided by the keyboard's choc spacing. Each column's unique height and curve catered to the different lengths of my fingers, further minimizing strain.
##### Key Innovations
The Glove80 introduces keycaps with a novel MCC profile, featuring raised sides and a central cylindrical channel, made from a slick POM material. This design supports the natural sliding of fingers across keys, reducing the need to lift hands while typing. The keyboard's thumb clusters are another highlight, offering six easily accessible keys per hand. This ergonomic layout ensures that most keys are within reach without stretching, a testament to the keyboard's user-centric design.
##### Beyond Typing: Features and Flexibility
- **Tenting and Adjustability:** The Glove80's customizable tenting angles, enhanced by sturdy locking nuts, ensure a tailored typing experience that can be finely adjusted to individual preferences.
- **Comfortable Palm Rest:** The integrated, detachable palm rest offers additional comfort, catering to different typing styles with ease.
- **Switch Selection:** While the standard Kailh choc switches are adequate, enthusiasts might prefer customizing their keyboard with preferred switches for an optimized typing feel. I opted for the lighter Kailh Choc V1, Red Pro Linear 35gf switches.
- **Keycaps:** The high-quality POM keycaps, combined with attractive and durable legends, enhance the keyboard's tactile and visual appeal.
- **Tech-Savvy Features:** From its easy-to-use firmware updates via a web interface to seamless Bluetooth connectivity and impressive battery life, the Glove80 is designed for a modern, wireless world.
- **RGB Lighting:** While currently limited in customization, the RGB LEDs offer aesthetic versatility to match any setup.
### Concluding Thoughts
The Glove80 keyboard represents a significant leap forward in ergonomic design, marrying aesthetics with unmatched comfort and functionality. Its thoughtful features—from the infinitely adjustable tenting to the innovative keycap design—set a new standard for what ergonomic keyboards can be. While there's room for improvement in switch selection and RGB customization, these are minor quibbles in an otherwise outstanding product. For those in search of ergonomic excellence without compromising on style or performance, the Glove80 is an investment worth making, promising a typing experience that's not just comfortable but truly enjoyable.
---
title: "Aesthetic Meets Ergonomics: My Deep Dive into the Glove80 Keyboard"
author: "Glenn Thompson"
date: "2024-04-08 16:50"
tags: ["personal", "tech", "keyboards", "glove80"]
---
## In the quest for the ultimate ergonomic keyboard, aesthetics often take a backseat to functionality. Yet, when I first laid eyes on the Glove80, I was struck by its elegant design—a refreshing departure from the utilitarian look typical of many ergonomic keyboards. Unlike the retro vibes of the Kinesis Advantage or the DIY aesthetics of most Dactyls, the Glove80 boasts a modern, sleek appearance that complements the contemporary design language of Apple, Google, and LG devices. With its clean lines and visually appealing legends, the Glove80 not only promises ergonomic comfort but does so with style, standing out amidst a sea of competitors.
As my career trajectory veered from being an integral member of an electrical engineering team to assuming the role of Deputy Project Manager, the nature of my daily activities underwent a significant transformation. The hands-on tasks of yesteryears were gradually replaced by a deluge of documentations—writing, reviewing, and endless typing. This shift brought with it an unwelcome companion: discomfort in my hands and wrists, a stark reminder of the ergonomic pitfalls of conventional keyboards. It was in this context that my quest for a more ergonomic typing solution began, leading me towards the world of ALICE layout keyboards, with the [**Q10 Pro** by Keychron](https://www.keychron.com/products/keychron-q10-pro-alice-layout-qmk-via-wireless-custom-mechanical-keyboard) being my initial foray into this new realm.
However, the relief was partial, and the shadow of wrist strain persisted, urging me to delve deeper into the ergonomic keyboard universe. My search for a truly ergonomic solution brought me to the doorstep of the [**Glove80** by MoErgo](https://www.moergo.com). Boasting a unique split design, concave key wells, and a commitment to ergonomics that seemed almost tailor-made for my situation, the Glove80 held the promise of being the oasis I was desperately seeking in the desert of my wrist discomfort.
This journey from an ALICE layout keyboard user to a Glove80 enthusiast was not just about finding a better typing tool; it was about embracing a healthier typing posture and redefining my interaction with computers. After a month of integrating the Glove80 into my workflow, I'm ready to share my insights and experiences. This review will explore the initial adaptation period, the impact on my wrist health, and whether the Glove80 lives up to its promise as an ergonomic game-changer.
### First Impressions: Feel and Experience
Upon beginning my typing journey with the Glove80, two aspects immediately stood out. The unique choc spacing, combined with finger-specific curves for each key column, facilitated effortless access to the bottom and number rows, as well as several function keys—without the need to move my hands. This ease of reach extended to the thumb keys, thoughtfully laid out in an arc to match the natural movement of my thumbs. Additionally, the keyboard's low profile on the desk encouraged a neutral wrist position, enhancing comfort during long typing sessions. These features converged to create a typing experience that was not just comfortable but intuitively aligned with natural hand movements.
#### The Details That Matter
##### Ergonomics at Its Core
The hallmark of the Glove80 is its ergonomics, designed to seamlessly integrate with the user's hand movements. After fine-tuning the tenting and tilting angles—made possible by the adjustable feet on each half of the keyboard—my hands naturally fell into the optimal typing position. The thoughtfully designed key layout meant that reaching for higher rows required merely straightening or curling my fingers, aided by the keyboard's choc spacing. Each column's unique height and curve catered to the different lengths of my fingers, further minimizing strain.
##### Key Innovations
The Glove80 introduces keycaps with a novel MCC profile, featuring raised sides and a central cylindrical channel, made from a slick POM material. This design supports the natural sliding of fingers across keys, reducing the need to lift hands while typing. The keyboard's thumb clusters are another highlight, offering six easily accessible keys per hand. This ergonomic layout ensures that most keys are within reach without stretching, a testament to the keyboard's user-centric design.
##### Beyond Typing: Features and Flexibility
- **Tenting and Adjustability:** The Glove80's customizable tenting angles, enhanced by sturdy locking nuts, ensure a tailored typing experience that can be finely adjusted to individual preferences.
- **Comfortable Palm Rest:** The integrated, detachable palm rest offers additional comfort, catering to different typing styles with ease.
- **Switch Selection:** While the standard Kailh choc switches are adequate, enthusiasts might prefer customizing their keyboard with preferred switches for an optimized typing feel. I opted for the lighter Kailh Choc V1, Red Pro Linear 35gf switches.
- **Keycaps:** The high-quality POM keycaps, combined with attractive and durable legends, enhance the keyboard's tactile and visual appeal.
- **Tech-Savvy Features:** From its easy-to-use firmware updates via a web interface to seamless Bluetooth connectivity and impressive battery life, the Glove80 is designed for a modern, wireless world.
- **RGB Lighting:** While currently limited in customization, the RGB LEDs offer aesthetic versatility to match any setup.
### Concluding Thoughts
The Glove80 keyboard represents a significant leap forward in ergonomic design, marrying aesthetics with unmatched comfort and functionality. Its thoughtful features—from the infinitely adjustable tenting to the innovative keycap design—set a new standard for what ergonomic keyboards can be. While there's room for improvement in switch selection and RGB customization, these are minor quibbles in an otherwise outstanding product. For those in search of ergonomic excellence without compromising on style or performance, the Glove80 is an investment worth making, promising a typing experience that's not just comfortable but truly enjoyable.

278
content/posts/2024-05-01-amman-newcastle-journey.html
View File

@ -1,140 +1,140 @@
<!DOCTYPE html>
<html lang="en" class="bg-base-bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta property="og:title" content="A Rollercoaster Week: From Amman to Newcastle, and back again">
<meta property="og:description" content="">
<meta property="og:url" content="https://glenneth.orgcontent/posts/2024-05-01-amman-newcastle-journey">
<title>A Rollercoaster Week: From Amman to Newcastle, and back again - Glenn Thompson</title>
<link rel="alternate" type="application/rss+xml" title="Glenn Thompson's Blog" href="/feed.xml" />
<link href="../../dist/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
.prose-palenight {
--tw-prose-body: #bfc7d5;
--tw-prose-headings: #ffd580;
--tw-prose-links: #82aaff;
--tw-prose-code: #c792ea;
--tw-prose-pre-bg: #1b1e2b;
}
.prose h2 {
color: var(--tw-prose-headings);
font-family: Merriweather, serif;
font-weight: 700;
font-size: 1.5rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.prose p {
margin-bottom: 1rem;
line-height: 1.625;
}
.prose a {
color: var(--tw-prose-links);
text-decoration: none;
}
.prose a:hover {
color: #89ddff;
}
.prose code {
color: var(--tw-prose-code);
font-family: 'JetBrains Mono', monospace;
}
.prose pre {
background-color: var(--tw-prose-pre-bg);
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
margin-bottom: 1rem;
}
.prose ul, .prose ol {
margin-top: 0.5rem;
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.prose ul {
list-style-type: disc;
}
.prose ol {
list-style-type: decimal;
}
</style>
</head>
<body class="bg-base-bg text-palenight-50">
<nav class="bg-base-darker/80 backdrop-blur-sm shadow-sm border-b border-palenight-400/20 mb-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="/" class="text-accent-yellow font-serif text-xl font-bold">Glenn Thompson</a>
<div class="flex items-center gap-2 text-accent-yellow text-sm font-bold">
<span>work, travel</span>
<span>•</span>
<time datetime="2024-05-01 17:40:58+03:00">May 1, 2024</time>
<span>•</span>
<span>3 min read</span>
</div>
</div>
</div>
</nav>
<main class="pt-24 pb-16 px-4">
<div class="max-w-4xl mx-auto">
<div class="content text-palenight-100 space-y-6">
<header class="mb-8">
<h1 class="text-4xl font-serif font-bold text-accent-yellow">A Rollercoaster Week: From Amman to Newcastle, and back again</h1>
<div class="flex items-center gap-4 text-palenight-300 mt-4">
<time datetime="2024-05-01 17:40:58+03:00">2024-05-01 17:40:58+03:00</time>
<span>•</span>
<span>3 min read</span>
<span>•</span>
<span>By Glenn Thompson</span>
</div>
<div class="flex flex-wrap gap-2 mt-4">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">work</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">travel</span>
</div>
</header>
<article class="prose prose-palenight max-w-none">
<p>Two weeks ago was a whirlwind of events, taking me from the conforting embrace of Amman, Jordan to the vibrant streets of Newcastle, England. It was a journey filled with highs and lows, professional achievements, and personal challenges.</p>
<h2>The Journey Begins</h2>
<p>It all started on a Monday morning in Amman as I embarked on a journey to attend a Quality Control (QC) conference in Newcastle. The anticipation of presenting my work at an international forum filled me with excitement and nerves. The conference was scheduled for just one day, but the impact it had on me would last much longer.</p>
<h2>A Successful Presentation</h2>
<p>Tuesday arrived, and with it came the day of the conference. Armed with a PowerPoint presentation comprising over 130 slides, I delved into four hours of intense presenting. Despite the pressure, the conference was a resounding success. My project received positive feedback, and I felt a sense of accomplishment as I shared my work with colleagues from around the world.</p>
<h2>The Toll of Travel</h2>
<p>However, as I returned to Amman on Wednesday, I couldn&#39;t shake off a sense of exhaustion. Little did I know that the toll of travel would soon manifest itself in a most unexpected manner. </p>
<p>Thursday morning greeted me with heavy flu-like symptoms. It hit me like a ton of bricks. The combination of jet lag, long hours of presenting, and exposure to new environments had taken its toll on my immune system. I was bedridden, grappling with a chesty cough that seemed relentless.</p>
<h2>The Show Must Go On</h2>
<p>Despite my illness, there was no time for rest. The following week demanded my presence at a site meeting where I was tasked with condensing my extensive slide deck into a concise presentation of just 12 slides. The challenge was daunting, but I tackled it with determination.</p>
<h2>Reflecting on the Journey</h2>
<p>As I look back on the rollercoaster week that was, I&#39;m struck by the juxtaposition of success and struggle. From the heights of presenting at an international conference to the lows of battling illness, it was a journey that tested my resilience and resolve.</p>
<p>But through it all, one thing remains clear: adversity only serves to make us stronger. Each obstacle we overcome, whether professional or personal, contributes to our growth and development.</p>
<p>So here&#39;s to the rollercoaster weeks, the ones filled with ups and downs, twists and turns. For it is in those moments of challenge that we discover the true extent of our capabilities.</p>
<p>As I upload this blog post using Hugo, I do so with a renewed sense of gratitude for the journey and all it has taught me. Here&#39;s to embracing the ride, wherever it may take us.</p>
</article>
</div>
</div>
</main>
<footer class="bg-base-darker text-palenight-200 py-12 border-t border-palenight-400/20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<p class="text-palenight-300">&copy; 2024 Glenn Thompson. All rights reserved.</p>
<div class="webring-text mt-6">
<p class="text-palenight-300">I am part of the <a href="https://systemcrafters.net" target="_blank" class="text-accent-blue hover:text-accent-cyan">System Crafters</a> webring:</p>
</div>
<div class="craftering mt-2 flex items-center justify-center gap-4 text-accent-blue">
<a href="https://craftering.systemcrafters.net/@glenneth/previous" class="hover:text-accent-cyan">Previous</a>
<a href="https://craftering.systemcrafters.net/@glenneth" class="hover:text-accent-cyan">Random</a>
<a href="https://craftering.systemcrafters.net/@glenneth/next" class="hover:text-accent-cyan">Next</a>
</div>
<p class="text-palenight-300 mt-2">
<a href="mailto:glenn@glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenn@glenneth.org</a> |
<a href="https://glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenneth.org</a>
</p>
</div>
</div>
</footer>
</body>
<!DOCTYPE html>
<html lang="en" class="bg-base-bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta property="og:title" content="A Rollercoaster Week: From Amman to Newcastle, and back again">
<meta property="og:description" content="">
<meta property="og:url" content="https://glenneth.orgcontent/posts/2024-05-01-amman-newcastle-journey">
<title>A Rollercoaster Week: From Amman to Newcastle, and back again - Glenn Thompson</title>
<link rel="alternate" type="application/rss+xml" title="Glenn Thompson's Blog" href="/feed.xml" />
<link href="../../dist/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
.prose-palenight {
--tw-prose-body: #bfc7d5;
--tw-prose-headings: #ffd580;
--tw-prose-links: #82aaff;
--tw-prose-code: #c792ea;
--tw-prose-pre-bg: #1b1e2b;
}
.prose h2 {
color: var(--tw-prose-headings);
font-family: Merriweather, serif;
font-weight: 700;
font-size: 1.5rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.prose p {
margin-bottom: 1rem;
line-height: 1.625;
}
.prose a {
color: var(--tw-prose-links);
text-decoration: none;
}
.prose a:hover {
color: #89ddff;
}
.prose code {
color: var(--tw-prose-code);
font-family: 'JetBrains Mono', monospace;
}
.prose pre {
background-color: var(--tw-prose-pre-bg);
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
margin-bottom: 1rem;
}
.prose ul, .prose ol {
margin-top: 0.5rem;
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.prose ul {
list-style-type: disc;
}
.prose ol {
list-style-type: decimal;
}
</style>
</head>
<body class="bg-base-bg text-palenight-50">
<nav class="bg-base-darker/80 backdrop-blur-sm shadow-sm border-b border-palenight-400/20 mb-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="/" class="text-accent-yellow font-serif text-xl font-bold">Glenn Thompson</a>
<div class="flex items-center gap-2 text-accent-yellow text-sm font-bold">
<span>work, travel</span>
<span>•</span>
<time datetime="2024-05-01 17:40:58+03:00">May 1, 2024</time>
<span>•</span>
<span>3 min read</span>
</div>
</div>
</div>
</nav>
<main class="pt-24 pb-16 px-4">
<div class="max-w-4xl mx-auto">
<div class="content text-palenight-100 space-y-6">
<header class="mb-8">
<h1 class="text-4xl font-serif font-bold text-accent-yellow">A Rollercoaster Week: From Amman to Newcastle, and back again</h1>
<div class="flex items-center gap-4 text-palenight-300 mt-4">
<time datetime="2024-05-01 17:40:58+03:00">2024-05-01 17:40:58+03:00</time>
<span>•</span>
<span>3 min read</span>
<span>•</span>
<span>By Glenn Thompson</span>
</div>
<div class="flex flex-wrap gap-2 mt-4">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">work</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">travel</span>
</div>
</header>
<article class="prose prose-palenight max-w-none">
<p>Two weeks ago was a whirlwind of events, taking me from the conforting embrace of Amman, Jordan to the vibrant streets of Newcastle, England. It was a journey filled with highs and lows, professional achievements, and personal challenges.</p>
<h2>The Journey Begins</h2>
<p>It all started on a Monday morning in Amman as I embarked on a journey to attend a Quality Control (QC) conference in Newcastle. The anticipation of presenting my work at an international forum filled me with excitement and nerves. The conference was scheduled for just one day, but the impact it had on me would last much longer.</p>
<h2>A Successful Presentation</h2>
<p>Tuesday arrived, and with it came the day of the conference. Armed with a PowerPoint presentation comprising over 130 slides, I delved into four hours of intense presenting. Despite the pressure, the conference was a resounding success. My project received positive feedback, and I felt a sense of accomplishment as I shared my work with colleagues from around the world.</p>
<h2>The Toll of Travel</h2>
<p>However, as I returned to Amman on Wednesday, I couldn&#39;t shake off a sense of exhaustion. Little did I know that the toll of travel would soon manifest itself in a most unexpected manner. </p>
<p>Thursday morning greeted me with heavy flu-like symptoms. It hit me like a ton of bricks. The combination of jet lag, long hours of presenting, and exposure to new environments had taken its toll on my immune system. I was bedridden, grappling with a chesty cough that seemed relentless.</p>
<h2>The Show Must Go On</h2>
<p>Despite my illness, there was no time for rest. The following week demanded my presence at a site meeting where I was tasked with condensing my extensive slide deck into a concise presentation of just 12 slides. The challenge was daunting, but I tackled it with determination.</p>
<h2>Reflecting on the Journey</h2>
<p>As I look back on the rollercoaster week that was, I&#39;m struck by the juxtaposition of success and struggle. From the heights of presenting at an international conference to the lows of battling illness, it was a journey that tested my resilience and resolve.</p>
<p>But through it all, one thing remains clear: adversity only serves to make us stronger. Each obstacle we overcome, whether professional or personal, contributes to our growth and development.</p>
<p>So here&#39;s to the rollercoaster weeks, the ones filled with ups and downs, twists and turns. For it is in those moments of challenge that we discover the true extent of our capabilities.</p>
<p>As I upload this blog post using Hugo, I do so with a renewed sense of gratitude for the journey and all it has taught me. Here&#39;s to embracing the ride, wherever it may take us.</p>
</article>
</div>
</div>
</main>
<footer class="bg-base-darker text-palenight-200 py-12 border-t border-palenight-400/20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<p class="text-palenight-300">&copy; 2024 Glenn Thompson. All rights reserved.</p>
<div class="webring-text mt-6">
<p class="text-palenight-300">I am part of the <a href="https://systemcrafters.net" target="_blank" class="text-accent-blue hover:text-accent-cyan">System Crafters</a> webring:</p>
</div>
<div class="craftering mt-2 flex items-center justify-center gap-4 text-accent-blue">
<a href="https://craftering.systemcrafters.net/@glenneth/previous" class="hover:text-accent-cyan">Previous</a>
<a href="https://craftering.systemcrafters.net/@glenneth" class="hover:text-accent-cyan">Random</a>
<a href="https://craftering.systemcrafters.net/@glenneth/next" class="hover:text-accent-cyan">Next</a>
</div>
<p class="text-palenight-300 mt-2">
<a href="mailto:glenn@glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenn@glenneth.org</a> |
<a href="https://glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenneth.org</a>
</p>
</div>
</div>
</footer>
</body>
</html>

72
content/posts/2024-05-01-amman-newcastle-journey.md
View File

@ -1,36 +1,36 @@
---
title: A Rollercoaster Week: From Amman to Newcastle, and back again
author: Glenn Thompson
date: 2024-05-01 17:40:58+03:00
tags: work, travel
---
Two weeks ago was a whirlwind of events, taking me from the conforting embrace of Amman, Jordan to the vibrant streets of Newcastle, England. It was a journey filled with highs and lows, professional achievements, and personal challenges.
## The Journey Begins
It all started on a Monday morning in Amman as I embarked on a journey to attend a Quality Control (QC) conference in Newcastle. The anticipation of presenting my work at an international forum filled me with excitement and nerves. The conference was scheduled for just one day, but the impact it had on me would last much longer.
## A Successful Presentation
Tuesday arrived, and with it came the day of the conference. Armed with a PowerPoint presentation comprising over 130 slides, I delved into four hours of intense presenting. Despite the pressure, the conference was a resounding success. My project received positive feedback, and I felt a sense of accomplishment as I shared my work with colleagues from around the world.
## The Toll of Travel
However, as I returned to Amman on Wednesday, I couldn't shake off a sense of exhaustion. Little did I know that the toll of travel would soon manifest itself in a most unexpected manner.
Thursday morning greeted me with heavy flu-like symptoms. It hit me like a ton of bricks. The combination of jet lag, long hours of presenting, and exposure to new environments had taken its toll on my immune system. I was bedridden, grappling with a chesty cough that seemed relentless.
## The Show Must Go On
Despite my illness, there was no time for rest. The following week demanded my presence at a site meeting where I was tasked with condensing my extensive slide deck into a concise presentation of just 12 slides. The challenge was daunting, but I tackled it with determination.
## Reflecting on the Journey
As I look back on the rollercoaster week that was, I'm struck by the juxtaposition of success and struggle. From the heights of presenting at an international conference to the lows of battling illness, it was a journey that tested my resilience and resolve.
But through it all, one thing remains clear: adversity only serves to make us stronger. Each obstacle we overcome, whether professional or personal, contributes to our growth and development.
So here's to the rollercoaster weeks, the ones filled with ups and downs, twists and turns. For it is in those moments of challenge that we discover the true extent of our capabilities.
As I upload this blog post using Hugo, I do so with a renewed sense of gratitude for the journey and all it has taught me. Here's to embracing the ride, wherever it may take us.
---
title: A Rollercoaster Week: From Amman to Newcastle, and back again
author: Glenn Thompson
date: 2024-05-01 17:40:58+03:00
tags: work, travel
---
Two weeks ago was a whirlwind of events, taking me from the conforting embrace of Amman, Jordan to the vibrant streets of Newcastle, England. It was a journey filled with highs and lows, professional achievements, and personal challenges.
## The Journey Begins
It all started on a Monday morning in Amman as I embarked on a journey to attend a Quality Control (QC) conference in Newcastle. The anticipation of presenting my work at an international forum filled me with excitement and nerves. The conference was scheduled for just one day, but the impact it had on me would last much longer.
## A Successful Presentation
Tuesday arrived, and with it came the day of the conference. Armed with a PowerPoint presentation comprising over 130 slides, I delved into four hours of intense presenting. Despite the pressure, the conference was a resounding success. My project received positive feedback, and I felt a sense of accomplishment as I shared my work with colleagues from around the world.
## The Toll of Travel
However, as I returned to Amman on Wednesday, I couldn't shake off a sense of exhaustion. Little did I know that the toll of travel would soon manifest itself in a most unexpected manner.
Thursday morning greeted me with heavy flu-like symptoms. It hit me like a ton of bricks. The combination of jet lag, long hours of presenting, and exposure to new environments had taken its toll on my immune system. I was bedridden, grappling with a chesty cough that seemed relentless.
## The Show Must Go On
Despite my illness, there was no time for rest. The following week demanded my presence at a site meeting where I was tasked with condensing my extensive slide deck into a concise presentation of just 12 slides. The challenge was daunting, but I tackled it with determination.
## Reflecting on the Journey
As I look back on the rollercoaster week that was, I'm struck by the juxtaposition of success and struggle. From the heights of presenting at an international conference to the lows of battling illness, it was a journey that tested my resilience and resolve.
But through it all, one thing remains clear: adversity only serves to make us stronger. Each obstacle we overcome, whether professional or personal, contributes to our growth and development.
So here's to the rollercoaster weeks, the ones filled with ups and downs, twists and turns. For it is in those moments of challenge that we discover the true extent of our capabilities.
As I upload this blog post using Hugo, I do so with a renewed sense of gratitude for the journey and all it has taught me. Here's to embracing the ride, wherever it may take us.

722
content/posts/2024-05-15-hugo-to-haunt.html
View File

@ -1,362 +1,362 @@
<!DOCTYPE html>
<html lang="en" class="bg-base-bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta property="og:title" content="Transitioning from Hugo to Haunt: Embracing Scheme and GNU Guix">
<meta property="og:description" content="">
<meta property="og:url" content="https://glenneth.orgcontent/posts/2024-05-15-hugo-to-haunt">
<title>Transitioning from Hugo to Haunt: Embracing Scheme and GNU Guix - Glenn Thompson</title>
<link rel="alternate" type="application/rss+xml" title="Glenn Thompson's Blog" href="/feed.xml" />
<link href="../../dist/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
.prose-palenight {
--tw-prose-body: #bfc7d5;
--tw-prose-headings: #ffd580;
--tw-prose-links: #82aaff;
--tw-prose-code: #c792ea;
--tw-prose-pre-bg: #1b1e2b;
}
.prose h2 {
color: var(--tw-prose-headings);
font-family: Merriweather, serif;
font-weight: 700;
font-size: 1.5rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.prose p {
margin-bottom: 1rem;
line-height: 1.625;
}
.prose a {
color: var(--tw-prose-links);
text-decoration: none;
}
.prose a:hover {
color: #89ddff;
}
.prose code {
color: var(--tw-prose-code);
font-family: 'JetBrains Mono', monospace;
}
.prose pre {
background-color: var(--tw-prose-pre-bg);
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
margin-bottom: 1rem;
}
.prose ul, .prose ol {
margin-top: 0.5rem;
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.prose ul {
list-style-type: disc;
}
.prose ol {
list-style-type: decimal;
}
</style>
</head>
<body class="bg-base-bg text-palenight-50">
<nav class="bg-base-darker/80 backdrop-blur-sm shadow-sm border-b border-palenight-400/20 mb-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="/" class="text-accent-yellow font-serif text-xl font-bold">Glenn Thompson</a>
<div class="flex items-center gap-2 text-accent-yellow text-sm font-bold">
<span>personal, tech, keyboards, glove80</span>
<span>•</span>
<time datetime="2024-05-15 10:30">May 15, 2024</time>
<span>•</span>
<span>7 min read</span>
</div>
</div>
</div>
</nav>
<main class="pt-24 pb-16 px-4">
<div class="max-w-4xl mx-auto">
<div class="content text-palenight-100 space-y-6">
<header class="mb-8">
<h1 class="text-4xl font-serif font-bold text-accent-yellow">Transitioning from Hugo to Haunt: Embracing Scheme and GNU Guix</h1>
<div class="flex items-center gap-4 text-palenight-300 mt-4">
<time datetime="2024-05-15 10:30">2024-05-15 10:30</time>
<span>•</span>
<span>7 min read</span>
<span>•</span>
<span>By Glenn Thompson</span>
</div>
<div class="flex flex-wrap gap-2 mt-4">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">personal</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">tech</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">keyboards</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">glove80</span>
</div>
</header>
<article class="prose prose-palenight max-w-none">
<h1>Transitioning from Hugo to Haunt: Embracing Scheme and GNU Guix</h1>
<p>Hello there! I&#39;m Glenn Thompson, and today, I want to share a significant part of my recent journey into the world of Scheme, GNU Guix, and static site generation.</p>
<h2>Discovering Scheme with System Crafters</h2>
<p>My journey began with a desire to dive deeper into programming languages and their ecosystems. I am a member of the <a href="https://systemcrafters.net/community/">System Crafters Community</a>, and its founder, David Wilson, announced a short four week course as an introduction to Guile Scheme. The course, <a href="https://systemcrafters.net/courses/hands-on-guile-scheme-beginners/">Hands-On Guile Scheme for Beginners</a>, provided me with a robust introduction to Guile Scheme, a language that emphasizes simplicity and elegance. David&#39;s clear explanations and practical examples made learning Scheme both engaging and approachable.</p>
<h2>The Move to GNU Guix</h2>
<p>Inspired by the principles of Scheme, I decided to take a leap further into the open-source world by transitioning from Arch Linux to GNU Guix. The Guix community, particularly the folks in the <code>#systemcrafters</code> channel on <code>irc.libera.chat</code>, were incredibly supportive and instrumental in helping me navigate this new environment. Their guidance made the switch smooth and rewarding, reinforcing the power and flexibility of GNU Guix as a functional package manager and operating system. More about that experience in another post.</p>
<p>There are too many individuals to name here that have helped with the installation and configuration on Gnu guix to mention here. You all have been an incredible help for which I am extremely grateful. Thank you all , for enduring my ignorance, and for your patience and your help.</p>
<h2>From Hugo to Haunt</h2>
<p>As I settled into Guix, I faced a challenge: Hugo, the static site generator I previously used, was not available as a Guix package. This led me to explore alternatives and eventually discover <a href="https://dthompson.us/projects/haunt.html">Haunt</a>, a Scheme-based static site generator that aligns perfectly with my newfound appreciation for Scheme and Guix.</p>
<h2>Overcoming Challenges with Haunt</h2>
<p>Transitioning to Haunt wasn&#39;t without its challenges. There are no readily available templating systems available for haunt like there are for hugo, but there are plenty of examples <a href="https://awesome.haunt.page/">here</a>. One of my own primary difficulties was creating a custom template that matched my site&#39;s aesthetic requirements and functionality needs. Initially, I struggled with configuring the theme layout and ensuring the CSS was applied correctly. Another hurdle was generating the correct URLs for posts and ensuring that summaries appeared as intended on the front page.</p>
<p>Thankfully, the Haunt manual proved to be an invaluable resource throughout this process. The comprehensive documentation provided clear guidance on using various modules, functions, and procedures. By carefully studying the examples and explanations, I was able to overcome the obstacles and achieve the desired results for my site. The manual&#39;s detailed descriptions of Haunt&#39;s inner workings were particularly helpful in understanding how to leverage the flexibility of Scheme to customize my blog.</p>
<h2>Crafting My Own Template</h2>
<p>Moving from Hugo to Haunt required me to create my own template and customize my site&#39;s appearance. This was an exciting opportunity to apply the skills I had learned from David&#39;s course and experiment with Scheme in a practical context.</p>
<h4>Creating the Template</h4>
<p>Haunt&#39;s flexibility allowed me to define my own theme layout and structure. Here&#39;s a snippet of my <code>haunt.scm</code> file, where I defined the theme layout and added custom footer content:</p>
<pre><code class="language-scheme">(use-modules (haunt asset)
(haunt builder blog)
(haunt builder atom)
(haunt builder assets)
(haunt reader commonmark)
(haunt site)
(haunt post)
(sxml simple) ; For HTML generation
(srfi srfi-1)
(srfi srfi-19)) ; For date and time procedures
;; Load custom templates
(load &quot;templates/post.scm&quot;)
(define (format-date date)
(date-&gt;string date &quot;~Y-~m-~d&quot;))
;; Define a function to generate the URL for a post
(define (post-url post)
(string-append &quot;/&quot; (post-slug post) &quot;.html&quot;))
;; Define a function to extract a summary from the post content
(define (post-summary post)
(let ((content (post-sxml post)))
(if (null? content)
&quot;&quot;
(let ((first-paragraph (car content)))
(if (string? first-paragraph)
(substring first-paragraph 0 (min 200 (string-length first-paragraph)))
(sxml-&gt;string first-paragraph))))))
;; Define the theme layout
(define (theme-layout site title content)
(let ((current-year (number-&gt;string (date-year (current-date)))))
`(html
(head
(meta (@ (charset &quot;utf-8&quot;)))
(meta (@ (name &quot;viewport&quot;) (content &quot;width=device-width, initial-scale=1.0, shrink-to-fit=no&quot;)))
(link (@ (rel &quot;stylesheet&quot;) (href &quot;/assets/palenight.css&quot;)))
(style
&quot; .craftering {
margin: auto;
width: 50%;
text-align: center;
}
.webring-text {
text-align: center;
margin-bottom: 20px;
color: white;
}
.craftering a {
color: #dddddd;
}
.webring-text a {
color: #dddddd;
}&quot;)
(title ,title))
(body
(header (h1 ,(site-title site)))
(main ,content)
(footer (@ (class &quot;bg-black bottom-0 w-100 pa3&quot;) (role &quot;contentinfo&quot;))
(div (@ (class &quot;flex justify-between&quot;))
(div (@ (class &quot;webring-text&quot;))
(p &quot;I am part of the &quot; (a (@ (href &quot;https://systemcrafters.net&quot;) (target &quot;_blank&quot;)) &quot;System Crafters&quot;) &quot; webring:&quot;))
(div (@ (class &quot;craftering&quot;))
(a (@ (href &quot;https://craftering.systemcrafters.net/@glenneth/previous&quot;)) &quot;←&quot;)
(a (@ (href &quot;https://craftering.systemcrafters.net/&quot;)) &quot;craftering&quot;)
(a (@ (href &quot;https://craftering.systemcrafters.net/@glenneth/next&quot;)) &quot;→&quot;))))))))
;; Define the custom theme with a consistent layout for index
(define my-theme
(theme #:name &quot;My Custom Theme&quot;
#:layout theme-layout
#:post-template post-template
#:collection-template
(lambda (site title posts prefix)
`(div (@ (class &quot;content&quot;))
(h2 ,title)
(ul
,@(map (lambda (post)
`(li
(article
(header
(h3 (a (@ (href ,(post-url post))) ,(post-title post))))
(p ,(format-date (post-date post)))
(p ,(post-summary post))
(p (a (@ (href ,(post-url post))) &quot;Read more...&quot;)))))
posts))))))
;; Site configuration
(site #:title &quot;Just Another Personal Blog&quot;
#:domain &quot;glenneth.srht.site&quot;
#:default-metadata
&#39;((author . &quot;Glenn Thompson&quot;)
(email . &quot;glenn@kirstol.org&quot;))
#:readers (list commonmark-reader)
#:builders (list
(blog #:theme my-theme)
(atom-feed)
(atom-feeds-by-tag)
(static-directory &quot;images&quot;)
(static-directory &quot;assets&quot;)))
</code></pre>
<h3>Customizing the CSS</h3>
<p>To give my site a personalized touch, I crafted a CSS stylesheet that matched my aesthetic preferences. Here’s an excerpt from my <code>palenight.css</code> file:</p>
<pre><code class="language-css">body {
display: flex;
justify-content: center;
padding: 10px;
}
.content, header, footer, main {
max-width: 90%;
padding: 0 5%;
}
header {
text-align: center;
margin-bottom: 20px;
}
footer {
text-align: center;
margin-top: 20px;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin-bottom: 20px;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
body {
background-color: #292d3e;
color: #d0d0d0;
}
a {
color: #82aaff;
}
h1, h2, h3, h4, h5, h6 {
color: #c792ea;
}
.content {
background-color: #1e1e2e;
padding: 20px;
border-radius: 5px;
}
article {
background-color: #282a36;
padding: 15px;
border-radius: 8px;
margin-bottom: 20px;
}
article header {
margin-bottom: 10px;
}
.date {
color: #6272a4;
font-size: 0.9em;
}
/* Additional styles for the craftering */
.craftering {
margin: auto;
width: 50%;
text-align: center;
}
.webring-text {
text-align: center;
margin-bottom: 20px;
color: white;
}
.craftering a {
color: #dddddd;
}
.webring-text a {
color: #dddddd;
}
/* Additions for mobile device readability */
meta {
name: viewport;
content: width=device-width, initial-scale=1, shrink-to-fit=no;
}
@media screen and (max-width: 767px) {
/* Customize styles for smaller screens */
.logo {
max-width: 200px;
}
}
</code></pre>
<p>I use the <code>doom-palenight</code> theme in Emacs, my preferred text editor, and I wanted my site to match that aesthetic.</p>
<h3>Publishing with Haunt and Hut</h3>
<p>In addition to using Haunt, I adopted hut, a set of command-line tools for interacting with SourceHut, to publish my blog. This streamlined my workflow, making it easier to manage and deploy my site directly from my local environment.</p>
<h3>Conclusion</h3>
<p>Transitioning from Hugo to Haunt, learning Scheme, and embracing GNU Guix has been an enriching experience. It&#39;s not just about using new tools; it&#39;s about joining a community that values simplicity, transparency, and collaboration. If you&#39;re curious about Scheme or GNU Guix, I highly recommend checking out David Wilson&#39;s course on System Crafters and joining the discussions on IRC.</p>
<p>I am not a developer of any kind, and learning Scheme has opened my eyes as to how I can craft an environment that I want to work in, and not endure a working environment that the computer is forcing upon me.</p>
<p>Thank you for reading, and stay tuned for more updates on my journey!</p>
</article>
</div>
</div>
</main>
<footer class="bg-base-darker text-palenight-200 py-12 border-t border-palenight-400/20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<p class="text-palenight-300">&copy; 2024 Glenn Thompson. All rights reserved.</p>
<div class="webring-text mt-6">
<p class="text-palenight-300">I am part of the <a href="https://systemcrafters.net" target="_blank" class="text-accent-blue hover:text-accent-cyan">System Crafters</a> webring:</p>
</div>
<div class="craftering mt-2 flex items-center justify-center gap-4 text-accent-blue">
<a href="https://craftering.systemcrafters.net/@glenneth/previous" class="hover:text-accent-cyan">Previous</a>
<a href="https://craftering.systemcrafters.net/@glenneth" class="hover:text-accent-cyan">Random</a>
<a href="https://craftering.systemcrafters.net/@glenneth/next" class="hover:text-accent-cyan">Next</a>
</div>
<p class="text-palenight-300 mt-2">
<a href="mailto:glenn@glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenn@glenneth.org</a> |
<a href="https://glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenneth.org</a>
</p>
</div>
</div>
</footer>
</body>
<!DOCTYPE html>
<html lang="en" class="bg-base-bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta property="og:title" content="Transitioning from Hugo to Haunt: Embracing Scheme and GNU Guix">
<meta property="og:description" content="">
<meta property="og:url" content="https://glenneth.orgcontent/posts/2024-05-15-hugo-to-haunt">
<title>Transitioning from Hugo to Haunt: Embracing Scheme and GNU Guix - Glenn Thompson</title>
<link rel="alternate" type="application/rss+xml" title="Glenn Thompson's Blog" href="/feed.xml" />
<link href="../../dist/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
.prose-palenight {
--tw-prose-body: #bfc7d5;
--tw-prose-headings: #ffd580;
--tw-prose-links: #82aaff;
--tw-prose-code: #c792ea;
--tw-prose-pre-bg: #1b1e2b;
}
.prose h2 {
color: var(--tw-prose-headings);
font-family: Merriweather, serif;
font-weight: 700;
font-size: 1.5rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.prose p {
margin-bottom: 1rem;
line-height: 1.625;
}
.prose a {
color: var(--tw-prose-links);
text-decoration: none;
}
.prose a:hover {
color: #89ddff;
}
.prose code {
color: var(--tw-prose-code);
font-family: 'JetBrains Mono', monospace;
}
.prose pre {
background-color: var(--tw-prose-pre-bg);
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
margin-bottom: 1rem;
}
.prose ul, .prose ol {
margin-top: 0.5rem;
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.prose ul {
list-style-type: disc;
}
.prose ol {
list-style-type: decimal;
}
</style>
</head>
<body class="bg-base-bg text-palenight-50">
<nav class="bg-base-darker/80 backdrop-blur-sm shadow-sm border-b border-palenight-400/20 mb-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="/" class="text-accent-yellow font-serif text-xl font-bold">Glenn Thompson</a>
<div class="flex items-center gap-2 text-accent-yellow text-sm font-bold">
<span>personal, tech, keyboards, glove80</span>
<span>•</span>
<time datetime="2024-05-15 10:30">May 15, 2024</time>
<span>•</span>
<span>7 min read</span>
</div>
</div>
</div>
</nav>
<main class="pt-24 pb-16 px-4">
<div class="max-w-4xl mx-auto">
<div class="content text-palenight-100 space-y-6">
<header class="mb-8">
<h1 class="text-4xl font-serif font-bold text-accent-yellow">Transitioning from Hugo to Haunt: Embracing Scheme and GNU Guix</h1>
<div class="flex items-center gap-4 text-palenight-300 mt-4">
<time datetime="2024-05-15 10:30">2024-05-15 10:30</time>
<span>•</span>
<span>7 min read</span>
<span>•</span>
<span>By Glenn Thompson</span>
</div>
<div class="flex flex-wrap gap-2 mt-4">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">personal</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">tech</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">keyboards</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">glove80</span>
</div>
</header>
<article class="prose prose-palenight max-w-none">
<h1>Transitioning from Hugo to Haunt: Embracing Scheme and GNU Guix</h1>
<p>Hello there! I&#39;m Glenn Thompson, and today, I want to share a significant part of my recent journey into the world of Scheme, GNU Guix, and static site generation.</p>
<h2>Discovering Scheme with System Crafters</h2>
<p>My journey began with a desire to dive deeper into programming languages and their ecosystems. I am a member of the <a href="https://systemcrafters.net/community/">System Crafters Community</a>, and its founder, David Wilson, announced a short four week course as an introduction to Guile Scheme. The course, <a href="https://systemcrafters.net/courses/hands-on-guile-scheme-beginners/">Hands-On Guile Scheme for Beginners</a>, provided me with a robust introduction to Guile Scheme, a language that emphasizes simplicity and elegance. David&#39;s clear explanations and practical examples made learning Scheme both engaging and approachable.</p>
<h2>The Move to GNU Guix</h2>
<p>Inspired by the principles of Scheme, I decided to take a leap further into the open-source world by transitioning from Arch Linux to GNU Guix. The Guix community, particularly the folks in the <code>#systemcrafters</code> channel on <code>irc.libera.chat</code>, were incredibly supportive and instrumental in helping me navigate this new environment. Their guidance made the switch smooth and rewarding, reinforcing the power and flexibility of GNU Guix as a functional package manager and operating system. More about that experience in another post.</p>
<p>There are too many individuals to name here that have helped with the installation and configuration on Gnu guix to mention here. You all have been an incredible help for which I am extremely grateful. Thank you all , for enduring my ignorance, and for your patience and your help.</p>
<h2>From Hugo to Haunt</h2>
<p>As I settled into Guix, I faced a challenge: Hugo, the static site generator I previously used, was not available as a Guix package. This led me to explore alternatives and eventually discover <a href="https://dthompson.us/projects/haunt.html">Haunt</a>, a Scheme-based static site generator that aligns perfectly with my newfound appreciation for Scheme and Guix.</p>
<h2>Overcoming Challenges with Haunt</h2>
<p>Transitioning to Haunt wasn&#39;t without its challenges. There are no readily available templating systems available for haunt like there are for hugo, but there are plenty of examples <a href="https://awesome.haunt.page/">here</a>. One of my own primary difficulties was creating a custom template that matched my site&#39;s aesthetic requirements and functionality needs. Initially, I struggled with configuring the theme layout and ensuring the CSS was applied correctly. Another hurdle was generating the correct URLs for posts and ensuring that summaries appeared as intended on the front page.</p>
<p>Thankfully, the Haunt manual proved to be an invaluable resource throughout this process. The comprehensive documentation provided clear guidance on using various modules, functions, and procedures. By carefully studying the examples and explanations, I was able to overcome the obstacles and achieve the desired results for my site. The manual&#39;s detailed descriptions of Haunt&#39;s inner workings were particularly helpful in understanding how to leverage the flexibility of Scheme to customize my blog.</p>
<h2>Crafting My Own Template</h2>
<p>Moving from Hugo to Haunt required me to create my own template and customize my site&#39;s appearance. This was an exciting opportunity to apply the skills I had learned from David&#39;s course and experiment with Scheme in a practical context.</p>
<h4>Creating the Template</h4>
<p>Haunt&#39;s flexibility allowed me to define my own theme layout and structure. Here&#39;s a snippet of my <code>haunt.scm</code> file, where I defined the theme layout and added custom footer content:</p>
<pre><code class="language-scheme">(use-modules (haunt asset)
(haunt builder blog)
(haunt builder atom)
(haunt builder assets)
(haunt reader commonmark)
(haunt site)
(haunt post)
(sxml simple) ; For HTML generation
(srfi srfi-1)
(srfi srfi-19)) ; For date and time procedures
;; Load custom templates
(load &quot;templates/post.scm&quot;)
(define (format-date date)
(date-&gt;string date &quot;~Y-~m-~d&quot;))
;; Define a function to generate the URL for a post
(define (post-url post)
(string-append &quot;/&quot; (post-slug post) &quot;.html&quot;))
;; Define a function to extract a summary from the post content
(define (post-summary post)
(let ((content (post-sxml post)))
(if (null? content)
&quot;&quot;
(let ((first-paragraph (car content)))
(if (string? first-paragraph)
(substring first-paragraph 0 (min 200 (string-length first-paragraph)))
(sxml-&gt;string first-paragraph))))))
;; Define the theme layout
(define (theme-layout site title content)
(let ((current-year (number-&gt;string (date-year (current-date)))))
`(html
(head
(meta (@ (charset &quot;utf-8&quot;)))
(meta (@ (name &quot;viewport&quot;) (content &quot;width=device-width, initial-scale=1.0, shrink-to-fit=no&quot;)))
(link (@ (rel &quot;stylesheet&quot;) (href &quot;/assets/palenight.css&quot;)))
(style
&quot; .craftering {
margin: auto;
width: 50%;
text-align: center;
}
.webring-text {
text-align: center;
margin-bottom: 20px;
color: white;
}
.craftering a {
color: #dddddd;
}
.webring-text a {
color: #dddddd;
}&quot;)
(title ,title))
(body
(header (h1 ,(site-title site)))
(main ,content)
(footer (@ (class &quot;bg-black bottom-0 w-100 pa3&quot;) (role &quot;contentinfo&quot;))
(div (@ (class &quot;flex justify-between&quot;))
(div (@ (class &quot;webring-text&quot;))
(p &quot;I am part of the &quot; (a (@ (href &quot;https://systemcrafters.net&quot;) (target &quot;_blank&quot;)) &quot;System Crafters&quot;) &quot; webring:&quot;))
(div (@ (class &quot;craftering&quot;))
(a (@ (href &quot;https://craftering.systemcrafters.net/@glenneth/previous&quot;)) &quot;←&quot;)
(a (@ (href &quot;https://craftering.systemcrafters.net/&quot;)) &quot;craftering&quot;)
(a (@ (href &quot;https://craftering.systemcrafters.net/@glenneth/next&quot;)) &quot;→&quot;))))))))
;; Define the custom theme with a consistent layout for index
(define my-theme
(theme #:name &quot;My Custom Theme&quot;
#:layout theme-layout
#:post-template post-template
#:collection-template
(lambda (site title posts prefix)
`(div (@ (class &quot;content&quot;))
(h2 ,title)
(ul
,@(map (lambda (post)
`(li
(article
(header
(h3 (a (@ (href ,(post-url post))) ,(post-title post))))
(p ,(format-date (post-date post)))
(p ,(post-summary post))
(p (a (@ (href ,(post-url post))) &quot;Read more...&quot;)))))
posts))))))
;; Site configuration
(site #:title &quot;Just Another Personal Blog&quot;
#:domain &quot;glenneth.srht.site&quot;
#:default-metadata
&#39;((author . &quot;Glenn Thompson&quot;)
(email . &quot;glenn@kirstol.org&quot;))
#:readers (list commonmark-reader)
#:builders (list
(blog #:theme my-theme)
(atom-feed)
(atom-feeds-by-tag)
(static-directory &quot;images&quot;)
(static-directory &quot;assets&quot;)))
</code></pre>
<h3>Customizing the CSS</h3>
<p>To give my site a personalized touch, I crafted a CSS stylesheet that matched my aesthetic preferences. Here’s an excerpt from my <code>palenight.css</code> file:</p>
<pre><code class="language-css">body {
display: flex;
justify-content: center;
padding: 10px;
}
.content, header, footer, main {
max-width: 90%;
padding: 0 5%;
}
header {
text-align: center;
margin-bottom: 20px;
}
footer {
text-align: center;
margin-top: 20px;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin-bottom: 20px;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
body {
background-color: #292d3e;
color: #d0d0d0;
}
a {
color: #82aaff;
}
h1, h2, h3, h4, h5, h6 {
color: #c792ea;
}
.content {
background-color: #1e1e2e;
padding: 20px;
border-radius: 5px;
}
article {
background-color: #282a36;
padding: 15px;
border-radius: 8px;
margin-bottom: 20px;
}
article header {
margin-bottom: 10px;
}
.date {
color: #6272a4;
font-size: 0.9em;
}
/* Additional styles for the craftering */
.craftering {
margin: auto;
width: 50%;
text-align: center;
}
.webring-text {
text-align: center;
margin-bottom: 20px;
color: white;
}
.craftering a {
color: #dddddd;
}
.webring-text a {
color: #dddddd;
}
/* Additions for mobile device readability */
meta {
name: viewport;
content: width=device-width, initial-scale=1, shrink-to-fit=no;
}
@media screen and (max-width: 767px) {
/* Customize styles for smaller screens */
.logo {
max-width: 200px;
}
}
</code></pre>
<p>I use the <code>doom-palenight</code> theme in Emacs, my preferred text editor, and I wanted my site to match that aesthetic.</p>
<h3>Publishing with Haunt and Hut</h3>
<p>In addition to using Haunt, I adopted hut, a set of command-line tools for interacting with SourceHut, to publish my blog. This streamlined my workflow, making it easier to manage and deploy my site directly from my local environment.</p>
<h3>Conclusion</h3>
<p>Transitioning from Hugo to Haunt, learning Scheme, and embracing GNU Guix has been an enriching experience. It&#39;s not just about using new tools; it&#39;s about joining a community that values simplicity, transparency, and collaboration. If you&#39;re curious about Scheme or GNU Guix, I highly recommend checking out David Wilson&#39;s course on System Crafters and joining the discussions on IRC.</p>
<p>I am not a developer of any kind, and learning Scheme has opened my eyes as to how I can craft an environment that I want to work in, and not endure a working environment that the computer is forcing upon me.</p>
<p>Thank you for reading, and stay tuned for more updates on my journey!</p>
</article>
</div>
</div>
</main>
<footer class="bg-base-darker text-palenight-200 py-12 border-t border-palenight-400/20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<p class="text-palenight-300">&copy; 2024 Glenn Thompson. All rights reserved.</p>
<div class="webring-text mt-6">
<p class="text-palenight-300">I am part of the <a href="https://systemcrafters.net" target="_blank" class="text-accent-blue hover:text-accent-cyan">System Crafters</a> webring:</p>
</div>
<div class="craftering mt-2 flex items-center justify-center gap-4 text-accent-blue">
<a href="https://craftering.systemcrafters.net/@glenneth/previous" class="hover:text-accent-cyan">Previous</a>
<a href="https://craftering.systemcrafters.net/@glenneth" class="hover:text-accent-cyan">Random</a>
<a href="https://craftering.systemcrafters.net/@glenneth/next" class="hover:text-accent-cyan">Next</a>
</div>
<p class="text-palenight-300 mt-2">
<a href="mailto:glenn@glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenn@glenneth.org</a> |
<a href="https://glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenneth.org</a>
</p>
</div>
</div>
</footer>
</body>
</html>

546
content/posts/2024-05-15-hugo-to-haunt.md
View File

@ -1,273 +1,273 @@
---
title: Transitioning from Hugo to Haunt: Embracing Scheme and GNU Guix
author: Glenn Thompson
date: 2024-05-15 10:30
tags: personal, tech, keyboards, glove80
---
# Transitioning from Hugo to Haunt: Embracing Scheme and GNU Guix
Hello there! I'm Glenn Thompson, and today, I want to share a significant part of my recent journey into the world of Scheme, GNU Guix, and static site generation.
## Discovering Scheme with System Crafters
My journey began with a desire to dive deeper into programming languages and their ecosystems. I am a member of the [System Crafters Community](https://systemcrafters.net/community/), and its founder, David Wilson, announced a short four week course as an introduction to Guile Scheme. The course, [Hands-On Guile Scheme for Beginners](https://systemcrafters.net/courses/hands-on-guile-scheme-beginners/), provided me with a robust introduction to Guile Scheme, a language that emphasizes simplicity and elegance. David's clear explanations and practical examples made learning Scheme both engaging and approachable.
## The Move to GNU Guix
Inspired by the principles of Scheme, I decided to take a leap further into the open-source world by transitioning from Arch Linux to GNU Guix. The Guix community, particularly the folks in the `#systemcrafters` channel on `irc.libera.chat`, were incredibly supportive and instrumental in helping me navigate this new environment. Their guidance made the switch smooth and rewarding, reinforcing the power and flexibility of GNU Guix as a functional package manager and operating system. More about that experience in another post.
There are too many individuals to name here that have helped with the installation and configuration on Gnu guix to mention here. You all have been an incredible help for which I am extremely grateful. Thank you all , for enduring my ignorance, and for your patience and your help.
## From Hugo to Haunt
As I settled into Guix, I faced a challenge: Hugo, the static site generator I previously used, was not available as a Guix package. This led me to explore alternatives and eventually discover [Haunt](https://dthompson.us/projects/haunt.html), a Scheme-based static site generator that aligns perfectly with my newfound appreciation for Scheme and Guix.
## Overcoming Challenges with Haunt
Transitioning to Haunt wasn't without its challenges. There are no readily available templating systems available for haunt like there are for hugo, but there are plenty of examples [here](https://awesome.haunt.page/). One of my own primary difficulties was creating a custom template that matched my site's aesthetic requirements and functionality needs. Initially, I struggled with configuring the theme layout and ensuring the CSS was applied correctly. Another hurdle was generating the correct URLs for posts and ensuring that summaries appeared as intended on the front page.
Thankfully, the Haunt manual proved to be an invaluable resource throughout this process. The comprehensive documentation provided clear guidance on using various modules, functions, and procedures. By carefully studying the examples and explanations, I was able to overcome the obstacles and achieve the desired results for my site. The manual's detailed descriptions of Haunt's inner workings were particularly helpful in understanding how to leverage the flexibility of Scheme to customize my blog.
## Crafting My Own Template
Moving from Hugo to Haunt required me to create my own template and customize my site's appearance. This was an exciting opportunity to apply the skills I had learned from David's course and experiment with Scheme in a practical context.
#### Creating the Template
Haunt's flexibility allowed me to define my own theme layout and structure. Here's a snippet of my `haunt.scm` file, where I defined the theme layout and added custom footer content:
```scheme
(use-modules (haunt asset)
(haunt builder blog)
(haunt builder atom)
(haunt builder assets)
(haunt reader commonmark)
(haunt site)
(haunt post)
(sxml simple) ; For HTML generation
(srfi srfi-1)
(srfi srfi-19)) ; For date and time procedures
;; Load custom templates
(load "templates/post.scm")
(define (format-date date)
(date->string date "~Y-~m-~d"))
;; Define a function to generate the URL for a post
(define (post-url post)
(string-append "/" (post-slug post) ".html"))
;; Define a function to extract a summary from the post content
(define (post-summary post)
(let ((content (post-sxml post)))
(if (null? content)
""
(let ((first-paragraph (car content)))
(if (string? first-paragraph)
(substring first-paragraph 0 (min 200 (string-length first-paragraph)))
(sxml->string first-paragraph))))))
;; Define the theme layout
(define (theme-layout site title content)
(let ((current-year (number->string (date-year (current-date)))))
`(html
(head
(meta (@ (charset "utf-8")))
(meta (@ (name "viewport") (content "width=device-width, initial-scale=1.0, shrink-to-fit=no")))
(link (@ (rel "stylesheet") (href "/assets/palenight.css")))
(style
" .craftering {
margin: auto;
width: 50%;
text-align: center;
}
.webring-text {
text-align: center;
margin-bottom: 20px;
color: white;
}
.craftering a {
color: #dddddd;
}
.webring-text a {
color: #dddddd;
}")
(title ,title))
(body
(header (h1 ,(site-title site)))
(main ,content)
(footer (@ (class "bg-black bottom-0 w-100 pa3") (role "contentinfo"))
(div (@ (class "flex justify-between"))
(div (@ (class "webring-text"))
(p "I am part of the " (a (@ (href "https://systemcrafters.net") (target "_blank")) "System Crafters") " webring:"))
(div (@ (class "craftering"))
(a (@ (href "https://craftering.systemcrafters.net/@glenneth/previous")) "←")
(a (@ (href "https://craftering.systemcrafters.net/")) "craftering")
(a (@ (href "https://craftering.systemcrafters.net/@glenneth/next")) "→"))))))))
;; Define the custom theme with a consistent layout for index
(define my-theme
(theme #:name "My Custom Theme"
#:layout theme-layout
#:post-template post-template
#:collection-template
(lambda (site title posts prefix)
`(div (@ (class "content"))
(h2 ,title)
(ul
,@(map (lambda (post)
`(li
(article
(header
(h3 (a (@ (href ,(post-url post))) ,(post-title post))))
(p ,(format-date (post-date post)))
(p ,(post-summary post))
(p (a (@ (href ,(post-url post))) "Read more...")))))
posts))))))
;; Site configuration
(site #:title "Just Another Personal Blog"
#:domain "glenneth.srht.site"
#:default-metadata
'((author . "Glenn Thompson")
(email . "glenn@kirstol.org"))
#:readers (list commonmark-reader)
#:builders (list
(blog #:theme my-theme)
(atom-feed)
(atom-feeds-by-tag)
(static-directory "images")
(static-directory "assets")))
```
### Customizing the CSS
To give my site a personalized touch, I crafted a CSS stylesheet that matched my aesthetic preferences. Here’s an excerpt from my `palenight.css` file:
```css
body {
display: flex;
justify-content: center;
padding: 10px;
}
.content, header, footer, main {
max-width: 90%;
padding: 0 5%;
}
header {
text-align: center;
margin-bottom: 20px;
}
footer {
text-align: center;
margin-top: 20px;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin-bottom: 20px;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
body {
background-color: #292d3e;
color: #d0d0d0;
}
a {
color: #82aaff;
}
h1, h2, h3, h4, h5, h6 {
color: #c792ea;
}
.content {
background-color: #1e1e2e;
padding: 20px;
border-radius: 5px;
}
article {
background-color: #282a36;
padding: 15px;
border-radius: 8px;
margin-bottom: 20px;
}
article header {
margin-bottom: 10px;
}
.date {
color: #6272a4;
font-size: 0.9em;
}
/* Additional styles for the craftering */
.craftering {
margin: auto;
width: 50%;
text-align: center;
}
.webring-text {
text-align: center;
margin-bottom: 20px;
color: white;
}
.craftering a {
color: #dddddd;
}
.webring-text a {
color: #dddddd;
}
/* Additions for mobile device readability */
meta {
name: viewport;
content: width=device-width, initial-scale=1, shrink-to-fit=no;
}
@media screen and (max-width: 767px) {
/* Customize styles for smaller screens */
.logo {
max-width: 200px;
}
}
```
I use the `doom-palenight` theme in Emacs, my preferred text editor, and I wanted my site to match that aesthetic.
### Publishing with Haunt and Hut
In addition to using Haunt, I adopted hut, a set of command-line tools for interacting with SourceHut, to publish my blog. This streamlined my workflow, making it easier to manage and deploy my site directly from my local environment.
### Conclusion
Transitioning from Hugo to Haunt, learning Scheme, and embracing GNU Guix has been an enriching experience. It's not just about using new tools; it's about joining a community that values simplicity, transparency, and collaboration. If you're curious about Scheme or GNU Guix, I highly recommend checking out David Wilson's course on System Crafters and joining the discussions on IRC.
I am not a developer of any kind, and learning Scheme has opened my eyes as to how I can craft an environment that I want to work in, and not endure a working environment that the computer is forcing upon me.
Thank you for reading, and stay tuned for more updates on my journey!
---
title: Transitioning from Hugo to Haunt: Embracing Scheme and GNU Guix
author: Glenn Thompson
date: 2024-05-15 10:30
tags: personal, tech, keyboards, glove80
---
# Transitioning from Hugo to Haunt: Embracing Scheme and GNU Guix
Hello there! I'm Glenn Thompson, and today, I want to share a significant part of my recent journey into the world of Scheme, GNU Guix, and static site generation.
## Discovering Scheme with System Crafters
My journey began with a desire to dive deeper into programming languages and their ecosystems. I am a member of the [System Crafters Community](https://systemcrafters.net/community/), and its founder, David Wilson, announced a short four week course as an introduction to Guile Scheme. The course, [Hands-On Guile Scheme for Beginners](https://systemcrafters.net/courses/hands-on-guile-scheme-beginners/), provided me with a robust introduction to Guile Scheme, a language that emphasizes simplicity and elegance. David's clear explanations and practical examples made learning Scheme both engaging and approachable.
## The Move to GNU Guix
Inspired by the principles of Scheme, I decided to take a leap further into the open-source world by transitioning from Arch Linux to GNU Guix. The Guix community, particularly the folks in the `#systemcrafters` channel on `irc.libera.chat`, were incredibly supportive and instrumental in helping me navigate this new environment. Their guidance made the switch smooth and rewarding, reinforcing the power and flexibility of GNU Guix as a functional package manager and operating system. More about that experience in another post.
There are too many individuals to name here that have helped with the installation and configuration on Gnu guix to mention here. You all have been an incredible help for which I am extremely grateful. Thank you all , for enduring my ignorance, and for your patience and your help.
## From Hugo to Haunt
As I settled into Guix, I faced a challenge: Hugo, the static site generator I previously used, was not available as a Guix package. This led me to explore alternatives and eventually discover [Haunt](https://dthompson.us/projects/haunt.html), a Scheme-based static site generator that aligns perfectly with my newfound appreciation for Scheme and Guix.
## Overcoming Challenges with Haunt
Transitioning to Haunt wasn't without its challenges. There are no readily available templating systems available for haunt like there are for hugo, but there are plenty of examples [here](https://awesome.haunt.page/). One of my own primary difficulties was creating a custom template that matched my site's aesthetic requirements and functionality needs. Initially, I struggled with configuring the theme layout and ensuring the CSS was applied correctly. Another hurdle was generating the correct URLs for posts and ensuring that summaries appeared as intended on the front page.
Thankfully, the Haunt manual proved to be an invaluable resource throughout this process. The comprehensive documentation provided clear guidance on using various modules, functions, and procedures. By carefully studying the examples and explanations, I was able to overcome the obstacles and achieve the desired results for my site. The manual's detailed descriptions of Haunt's inner workings were particularly helpful in understanding how to leverage the flexibility of Scheme to customize my blog.
## Crafting My Own Template
Moving from Hugo to Haunt required me to create my own template and customize my site's appearance. This was an exciting opportunity to apply the skills I had learned from David's course and experiment with Scheme in a practical context.
#### Creating the Template
Haunt's flexibility allowed me to define my own theme layout and structure. Here's a snippet of my `haunt.scm` file, where I defined the theme layout and added custom footer content:
```scheme
(use-modules (haunt asset)
(haunt builder blog)
(haunt builder atom)
(haunt builder assets)
(haunt reader commonmark)
(haunt site)
(haunt post)
(sxml simple) ; For HTML generation
(srfi srfi-1)
(srfi srfi-19)) ; For date and time procedures
;; Load custom templates
(load "templates/post.scm")
(define (format-date date)
(date->string date "~Y-~m-~d"))
;; Define a function to generate the URL for a post
(define (post-url post)
(string-append "/" (post-slug post) ".html"))
;; Define a function to extract a summary from the post content
(define (post-summary post)
(let ((content (post-sxml post)))
(if (null? content)
""
(let ((first-paragraph (car content)))
(if (string? first-paragraph)
(substring first-paragraph 0 (min 200 (string-length first-paragraph)))
(sxml->string first-paragraph))))))
;; Define the theme layout
(define (theme-layout site title content)
(let ((current-year (number->string (date-year (current-date)))))
`(html
(head
(meta (@ (charset "utf-8")))
(meta (@ (name "viewport") (content "width=device-width, initial-scale=1.0, shrink-to-fit=no")))
(link (@ (rel "stylesheet") (href "/assets/palenight.css")))
(style
" .craftering {
margin: auto;
width: 50%;
text-align: center;
}
.webring-text {
text-align: center;
margin-bottom: 20px;
color: white;
}
.craftering a {
color: #dddddd;
}
.webring-text a {
color: #dddddd;
}")
(title ,title))
(body
(header (h1 ,(site-title site)))
(main ,content)
(footer (@ (class "bg-black bottom-0 w-100 pa3") (role "contentinfo"))
(div (@ (class "flex justify-between"))
(div (@ (class "webring-text"))
(p "I am part of the " (a (@ (href "https://systemcrafters.net") (target "_blank")) "System Crafters") " webring:"))
(div (@ (class "craftering"))
(a (@ (href "https://craftering.systemcrafters.net/@glenneth/previous")) "←")
(a (@ (href "https://craftering.systemcrafters.net/")) "craftering")
(a (@ (href "https://craftering.systemcrafters.net/@glenneth/next")) "→"))))))))
;; Define the custom theme with a consistent layout for index
(define my-theme
(theme #:name "My Custom Theme"
#:layout theme-layout
#:post-template post-template
#:collection-template
(lambda (site title posts prefix)
`(div (@ (class "content"))
(h2 ,title)
(ul
,@(map (lambda (post)
`(li
(article
(header
(h3 (a (@ (href ,(post-url post))) ,(post-title post))))
(p ,(format-date (post-date post)))
(p ,(post-summary post))
(p (a (@ (href ,(post-url post))) "Read more...")))))
posts))))))
;; Site configuration
(site #:title "Just Another Personal Blog"
#:domain "glenneth.srht.site"
#:default-metadata
'((author . "Glenn Thompson")
(email . "glenn@kirstol.org"))
#:readers (list commonmark-reader)
#:builders (list
(blog #:theme my-theme)
(atom-feed)
(atom-feeds-by-tag)
(static-directory "images")
(static-directory "assets")))
```
### Customizing the CSS
To give my site a personalized touch, I crafted a CSS stylesheet that matched my aesthetic preferences. Here’s an excerpt from my `palenight.css` file:
```css
body {
display: flex;
justify-content: center;
padding: 10px;
}
.content, header, footer, main {
max-width: 90%;
padding: 0 5%;
}
header {
text-align: center;
margin-bottom: 20px;
}
footer {
text-align: center;
margin-top: 20px;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin-bottom: 20px;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
body {
background-color: #292d3e;
color: #d0d0d0;
}
a {
color: #82aaff;
}
h1, h2, h3, h4, h5, h6 {
color: #c792ea;
}
.content {
background-color: #1e1e2e;
padding: 20px;
border-radius: 5px;
}
article {
background-color: #282a36;
padding: 15px;
border-radius: 8px;
margin-bottom: 20px;
}
article header {
margin-bottom: 10px;
}
.date {
color: #6272a4;
font-size: 0.9em;
}
/* Additional styles for the craftering */
.craftering {
margin: auto;
width: 50%;
text-align: center;
}
.webring-text {
text-align: center;
margin-bottom: 20px;
color: white;
}
.craftering a {
color: #dddddd;
}
.webring-text a {
color: #dddddd;
}
/* Additions for mobile device readability */
meta {
name: viewport;
content: width=device-width, initial-scale=1, shrink-to-fit=no;
}
@media screen and (max-width: 767px) {
/* Customize styles for smaller screens */
.logo {
max-width: 200px;
}
}
```
I use the `doom-palenight` theme in Emacs, my preferred text editor, and I wanted my site to match that aesthetic.
### Publishing with Haunt and Hut
In addition to using Haunt, I adopted hut, a set of command-line tools for interacting with SourceHut, to publish my blog. This streamlined my workflow, making it easier to manage and deploy my site directly from my local environment.
### Conclusion
Transitioning from Hugo to Haunt, learning Scheme, and embracing GNU Guix has been an enriching experience. It's not just about using new tools; it's about joining a community that values simplicity, transparency, and collaboration. If you're curious about Scheme or GNU Guix, I highly recommend checking out David Wilson's course on System Crafters and joining the discussions on IRC.
I am not a developer of any kind, and learning Scheme has opened my eyes as to how I can craft an environment that I want to work in, and not endure a working environment that the computer is forcing upon me.
Thank you for reading, and stay tuned for more updates on my journey!

378
content/posts/2024-07-26-gnu-guix-journey.html
View File

@ -1,190 +1,190 @@
<!DOCTYPE html>
<html lang="en" class="bg-base-bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta property="og:title" content="A Journey Through GNU Guix: From Installation to Returning to Arch Linux">
<meta property="og:description" content="">
<meta property="og:url" content="https://glenneth.orgcontent/posts/2024-07-26-gnu-guix-journey">
<title>A Journey Through GNU Guix: From Installation to Returning to Arch Linux - Glenn Thompson</title>
<link rel="alternate" type="application/rss+xml" title="Glenn Thompson's Blog" href="/feed.xml" />
<link href="../../dist/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
.prose-palenight {
--tw-prose-body: #bfc7d5;
--tw-prose-headings: #ffd580;
--tw-prose-links: #82aaff;
--tw-prose-code: #c792ea;
--tw-prose-pre-bg: #1b1e2b;
}
.prose h2 {
color: var(--tw-prose-headings);
font-family: Merriweather, serif;
font-weight: 700;
font-size: 1.5rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.prose p {
margin-bottom: 1rem;
line-height: 1.625;
}
.prose a {
color: var(--tw-prose-links);
text-decoration: none;
}
.prose a:hover {
color: #89ddff;
}
.prose code {
color: var(--tw-prose-code);
font-family: 'JetBrains Mono', monospace;
}
.prose pre {
background-color: var(--tw-prose-pre-bg);
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
margin-bottom: 1rem;
}
.prose ul, .prose ol {
margin-top: 0.5rem;
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.prose ul {
list-style-type: disc;
}
.prose ol {
list-style-type: decimal;
}
</style>
</head>
<body class="bg-base-bg text-palenight-50">
<nav class="bg-base-darker/80 backdrop-blur-sm shadow-sm border-b border-palenight-400/20 mb-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="/" class="text-accent-yellow font-serif text-xl font-bold">Glenn Thompson</a>
<div class="flex items-center gap-2 text-accent-yellow text-sm font-bold">
<span>personal, tech, gnu, guix, swaywm, nvidia</span>
<span>•</span>
<time datetime="2024-07-26 10:30">July 26, 2024</time>
<span>•</span>
<span>7 min read</span>
</div>
</div>
</div>
</nav>
<main class="pt-24 pb-16 px-4">
<div class="max-w-4xl mx-auto">
<div class="content text-palenight-100 space-y-6">
<header class="mb-8">
<h1 class="text-4xl font-serif font-bold text-accent-yellow">A Journey Through GNU Guix: From Installation to Returning to Arch Linux</h1>
<div class="flex items-center gap-4 text-palenight-300 mt-4">
<time datetime="2024-07-26 10:30">2024-07-26 10:30</time>
<span>•</span>
<span>7 min read</span>
<span>•</span>
<span>By Glenn Thompson</span>
</div>
<div class="flex flex-wrap gap-2 mt-4">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">personal</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">tech</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">gnu</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">guix</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">swaywm</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">nvidia</span>
</div>
</header>
<article class="prose prose-palenight max-w-none">
<h1>A Journey Through GNU Guix: From Installation to Returning to Arch Linux</h1>
<p>As a long-time user of Arch Linux, I decided to explore the world of GNU Guix to see if it could better suit my needs, especially with my growing interest in functional package management. The journey was insightful, filled with learning experiences, but ultimately led me back to the reliable shores of Arch. Here&#39;s a detailed account of my venture into GNU Guix, adding non-GNU channels, dealing with Nvidia drivers, running SwayWM, and the eventual retreat to Arch.</p>
<h2>Installation of GNU Guix</h2>
<p>The installation process of GNU Guix was straightforward, thanks to the well-documented guide provided on their official website. Here&#39;s a quick rundown of the steps I followed:</p>
<ol>
<li><strong>Downloading the Installation Image</strong>: I started by downloading the latest ISO image from the <a href="https://guix.gnu.org/">GNU Guix website</a>.</li>
<li><strong>Creating a Bootable USB</strong>: Using <code>dd</code>, I created a bootable USB stick to install GNU Guix on my system.</li>
<li><strong>Booting into the Installer</strong>: Booting from the USB was smooth, and I was greeted with the GNU Guix installer. The installer&#39;s simplicity reminded me of early days with Arch, where a minimalistic approach is preferred.</li>
<li><strong>Partitioning and Setting Up File Systems</strong>: I partitioned my drive using <code>fdisk</code> and set up my file systems. I opted for ext4 for simplicity.</li>
<li><strong>Configuring the System</strong>: Following the partition setup, I proceeded to configure my system by selecting the required packages and services. I decided to go with the Sway window manager as it&#39;s my preferred choice on Arch.</li>
</ol>
<h2>System Configuration</h2>
<p>During the installation process a window appears informing you that the <code>config.scm</code> file is located at <code>/etc/config.scm</code>. The first time I installed gnu guix on my work laptop I missed this message (pilot error) and I had to ask in the <a href="https://systemcrafters.net">System Crafters</a> IRC channel at <code>irc.libera.chat</code>, <code>#systemcrafters</code>. Come and join. It&#39;s a great place to be and the community there are an absolute treasure. Use your favourite IRC client or join through the webchat <a href="https://web.libera.chat/?channel=#systemcrafters">here</a>. We would be glad to see you. Tell them glenneth sent you :).</p>
<p>My point is, I missed some vital information, so to the guix manual online it was. This can be found <a href="https://guix.gnu.org/manual/devel/en/guix.html">here</a>. This link will take you to the dev version of the manual. Something else they don&#39;t tell you. This version has a little more detail than the standard manual, and I believe details extra features and may even be a little more up to date.</p>
<h2>Adding Non-GNU Channels</h2>
<p>One of the standout features of GNU Guix is the ability to add non-GNU channels to access a wider array of software packages. Here&#39;s how I did it:</p>
<ol>
<li><strong>Editing Channels</strong>: I edited the <code>~/.config/guix/channels.scm</code> file to include non-GNU channels.<pre><code class="language-scheme">(cons* (channel
(name &#39;non-gnu)
(url &quot;https://example.com/non-gnu-channel.git&quot;))
%default-channels)
</code></pre>
</li>
<li><strong>Updating Channels</strong>: Running <code>guix pull</code> updated my system to include packages from the non-GNU channel.</li>
</ol>
<h2>Installing Nvidia Drivers</h2>
<p>Being a gamer and someone who requires GPU acceleration for certain tasks, Nvidia drivers were a must. Here&#39;s the process I followed:</p>
<ol>
<li><strong>Adding Nvidia Channel</strong>: Added a channel that includes Nvidia drivers.</li>
<li><strong>Installing Drivers</strong>: Installed the drivers using <code>guix package -i nvidia-driver</code>.</li>
<li><strong>Configuring the System</strong>: I had to manually configure Xorg to use the Nvidia drivers, which involved editing the Xorg configuration files.</li>
</ol>
<h2>Creating My Home Environment</h2>
<p>To personalize my setup further, I used <code>guix home import</code> to create my own home environment and add packages. This allowed me to have a consistent environment across different machines. I also edited the <code>config.scm</code> file to include the latest Linux kernels and Nvidia drivers.</p>
<p>Additionally, I used the <code>syncthing home-service-type</code> in my <code>home-configuration.scm</code> file to install and configure Syncthing. This setup ensured my files were always in sync across devices, which is crucial for my workflow.</p>
<h2>GNOME</h2>
<p>All was good and I had a solid desktop environment running, even though it was gnome desktop. I had never used gnome, and I am more at home with a keyboard driven workflow. I had come from hyprland on Arch and wanted to get back to that workflow. The option I was presented with, in order to continue using wayland, pipewire etc. was SwayWM.</p>
<h2>Sway</h2>
<p>Installing SwayWM and it&#39;s dependencies and nice to haves was relatively straightforward. add the required packages, sway, swaybg, swayidle, swaylock, to my home-configuration.scm gile and run <code>guix home reconfigure</code> easy! The packages were installed and we were good to go.</p>
<p>The first issue I encountered was that sway does not run with the proprietary nvidia drivers, this was on the work laptop. I could get it to run but only after adding the <code>--unsupported-gpu</code> flag to <code>exec sway</code>. Lo and behold, we had a default sway window manager running.</p>
<h2>Challenges with SwayWM and SMB Shares</h2>
<p>With the system set up, I ran into a major roadblock: accessing SMB shares in a file manager while running SwayWM.</p>
<ol>
<li><strong>Thunar and GNOME Files</strong>: Neither Thunar nor the GNOME Files application could access SMB shares. This was crucial for my workflow as I frequently access network shares.</li>
<li><strong>Troubleshooting</strong>: I tried various solutions, including installing additional packages and tweaking configurations, but nothing seemed to work.</li>
<li><strong>Community Support</strong>: I reached out to the GNU Guix community for help. While they were supportive, the solutions provided didn&#39;t resolve my issues.</li>
</ol>
<p>To ensure that the problem was not hardware-related, I went out and purchased a Lenovo ThinkPad E16 Gen 1. I upgraded the RAM to 48GB and installed a Lenovo 2TB SSD to make it my personal laptop. However, even on this new setup, I faced the same issues accessing SMB shares and some networking services just wouldn&#39;t work.</p>
<p>I tried deleting the <code>gdm</code> login manager in my system configuration file, but after rebooting it was still showing the gnome login window. This was after reading somewhere online that sway was not on friendly terms with the gdm login manager.</p>
<h2>Returning to Arch Linux</h2>
<p>After several days of troubleshooting and not being able to access my SMB shares reliably, I made the difficult decision to revert to Arch Linux. The steps were:</p>
<ol>
<li><strong>Reinstalling Arch</strong>: I reinstalled Arch Linux using my tried-and-tested setup process.</li>
<li><strong>Configuring SwayWM</strong>: Set up SwayWM and ensured all my applications were running smoothly.</li>
<li><strong>Accessing SMB Shares</strong>: Accessing SMB shares was seamless, just as it was before my experiment with GNU Guix.</li>
</ol>
<h2>Conclusion</h2>
<p>I am still running GNU guix on the work laptop, I had to cave on my personal laptop and revert to Arch. My journey with GNU Guix was both enlightening and challenging. While I appreciate the functional package management and the philosophy behind GNU Guix, certain practical issues, like accessing SMB shares, were deal-breakers for my workflow. Arch Linux continues to be my go-to distribution, providing the flexibility and reliability I need for my daily tasks. So, at the moment I am using my personal laptop for work and still trying to figure out the issues I am having on my work laptop. But, to be honest, I prefer working on the thinkpad over working on the MSI laptop that work handed out :).</p>
<p>If you&#39;re an enthusiast looking to explore new package management paradigms, I highly recommend giving GNU Guix a try. Just be prepared for a few hiccups along the way, and always have a backup plan!</p>
<hr>
<p>Feel free to share your thoughts and experiences with GNU Guix or any other distributions you&#39;ve tried. Let&#39;s keep the conversation going!</p>
<h2>Shameless plug</h2>
<p>Go <a href="https://systemcrafters.net/community/">here</a> to find all the ways you can engage with the SystemCrafters community. It&#39;s a great place to hang out and discuss all thing craftery. You will also notice the Craftering ring that I am a part of. Click the links and see blogs by some of the community members. Always interesting to read what other Crafters are up to.</p>
<p>Thanks for taking the time to read my blog post. It is greatly appreciated, and I hope you come back.</p>
<p>Happy Hacking!!</p>
</article>
</div>
</div>
</main>
<footer class="bg-base-darker text-palenight-200 py-12 border-t border-palenight-400/20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<p class="text-palenight-300">&copy; 2024 Glenn Thompson. All rights reserved.</p>
<div class="webring-text mt-6">
<p class="text-palenight-300">I am part of the <a href="https://systemcrafters.net" target="_blank" class="text-accent-blue hover:text-accent-cyan">System Crafters</a> webring:</p>
</div>
<div class="craftering mt-2 flex items-center justify-center gap-4 text-accent-blue">
<a href="https://craftering.systemcrafters.net/@glenneth/previous" class="hover:text-accent-cyan">Previous</a>
<a href="https://craftering.systemcrafters.net/@glenneth" class="hover:text-accent-cyan">Random</a>
<a href="https://craftering.systemcrafters.net/@glenneth/next" class="hover:text-accent-cyan">Next</a>
</div>
<p class="text-palenight-300 mt-2">
<a href="mailto:glenn@glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenn@glenneth.org</a> |
<a href="https://glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenneth.org</a>
</p>
</div>
</div>
</footer>
</body>
<!DOCTYPE html>
<html lang="en" class="bg-base-bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta property="og:title" content="A Journey Through GNU Guix: From Installation to Returning to Arch Linux">
<meta property="og:description" content="">
<meta property="og:url" content="https://glenneth.orgcontent/posts/2024-07-26-gnu-guix-journey">
<title>A Journey Through GNU Guix: From Installation to Returning to Arch Linux - Glenn Thompson</title>
<link rel="alternate" type="application/rss+xml" title="Glenn Thompson's Blog" href="/feed.xml" />
<link href="../../dist/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
.prose-palenight {
--tw-prose-body: #bfc7d5;
--tw-prose-headings: #ffd580;
--tw-prose-links: #82aaff;
--tw-prose-code: #c792ea;
--tw-prose-pre-bg: #1b1e2b;
}
.prose h2 {
color: var(--tw-prose-headings);
font-family: Merriweather, serif;
font-weight: 700;
font-size: 1.5rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.prose p {
margin-bottom: 1rem;
line-height: 1.625;
}
.prose a {
color: var(--tw-prose-links);
text-decoration: none;
}
.prose a:hover {
color: #89ddff;
}
.prose code {
color: var(--tw-prose-code);
font-family: 'JetBrains Mono', monospace;
}
.prose pre {
background-color: var(--tw-prose-pre-bg);
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
margin-bottom: 1rem;
}
.prose ul, .prose ol {
margin-top: 0.5rem;
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.prose ul {
list-style-type: disc;
}
.prose ol {
list-style-type: decimal;
}
</style>
</head>
<body class="bg-base-bg text-palenight-50">
<nav class="bg-base-darker/80 backdrop-blur-sm shadow-sm border-b border-palenight-400/20 mb-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="/" class="text-accent-yellow font-serif text-xl font-bold">Glenn Thompson</a>
<div class="flex items-center gap-2 text-accent-yellow text-sm font-bold">
<span>personal, tech, gnu, guix, swaywm, nvidia</span>
<span>•</span>
<time datetime="2024-07-26 10:30">July 26, 2024</time>
<span>•</span>
<span>7 min read</span>
</div>
</div>
</div>
</nav>
<main class="pt-24 pb-16 px-4">
<div class="max-w-4xl mx-auto">
<div class="content text-palenight-100 space-y-6">
<header class="mb-8">
<h1 class="text-4xl font-serif font-bold text-accent-yellow">A Journey Through GNU Guix: From Installation to Returning to Arch Linux</h1>
<div class="flex items-center gap-4 text-palenight-300 mt-4">
<time datetime="2024-07-26 10:30">2024-07-26 10:30</time>
<span>•</span>
<span>7 min read</span>
<span>•</span>
<span>By Glenn Thompson</span>
</div>
<div class="flex flex-wrap gap-2 mt-4">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">personal</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">tech</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">gnu</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">guix</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">swaywm</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">nvidia</span>
</div>
</header>
<article class="prose prose-palenight max-w-none">
<h1>A Journey Through GNU Guix: From Installation to Returning to Arch Linux</h1>
<p>As a long-time user of Arch Linux, I decided to explore the world of GNU Guix to see if it could better suit my needs, especially with my growing interest in functional package management. The journey was insightful, filled with learning experiences, but ultimately led me back to the reliable shores of Arch. Here&#39;s a detailed account of my venture into GNU Guix, adding non-GNU channels, dealing with Nvidia drivers, running SwayWM, and the eventual retreat to Arch.</p>
<h2>Installation of GNU Guix</h2>
<p>The installation process of GNU Guix was straightforward, thanks to the well-documented guide provided on their official website. Here&#39;s a quick rundown of the steps I followed:</p>
<ol>
<li><strong>Downloading the Installation Image</strong>: I started by downloading the latest ISO image from the <a href="https://guix.gnu.org/">GNU Guix website</a>.</li>
<li><strong>Creating a Bootable USB</strong>: Using <code>dd</code>, I created a bootable USB stick to install GNU Guix on my system.</li>
<li><strong>Booting into the Installer</strong>: Booting from the USB was smooth, and I was greeted with the GNU Guix installer. The installer&#39;s simplicity reminded me of early days with Arch, where a minimalistic approach is preferred.</li>
<li><strong>Partitioning and Setting Up File Systems</strong>: I partitioned my drive using <code>fdisk</code> and set up my file systems. I opted for ext4 for simplicity.</li>
<li><strong>Configuring the System</strong>: Following the partition setup, I proceeded to configure my system by selecting the required packages and services. I decided to go with the Sway window manager as it&#39;s my preferred choice on Arch.</li>
</ol>
<h2>System Configuration</h2>
<p>During the installation process a window appears informing you that the <code>config.scm</code> file is located at <code>/etc/config.scm</code>. The first time I installed gnu guix on my work laptop I missed this message (pilot error) and I had to ask in the <a href="https://systemcrafters.net">System Crafters</a> IRC channel at <code>irc.libera.chat</code>, <code>#systemcrafters</code>. Come and join. It&#39;s a great place to be and the community there are an absolute treasure. Use your favourite IRC client or join through the webchat <a href="https://web.libera.chat/?channel=#systemcrafters">here</a>. We would be glad to see you. Tell them glenneth sent you :).</p>
<p>My point is, I missed some vital information, so to the guix manual online it was. This can be found <a href="https://guix.gnu.org/manual/devel/en/guix.html">here</a>. This link will take you to the dev version of the manual. Something else they don&#39;t tell you. This version has a little more detail than the standard manual, and I believe details extra features and may even be a little more up to date.</p>
<h2>Adding Non-GNU Channels</h2>
<p>One of the standout features of GNU Guix is the ability to add non-GNU channels to access a wider array of software packages. Here&#39;s how I did it:</p>
<ol>
<li><strong>Editing Channels</strong>: I edited the <code>~/.config/guix/channels.scm</code> file to include non-GNU channels.<pre><code class="language-scheme">(cons* (channel
(name &#39;non-gnu)
(url &quot;https://example.com/non-gnu-channel.git&quot;))
%default-channels)
</code></pre>
</li>
<li><strong>Updating Channels</strong>: Running <code>guix pull</code> updated my system to include packages from the non-GNU channel.</li>
</ol>
<h2>Installing Nvidia Drivers</h2>
<p>Being a gamer and someone who requires GPU acceleration for certain tasks, Nvidia drivers were a must. Here&#39;s the process I followed:</p>
<ol>
<li><strong>Adding Nvidia Channel</strong>: Added a channel that includes Nvidia drivers.</li>
<li><strong>Installing Drivers</strong>: Installed the drivers using <code>guix package -i nvidia-driver</code>.</li>
<li><strong>Configuring the System</strong>: I had to manually configure Xorg to use the Nvidia drivers, which involved editing the Xorg configuration files.</li>
</ol>
<h2>Creating My Home Environment</h2>
<p>To personalize my setup further, I used <code>guix home import</code> to create my own home environment and add packages. This allowed me to have a consistent environment across different machines. I also edited the <code>config.scm</code> file to include the latest Linux kernels and Nvidia drivers.</p>
<p>Additionally, I used the <code>syncthing home-service-type</code> in my <code>home-configuration.scm</code> file to install and configure Syncthing. This setup ensured my files were always in sync across devices, which is crucial for my workflow.</p>
<h2>GNOME</h2>
<p>All was good and I had a solid desktop environment running, even though it was gnome desktop. I had never used gnome, and I am more at home with a keyboard driven workflow. I had come from hyprland on Arch and wanted to get back to that workflow. The option I was presented with, in order to continue using wayland, pipewire etc. was SwayWM.</p>
<h2>Sway</h2>
<p>Installing SwayWM and it&#39;s dependencies and nice to haves was relatively straightforward. add the required packages, sway, swaybg, swayidle, swaylock, to my home-configuration.scm gile and run <code>guix home reconfigure</code> easy! The packages were installed and we were good to go.</p>
<p>The first issue I encountered was that sway does not run with the proprietary nvidia drivers, this was on the work laptop. I could get it to run but only after adding the <code>--unsupported-gpu</code> flag to <code>exec sway</code>. Lo and behold, we had a default sway window manager running.</p>
<h2>Challenges with SwayWM and SMB Shares</h2>
<p>With the system set up, I ran into a major roadblock: accessing SMB shares in a file manager while running SwayWM.</p>
<ol>
<li><strong>Thunar and GNOME Files</strong>: Neither Thunar nor the GNOME Files application could access SMB shares. This was crucial for my workflow as I frequently access network shares.</li>
<li><strong>Troubleshooting</strong>: I tried various solutions, including installing additional packages and tweaking configurations, but nothing seemed to work.</li>
<li><strong>Community Support</strong>: I reached out to the GNU Guix community for help. While they were supportive, the solutions provided didn&#39;t resolve my issues.</li>
</ol>
<p>To ensure that the problem was not hardware-related, I went out and purchased a Lenovo ThinkPad E16 Gen 1. I upgraded the RAM to 48GB and installed a Lenovo 2TB SSD to make it my personal laptop. However, even on this new setup, I faced the same issues accessing SMB shares and some networking services just wouldn&#39;t work.</p>
<p>I tried deleting the <code>gdm</code> login manager in my system configuration file, but after rebooting it was still showing the gnome login window. This was after reading somewhere online that sway was not on friendly terms with the gdm login manager.</p>
<h2>Returning to Arch Linux</h2>
<p>After several days of troubleshooting and not being able to access my SMB shares reliably, I made the difficult decision to revert to Arch Linux. The steps were:</p>
<ol>
<li><strong>Reinstalling Arch</strong>: I reinstalled Arch Linux using my tried-and-tested setup process.</li>
<li><strong>Configuring SwayWM</strong>: Set up SwayWM and ensured all my applications were running smoothly.</li>
<li><strong>Accessing SMB Shares</strong>: Accessing SMB shares was seamless, just as it was before my experiment with GNU Guix.</li>
</ol>
<h2>Conclusion</h2>
<p>I am still running GNU guix on the work laptop, I had to cave on my personal laptop and revert to Arch. My journey with GNU Guix was both enlightening and challenging. While I appreciate the functional package management and the philosophy behind GNU Guix, certain practical issues, like accessing SMB shares, were deal-breakers for my workflow. Arch Linux continues to be my go-to distribution, providing the flexibility and reliability I need for my daily tasks. So, at the moment I am using my personal laptop for work and still trying to figure out the issues I am having on my work laptop. But, to be honest, I prefer working on the thinkpad over working on the MSI laptop that work handed out :).</p>
<p>If you&#39;re an enthusiast looking to explore new package management paradigms, I highly recommend giving GNU Guix a try. Just be prepared for a few hiccups along the way, and always have a backup plan!</p>
<hr>
<p>Feel free to share your thoughts and experiences with GNU Guix or any other distributions you&#39;ve tried. Let&#39;s keep the conversation going!</p>
<h2>Shameless plug</h2>
<p>Go <a href="https://systemcrafters.net/community/">here</a> to find all the ways you can engage with the SystemCrafters community. It&#39;s a great place to hang out and discuss all thing craftery. You will also notice the Craftering ring that I am a part of. Click the links and see blogs by some of the community members. Always interesting to read what other Crafters are up to.</p>
<p>Thanks for taking the time to read my blog post. It is greatly appreciated, and I hope you come back.</p>
<p>Happy Hacking!!</p>
</article>
</div>
</div>
</main>
<footer class="bg-base-darker text-palenight-200 py-12 border-t border-palenight-400/20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<p class="text-palenight-300">&copy; 2024 Glenn Thompson. All rights reserved.</p>
<div class="webring-text mt-6">
<p class="text-palenight-300">I am part of the <a href="https://systemcrafters.net" target="_blank" class="text-accent-blue hover:text-accent-cyan">System Crafters</a> webring:</p>
</div>
<div class="craftering mt-2 flex items-center justify-center gap-4 text-accent-blue">
<a href="https://craftering.systemcrafters.net/@glenneth/previous" class="hover:text-accent-cyan">Previous</a>
<a href="https://craftering.systemcrafters.net/@glenneth" class="hover:text-accent-cyan">Random</a>
<a href="https://craftering.systemcrafters.net/@glenneth/next" class="hover:text-accent-cyan">Next</a>
</div>
<p class="text-palenight-300 mt-2">
<a href="mailto:glenn@glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenn@glenneth.org</a> |
<a href="https://glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenneth.org</a>
</p>
</div>
</div>
</footer>
</body>
</html>

202
content/posts/2024-07-26-gnu-guix-journey.md
View File

@ -1,101 +1,101 @@
---
title: A Journey Through GNU Guix: From Installation to Returning to Arch Linux
author: Glenn Thompson
date: 2024-07-26 10:30
tags: personal, tech, gnu, guix, swaywm, nvidia
---
# A Journey Through GNU Guix: From Installation to Returning to Arch Linux
As a long-time user of Arch Linux, I decided to explore the world of GNU Guix to see if it could better suit my needs, especially with my growing interest in functional package management. The journey was insightful, filled with learning experiences, but ultimately led me back to the reliable shores of Arch. Here's a detailed account of my venture into GNU Guix, adding non-GNU channels, dealing with Nvidia drivers, running SwayWM, and the eventual retreat to Arch.
## Installation of GNU Guix
The installation process of GNU Guix was straightforward, thanks to the well-documented guide provided on their official website. Here's a quick rundown of the steps I followed:
1. **Downloading the Installation Image**: I started by downloading the latest ISO image from the [GNU Guix website](https://guix.gnu.org/).
2. **Creating a Bootable USB**: Using `dd`, I created a bootable USB stick to install GNU Guix on my system.
3. **Booting into the Installer**: Booting from the USB was smooth, and I was greeted with the GNU Guix installer. The installer's simplicity reminded me of early days with Arch, where a minimalistic approach is preferred.
4. **Partitioning and Setting Up File Systems**: I partitioned my drive using `fdisk` and set up my file systems. I opted for ext4 for simplicity.
5. **Configuring the System**: Following the partition setup, I proceeded to configure my system by selecting the required packages and services. I decided to go with the Sway window manager as it's my preferred choice on Arch.
## System Configuration
During the installation process a window appears informing you that the `config.scm` file is located at `/etc/config.scm`. The first time I installed gnu guix on my work laptop I missed this message (pilot error) and I had to ask in the [System Crafters](https://systemcrafters.net) IRC channel at `irc.libera.chat`, `#systemcrafters`. Come and join. It's a great place to be and the community there are an absolute treasure. Use your favourite IRC client or join through the webchat [here](https://web.libera.chat/?channel=#systemcrafters). We would be glad to see you. Tell them glenneth sent you :).
My point is, I missed some vital information, so to the guix manual online it was. This can be found [here](https://guix.gnu.org/manual/devel/en/guix.html). This link will take you to the dev version of the manual. Something else they don't tell you. This version has a little more detail than the standard manual, and I believe details extra features and may even be a little more up to date.
## Adding Non-GNU Channels
One of the standout features of GNU Guix is the ability to add non-GNU channels to access a wider array of software packages. Here's how I did it:
1. **Editing Channels**: I edited the `~/.config/guix/channels.scm` file to include non-GNU channels.
```scheme
(cons* (channel
(name 'non-gnu)
(url "https://example.com/non-gnu-channel.git"))
%default-channels)
```
2. **Updating Channels**: Running `guix pull` updated my system to include packages from the non-GNU channel.
## Installing Nvidia Drivers
Being a gamer and someone who requires GPU acceleration for certain tasks, Nvidia drivers were a must. Here's the process I followed:
1. **Adding Nvidia Channel**: Added a channel that includes Nvidia drivers.
2. **Installing Drivers**: Installed the drivers using `guix package -i nvidia-driver`.
3. **Configuring the System**: I had to manually configure Xorg to use the Nvidia drivers, which involved editing the Xorg configuration files.
## Creating My Home Environment
To personalize my setup further, I used `guix home import` to create my own home environment and add packages. This allowed me to have a consistent environment across different machines. I also edited the `config.scm` file to include the latest Linux kernels and Nvidia drivers.
Additionally, I used the `syncthing home-service-type` in my `home-configuration.scm` file to install and configure Syncthing. This setup ensured my files were always in sync across devices, which is crucial for my workflow.
## GNOME
All was good and I had a solid desktop environment running, even though it was gnome desktop. I had never used gnome, and I am more at home with a keyboard driven workflow. I had come from hyprland on Arch and wanted to get back to that workflow. The option I was presented with, in order to continue using wayland, pipewire etc. was SwayWM.
## Sway
Installing SwayWM and it's dependencies and nice to haves was relatively straightforward. add the required packages, sway, swaybg, swayidle, swaylock, to my home-configuration.scm gile and run `guix home reconfigure` easy! The packages were installed and we were good to go.
The first issue I encountered was that sway does not run with the proprietary nvidia drivers, this was on the work laptop. I could get it to run but only after adding the `--unsupported-gpu` flag to `exec sway`. Lo and behold, we had a default sway window manager running.
## Challenges with SwayWM and SMB Shares
With the system set up, I ran into a major roadblock: accessing SMB shares in a file manager while running SwayWM.
1. **Thunar and GNOME Files**: Neither Thunar nor the GNOME Files application could access SMB shares. This was crucial for my workflow as I frequently access network shares.
2. **Troubleshooting**: I tried various solutions, including installing additional packages and tweaking configurations, but nothing seemed to work.
3. **Community Support**: I reached out to the GNU Guix community for help. While they were supportive, the solutions provided didn't resolve my issues.
To ensure that the problem was not hardware-related, I went out and purchased a Lenovo ThinkPad E16 Gen 1. I upgraded the RAM to 48GB and installed a Lenovo 2TB SSD to make it my personal laptop. However, even on this new setup, I faced the same issues accessing SMB shares and some networking services just wouldn't work.
I tried deleting the `gdm` login manager in my system configuration file, but after rebooting it was still showing the gnome login window. This was after reading somewhere online that sway was not on friendly terms with the gdm login manager.
## Returning to Arch Linux
After several days of troubleshooting and not being able to access my SMB shares reliably, I made the difficult decision to revert to Arch Linux. The steps were:
1. **Reinstalling Arch**: I reinstalled Arch Linux using my tried-and-tested setup process.
2. **Configuring SwayWM**: Set up SwayWM and ensured all my applications were running smoothly.
3. **Accessing SMB Shares**: Accessing SMB shares was seamless, just as it was before my experiment with GNU Guix.
## Conclusion
I am still running GNU guix on the work laptop, I had to cave on my personal laptop and revert to Arch. My journey with GNU Guix was both enlightening and challenging. While I appreciate the functional package management and the philosophy behind GNU Guix, certain practical issues, like accessing SMB shares, were deal-breakers for my workflow. Arch Linux continues to be my go-to distribution, providing the flexibility and reliability I need for my daily tasks. So, at the moment I am using my personal laptop for work and still trying to figure out the issues I am having on my work laptop. But, to be honest, I prefer working on the thinkpad over working on the MSI laptop that work handed out :).
If you're an enthusiast looking to explore new package management paradigms, I highly recommend giving GNU Guix a try. Just be prepared for a few hiccups along the way, and always have a backup plan!
---
Feel free to share your thoughts and experiences with GNU Guix or any other distributions you've tried. Let's keep the conversation going!
## Shameless plug
Go [here](https://systemcrafters.net/community/) to find all the ways you can engage with the SystemCrafters community. It's a great place to hang out and discuss all thing craftery. You will also notice the Craftering ring that I am a part of. Click the links and see blogs by some of the community members. Always interesting to read what other Crafters are up to.
Thanks for taking the time to read my blog post. It is greatly appreciated, and I hope you come back.
Happy Hacking!!
---
title: A Journey Through GNU Guix: From Installation to Returning to Arch Linux
author: Glenn Thompson
date: 2024-07-26 10:30
tags: personal, tech, gnu, guix, swaywm, nvidia
---
# A Journey Through GNU Guix: From Installation to Returning to Arch Linux
As a long-time user of Arch Linux, I decided to explore the world of GNU Guix to see if it could better suit my needs, especially with my growing interest in functional package management. The journey was insightful, filled with learning experiences, but ultimately led me back to the reliable shores of Arch. Here's a detailed account of my venture into GNU Guix, adding non-GNU channels, dealing with Nvidia drivers, running SwayWM, and the eventual retreat to Arch.
## Installation of GNU Guix
The installation process of GNU Guix was straightforward, thanks to the well-documented guide provided on their official website. Here's a quick rundown of the steps I followed:
1. **Downloading the Installation Image**: I started by downloading the latest ISO image from the [GNU Guix website](https://guix.gnu.org/).
2. **Creating a Bootable USB**: Using `dd`, I created a bootable USB stick to install GNU Guix on my system.
3. **Booting into the Installer**: Booting from the USB was smooth, and I was greeted with the GNU Guix installer. The installer's simplicity reminded me of early days with Arch, where a minimalistic approach is preferred.
4. **Partitioning and Setting Up File Systems**: I partitioned my drive using `fdisk` and set up my file systems. I opted for ext4 for simplicity.
5. **Configuring the System**: Following the partition setup, I proceeded to configure my system by selecting the required packages and services. I decided to go with the Sway window manager as it's my preferred choice on Arch.
## System Configuration
During the installation process a window appears informing you that the `config.scm` file is located at `/etc/config.scm`. The first time I installed gnu guix on my work laptop I missed this message (pilot error) and I had to ask in the [System Crafters](https://systemcrafters.net) IRC channel at `irc.libera.chat`, `#systemcrafters`. Come and join. It's a great place to be and the community there are an absolute treasure. Use your favourite IRC client or join through the webchat [here](https://web.libera.chat/?channel=#systemcrafters). We would be glad to see you. Tell them glenneth sent you :).
My point is, I missed some vital information, so to the guix manual online it was. This can be found [here](https://guix.gnu.org/manual/devel/en/guix.html). This link will take you to the dev version of the manual. Something else they don't tell you. This version has a little more detail than the standard manual, and I believe details extra features and may even be a little more up to date.
## Adding Non-GNU Channels
One of the standout features of GNU Guix is the ability to add non-GNU channels to access a wider array of software packages. Here's how I did it:
1. **Editing Channels**: I edited the `~/.config/guix/channels.scm` file to include non-GNU channels.
```scheme
(cons* (channel
(name 'non-gnu)
(url "https://example.com/non-gnu-channel.git"))
%default-channels)
```
2. **Updating Channels**: Running `guix pull` updated my system to include packages from the non-GNU channel.
## Installing Nvidia Drivers
Being a gamer and someone who requires GPU acceleration for certain tasks, Nvidia drivers were a must. Here's the process I followed:
1. **Adding Nvidia Channel**: Added a channel that includes Nvidia drivers.
2. **Installing Drivers**: Installed the drivers using `guix package -i nvidia-driver`.
3. **Configuring the System**: I had to manually configure Xorg to use the Nvidia drivers, which involved editing the Xorg configuration files.
## Creating My Home Environment
To personalize my setup further, I used `guix home import` to create my own home environment and add packages. This allowed me to have a consistent environment across different machines. I also edited the `config.scm` file to include the latest Linux kernels and Nvidia drivers.
Additionally, I used the `syncthing home-service-type` in my `home-configuration.scm` file to install and configure Syncthing. This setup ensured my files were always in sync across devices, which is crucial for my workflow.
## GNOME
All was good and I had a solid desktop environment running, even though it was gnome desktop. I had never used gnome, and I am more at home with a keyboard driven workflow. I had come from hyprland on Arch and wanted to get back to that workflow. The option I was presented with, in order to continue using wayland, pipewire etc. was SwayWM.
## Sway
Installing SwayWM and it's dependencies and nice to haves was relatively straightforward. add the required packages, sway, swaybg, swayidle, swaylock, to my home-configuration.scm gile and run `guix home reconfigure` easy! The packages were installed and we were good to go.
The first issue I encountered was that sway does not run with the proprietary nvidia drivers, this was on the work laptop. I could get it to run but only after adding the `--unsupported-gpu` flag to `exec sway`. Lo and behold, we had a default sway window manager running.
## Challenges with SwayWM and SMB Shares
With the system set up, I ran into a major roadblock: accessing SMB shares in a file manager while running SwayWM.
1. **Thunar and GNOME Files**: Neither Thunar nor the GNOME Files application could access SMB shares. This was crucial for my workflow as I frequently access network shares.
2. **Troubleshooting**: I tried various solutions, including installing additional packages and tweaking configurations, but nothing seemed to work.
3. **Community Support**: I reached out to the GNU Guix community for help. While they were supportive, the solutions provided didn't resolve my issues.
To ensure that the problem was not hardware-related, I went out and purchased a Lenovo ThinkPad E16 Gen 1. I upgraded the RAM to 48GB and installed a Lenovo 2TB SSD to make it my personal laptop. However, even on this new setup, I faced the same issues accessing SMB shares and some networking services just wouldn't work.
I tried deleting the `gdm` login manager in my system configuration file, but after rebooting it was still showing the gnome login window. This was after reading somewhere online that sway was not on friendly terms with the gdm login manager.
## Returning to Arch Linux
After several days of troubleshooting and not being able to access my SMB shares reliably, I made the difficult decision to revert to Arch Linux. The steps were:
1. **Reinstalling Arch**: I reinstalled Arch Linux using my tried-and-tested setup process.
2. **Configuring SwayWM**: Set up SwayWM and ensured all my applications were running smoothly.
3. **Accessing SMB Shares**: Accessing SMB shares was seamless, just as it was before my experiment with GNU Guix.
## Conclusion
I am still running GNU guix on the work laptop, I had to cave on my personal laptop and revert to Arch. My journey with GNU Guix was both enlightening and challenging. While I appreciate the functional package management and the philosophy behind GNU Guix, certain practical issues, like accessing SMB shares, were deal-breakers for my workflow. Arch Linux continues to be my go-to distribution, providing the flexibility and reliability I need for my daily tasks. So, at the moment I am using my personal laptop for work and still trying to figure out the issues I am having on my work laptop. But, to be honest, I prefer working on the thinkpad over working on the MSI laptop that work handed out :).
If you're an enthusiast looking to explore new package management paradigms, I highly recommend giving GNU Guix a try. Just be prepared for a few hiccups along the way, and always have a backup plan!
---
Feel free to share your thoughts and experiences with GNU Guix or any other distributions you've tried. Let's keep the conversation going!
## Shameless plug
Go [here](https://systemcrafters.net/community/) to find all the ways you can engage with the SystemCrafters community. It's a great place to hang out and discuss all thing craftery. You will also notice the Craftering ring that I am a part of. Click the links and see blogs by some of the community members. Always interesting to read what other Crafters are up to.
Thanks for taking the time to read my blog post. It is greatly appreciated, and I hope you come back.
Happy Hacking!!

374
content/posts/2024-09-24-scheme-journey.html
View File

@ -1,188 +1,188 @@
<!DOCTYPE html>
<html lang="en" class="bg-base-bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta property="og:title" content="A Journey into Scheme">
<meta property="og:description" content="">
<meta property="og:url" content="https://glenneth.orgcontent/posts/2024-09-24-scheme-journey">
<title>A Journey into Scheme - Glenn Thompson</title>
<link rel="alternate" type="application/rss+xml" title="Glenn Thompson's Blog" href="/feed.xml" />
<link href="../../dist/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
.prose-palenight {
--tw-prose-body: #bfc7d5;
--tw-prose-headings: #ffd580;
--tw-prose-links: #82aaff;
--tw-prose-code: #c792ea;
--tw-prose-pre-bg: #1b1e2b;
}
.prose h2 {
color: var(--tw-prose-headings);
font-family: Merriweather, serif;
font-weight: 700;
font-size: 1.5rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.prose p {
margin-bottom: 1rem;
line-height: 1.625;
}
.prose a {
color: var(--tw-prose-links);
text-decoration: none;
}
.prose a:hover {
color: #89ddff;
}
.prose code {
color: var(--tw-prose-code);
font-family: 'JetBrains Mono', monospace;
}
.prose pre {
background-color: var(--tw-prose-pre-bg);
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
margin-bottom: 1rem;
}
.prose ul, .prose ol {
margin-top: 0.5rem;
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.prose ul {
list-style-type: disc;
}
.prose ol {
list-style-type: decimal;
}
</style>
</head>
<body class="bg-base-bg text-palenight-50">
<nav class="bg-base-darker/80 backdrop-blur-sm shadow-sm border-b border-palenight-400/20 mb-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="/" class="text-accent-yellow font-serif text-xl font-bold">Glenn Thompson</a>
<div class="flex items-center gap-2 text-accent-yellow text-sm font-bold">
<span>personal, tech, guile, scheme, gnu, development</span>
<span>•</span>
<time datetime="2024-09-24 09:30">September 24, 2024</time>
<span>•</span>
<span>5 min read</span>
</div>
</div>
</div>
</nav>
<main class="pt-24 pb-16 px-4">
<div class="max-w-4xl mx-auto">
<div class="content text-palenight-100 space-y-6">
<header class="mb-8">
<h1 class="text-4xl font-serif font-bold text-accent-yellow">A Journey into Scheme</h1>
<div class="flex items-center gap-4 text-palenight-300 mt-4">
<time datetime="2024-09-24 09:30">2024-09-24 09:30</time>
<span>•</span>
<span>5 min read</span>
<span>•</span>
<span>By Glenn Thompson</span>
</div>
<div class="flex flex-wrap gap-2 mt-4">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">personal</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">tech</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">guile</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">scheme</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">gnu</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">development</span>
</div>
</header>
<article class="prose prose-palenight max-w-none">
<h1>My Journey into Scheme: Building a Simple Symlink Manager with Guile Scheme</h1>
<h2>Introduction</h2>
<p>I&#39;ve spent my career as an electrical engineer, not a software developer. However, my recent journey in to GNU/Liniux required a tool for managing symlinks, and that&#39;s how I began learning Scheme—specifically Guile Scheme. I&#39;m writing this post to share how I built <code>stash</code>, a utility that mimics GNU Stow&#39;s functionality, and how my learning journey was shaped by David Wilson&#39;s &quot;Hands-On Guile Scheme for Beginners&quot; course from System Crafters, more about this below.</p>
<h2>How I Started with Scheme</h2>
<p>My programming background was <em>VERY</em> limited, I produce documents in (La)Tex but I decided to take the plunge into learning Scheme, thanks to a course led by David Wilson from System Crafters. The course, <a href="https://systemcrafters.net/courses/hands-on-guile-scheme-beginners/">&quot;Hands-On Guile Scheme for Beginners&quot;</a>, was incredibly helpful in making Scheme accessible even for someone like me, without a traditional programming background. I know (La)Tex isn&#39;t a programming language, it&#39;s typesetting. But how hard can it be? Right?</p>
<p>The course took me through the basics of Scheme, from simple expressions to more complex concepts like functions, recursion, and working with files. This structured learning environment gave me the confidence to start building <code>stash</code>.</p>
<p>The course was &quot;instructor-led&quot; with live meet-up sessions weekly. David has since made this course on-demand, and will be, if not already, available at the above link. Highly recommended if you are interested in taking your first steps with scheme.</p>
<h2>Why Build Stash?</h2>
<p>After completing David Wilson&#39;s course, I wanted to put my newly found Guile Scheme skills into practice with a real project. It wasn&#39;t enough just to understand the language conceptually—I needed to build something tangible that solved a problem I encountered regularly in my workflow. Writing <code>stash</code> gave me that opportunity. It allowed me to apply what I&#39;d learned while also deepening my understanding of file manipulation, command-line tools, and conflict resolution—all within the Guile Scheme environment.</p>
<p>After migrating to GNU/Linux and speaking with other <a href="https://systemcrafters.net/community">System Crafters Community</a> members, I found I needed a way to manage symbolic links and organize directories. Existing tools like GNU Stow helped, but I wanted to learn how such tools are built. I decided to write my own version using Guile Scheme to enhance my understanding of the language and to have more control over the functionality.</p>
<p>The goal of <code>stash</code> is simple: allow users to move directories and create symlinks with conflict resolution, offering options to overwrite, back up, skip, or cancel the operation.</p>
<h2>Breaking Down Stash</h2>
<p>The core of <code>stash</code> revolves around:</p>
<ol>
<li><strong>Moving Directories</strong>: Using Scheme&#39;s file manipulation functions, I learned how to move directories and files around. </li>
<li><strong>Creating Symlinks</strong>: I implemented functions to create symlinks to the moved directories, ensuring that the original structure remains accessible.</li>
<li><strong>Conflict Resolution</strong>: One of the key features I wanted was handling conflicts when a file or symlink already exists at the target location. This required prompting the user for input and responding accordingly (backup, overwrite, skip, or cancel).</li>
</ol>
<p>Here&#39;s an excerpt of the core functionality that handles moving a source directory and creating a symlink:</p>
<pre><code class="language-scheme">;;; Helper function to move source to target
(define (move-source-to-target source-dir target-dir)
&quot;Move the entire source directory to the target directory.&quot;
(let* ((source-dir (expand-home source-dir))
(target-dir (expand-home target-dir))
(source-name (basename source-dir))
(target-source-dir (string-append target-dir &quot;/&quot; source-name)))
(if (file-exists? target-source-dir)
;; Conflict handling here...
...)
(rename-file source-dir target-source-dir)
(display (format #f &quot;Moved ~a to ~a\n&quot; source-dir target-source-dir))))
</code></pre>
<h2>What I Learned</h2>
<p>This project taught me a lot about not just Scheme, but programming in general:</p>
<ul>
<li><strong>File and Directory Manipulation</strong>: Scheme&#39;s file handling functions were different from what I had experienced before, but they allowed for powerful manipulation of file systems.</li>
<li><strong>Command-Line Utilities</strong>: Scheme isn&#39;t just a language for academic exercises; you can write real, useful command-line tools with it.</li>
<li><strong>Problem Solving</strong>: From parsing command-line arguments to resolving conflicts with existing files, every part of the program required careful thought and consideration of edge cases.</li>
</ul>
<h2>Guile Scheme Support Resources</h2>
<ol>
<li><p><strong><a href="https://www.gnu.org/software/guile/docs/">Guile Scheme Documentation</a></strong><br>The official documentation for Guile Scheme, which includes tutorials, references, and the Guile Manual.</p>
</li>
<li><p><strong><a href="https://www.gnu.org/software/guile/manual/html_node/">Guile Reference Manual</a></strong><br>A comprehensive manual covering core language concepts, libraries, and functions available in Guile Scheme.</p>
</li>
<li><p><strong><a href="http://community.schemewiki.org/">Scheme Wiki</a></strong><br>A community-maintained wiki that covers various Scheme dialects, including Guile Scheme, with tutorials, guides, and general information on Scheme programming.</p>
</li>
<li><p><strong><a href="http://schemers.org/">Guile at Schemers.org</a></strong><br>A site dedicated to Scheme with resources, libraries, tools, and documentation for Scheme and its implementations, including Guile.</p>
</li>
<li><p><strong><a href="https://systemcrafters.net/">System Crafters</a></strong><br>Led by David Wilson, System Crafters provides tutorials and blog posts on Guile Scheme and other GNU tools.</p>
</li>
<li><p><strong><a href="https://lists.gnu.org/mailman/listinfo/guile-user">Guile Users Mailing List</a></strong><br>Join the Guile mailing list to ask questions and engage with the Guile Scheme community.</p>
</li>
<li><p><strong><a href="https://github.com/artyom-poptsov/guile-cookbook">Guile Cookbook</a></strong><br>An unofficial GitHub repository with practical code snippets and tips for Guile Scheme, covering various common use cases and tasks.</p>
</li>
<li><p><strong><a href="https://libera.chat/">#guile and #scheme on Libera Chat IRC</a></strong><br>A helpful IRC channel where you can connect with other Guile users for real-time support and advice.</p>
</li>
<li><p><strong><a href="https://Libera.chat/">#systemcrafters on Libera Chat IRC</a></strong><br>A <em>SUPER</em> helpful IRC channel not only for guile and scheme, there are a huge variety of different people here. Tell them glenneth sent you.</p>
</li>
</ol>
<h2>Next Steps</h2>
<p>I am still refining <code>stash</code>, especially around its conflict resolution system and the way it handles symbolic links. But it&#39;s in a usable state, and I&#39;m excited to continue iterating on it. You can check out the code <a href="https://codeberg.org/glenneth/stash">on Codeberg</a>.</p>
<p>If you&#39;re curious about Scheme and how it can be used practically, I highly recommend checking out David Wilson&#39;s course. It&#39;s been instrumental in helping me grasp the concepts I needed to build this tool. Here&#39;s the link, again :) <a href="https://systemcrafters.net/courses/hands-on-guile-scheme-beginners/">&quot;Hands-On Guile Scheme for Beginners&quot;</a></p>
</article>
</div>
</div>
</main>
<footer class="bg-base-darker text-palenight-200 py-12 border-t border-palenight-400/20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<p class="text-palenight-300">&copy; 2024 Glenn Thompson. All rights reserved.</p>
<div class="webring-text mt-6">
<p class="text-palenight-300">I am part of the <a href="https://systemcrafters.net" target="_blank" class="text-accent-blue hover:text-accent-cyan">System Crafters</a> webring:</p>
</div>
<div class="craftering mt-2 flex items-center justify-center gap-4 text-accent-blue">
<a href="https://craftering.systemcrafters.net/@glenneth/previous" class="hover:text-accent-cyan">Previous</a>
<a href="https://craftering.systemcrafters.net/@glenneth" class="hover:text-accent-cyan">Random</a>
<a href="https://craftering.systemcrafters.net/@glenneth/next" class="hover:text-accent-cyan">Next</a>
</div>
<p class="text-palenight-300 mt-2">
<a href="mailto:glenn@glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenn@glenneth.org</a> |
<a href="https://glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenneth.org</a>
</p>
</div>
</div>
</footer>
</body>
<!DOCTYPE html>
<html lang="en" class="bg-base-bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta property="og:title" content="A Journey into Scheme">
<meta property="og:description" content="">
<meta property="og:url" content="https://glenneth.orgcontent/posts/2024-09-24-scheme-journey">
<title>A Journey into Scheme - Glenn Thompson</title>
<link rel="alternate" type="application/rss+xml" title="Glenn Thompson's Blog" href="/feed.xml" />
<link href="../../dist/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
.prose-palenight {
--tw-prose-body: #bfc7d5;
--tw-prose-headings: #ffd580;
--tw-prose-links: #82aaff;
--tw-prose-code: #c792ea;
--tw-prose-pre-bg: #1b1e2b;
}
.prose h2 {
color: var(--tw-prose-headings);
font-family: Merriweather, serif;
font-weight: 700;
font-size: 1.5rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.prose p {
margin-bottom: 1rem;
line-height: 1.625;
}
.prose a {
color: var(--tw-prose-links);
text-decoration: none;
}
.prose a:hover {
color: #89ddff;
}
.prose code {
color: var(--tw-prose-code);
font-family: 'JetBrains Mono', monospace;
}
.prose pre {
background-color: var(--tw-prose-pre-bg);
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
margin-bottom: 1rem;
}
.prose ul, .prose ol {
margin-top: 0.5rem;
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.prose ul {
list-style-type: disc;
}
.prose ol {
list-style-type: decimal;
}
</style>
</head>
<body class="bg-base-bg text-palenight-50">
<nav class="bg-base-darker/80 backdrop-blur-sm shadow-sm border-b border-palenight-400/20 mb-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="/" class="text-accent-yellow font-serif text-xl font-bold">Glenn Thompson</a>
<div class="flex items-center gap-2 text-accent-yellow text-sm font-bold">
<span>personal, tech, guile, scheme, gnu, development</span>
<span>•</span>
<time datetime="2024-09-24 09:30">September 24, 2024</time>
<span>•</span>
<span>5 min read</span>
</div>
</div>
</div>
</nav>
<main class="pt-24 pb-16 px-4">
<div class="max-w-4xl mx-auto">
<div class="content text-palenight-100 space-y-6">
<header class="mb-8">
<h1 class="text-4xl font-serif font-bold text-accent-yellow">A Journey into Scheme</h1>
<div class="flex items-center gap-4 text-palenight-300 mt-4">
<time datetime="2024-09-24 09:30">2024-09-24 09:30</time>
<span>•</span>
<span>5 min read</span>
<span>•</span>
<span>By Glenn Thompson</span>
</div>
<div class="flex flex-wrap gap-2 mt-4">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">personal</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">tech</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">guile</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">scheme</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">gnu</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">development</span>
</div>
</header>
<article class="prose prose-palenight max-w-none">
<h1>My Journey into Scheme: Building a Simple Symlink Manager with Guile Scheme</h1>
<h2>Introduction</h2>
<p>I&#39;ve spent my career as an electrical engineer, not a software developer. However, my recent journey in to GNU/Liniux required a tool for managing symlinks, and that&#39;s how I began learning Scheme—specifically Guile Scheme. I&#39;m writing this post to share how I built <code>stash</code>, a utility that mimics GNU Stow&#39;s functionality, and how my learning journey was shaped by David Wilson&#39;s &quot;Hands-On Guile Scheme for Beginners&quot; course from System Crafters, more about this below.</p>
<h2>How I Started with Scheme</h2>
<p>My programming background was <em>VERY</em> limited, I produce documents in (La)Tex but I decided to take the plunge into learning Scheme, thanks to a course led by David Wilson from System Crafters. The course, <a href="https://systemcrafters.net/courses/hands-on-guile-scheme-beginners/">&quot;Hands-On Guile Scheme for Beginners&quot;</a>, was incredibly helpful in making Scheme accessible even for someone like me, without a traditional programming background. I know (La)Tex isn&#39;t a programming language, it&#39;s typesetting. But how hard can it be? Right?</p>
<p>The course took me through the basics of Scheme, from simple expressions to more complex concepts like functions, recursion, and working with files. This structured learning environment gave me the confidence to start building <code>stash</code>.</p>
<p>The course was &quot;instructor-led&quot; with live meet-up sessions weekly. David has since made this course on-demand, and will be, if not already, available at the above link. Highly recommended if you are interested in taking your first steps with scheme.</p>
<h2>Why Build Stash?</h2>
<p>After completing David Wilson&#39;s course, I wanted to put my newly found Guile Scheme skills into practice with a real project. It wasn&#39;t enough just to understand the language conceptually—I needed to build something tangible that solved a problem I encountered regularly in my workflow. Writing <code>stash</code> gave me that opportunity. It allowed me to apply what I&#39;d learned while also deepening my understanding of file manipulation, command-line tools, and conflict resolution—all within the Guile Scheme environment.</p>
<p>After migrating to GNU/Linux and speaking with other <a href="https://systemcrafters.net/community">System Crafters Community</a> members, I found I needed a way to manage symbolic links and organize directories. Existing tools like GNU Stow helped, but I wanted to learn how such tools are built. I decided to write my own version using Guile Scheme to enhance my understanding of the language and to have more control over the functionality.</p>
<p>The goal of <code>stash</code> is simple: allow users to move directories and create symlinks with conflict resolution, offering options to overwrite, back up, skip, or cancel the operation.</p>
<h2>Breaking Down Stash</h2>
<p>The core of <code>stash</code> revolves around:</p>
<ol>
<li><strong>Moving Directories</strong>: Using Scheme&#39;s file manipulation functions, I learned how to move directories and files around. </li>
<li><strong>Creating Symlinks</strong>: I implemented functions to create symlinks to the moved directories, ensuring that the original structure remains accessible.</li>
<li><strong>Conflict Resolution</strong>: One of the key features I wanted was handling conflicts when a file or symlink already exists at the target location. This required prompting the user for input and responding accordingly (backup, overwrite, skip, or cancel).</li>
</ol>
<p>Here&#39;s an excerpt of the core functionality that handles moving a source directory and creating a symlink:</p>
<pre><code class="language-scheme">;;; Helper function to move source to target
(define (move-source-to-target source-dir target-dir)
&quot;Move the entire source directory to the target directory.&quot;
(let* ((source-dir (expand-home source-dir))
(target-dir (expand-home target-dir))
(source-name (basename source-dir))
(target-source-dir (string-append target-dir &quot;/&quot; source-name)))
(if (file-exists? target-source-dir)
;; Conflict handling here...
...)
(rename-file source-dir target-source-dir)
(display (format #f &quot;Moved ~a to ~a\n&quot; source-dir target-source-dir))))
</code></pre>
<h2>What I Learned</h2>
<p>This project taught me a lot about not just Scheme, but programming in general:</p>
<ul>
<li><strong>File and Directory Manipulation</strong>: Scheme&#39;s file handling functions were different from what I had experienced before, but they allowed for powerful manipulation of file systems.</li>
<li><strong>Command-Line Utilities</strong>: Scheme isn&#39;t just a language for academic exercises; you can write real, useful command-line tools with it.</li>
<li><strong>Problem Solving</strong>: From parsing command-line arguments to resolving conflicts with existing files, every part of the program required careful thought and consideration of edge cases.</li>
</ul>
<h2>Guile Scheme Support Resources</h2>
<ol>
<li><p><strong><a href="https://www.gnu.org/software/guile/docs/">Guile Scheme Documentation</a></strong><br>The official documentation for Guile Scheme, which includes tutorials, references, and the Guile Manual.</p>
</li>
<li><p><strong><a href="https://www.gnu.org/software/guile/manual/html_node/">Guile Reference Manual</a></strong><br>A comprehensive manual covering core language concepts, libraries, and functions available in Guile Scheme.</p>
</li>
<li><p><strong><a href="http://community.schemewiki.org/">Scheme Wiki</a></strong><br>A community-maintained wiki that covers various Scheme dialects, including Guile Scheme, with tutorials, guides, and general information on Scheme programming.</p>
</li>
<li><p><strong><a href="http://schemers.org/">Guile at Schemers.org</a></strong><br>A site dedicated to Scheme with resources, libraries, tools, and documentation for Scheme and its implementations, including Guile.</p>
</li>
<li><p><strong><a href="https://systemcrafters.net/">System Crafters</a></strong><br>Led by David Wilson, System Crafters provides tutorials and blog posts on Guile Scheme and other GNU tools.</p>
</li>
<li><p><strong><a href="https://lists.gnu.org/mailman/listinfo/guile-user">Guile Users Mailing List</a></strong><br>Join the Guile mailing list to ask questions and engage with the Guile Scheme community.</p>
</li>
<li><p><strong><a href="https://github.com/artyom-poptsov/guile-cookbook">Guile Cookbook</a></strong><br>An unofficial GitHub repository with practical code snippets and tips for Guile Scheme, covering various common use cases and tasks.</p>
</li>
<li><p><strong><a href="https://libera.chat/">#guile and #scheme on Libera Chat IRC</a></strong><br>A helpful IRC channel where you can connect with other Guile users for real-time support and advice.</p>
</li>
<li><p><strong><a href="https://Libera.chat/">#systemcrafters on Libera Chat IRC</a></strong><br>A <em>SUPER</em> helpful IRC channel not only for guile and scheme, there are a huge variety of different people here. Tell them glenneth sent you.</p>
</li>
</ol>
<h2>Next Steps</h2>
<p>I am still refining <code>stash</code>, especially around its conflict resolution system and the way it handles symbolic links. But it&#39;s in a usable state, and I&#39;m excited to continue iterating on it. You can check out the code <a href="https://codeberg.org/glenneth/stash">on Codeberg</a>.</p>
<p>If you&#39;re curious about Scheme and how it can be used practically, I highly recommend checking out David Wilson&#39;s course. It&#39;s been instrumental in helping me grasp the concepts I needed to build this tool. Here&#39;s the link, again :) <a href="https://systemcrafters.net/courses/hands-on-guile-scheme-beginners/">&quot;Hands-On Guile Scheme for Beginners&quot;</a></p>
</article>
</div>
</div>
</main>
<footer class="bg-base-darker text-palenight-200 py-12 border-t border-palenight-400/20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<p class="text-palenight-300">&copy; 2024 Glenn Thompson. All rights reserved.</p>
<div class="webring-text mt-6">
<p class="text-palenight-300">I am part of the <a href="https://systemcrafters.net" target="_blank" class="text-accent-blue hover:text-accent-cyan">System Crafters</a> webring:</p>
</div>
<div class="craftering mt-2 flex items-center justify-center gap-4 text-accent-blue">
<a href="https://craftering.systemcrafters.net/@glenneth/previous" class="hover:text-accent-cyan">Previous</a>
<a href="https://craftering.systemcrafters.net/@glenneth" class="hover:text-accent-cyan">Random</a>
<a href="https://craftering.systemcrafters.net/@glenneth/next" class="hover:text-accent-cyan">Next</a>
</div>
<p class="text-palenight-300 mt-2">
<a href="mailto:glenn@glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenn@glenneth.org</a> |
<a href="https://glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenneth.org</a>
</p>
</div>
</div>
</footer>
</body>
</html>

180
content/posts/2024-09-24-scheme-journey.md
View File

@ -1,90 +1,90 @@
---
title: A Journey into Scheme
author: Glenn Thompson
date: 2024-09-24 09:30
tags: personal, tech, guile, scheme, gnu, development
---
# My Journey into Scheme: Building a Simple Symlink Manager with Guile Scheme
## Introduction
I've spent my career as an electrical engineer, not a software developer. However, my recent journey in to GNU/Liniux required a tool for managing symlinks, and that's how I began learning Scheme—specifically Guile Scheme. I'm writing this post to share how I built `stash`, a utility that mimics GNU Stow's functionality, and how my learning journey was shaped by David Wilson's "Hands-On Guile Scheme for Beginners" course from System Crafters, more about this below.
## How I Started with Scheme
My programming background was *VERY* limited, I produce documents in (La)Tex but I decided to take the plunge into learning Scheme, thanks to a course led by David Wilson from System Crafters. The course, ["Hands-On Guile Scheme for Beginners"](https://systemcrafters.net/courses/hands-on-guile-scheme-beginners/), was incredibly helpful in making Scheme accessible even for someone like me, without a traditional programming background. I know (La)Tex isn't a programming language, it's typesetting. But how hard can it be? Right?
The course took me through the basics of Scheme, from simple expressions to more complex concepts like functions, recursion, and working with files. This structured learning environment gave me the confidence to start building `stash`.
The course was "instructor-led" with live meet-up sessions weekly. David has since made this course on-demand, and will be, if not already, available at the above link. Highly recommended if you are interested in taking your first steps with scheme.
## Why Build Stash?
After completing David Wilson's course, I wanted to put my newly found Guile Scheme skills into practice with a real project. It wasn't enough just to understand the language conceptually—I needed to build something tangible that solved a problem I encountered regularly in my workflow. Writing `stash` gave me that opportunity. It allowed me to apply what I'd learned while also deepening my understanding of file manipulation, command-line tools, and conflict resolution—all within the Guile Scheme environment.
After migrating to GNU/Linux and speaking with other [System Crafters Community](https://systemcrafters.net/community) members, I found I needed a way to manage symbolic links and organize directories. Existing tools like GNU Stow helped, but I wanted to learn how such tools are built. I decided to write my own version using Guile Scheme to enhance my understanding of the language and to have more control over the functionality.
The goal of `stash` is simple: allow users to move directories and create symlinks with conflict resolution, offering options to overwrite, back up, skip, or cancel the operation.
## Breaking Down Stash
The core of `stash` revolves around:
1. **Moving Directories**: Using Scheme's file manipulation functions, I learned how to move directories and files around.
2. **Creating Symlinks**: I implemented functions to create symlinks to the moved directories, ensuring that the original structure remains accessible.
3. **Conflict Resolution**: One of the key features I wanted was handling conflicts when a file or symlink already exists at the target location. This required prompting the user for input and responding accordingly (backup, overwrite, skip, or cancel).
Here's an excerpt of the core functionality that handles moving a source directory and creating a symlink:
```scheme
;;; Helper function to move source to target
(define (move-source-to-target source-dir target-dir)
"Move the entire source directory to the target directory."
(let* ((source-dir (expand-home source-dir))
(target-dir (expand-home target-dir))
(source-name (basename source-dir))
(target-source-dir (string-append target-dir "/" source-name)))
(if (file-exists? target-source-dir)
;; Conflict handling here...
...)
(rename-file source-dir target-source-dir)
(display (format #f "Moved ~a to ~a\n" source-dir target-source-dir))))
```
## What I Learned
This project taught me a lot about not just Scheme, but programming in general:
- **File and Directory Manipulation**: Scheme's file handling functions were different from what I had experienced before, but they allowed for powerful manipulation of file systems.
- **Command-Line Utilities**: Scheme isn't just a language for academic exercises; you can write real, useful command-line tools with it.
- **Problem Solving**: From parsing command-line arguments to resolving conflicts with existing files, every part of the program required careful thought and consideration of edge cases.
## Guile Scheme Support Resources
1. **[Guile Scheme Documentation](https://www.gnu.org/software/guile/docs/)**
The official documentation for Guile Scheme, which includes tutorials, references, and the Guile Manual.
2. **[Guile Reference Manual](https://www.gnu.org/software/guile/manual/html_node/)**
A comprehensive manual covering core language concepts, libraries, and functions available in Guile Scheme.
3. **[Scheme Wiki](http://community.schemewiki.org/)**
A community-maintained wiki that covers various Scheme dialects, including Guile Scheme, with tutorials, guides, and general information on Scheme programming.
4. **[Guile at Schemers.org](http://schemers.org/)**
A site dedicated to Scheme with resources, libraries, tools, and documentation for Scheme and its implementations, including Guile.
5. **[System Crafters](https://systemcrafters.net/)**
Led by David Wilson, System Crafters provides tutorials and blog posts on Guile Scheme and other GNU tools.
6. **[Guile Users Mailing List](https://lists.gnu.org/mailman/listinfo/guile-user)**
Join the Guile mailing list to ask questions and engage with the Guile Scheme community.
7. **[Guile Cookbook](https://github.com/artyom-poptsov/guile-cookbook)**
An unofficial GitHub repository with practical code snippets and tips for Guile Scheme, covering various common use cases and tasks.
8. **[#guile and #scheme on Libera Chat IRC](https://libera.chat/)**
A helpful IRC channel where you can connect with other Guile users for real-time support and advice.
9. **[#systemcrafters on Libera Chat IRC](https://Libera.chat/)**
A *SUPER* helpful IRC channel not only for guile and scheme, there are a huge variety of different people here. Tell them glenneth sent you.
## Next Steps
I am still refining `stash`, especially around its conflict resolution system and the way it handles symbolic links. But it's in a usable state, and I'm excited to continue iterating on it. You can check out the code [on Codeberg](https://codeberg.org/glenneth/stash).
If you're curious about Scheme and how it can be used practically, I highly recommend checking out David Wilson's course. It's been instrumental in helping me grasp the concepts I needed to build this tool. Here's the link, again :) ["Hands-On Guile Scheme for Beginners"](https://systemcrafters.net/courses/hands-on-guile-scheme-beginners/)
---
title: A Journey into Scheme
author: Glenn Thompson
date: 2024-09-24 09:30
tags: personal, tech, guile, scheme, gnu, development
---
# My Journey into Scheme: Building a Simple Symlink Manager with Guile Scheme
## Introduction
I've spent my career as an electrical engineer, not a software developer. However, my recent journey in to GNU/Liniux required a tool for managing symlinks, and that's how I began learning Scheme—specifically Guile Scheme. I'm writing this post to share how I built `stash`, a utility that mimics GNU Stow's functionality, and how my learning journey was shaped by David Wilson's "Hands-On Guile Scheme for Beginners" course from System Crafters, more about this below.
## How I Started with Scheme
My programming background was *VERY* limited, I produce documents in (La)Tex but I decided to take the plunge into learning Scheme, thanks to a course led by David Wilson from System Crafters. The course, ["Hands-On Guile Scheme for Beginners"](https://systemcrafters.net/courses/hands-on-guile-scheme-beginners/), was incredibly helpful in making Scheme accessible even for someone like me, without a traditional programming background. I know (La)Tex isn't a programming language, it's typesetting. But how hard can it be? Right?
The course took me through the basics of Scheme, from simple expressions to more complex concepts like functions, recursion, and working with files. This structured learning environment gave me the confidence to start building `stash`.
The course was "instructor-led" with live meet-up sessions weekly. David has since made this course on-demand, and will be, if not already, available at the above link. Highly recommended if you are interested in taking your first steps with scheme.
## Why Build Stash?
After completing David Wilson's course, I wanted to put my newly found Guile Scheme skills into practice with a real project. It wasn't enough just to understand the language conceptually—I needed to build something tangible that solved a problem I encountered regularly in my workflow. Writing `stash` gave me that opportunity. It allowed me to apply what I'd learned while also deepening my understanding of file manipulation, command-line tools, and conflict resolution—all within the Guile Scheme environment.
After migrating to GNU/Linux and speaking with other [System Crafters Community](https://systemcrafters.net/community) members, I found I needed a way to manage symbolic links and organize directories. Existing tools like GNU Stow helped, but I wanted to learn how such tools are built. I decided to write my own version using Guile Scheme to enhance my understanding of the language and to have more control over the functionality.
The goal of `stash` is simple: allow users to move directories and create symlinks with conflict resolution, offering options to overwrite, back up, skip, or cancel the operation.
## Breaking Down Stash
The core of `stash` revolves around:
1. **Moving Directories**: Using Scheme's file manipulation functions, I learned how to move directories and files around.
2. **Creating Symlinks**: I implemented functions to create symlinks to the moved directories, ensuring that the original structure remains accessible.
3. **Conflict Resolution**: One of the key features I wanted was handling conflicts when a file or symlink already exists at the target location. This required prompting the user for input and responding accordingly (backup, overwrite, skip, or cancel).
Here's an excerpt of the core functionality that handles moving a source directory and creating a symlink:
```scheme
;;; Helper function to move source to target
(define (move-source-to-target source-dir target-dir)
"Move the entire source directory to the target directory."
(let* ((source-dir (expand-home source-dir))
(target-dir (expand-home target-dir))
(source-name (basename source-dir))
(target-source-dir (string-append target-dir "/" source-name)))
(if (file-exists? target-source-dir)
;; Conflict handling here...
...)
(rename-file source-dir target-source-dir)
(display (format #f "Moved ~a to ~a\n" source-dir target-source-dir))))
```
## What I Learned
This project taught me a lot about not just Scheme, but programming in general:
- **File and Directory Manipulation**: Scheme's file handling functions were different from what I had experienced before, but they allowed for powerful manipulation of file systems.
- **Command-Line Utilities**: Scheme isn't just a language for academic exercises; you can write real, useful command-line tools with it.
- **Problem Solving**: From parsing command-line arguments to resolving conflicts with existing files, every part of the program required careful thought and consideration of edge cases.
## Guile Scheme Support Resources
1. **[Guile Scheme Documentation](https://www.gnu.org/software/guile/docs/)**
The official documentation for Guile Scheme, which includes tutorials, references, and the Guile Manual.
2. **[Guile Reference Manual](https://www.gnu.org/software/guile/manual/html_node/)**
A comprehensive manual covering core language concepts, libraries, and functions available in Guile Scheme.
3. **[Scheme Wiki](http://community.schemewiki.org/)**
A community-maintained wiki that covers various Scheme dialects, including Guile Scheme, with tutorials, guides, and general information on Scheme programming.
4. **[Guile at Schemers.org](http://schemers.org/)**
A site dedicated to Scheme with resources, libraries, tools, and documentation for Scheme and its implementations, including Guile.
5. **[System Crafters](https://systemcrafters.net/)**
Led by David Wilson, System Crafters provides tutorials and blog posts on Guile Scheme and other GNU tools.
6. **[Guile Users Mailing List](https://lists.gnu.org/mailman/listinfo/guile-user)**
Join the Guile mailing list to ask questions and engage with the Guile Scheme community.
7. **[Guile Cookbook](https://github.com/artyom-poptsov/guile-cookbook)**
An unofficial GitHub repository with practical code snippets and tips for Guile Scheme, covering various common use cases and tasks.
8. **[#guile and #scheme on Libera Chat IRC](https://libera.chat/)**
A helpful IRC channel where you can connect with other Guile users for real-time support and advice.
9. **[#systemcrafters on Libera Chat IRC](https://Libera.chat/)**
A *SUPER* helpful IRC channel not only for guile and scheme, there are a huge variety of different people here. Tell them glenneth sent you.
## Next Steps
I am still refining `stash`, especially around its conflict resolution system and the way it handles symbolic links. But it's in a usable state, and I'm excited to continue iterating on it. You can check out the code [on Codeberg](https://codeberg.org/glenneth/stash).
If you're curious about Scheme and how it can be used practically, I highly recommend checking out David Wilson's course. It's been instrumental in helping me grasp the concepts I needed to build this tool. Here's the link, again :) ["Hands-On Guile Scheme for Beginners"](https://systemcrafters.net/courses/hands-on-guile-scheme-beginners/)

534
content/posts/2024-12-03-practical-scheme.html
View File

@ -1,268 +1,268 @@
<!DOCTYPE html>
<html lang="en" class="bg-base-bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta property="og:title" content="Beyond Theory: Building Practical Tools with Guile Scheme">
<meta property="og:description" content="">
<meta property="og:url" content="https://glenneth.orgcontent/posts/2024-12-03-practical-scheme">
<title>Beyond Theory: Building Practical Tools with Guile Scheme - Glenn Thompson</title>
<link rel="alternate" type="application/rss+xml" title="Glenn Thompson's Blog" href="/feed.xml" />
<link href="../../dist/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
.prose-palenight {
--tw-prose-body: #bfc7d5;
--tw-prose-headings: #ffd580;
--tw-prose-links: #82aaff;
--tw-prose-code: #c792ea;
--tw-prose-pre-bg: #1b1e2b;
}
.prose h2 {
color: var(--tw-prose-headings);
font-family: Merriweather, serif;
font-weight: 700;
font-size: 1.5rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.prose p {
margin-bottom: 1rem;
line-height: 1.625;
}
.prose a {
color: var(--tw-prose-links);
text-decoration: none;
}
.prose a:hover {
color: #89ddff;
}
.prose code {
color: var(--tw-prose-code);
font-family: 'JetBrains Mono', monospace;
}
.prose pre {
background-color: var(--tw-prose-pre-bg);
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
margin-bottom: 1rem;
}
.prose ul, .prose ol {
margin-top: 0.5rem;
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.prose ul {
list-style-type: disc;
}
.prose ol {
list-style-type: decimal;
}
</style>
</head>
<body class="bg-base-bg text-palenight-50">
<nav class="bg-base-darker/80 backdrop-blur-sm shadow-sm border-b border-palenight-400/20 mb-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="/" class="text-accent-yellow font-serif text-xl font-bold">Glenn Thompson</a>
<div class="flex items-center gap-2 text-accent-yellow text-sm font-bold">
<span>tech, guile, scheme, development, functional-programming</span>
<span>•</span>
<time datetime="2024-12-03 10:00">December 3, 2024</time>
<span>•</span>
<span>5 min read</span>
</div>
</div>
</div>
</nav>
<main class="pt-24 pb-16 px-4">
<div class="max-w-4xl mx-auto">
<div class="content text-palenight-100 space-y-6">
<header class="mb-8">
<h1 class="text-4xl font-serif font-bold text-accent-yellow">Beyond Theory: Building Practical Tools with Guile Scheme</h1>
<div class="flex items-center gap-4 text-palenight-300 mt-4">
<time datetime="2024-12-03 10:00">2024-12-03 10:00</time>
<span>•</span>
<span>5 min read</span>
<span>•</span>
<span>By Glenn Thompson</span>
</div>
<div class="flex flex-wrap gap-2 mt-4">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">tech</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">guile</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">scheme</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">development</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">functional-programming</span>
</div>
</header>
<article class="prose prose-palenight max-w-none">
<h1>Beyond Theory: Building Practical Tools with Guile Scheme</h1>
<h2>Introduction</h2>
<p>A few months ago, I shared my journey into learning Scheme through building <code>stash</code>, a symlink manager. Since then, I&#39;ve discovered that the gap between learning Scheme and applying it to real-world problems is where the most valuable lessons emerge. This post explores what I&#39;ve learned about building practical tools with Guile Scheme, sharing both successes and challenges along the way.</p>
<h2>The Power of Modular Design</h2>
<p>One of the most important lessons I learned was the value of modular design. Breaking down a program into focused, single-responsibility modules not only makes the code more maintainable but also helps in reasoning about the program&#39;s behavior. Here&#39;s how I structured <code>stash</code>:</p>
<pre><code class="language-scheme">(use-modules (ice-9 getopt-long)
(stash help) ;; Help module
(stash colors) ;; ANSI colors
(stash log) ;; Logging module
(stash paths) ;; Path handling module
(stash conflict) ;; Conflict resolution module
(stash file-ops)) ;; File and symlink operations module
</code></pre>
<p>Each module has a specific responsibility:</p>
<ul>
<li><code>colors.scm</code>: Handles ANSI color formatting for terminal output</li>
<li><code>conflict.scm</code>: Manages conflict resolution when files already exist</li>
<li><code>file-ops.scm</code>: Handles file system operations</li>
<li><code>help.scm</code>: Provides usage information</li>
<li><code>log.scm</code>: Manages logging operations</li>
<li><code>paths.scm</code>: Handles path manipulation and normalization</li>
</ul>
<h2>Robust Path Handling</h2>
<p>One of the first challenges in building a file management tool is handling paths correctly. Here&#39;s how I approached it:</p>
<pre><code class="language-scheme">(define (expand-home path)
&quot;Expand ~ to the user&#39;s home directory.&quot;
(if (string-prefix? &quot;~&quot; path)
(string-append (getenv &quot;HOME&quot;) (substring path 1))
path))
(define (concat-path base path)
&quot;Concatenate two paths, ensuring there are no double slashes.&quot;
(if (string-suffix? &quot;/&quot; base)
(string-append (string-drop-right base 1) &quot;/&quot; path)
(string-append base &quot;/&quot; path)))
(define (ensure-config-path target-dir)
&quot;Ensure that the target directory has .config appended, avoiding double slashes.&quot;
(let ((target-dir (expand-home target-dir)))
(if (string-suffix? &quot;/&quot; target-dir)
(set! target-dir (string-drop-right target-dir 1)))
(if (not (string-suffix? &quot;/.config&quot; target-dir))
(string-append target-dir &quot;/.config&quot;)
target-dir)))
</code></pre>
<p>This approach ensures that:</p>
<ul>
<li>Home directory references (<code>~</code>) are properly expanded</li>
<li>Path concatenation doesn&#39;t create double slashes</li>
<li>Configuration paths are consistently structured</li>
</ul>
<h2>Interactive Conflict Resolution</h2>
<p>Real-world tools often need to handle conflicts. I implemented an interactive conflict resolution system:</p>
<pre><code class="language-scheme">(define (prompt-user-for-action)
&quot;Prompt the user to decide how to handle a conflict: overwrite (o), skip (s), or cancel (c).&quot;
(display (color-message
&quot;A conflict was detected. Choose action - Overwrite (o), Skip (s), or Cancel (c): &quot;
yellow-text))
(let ((response (read-line)))
(cond
((string-ci=? response &quot;o&quot;) &#39;overwrite)
((string-ci=? response &quot;s&quot;) &#39;skip)
((string-ci=? response &quot;c&quot;) &#39;cancel)
(else
(display &quot;Invalid input. Please try again.\n&quot;)
(prompt-user-for-action)))))
</code></pre>
<p>This provides a user-friendly interface for resolving conflicts while maintaining data safety.</p>
<h2>Logging for Debugging and Auditing</h2>
<p>Proper logging is crucial for debugging and auditing. I implemented a simple but effective logging system:</p>
<pre><code class="language-scheme">(define (current-timestamp)
&quot;Return the current date and time as a formatted string.&quot;
(let* ((time (current-time))
(seconds (time-second time)))
(strftime &quot;%Y-%m-%d-%H-%M-%S&quot; (localtime seconds))))
(define (log-action message)
&quot;Log an action with a timestamp to the stash.log file.&quot;
(let ((log-port (open-file &quot;stash.log&quot; &quot;a&quot;)))
(display (color-message
(string-append &quot;[&quot; (current-timestamp) &quot;] &quot; message)
green-text) log-port)
(newline log-port)
(close-port log-port)))
</code></pre>
<p>This logging system:</p>
<ul>
<li>Timestamps each action</li>
<li>Uses color coding for better readability</li>
<li>Maintains a persistent log file</li>
<li>Properly handles file operations</li>
</ul>
<h2>File Operations with Safety</h2>
<p>When dealing with file system operations, safety is paramount. Here&#39;s how I handle moving directories:</p>
<pre><code class="language-scheme">(define (move-source-to-target source-dir target-dir)
&quot;Move the entire source directory to the target directory, ensuring .config in the target path.&quot;
(let* ((target-dir (ensure-config-path target-dir))
(source-dir (expand-home source-dir))
(source-name (basename source-dir))
(target-source-dir (concat-path target-dir source-name)))
(if (not (file-exists? target-dir))
(mkdir target-dir #o755))
(if (file-exists? target-source-dir)
(handle-conflict target-source-dir source-dir delete-directory log-action)
(begin
(rename-file source-dir target-source-dir)
(display (format #f &quot;Moved ~a to ~a\n&quot; source-dir target-source-dir))
(log-action (format #f &quot;Moved ~a to ~a&quot; source-dir target-source-dir))))
target-source-dir))
</code></pre>
<p>This implementation:</p>
<ul>
<li>Ensures paths are properly formatted</li>
<li>Creates necessary directories</li>
<li>Handles conflicts gracefully</li>
<li>Logs all operations</li>
<li>Returns the new path for further operations</li>
</ul>
<h2>Lessons Learned</h2>
<h3>What Worked Well</h3>
<ol>
<li><strong>Modular Design</strong>: Breaking the code into focused modules made it easier to maintain and test</li>
<li><strong>Functional Approach</strong>: Using pure functions where possible made the code more predictable</li>
<li><strong>Interactive Interface</strong>: Providing clear user prompts and colored output improved usability</li>
<li><strong>Robust Logging</strong>: Detailed logging helped with debugging and understanding program flow</li>
</ol>
<h3>Challenges Faced</h3>
<ol>
<li><strong>Path Handling</strong>: Dealing with different path formats and edge cases required careful attention</li>
<li><strong>Error States</strong>: Managing various error conditions while keeping the code clean</li>
<li><strong>User Interface</strong>: Balancing between automation and user control</li>
<li><strong>Documentation</strong>: Writing clear documentation that helps users understand the tool</li>
</ol>
<h2>Moving Forward</h2>
<p>Building <code>stash</code> has taught me that while functional programming principles are valuable, pragmatism is equally important. The key is finding the right balance between elegant functional code and practical solutions.</p>
<h2>Resources</h2>
<ol>
<li><a href="https://www.gnu.org/software/guile/manual/">Guile Manual</a></li>
<li><a href="/content/posts/scheme-journey.html">My Previous Scheme Journey Post</a></li>
<li><a href="https://systemcrafters.net/community">System Crafters Community</a></li>
<li><a href="https://codeberg.org/glenneth/stash">Stash on Codeberg</a></li>
</ol>
<p>The code examples in this post are from my actual implementation of <code>stash</code>. Feel free to explore, use, and improve upon them!</p>
</article>
</div>
</div>
</main>
<footer class="bg-base-darker text-palenight-200 py-12 border-t border-palenight-400/20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<p class="text-palenight-300">&copy; 2024 Glenn Thompson. All rights reserved.</p>
<div class="webring-text mt-6">
<p class="text-palenight-300">I am part of the <a href="https://systemcrafters.net" target="_blank" class="text-accent-blue hover:text-accent-cyan">System Crafters</a> webring:</p>
</div>
<div class="craftering mt-2 flex items-center justify-center gap-4 text-accent-blue">
<a href="https://craftering.systemcrafters.net/@glenneth/previous" class="hover:text-accent-cyan">Previous</a>
<a href="https://craftering.systemcrafters.net/@glenneth" class="hover:text-accent-cyan">Random</a>
<a href="https://craftering.systemcrafters.net/@glenneth/next" class="hover:text-accent-cyan">Next</a>
</div>
<p class="text-palenight-300 mt-2">
<a href="mailto:glenn@glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenn@glenneth.org</a> |
<a href="https://glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenneth.org</a>
</p>
</div>
</div>
</footer>
</body>
<!DOCTYPE html>
<html lang="en" class="bg-base-bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta property="og:title" content="Beyond Theory: Building Practical Tools with Guile Scheme">
<meta property="og:description" content="">
<meta property="og:url" content="https://glenneth.orgcontent/posts/2024-12-03-practical-scheme">
<title>Beyond Theory: Building Practical Tools with Guile Scheme - Glenn Thompson</title>
<link rel="alternate" type="application/rss+xml" title="Glenn Thompson's Blog" href="/feed.xml" />
<link href="../../dist/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
.prose-palenight {
--tw-prose-body: #bfc7d5;
--tw-prose-headings: #ffd580;
--tw-prose-links: #82aaff;
--tw-prose-code: #c792ea;
--tw-prose-pre-bg: #1b1e2b;
}
.prose h2 {
color: var(--tw-prose-headings);
font-family: Merriweather, serif;
font-weight: 700;
font-size: 1.5rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.prose p {
margin-bottom: 1rem;
line-height: 1.625;
}
.prose a {
color: var(--tw-prose-links);
text-decoration: none;
}
.prose a:hover {
color: #89ddff;
}
.prose code {
color: var(--tw-prose-code);
font-family: 'JetBrains Mono', monospace;
}
.prose pre {
background-color: var(--tw-prose-pre-bg);
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
margin-bottom: 1rem;
}
.prose ul, .prose ol {
margin-top: 0.5rem;
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.prose ul {
list-style-type: disc;
}
.prose ol {
list-style-type: decimal;
}
</style>
</head>
<body class="bg-base-bg text-palenight-50">
<nav class="bg-base-darker/80 backdrop-blur-sm shadow-sm border-b border-palenight-400/20 mb-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="/" class="text-accent-yellow font-serif text-xl font-bold">Glenn Thompson</a>
<div class="flex items-center gap-2 text-accent-yellow text-sm font-bold">
<span>tech, guile, scheme, development, functional-programming</span>
<span>•</span>
<time datetime="2024-12-03 10:00">December 3, 2024</time>
<span>•</span>
<span>5 min read</span>
</div>
</div>
</div>
</nav>
<main class="pt-24 pb-16 px-4">
<div class="max-w-4xl mx-auto">
<div class="content text-palenight-100 space-y-6">
<header class="mb-8">
<h1 class="text-4xl font-serif font-bold text-accent-yellow">Beyond Theory: Building Practical Tools with Guile Scheme</h1>
<div class="flex items-center gap-4 text-palenight-300 mt-4">
<time datetime="2024-12-03 10:00">2024-12-03 10:00</time>
<span>•</span>
<span>5 min read</span>
<span>•</span>
<span>By Glenn Thompson</span>
</div>
<div class="flex flex-wrap gap-2 mt-4">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">tech</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">guile</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">scheme</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">development</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">functional-programming</span>
</div>
</header>
<article class="prose prose-palenight max-w-none">
<h1>Beyond Theory: Building Practical Tools with Guile Scheme</h1>
<h2>Introduction</h2>
<p>A few months ago, I shared my journey into learning Scheme through building <code>stash</code>, a symlink manager. Since then, I&#39;ve discovered that the gap between learning Scheme and applying it to real-world problems is where the most valuable lessons emerge. This post explores what I&#39;ve learned about building practical tools with Guile Scheme, sharing both successes and challenges along the way.</p>
<h2>The Power of Modular Design</h2>
<p>One of the most important lessons I learned was the value of modular design. Breaking down a program into focused, single-responsibility modules not only makes the code more maintainable but also helps in reasoning about the program&#39;s behavior. Here&#39;s how I structured <code>stash</code>:</p>
<pre><code class="language-scheme">(use-modules (ice-9 getopt-long)
(stash help) ;; Help module
(stash colors) ;; ANSI colors
(stash log) ;; Logging module
(stash paths) ;; Path handling module
(stash conflict) ;; Conflict resolution module
(stash file-ops)) ;; File and symlink operations module
</code></pre>
<p>Each module has a specific responsibility:</p>
<ul>
<li><code>colors.scm</code>: Handles ANSI color formatting for terminal output</li>
<li><code>conflict.scm</code>: Manages conflict resolution when files already exist</li>
<li><code>file-ops.scm</code>: Handles file system operations</li>
<li><code>help.scm</code>: Provides usage information</li>
<li><code>log.scm</code>: Manages logging operations</li>
<li><code>paths.scm</code>: Handles path manipulation and normalization</li>
</ul>
<h2>Robust Path Handling</h2>
<p>One of the first challenges in building a file management tool is handling paths correctly. Here&#39;s how I approached it:</p>
<pre><code class="language-scheme">(define (expand-home path)
&quot;Expand ~ to the user&#39;s home directory.&quot;
(if (string-prefix? &quot;~&quot; path)
(string-append (getenv &quot;HOME&quot;) (substring path 1))
path))
(define (concat-path base path)
&quot;Concatenate two paths, ensuring there are no double slashes.&quot;
(if (string-suffix? &quot;/&quot; base)
(string-append (string-drop-right base 1) &quot;/&quot; path)
(string-append base &quot;/&quot; path)))
(define (ensure-config-path target-dir)
&quot;Ensure that the target directory has .config appended, avoiding double slashes.&quot;
(let ((target-dir (expand-home target-dir)))
(if (string-suffix? &quot;/&quot; target-dir)
(set! target-dir (string-drop-right target-dir 1)))
(if (not (string-suffix? &quot;/.config&quot; target-dir))
(string-append target-dir &quot;/.config&quot;)
target-dir)))
</code></pre>
<p>This approach ensures that:</p>
<ul>
<li>Home directory references (<code>~</code>) are properly expanded</li>
<li>Path concatenation doesn&#39;t create double slashes</li>
<li>Configuration paths are consistently structured</li>
</ul>
<h2>Interactive Conflict Resolution</h2>
<p>Real-world tools often need to handle conflicts. I implemented an interactive conflict resolution system:</p>
<pre><code class="language-scheme">(define (prompt-user-for-action)
&quot;Prompt the user to decide how to handle a conflict: overwrite (o), skip (s), or cancel (c).&quot;
(display (color-message
&quot;A conflict was detected. Choose action - Overwrite (o), Skip (s), or Cancel (c): &quot;
yellow-text))
(let ((response (read-line)))
(cond
((string-ci=? response &quot;o&quot;) &#39;overwrite)
((string-ci=? response &quot;s&quot;) &#39;skip)
((string-ci=? response &quot;c&quot;) &#39;cancel)
(else
(display &quot;Invalid input. Please try again.\n&quot;)
(prompt-user-for-action)))))
</code></pre>
<p>This provides a user-friendly interface for resolving conflicts while maintaining data safety.</p>
<h2>Logging for Debugging and Auditing</h2>
<p>Proper logging is crucial for debugging and auditing. I implemented a simple but effective logging system:</p>
<pre><code class="language-scheme">(define (current-timestamp)
&quot;Return the current date and time as a formatted string.&quot;
(let* ((time (current-time))
(seconds (time-second time)))
(strftime &quot;%Y-%m-%d-%H-%M-%S&quot; (localtime seconds))))
(define (log-action message)
&quot;Log an action with a timestamp to the stash.log file.&quot;
(let ((log-port (open-file &quot;stash.log&quot; &quot;a&quot;)))
(display (color-message
(string-append &quot;[&quot; (current-timestamp) &quot;] &quot; message)
green-text) log-port)
(newline log-port)
(close-port log-port)))
</code></pre>
<p>This logging system:</p>
<ul>
<li>Timestamps each action</li>
<li>Uses color coding for better readability</li>
<li>Maintains a persistent log file</li>
<li>Properly handles file operations</li>
</ul>
<h2>File Operations with Safety</h2>
<p>When dealing with file system operations, safety is paramount. Here&#39;s how I handle moving directories:</p>
<pre><code class="language-scheme">(define (move-source-to-target source-dir target-dir)
&quot;Move the entire source directory to the target directory, ensuring .config in the target path.&quot;
(let* ((target-dir (ensure-config-path target-dir))
(source-dir (expand-home source-dir))
(source-name (basename source-dir))
(target-source-dir (concat-path target-dir source-name)))
(if (not (file-exists? target-dir))
(mkdir target-dir #o755))
(if (file-exists? target-source-dir)
(handle-conflict target-source-dir source-dir delete-directory log-action)
(begin
(rename-file source-dir target-source-dir)
(display (format #f &quot;Moved ~a to ~a\n&quot; source-dir target-source-dir))
(log-action (format #f &quot;Moved ~a to ~a&quot; source-dir target-source-dir))))
target-source-dir))
</code></pre>
<p>This implementation:</p>
<ul>
<li>Ensures paths are properly formatted</li>
<li>Creates necessary directories</li>
<li>Handles conflicts gracefully</li>
<li>Logs all operations</li>
<li>Returns the new path for further operations</li>
</ul>
<h2>Lessons Learned</h2>
<h3>What Worked Well</h3>
<ol>
<li><strong>Modular Design</strong>: Breaking the code into focused modules made it easier to maintain and test</li>
<li><strong>Functional Approach</strong>: Using pure functions where possible made the code more predictable</li>
<li><strong>Interactive Interface</strong>: Providing clear user prompts and colored output improved usability</li>
<li><strong>Robust Logging</strong>: Detailed logging helped with debugging and understanding program flow</li>
</ol>
<h3>Challenges Faced</h3>
<ol>
<li><strong>Path Handling</strong>: Dealing with different path formats and edge cases required careful attention</li>
<li><strong>Error States</strong>: Managing various error conditions while keeping the code clean</li>
<li><strong>User Interface</strong>: Balancing between automation and user control</li>
<li><strong>Documentation</strong>: Writing clear documentation that helps users understand the tool</li>
</ol>
<h2>Moving Forward</h2>
<p>Building <code>stash</code> has taught me that while functional programming principles are valuable, pragmatism is equally important. The key is finding the right balance between elegant functional code and practical solutions.</p>
<h2>Resources</h2>
<ol>
<li><a href="https://www.gnu.org/software/guile/manual/">Guile Manual</a></li>
<li><a href="/content/posts/scheme-journey.html">My Previous Scheme Journey Post</a></li>
<li><a href="https://systemcrafters.net/community">System Crafters Community</a></li>
<li><a href="https://codeberg.org/glenneth/stash">Stash on Codeberg</a></li>
</ol>
<p>The code examples in this post are from my actual implementation of <code>stash</code>. Feel free to explore, use, and improve upon them!</p>
</article>
</div>
</div>
</main>
<footer class="bg-base-darker text-palenight-200 py-12 border-t border-palenight-400/20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<p class="text-palenight-300">&copy; 2024 Glenn Thompson. All rights reserved.</p>
<div class="webring-text mt-6">
<p class="text-palenight-300">I am part of the <a href="https://systemcrafters.net" target="_blank" class="text-accent-blue hover:text-accent-cyan">System Crafters</a> webring:</p>
</div>
<div class="craftering mt-2 flex items-center justify-center gap-4 text-accent-blue">
<a href="https://craftering.systemcrafters.net/@glenneth/previous" class="hover:text-accent-cyan">Previous</a>
<a href="https://craftering.systemcrafters.net/@glenneth" class="hover:text-accent-cyan">Random</a>
<a href="https://craftering.systemcrafters.net/@glenneth/next" class="hover:text-accent-cyan">Next</a>
</div>
<p class="text-palenight-300 mt-2">
<a href="mailto:glenn@glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenn@glenneth.org</a> |
<a href="https://glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenneth.org</a>
</p>
</div>
</div>
</footer>
</body>
</html>

342
content/posts/2024-12-03-practical-scheme.md
View File

@ -1,171 +1,171 @@
---
title: Beyond Theory: Building Practical Tools with Guile Scheme
author: Glenn Thompson
date: 2024-12-03 10:00
tags: tech, guile, scheme, development, functional-programming
---
# Beyond Theory: Building Practical Tools with Guile Scheme
## Introduction
A few months ago, I shared my journey into learning Scheme through building `stash`, a symlink manager. Since then, I've discovered that the gap between learning Scheme and applying it to real-world problems is where the most valuable lessons emerge. This post explores what I've learned about building practical tools with Guile Scheme, sharing both successes and challenges along the way.
## The Power of Modular Design
One of the most important lessons I learned was the value of modular design. Breaking down a program into focused, single-responsibility modules not only makes the code more maintainable but also helps in reasoning about the program's behavior. Here's how I structured `stash`:
```scheme
(use-modules (ice-9 getopt-long)
(stash help) ;; Help module
(stash colors) ;; ANSI colors
(stash log) ;; Logging module
(stash paths) ;; Path handling module
(stash conflict) ;; Conflict resolution module
(stash file-ops)) ;; File and symlink operations module
```
Each module has a specific responsibility:
- `colors.scm`: Handles ANSI color formatting for terminal output
- `conflict.scm`: Manages conflict resolution when files already exist
- `file-ops.scm`: Handles file system operations
- `help.scm`: Provides usage information
- `log.scm`: Manages logging operations
- `paths.scm`: Handles path manipulation and normalization
## Robust Path Handling
One of the first challenges in building a file management tool is handling paths correctly. Here's how I approached it:
```scheme
(define (expand-home path)
"Expand ~ to the user's home directory."
(if (string-prefix? "~" path)
(string-append (getenv "HOME") (substring path 1))
path))
(define (concat-path base path)
"Concatenate two paths, ensuring there are no double slashes."
(if (string-suffix? "/" base)
(string-append (string-drop-right base 1) "/" path)
(string-append base "/" path)))
(define (ensure-config-path target-dir)
"Ensure that the target directory has .config appended, avoiding double slashes."
(let ((target-dir (expand-home target-dir)))
(if (string-suffix? "/" target-dir)
(set! target-dir (string-drop-right target-dir 1)))
(if (not (string-suffix? "/.config" target-dir))
(string-append target-dir "/.config")
target-dir)))
```
This approach ensures that:
- Home directory references (`~`) are properly expanded
- Path concatenation doesn't create double slashes
- Configuration paths are consistently structured
## Interactive Conflict Resolution
Real-world tools often need to handle conflicts. I implemented an interactive conflict resolution system:
```scheme
(define (prompt-user-for-action)
"Prompt the user to decide how to handle a conflict: overwrite (o), skip (s), or cancel (c)."
(display (color-message
"A conflict was detected. Choose action - Overwrite (o), Skip (s), or Cancel (c): "
yellow-text))
(let ((response (read-line)))
(cond
((string-ci=? response "o") 'overwrite)
((string-ci=? response "s") 'skip)
((string-ci=? response "c") 'cancel)
(else
(display "Invalid input. Please try again.\n")
(prompt-user-for-action)))))
```
This provides a user-friendly interface for resolving conflicts while maintaining data safety.
## Logging for Debugging and Auditing
Proper logging is crucial for debugging and auditing. I implemented a simple but effective logging system:
```scheme
(define (current-timestamp)
"Return the current date and time as a formatted string."
(let* ((time (current-time))
(seconds (time-second time)))
(strftime "%Y-%m-%d-%H-%M-%S" (localtime seconds))))
(define (log-action message)
"Log an action with a timestamp to the stash.log file."
(let ((log-port (open-file "stash.log" "a")))
(display (color-message
(string-append "[" (current-timestamp) "] " message)
green-text) log-port)
(newline log-port)
(close-port log-port)))
```
This logging system:
- Timestamps each action
- Uses color coding for better readability
- Maintains a persistent log file
- Properly handles file operations
## File Operations with Safety
When dealing with file system operations, safety is paramount. Here's how I handle moving directories:
```scheme
(define (move-source-to-target source-dir target-dir)
"Move the entire source directory to the target directory, ensuring .config in the target path."
(let* ((target-dir (ensure-config-path target-dir))
(source-dir (expand-home source-dir))
(source-name (basename source-dir))
(target-source-dir (concat-path target-dir source-name)))
(if (not (file-exists? target-dir))
(mkdir target-dir #o755))
(if (file-exists? target-source-dir)
(handle-conflict target-source-dir source-dir delete-directory log-action)
(begin
(rename-file source-dir target-source-dir)
(display (format #f "Moved ~a to ~a\n" source-dir target-source-dir))
(log-action (format #f "Moved ~a to ~a" source-dir target-source-dir))))
target-source-dir))
```
This implementation:
- Ensures paths are properly formatted
- Creates necessary directories
- Handles conflicts gracefully
- Logs all operations
- Returns the new path for further operations
## Lessons Learned
### What Worked Well
1. **Modular Design**: Breaking the code into focused modules made it easier to maintain and test
2. **Functional Approach**: Using pure functions where possible made the code more predictable
3. **Interactive Interface**: Providing clear user prompts and colored output improved usability
4. **Robust Logging**: Detailed logging helped with debugging and understanding program flow
### Challenges Faced
1. **Path Handling**: Dealing with different path formats and edge cases required careful attention
2. **Error States**: Managing various error conditions while keeping the code clean
3. **User Interface**: Balancing between automation and user control
4. **Documentation**: Writing clear documentation that helps users understand the tool
## Moving Forward
Building `stash` has taught me that while functional programming principles are valuable, pragmatism is equally important. The key is finding the right balance between elegant functional code and practical solutions.
## Resources
1. [Guile Manual](https://www.gnu.org/software/guile/manual/)
2. [My Previous Scheme Journey Post](/content/posts/scheme-journey.html)
3. [System Crafters Community](https://systemcrafters.net/community)
4. [Stash on Codeberg](https://codeberg.org/glenneth/stash)
The code examples in this post are from my actual implementation of `stash`. Feel free to explore, use, and improve upon them!
---
title: Beyond Theory: Building Practical Tools with Guile Scheme
author: Glenn Thompson
date: 2024-12-03 10:00
tags: tech, guile, scheme, development, functional-programming
---
# Beyond Theory: Building Practical Tools with Guile Scheme
## Introduction
A few months ago, I shared my journey into learning Scheme through building `stash`, a symlink manager. Since then, I've discovered that the gap between learning Scheme and applying it to real-world problems is where the most valuable lessons emerge. This post explores what I've learned about building practical tools with Guile Scheme, sharing both successes and challenges along the way.
## The Power of Modular Design
One of the most important lessons I learned was the value of modular design. Breaking down a program into focused, single-responsibility modules not only makes the code more maintainable but also helps in reasoning about the program's behavior. Here's how I structured `stash`:
```scheme
(use-modules (ice-9 getopt-long)
(stash help) ;; Help module
(stash colors) ;; ANSI colors
(stash log) ;; Logging module
(stash paths) ;; Path handling module
(stash conflict) ;; Conflict resolution module
(stash file-ops)) ;; File and symlink operations module
```
Each module has a specific responsibility:
- `colors.scm`: Handles ANSI color formatting for terminal output
- `conflict.scm`: Manages conflict resolution when files already exist
- `file-ops.scm`: Handles file system operations
- `help.scm`: Provides usage information
- `log.scm`: Manages logging operations
- `paths.scm`: Handles path manipulation and normalization
## Robust Path Handling
One of the first challenges in building a file management tool is handling paths correctly. Here's how I approached it:
```scheme
(define (expand-home path)
"Expand ~ to the user's home directory."
(if (string-prefix? "~" path)
(string-append (getenv "HOME") (substring path 1))
path))
(define (concat-path base path)
"Concatenate two paths, ensuring there are no double slashes."
(if (string-suffix? "/" base)
(string-append (string-drop-right base 1) "/" path)
(string-append base "/" path)))
(define (ensure-config-path target-dir)
"Ensure that the target directory has .config appended, avoiding double slashes."
(let ((target-dir (expand-home target-dir)))
(if (string-suffix? "/" target-dir)
(set! target-dir (string-drop-right target-dir 1)))
(if (not (string-suffix? "/.config" target-dir))
(string-append target-dir "/.config")
target-dir)))
```
This approach ensures that:
- Home directory references (`~`) are properly expanded
- Path concatenation doesn't create double slashes
- Configuration paths are consistently structured
## Interactive Conflict Resolution
Real-world tools often need to handle conflicts. I implemented an interactive conflict resolution system:
```scheme
(define (prompt-user-for-action)
"Prompt the user to decide how to handle a conflict: overwrite (o), skip (s), or cancel (c)."
(display (color-message
"A conflict was detected. Choose action - Overwrite (o), Skip (s), or Cancel (c): "
yellow-text))
(let ((response (read-line)))
(cond
((string-ci=? response "o") 'overwrite)
((string-ci=? response "s") 'skip)
((string-ci=? response "c") 'cancel)
(else
(display "Invalid input. Please try again.\n")
(prompt-user-for-action)))))
```
This provides a user-friendly interface for resolving conflicts while maintaining data safety.
## Logging for Debugging and Auditing
Proper logging is crucial for debugging and auditing. I implemented a simple but effective logging system:
```scheme
(define (current-timestamp)
"Return the current date and time as a formatted string."
(let* ((time (current-time))
(seconds (time-second time)))
(strftime "%Y-%m-%d-%H-%M-%S" (localtime seconds))))
(define (log-action message)
"Log an action with a timestamp to the stash.log file."
(let ((log-port (open-file "stash.log" "a")))
(display (color-message
(string-append "[" (current-timestamp) "] " message)
green-text) log-port)
(newline log-port)
(close-port log-port)))
```
This logging system:
- Timestamps each action
- Uses color coding for better readability
- Maintains a persistent log file
- Properly handles file operations
## File Operations with Safety
When dealing with file system operations, safety is paramount. Here's how I handle moving directories:
```scheme
(define (move-source-to-target source-dir target-dir)
"Move the entire source directory to the target directory, ensuring .config in the target path."
(let* ((target-dir (ensure-config-path target-dir))
(source-dir (expand-home source-dir))
(source-name (basename source-dir))
(target-source-dir (concat-path target-dir source-name)))
(if (not (file-exists? target-dir))
(mkdir target-dir #o755))
(if (file-exists? target-source-dir)
(handle-conflict target-source-dir source-dir delete-directory log-action)
(begin
(rename-file source-dir target-source-dir)
(display (format #f "Moved ~a to ~a\n" source-dir target-source-dir))
(log-action (format #f "Moved ~a to ~a" source-dir target-source-dir))))
target-source-dir))
```
This implementation:
- Ensures paths are properly formatted
- Creates necessary directories
- Handles conflicts gracefully
- Logs all operations
- Returns the new path for further operations
## Lessons Learned
### What Worked Well
1. **Modular Design**: Breaking the code into focused modules made it easier to maintain and test
2. **Functional Approach**: Using pure functions where possible made the code more predictable
3. **Interactive Interface**: Providing clear user prompts and colored output improved usability
4. **Robust Logging**: Detailed logging helped with debugging and understanding program flow
### Challenges Faced
1. **Path Handling**: Dealing with different path formats and edge cases required careful attention
2. **Error States**: Managing various error conditions while keeping the code clean
3. **User Interface**: Balancing between automation and user control
4. **Documentation**: Writing clear documentation that helps users understand the tool
## Moving Forward
Building `stash` has taught me that while functional programming principles are valuable, pragmatism is equally important. The key is finding the right balance between elegant functional code and practical solutions.
## Resources
1. [Guile Manual](https://www.gnu.org/software/guile/manual/)
2. [My Previous Scheme Journey Post](/content/posts/scheme-journey.html)
3. [System Crafters Community](https://systemcrafters.net/community)
4. [Stash on Codeberg](https://codeberg.org/glenneth/stash)
The code examples in this post are from my actual implementation of `stash`. Feel free to explore, use, and improve upon them!

392
content/posts/2025-01-02-from-haunt-to-custom.html
View File

@ -1,197 +1,197 @@
<!DOCTYPE html>
<html lang="en" class="bg-base-bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A reflection on my evolving journey through static site generators - from Hugo to Haunt, and finally to building my own custom solution, highlighting the valuable lessons learned along the way.">
<meta property="og:title" content="From Hugo to Haunt to Custom: My Journey in Static Site Generation">
<meta property="og:description" content="A reflection on my evolving journey through static site generators - from Hugo to Haunt, and finally to building my own custom solution, highlighting the valuable lessons learned along the way.">
<meta property="og:url" content="https://glenneth.orgcontent/posts/2025-01-02-from-haunt-to-custom">
<title>From Hugo to Haunt to Custom: My Journey in Static Site Generation - Glenn Thompson</title>
<link rel="alternate" type="application/rss+xml" title="Glenn Thompson's Blog" href="/feed.xml" />
<link href="/dist/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
.prose-palenight {
--tw-prose-body: #bfc7d5;
--tw-prose-headings: #ffd580;
--tw-prose-links: #82aaff;
--tw-prose-code: #c792ea;
--tw-prose-pre-bg: #1b1e2b;
}
.prose h2 {
color: var(--tw-prose-headings);
font-family: Merriweather, serif;
font-weight: 700;
font-size: 1.5rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.prose p {
margin-bottom: 1rem;
line-height: 1.625;
}
.prose a {
color: var(--tw-prose-links);
text-decoration: none;
}
.prose a:hover {
color: #89ddff;
}
.prose code {
color: var(--tw-prose-code);
font-family: 'JetBrains Mono', monospace;
}
.prose pre {
background-color: var(--tw-prose-pre-bg);
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
margin-bottom: 1rem;
}
.prose ul, .prose ol {
margin-top: 0.5rem;
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.prose ul {
list-style-type: disc;
}
.prose ol {
list-style-type: decimal;
}
</style>
</head>
<body class="bg-base-bg text-palenight-50">
<nav class="bg-base-darker/80 backdrop-blur-sm shadow-sm border-b border-palenight-400/20 mb-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="/" class="text-accent-yellow font-serif text-xl font-bold">Glenn Thompson</a>
<div class="flex items-center gap-2 text-accent-yellow text-sm font-bold">
<span>web, development, javascript, static-site, haunt, guile, hugo</span>
<span>•</span>
<time datetime="2025-01-02">January 2, 2025</time>
<span>•</span>
<span>4 min read</span>
</div>
</div>
</div>
</nav>
<main class="pt-24 pb-16 px-4">
<div class="max-w-4xl mx-auto">
<div class="content text-palenight-100 space-y-6">
<header class="mb-8">
<h1 class="text-4xl font-serif font-bold text-accent-yellow">From Hugo to Haunt to Custom: My Journey in Static Site Generation</h1>
<div class="flex items-center gap-4 text-palenight-300 mt-4">
<time datetime="2025-01-02">2025-01-02</time>
<span>•</span>
<span>4 min read</span>
<span>•</span>
<span>By Glenn Thompson</span>
</div>
<div class="flex flex-wrap gap-2 mt-4">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">web</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">development</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">javascript</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">static-site</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">haunt</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">guile</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">hugo</span>
</div>
</header>
<article class="prose prose-palenight max-w-none">
<p>My journey with static site generators has been one of continuous learning and evolution. It started with Hugo, transitioned through Haunt, and has now led me to build my own custom solution. Each step of this journey has taught me valuable lessons about web development, programming languages, and the importance of understanding the tools we use.</p>
<h2>The Hugo Beginning</h2>
<p>Like many &quot;bloggers&quot;, I started with Hugo, a popular static site generator known for its speed and extensive theme ecosystem. Hugo served its purpose well, providing a robust platform for my blog with ready-made themes and a strong community.</p>
<h2>The Transition to Haunt</h2>
<p>My journey took an interesting turn when I joined the <a href="https://systemcrafters.net/community/">System Crafters Community</a>. Through David Wilson&#39;s excellent course, <a href="https://systemcrafters.net/courses/hands-on-guile-scheme-beginners/">Hands-On Guile Scheme for Beginners</a>, I was introduced to the world of Scheme programming. This led me to adopt GNU Guix as my operating system, which naturally led me to <a href="https://dthompson.us/projects/haunt.html">Haunt</a>, a static site generator written in Guile Scheme.</p>
<p>The transition to Haunt was motivated by several factors:</p>
<ul>
<li>Alignment with my growing interest in Scheme and functional programming</li>
<li>Integration with the GNU Guix ecosystem</li>
<li>The opportunity to write site configuration in Scheme</li>
<li>A desire for a simpler, more controllable setup</li>
</ul>
<h3>The Haunt Experience</h3>
<p>Haunt offered a different perspective on site generation. Some highlights of my Haunt experience included:</p>
<ul>
<li>Writing site configuration in Scheme, which felt natural after learning Guile</li>
<li>Creating custom templates that matched my site&#39;s aesthetic needs</li>
<li>Learning to leverage Scheme&#39;s flexibility for site customization</li>
<li>Being part of a community that values simplicity and transparency</li>
</ul>
<p>However, working with Haunt also presented challenges:</p>
<ul>
<li>Limited availability of ready-made templates</li>
<li>Need to create custom solutions for common features</li>
<li>Learning curve of Scheme for web development</li>
</ul>
<h2>The Move to Custom Development</h2>
<p>As I became more comfortable with web development and gained a deeper understanding of static site generation, I felt ready for the next step: building my own static site generator. This decision wasn&#39;t about Haunt&#39;s limitations - it was about the desire to understand every aspect of my site&#39;s generation process and have complete control over its architecture.</p>
<h2>The New Architecture</h2>
<p>My custom solution combines the lessons learned from both Hugo and Haunt with modern web development practices:</p>
<ul>
<li><strong>Modern JavaScript</strong>: Using Node.js and contemporary JavaScript tools</li>
<li><strong>Markdown Processing</strong>: Leveraging the <code>marked</code> library for flexible content processing</li>
<li><strong>Tailwind CSS</strong>: Adopting a utility-first approach to styling</li>
<li><strong>Simple Build Process</strong>: A straightforward build script that handles all aspects of site generation</li>
<li><strong>Development Server</strong>: Live reload functionality for immediate feedback</li>
</ul>
<h2>Benefits of the Custom Solution</h2>
<p>Building my own solution has brought several advantages:</p>
<ol>
<li><strong>Complete Understanding</strong>: I now understand every aspect of my site&#39;s generation</li>
<li><strong>Faster Iterations</strong>: Quick implementation of new features</li>
<li><strong>Modern Development</strong>: Integration with current web development tools</li>
<li><strong>Simplified Deployment</strong>: Streamlined process for updates</li>
<li><strong>Better Performance</strong>: Only including features I actually need</li>
</ol>
<h2>Learning Experience</h2>
<p>This journey from Hugo through Haunt to a custom solution has taught me:</p>
<ul>
<li>The value of understanding different approaches to static site generation</li>
<li>The importance of choosing tools that align with your learning goals</li>
<li>How different programming paradigms (Go, Scheme, JavaScript) approach similar problems</li>
<li>The benefits of building your own tools when the learning opportunity outweighs convenience</li>
</ul>
<h2>Future Improvements</h2>
<p>While my custom solution meets my current needs, I&#39;m excited about potential improvements:</p>
<ul>
<li>Adding support for draft posts</li>
<li>Implementing a tag-based navigation system</li>
<li>Adding search functionality</li>
<li>Improving the build process</li>
<li>Adding image optimization</li>
</ul>
<h2>Conclusion</h2>
<p>My journey from Hugo through Haunt to a custom solution reflects a common pattern in software development - starting with established tools, learning their principles, and eventually building your own solutions. Each step has been valuable:</p>
<ul>
<li>Hugo taught me about static site generators and their capabilities</li>
<li>Haunt introduced me to functional programming and the beauty of Scheme</li>
<li>Building my own solution has given me deep insights into web development</li>
</ul>
<p>The source code for my site generator is available on <a href="https://github.com/glenneth1/personal-website">GitHub</a>. While it may not be the most feature-rich static site generator, it&#39;s perfectly tailored to my needs and represents a significant learning journey.</p>
<p>Remember, the goal of building your own tools isn&#39;t always to create something better than existing solutions - sometimes it&#39;s about the learning experience and creating something that perfectly fits your specific needs. Whether you&#39;re using Hugo, Haunt, or considering building your own solution, the most important thing is that it serves your purposes and helps you grow.</p>
</article>
</div>
</div>
</main>
<footer class="bg-base-darker text-palenight-200 py-12 border-t border-palenight-400/20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<p class="text-palenight-300">&copy; 2024 Glenn Thompson. All rights reserved.</p>
<div class="webring-text mt-6">
<p class="text-palenight-300">I am part of the <a href="https://systemcrafters.net" target="_blank" class="text-accent-blue hover:text-accent-cyan">System Crafters</a> webring:</p>
</div>
<div class="craftering mt-2 flex items-center justify-center gap-4 text-accent-blue">
<a href="https://craftering.systemcrafters.net/@glenneth/previous" class="hover:text-accent-cyan">Previous</a>
<a href="https://craftering.systemcrafters.net/@glenneth" class="hover:text-accent-cyan">Random</a>
<a href="https://craftering.systemcrafters.net/@glenneth/next" class="hover:text-accent-cyan">Next</a>
</div>
<p class="text-palenight-300 mt-2">
<a href="mailto:glenn@glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenn@glenneth.org</a> |
<a href="https://glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenneth.org</a>
</p>
</div>
</div>
</footer>
</body>
<!DOCTYPE html>
<html lang="en" class="bg-base-bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A reflection on my evolving journey through static site generators - from Hugo to Haunt, and finally to building my own custom solution, highlighting the valuable lessons learned along the way.">
<meta property="og:title" content="From Hugo to Haunt to Custom: My Journey in Static Site Generation">
<meta property="og:description" content="A reflection on my evolving journey through static site generators - from Hugo to Haunt, and finally to building my own custom solution, highlighting the valuable lessons learned along the way.">
<meta property="og:url" content="https://glenneth.orgcontent/posts/2025-01-02-from-haunt-to-custom">
<title>From Hugo to Haunt to Custom: My Journey in Static Site Generation - Glenn Thompson</title>
<link rel="alternate" type="application/rss+xml" title="Glenn Thompson's Blog" href="/feed.xml" />
<link href="/dist/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
.prose-palenight {
--tw-prose-body: #bfc7d5;
--tw-prose-headings: #ffd580;
--tw-prose-links: #82aaff;
--tw-prose-code: #c792ea;
--tw-prose-pre-bg: #1b1e2b;
}
.prose h2 {
color: var(--tw-prose-headings);
font-family: Merriweather, serif;
font-weight: 700;
font-size: 1.5rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.prose p {
margin-bottom: 1rem;
line-height: 1.625;
}
.prose a {
color: var(--tw-prose-links);
text-decoration: none;
}
.prose a:hover {
color: #89ddff;
}
.prose code {
color: var(--tw-prose-code);
font-family: 'JetBrains Mono', monospace;
}
.prose pre {
background-color: var(--tw-prose-pre-bg);
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
margin-bottom: 1rem;
}
.prose ul, .prose ol {
margin-top: 0.5rem;
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.prose ul {
list-style-type: disc;
}
.prose ol {
list-style-type: decimal;
}
</style>
</head>
<body class="bg-base-bg text-palenight-50">
<nav class="bg-base-darker/80 backdrop-blur-sm shadow-sm border-b border-palenight-400/20 mb-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="/" class="text-accent-yellow font-serif text-xl font-bold">Glenn Thompson</a>
<div class="flex items-center gap-2 text-accent-yellow text-sm font-bold">
<span>web, development, javascript, static-site, haunt, guile, hugo</span>
<span>•</span>
<time datetime="2025-01-02">January 2, 2025</time>
<span>•</span>
<span>4 min read</span>
</div>
</div>
</div>
</nav>
<main class="pt-24 pb-16 px-4">
<div class="max-w-4xl mx-auto">
<div class="content text-palenight-100 space-y-6">
<header class="mb-8">
<h1 class="text-4xl font-serif font-bold text-accent-yellow">From Hugo to Haunt to Custom: My Journey in Static Site Generation</h1>
<div class="flex items-center gap-4 text-palenight-300 mt-4">
<time datetime="2025-01-02">2025-01-02</time>
<span>•</span>
<span>4 min read</span>
<span>•</span>
<span>By Glenn Thompson</span>
</div>
<div class="flex flex-wrap gap-2 mt-4">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">web</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">development</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">javascript</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">static-site</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">haunt</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">guile</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">hugo</span>
</div>
</header>
<article class="prose prose-palenight max-w-none">
<p>My journey with static site generators has been one of continuous learning and evolution. It started with Hugo, transitioned through Haunt, and has now led me to build my own custom solution. Each step of this journey has taught me valuable lessons about web development, programming languages, and the importance of understanding the tools we use.</p>
<h2>The Hugo Beginning</h2>
<p>Like many &quot;bloggers&quot;, I started with Hugo, a popular static site generator known for its speed and extensive theme ecosystem. Hugo served its purpose well, providing a robust platform for my blog with ready-made themes and a strong community.</p>
<h2>The Transition to Haunt</h2>
<p>My journey took an interesting turn when I joined the <a href="https://systemcrafters.net/community/">System Crafters Community</a>. Through David Wilson&#39;s excellent course, <a href="https://systemcrafters.net/courses/hands-on-guile-scheme-beginners/">Hands-On Guile Scheme for Beginners</a>, I was introduced to the world of Scheme programming. This led me to adopt GNU Guix as my operating system, which naturally led me to <a href="https://dthompson.us/projects/haunt.html">Haunt</a>, a static site generator written in Guile Scheme.</p>
<p>The transition to Haunt was motivated by several factors:</p>
<ul>
<li>Alignment with my growing interest in Scheme and functional programming</li>
<li>Integration with the GNU Guix ecosystem</li>
<li>The opportunity to write site configuration in Scheme</li>
<li>A desire for a simpler, more controllable setup</li>
</ul>
<h3>The Haunt Experience</h3>
<p>Haunt offered a different perspective on site generation. Some highlights of my Haunt experience included:</p>
<ul>
<li>Writing site configuration in Scheme, which felt natural after learning Guile</li>
<li>Creating custom templates that matched my site&#39;s aesthetic needs</li>
<li>Learning to leverage Scheme&#39;s flexibility for site customization</li>
<li>Being part of a community that values simplicity and transparency</li>
</ul>
<p>However, working with Haunt also presented challenges:</p>
<ul>
<li>Limited availability of ready-made templates</li>
<li>Need to create custom solutions for common features</li>
<li>Learning curve of Scheme for web development</li>
</ul>
<h2>The Move to Custom Development</h2>
<p>As I became more comfortable with web development and gained a deeper understanding of static site generation, I felt ready for the next step: building my own static site generator. This decision wasn&#39;t about Haunt&#39;s limitations - it was about the desire to understand every aspect of my site&#39;s generation process and have complete control over its architecture.</p>
<h2>The New Architecture</h2>
<p>My custom solution combines the lessons learned from both Hugo and Haunt with modern web development practices:</p>
<ul>
<li><strong>Modern JavaScript</strong>: Using Node.js and contemporary JavaScript tools</li>
<li><strong>Markdown Processing</strong>: Leveraging the <code>marked</code> library for flexible content processing</li>
<li><strong>Tailwind CSS</strong>: Adopting a utility-first approach to styling</li>
<li><strong>Simple Build Process</strong>: A straightforward build script that handles all aspects of site generation</li>
<li><strong>Development Server</strong>: Live reload functionality for immediate feedback</li>
</ul>
<h2>Benefits of the Custom Solution</h2>
<p>Building my own solution has brought several advantages:</p>
<ol>
<li><strong>Complete Understanding</strong>: I now understand every aspect of my site&#39;s generation</li>
<li><strong>Faster Iterations</strong>: Quick implementation of new features</li>
<li><strong>Modern Development</strong>: Integration with current web development tools</li>
<li><strong>Simplified Deployment</strong>: Streamlined process for updates</li>
<li><strong>Better Performance</strong>: Only including features I actually need</li>
</ol>
<h2>Learning Experience</h2>
<p>This journey from Hugo through Haunt to a custom solution has taught me:</p>
<ul>
<li>The value of understanding different approaches to static site generation</li>
<li>The importance of choosing tools that align with your learning goals</li>
<li>How different programming paradigms (Go, Scheme, JavaScript) approach similar problems</li>
<li>The benefits of building your own tools when the learning opportunity outweighs convenience</li>
</ul>
<h2>Future Improvements</h2>
<p>While my custom solution meets my current needs, I&#39;m excited about potential improvements:</p>
<ul>
<li>Adding support for draft posts</li>
<li>Implementing a tag-based navigation system</li>
<li>Adding search functionality</li>
<li>Improving the build process</li>
<li>Adding image optimization</li>
</ul>
<h2>Conclusion</h2>
<p>My journey from Hugo through Haunt to a custom solution reflects a common pattern in software development - starting with established tools, learning their principles, and eventually building your own solutions. Each step has been valuable:</p>
<ul>
<li>Hugo taught me about static site generators and their capabilities</li>
<li>Haunt introduced me to functional programming and the beauty of Scheme</li>
<li>Building my own solution has given me deep insights into web development</li>
</ul>
<p>The source code for my site generator is available on <a href="https://github.com/glenneth1/personal-website">GitHub</a>. While it may not be the most feature-rich static site generator, it&#39;s perfectly tailored to my needs and represents a significant learning journey.</p>
<p>Remember, the goal of building your own tools isn&#39;t always to create something better than existing solutions - sometimes it&#39;s about the learning experience and creating something that perfectly fits your specific needs. Whether you&#39;re using Hugo, Haunt, or considering building your own solution, the most important thing is that it serves your purposes and helps you grow.</p>
</article>
</div>
</div>
</main>
<footer class="bg-base-darker text-palenight-200 py-12 border-t border-palenight-400/20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<p class="text-palenight-300">&copy; 2024 Glenn Thompson. All rights reserved.</p>
<div class="webring-text mt-6">
<p class="text-palenight-300">I am part of the <a href="https://systemcrafters.net" target="_blank" class="text-accent-blue hover:text-accent-cyan">System Crafters</a> webring:</p>
</div>
<div class="craftering mt-2 flex items-center justify-center gap-4 text-accent-blue">
<a href="https://craftering.systemcrafters.net/@glenneth/previous" class="hover:text-accent-cyan">Previous</a>
<a href="https://craftering.systemcrafters.net/@glenneth" class="hover:text-accent-cyan">Random</a>
<a href="https://craftering.systemcrafters.net/@glenneth/next" class="hover:text-accent-cyan">Next</a>
</div>
<p class="text-palenight-300 mt-2">
<a href="mailto:glenn@glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenn@glenneth.org</a> |
<a href="https://glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenneth.org</a>
</p>
</div>
</div>
</footer>
</body>
</html>

186
content/posts/2025-01-02-from-haunt-to-custom.md
View File

@ -1,93 +1,93 @@
---
title: From Hugo to Haunt to Custom: My Journey in Static Site Generation
date: 2025-01-02
tags: web, development, javascript, static-site, haunt, guile, hugo
description: A reflection on my evolving journey through static site generators - from Hugo to Haunt, and finally to building my own custom solution, highlighting the valuable lessons learned along the way.
---
My journey with static site generators has been one of continuous learning and evolution. It started with Hugo, transitioned through Haunt, and has now led me to build my own custom solution. Each step of this journey has taught me valuable lessons about web development, programming languages, and the importance of understanding the tools we use.
## The Hugo Beginning
Like many "bloggers", I started with Hugo, a popular static site generator known for its speed and extensive theme ecosystem. Hugo served its purpose well, providing a robust platform for my blog with ready-made themes and a strong community.
## The Transition to Haunt
My journey took an interesting turn when I joined the [System Crafters Community](https://systemcrafters.net/community/). Through David Wilson's excellent course, [Hands-On Guile Scheme for Beginners](https://systemcrafters.net/courses/hands-on-guile-scheme-beginners/), I was introduced to the world of Scheme programming. This led me to adopt GNU Guix as my operating system, which naturally led me to [Haunt](https://dthompson.us/projects/haunt.html), a static site generator written in Guile Scheme.
The transition to Haunt was motivated by several factors:
- Alignment with my growing interest in Scheme and functional programming
- Integration with the GNU Guix ecosystem
- The opportunity to write site configuration in Scheme
- A desire for a simpler, more controllable setup
### The Haunt Experience
Haunt offered a different perspective on site generation. Some highlights of my Haunt experience included:
- Writing site configuration in Scheme, which felt natural after learning Guile
- Creating custom templates that matched my site's aesthetic needs
- Learning to leverage Scheme's flexibility for site customization
- Being part of a community that values simplicity and transparency
However, working with Haunt also presented challenges:
- Limited availability of ready-made templates
- Need to create custom solutions for common features
- Learning curve of Scheme for web development
## The Move to Custom Development
As I became more comfortable with web development and gained a deeper understanding of static site generation, I felt ready for the next step: building my own static site generator. This decision wasn't about Haunt's limitations - it was about the desire to understand every aspect of my site's generation process and have complete control over its architecture.
## The New Architecture
My custom solution combines the lessons learned from both Hugo and Haunt with modern web development practices:
- **Modern JavaScript**: Using Node.js and contemporary JavaScript tools
- **Markdown Processing**: Leveraging the `marked` library for flexible content processing
- **Tailwind CSS**: Adopting a utility-first approach to styling
- **Simple Build Process**: A straightforward build script that handles all aspects of site generation
- **Development Server**: Live reload functionality for immediate feedback
## Benefits of the Custom Solution
Building my own solution has brought several advantages:
1. **Complete Understanding**: I now understand every aspect of my site's generation
2. **Faster Iterations**: Quick implementation of new features
3. **Modern Development**: Integration with current web development tools
4. **Simplified Deployment**: Streamlined process for updates
5. **Better Performance**: Only including features I actually need
## Learning Experience
This journey from Hugo through Haunt to a custom solution has taught me:
- The value of understanding different approaches to static site generation
- The importance of choosing tools that align with your learning goals
- How different programming paradigms (Go, Scheme, JavaScript) approach similar problems
- The benefits of building your own tools when the learning opportunity outweighs convenience
## Future Improvements
While my custom solution meets my current needs, I'm excited about potential improvements:
- Adding support for draft posts
- Implementing a tag-based navigation system
- Adding search functionality
- Improving the build process
- Adding image optimization
## Conclusion
My journey from Hugo through Haunt to a custom solution reflects a common pattern in software development - starting with established tools, learning their principles, and eventually building your own solutions. Each step has been valuable:
- Hugo taught me about static site generators and their capabilities
- Haunt introduced me to functional programming and the beauty of Scheme
- Building my own solution has given me deep insights into web development
The source code for my site generator is available on [GitHub](https://github.com/glenneth1/personal-website). While it may not be the most feature-rich static site generator, it's perfectly tailored to my needs and represents a significant learning journey.
Remember, the goal of building your own tools isn't always to create something better than existing solutions - sometimes it's about the learning experience and creating something that perfectly fits your specific needs. Whether you're using Hugo, Haunt, or considering building your own solution, the most important thing is that it serves your purposes and helps you grow.
---
title: From Hugo to Haunt to Custom: My Journey in Static Site Generation
date: 2025-01-02
tags: web, development, javascript, static-site, haunt, guile, hugo
description: A reflection on my evolving journey through static site generators - from Hugo to Haunt, and finally to building my own custom solution, highlighting the valuable lessons learned along the way.
---
My journey with static site generators has been one of continuous learning and evolution. It started with Hugo, transitioned through Haunt, and has now led me to build my own custom solution. Each step of this journey has taught me valuable lessons about web development, programming languages, and the importance of understanding the tools we use.
## The Hugo Beginning
Like many "bloggers", I started with Hugo, a popular static site generator known for its speed and extensive theme ecosystem. Hugo served its purpose well, providing a robust platform for my blog with ready-made themes and a strong community.
## The Transition to Haunt
My journey took an interesting turn when I joined the [System Crafters Community](https://systemcrafters.net/community/). Through David Wilson's excellent course, [Hands-On Guile Scheme for Beginners](https://systemcrafters.net/courses/hands-on-guile-scheme-beginners/), I was introduced to the world of Scheme programming. This led me to adopt GNU Guix as my operating system, which naturally led me to [Haunt](https://dthompson.us/projects/haunt.html), a static site generator written in Guile Scheme.
The transition to Haunt was motivated by several factors:
- Alignment with my growing interest in Scheme and functional programming
- Integration with the GNU Guix ecosystem
- The opportunity to write site configuration in Scheme
- A desire for a simpler, more controllable setup
### The Haunt Experience
Haunt offered a different perspective on site generation. Some highlights of my Haunt experience included:
- Writing site configuration in Scheme, which felt natural after learning Guile
- Creating custom templates that matched my site's aesthetic needs
- Learning to leverage Scheme's flexibility for site customization
- Being part of a community that values simplicity and transparency
However, working with Haunt also presented challenges:
- Limited availability of ready-made templates
- Need to create custom solutions for common features
- Learning curve of Scheme for web development
## The Move to Custom Development
As I became more comfortable with web development and gained a deeper understanding of static site generation, I felt ready for the next step: building my own static site generator. This decision wasn't about Haunt's limitations - it was about the desire to understand every aspect of my site's generation process and have complete control over its architecture.
## The New Architecture
My custom solution combines the lessons learned from both Hugo and Haunt with modern web development practices:
- **Modern JavaScript**: Using Node.js and contemporary JavaScript tools
- **Markdown Processing**: Leveraging the `marked` library for flexible content processing
- **Tailwind CSS**: Adopting a utility-first approach to styling
- **Simple Build Process**: A straightforward build script that handles all aspects of site generation
- **Development Server**: Live reload functionality for immediate feedback
## Benefits of the Custom Solution
Building my own solution has brought several advantages:
1. **Complete Understanding**: I now understand every aspect of my site's generation
2. **Faster Iterations**: Quick implementation of new features
3. **Modern Development**: Integration with current web development tools
4. **Simplified Deployment**: Streamlined process for updates
5. **Better Performance**: Only including features I actually need
## Learning Experience
This journey from Hugo through Haunt to a custom solution has taught me:
- The value of understanding different approaches to static site generation
- The importance of choosing tools that align with your learning goals
- How different programming paradigms (Go, Scheme, JavaScript) approach similar problems
- The benefits of building your own tools when the learning opportunity outweighs convenience
## Future Improvements
While my custom solution meets my current needs, I'm excited about potential improvements:
- Adding support for draft posts
- Implementing a tag-based navigation system
- Adding search functionality
- Improving the build process
- Adding image optimization
## Conclusion
My journey from Hugo through Haunt to a custom solution reflects a common pattern in software development - starting with established tools, learning their principles, and eventually building your own solutions. Each step has been valuable:
- Hugo taught me about static site generators and their capabilities
- Haunt introduced me to functional programming and the beauty of Scheme
- Building my own solution has given me deep insights into web development
The source code for my site generator is available on [GitHub](https://github.com/glenneth1/personal-website). While it may not be the most feature-rich static site generator, it's perfectly tailored to my needs and represents a significant learning journey.
Remember, the goal of building your own tools isn't always to create something better than existing solutions - sometimes it's about the learning experience and creating something that perfectly fits your specific needs. Whether you're using Hugo, Haunt, or considering building your own solution, the most important thing is that it serves your purposes and helps you grow.

644
content/posts/2025-03-08-my-dev-environment-2025.html
View File

@ -1,323 +1,323 @@
<!DOCTYPE html>
<html lang="en" class="bg-base-bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A comprehensive look at my current development setup in 2025, covering everything from my GNU Guix system foundation to editor configurations, terminal tools, and deployment processes.">
<meta property="og:title" content="My Development Environment in 2025: From Editor to Deployment">
<meta property="og:description" content="A comprehensive look at my current development setup in 2025, covering everything from my GNU Guix system foundation to editor configurations, terminal tools, and deployment processes.">
<meta property="og:url" content="https://glenneth.orgcontent/posts/2025-03-08-my-dev-environment-2025">
<title>My Development Environment in 2025: From Editor to Deployment - Glenn Thompson</title>
<link rel="alternate" type="application/rss+xml" title="Glenn Thompson's Blog" href="/feed.xml" />
<link href="/dist/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
.prose-palenight {
--tw-prose-body: #bfc7d5;
--tw-prose-headings: #ffd580;
--tw-prose-links: #82aaff;
--tw-prose-code: #c792ea;
--tw-prose-pre-bg: #1b1e2b;
}
.prose h2 {
color: var(--tw-prose-headings);
font-family: Merriweather, serif;
font-weight: 700;
font-size: 1.5rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.prose p {
margin-bottom: 1rem;
line-height: 1.625;
}
.prose a {
color: var(--tw-prose-links);
text-decoration: none;
}
.prose a:hover {
color: #89ddff;
}
.prose code {
color: var(--tw-prose-code);
font-family: 'JetBrains Mono', monospace;
}
.prose pre {
background-color: var(--tw-prose-pre-bg);
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
margin-bottom: 1rem;
}
.prose ul, .prose ol {
margin-top: 0.5rem;
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.prose ul {
list-style-type: disc;
}
.prose ol {
list-style-type: decimal;
}
</style>
</head>
<body class="bg-base-bg text-palenight-50">
<nav class="bg-base-darker/80 backdrop-blur-sm shadow-sm border-b border-palenight-400/20 mb-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="/" class="text-accent-yellow font-serif text-xl font-bold">Glenn Thompson</a>
<div class="flex items-center gap-2 text-accent-yellow text-sm font-bold">
<span>development, guix, tools, workflow, productivity, web</span>
<span>•</span>
<time datetime="2025-03-08">March 8, 2025</time>
<span>•</span>
<span>6 min read</span>
</div>
</div>
</div>
</nav>
<main class="pt-24 pb-16 px-4">
<div class="max-w-4xl mx-auto">
<div class="content text-palenight-100 space-y-6">
<header class="mb-8">
<h1 class="text-4xl font-serif font-bold text-accent-yellow">My Development Environment in 2025: From Editor to Deployment</h1>
<div class="flex items-center gap-4 text-palenight-300 mt-4">
<time datetime="2025-03-08">2025-03-08</time>
<span>•</span>
<span>6 min read</span>
<span>•</span>
<span>By Glenn Thompson</span>
</div>
<div class="flex flex-wrap gap-2 mt-4">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">development</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">guix</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">tools</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">workflow</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">productivity</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">web</span>
</div>
</header>
<article class="prose prose-palenight max-w-none">
<h2>Introduction</h2>
<p>The tools we use shape how we work. Over the years, my development environment has evolved alongside my technical journey through different programming languages, paradigms, and projects. This post offers a snapshot of my current setup in early 2025, detailing the choices I&#39;ve made and why they work for me.</p>
<h2>System Foundation: ArcoLinux with GNU Guix</h2>
<p>My journey to <a href="https://guix.gnu.org/">GNU Guix</a> began through my exploration of Scheme programming, as I detailed in my <a href="/content/posts/2024-07-26-gnu-guix-journey.html">GNU Guix Journey</a> post. While I initially experimented with Guix System, I&#39;ve settled on a hybrid approach: running Guix as a package manager on top of ArcoLinux (an Arch-based distribution).</p>
<h3>Current Configuration Approach</h3>
<p>I manage my development environment using a combination of Arch&#39;s pacman, AUR, and Guix&#39;s declarative package management. My Guix configuration lives in a Git repository, allowing me to:</p>
<ul>
<li>Track changes to my development environment over time</li>
<li>Reproduce my development setup on new hardware</li>
<li>Roll back to previous package states when needed</li>
<li>Share configuration snippets with the community</li>
</ul>
<h3>Key Packages and Tools</h3>
<p>I maintain a hybrid package approach:</p>
<p><strong>System packages (via pacman/AUR):</strong></p>
<ul>
<li>Base system utilities and desktop environment</li>
<li>Graphics drivers and hardware support</li>
<li>Some GUI applications</li>
</ul>
<p><strong>Development tools (via Guix):</strong></p>
<pre><code class="language-scheme">;; My primary development tools managed by Guix
(specifications-&gt;manifest
&#39;(&quot;emacs&quot; &quot;git&quot; &quot;openssh&quot; &quot;ripgrep&quot; &quot;fd&quot; &quot;exa&quot; &quot;bat&quot;
&quot;guile&quot; &quot;node&quot; &quot;python&quot; &quot;gcc-toolchain&quot; &quot;make&quot;
&quot;nss-certs&quot; &quot;glibc-locales&quot;))
</code></pre>
<p>This hybrid approach gives me the best of both worlds: Arch&#39;s extensive package repository and up-to-date system packages, combined with Guix&#39;s reproducible development environments.</p>
<h3>Reproducibility Benefits</h3>
<p>The reproducibility of Guix for development environments has been invaluable. I can:</p>
<ul>
<li>Spin up development environments with precise dependencies</li>
<li>Ensure consistent behavior across machines</li>
<li>Isolate project-specific dependencies using Guix environments</li>
<li>Share exact environment specifications with collaborators</li>
</ul>
<h3>Challenges and Solutions</h3>
<p>Working with this hybrid approach isn&#39;t without challenges:</p>
<ul>
<li><p><strong>Challenge</strong>: Keeping Guix packages in sync with system libraries<br><strong>Solution</strong>: Careful management of library paths and containerization when needed</p>
</li>
<li><p><strong>Challenge</strong>: Learning curve for Guix&#39;s declarative configuration<br><strong>Solution</strong>: Incremental adoption and community resources</p>
</li>
<li><p><strong>Challenge</strong>: Occasional conflicts between package managers<br><strong>Solution</strong>: Clear separation of responsibilities (system vs. development tools)</p>
</li>
</ul>
<h2>Editor Environment: Emacs</h2>
<p>After experimenting with various editors, I&#39;ve settled on Emacs as my primary development environment. Its extensibility and Scheme-based configuration language (Emacs Lisp) align well with my interests.</p>
<h3>Configuration Approach</h3>
<p>I use a literate configuration with Org mode, which allows me to:</p>
<ul>
<li>Document my configuration choices</li>
<li>Organize settings by purpose rather than file</li>
<li>Selectively load components based on context</li>
<li>Share readable documentation with others</li>
</ul>
<h3>Key Extensions</h3>
<p>My most valuable Emacs extensions include:</p>
<ul>
<li><strong>Magit</strong>: Git interface that has transformed my version control workflow</li>
<li><strong>LSP Mode</strong>: Language server integration for intelligent code assistance</li>
<li><strong>Org Mode</strong>: For notes, task management, and literate programming</li>
<li><strong>Projectile</strong>: Project navigation and management</li>
<li><strong>Company</strong>: Completion framework</li>
<li><strong>Consult/Vertico/Marginalia</strong>: Modern completion UI</li>
<li><strong>Tree-sitter</strong>: Improved syntax highlighting and structural editing</li>
</ul>
<h3>Language-Specific Setups</h3>
<p>For my primary languages:</p>
<ul>
<li><strong>Scheme/Guile</strong>: Geiser for REPL integration</li>
<li><strong>JavaScript/TypeScript</strong>: TypeScript LSP, prettier, eslint integration</li>
<li><strong>Python</strong>: Pyright LSP, black formatting</li>
<li><strong>Web Development</strong>: Web mode, emmet, css-mode</li>
</ul>
<h3>Productivity Enhancements</h3>
<p>Some productivity boosters in my setup:</p>
<ul>
<li>Custom keybindings for frequent operations</li>
<li>Snippets for common code patterns</li>
<li>Template generation for new projects</li>
<li>Integration with system notifications</li>
</ul>
<h2>Terminal and CLI Tools</h2>
<p>While Emacs handles many tasks, I still rely heavily on terminal tools for specific workflows.</p>
<h3>Shell Configuration</h3>
<p>I use Zsh with a custom configuration that provides:</p>
<ul>
<li>Intuitive aliases</li>
<li>Helpful prompts with Git integration</li>
<li>Command history management</li>
<li>Directory navigation shortcuts</li>
</ul>
<h3>Custom Scripts and Utilities</h3>
<p>I&#39;ve developed several custom scripts to streamline repetitive tasks:</p>
<ul>
<li>Project initialization templates</li>
<li>Deployment automation</li>
<li>System maintenance routines</li>
<li>Content management for this blog</li>
</ul>
<h3>Task Automation</h3>
<p>For task automation, I use a combination of:</p>
<ul>
<li>Shell scripts for simple operations</li>
<li>Guile scripts for more complex logic</li>
<li>Make for build processes</li>
<li>Cron for scheduled tasks</li>
</ul>
<h3>Version Control Workflow</h3>
<p>My Git workflow relies on:</p>
<ul>
<li>Branch-per-feature approach</li>
<li>Interactive rebasing for clean history</li>
<li>Commit message templates</li>
<li>Hooks for quality checks</li>
</ul>
<h2>Web Development Stack</h2>
<p>As the creator of this website, my web development setup has been refined through experience.</p>
<h3>Local Development Server</h3>
<p>For local development, I use:</p>
<ul>
<li>Live-server for static sites</li>
<li>Custom Node.js servers for API development</li>
<li>Docker containers for complex dependencies</li>
</ul>
<h3>Build Tools and Processes</h3>
<p>My build process typically involves:</p>
<ul>
<li>Tailwind CSS for styling</li>
<li>Minimal JavaScript bundling</li>
<li>Custom static site generation (as detailed in my <a href="/content/posts/2025-01-02-from-haunt-to-custom.html">previous post</a>)</li>
<li>Automated optimization steps</li>
</ul>
<h3>Testing Approach</h3>
<p>For testing, I employ:</p>
<ul>
<li>Jest for JavaScript unit tests</li>
<li>Cypress for end-to-end testing</li>
<li>Manual testing across devices and browsers</li>
<li>Accessibility validation tools</li>
</ul>
<h3>Browser Tools and Extensions</h3>
<p>Essential browser tools include:</p>
<ul>
<li>Firefox Developer Edition as my primary browser</li>
<li>Chrome for cross-browser testing</li>
<li>DevTools for performance analysis</li>
<li>React and Redux DevTools</li>
<li>Accessibility checkers</li>
</ul>
<h2>Deployment Pipeline</h2>
<p>My approach to deployment emphasizes security and reliability.</p>
<h3>Secure Deployment Process</h3>
<p>As you might have noticed from my <a href="/content/posts/2025-03-08-my-dev-environment-2025.html">.env.gpg file</a>, I take security seriously:</p>
<ul>
<li>Credentials stored in GPG-encrypted files</li>
<li>Separate development and production configurations</li>
<li>Principle of least privilege for service accounts</li>
<li>Regular security audits</li>
</ul>
<h3>Automation Scripts</h3>
<p>My deployment is automated through:</p>
<ul>
<li>Custom shell scripts for build and deploy</li>
<li>Validation steps before deployment</li>
<li>Rollback capabilities</li>
<li>Notification systems for success/failure</li>
</ul>
<h3>CI/CD Considerations</h3>
<p>While not using a formal CI/CD pipeline for this personal site, I follow similar principles:</p>
<ul>
<li>Pre-commit checks for code quality</li>
<li>Automated testing before deployment</li>
<li>Consistent build environments</li>
<li>Deployment approval steps</li>
</ul>
<h3>Monitoring and Analytics</h3>
<p>For site monitoring, I use:</p>
<ul>
<li>Simple analytics for privacy-respecting visitor tracking</li>
<li>Uptime monitoring</li>
<li>Performance metrics collection</li>
<li>Error logging and alerting</li>
</ul>
<h2>Future Improvements</h2>
<p>My environment continues to evolve. Areas I&#39;m exploring include:</p>
<ul>
<li>Further integration between Emacs and system tools</li>
<li>More comprehensive test automation</li>
<li>Expanded use of Guix channels for package management</li>
<li>Improved mobile development workflow</li>
</ul>
<h2>Conclusion</h2>
<p>A development environment is deeply personal, reflecting both technical needs and individual preferences. Mine has evolved through years of experimentation, learning, and refinement.</p>
<p>The most important lesson I&#39;ve learned is that tools should serve your workflow, not dictate it. Be willing to experiment, but also recognize when a tool is working well enough that further optimization yields diminishing returns.</p>
<p>I hope sharing my setup provides some inspiration for your own environment. I&#39;d love to hear about your setup and what tools have made the biggest difference in your workflow.</p>
<p>What aspects of your development environment have you found most valuable? Are there tools or approaches you think I should consider? Let me know!</p>
</article>
</div>
</div>
</main>
<footer class="bg-base-darker text-palenight-200 py-12 border-t border-palenight-400/20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<p class="text-palenight-300">&copy; 2024 Glenn Thompson. All rights reserved.</p>
<div class="webring-text mt-6">
<p class="text-palenight-300">I am part of the <a href="https://systemcrafters.net" target="_blank" class="text-accent-blue hover:text-accent-cyan">System Crafters</a> webring:</p>
</div>
<div class="craftering mt-2 flex items-center justify-center gap-4 text-accent-blue">
<a href="https://craftering.systemcrafters.net/@glenneth/previous" class="hover:text-accent-cyan">Previous</a>
<a href="https://craftering.systemcrafters.net/@glenneth" class="hover:text-accent-cyan">Random</a>
<a href="https://craftering.systemcrafters.net/@glenneth/next" class="hover:text-accent-cyan">Next</a>
</div>
<p class="text-palenight-300 mt-2">
<a href="mailto:glenn@glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenn@glenneth.org</a> |
<a href="https://glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenneth.org</a>
</p>
</div>
</div>
</footer>
</body>
<!DOCTYPE html>
<html lang="en" class="bg-base-bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A comprehensive look at my current development setup in 2025, covering everything from my GNU Guix system foundation to editor configurations, terminal tools, and deployment processes.">
<meta property="og:title" content="My Development Environment in 2025: From Editor to Deployment">
<meta property="og:description" content="A comprehensive look at my current development setup in 2025, covering everything from my GNU Guix system foundation to editor configurations, terminal tools, and deployment processes.">
<meta property="og:url" content="https://glenneth.orgcontent/posts/2025-03-08-my-dev-environment-2025">
<title>My Development Environment in 2025: From Editor to Deployment - Glenn Thompson</title>
<link rel="alternate" type="application/rss+xml" title="Glenn Thompson's Blog" href="/feed.xml" />
<link href="/dist/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
.prose-palenight {
--tw-prose-body: #bfc7d5;
--tw-prose-headings: #ffd580;
--tw-prose-links: #82aaff;
--tw-prose-code: #c792ea;
--tw-prose-pre-bg: #1b1e2b;
}
.prose h2 {
color: var(--tw-prose-headings);
font-family: Merriweather, serif;
font-weight: 700;
font-size: 1.5rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.prose p {
margin-bottom: 1rem;
line-height: 1.625;
}
.prose a {
color: var(--tw-prose-links);
text-decoration: none;
}
.prose a:hover {
color: #89ddff;
}
.prose code {
color: var(--tw-prose-code);
font-family: 'JetBrains Mono', monospace;
}
.prose pre {
background-color: var(--tw-prose-pre-bg);
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
margin-bottom: 1rem;
}
.prose ul, .prose ol {
margin-top: 0.5rem;
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.prose ul {
list-style-type: disc;
}
.prose ol {
list-style-type: decimal;
}
</style>
</head>
<body class="bg-base-bg text-palenight-50">
<nav class="bg-base-darker/80 backdrop-blur-sm shadow-sm border-b border-palenight-400/20 mb-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="/" class="text-accent-yellow font-serif text-xl font-bold">Glenn Thompson</a>
<div class="flex items-center gap-2 text-accent-yellow text-sm font-bold">
<span>development, guix, tools, workflow, productivity, web</span>
<span>•</span>
<time datetime="2025-03-08">March 8, 2025</time>
<span>•</span>
<span>6 min read</span>
</div>
</div>
</div>
</nav>
<main class="pt-24 pb-16 px-4">
<div class="max-w-4xl mx-auto">
<div class="content text-palenight-100 space-y-6">
<header class="mb-8">
<h1 class="text-4xl font-serif font-bold text-accent-yellow">My Development Environment in 2025: From Editor to Deployment</h1>
<div class="flex items-center gap-4 text-palenight-300 mt-4">
<time datetime="2025-03-08">2025-03-08</time>
<span>•</span>
<span>6 min read</span>
<span>•</span>
<span>By Glenn Thompson</span>
</div>
<div class="flex flex-wrap gap-2 mt-4">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">development</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">guix</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">tools</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">workflow</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">productivity</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">web</span>
</div>
</header>
<article class="prose prose-palenight max-w-none">
<h2>Introduction</h2>
<p>The tools we use shape how we work. Over the years, my development environment has evolved alongside my technical journey through different programming languages, paradigms, and projects. This post offers a snapshot of my current setup in early 2025, detailing the choices I&#39;ve made and why they work for me.</p>
<h2>System Foundation: ArcoLinux with GNU Guix</h2>
<p>My journey to <a href="https://guix.gnu.org/">GNU Guix</a> began through my exploration of Scheme programming, as I detailed in my <a href="/content/posts/2024-07-26-gnu-guix-journey.html">GNU Guix Journey</a> post. While I initially experimented with Guix System, I&#39;ve settled on a hybrid approach: running Guix as a package manager on top of ArcoLinux (an Arch-based distribution).</p>
<h3>Current Configuration Approach</h3>
<p>I manage my development environment using a combination of Arch&#39;s pacman, AUR, and Guix&#39;s declarative package management. My Guix configuration lives in a Git repository, allowing me to:</p>
<ul>
<li>Track changes to my development environment over time</li>
<li>Reproduce my development setup on new hardware</li>
<li>Roll back to previous package states when needed</li>
<li>Share configuration snippets with the community</li>
</ul>
<h3>Key Packages and Tools</h3>
<p>I maintain a hybrid package approach:</p>
<p><strong>System packages (via pacman/AUR):</strong></p>
<ul>
<li>Base system utilities and desktop environment</li>
<li>Graphics drivers and hardware support</li>
<li>Some GUI applications</li>
</ul>
<p><strong>Development tools (via Guix):</strong></p>
<pre><code class="language-scheme">;; My primary development tools managed by Guix
(specifications-&gt;manifest
&#39;(&quot;emacs&quot; &quot;git&quot; &quot;openssh&quot; &quot;ripgrep&quot; &quot;fd&quot; &quot;exa&quot; &quot;bat&quot;
&quot;guile&quot; &quot;node&quot; &quot;python&quot; &quot;gcc-toolchain&quot; &quot;make&quot;
&quot;nss-certs&quot; &quot;glibc-locales&quot;))
</code></pre>
<p>This hybrid approach gives me the best of both worlds: Arch&#39;s extensive package repository and up-to-date system packages, combined with Guix&#39;s reproducible development environments.</p>
<h3>Reproducibility Benefits</h3>
<p>The reproducibility of Guix for development environments has been invaluable. I can:</p>
<ul>
<li>Spin up development environments with precise dependencies</li>
<li>Ensure consistent behavior across machines</li>
<li>Isolate project-specific dependencies using Guix environments</li>
<li>Share exact environment specifications with collaborators</li>
</ul>
<h3>Challenges and Solutions</h3>
<p>Working with this hybrid approach isn&#39;t without challenges:</p>
<ul>
<li><p><strong>Challenge</strong>: Keeping Guix packages in sync with system libraries<br><strong>Solution</strong>: Careful management of library paths and containerization when needed</p>
</li>
<li><p><strong>Challenge</strong>: Learning curve for Guix&#39;s declarative configuration<br><strong>Solution</strong>: Incremental adoption and community resources</p>
</li>
<li><p><strong>Challenge</strong>: Occasional conflicts between package managers<br><strong>Solution</strong>: Clear separation of responsibilities (system vs. development tools)</p>
</li>
</ul>
<h2>Editor Environment: Emacs</h2>
<p>After experimenting with various editors, I&#39;ve settled on Emacs as my primary development environment. Its extensibility and Scheme-based configuration language (Emacs Lisp) align well with my interests.</p>
<h3>Configuration Approach</h3>
<p>I use a literate configuration with Org mode, which allows me to:</p>
<ul>
<li>Document my configuration choices</li>
<li>Organize settings by purpose rather than file</li>
<li>Selectively load components based on context</li>
<li>Share readable documentation with others</li>
</ul>
<h3>Key Extensions</h3>
<p>My most valuable Emacs extensions include:</p>
<ul>
<li><strong>Magit</strong>: Git interface that has transformed my version control workflow</li>
<li><strong>LSP Mode</strong>: Language server integration for intelligent code assistance</li>
<li><strong>Org Mode</strong>: For notes, task management, and literate programming</li>
<li><strong>Projectile</strong>: Project navigation and management</li>
<li><strong>Company</strong>: Completion framework</li>
<li><strong>Consult/Vertico/Marginalia</strong>: Modern completion UI</li>
<li><strong>Tree-sitter</strong>: Improved syntax highlighting and structural editing</li>
</ul>
<h3>Language-Specific Setups</h3>
<p>For my primary languages:</p>
<ul>
<li><strong>Scheme/Guile</strong>: Geiser for REPL integration</li>
<li><strong>JavaScript/TypeScript</strong>: TypeScript LSP, prettier, eslint integration</li>
<li><strong>Python</strong>: Pyright LSP, black formatting</li>
<li><strong>Web Development</strong>: Web mode, emmet, css-mode</li>
</ul>
<h3>Productivity Enhancements</h3>
<p>Some productivity boosters in my setup:</p>
<ul>
<li>Custom keybindings for frequent operations</li>
<li>Snippets for common code patterns</li>
<li>Template generation for new projects</li>
<li>Integration with system notifications</li>
</ul>
<h2>Terminal and CLI Tools</h2>
<p>While Emacs handles many tasks, I still rely heavily on terminal tools for specific workflows.</p>
<h3>Shell Configuration</h3>
<p>I use Zsh with a custom configuration that provides:</p>
<ul>
<li>Intuitive aliases</li>
<li>Helpful prompts with Git integration</li>
<li>Command history management</li>
<li>Directory navigation shortcuts</li>
</ul>
<h3>Custom Scripts and Utilities</h3>
<p>I&#39;ve developed several custom scripts to streamline repetitive tasks:</p>
<ul>
<li>Project initialization templates</li>
<li>Deployment automation</li>
<li>System maintenance routines</li>
<li>Content management for this blog</li>
</ul>
<h3>Task Automation</h3>
<p>For task automation, I use a combination of:</p>
<ul>
<li>Shell scripts for simple operations</li>
<li>Guile scripts for more complex logic</li>
<li>Make for build processes</li>
<li>Cron for scheduled tasks</li>
</ul>
<h3>Version Control Workflow</h3>
<p>My Git workflow relies on:</p>
<ul>
<li>Branch-per-feature approach</li>
<li>Interactive rebasing for clean history</li>
<li>Commit message templates</li>
<li>Hooks for quality checks</li>
</ul>
<h2>Web Development Stack</h2>
<p>As the creator of this website, my web development setup has been refined through experience.</p>
<h3>Local Development Server</h3>
<p>For local development, I use:</p>
<ul>
<li>Live-server for static sites</li>
<li>Custom Node.js servers for API development</li>
<li>Docker containers for complex dependencies</li>
</ul>
<h3>Build Tools and Processes</h3>
<p>My build process typically involves:</p>
<ul>
<li>Tailwind CSS for styling</li>
<li>Minimal JavaScript bundling</li>
<li>Custom static site generation (as detailed in my <a href="/content/posts/2025-01-02-from-haunt-to-custom.html">previous post</a>)</li>
<li>Automated optimization steps</li>
</ul>
<h3>Testing Approach</h3>
<p>For testing, I employ:</p>
<ul>
<li>Jest for JavaScript unit tests</li>
<li>Cypress for end-to-end testing</li>
<li>Manual testing across devices and browsers</li>
<li>Accessibility validation tools</li>
</ul>
<h3>Browser Tools and Extensions</h3>
<p>Essential browser tools include:</p>
<ul>
<li>Firefox Developer Edition as my primary browser</li>
<li>Chrome for cross-browser testing</li>
<li>DevTools for performance analysis</li>
<li>React and Redux DevTools</li>
<li>Accessibility checkers</li>
</ul>
<h2>Deployment Pipeline</h2>
<p>My approach to deployment emphasizes security and reliability.</p>
<h3>Secure Deployment Process</h3>
<p>As you might have noticed from my <a href="/content/posts/2025-03-08-my-dev-environment-2025.html">.env.gpg file</a>, I take security seriously:</p>
<ul>
<li>Credentials stored in GPG-encrypted files</li>
<li>Separate development and production configurations</li>
<li>Principle of least privilege for service accounts</li>
<li>Regular security audits</li>
</ul>
<h3>Automation Scripts</h3>
<p>My deployment is automated through:</p>
<ul>
<li>Custom shell scripts for build and deploy</li>
<li>Validation steps before deployment</li>
<li>Rollback capabilities</li>
<li>Notification systems for success/failure</li>
</ul>
<h3>CI/CD Considerations</h3>
<p>While not using a formal CI/CD pipeline for this personal site, I follow similar principles:</p>
<ul>
<li>Pre-commit checks for code quality</li>
<li>Automated testing before deployment</li>
<li>Consistent build environments</li>
<li>Deployment approval steps</li>
</ul>
<h3>Monitoring and Analytics</h3>
<p>For site monitoring, I use:</p>
<ul>
<li>Simple analytics for privacy-respecting visitor tracking</li>
<li>Uptime monitoring</li>
<li>Performance metrics collection</li>
<li>Error logging and alerting</li>
</ul>
<h2>Future Improvements</h2>
<p>My environment continues to evolve. Areas I&#39;m exploring include:</p>
<ul>
<li>Further integration between Emacs and system tools</li>
<li>More comprehensive test automation</li>
<li>Expanded use of Guix channels for package management</li>
<li>Improved mobile development workflow</li>
</ul>
<h2>Conclusion</h2>
<p>A development environment is deeply personal, reflecting both technical needs and individual preferences. Mine has evolved through years of experimentation, learning, and refinement.</p>
<p>The most important lesson I&#39;ve learned is that tools should serve your workflow, not dictate it. Be willing to experiment, but also recognize when a tool is working well enough that further optimization yields diminishing returns.</p>
<p>I hope sharing my setup provides some inspiration for your own environment. I&#39;d love to hear about your setup and what tools have made the biggest difference in your workflow.</p>
<p>What aspects of your development environment have you found most valuable? Are there tools or approaches you think I should consider? Let me know!</p>
</article>
</div>
</div>
</main>
<footer class="bg-base-darker text-palenight-200 py-12 border-t border-palenight-400/20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<p class="text-palenight-300">&copy; 2024 Glenn Thompson. All rights reserved.</p>
<div class="webring-text mt-6">
<p class="text-palenight-300">I am part of the <a href="https://systemcrafters.net" target="_blank" class="text-accent-blue hover:text-accent-cyan">System Crafters</a> webring:</p>
</div>
<div class="craftering mt-2 flex items-center justify-center gap-4 text-accent-blue">
<a href="https://craftering.systemcrafters.net/@glenneth/previous" class="hover:text-accent-cyan">Previous</a>
<a href="https://craftering.systemcrafters.net/@glenneth" class="hover:text-accent-cyan">Random</a>
<a href="https://craftering.systemcrafters.net/@glenneth/next" class="hover:text-accent-cyan">Next</a>
</div>
<p class="text-palenight-300 mt-2">
<a href="mailto:glenn@glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenn@glenneth.org</a> |
<a href="https://glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenneth.org</a>
</p>
</div>
</div>
</footer>
</body>
</html>

498
content/posts/2025-03-08-my-dev-environment-2025.md
View File

@ -1,249 +1,249 @@
---
title: My Development Environment in 2025: From Editor to Deployment
date: 2025-03-08
tags: development, guix, tools, workflow, productivity, web
description: A comprehensive look at my current development setup in 2025, covering everything from my GNU Guix system foundation to editor configurations, terminal tools, and deployment processes.
---
## Introduction
The tools we use shape how we work. Over the years, my development environment has evolved alongside my technical journey through different programming languages, paradigms, and projects. This post offers a snapshot of my current setup in early 2025, detailing the choices I've made and why they work for me.
## System Foundation: ArcoLinux with GNU Guix
My journey to [GNU Guix](https://guix.gnu.org/) began through my exploration of Scheme programming, as I detailed in my [GNU Guix Journey](/content/posts/2024-07-26-gnu-guix-journey.html) post. While I initially experimented with Guix System, I've settled on a hybrid approach: running Guix as a package manager on top of ArcoLinux (an Arch-based distribution).
### Current Configuration Approach
I manage my development environment using a combination of Arch's pacman, AUR, and Guix's declarative package management. My Guix configuration lives in a Git repository, allowing me to:
- Track changes to my development environment over time
- Reproduce my development setup on new hardware
- Roll back to previous package states when needed
- Share configuration snippets with the community
### Key Packages and Tools
I maintain a hybrid package approach:
**System packages (via pacman/AUR):**
- Base system utilities and desktop environment
- Graphics drivers and hardware support
- Some GUI applications
**Development tools (via Guix):**
```scheme
;; My primary development tools managed by Guix
(specifications->manifest
'("emacs" "git" "openssh" "ripgrep" "fd" "exa" "bat"
"guile" "node" "python" "gcc-toolchain" "make"
"nss-certs" "glibc-locales"))
```
This hybrid approach gives me the best of both worlds: Arch's extensive package repository and up-to-date system packages, combined with Guix's reproducible development environments.
### Reproducibility Benefits
The reproducibility of Guix for development environments has been invaluable. I can:
- Spin up development environments with precise dependencies
- Ensure consistent behavior across machines
- Isolate project-specific dependencies using Guix environments
- Share exact environment specifications with collaborators
### Challenges and Solutions
Working with this hybrid approach isn't without challenges:
- **Challenge**: Keeping Guix packages in sync with system libraries
**Solution**: Careful management of library paths and containerization when needed
- **Challenge**: Learning curve for Guix's declarative configuration
**Solution**: Incremental adoption and community resources
- **Challenge**: Occasional conflicts between package managers
**Solution**: Clear separation of responsibilities (system vs. development tools)
## Editor Environment: Emacs
After experimenting with various editors, I've settled on Emacs as my primary development environment. Its extensibility and Scheme-based configuration language (Emacs Lisp) align well with my interests.
### Configuration Approach
I use a literate configuration with Org mode, which allows me to:
- Document my configuration choices
- Organize settings by purpose rather than file
- Selectively load components based on context
- Share readable documentation with others
### Key Extensions
My most valuable Emacs extensions include:
- **Magit**: Git interface that has transformed my version control workflow
- **LSP Mode**: Language server integration for intelligent code assistance
- **Org Mode**: For notes, task management, and literate programming
- **Projectile**: Project navigation and management
- **Company**: Completion framework
- **Consult/Vertico/Marginalia**: Modern completion UI
- **Tree-sitter**: Improved syntax highlighting and structural editing
### Language-Specific Setups
For my primary languages:
- **Scheme/Guile**: Geiser for REPL integration
- **JavaScript/TypeScript**: TypeScript LSP, prettier, eslint integration
- **Python**: Pyright LSP, black formatting
- **Web Development**: Web mode, emmet, css-mode
### Productivity Enhancements
Some productivity boosters in my setup:
- Custom keybindings for frequent operations
- Snippets for common code patterns
- Template generation for new projects
- Integration with system notifications
## Terminal and CLI Tools
While Emacs handles many tasks, I still rely heavily on terminal tools for specific workflows.
### Shell Configuration
I use Zsh with a custom configuration that provides:
- Intuitive aliases
- Helpful prompts with Git integration
- Command history management
- Directory navigation shortcuts
### Custom Scripts and Utilities
I've developed several custom scripts to streamline repetitive tasks:
- Project initialization templates
- Deployment automation
- System maintenance routines
- Content management for this blog
### Task Automation
For task automation, I use a combination of:
- Shell scripts for simple operations
- Guile scripts for more complex logic
- Make for build processes
- Cron for scheduled tasks
### Version Control Workflow
My Git workflow relies on:
- Branch-per-feature approach
- Interactive rebasing for clean history
- Commit message templates
- Hooks for quality checks
## Web Development Stack
As the creator of this website, my web development setup has been refined through experience.
### Local Development Server
For local development, I use:
- Live-server for static sites
- Custom Node.js servers for API development
- Docker containers for complex dependencies
### Build Tools and Processes
My build process typically involves:
- Tailwind CSS for styling
- Minimal JavaScript bundling
- Custom static site generation (as detailed in my [previous post](/content/posts/2025-01-02-from-haunt-to-custom.html))
- Automated optimization steps
### Testing Approach
For testing, I employ:
- Jest for JavaScript unit tests
- Cypress for end-to-end testing
- Manual testing across devices and browsers
- Accessibility validation tools
### Browser Tools and Extensions
Essential browser tools include:
- Firefox Developer Edition as my primary browser
- Chrome for cross-browser testing
- DevTools for performance analysis
- React and Redux DevTools
- Accessibility checkers
## Deployment Pipeline
My approach to deployment emphasizes security and reliability.
### Secure Deployment Process
As you might have noticed from my [.env.gpg file](/content/posts/2025-03-08-my-dev-environment-2025.html), I take security seriously:
- Credentials stored in GPG-encrypted files
- Separate development and production configurations
- Principle of least privilege for service accounts
- Regular security audits
### Automation Scripts
My deployment is automated through:
- Custom shell scripts for build and deploy
- Validation steps before deployment
- Rollback capabilities
- Notification systems for success/failure
### CI/CD Considerations
While not using a formal CI/CD pipeline for this personal site, I follow similar principles:
- Pre-commit checks for code quality
- Automated testing before deployment
- Consistent build environments
- Deployment approval steps
### Monitoring and Analytics
For site monitoring, I use:
- Simple analytics for privacy-respecting visitor tracking
- Uptime monitoring
- Performance metrics collection
- Error logging and alerting
## Future Improvements
My environment continues to evolve. Areas I'm exploring include:
- Further integration between Emacs and system tools
- More comprehensive test automation
- Expanded use of Guix channels for package management
- Improved mobile development workflow
## Conclusion
A development environment is deeply personal, reflecting both technical needs and individual preferences. Mine has evolved through years of experimentation, learning, and refinement.
The most important lesson I've learned is that tools should serve your workflow, not dictate it. Be willing to experiment, but also recognize when a tool is working well enough that further optimization yields diminishing returns.
I hope sharing my setup provides some inspiration for your own environment. I'd love to hear about your setup and what tools have made the biggest difference in your workflow.
What aspects of your development environment have you found most valuable? Are there tools or approaches you think I should consider? Let me know!
---
title: My Development Environment in 2025: From Editor to Deployment
date: 2025-03-08
tags: development, guix, tools, workflow, productivity, web
description: A comprehensive look at my current development setup in 2025, covering everything from my GNU Guix system foundation to editor configurations, terminal tools, and deployment processes.
---
## Introduction
The tools we use shape how we work. Over the years, my development environment has evolved alongside my technical journey through different programming languages, paradigms, and projects. This post offers a snapshot of my current setup in early 2025, detailing the choices I've made and why they work for me.
## System Foundation: ArcoLinux with GNU Guix
My journey to [GNU Guix](https://guix.gnu.org/) began through my exploration of Scheme programming, as I detailed in my [GNU Guix Journey](/content/posts/2024-07-26-gnu-guix-journey.html) post. While I initially experimented with Guix System, I've settled on a hybrid approach: running Guix as a package manager on top of ArcoLinux (an Arch-based distribution).
### Current Configuration Approach
I manage my development environment using a combination of Arch's pacman, AUR, and Guix's declarative package management. My Guix configuration lives in a Git repository, allowing me to:
- Track changes to my development environment over time
- Reproduce my development setup on new hardware
- Roll back to previous package states when needed
- Share configuration snippets with the community
### Key Packages and Tools
I maintain a hybrid package approach:
**System packages (via pacman/AUR):**
- Base system utilities and desktop environment
- Graphics drivers and hardware support
- Some GUI applications
**Development tools (via Guix):**
```scheme
;; My primary development tools managed by Guix
(specifications->manifest
'("emacs" "git" "openssh" "ripgrep" "fd" "exa" "bat"
"guile" "node" "python" "gcc-toolchain" "make"
"nss-certs" "glibc-locales"))
```
This hybrid approach gives me the best of both worlds: Arch's extensive package repository and up-to-date system packages, combined with Guix's reproducible development environments.
### Reproducibility Benefits
The reproducibility of Guix for development environments has been invaluable. I can:
- Spin up development environments with precise dependencies
- Ensure consistent behavior across machines
- Isolate project-specific dependencies using Guix environments
- Share exact environment specifications with collaborators
### Challenges and Solutions
Working with this hybrid approach isn't without challenges:
- **Challenge**: Keeping Guix packages in sync with system libraries
**Solution**: Careful management of library paths and containerization when needed
- **Challenge**: Learning curve for Guix's declarative configuration
**Solution**: Incremental adoption and community resources
- **Challenge**: Occasional conflicts between package managers
**Solution**: Clear separation of responsibilities (system vs. development tools)
## Editor Environment: Emacs
After experimenting with various editors, I've settled on Emacs as my primary development environment. Its extensibility and Scheme-based configuration language (Emacs Lisp) align well with my interests.
### Configuration Approach
I use a literate configuration with Org mode, which allows me to:
- Document my configuration choices
- Organize settings by purpose rather than file
- Selectively load components based on context
- Share readable documentation with others
### Key Extensions
My most valuable Emacs extensions include:
- **Magit**: Git interface that has transformed my version control workflow
- **LSP Mode**: Language server integration for intelligent code assistance
- **Org Mode**: For notes, task management, and literate programming
- **Projectile**: Project navigation and management
- **Company**: Completion framework
- **Consult/Vertico/Marginalia**: Modern completion UI
- **Tree-sitter**: Improved syntax highlighting and structural editing
### Language-Specific Setups
For my primary languages:
- **Scheme/Guile**: Geiser for REPL integration
- **JavaScript/TypeScript**: TypeScript LSP, prettier, eslint integration
- **Python**: Pyright LSP, black formatting
- **Web Development**: Web mode, emmet, css-mode
### Productivity Enhancements
Some productivity boosters in my setup:
- Custom keybindings for frequent operations
- Snippets for common code patterns
- Template generation for new projects
- Integration with system notifications
## Terminal and CLI Tools
While Emacs handles many tasks, I still rely heavily on terminal tools for specific workflows.
### Shell Configuration
I use Zsh with a custom configuration that provides:
- Intuitive aliases
- Helpful prompts with Git integration
- Command history management
- Directory navigation shortcuts
### Custom Scripts and Utilities
I've developed several custom scripts to streamline repetitive tasks:
- Project initialization templates
- Deployment automation
- System maintenance routines
- Content management for this blog
### Task Automation
For task automation, I use a combination of:
- Shell scripts for simple operations
- Guile scripts for more complex logic
- Make for build processes
- Cron for scheduled tasks
### Version Control Workflow
My Git workflow relies on:
- Branch-per-feature approach
- Interactive rebasing for clean history
- Commit message templates
- Hooks for quality checks
## Web Development Stack
As the creator of this website, my web development setup has been refined through experience.
### Local Development Server
For local development, I use:
- Live-server for static sites
- Custom Node.js servers for API development
- Docker containers for complex dependencies
### Build Tools and Processes
My build process typically involves:
- Tailwind CSS for styling
- Minimal JavaScript bundling
- Custom static site generation (as detailed in my [previous post](/content/posts/2025-01-02-from-haunt-to-custom.html))
- Automated optimization steps
### Testing Approach
For testing, I employ:
- Jest for JavaScript unit tests
- Cypress for end-to-end testing
- Manual testing across devices and browsers
- Accessibility validation tools
### Browser Tools and Extensions
Essential browser tools include:
- Firefox Developer Edition as my primary browser
- Chrome for cross-browser testing
- DevTools for performance analysis
- React and Redux DevTools
- Accessibility checkers
## Deployment Pipeline
My approach to deployment emphasizes security and reliability.
### Secure Deployment Process
As you might have noticed from my [.env.gpg file](/content/posts/2025-03-08-my-dev-environment-2025.html), I take security seriously:
- Credentials stored in GPG-encrypted files
- Separate development and production configurations
- Principle of least privilege for service accounts
- Regular security audits
### Automation Scripts
My deployment is automated through:
- Custom shell scripts for build and deploy
- Validation steps before deployment
- Rollback capabilities
- Notification systems for success/failure
### CI/CD Considerations
While not using a formal CI/CD pipeline for this personal site, I follow similar principles:
- Pre-commit checks for code quality
- Automated testing before deployment
- Consistent build environments
- Deployment approval steps
### Monitoring and Analytics
For site monitoring, I use:
- Simple analytics for privacy-respecting visitor tracking
- Uptime monitoring
- Performance metrics collection
- Error logging and alerting
## Future Improvements
My environment continues to evolve. Areas I'm exploring include:
- Further integration between Emacs and system tools
- More comprehensive test automation
- Expanded use of Guix channels for package management
- Improved mobile development workflow
## Conclusion
A development environment is deeply personal, reflecting both technical needs and individual preferences. Mine has evolved through years of experimentation, learning, and refinement.
The most important lesson I've learned is that tools should serve your workflow, not dictate it. Be willing to experiment, but also recognize when a tool is working well enough that further optimization yields diminishing returns.
I hope sharing my setup provides some inspiration for your own environment. I'd love to hear about your setup and what tools have made the biggest difference in your workflow.
What aspects of your development environment have you found most valuable? Are there tools or approaches you think I should consider? Let me know!

390
content/posts/2025-03-12-lessons-learned-custom-ssg.html
View File

@ -1,196 +1,196 @@
<!DOCTYPE html>
<html lang="en" class="bg-base-bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta property="og:title" content=""Lessons Learned: One Year with a Custom Static Site Generator"">
<meta property="og:description" content="">
<meta property="og:url" content="https://glenneth.orgcontent/posts/2025-03-12-lessons-learned-custom-ssg">
<title>"Lessons Learned: One Year with a Custom Static Site Generator" - Glenn Thompson</title>
<link rel="alternate" type="application/rss+xml" title="Glenn Thompson's Blog" href="/feed.xml" />
<link href="/dist/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
.prose-palenight {
--tw-prose-body: #bfc7d5;
--tw-prose-headings: #ffd580;
--tw-prose-links: #82aaff;
--tw-prose-code: #c792ea;
--tw-prose-pre-bg: #1b1e2b;
}
.prose h2 {
color: var(--tw-prose-headings);
font-family: Merriweather, serif;
font-weight: 700;
font-size: 1.5rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.prose p {
margin-bottom: 1rem;
line-height: 1.625;
}
.prose a {
color: var(--tw-prose-links);
text-decoration: none;
}
.prose a:hover {
color: #89ddff;
}
.prose code {
color: var(--tw-prose-code);
font-family: 'JetBrains Mono', monospace;
}
.prose pre {
background-color: var(--tw-prose-pre-bg);
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
margin-bottom: 1rem;
}
.prose ul, .prose ol {
margin-top: 0.5rem;
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.prose ul {
list-style-type: disc;
}
.prose ol {
list-style-type: decimal;
}
</style>
</head>
<body class="bg-base-bg text-palenight-50">
<nav class="bg-base-darker/80 backdrop-blur-sm shadow-sm border-b border-palenight-400/20 mb-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="/" class="text-accent-yellow font-serif text-xl font-bold">Glenn Thompson</a>
<div class="flex items-center gap-2 text-accent-yellow text-sm font-bold">
<span>[web, development, javascript, static-site, lessons]</span>
<span>•</span>
<time datetime="2025-03-13">March 13, 2025</time>
<span>•</span>
<span>6 min read</span>
</div>
</div>
</div>
</nav>
<main class="pt-24 pb-16 px-4">
<div class="max-w-4xl mx-auto">
<div class="content text-palenight-100 space-y-6">
<header class="mb-8">
<h1 class="text-4xl font-serif font-bold text-accent-yellow">"Lessons Learned: One Year with a Custom Static Site Generator"</h1>
<div class="flex items-center gap-4 text-palenight-300 mt-4">
<time datetime="2025-03-13">2025-03-13</time>
<span>•</span>
<span>6 min read</span>
<span>•</span>
<span>By Glenn Thompson</span>
</div>
<div class="flex flex-wrap gap-2 mt-4">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">[web</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">development</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">javascript</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">static-site</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">lessons]</span>
</div>
</header>
<article class="prose prose-palenight max-w-none">
<p>It&#39;s been just over a year since I <a href="/content/posts/2025-01-02-from-haunt-to-custom.html">transitioned from Haunt to my own custom static site generator</a> for this website. What started as an experiment to gain more control over my publishing workflow has evolved into a valuable learning experience that has shaped how I approach web development projects.</p>
<p>In this post, I&#39;ll share the key lessons I&#39;ve learned and insights I&#39;ve gained from building and maintaining my own static site generator. While the technical details are interesting, the real value has been in the broader lessons about software development, user experience, and the balance between complexity and simplicity.</p>
<h2>The Journey of Evolution</h2>
<h3>From Simple Beginnings</h3>
<p>When I first built my static site generator, it was remarkably simple - just the essential features needed to convert my writing into a website. No extra features, no complex configurations, just the basics.</p>
<p>Today, the system has evolved considerably, but not through grand design or elaborate planning. Instead, it grew organically based on real needs and actual usage. This organic growth taught me valuable lessons about software development.</p>
<h3>Lesson 1: Features Should Emerge from Usage</h3>
<p>Many of the features in my static site generator emerged from actual writing and publishing needs:</p>
<ol>
<li><p><strong>The Draft System</strong><br>When I found myself working on multiple posts simultaneously, I needed a way to keep unfinished posts separate from published content. This led to the draft system, which now helps me manage my writing workflow effectively.</p>
</li>
<li><p><strong>Tag Organization</strong><br>As my collection of posts grew, I needed a way to organize related content. The tag system emerged naturally from this need, rather than being built upfront based on assumptions about how I might want to organize content.</p>
</li>
<li><p><strong>Content Validation</strong><br>After accidentally publishing a post with a malformed date and another with a duplicate title, I added validation checks. These weren&#39;t part of the initial design but came from real-world publishing mishaps.</p>
</li>
</ol>
<h3>Lesson 2: Simplicity Drives Performance</h3>
<p>One of the most surprising lessons was how simplicity led to better performance:</p>
<ol>
<li><p><strong>Static HTML Generation</strong><br>By generating plain HTML files, the site loads quickly without any client-side processing. There&#39;s no JavaScript framework, no hydration, and no complex build process - just simple, fast HTML.</p>
</li>
<li><p><strong>Incremental Builds</strong><br>The build system only processes files that have changed. This means that even with hundreds of posts, updates are nearly instantaneous because only the necessary files are rebuilt.</p>
</li>
<li><p><strong>Minimal JavaScript</strong><br>By keeping JavaScript to a minimum and focusing on progressive enhancement, the site remains fast and accessible, even on slower connections.</p>
</li>
</ol>
<h3>Lesson 3: Developer Experience Matters</h3>
<p>A good developer experience has proven crucial for maintaining motivation to write and publish:</p>
<ol>
<li><p><strong>Smart Port Management</strong><br>After encountering port conflicts with other services, I added automatic port detection and fallback. The system now checks if a port is in use and automatically finds the next available one, eliminating the frustration of manual port configuration.</p>
</li>
<li><p><strong>Clear Error Messages</strong><br>When something goes wrong (like a failed CSS build or HTML conversion), the system provides clear, actionable error messages. This immediate feedback helps quickly identify and fix issues during the development process.</p>
</li>
<li><p><strong>Automated Validation</strong><br>The build system validates the environment before starting, checking for required directories and dependencies. These checks catch common setup issues early, making the development process smoother.</p>
</li>
</ol>
<h3>Lesson 4: Content Drives Development</h3>
<p>Perhaps the most important lesson has been letting content needs drive development:</p>
<ol>
<li><p><strong>Markdown Features</strong><br>I only added support for additional Markdown features (like tables and task lists) when I actually needed them in my writing. This prevented feature bloat and kept the system focused.</p>
</li>
<li><p><strong>RSS Feed</strong><br>The RSS feed wasn&#39;t part of the initial design but was added when the content volume grew enough to warrant it. This is a pattern I&#39;ve seen repeatedly - features are most valuable when they solve real, existing needs.</p>
</li>
<li><p><strong>Summary Generation</strong><br>The way post summaries are generated has evolved based on the actual content I write. Initially, it was a simple character count, but it now intelligently extracts meaningful previews based on content structure.</p>
</li>
</ol>
<h2>Looking Forward</h2>
<p>This project has taught me that the best software often evolves gradually in response to real needs rather than being built all at once from a grand design. It&#39;s a lesson that applies well beyond static site generators - it&#39;s about building software that serves actual needs rather than imagined ones.</p>
<p>Just today, while writing this post, I encountered and solved several development workflow issues. Instead of being frustrated by these challenges, I saw them as opportunities to improve the system. The resulting changes - like automatic port detection and better error handling - weren&#39;t part of any grand plan. They emerged naturally from real usage and made the system better in practical, meaningful ways.</p>
<p>The system isn&#39;t perfect, and it probably never will be. But it&#39;s continuously improving in ways that matter for my writing and publishing workflow. That, I&#39;ve learned, is far more valuable than technical perfection.</p>
<p>If you&#39;re considering building your own tools, remember:</p>
<ol>
<li>Start simple and let features emerge from actual usage</li>
<li>Focus on the experience - both for users and developers</li>
<li>Let real needs guide development</li>
<li>Embrace incremental improvements</li>
<li>Value simplicity - it often leads to better performance and maintainability</li>
<li>Use real-world problems as opportunities for improvement</li>
</ol>
<p>These lessons have influenced not just how I approach this project, but how I think about software development in general. Sometimes, the best insights come from the simplest projects - and often, they come right in the middle of writing about them.</p>
<h2>Looking Back and Forward</h2>
<p>Reflecting on this journey, the most valuable insight has been understanding that great software evolves naturally from real needs. Every feature in my static site generator—from the draft system to the validation checks—emerged from actual usage rather than upfront planning.</p>
<p>This experience has fundamentally changed how I approach software development. Instead of trying to build the perfect system from the start, I&#39;ve learned to:</p>
<ol>
<li>Start with the simplest solution that works</li>
<li>Let real usage guide feature development</li>
<li>Focus on maintainability over complexity</li>
<li>Prioritize the developer experience</li>
<li>Keep performance in mind at every step</li>
</ol>
<p>These principles have not only made my static site generator better but have also influenced how I approach every new project. Sometimes the best insights come from the simplest projects, and often they come right in the middle of writing about them.</p>
</article>
</div>
</div>
</main>
<footer class="bg-base-darker text-palenight-200 py-12 border-t border-palenight-400/20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<p class="text-palenight-300">&copy; 2024 Glenn Thompson. All rights reserved.</p>
<div class="webring-text mt-6">
<p class="text-palenight-300">I am part of the <a href="https://systemcrafters.net" target="_blank" class="text-accent-blue hover:text-accent-cyan">System Crafters</a> webring:</p>
</div>
<div class="craftering mt-2 flex items-center justify-center gap-4 text-accent-blue">
<a href="https://craftering.systemcrafters.net/@glenneth/previous" class="hover:text-accent-cyan">Previous</a>
<a href="https://craftering.systemcrafters.net/@glenneth" class="hover:text-accent-cyan">Random</a>
<a href="https://craftering.systemcrafters.net/@glenneth/next" class="hover:text-accent-cyan">Next</a>
</div>
<p class="text-palenight-300 mt-2">
<a href="mailto:glenn@glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenn@glenneth.org</a> |
<a href="https://glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenneth.org</a>
</p>
</div>
</div>
</footer>
</body>
<!DOCTYPE html>
<html lang="en" class="bg-base-bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta property="og:title" content=""Lessons Learned: One Year with a Custom Static Site Generator"">
<meta property="og:description" content="">
<meta property="og:url" content="https://glenneth.orgcontent/posts/2025-03-12-lessons-learned-custom-ssg">
<title>"Lessons Learned: One Year with a Custom Static Site Generator" - Glenn Thompson</title>
<link rel="alternate" type="application/rss+xml" title="Glenn Thompson's Blog" href="/feed.xml" />
<link href="/dist/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
.prose-palenight {
--tw-prose-body: #bfc7d5;
--tw-prose-headings: #ffd580;
--tw-prose-links: #82aaff;
--tw-prose-code: #c792ea;
--tw-prose-pre-bg: #1b1e2b;
}
.prose h2 {
color: var(--tw-prose-headings);
font-family: Merriweather, serif;
font-weight: 700;
font-size: 1.5rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.prose p {
margin-bottom: 1rem;
line-height: 1.625;
}
.prose a {
color: var(--tw-prose-links);
text-decoration: none;
}
.prose a:hover {
color: #89ddff;
}
.prose code {
color: var(--tw-prose-code);
font-family: 'JetBrains Mono', monospace;
}
.prose pre {
background-color: var(--tw-prose-pre-bg);
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
margin-bottom: 1rem;
}
.prose ul, .prose ol {
margin-top: 0.5rem;
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.prose ul {
list-style-type: disc;
}
.prose ol {
list-style-type: decimal;
}
</style>
</head>
<body class="bg-base-bg text-palenight-50">
<nav class="bg-base-darker/80 backdrop-blur-sm shadow-sm border-b border-palenight-400/20 mb-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="/" class="text-accent-yellow font-serif text-xl font-bold">Glenn Thompson</a>
<div class="flex items-center gap-2 text-accent-yellow text-sm font-bold">
<span>[web, development, javascript, static-site, lessons]</span>
<span>•</span>
<time datetime="2025-03-13">March 13, 2025</time>
<span>•</span>
<span>6 min read</span>
</div>
</div>
</div>
</nav>
<main class="pt-24 pb-16 px-4">
<div class="max-w-4xl mx-auto">
<div class="content text-palenight-100 space-y-6">
<header class="mb-8">
<h1 class="text-4xl font-serif font-bold text-accent-yellow">"Lessons Learned: One Year with a Custom Static Site Generator"</h1>
<div class="flex items-center gap-4 text-palenight-300 mt-4">
<time datetime="2025-03-13">2025-03-13</time>
<span>•</span>
<span>6 min read</span>
<span>•</span>
<span>By Glenn Thompson</span>
</div>
<div class="flex flex-wrap gap-2 mt-4">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">[web</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">development</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">javascript</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">static-site</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">lessons]</span>
</div>
</header>
<article class="prose prose-palenight max-w-none">
<p>It&#39;s been just over a year since I <a href="/content/posts/2025-01-02-from-haunt-to-custom.html">transitioned from Haunt to my own custom static site generator</a> for this website. What started as an experiment to gain more control over my publishing workflow has evolved into a valuable learning experience that has shaped how I approach web development projects.</p>
<p>In this post, I&#39;ll share the key lessons I&#39;ve learned and insights I&#39;ve gained from building and maintaining my own static site generator. While the technical details are interesting, the real value has been in the broader lessons about software development, user experience, and the balance between complexity and simplicity.</p>
<h2>The Journey of Evolution</h2>
<h3>From Simple Beginnings</h3>
<p>When I first built my static site generator, it was remarkably simple - just the essential features needed to convert my writing into a website. No extra features, no complex configurations, just the basics.</p>
<p>Today, the system has evolved considerably, but not through grand design or elaborate planning. Instead, it grew organically based on real needs and actual usage. This organic growth taught me valuable lessons about software development.</p>
<h3>Lesson 1: Features Should Emerge from Usage</h3>
<p>Many of the features in my static site generator emerged from actual writing and publishing needs:</p>
<ol>
<li><p><strong>The Draft System</strong><br>When I found myself working on multiple posts simultaneously, I needed a way to keep unfinished posts separate from published content. This led to the draft system, which now helps me manage my writing workflow effectively.</p>
</li>
<li><p><strong>Tag Organization</strong><br>As my collection of posts grew, I needed a way to organize related content. The tag system emerged naturally from this need, rather than being built upfront based on assumptions about how I might want to organize content.</p>
</li>
<li><p><strong>Content Validation</strong><br>After accidentally publishing a post with a malformed date and another with a duplicate title, I added validation checks. These weren&#39;t part of the initial design but came from real-world publishing mishaps.</p>
</li>
</ol>
<h3>Lesson 2: Simplicity Drives Performance</h3>
<p>One of the most surprising lessons was how simplicity led to better performance:</p>
<ol>
<li><p><strong>Static HTML Generation</strong><br>By generating plain HTML files, the site loads quickly without any client-side processing. There&#39;s no JavaScript framework, no hydration, and no complex build process - just simple, fast HTML.</p>
</li>
<li><p><strong>Incremental Builds</strong><br>The build system only processes files that have changed. This means that even with hundreds of posts, updates are nearly instantaneous because only the necessary files are rebuilt.</p>
</li>
<li><p><strong>Minimal JavaScript</strong><br>By keeping JavaScript to a minimum and focusing on progressive enhancement, the site remains fast and accessible, even on slower connections.</p>
</li>
</ol>
<h3>Lesson 3: Developer Experience Matters</h3>
<p>A good developer experience has proven crucial for maintaining motivation to write and publish:</p>
<ol>
<li><p><strong>Smart Port Management</strong><br>After encountering port conflicts with other services, I added automatic port detection and fallback. The system now checks if a port is in use and automatically finds the next available one, eliminating the frustration of manual port configuration.</p>
</li>
<li><p><strong>Clear Error Messages</strong><br>When something goes wrong (like a failed CSS build or HTML conversion), the system provides clear, actionable error messages. This immediate feedback helps quickly identify and fix issues during the development process.</p>
</li>
<li><p><strong>Automated Validation</strong><br>The build system validates the environment before starting, checking for required directories and dependencies. These checks catch common setup issues early, making the development process smoother.</p>
</li>
</ol>
<h3>Lesson 4: Content Drives Development</h3>
<p>Perhaps the most important lesson has been letting content needs drive development:</p>
<ol>
<li><p><strong>Markdown Features</strong><br>I only added support for additional Markdown features (like tables and task lists) when I actually needed them in my writing. This prevented feature bloat and kept the system focused.</p>
</li>
<li><p><strong>RSS Feed</strong><br>The RSS feed wasn&#39;t part of the initial design but was added when the content volume grew enough to warrant it. This is a pattern I&#39;ve seen repeatedly - features are most valuable when they solve real, existing needs.</p>
</li>
<li><p><strong>Summary Generation</strong><br>The way post summaries are generated has evolved based on the actual content I write. Initially, it was a simple character count, but it now intelligently extracts meaningful previews based on content structure.</p>
</li>
</ol>
<h2>Looking Forward</h2>
<p>This project has taught me that the best software often evolves gradually in response to real needs rather than being built all at once from a grand design. It&#39;s a lesson that applies well beyond static site generators - it&#39;s about building software that serves actual needs rather than imagined ones.</p>
<p>Just today, while writing this post, I encountered and solved several development workflow issues. Instead of being frustrated by these challenges, I saw them as opportunities to improve the system. The resulting changes - like automatic port detection and better error handling - weren&#39;t part of any grand plan. They emerged naturally from real usage and made the system better in practical, meaningful ways.</p>
<p>The system isn&#39;t perfect, and it probably never will be. But it&#39;s continuously improving in ways that matter for my writing and publishing workflow. That, I&#39;ve learned, is far more valuable than technical perfection.</p>
<p>If you&#39;re considering building your own tools, remember:</p>
<ol>
<li>Start simple and let features emerge from actual usage</li>
<li>Focus on the experience - both for users and developers</li>
<li>Let real needs guide development</li>
<li>Embrace incremental improvements</li>
<li>Value simplicity - it often leads to better performance and maintainability</li>
<li>Use real-world problems as opportunities for improvement</li>
</ol>
<p>These lessons have influenced not just how I approach this project, but how I think about software development in general. Sometimes, the best insights come from the simplest projects - and often, they come right in the middle of writing about them.</p>
<h2>Looking Back and Forward</h2>
<p>Reflecting on this journey, the most valuable insight has been understanding that great software evolves naturally from real needs. Every feature in my static site generator—from the draft system to the validation checks—emerged from actual usage rather than upfront planning.</p>
<p>This experience has fundamentally changed how I approach software development. Instead of trying to build the perfect system from the start, I&#39;ve learned to:</p>
<ol>
<li>Start with the simplest solution that works</li>
<li>Let real usage guide feature development</li>
<li>Focus on maintainability over complexity</li>
<li>Prioritize the developer experience</li>
<li>Keep performance in mind at every step</li>
</ol>
<p>These principles have not only made my static site generator better but have also influenced how I approach every new project. Sometimes the best insights come from the simplest projects, and often they come right in the middle of writing about them.</p>
</article>
</div>
</div>
</main>
<footer class="bg-base-darker text-palenight-200 py-12 border-t border-palenight-400/20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<p class="text-palenight-300">&copy; 2024 Glenn Thompson. All rights reserved.</p>
<div class="webring-text mt-6">
<p class="text-palenight-300">I am part of the <a href="https://systemcrafters.net" target="_blank" class="text-accent-blue hover:text-accent-cyan">System Crafters</a> webring:</p>
</div>
<div class="craftering mt-2 flex items-center justify-center gap-4 text-accent-blue">
<a href="https://craftering.systemcrafters.net/@glenneth/previous" class="hover:text-accent-cyan">Previous</a>
<a href="https://craftering.systemcrafters.net/@glenneth" class="hover:text-accent-cyan">Random</a>
<a href="https://craftering.systemcrafters.net/@glenneth/next" class="hover:text-accent-cyan">Next</a>
</div>
<p class="text-palenight-300 mt-2">
<a href="mailto:glenn@glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenn@glenneth.org</a> |
<a href="https://glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenneth.org</a>
</p>
</div>
</div>
</footer>
</body>
</html>

202
content/posts/2025-03-12-lessons-learned-custom-ssg.md
View File

@ -1,101 +1,101 @@
---
title: "Lessons Learned: One Year with a Custom Static Site Generator"
date: 2025-03-13
tags: [web, development, javascript, static-site, lessons]
---
It's been just over a year since I [transitioned from Haunt to my own custom static site generator](/content/posts/2025-01-02-from-haunt-to-custom.html) for this website. What started as an experiment to gain more control over my publishing workflow has evolved into a valuable learning experience that has shaped how I approach web development projects.
In this post, I'll share the key lessons I've learned and insights I've gained from building and maintaining my own static site generator. While the technical details are interesting, the real value has been in the broader lessons about software development, user experience, and the balance between complexity and simplicity.
## The Journey of Evolution
### From Simple Beginnings
When I first built my static site generator, it was remarkably simple - just the essential features needed to convert my writing into a website. No extra features, no complex configurations, just the basics.
Today, the system has evolved considerably, but not through grand design or elaborate planning. Instead, it grew organically based on real needs and actual usage. This organic growth taught me valuable lessons about software development.
### Lesson 1: Features Should Emerge from Usage
Many of the features in my static site generator emerged from actual writing and publishing needs:
1. **The Draft System**
When I found myself working on multiple posts simultaneously, I needed a way to keep unfinished posts separate from published content. This led to the draft system, which now helps me manage my writing workflow effectively.
2. **Tag Organization**
As my collection of posts grew, I needed a way to organize related content. The tag system emerged naturally from this need, rather than being built upfront based on assumptions about how I might want to organize content.
3. **Content Validation**
After accidentally publishing a post with a malformed date and another with a duplicate title, I added validation checks. These weren't part of the initial design but came from real-world publishing mishaps.
### Lesson 2: Simplicity Drives Performance
One of the most surprising lessons was how simplicity led to better performance:
1. **Static HTML Generation**
By generating plain HTML files, the site loads quickly without any client-side processing. There's no JavaScript framework, no hydration, and no complex build process - just simple, fast HTML.
2. **Incremental Builds**
The build system only processes files that have changed. This means that even with hundreds of posts, updates are nearly instantaneous because only the necessary files are rebuilt.
3. **Minimal JavaScript**
By keeping JavaScript to a minimum and focusing on progressive enhancement, the site remains fast and accessible, even on slower connections.
### Lesson 3: Developer Experience Matters
A good developer experience has proven crucial for maintaining motivation to write and publish:
1. **Smart Port Management**
After encountering port conflicts with other services, I added automatic port detection and fallback. The system now checks if a port is in use and automatically finds the next available one, eliminating the frustration of manual port configuration.
2. **Clear Error Messages**
When something goes wrong (like a failed CSS build or HTML conversion), the system provides clear, actionable error messages. This immediate feedback helps quickly identify and fix issues during the development process.
3. **Automated Validation**
The build system validates the environment before starting, checking for required directories and dependencies. These checks catch common setup issues early, making the development process smoother.
### Lesson 4: Content Drives Development
Perhaps the most important lesson has been letting content needs drive development:
1. **Markdown Features**
I only added support for additional Markdown features (like tables and task lists) when I actually needed them in my writing. This prevented feature bloat and kept the system focused.
2. **RSS Feed**
The RSS feed wasn't part of the initial design but was added when the content volume grew enough to warrant it. This is a pattern I've seen repeatedly - features are most valuable when they solve real, existing needs.
3. **Summary Generation**
The way post summaries are generated has evolved based on the actual content I write. Initially, it was a simple character count, but it now intelligently extracts meaningful previews based on content structure.
## Looking Forward
This project has taught me that the best software often evolves gradually in response to real needs rather than being built all at once from a grand design. It's a lesson that applies well beyond static site generators - it's about building software that serves actual needs rather than imagined ones.
Just today, while writing this post, I encountered and solved several development workflow issues. Instead of being frustrated by these challenges, I saw them as opportunities to improve the system. The resulting changes - like automatic port detection and better error handling - weren't part of any grand plan. They emerged naturally from real usage and made the system better in practical, meaningful ways.
The system isn't perfect, and it probably never will be. But it's continuously improving in ways that matter for my writing and publishing workflow. That, I've learned, is far more valuable than technical perfection.
If you're considering building your own tools, remember:
1. Start simple and let features emerge from actual usage
2. Focus on the experience - both for users and developers
3. Let real needs guide development
4. Embrace incremental improvements
5. Value simplicity - it often leads to better performance and maintainability
6. Use real-world problems as opportunities for improvement
These lessons have influenced not just how I approach this project, but how I think about software development in general. Sometimes, the best insights come from the simplest projects - and often, they come right in the middle of writing about them.
## Looking Back and Forward
Reflecting on this journey, the most valuable insight has been understanding that great software evolves naturally from real needs. Every feature in my static site generator—from the draft system to the validation checks—emerged from actual usage rather than upfront planning.
This experience has fundamentally changed how I approach software development. Instead of trying to build the perfect system from the start, I've learned to:
1. Start with the simplest solution that works
2. Let real usage guide feature development
3. Focus on maintainability over complexity
4. Prioritize the developer experience
5. Keep performance in mind at every step
These principles have not only made my static site generator better but have also influenced how I approach every new project. Sometimes the best insights come from the simplest projects, and often they come right in the middle of writing about them.
---
title: "Lessons Learned: One Year with a Custom Static Site Generator"
date: 2025-03-13
tags: [web, development, javascript, static-site, lessons]
---
It's been just over a year since I [transitioned from Haunt to my own custom static site generator](/content/posts/2025-01-02-from-haunt-to-custom.html) for this website. What started as an experiment to gain more control over my publishing workflow has evolved into a valuable learning experience that has shaped how I approach web development projects.
In this post, I'll share the key lessons I've learned and insights I've gained from building and maintaining my own static site generator. While the technical details are interesting, the real value has been in the broader lessons about software development, user experience, and the balance between complexity and simplicity.
## The Journey of Evolution
### From Simple Beginnings
When I first built my static site generator, it was remarkably simple - just the essential features needed to convert my writing into a website. No extra features, no complex configurations, just the basics.
Today, the system has evolved considerably, but not through grand design or elaborate planning. Instead, it grew organically based on real needs and actual usage. This organic growth taught me valuable lessons about software development.
### Lesson 1: Features Should Emerge from Usage
Many of the features in my static site generator emerged from actual writing and publishing needs:
1. **The Draft System**
When I found myself working on multiple posts simultaneously, I needed a way to keep unfinished posts separate from published content. This led to the draft system, which now helps me manage my writing workflow effectively.
2. **Tag Organization**
As my collection of posts grew, I needed a way to organize related content. The tag system emerged naturally from this need, rather than being built upfront based on assumptions about how I might want to organize content.
3. **Content Validation**
After accidentally publishing a post with a malformed date and another with a duplicate title, I added validation checks. These weren't part of the initial design but came from real-world publishing mishaps.
### Lesson 2: Simplicity Drives Performance
One of the most surprising lessons was how simplicity led to better performance:
1. **Static HTML Generation**
By generating plain HTML files, the site loads quickly without any client-side processing. There's no JavaScript framework, no hydration, and no complex build process - just simple, fast HTML.
2. **Incremental Builds**
The build system only processes files that have changed. This means that even with hundreds of posts, updates are nearly instantaneous because only the necessary files are rebuilt.
3. **Minimal JavaScript**
By keeping JavaScript to a minimum and focusing on progressive enhancement, the site remains fast and accessible, even on slower connections.
### Lesson 3: Developer Experience Matters
A good developer experience has proven crucial for maintaining motivation to write and publish:
1. **Smart Port Management**
After encountering port conflicts with other services, I added automatic port detection and fallback. The system now checks if a port is in use and automatically finds the next available one, eliminating the frustration of manual port configuration.
2. **Clear Error Messages**
When something goes wrong (like a failed CSS build or HTML conversion), the system provides clear, actionable error messages. This immediate feedback helps quickly identify and fix issues during the development process.
3. **Automated Validation**
The build system validates the environment before starting, checking for required directories and dependencies. These checks catch common setup issues early, making the development process smoother.
### Lesson 4: Content Drives Development
Perhaps the most important lesson has been letting content needs drive development:
1. **Markdown Features**
I only added support for additional Markdown features (like tables and task lists) when I actually needed them in my writing. This prevented feature bloat and kept the system focused.
2. **RSS Feed**
The RSS feed wasn't part of the initial design but was added when the content volume grew enough to warrant it. This is a pattern I've seen repeatedly - features are most valuable when they solve real, existing needs.
3. **Summary Generation**
The way post summaries are generated has evolved based on the actual content I write. Initially, it was a simple character count, but it now intelligently extracts meaningful previews based on content structure.
## Looking Forward
This project has taught me that the best software often evolves gradually in response to real needs rather than being built all at once from a grand design. It's a lesson that applies well beyond static site generators - it's about building software that serves actual needs rather than imagined ones.
Just today, while writing this post, I encountered and solved several development workflow issues. Instead of being frustrated by these challenges, I saw them as opportunities to improve the system. The resulting changes - like automatic port detection and better error handling - weren't part of any grand plan. They emerged naturally from real usage and made the system better in practical, meaningful ways.
The system isn't perfect, and it probably never will be. But it's continuously improving in ways that matter for my writing and publishing workflow. That, I've learned, is far more valuable than technical perfection.
If you're considering building your own tools, remember:
1. Start simple and let features emerge from actual usage
2. Focus on the experience - both for users and developers
3. Let real needs guide development
4. Embrace incremental improvements
5. Value simplicity - it often leads to better performance and maintainability
6. Use real-world problems as opportunities for improvement
These lessons have influenced not just how I approach this project, but how I think about software development in general. Sometimes, the best insights come from the simplest projects - and often, they come right in the middle of writing about them.
## Looking Back and Forward
Reflecting on this journey, the most valuable insight has been understanding that great software evolves naturally from real needs. Every feature in my static site generator—from the draft system to the validation checks—emerged from actual usage rather than upfront planning.
This experience has fundamentally changed how I approach software development. Instead of trying to build the perfect system from the start, I've learned to:
1. Start with the simplest solution that works
2. Let real usage guide feature development
3. Focus on maintainability over complexity
4. Prioritize the developer experience
5. Keep performance in mind at every step
These principles have not only made my static site generator better but have also influenced how I approach every new project. Sometimes the best insights come from the simplest projects, and often they come right in the middle of writing about them.

296
content/posts/2025-04-04-one-year-of-craftering.html
View File

@ -1,149 +1,149 @@
<!DOCTYPE html>
<html lang="en" class="bg-base-bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta property="og:title" content=""One Year of Craftering: Building Connections in the System Crafters Community"">
<meta property="og:description" content="">
<meta property="og:url" content="https://glenneth.orgcontent/posts/2025-04-04-one-year-of-craftering">
<title>"One Year of Craftering: Building Connections in the System Crafters Community" - Glenn Thompson</title>
<link rel="alternate" type="application/rss+xml" title="Glenn Thompson's Blog" href="/feed.xml" />
<link href="/dist/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
.prose-palenight {
--tw-prose-body: #bfc7d5;
--tw-prose-headings: #ffd580;
--tw-prose-links: #82aaff;
--tw-prose-code: #c792ea;
--tw-prose-pre-bg: #1b1e2b;
}
.prose h2 {
color: var(--tw-prose-headings);
font-family: Merriweather, serif;
font-weight: 700;
font-size: 1.5rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.prose p {
margin-bottom: 1rem;
line-height: 1.625;
}
.prose a {
color: var(--tw-prose-links);
text-decoration: none;
}
.prose a:hover {
color: #89ddff;
}
.prose code {
color: var(--tw-prose-code);
font-family: 'JetBrains Mono', monospace;
}
.prose pre {
background-color: var(--tw-prose-pre-bg);
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
margin-bottom: 1rem;
}
.prose ul, .prose ol {
margin-top: 0.5rem;
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.prose ul {
list-style-type: disc;
}
.prose ol {
list-style-type: decimal;
}
</style>
</head>
<body class="bg-base-bg text-palenight-50">
<nav class="bg-base-darker/80 backdrop-blur-sm shadow-sm border-b border-palenight-400/20 mb-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="/" class="text-accent-yellow font-serif text-xl font-bold">Glenn Thompson</a>
<div class="flex items-center gap-2 text-accent-yellow text-sm font-bold">
<span>[community, webring, systemcrafters, reflection]</span>
<span>•</span>
<time datetime="2025-04-02">April 2, 2025</time>
<span>•</span>
<span>3 min read</span>
</div>
</div>
</div>
</nav>
<main class="pt-24 pb-16 px-4">
<div class="max-w-4xl mx-auto">
<div class="content text-palenight-100 space-y-6">
<header class="mb-8">
<h1 class="text-4xl font-serif font-bold text-accent-yellow">"One Year of Craftering: Building Connections in the System Crafters Community"</h1>
<div class="flex items-center gap-4 text-palenight-300 mt-4">
<time datetime="2025-04-02">2025-04-02</time>
<span>•</span>
<span>3 min read</span>
<span>•</span>
<span>By Glenn Thompson</span>
</div>
<div class="flex flex-wrap gap-2 mt-4">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">[community</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">webring</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">systemcrafters</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">reflection]</span>
</div>
</header>
<article class="prose prose-palenight max-w-none">
<p>Next Thursday, 03-APR-2025, marks the first anniversary of the <a href="https://craftering.shom.dev/">Craftering webring</a>, a vibrant community initiative started by <a href="https://shom.dev">shom</a> that connects personal websites and blogs within the System Crafters community. As one of the members of this webring, I&#39;ve had the privilege of being part of this journey from its early days.</p>
<h2>My First Pull Request</h2>
<p>Joining Craftering was actually my first experience with the pull request workflow on Codeberg. As someone new to contributing to open source projects, I was initially intimidated by the process. However, shom took the time to walk me through each step, providing clear guidance and encouragement. This hands-on experience with git and PR workflows proved invaluable, making the technical aspects of contribution much less daunting.</p>
<p>As shom <a href="https://shom.dev/posts/20250401_how-i-accidentally-got-better-at-self-hosting-and-foss-contributing">recently reflected</a>, this kind of supportive onboarding was an intentional part of Craftering&#39;s design - creating opportunities for community members to learn and grow together through practical experience.</p>
<h2>The Power of Connected Personal Spaces</h2>
<p>The Craftering webring represents more than just a collection of links - it&#39;s a testament to the enduring value of personal websites and the importance of community-driven content. In an era dominated by social media platforms and algorithmic feeds, webrings offer a refreshing return to the web&#39;s roots: direct connections between individually crafted spaces.</p>
<h2>Community Impact and Discoveries</h2>
<p>Being part of the Craftering webring has enriched my own blogging experience in several ways:</p>
<ol>
<li><p><strong>Diverse Perspectives</strong>: Through the webring, I&#39;ve discovered fellow creators sharing their experiences with everything from Emacs configurations to system design principles.</p>
</li>
<li><p><strong>Technical Cross-Pollination</strong>: Reading other members&#39; blogs has introduced me to new tools and approaches. For instance, my recent <a href="/content/posts/2025-01-02-from-haunt-to-custom.html">transition to a custom static site generator</a> was partly inspired by discussions and posts from the community.</p>
</li>
<li><p><strong>Consistent Motivation</strong>: Knowing that my blog is part of an interconnected community has encouraged more regular writing and sharing.</p>
</li>
</ol>
<h2>Technical Integration and RSS</h2>
<p>One of the strengths of the Craftering webring is its embrace of RSS feeds, making it easy to follow updates from all community members. The webring&#39;s <a href="https://craftering.shom.dev/Craftering.opml">OPML file</a> allows for quick subscription to all member feeds, creating a genuine sense of connection through content updates.</p>
<h2>Looking Forward</h2>
<p>As we celebrate this first year, it&#39;s exciting to see how the webring has grown and evolved. From the initial members to our current diverse group, each addition has brought new perspectives and valuable contributions to our community.</p>
<p>The success of Craftering demonstrates that the spirit of the early web - decentralized, personal, and community-driven - is very much alive. It shows that there&#39;s still tremendous value in maintaining personal spaces on the web, connected through shared interests and mutual respect for individual expression.</p>
<h3>Join the Ring</h3>
<p>If you maintain a personal website and are interested in connecting with like-minded individuals, consider <a href="https://codeberg.org/SystemCrafters/craftering">joining the Craftering webring</a>. The process is straightforward, and you&#39;ll be joining a supportive community of creators and thinkers who value personal expression and technical craftsmanship.</p>
<p>Here&#39;s to another year of crafting, sharing, and building connections in our corner of the web!</p>
</article>
</div>
</div>
</main>
<footer class="bg-base-darker text-palenight-200 py-12 border-t border-palenight-400/20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<p class="text-palenight-300">&copy; 2024 Glenn Thompson. All rights reserved.</p>
<div class="webring-text mt-6">
<p class="text-palenight-300">I am part of the <a href="https://systemcrafters.net" target="_blank" class="text-accent-blue hover:text-accent-cyan">System Crafters</a> webring:</p>
</div>
<div class="craftering mt-2 flex items-center justify-center gap-4 text-accent-blue">
<a href="https://craftering.systemcrafters.net/@glenneth/previous" class="hover:text-accent-cyan">Previous</a>
<a href="https://craftering.systemcrafters.net/@glenneth" class="hover:text-accent-cyan">Random</a>
<a href="https://craftering.systemcrafters.net/@glenneth/next" class="hover:text-accent-cyan">Next</a>
</div>
<p class="text-palenight-300 mt-2">
<a href="mailto:glenn@glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenn@glenneth.org</a> |
<a href="https://glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenneth.org</a>
</p>
</div>
</div>
</footer>
</body>
<!DOCTYPE html>
<html lang="en" class="bg-base-bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta property="og:title" content=""One Year of Craftering: Building Connections in the System Crafters Community"">
<meta property="og:description" content="">
<meta property="og:url" content="https://glenneth.orgcontent/posts/2025-04-04-one-year-of-craftering">
<title>"One Year of Craftering: Building Connections in the System Crafters Community" - Glenn Thompson</title>
<link rel="alternate" type="application/rss+xml" title="Glenn Thompson's Blog" href="/feed.xml" />
<link href="/dist/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
.prose-palenight {
--tw-prose-body: #bfc7d5;
--tw-prose-headings: #ffd580;
--tw-prose-links: #82aaff;
--tw-prose-code: #c792ea;
--tw-prose-pre-bg: #1b1e2b;
}
.prose h2 {
color: var(--tw-prose-headings);
font-family: Merriweather, serif;
font-weight: 700;
font-size: 1.5rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.prose p {
margin-bottom: 1rem;
line-height: 1.625;
}
.prose a {
color: var(--tw-prose-links);
text-decoration: none;
}
.prose a:hover {
color: #89ddff;
}
.prose code {
color: var(--tw-prose-code);
font-family: 'JetBrains Mono', monospace;
}
.prose pre {
background-color: var(--tw-prose-pre-bg);
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
margin-bottom: 1rem;
}
.prose ul, .prose ol {
margin-top: 0.5rem;
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.prose ul {
list-style-type: disc;
}
.prose ol {
list-style-type: decimal;
}
</style>
</head>
<body class="bg-base-bg text-palenight-50">
<nav class="bg-base-darker/80 backdrop-blur-sm shadow-sm border-b border-palenight-400/20 mb-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="/" class="text-accent-yellow font-serif text-xl font-bold">Glenn Thompson</a>
<div class="flex items-center gap-2 text-accent-yellow text-sm font-bold">
<span>[community, webring, systemcrafters, reflection]</span>
<span>•</span>
<time datetime="2025-04-02">April 2, 2025</time>
<span>•</span>
<span>3 min read</span>
</div>
</div>
</div>
</nav>
<main class="pt-24 pb-16 px-4">
<div class="max-w-4xl mx-auto">
<div class="content text-palenight-100 space-y-6">
<header class="mb-8">
<h1 class="text-4xl font-serif font-bold text-accent-yellow">"One Year of Craftering: Building Connections in the System Crafters Community"</h1>
<div class="flex items-center gap-4 text-palenight-300 mt-4">
<time datetime="2025-04-02">2025-04-02</time>
<span>•</span>
<span>3 min read</span>
<span>•</span>
<span>By Glenn Thompson</span>
</div>
<div class="flex flex-wrap gap-2 mt-4">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">[community</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">webring</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">systemcrafters</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">reflection]</span>
</div>
</header>
<article class="prose prose-palenight max-w-none">
<p>Next Thursday, 03-APR-2025, marks the first anniversary of the <a href="https://craftering.shom.dev/">Craftering webring</a>, a vibrant community initiative started by <a href="https://shom.dev">shom</a> that connects personal websites and blogs within the System Crafters community. As one of the members of this webring, I&#39;ve had the privilege of being part of this journey from its early days.</p>
<h2>My First Pull Request</h2>
<p>Joining Craftering was actually my first experience with the pull request workflow on Codeberg. As someone new to contributing to open source projects, I was initially intimidated by the process. However, shom took the time to walk me through each step, providing clear guidance and encouragement. This hands-on experience with git and PR workflows proved invaluable, making the technical aspects of contribution much less daunting.</p>
<p>As shom <a href="https://shom.dev/posts/20250401_how-i-accidentally-got-better-at-self-hosting-and-foss-contributing">recently reflected</a>, this kind of supportive onboarding was an intentional part of Craftering&#39;s design - creating opportunities for community members to learn and grow together through practical experience.</p>
<h2>The Power of Connected Personal Spaces</h2>
<p>The Craftering webring represents more than just a collection of links - it&#39;s a testament to the enduring value of personal websites and the importance of community-driven content. In an era dominated by social media platforms and algorithmic feeds, webrings offer a refreshing return to the web&#39;s roots: direct connections between individually crafted spaces.</p>
<h2>Community Impact and Discoveries</h2>
<p>Being part of the Craftering webring has enriched my own blogging experience in several ways:</p>
<ol>
<li><p><strong>Diverse Perspectives</strong>: Through the webring, I&#39;ve discovered fellow creators sharing their experiences with everything from Emacs configurations to system design principles.</p>
</li>
<li><p><strong>Technical Cross-Pollination</strong>: Reading other members&#39; blogs has introduced me to new tools and approaches. For instance, my recent <a href="/content/posts/2025-01-02-from-haunt-to-custom.html">transition to a custom static site generator</a> was partly inspired by discussions and posts from the community.</p>
</li>
<li><p><strong>Consistent Motivation</strong>: Knowing that my blog is part of an interconnected community has encouraged more regular writing and sharing.</p>
</li>
</ol>
<h2>Technical Integration and RSS</h2>
<p>One of the strengths of the Craftering webring is its embrace of RSS feeds, making it easy to follow updates from all community members. The webring&#39;s <a href="https://craftering.shom.dev/Craftering.opml">OPML file</a> allows for quick subscription to all member feeds, creating a genuine sense of connection through content updates.</p>
<h2>Looking Forward</h2>
<p>As we celebrate this first year, it&#39;s exciting to see how the webring has grown and evolved. From the initial members to our current diverse group, each addition has brought new perspectives and valuable contributions to our community.</p>
<p>The success of Craftering demonstrates that the spirit of the early web - decentralized, personal, and community-driven - is very much alive. It shows that there&#39;s still tremendous value in maintaining personal spaces on the web, connected through shared interests and mutual respect for individual expression.</p>
<h3>Join the Ring</h3>
<p>If you maintain a personal website and are interested in connecting with like-minded individuals, consider <a href="https://codeberg.org/SystemCrafters/craftering">joining the Craftering webring</a>. The process is straightforward, and you&#39;ll be joining a supportive community of creators and thinkers who value personal expression and technical craftsmanship.</p>
<p>Here&#39;s to another year of crafting, sharing, and building connections in our corner of the web!</p>
</article>
</div>
</div>
</main>
<footer class="bg-base-darker text-palenight-200 py-12 border-t border-palenight-400/20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<p class="text-palenight-300">&copy; 2024 Glenn Thompson. All rights reserved.</p>
<div class="webring-text mt-6">
<p class="text-palenight-300">I am part of the <a href="https://systemcrafters.net" target="_blank" class="text-accent-blue hover:text-accent-cyan">System Crafters</a> webring:</p>
</div>
<div class="craftering mt-2 flex items-center justify-center gap-4 text-accent-blue">
<a href="https://craftering.systemcrafters.net/@glenneth/previous" class="hover:text-accent-cyan">Previous</a>
<a href="https://craftering.systemcrafters.net/@glenneth" class="hover:text-accent-cyan">Random</a>
<a href="https://craftering.systemcrafters.net/@glenneth/next" class="hover:text-accent-cyan">Next</a>
</div>
<p class="text-palenight-300 mt-2">
<a href="mailto:glenn@glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenn@glenneth.org</a> |
<a href="https://glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenneth.org</a>
</p>
</div>
</div>
</footer>
</body>
</html>

86
content/posts/2025-04-04-one-year-of-craftering.md
View File

@ -1,43 +1,43 @@
---
title: "One Year of Craftering: Building Connections in the System Crafters Community"
date: 2025-04-02
tags: [community, webring, systemcrafters, reflection]
---
Next Thursday, 03-APR-2025, marks the first anniversary of the [Craftering webring](https://craftering.shom.dev/), a vibrant community initiative started by [shom](https://shom.dev) that connects personal websites and blogs within the System Crafters community. As one of the members of this webring, I've had the privilege of being part of this journey from its early days.
## My First Pull Request
Joining Craftering was actually my first experience with the pull request workflow on Codeberg. As someone new to contributing to open source projects, I was initially intimidated by the process. However, shom took the time to walk me through each step, providing clear guidance and encouragement. This hands-on experience with git and PR workflows proved invaluable, making the technical aspects of contribution much less daunting.
As shom [recently reflected](https://shom.dev/posts/20250401_how-i-accidentally-got-better-at-self-hosting-and-foss-contributing), this kind of supportive onboarding was an intentional part of Craftering's design - creating opportunities for community members to learn and grow together through practical experience.
## The Power of Connected Personal Spaces
The Craftering webring represents more than just a collection of links - it's a testament to the enduring value of personal websites and the importance of community-driven content. In an era dominated by social media platforms and algorithmic feeds, webrings offer a refreshing return to the web's roots: direct connections between individually crafted spaces.
## Community Impact and Discoveries
Being part of the Craftering webring has enriched my own blogging experience in several ways:
1. **Diverse Perspectives**: Through the webring, I've discovered fellow creators sharing their experiences with everything from Emacs configurations to system design principles.
2. **Technical Cross-Pollination**: Reading other members' blogs has introduced me to new tools and approaches. For instance, my recent [transition to a custom static site generator](/content/posts/2025-01-02-from-haunt-to-custom.html) was partly inspired by discussions and posts from the community.
3. **Consistent Motivation**: Knowing that my blog is part of an interconnected community has encouraged more regular writing and sharing.
## Technical Integration and RSS
One of the strengths of the Craftering webring is its embrace of RSS feeds, making it easy to follow updates from all community members. The webring's [OPML file](https://craftering.shom.dev/Craftering.opml) allows for quick subscription to all member feeds, creating a genuine sense of connection through content updates.
## Looking Forward
As we celebrate this first year, it's exciting to see how the webring has grown and evolved. From the initial members to our current diverse group, each addition has brought new perspectives and valuable contributions to our community.
The success of Craftering demonstrates that the spirit of the early web - decentralized, personal, and community-driven - is very much alive. It shows that there's still tremendous value in maintaining personal spaces on the web, connected through shared interests and mutual respect for individual expression.
### Join the Ring
If you maintain a personal website and are interested in connecting with like-minded individuals, consider [joining the Craftering webring](https://codeberg.org/SystemCrafters/craftering). The process is straightforward, and you'll be joining a supportive community of creators and thinkers who value personal expression and technical craftsmanship.
Here's to another year of crafting, sharing, and building connections in our corner of the web!
---
title: "One Year of Craftering: Building Connections in the System Crafters Community"
date: 2025-04-02
tags: [community, webring, systemcrafters, reflection]
---
Next Thursday, 03-APR-2025, marks the first anniversary of the [Craftering webring](https://craftering.shom.dev/), a vibrant community initiative started by [shom](https://shom.dev) that connects personal websites and blogs within the System Crafters community. As one of the members of this webring, I've had the privilege of being part of this journey from its early days.
## My First Pull Request
Joining Craftering was actually my first experience with the pull request workflow on Codeberg. As someone new to contributing to open source projects, I was initially intimidated by the process. However, shom took the time to walk me through each step, providing clear guidance and encouragement. This hands-on experience with git and PR workflows proved invaluable, making the technical aspects of contribution much less daunting.
As shom [recently reflected](https://shom.dev/posts/20250401_how-i-accidentally-got-better-at-self-hosting-and-foss-contributing), this kind of supportive onboarding was an intentional part of Craftering's design - creating opportunities for community members to learn and grow together through practical experience.
## The Power of Connected Personal Spaces
The Craftering webring represents more than just a collection of links - it's a testament to the enduring value of personal websites and the importance of community-driven content. In an era dominated by social media platforms and algorithmic feeds, webrings offer a refreshing return to the web's roots: direct connections between individually crafted spaces.
## Community Impact and Discoveries
Being part of the Craftering webring has enriched my own blogging experience in several ways:
1. **Diverse Perspectives**: Through the webring, I've discovered fellow creators sharing their experiences with everything from Emacs configurations to system design principles.
2. **Technical Cross-Pollination**: Reading other members' blogs has introduced me to new tools and approaches. For instance, my recent [transition to a custom static site generator](/content/posts/2025-01-02-from-haunt-to-custom.html) was partly inspired by discussions and posts from the community.
3. **Consistent Motivation**: Knowing that my blog is part of an interconnected community has encouraged more regular writing and sharing.
## Technical Integration and RSS
One of the strengths of the Craftering webring is its embrace of RSS feeds, making it easy to follow updates from all community members. The webring's [OPML file](https://craftering.shom.dev/Craftering.opml) allows for quick subscription to all member feeds, creating a genuine sense of connection through content updates.
## Looking Forward
As we celebrate this first year, it's exciting to see how the webring has grown and evolved. From the initial members to our current diverse group, each addition has brought new perspectives and valuable contributions to our community.
The success of Craftering demonstrates that the spirit of the early web - decentralized, personal, and community-driven - is very much alive. It shows that there's still tremendous value in maintaining personal spaces on the web, connected through shared interests and mutual respect for individual expression.
### Join the Ring
If you maintain a personal website and are interested in connecting with like-minded individuals, consider [joining the Craftering webring](https://codeberg.org/SystemCrafters/craftering). The process is straightforward, and you'll be joining a supportive community of creators and thinkers who value personal expression and technical craftsmanship.
Here's to another year of crafting, sharing, and building connections in our corner of the web!

234
deploy.sh
View File

@ -1,117 +1,117 @@
#!/bin/bash
# Function to show usage
show_usage() {
echo "Usage: $0 [--ftp]"
echo "Options:"
echo " --ftp Upload to FTP server (requires .env.gpg file with encrypted credentials)"
exit 1
}
# Function to decrypt credentials
decrypt_credentials() {
if [ ! -f ".env.gpg" ]; then
echo "Error: .env.gpg file not found!"
exit 1
fi
# Create a temporary file for decrypted credentials
TEMP_ENV=$(mktemp)
# Decrypt the credentials
if ! gpg --quiet --decrypt .env.gpg > "$TEMP_ENV"; then
echo "Error: Failed to decrypt credentials!"
rm "$TEMP_ENV"
exit 1
fi
# Source the decrypted credentials
source "$TEMP_ENV"
# Securely remove the temporary file
rm "$TEMP_ENV"
}
# Parse command line arguments
USE_FTP=false
while [[ "$#" -gt 0 ]]; do
case $1 in
--ftp) USE_FTP=true ;;
-h|--help) show_usage ;;
*) echo "Unknown parameter: $1"; show_usage ;;
esac
shift
done
# Ensure deploy directory structure exists
mkdir -p deploy/content/posts
# Temporarily save the posts
if [ -d "deploy/content/posts" ]; then
mkdir -p .tmp_posts
mv deploy/content/posts/* .tmp_posts/ 2>/dev/null || true
fi
# Clean up deploy directory
rm -rf deploy/*
# Restore the directory structure
mkdir -p deploy/content/posts
# Restore the posts if they existed
if [ -d ".tmp_posts" ]; then
mv .tmp_posts/* deploy/content/posts/ 2>/dev/null || true
rm -rf .tmp_posts
fi
# Run build process to ensure latest CSS
echo "Building CSS..."
npm run build
echo "Generating RSS feed..."
node src/js/generate-rss.js
# Copy necessary files
echo "Copying files..."
cp index.html deploy/
cp favicon.svg deploy/
cp -r dist deploy/
cp -r src/js deploy/js
cp feed.xml deploy/
# Create deployment package
echo "Creating zip archive..."
cd deploy && zip -r ../website-deploy.zip ./*
cd ..
echo "Deployment package created successfully!"
echo "Your files are ready in the 'website-deploy.zip' file"
echo "You can also find individual files in the 'deploy' directory"
# FTP Upload if requested
if [ "$USE_FTP" = true ]; then
# Decrypt and load credentials
decrypt_credentials
if [ -z "$FTP_HOST" ] || [ -z "$FTP_USER" ] || [ -z "$FTP_PASS" ] || [ -z "$FTP_DIR" ]; then
echo "Error: Missing FTP credentials!"
exit 1
fi
# Check if lftp is installed
if ! command -v lftp &> /dev/null; then
echo "Error: lftp is not installed. Please install it first."
exit 1
fi
echo "Starting FTP upload..."
lftp -c "
set ssl:verify-certificate no;
open -u $FTP_USER,$FTP_PASS $FTP_HOST;
lcd deploy;
cd $FTP_DIR;
mirror -R --parallel=4 --verbose;
bye"
echo "FTP upload completed!"
fi
#!/bin/bash
# Function to show usage
show_usage() {
echo "Usage: $0 [--ftp]"
echo "Options:"
echo " --ftp Upload to FTP server (requires .env.gpg file with encrypted credentials)"
exit 1
}
# Function to decrypt credentials
decrypt_credentials() {
if [ ! -f ".env.gpg" ]; then
echo "Error: .env.gpg file not found!"
exit 1
fi
# Create a temporary file for decrypted credentials
TEMP_ENV=$(mktemp)
# Decrypt the credentials
if ! gpg --quiet --decrypt .env.gpg > "$TEMP_ENV"; then
echo "Error: Failed to decrypt credentials!"
rm "$TEMP_ENV"
exit 1
fi
# Source the decrypted credentials
source "$TEMP_ENV"
# Securely remove the temporary file
rm "$TEMP_ENV"
}
# Parse command line arguments
USE_FTP=false
while [[ "$#" -gt 0 ]]; do
case $1 in
--ftp) USE_FTP=true ;;
-h|--help) show_usage ;;
*) echo "Unknown parameter: $1"; show_usage ;;
esac
shift
done
# Ensure deploy directory structure exists
mkdir -p deploy/content/posts
# Temporarily save the posts
if [ -d "deploy/content/posts" ]; then
mkdir -p .tmp_posts
mv deploy/content/posts/* .tmp_posts/ 2>/dev/null || true
fi
# Clean up deploy directory
rm -rf deploy/*
# Restore the directory structure
mkdir -p deploy/content/posts
# Restore the posts if they existed
if [ -d ".tmp_posts" ]; then
mv .tmp_posts/* deploy/content/posts/ 2>/dev/null || true
rm -rf .tmp_posts
fi
# Run build process to ensure latest CSS
echo "Building CSS..."
npm run build
echo "Generating RSS feed..."
node src/js/generate-rss.js
# Copy necessary files
echo "Copying files..."
cp index.html deploy/
cp favicon.svg deploy/
cp -r dist deploy/
cp -r src/js deploy/js
cp feed.xml deploy/
# Create deployment package
echo "Creating zip archive..."
cd deploy && zip -r ../website-deploy.zip ./*
cd ..
echo "Deployment package created successfully!"
echo "Your files are ready in the 'website-deploy.zip' file"
echo "You can also find individual files in the 'deploy' directory"
# FTP Upload if requested
if [ "$USE_FTP" = true ]; then
# Decrypt and load credentials
decrypt_credentials
if [ -z "$FTP_HOST" ] || [ -z "$FTP_USER" ] || [ -z "$FTP_PASS" ] || [ -z "$FTP_DIR" ]; then
echo "Error: Missing FTP credentials!"
exit 1
fi
# Check if lftp is installed
if ! command -v lftp &> /dev/null; then
echo "Error: lftp is not installed. Please install it first."
exit 1
fi
echo "Starting FTP upload..."
lftp -c "
set ssl:verify-certificate no;
open -u $FTP_USER,$FTP_PASS $FTP_HOST;
lcd deploy;
cd $FTP_DIR;
mirror -R --parallel=4 --verbose;
bye"
echo "FTP upload completed!"
fi

292
deploy/content/posts/2024-04-08-glove80-review.html
View File

@ -1,147 +1,147 @@
<!DOCTYPE html>
<html lang="en" class="bg-base-bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta property="og:title" content=""Aesthetic Meets Ergonomics: My Deep Dive into the Glove80 Keyboard"">
<meta property="og:description" content="">
<meta property="og:url" content="https://glenneth.orgcontent/posts/2024-04-08-glove80-review">
<title>"Aesthetic Meets Ergonomics: My Deep Dive into the Glove80 Keyboard" - Glenn Thompson</title>
<link rel="alternate" type="application/rss+xml" title="Glenn Thompson's Blog" href="/feed.xml" />
<link href="../../dist/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
.prose-palenight {
--tw-prose-body: #bfc7d5;
--tw-prose-headings: #ffd580;
--tw-prose-links: #82aaff;
--tw-prose-code: #c792ea;
--tw-prose-pre-bg: #1b1e2b;
}
.prose h2 {
color: var(--tw-prose-headings);
font-family: Merriweather, serif;
font-weight: 700;
font-size: 1.5rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.prose p {
margin-bottom: 1rem;
line-height: 1.625;
}
.prose a {
color: var(--tw-prose-links);
text-decoration: none;
}
.prose a:hover {
color: #89ddff;
}
.prose code {
color: var(--tw-prose-code);
font-family: 'JetBrains Mono', monospace;
}
.prose pre {
background-color: var(--tw-prose-pre-bg);
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
margin-bottom: 1rem;
}
.prose ul, .prose ol {
margin-top: 0.5rem;
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.prose ul {
list-style-type: disc;
}
.prose ol {
list-style-type: decimal;
}
</style>
</head>
<body class="bg-base-bg text-palenight-50">
<nav class="bg-base-darker/80 backdrop-blur-sm shadow-sm border-b border-palenight-400/20 mb-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="/" class="text-accent-yellow font-serif text-xl font-bold">Glenn Thompson</a>
<div class="flex items-center gap-2 text-accent-yellow text-sm font-bold">
<span>["personal", "tech", "keyboards", "glove80"]</span>
<span>•</span>
<time datetime=""2024-04-08 16:50"">Invalid Date</time>
<span>•</span>
<span>5 min read</span>
</div>
</div>
</div>
</nav>
<main class="pt-24 pb-16 px-4">
<div class="max-w-4xl mx-auto">
<div class="content text-palenight-100 space-y-6">
<header class="mb-8">
<h1 class="text-4xl font-serif font-bold text-accent-yellow">"Aesthetic Meets Ergonomics: My Deep Dive into the Glove80 Keyboard"</h1>
<div class="flex items-center gap-4 text-palenight-300 mt-4">
<time datetime=""2024-04-08 16:50"">"2024-04-08 16:50"</time>
<span>•</span>
<span>5 min read</span>
<span>•</span>
<span>By "Glenn Thompson"</span>
</div>
<div class="flex flex-wrap gap-2 mt-4">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">["personal"</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">"tech"</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">"keyboards"</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">"glove80"]</span>
</div>
</header>
<article class="prose prose-palenight max-w-none">
<h2>In the quest for the ultimate ergonomic keyboard, aesthetics often take a backseat to functionality. Yet, when I first laid eyes on the Glove80, I was struck by its elegant design—a refreshing departure from the utilitarian look typical of many ergonomic keyboards. Unlike the retro vibes of the Kinesis Advantage or the DIY aesthetics of most Dactyls, the Glove80 boasts a modern, sleek appearance that complements the contemporary design language of Apple, Google, and LG devices. With its clean lines and visually appealing legends, the Glove80 not only promises ergonomic comfort but does so with style, standing out amidst a sea of competitors.</h2>
<p>As my career trajectory veered from being an integral member of an electrical engineering team to assuming the role of Deputy Project Manager, the nature of my daily activities underwent a significant transformation. The hands-on tasks of yesteryears were gradually replaced by a deluge of documentations—writing, reviewing, and endless typing. This shift brought with it an unwelcome companion: discomfort in my hands and wrists, a stark reminder of the ergonomic pitfalls of conventional keyboards. It was in this context that my quest for a more ergonomic typing solution began, leading me towards the world of ALICE layout keyboards, with the <a href="https://www.keychron.com/products/keychron-q10-pro-alice-layout-qmk-via-wireless-custom-mechanical-keyboard"><strong>Q10 Pro</strong> by Keychron</a> being my initial foray into this new realm.</p>
<p>However, the relief was partial, and the shadow of wrist strain persisted, urging me to delve deeper into the ergonomic keyboard universe. My search for a truly ergonomic solution brought me to the doorstep of the <a href="https://www.moergo.com"><strong>Glove80</strong> by MoErgo</a>. Boasting a unique split design, concave key wells, and a commitment to ergonomics that seemed almost tailor-made for my situation, the Glove80 held the promise of being the oasis I was desperately seeking in the desert of my wrist discomfort.</p>
<p>This journey from an ALICE layout keyboard user to a Glove80 enthusiast was not just about finding a better typing tool; it was about embracing a healthier typing posture and redefining my interaction with computers. After a month of integrating the Glove80 into my workflow, I&#39;m ready to share my insights and experiences. This review will explore the initial adaptation period, the impact on my wrist health, and whether the Glove80 lives up to its promise as an ergonomic game-changer.</p>
<h3>First Impressions: Feel and Experience</h3>
<p>Upon beginning my typing journey with the Glove80, two aspects immediately stood out. The unique choc spacing, combined with finger-specific curves for each key column, facilitated effortless access to the bottom and number rows, as well as several function keys—without the need to move my hands. This ease of reach extended to the thumb keys, thoughtfully laid out in an arc to match the natural movement of my thumbs. Additionally, the keyboard&#39;s low profile on the desk encouraged a neutral wrist position, enhancing comfort during long typing sessions. These features converged to create a typing experience that was not just comfortable but intuitively aligned with natural hand movements.</p>
<h4>The Details That Matter</h4>
<h5>Ergonomics at Its Core</h5>
<p>The hallmark of the Glove80 is its ergonomics, designed to seamlessly integrate with the user&#39;s hand movements. After fine-tuning the tenting and tilting angles—made possible by the adjustable feet on each half of the keyboard—my hands naturally fell into the optimal typing position. The thoughtfully designed key layout meant that reaching for higher rows required merely straightening or curling my fingers, aided by the keyboard&#39;s choc spacing. Each column&#39;s unique height and curve catered to the different lengths of my fingers, further minimizing strain.</p>
<h5>Key Innovations</h5>
<p>The Glove80 introduces keycaps with a novel MCC profile, featuring raised sides and a central cylindrical channel, made from a slick POM material. This design supports the natural sliding of fingers across keys, reducing the need to lift hands while typing. The keyboard&#39;s thumb clusters are another highlight, offering six easily accessible keys per hand. This ergonomic layout ensures that most keys are within reach without stretching, a testament to the keyboard&#39;s user-centric design.</p>
<h5>Beyond Typing: Features and Flexibility</h5>
<ul>
<li><strong>Tenting and Adjustability:</strong> The Glove80&#39;s customizable tenting angles, enhanced by sturdy locking nuts, ensure a tailored typing experience that can be finely adjusted to individual preferences.</li>
<li><strong>Comfortable Palm Rest:</strong> The integrated, detachable palm rest offers additional comfort, catering to different typing styles with ease.</li>
<li><strong>Switch Selection:</strong> While the standard Kailh choc switches are adequate, enthusiasts might prefer customizing their keyboard with preferred switches for an optimized typing feel. I opted for the lighter Kailh Choc V1, Red Pro Linear 35gf switches.</li>
<li><strong>Keycaps:</strong> The high-quality POM keycaps, combined with attractive and durable legends, enhance the keyboard&#39;s tactile and visual appeal.</li>
<li><strong>Tech-Savvy Features:</strong> From its easy-to-use firmware updates via a web interface to seamless Bluetooth connectivity and impressive battery life, the Glove80 is designed for a modern, wireless world.</li>
<li><strong>RGB Lighting:</strong> While currently limited in customization, the RGB LEDs offer aesthetic versatility to match any setup.</li>
</ul>
<h3>Concluding Thoughts</h3>
<p>The Glove80 keyboard represents a significant leap forward in ergonomic design, marrying aesthetics with unmatched comfort and functionality. Its thoughtful features—from the infinitely adjustable tenting to the innovative keycap design—set a new standard for what ergonomic keyboards can be. While there&#39;s room for improvement in switch selection and RGB customization, these are minor quibbles in an otherwise outstanding product. For those in search of ergonomic excellence without compromising on style or performance, the Glove80 is an investment worth making, promising a typing experience that&#39;s not just comfortable but truly enjoyable.</p>
</article>
</div>
</div>
</main>
<footer class="bg-base-darker text-palenight-200 py-12 border-t border-palenight-400/20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<p class="text-palenight-300">&copy; 2024 Glenn Thompson. All rights reserved.</p>
<div class="webring-text mt-6">
<p class="text-palenight-300">I am part of the <a href="https://systemcrafters.net" target="_blank" class="text-accent-blue hover:text-accent-cyan">System Crafters</a> webring:</p>
</div>
<div class="craftering mt-2 flex items-center justify-center gap-4 text-accent-blue">
<a href="https://craftering.systemcrafters.net/@glenneth/previous" class="hover:text-accent-cyan">Previous</a>
<a href="https://craftering.systemcrafters.net/@glenneth" class="hover:text-accent-cyan">Random</a>
<a href="https://craftering.systemcrafters.net/@glenneth/next" class="hover:text-accent-cyan">Next</a>
</div>
<p class="text-palenight-300 mt-2">
<a href="mailto:glenn@glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenn@glenneth.org</a> |
<a href="https://glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenneth.org</a>
</p>
</div>
</div>
</footer>
</body>
<!DOCTYPE html>
<html lang="en" class="bg-base-bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta property="og:title" content=""Aesthetic Meets Ergonomics: My Deep Dive into the Glove80 Keyboard"">
<meta property="og:description" content="">
<meta property="og:url" content="https://glenneth.orgcontent/posts/2024-04-08-glove80-review">
<title>"Aesthetic Meets Ergonomics: My Deep Dive into the Glove80 Keyboard" - Glenn Thompson</title>
<link rel="alternate" type="application/rss+xml" title="Glenn Thompson's Blog" href="/feed.xml" />
<link href="../../dist/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
.prose-palenight {
--tw-prose-body: #bfc7d5;
--tw-prose-headings: #ffd580;
--tw-prose-links: #82aaff;
--tw-prose-code: #c792ea;
--tw-prose-pre-bg: #1b1e2b;
}
.prose h2 {
color: var(--tw-prose-headings);
font-family: Merriweather, serif;
font-weight: 700;
font-size: 1.5rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.prose p {
margin-bottom: 1rem;
line-height: 1.625;
}
.prose a {
color: var(--tw-prose-links);
text-decoration: none;
}
.prose a:hover {
color: #89ddff;
}
.prose code {
color: var(--tw-prose-code);
font-family: 'JetBrains Mono', monospace;
}
.prose pre {
background-color: var(--tw-prose-pre-bg);
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
margin-bottom: 1rem;
}
.prose ul, .prose ol {
margin-top: 0.5rem;
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.prose ul {
list-style-type: disc;
}
.prose ol {
list-style-type: decimal;
}
</style>
</head>
<body class="bg-base-bg text-palenight-50">
<nav class="bg-base-darker/80 backdrop-blur-sm shadow-sm border-b border-palenight-400/20 mb-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="/" class="text-accent-yellow font-serif text-xl font-bold">Glenn Thompson</a>
<div class="flex items-center gap-2 text-accent-yellow text-sm font-bold">
<span>["personal", "tech", "keyboards", "glove80"]</span>
<span>•</span>
<time datetime=""2024-04-08 16:50"">Invalid Date</time>
<span>•</span>
<span>5 min read</span>
</div>
</div>
</div>
</nav>
<main class="pt-24 pb-16 px-4">
<div class="max-w-4xl mx-auto">
<div class="content text-palenight-100 space-y-6">
<header class="mb-8">
<h1 class="text-4xl font-serif font-bold text-accent-yellow">"Aesthetic Meets Ergonomics: My Deep Dive into the Glove80 Keyboard"</h1>
<div class="flex items-center gap-4 text-palenight-300 mt-4">
<time datetime=""2024-04-08 16:50"">"2024-04-08 16:50"</time>
<span>•</span>
<span>5 min read</span>
<span>•</span>
<span>By "Glenn Thompson"</span>
</div>
<div class="flex flex-wrap gap-2 mt-4">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">["personal"</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">"tech"</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">"keyboards"</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">"glove80"]</span>
</div>
</header>
<article class="prose prose-palenight max-w-none">
<h2>In the quest for the ultimate ergonomic keyboard, aesthetics often take a backseat to functionality. Yet, when I first laid eyes on the Glove80, I was struck by its elegant design—a refreshing departure from the utilitarian look typical of many ergonomic keyboards. Unlike the retro vibes of the Kinesis Advantage or the DIY aesthetics of most Dactyls, the Glove80 boasts a modern, sleek appearance that complements the contemporary design language of Apple, Google, and LG devices. With its clean lines and visually appealing legends, the Glove80 not only promises ergonomic comfort but does so with style, standing out amidst a sea of competitors.</h2>
<p>As my career trajectory veered from being an integral member of an electrical engineering team to assuming the role of Deputy Project Manager, the nature of my daily activities underwent a significant transformation. The hands-on tasks of yesteryears were gradually replaced by a deluge of documentations—writing, reviewing, and endless typing. This shift brought with it an unwelcome companion: discomfort in my hands and wrists, a stark reminder of the ergonomic pitfalls of conventional keyboards. It was in this context that my quest for a more ergonomic typing solution began, leading me towards the world of ALICE layout keyboards, with the <a href="https://www.keychron.com/products/keychron-q10-pro-alice-layout-qmk-via-wireless-custom-mechanical-keyboard"><strong>Q10 Pro</strong> by Keychron</a> being my initial foray into this new realm.</p>
<p>However, the relief was partial, and the shadow of wrist strain persisted, urging me to delve deeper into the ergonomic keyboard universe. My search for a truly ergonomic solution brought me to the doorstep of the <a href="https://www.moergo.com"><strong>Glove80</strong> by MoErgo</a>. Boasting a unique split design, concave key wells, and a commitment to ergonomics that seemed almost tailor-made for my situation, the Glove80 held the promise of being the oasis I was desperately seeking in the desert of my wrist discomfort.</p>
<p>This journey from an ALICE layout keyboard user to a Glove80 enthusiast was not just about finding a better typing tool; it was about embracing a healthier typing posture and redefining my interaction with computers. After a month of integrating the Glove80 into my workflow, I&#39;m ready to share my insights and experiences. This review will explore the initial adaptation period, the impact on my wrist health, and whether the Glove80 lives up to its promise as an ergonomic game-changer.</p>
<h3>First Impressions: Feel and Experience</h3>
<p>Upon beginning my typing journey with the Glove80, two aspects immediately stood out. The unique choc spacing, combined with finger-specific curves for each key column, facilitated effortless access to the bottom and number rows, as well as several function keys—without the need to move my hands. This ease of reach extended to the thumb keys, thoughtfully laid out in an arc to match the natural movement of my thumbs. Additionally, the keyboard&#39;s low profile on the desk encouraged a neutral wrist position, enhancing comfort during long typing sessions. These features converged to create a typing experience that was not just comfortable but intuitively aligned with natural hand movements.</p>
<h4>The Details That Matter</h4>
<h5>Ergonomics at Its Core</h5>
<p>The hallmark of the Glove80 is its ergonomics, designed to seamlessly integrate with the user&#39;s hand movements. After fine-tuning the tenting and tilting angles—made possible by the adjustable feet on each half of the keyboard—my hands naturally fell into the optimal typing position. The thoughtfully designed key layout meant that reaching for higher rows required merely straightening or curling my fingers, aided by the keyboard&#39;s choc spacing. Each column&#39;s unique height and curve catered to the different lengths of my fingers, further minimizing strain.</p>
<h5>Key Innovations</h5>
<p>The Glove80 introduces keycaps with a novel MCC profile, featuring raised sides and a central cylindrical channel, made from a slick POM material. This design supports the natural sliding of fingers across keys, reducing the need to lift hands while typing. The keyboard&#39;s thumb clusters are another highlight, offering six easily accessible keys per hand. This ergonomic layout ensures that most keys are within reach without stretching, a testament to the keyboard&#39;s user-centric design.</p>
<h5>Beyond Typing: Features and Flexibility</h5>
<ul>
<li><strong>Tenting and Adjustability:</strong> The Glove80&#39;s customizable tenting angles, enhanced by sturdy locking nuts, ensure a tailored typing experience that can be finely adjusted to individual preferences.</li>
<li><strong>Comfortable Palm Rest:</strong> The integrated, detachable palm rest offers additional comfort, catering to different typing styles with ease.</li>
<li><strong>Switch Selection:</strong> While the standard Kailh choc switches are adequate, enthusiasts might prefer customizing their keyboard with preferred switches for an optimized typing feel. I opted for the lighter Kailh Choc V1, Red Pro Linear 35gf switches.</li>
<li><strong>Keycaps:</strong> The high-quality POM keycaps, combined with attractive and durable legends, enhance the keyboard&#39;s tactile and visual appeal.</li>
<li><strong>Tech-Savvy Features:</strong> From its easy-to-use firmware updates via a web interface to seamless Bluetooth connectivity and impressive battery life, the Glove80 is designed for a modern, wireless world.</li>
<li><strong>RGB Lighting:</strong> While currently limited in customization, the RGB LEDs offer aesthetic versatility to match any setup.</li>
</ul>
<h3>Concluding Thoughts</h3>
<p>The Glove80 keyboard represents a significant leap forward in ergonomic design, marrying aesthetics with unmatched comfort and functionality. Its thoughtful features—from the infinitely adjustable tenting to the innovative keycap design—set a new standard for what ergonomic keyboards can be. While there&#39;s room for improvement in switch selection and RGB customization, these are minor quibbles in an otherwise outstanding product. For those in search of ergonomic excellence without compromising on style or performance, the Glove80 is an investment worth making, promising a typing experience that&#39;s not just comfortable but truly enjoyable.</p>
</article>
</div>
</div>
</main>
<footer class="bg-base-darker text-palenight-200 py-12 border-t border-palenight-400/20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<p class="text-palenight-300">&copy; 2024 Glenn Thompson. All rights reserved.</p>
<div class="webring-text mt-6">
<p class="text-palenight-300">I am part of the <a href="https://systemcrafters.net" target="_blank" class="text-accent-blue hover:text-accent-cyan">System Crafters</a> webring:</p>
</div>
<div class="craftering mt-2 flex items-center justify-center gap-4 text-accent-blue">
<a href="https://craftering.systemcrafters.net/@glenneth/previous" class="hover:text-accent-cyan">Previous</a>
<a href="https://craftering.systemcrafters.net/@glenneth" class="hover:text-accent-cyan">Random</a>
<a href="https://craftering.systemcrafters.net/@glenneth/next" class="hover:text-accent-cyan">Next</a>
</div>
<p class="text-palenight-300 mt-2">
<a href="mailto:glenn@glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenn@glenneth.org</a> |
<a href="https://glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenneth.org</a>
</p>
</div>
</div>
</footer>
</body>
</html>

278
deploy/content/posts/2024-05-01-amman-newcastle-journey.html
View File

@ -1,140 +1,140 @@
<!DOCTYPE html>
<html lang="en" class="bg-base-bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta property="og:title" content="A Rollercoaster Week: From Amman to Newcastle, and back again">
<meta property="og:description" content="">
<meta property="og:url" content="https://glenneth.orgcontent/posts/2024-05-01-amman-newcastle-journey">
<title>A Rollercoaster Week: From Amman to Newcastle, and back again - Glenn Thompson</title>
<link rel="alternate" type="application/rss+xml" title="Glenn Thompson's Blog" href="/feed.xml" />
<link href="../../dist/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
.prose-palenight {
--tw-prose-body: #bfc7d5;
--tw-prose-headings: #ffd580;
--tw-prose-links: #82aaff;
--tw-prose-code: #c792ea;
--tw-prose-pre-bg: #1b1e2b;
}
.prose h2 {
color: var(--tw-prose-headings);
font-family: Merriweather, serif;
font-weight: 700;
font-size: 1.5rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.prose p {
margin-bottom: 1rem;
line-height: 1.625;
}
.prose a {
color: var(--tw-prose-links);
text-decoration: none;
}
.prose a:hover {
color: #89ddff;
}
.prose code {
color: var(--tw-prose-code);
font-family: 'JetBrains Mono', monospace;
}
.prose pre {
background-color: var(--tw-prose-pre-bg);
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
margin-bottom: 1rem;
}
.prose ul, .prose ol {
margin-top: 0.5rem;
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.prose ul {
list-style-type: disc;
}
.prose ol {
list-style-type: decimal;
}
</style>
</head>
<body class="bg-base-bg text-palenight-50">
<nav class="bg-base-darker/80 backdrop-blur-sm shadow-sm border-b border-palenight-400/20 mb-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="/" class="text-accent-yellow font-serif text-xl font-bold">Glenn Thompson</a>
<div class="flex items-center gap-2 text-accent-yellow text-sm font-bold">
<span>work, travel</span>
<span>•</span>
<time datetime="2024-05-01 17:40:58+03:00">May 1, 2024</time>
<span>•</span>
<span>3 min read</span>
</div>
</div>
</div>
</nav>
<main class="pt-24 pb-16 px-4">
<div class="max-w-4xl mx-auto">
<div class="content text-palenight-100 space-y-6">
<header class="mb-8">
<h1 class="text-4xl font-serif font-bold text-accent-yellow">A Rollercoaster Week: From Amman to Newcastle, and back again</h1>
<div class="flex items-center gap-4 text-palenight-300 mt-4">
<time datetime="2024-05-01 17:40:58+03:00">2024-05-01 17:40:58+03:00</time>
<span>•</span>
<span>3 min read</span>
<span>•</span>
<span>By Glenn Thompson</span>
</div>
<div class="flex flex-wrap gap-2 mt-4">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">work</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">travel</span>
</div>
</header>
<article class="prose prose-palenight max-w-none">
<p>Two weeks ago was a whirlwind of events, taking me from the conforting embrace of Amman, Jordan to the vibrant streets of Newcastle, England. It was a journey filled with highs and lows, professional achievements, and personal challenges.</p>
<h2>The Journey Begins</h2>
<p>It all started on a Monday morning in Amman as I embarked on a journey to attend a Quality Control (QC) conference in Newcastle. The anticipation of presenting my work at an international forum filled me with excitement and nerves. The conference was scheduled for just one day, but the impact it had on me would last much longer.</p>
<h2>A Successful Presentation</h2>
<p>Tuesday arrived, and with it came the day of the conference. Armed with a PowerPoint presentation comprising over 130 slides, I delved into four hours of intense presenting. Despite the pressure, the conference was a resounding success. My project received positive feedback, and I felt a sense of accomplishment as I shared my work with colleagues from around the world.</p>
<h2>The Toll of Travel</h2>
<p>However, as I returned to Amman on Wednesday, I couldn&#39;t shake off a sense of exhaustion. Little did I know that the toll of travel would soon manifest itself in a most unexpected manner. </p>
<p>Thursday morning greeted me with heavy flu-like symptoms. It hit me like a ton of bricks. The combination of jet lag, long hours of presenting, and exposure to new environments had taken its toll on my immune system. I was bedridden, grappling with a chesty cough that seemed relentless.</p>
<h2>The Show Must Go On</h2>
<p>Despite my illness, there was no time for rest. The following week demanded my presence at a site meeting where I was tasked with condensing my extensive slide deck into a concise presentation of just 12 slides. The challenge was daunting, but I tackled it with determination.</p>
<h2>Reflecting on the Journey</h2>
<p>As I look back on the rollercoaster week that was, I&#39;m struck by the juxtaposition of success and struggle. From the heights of presenting at an international conference to the lows of battling illness, it was a journey that tested my resilience and resolve.</p>
<p>But through it all, one thing remains clear: adversity only serves to make us stronger. Each obstacle we overcome, whether professional or personal, contributes to our growth and development.</p>
<p>So here&#39;s to the rollercoaster weeks, the ones filled with ups and downs, twists and turns. For it is in those moments of challenge that we discover the true extent of our capabilities.</p>
<p>As I upload this blog post using Hugo, I do so with a renewed sense of gratitude for the journey and all it has taught me. Here&#39;s to embracing the ride, wherever it may take us.</p>
</article>
</div>
</div>
</main>
<footer class="bg-base-darker text-palenight-200 py-12 border-t border-palenight-400/20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<p class="text-palenight-300">&copy; 2024 Glenn Thompson. All rights reserved.</p>
<div class="webring-text mt-6">
<p class="text-palenight-300">I am part of the <a href="https://systemcrafters.net" target="_blank" class="text-accent-blue hover:text-accent-cyan">System Crafters</a> webring:</p>
</div>
<div class="craftering mt-2 flex items-center justify-center gap-4 text-accent-blue">
<a href="https://craftering.systemcrafters.net/@glenneth/previous" class="hover:text-accent-cyan">Previous</a>
<a href="https://craftering.systemcrafters.net/@glenneth" class="hover:text-accent-cyan">Random</a>
<a href="https://craftering.systemcrafters.net/@glenneth/next" class="hover:text-accent-cyan">Next</a>
</div>
<p class="text-palenight-300 mt-2">
<a href="mailto:glenn@glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenn@glenneth.org</a> |
<a href="https://glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenneth.org</a>
</p>
</div>
</div>
</footer>
</body>
<!DOCTYPE html>
<html lang="en" class="bg-base-bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta property="og:title" content="A Rollercoaster Week: From Amman to Newcastle, and back again">
<meta property="og:description" content="">
<meta property="og:url" content="https://glenneth.orgcontent/posts/2024-05-01-amman-newcastle-journey">
<title>A Rollercoaster Week: From Amman to Newcastle, and back again - Glenn Thompson</title>
<link rel="alternate" type="application/rss+xml" title="Glenn Thompson's Blog" href="/feed.xml" />
<link href="../../dist/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
.prose-palenight {
--tw-prose-body: #bfc7d5;
--tw-prose-headings: #ffd580;
--tw-prose-links: #82aaff;
--tw-prose-code: #c792ea;
--tw-prose-pre-bg: #1b1e2b;
}
.prose h2 {
color: var(--tw-prose-headings);
font-family: Merriweather, serif;
font-weight: 700;
font-size: 1.5rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.prose p {
margin-bottom: 1rem;
line-height: 1.625;
}
.prose a {
color: var(--tw-prose-links);
text-decoration: none;
}
.prose a:hover {
color: #89ddff;
}
.prose code {
color: var(--tw-prose-code);
font-family: 'JetBrains Mono', monospace;
}
.prose pre {
background-color: var(--tw-prose-pre-bg);
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
margin-bottom: 1rem;
}
.prose ul, .prose ol {
margin-top: 0.5rem;
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.prose ul {
list-style-type: disc;
}
.prose ol {
list-style-type: decimal;
}
</style>
</head>
<body class="bg-base-bg text-palenight-50">
<nav class="bg-base-darker/80 backdrop-blur-sm shadow-sm border-b border-palenight-400/20 mb-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="/" class="text-accent-yellow font-serif text-xl font-bold">Glenn Thompson</a>
<div class="flex items-center gap-2 text-accent-yellow text-sm font-bold">
<span>work, travel</span>
<span>•</span>
<time datetime="2024-05-01 17:40:58+03:00">May 1, 2024</time>
<span>•</span>
<span>3 min read</span>
</div>
</div>
</div>
</nav>
<main class="pt-24 pb-16 px-4">
<div class="max-w-4xl mx-auto">
<div class="content text-palenight-100 space-y-6">
<header class="mb-8">
<h1 class="text-4xl font-serif font-bold text-accent-yellow">A Rollercoaster Week: From Amman to Newcastle, and back again</h1>
<div class="flex items-center gap-4 text-palenight-300 mt-4">
<time datetime="2024-05-01 17:40:58+03:00">2024-05-01 17:40:58+03:00</time>
<span>•</span>
<span>3 min read</span>
<span>•</span>
<span>By Glenn Thompson</span>
</div>
<div class="flex flex-wrap gap-2 mt-4">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">work</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">travel</span>
</div>
</header>
<article class="prose prose-palenight max-w-none">
<p>Two weeks ago was a whirlwind of events, taking me from the conforting embrace of Amman, Jordan to the vibrant streets of Newcastle, England. It was a journey filled with highs and lows, professional achievements, and personal challenges.</p>
<h2>The Journey Begins</h2>
<p>It all started on a Monday morning in Amman as I embarked on a journey to attend a Quality Control (QC) conference in Newcastle. The anticipation of presenting my work at an international forum filled me with excitement and nerves. The conference was scheduled for just one day, but the impact it had on me would last much longer.</p>
<h2>A Successful Presentation</h2>
<p>Tuesday arrived, and with it came the day of the conference. Armed with a PowerPoint presentation comprising over 130 slides, I delved into four hours of intense presenting. Despite the pressure, the conference was a resounding success. My project received positive feedback, and I felt a sense of accomplishment as I shared my work with colleagues from around the world.</p>
<h2>The Toll of Travel</h2>
<p>However, as I returned to Amman on Wednesday, I couldn&#39;t shake off a sense of exhaustion. Little did I know that the toll of travel would soon manifest itself in a most unexpected manner. </p>
<p>Thursday morning greeted me with heavy flu-like symptoms. It hit me like a ton of bricks. The combination of jet lag, long hours of presenting, and exposure to new environments had taken its toll on my immune system. I was bedridden, grappling with a chesty cough that seemed relentless.</p>
<h2>The Show Must Go On</h2>
<p>Despite my illness, there was no time for rest. The following week demanded my presence at a site meeting where I was tasked with condensing my extensive slide deck into a concise presentation of just 12 slides. The challenge was daunting, but I tackled it with determination.</p>
<h2>Reflecting on the Journey</h2>
<p>As I look back on the rollercoaster week that was, I&#39;m struck by the juxtaposition of success and struggle. From the heights of presenting at an international conference to the lows of battling illness, it was a journey that tested my resilience and resolve.</p>
<p>But through it all, one thing remains clear: adversity only serves to make us stronger. Each obstacle we overcome, whether professional or personal, contributes to our growth and development.</p>
<p>So here&#39;s to the rollercoaster weeks, the ones filled with ups and downs, twists and turns. For it is in those moments of challenge that we discover the true extent of our capabilities.</p>
<p>As I upload this blog post using Hugo, I do so with a renewed sense of gratitude for the journey and all it has taught me. Here&#39;s to embracing the ride, wherever it may take us.</p>
</article>
</div>
</div>
</main>
<footer class="bg-base-darker text-palenight-200 py-12 border-t border-palenight-400/20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<p class="text-palenight-300">&copy; 2024 Glenn Thompson. All rights reserved.</p>
<div class="webring-text mt-6">
<p class="text-palenight-300">I am part of the <a href="https://systemcrafters.net" target="_blank" class="text-accent-blue hover:text-accent-cyan">System Crafters</a> webring:</p>
</div>
<div class="craftering mt-2 flex items-center justify-center gap-4 text-accent-blue">
<a href="https://craftering.systemcrafters.net/@glenneth/previous" class="hover:text-accent-cyan">Previous</a>
<a href="https://craftering.systemcrafters.net/@glenneth" class="hover:text-accent-cyan">Random</a>
<a href="https://craftering.systemcrafters.net/@glenneth/next" class="hover:text-accent-cyan">Next</a>
</div>
<p class="text-palenight-300 mt-2">
<a href="mailto:glenn@glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenn@glenneth.org</a> |
<a href="https://glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenneth.org</a>
</p>
</div>
</div>
</footer>
</body>
</html>

722
deploy/content/posts/2024-05-15-hugo-to-haunt.html
View File

@ -1,362 +1,362 @@
<!DOCTYPE html>
<html lang="en" class="bg-base-bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta property="og:title" content="Transitioning from Hugo to Haunt: Embracing Scheme and GNU Guix">
<meta property="og:description" content="">
<meta property="og:url" content="https://glenneth.orgcontent/posts/2024-05-15-hugo-to-haunt">
<title>Transitioning from Hugo to Haunt: Embracing Scheme and GNU Guix - Glenn Thompson</title>
<link rel="alternate" type="application/rss+xml" title="Glenn Thompson's Blog" href="/feed.xml" />
<link href="../../dist/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
.prose-palenight {
--tw-prose-body: #bfc7d5;
--tw-prose-headings: #ffd580;
--tw-prose-links: #82aaff;
--tw-prose-code: #c792ea;
--tw-prose-pre-bg: #1b1e2b;
}
.prose h2 {
color: var(--tw-prose-headings);
font-family: Merriweather, serif;
font-weight: 700;
font-size: 1.5rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.prose p {
margin-bottom: 1rem;
line-height: 1.625;
}
.prose a {
color: var(--tw-prose-links);
text-decoration: none;
}
.prose a:hover {
color: #89ddff;
}
.prose code {
color: var(--tw-prose-code);
font-family: 'JetBrains Mono', monospace;
}
.prose pre {
background-color: var(--tw-prose-pre-bg);
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
margin-bottom: 1rem;
}
.prose ul, .prose ol {
margin-top: 0.5rem;
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.prose ul {
list-style-type: disc;
}
.prose ol {
list-style-type: decimal;
}
</style>
</head>
<body class="bg-base-bg text-palenight-50">
<nav class="bg-base-darker/80 backdrop-blur-sm shadow-sm border-b border-palenight-400/20 mb-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="/" class="text-accent-yellow font-serif text-xl font-bold">Glenn Thompson</a>
<div class="flex items-center gap-2 text-accent-yellow text-sm font-bold">
<span>personal, tech, keyboards, glove80</span>
<span>•</span>
<time datetime="2024-05-15 10:30">May 15, 2024</time>
<span>•</span>
<span>7 min read</span>
</div>
</div>
</div>
</nav>
<main class="pt-24 pb-16 px-4">
<div class="max-w-4xl mx-auto">
<div class="content text-palenight-100 space-y-6">
<header class="mb-8">
<h1 class="text-4xl font-serif font-bold text-accent-yellow">Transitioning from Hugo to Haunt: Embracing Scheme and GNU Guix</h1>
<div class="flex items-center gap-4 text-palenight-300 mt-4">
<time datetime="2024-05-15 10:30">2024-05-15 10:30</time>
<span>•</span>
<span>7 min read</span>
<span>•</span>
<span>By Glenn Thompson</span>
</div>
<div class="flex flex-wrap gap-2 mt-4">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">personal</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">tech</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">keyboards</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">glove80</span>
</div>
</header>
<article class="prose prose-palenight max-w-none">
<h1>Transitioning from Hugo to Haunt: Embracing Scheme and GNU Guix</h1>
<p>Hello there! I&#39;m Glenn Thompson, and today, I want to share a significant part of my recent journey into the world of Scheme, GNU Guix, and static site generation.</p>
<h2>Discovering Scheme with System Crafters</h2>
<p>My journey began with a desire to dive deeper into programming languages and their ecosystems. I am a member of the <a href="https://systemcrafters.net/community/">System Crafters Community</a>, and its founder, David Wilson, announced a short four week course as an introduction to Guile Scheme. The course, <a href="https://systemcrafters.net/courses/hands-on-guile-scheme-beginners/">Hands-On Guile Scheme for Beginners</a>, provided me with a robust introduction to Guile Scheme, a language that emphasizes simplicity and elegance. David&#39;s clear explanations and practical examples made learning Scheme both engaging and approachable.</p>
<h2>The Move to GNU Guix</h2>
<p>Inspired by the principles of Scheme, I decided to take a leap further into the open-source world by transitioning from Arch Linux to GNU Guix. The Guix community, particularly the folks in the <code>#systemcrafters</code> channel on <code>irc.libera.chat</code>, were incredibly supportive and instrumental in helping me navigate this new environment. Their guidance made the switch smooth and rewarding, reinforcing the power and flexibility of GNU Guix as a functional package manager and operating system. More about that experience in another post.</p>
<p>There are too many individuals to name here that have helped with the installation and configuration on Gnu guix to mention here. You all have been an incredible help for which I am extremely grateful. Thank you all , for enduring my ignorance, and for your patience and your help.</p>
<h2>From Hugo to Haunt</h2>
<p>As I settled into Guix, I faced a challenge: Hugo, the static site generator I previously used, was not available as a Guix package. This led me to explore alternatives and eventually discover <a href="https://dthompson.us/projects/haunt.html">Haunt</a>, a Scheme-based static site generator that aligns perfectly with my newfound appreciation for Scheme and Guix.</p>
<h2>Overcoming Challenges with Haunt</h2>
<p>Transitioning to Haunt wasn&#39;t without its challenges. There are no readily available templating systems available for haunt like there are for hugo, but there are plenty of examples <a href="https://awesome.haunt.page/">here</a>. One of my own primary difficulties was creating a custom template that matched my site&#39;s aesthetic requirements and functionality needs. Initially, I struggled with configuring the theme layout and ensuring the CSS was applied correctly. Another hurdle was generating the correct URLs for posts and ensuring that summaries appeared as intended on the front page.</p>
<p>Thankfully, the Haunt manual proved to be an invaluable resource throughout this process. The comprehensive documentation provided clear guidance on using various modules, functions, and procedures. By carefully studying the examples and explanations, I was able to overcome the obstacles and achieve the desired results for my site. The manual&#39;s detailed descriptions of Haunt&#39;s inner workings were particularly helpful in understanding how to leverage the flexibility of Scheme to customize my blog.</p>
<h2>Crafting My Own Template</h2>
<p>Moving from Hugo to Haunt required me to create my own template and customize my site&#39;s appearance. This was an exciting opportunity to apply the skills I had learned from David&#39;s course and experiment with Scheme in a practical context.</p>
<h4>Creating the Template</h4>
<p>Haunt&#39;s flexibility allowed me to define my own theme layout and structure. Here&#39;s a snippet of my <code>haunt.scm</code> file, where I defined the theme layout and added custom footer content:</p>
<pre><code class="language-scheme">(use-modules (haunt asset)
(haunt builder blog)
(haunt builder atom)
(haunt builder assets)
(haunt reader commonmark)
(haunt site)
(haunt post)
(sxml simple) ; For HTML generation
(srfi srfi-1)
(srfi srfi-19)) ; For date and time procedures
;; Load custom templates
(load &quot;templates/post.scm&quot;)
(define (format-date date)
(date-&gt;string date &quot;~Y-~m-~d&quot;))
;; Define a function to generate the URL for a post
(define (post-url post)
(string-append &quot;/&quot; (post-slug post) &quot;.html&quot;))
;; Define a function to extract a summary from the post content
(define (post-summary post)
(let ((content (post-sxml post)))
(if (null? content)
&quot;&quot;
(let ((first-paragraph (car content)))
(if (string? first-paragraph)
(substring first-paragraph 0 (min 200 (string-length first-paragraph)))
(sxml-&gt;string first-paragraph))))))
;; Define the theme layout
(define (theme-layout site title content)
(let ((current-year (number-&gt;string (date-year (current-date)))))
`(html
(head
(meta (@ (charset &quot;utf-8&quot;)))
(meta (@ (name &quot;viewport&quot;) (content &quot;width=device-width, initial-scale=1.0, shrink-to-fit=no&quot;)))
(link (@ (rel &quot;stylesheet&quot;) (href &quot;/assets/palenight.css&quot;)))
(style
&quot; .craftering {
margin: auto;
width: 50%;
text-align: center;
}
.webring-text {
text-align: center;
margin-bottom: 20px;
color: white;
}
.craftering a {
color: #dddddd;
}
.webring-text a {
color: #dddddd;
}&quot;)
(title ,title))
(body
(header (h1 ,(site-title site)))
(main ,content)
(footer (@ (class &quot;bg-black bottom-0 w-100 pa3&quot;) (role &quot;contentinfo&quot;))
(div (@ (class &quot;flex justify-between&quot;))
(div (@ (class &quot;webring-text&quot;))
(p &quot;I am part of the &quot; (a (@ (href &quot;https://systemcrafters.net&quot;) (target &quot;_blank&quot;)) &quot;System Crafters&quot;) &quot; webring:&quot;))
(div (@ (class &quot;craftering&quot;))
(a (@ (href &quot;https://craftering.systemcrafters.net/@glenneth/previous&quot;)) &quot;←&quot;)
(a (@ (href &quot;https://craftering.systemcrafters.net/&quot;)) &quot;craftering&quot;)
(a (@ (href &quot;https://craftering.systemcrafters.net/@glenneth/next&quot;)) &quot;→&quot;))))))))
;; Define the custom theme with a consistent layout for index
(define my-theme
(theme #:name &quot;My Custom Theme&quot;
#:layout theme-layout
#:post-template post-template
#:collection-template
(lambda (site title posts prefix)
`(div (@ (class &quot;content&quot;))
(h2 ,title)
(ul
,@(map (lambda (post)
`(li
(article
(header
(h3 (a (@ (href ,(post-url post))) ,(post-title post))))
(p ,(format-date (post-date post)))
(p ,(post-summary post))
(p (a (@ (href ,(post-url post))) &quot;Read more...&quot;)))))
posts))))))
;; Site configuration
(site #:title &quot;Just Another Personal Blog&quot;
#:domain &quot;glenneth.srht.site&quot;
#:default-metadata
&#39;((author . &quot;Glenn Thompson&quot;)
(email . &quot;glenn@kirstol.org&quot;))
#:readers (list commonmark-reader)
#:builders (list
(blog #:theme my-theme)
(atom-feed)
(atom-feeds-by-tag)
(static-directory &quot;images&quot;)
(static-directory &quot;assets&quot;)))
</code></pre>
<h3>Customizing the CSS</h3>
<p>To give my site a personalized touch, I crafted a CSS stylesheet that matched my aesthetic preferences. Here’s an excerpt from my <code>palenight.css</code> file:</p>
<pre><code class="language-css">body {
display: flex;
justify-content: center;
padding: 10px;
}
.content, header, footer, main {
max-width: 90%;
padding: 0 5%;
}
header {
text-align: center;
margin-bottom: 20px;
}
footer {
text-align: center;
margin-top: 20px;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin-bottom: 20px;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
body {
background-color: #292d3e;
color: #d0d0d0;
}
a {
color: #82aaff;
}
h1, h2, h3, h4, h5, h6 {
color: #c792ea;
}
.content {
background-color: #1e1e2e;
padding: 20px;
border-radius: 5px;
}
article {
background-color: #282a36;
padding: 15px;
border-radius: 8px;
margin-bottom: 20px;
}
article header {
margin-bottom: 10px;
}
.date {
color: #6272a4;
font-size: 0.9em;
}
/* Additional styles for the craftering */
.craftering {
margin: auto;
width: 50%;
text-align: center;
}
.webring-text {
text-align: center;
margin-bottom: 20px;
color: white;
}
.craftering a {
color: #dddddd;
}
.webring-text a {
color: #dddddd;
}
/* Additions for mobile device readability */
meta {
name: viewport;
content: width=device-width, initial-scale=1, shrink-to-fit=no;
}
@media screen and (max-width: 767px) {
/* Customize styles for smaller screens */
.logo {
max-width: 200px;
}
}
</code></pre>
<p>I use the <code>doom-palenight</code> theme in Emacs, my preferred text editor, and I wanted my site to match that aesthetic.</p>
<h3>Publishing with Haunt and Hut</h3>
<p>In addition to using Haunt, I adopted hut, a set of command-line tools for interacting with SourceHut, to publish my blog. This streamlined my workflow, making it easier to manage and deploy my site directly from my local environment.</p>
<h3>Conclusion</h3>
<p>Transitioning from Hugo to Haunt, learning Scheme, and embracing GNU Guix has been an enriching experience. It&#39;s not just about using new tools; it&#39;s about joining a community that values simplicity, transparency, and collaboration. If you&#39;re curious about Scheme or GNU Guix, I highly recommend checking out David Wilson&#39;s course on System Crafters and joining the discussions on IRC.</p>
<p>I am not a developer of any kind, and learning Scheme has opened my eyes as to how I can craft an environment that I want to work in, and not endure a working environment that the computer is forcing upon me.</p>
<p>Thank you for reading, and stay tuned for more updates on my journey!</p>
</article>
</div>
</div>
</main>
<footer class="bg-base-darker text-palenight-200 py-12 border-t border-palenight-400/20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<p class="text-palenight-300">&copy; 2024 Glenn Thompson. All rights reserved.</p>
<div class="webring-text mt-6">
<p class="text-palenight-300">I am part of the <a href="https://systemcrafters.net" target="_blank" class="text-accent-blue hover:text-accent-cyan">System Crafters</a> webring:</p>
</div>
<div class="craftering mt-2 flex items-center justify-center gap-4 text-accent-blue">
<a href="https://craftering.systemcrafters.net/@glenneth/previous" class="hover:text-accent-cyan">Previous</a>
<a href="https://craftering.systemcrafters.net/@glenneth" class="hover:text-accent-cyan">Random</a>
<a href="https://craftering.systemcrafters.net/@glenneth/next" class="hover:text-accent-cyan">Next</a>
</div>
<p class="text-palenight-300 mt-2">
<a href="mailto:glenn@glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenn@glenneth.org</a> |
<a href="https://glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenneth.org</a>
</p>
</div>
</div>
</footer>
</body>
<!DOCTYPE html>
<html lang="en" class="bg-base-bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta property="og:title" content="Transitioning from Hugo to Haunt: Embracing Scheme and GNU Guix">
<meta property="og:description" content="">
<meta property="og:url" content="https://glenneth.orgcontent/posts/2024-05-15-hugo-to-haunt">
<title>Transitioning from Hugo to Haunt: Embracing Scheme and GNU Guix - Glenn Thompson</title>
<link rel="alternate" type="application/rss+xml" title="Glenn Thompson's Blog" href="/feed.xml" />
<link href="../../dist/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
.prose-palenight {
--tw-prose-body: #bfc7d5;
--tw-prose-headings: #ffd580;
--tw-prose-links: #82aaff;
--tw-prose-code: #c792ea;
--tw-prose-pre-bg: #1b1e2b;
}
.prose h2 {
color: var(--tw-prose-headings);
font-family: Merriweather, serif;
font-weight: 700;
font-size: 1.5rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.prose p {
margin-bottom: 1rem;
line-height: 1.625;
}
.prose a {
color: var(--tw-prose-links);
text-decoration: none;
}
.prose a:hover {
color: #89ddff;
}
.prose code {
color: var(--tw-prose-code);
font-family: 'JetBrains Mono', monospace;
}
.prose pre {
background-color: var(--tw-prose-pre-bg);
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
margin-bottom: 1rem;
}
.prose ul, .prose ol {
margin-top: 0.5rem;
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.prose ul {
list-style-type: disc;
}
.prose ol {
list-style-type: decimal;
}
</style>
</head>
<body class="bg-base-bg text-palenight-50">
<nav class="bg-base-darker/80 backdrop-blur-sm shadow-sm border-b border-palenight-400/20 mb-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="/" class="text-accent-yellow font-serif text-xl font-bold">Glenn Thompson</a>
<div class="flex items-center gap-2 text-accent-yellow text-sm font-bold">
<span>personal, tech, keyboards, glove80</span>
<span>•</span>
<time datetime="2024-05-15 10:30">May 15, 2024</time>
<span>•</span>
<span>7 min read</span>
</div>
</div>
</div>
</nav>
<main class="pt-24 pb-16 px-4">
<div class="max-w-4xl mx-auto">
<div class="content text-palenight-100 space-y-6">
<header class="mb-8">
<h1 class="text-4xl font-serif font-bold text-accent-yellow">Transitioning from Hugo to Haunt: Embracing Scheme and GNU Guix</h1>
<div class="flex items-center gap-4 text-palenight-300 mt-4">
<time datetime="2024-05-15 10:30">2024-05-15 10:30</time>
<span>•</span>
<span>7 min read</span>
<span>•</span>
<span>By Glenn Thompson</span>
</div>
<div class="flex flex-wrap gap-2 mt-4">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">personal</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">tech</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">keyboards</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">glove80</span>
</div>
</header>
<article class="prose prose-palenight max-w-none">
<h1>Transitioning from Hugo to Haunt: Embracing Scheme and GNU Guix</h1>
<p>Hello there! I&#39;m Glenn Thompson, and today, I want to share a significant part of my recent journey into the world of Scheme, GNU Guix, and static site generation.</p>
<h2>Discovering Scheme with System Crafters</h2>
<p>My journey began with a desire to dive deeper into programming languages and their ecosystems. I am a member of the <a href="https://systemcrafters.net/community/">System Crafters Community</a>, and its founder, David Wilson, announced a short four week course as an introduction to Guile Scheme. The course, <a href="https://systemcrafters.net/courses/hands-on-guile-scheme-beginners/">Hands-On Guile Scheme for Beginners</a>, provided me with a robust introduction to Guile Scheme, a language that emphasizes simplicity and elegance. David&#39;s clear explanations and practical examples made learning Scheme both engaging and approachable.</p>
<h2>The Move to GNU Guix</h2>
<p>Inspired by the principles of Scheme, I decided to take a leap further into the open-source world by transitioning from Arch Linux to GNU Guix. The Guix community, particularly the folks in the <code>#systemcrafters</code> channel on <code>irc.libera.chat</code>, were incredibly supportive and instrumental in helping me navigate this new environment. Their guidance made the switch smooth and rewarding, reinforcing the power and flexibility of GNU Guix as a functional package manager and operating system. More about that experience in another post.</p>
<p>There are too many individuals to name here that have helped with the installation and configuration on Gnu guix to mention here. You all have been an incredible help for which I am extremely grateful. Thank you all , for enduring my ignorance, and for your patience and your help.</p>
<h2>From Hugo to Haunt</h2>
<p>As I settled into Guix, I faced a challenge: Hugo, the static site generator I previously used, was not available as a Guix package. This led me to explore alternatives and eventually discover <a href="https://dthompson.us/projects/haunt.html">Haunt</a>, a Scheme-based static site generator that aligns perfectly with my newfound appreciation for Scheme and Guix.</p>
<h2>Overcoming Challenges with Haunt</h2>
<p>Transitioning to Haunt wasn&#39;t without its challenges. There are no readily available templating systems available for haunt like there are for hugo, but there are plenty of examples <a href="https://awesome.haunt.page/">here</a>. One of my own primary difficulties was creating a custom template that matched my site&#39;s aesthetic requirements and functionality needs. Initially, I struggled with configuring the theme layout and ensuring the CSS was applied correctly. Another hurdle was generating the correct URLs for posts and ensuring that summaries appeared as intended on the front page.</p>
<p>Thankfully, the Haunt manual proved to be an invaluable resource throughout this process. The comprehensive documentation provided clear guidance on using various modules, functions, and procedures. By carefully studying the examples and explanations, I was able to overcome the obstacles and achieve the desired results for my site. The manual&#39;s detailed descriptions of Haunt&#39;s inner workings were particularly helpful in understanding how to leverage the flexibility of Scheme to customize my blog.</p>
<h2>Crafting My Own Template</h2>
<p>Moving from Hugo to Haunt required me to create my own template and customize my site&#39;s appearance. This was an exciting opportunity to apply the skills I had learned from David&#39;s course and experiment with Scheme in a practical context.</p>
<h4>Creating the Template</h4>
<p>Haunt&#39;s flexibility allowed me to define my own theme layout and structure. Here&#39;s a snippet of my <code>haunt.scm</code> file, where I defined the theme layout and added custom footer content:</p>
<pre><code class="language-scheme">(use-modules (haunt asset)
(haunt builder blog)
(haunt builder atom)
(haunt builder assets)
(haunt reader commonmark)
(haunt site)
(haunt post)
(sxml simple) ; For HTML generation
(srfi srfi-1)
(srfi srfi-19)) ; For date and time procedures
;; Load custom templates
(load &quot;templates/post.scm&quot;)
(define (format-date date)
(date-&gt;string date &quot;~Y-~m-~d&quot;))
;; Define a function to generate the URL for a post
(define (post-url post)
(string-append &quot;/&quot; (post-slug post) &quot;.html&quot;))
;; Define a function to extract a summary from the post content
(define (post-summary post)
(let ((content (post-sxml post)))
(if (null? content)
&quot;&quot;
(let ((first-paragraph (car content)))
(if (string? first-paragraph)
(substring first-paragraph 0 (min 200 (string-length first-paragraph)))
(sxml-&gt;string first-paragraph))))))
;; Define the theme layout
(define (theme-layout site title content)
(let ((current-year (number-&gt;string (date-year (current-date)))))
`(html
(head
(meta (@ (charset &quot;utf-8&quot;)))
(meta (@ (name &quot;viewport&quot;) (content &quot;width=device-width, initial-scale=1.0, shrink-to-fit=no&quot;)))
(link (@ (rel &quot;stylesheet&quot;) (href &quot;/assets/palenight.css&quot;)))
(style
&quot; .craftering {
margin: auto;
width: 50%;
text-align: center;
}
.webring-text {
text-align: center;
margin-bottom: 20px;
color: white;
}
.craftering a {
color: #dddddd;
}
.webring-text a {
color: #dddddd;
}&quot;)
(title ,title))
(body
(header (h1 ,(site-title site)))
(main ,content)
(footer (@ (class &quot;bg-black bottom-0 w-100 pa3&quot;) (role &quot;contentinfo&quot;))
(div (@ (class &quot;flex justify-between&quot;))
(div (@ (class &quot;webring-text&quot;))
(p &quot;I am part of the &quot; (a (@ (href &quot;https://systemcrafters.net&quot;) (target &quot;_blank&quot;)) &quot;System Crafters&quot;) &quot; webring:&quot;))
(div (@ (class &quot;craftering&quot;))
(a (@ (href &quot;https://craftering.systemcrafters.net/@glenneth/previous&quot;)) &quot;←&quot;)
(a (@ (href &quot;https://craftering.systemcrafters.net/&quot;)) &quot;craftering&quot;)
(a (@ (href &quot;https://craftering.systemcrafters.net/@glenneth/next&quot;)) &quot;→&quot;))))))))
;; Define the custom theme with a consistent layout for index
(define my-theme
(theme #:name &quot;My Custom Theme&quot;
#:layout theme-layout
#:post-template post-template
#:collection-template
(lambda (site title posts prefix)
`(div (@ (class &quot;content&quot;))
(h2 ,title)
(ul
,@(map (lambda (post)
`(li
(article
(header
(h3 (a (@ (href ,(post-url post))) ,(post-title post))))
(p ,(format-date (post-date post)))
(p ,(post-summary post))
(p (a (@ (href ,(post-url post))) &quot;Read more...&quot;)))))
posts))))))
;; Site configuration
(site #:title &quot;Just Another Personal Blog&quot;
#:domain &quot;glenneth.srht.site&quot;
#:default-metadata
&#39;((author . &quot;Glenn Thompson&quot;)
(email . &quot;glenn@kirstol.org&quot;))
#:readers (list commonmark-reader)
#:builders (list
(blog #:theme my-theme)
(atom-feed)
(atom-feeds-by-tag)
(static-directory &quot;images&quot;)
(static-directory &quot;assets&quot;)))
</code></pre>
<h3>Customizing the CSS</h3>
<p>To give my site a personalized touch, I crafted a CSS stylesheet that matched my aesthetic preferences. Here’s an excerpt from my <code>palenight.css</code> file:</p>
<pre><code class="language-css">body {
display: flex;
justify-content: center;
padding: 10px;
}
.content, header, footer, main {
max-width: 90%;
padding: 0 5%;
}
header {
text-align: center;
margin-bottom: 20px;
}
footer {
text-align: center;
margin-top: 20px;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin-bottom: 20px;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
body {
background-color: #292d3e;
color: #d0d0d0;
}
a {
color: #82aaff;
}
h1, h2, h3, h4, h5, h6 {
color: #c792ea;
}
.content {
background-color: #1e1e2e;
padding: 20px;
border-radius: 5px;
}
article {
background-color: #282a36;
padding: 15px;
border-radius: 8px;
margin-bottom: 20px;
}
article header {
margin-bottom: 10px;
}
.date {
color: #6272a4;
font-size: 0.9em;
}
/* Additional styles for the craftering */
.craftering {
margin: auto;
width: 50%;
text-align: center;
}
.webring-text {
text-align: center;
margin-bottom: 20px;
color: white;
}
.craftering a {
color: #dddddd;
}
.webring-text a {
color: #dddddd;
}
/* Additions for mobile device readability */
meta {
name: viewport;
content: width=device-width, initial-scale=1, shrink-to-fit=no;
}
@media screen and (max-width: 767px) {
/* Customize styles for smaller screens */
.logo {
max-width: 200px;
}
}
</code></pre>
<p>I use the <code>doom-palenight</code> theme in Emacs, my preferred text editor, and I wanted my site to match that aesthetic.</p>
<h3>Publishing with Haunt and Hut</h3>
<p>In addition to using Haunt, I adopted hut, a set of command-line tools for interacting with SourceHut, to publish my blog. This streamlined my workflow, making it easier to manage and deploy my site directly from my local environment.</p>
<h3>Conclusion</h3>
<p>Transitioning from Hugo to Haunt, learning Scheme, and embracing GNU Guix has been an enriching experience. It&#39;s not just about using new tools; it&#39;s about joining a community that values simplicity, transparency, and collaboration. If you&#39;re curious about Scheme or GNU Guix, I highly recommend checking out David Wilson&#39;s course on System Crafters and joining the discussions on IRC.</p>
<p>I am not a developer of any kind, and learning Scheme has opened my eyes as to how I can craft an environment that I want to work in, and not endure a working environment that the computer is forcing upon me.</p>
<p>Thank you for reading, and stay tuned for more updates on my journey!</p>
</article>
</div>
</div>
</main>
<footer class="bg-base-darker text-palenight-200 py-12 border-t border-palenight-400/20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<p class="text-palenight-300">&copy; 2024 Glenn Thompson. All rights reserved.</p>
<div class="webring-text mt-6">
<p class="text-palenight-300">I am part of the <a href="https://systemcrafters.net" target="_blank" class="text-accent-blue hover:text-accent-cyan">System Crafters</a> webring:</p>
</div>
<div class="craftering mt-2 flex items-center justify-center gap-4 text-accent-blue">
<a href="https://craftering.systemcrafters.net/@glenneth/previous" class="hover:text-accent-cyan">Previous</a>
<a href="https://craftering.systemcrafters.net/@glenneth" class="hover:text-accent-cyan">Random</a>
<a href="https://craftering.systemcrafters.net/@glenneth/next" class="hover:text-accent-cyan">Next</a>
</div>
<p class="text-palenight-300 mt-2">
<a href="mailto:glenn@glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenn@glenneth.org</a> |
<a href="https://glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenneth.org</a>
</p>
</div>
</div>
</footer>
</body>
</html>

378
deploy/content/posts/2024-07-26-gnu-guix-journey.html
View File

@ -1,190 +1,190 @@
<!DOCTYPE html>
<html lang="en" class="bg-base-bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta property="og:title" content="A Journey Through GNU Guix: From Installation to Returning to Arch Linux">
<meta property="og:description" content="">
<meta property="og:url" content="https://glenneth.orgcontent/posts/2024-07-26-gnu-guix-journey">
<title>A Journey Through GNU Guix: From Installation to Returning to Arch Linux - Glenn Thompson</title>
<link rel="alternate" type="application/rss+xml" title="Glenn Thompson's Blog" href="/feed.xml" />
<link href="../../dist/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
.prose-palenight {
--tw-prose-body: #bfc7d5;
--tw-prose-headings: #ffd580;
--tw-prose-links: #82aaff;
--tw-prose-code: #c792ea;
--tw-prose-pre-bg: #1b1e2b;
}
.prose h2 {
color: var(--tw-prose-headings);
font-family: Merriweather, serif;
font-weight: 700;
font-size: 1.5rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.prose p {
margin-bottom: 1rem;
line-height: 1.625;
}
.prose a {
color: var(--tw-prose-links);
text-decoration: none;
}
.prose a:hover {
color: #89ddff;
}
.prose code {
color: var(--tw-prose-code);
font-family: 'JetBrains Mono', monospace;
}
.prose pre {
background-color: var(--tw-prose-pre-bg);
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
margin-bottom: 1rem;
}
.prose ul, .prose ol {
margin-top: 0.5rem;
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.prose ul {
list-style-type: disc;
}
.prose ol {
list-style-type: decimal;
}
</style>
</head>
<body class="bg-base-bg text-palenight-50">
<nav class="bg-base-darker/80 backdrop-blur-sm shadow-sm border-b border-palenight-400/20 mb-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="/" class="text-accent-yellow font-serif text-xl font-bold">Glenn Thompson</a>
<div class="flex items-center gap-2 text-accent-yellow text-sm font-bold">
<span>personal, tech, gnu, guix, swaywm, nvidia</span>
<span>•</span>
<time datetime="2024-07-26 10:30">July 26, 2024</time>
<span>•</span>
<span>7 min read</span>
</div>
</div>
</div>
</nav>
<main class="pt-24 pb-16 px-4">
<div class="max-w-4xl mx-auto">
<div class="content text-palenight-100 space-y-6">
<header class="mb-8">
<h1 class="text-4xl font-serif font-bold text-accent-yellow">A Journey Through GNU Guix: From Installation to Returning to Arch Linux</h1>
<div class="flex items-center gap-4 text-palenight-300 mt-4">
<time datetime="2024-07-26 10:30">2024-07-26 10:30</time>
<span>•</span>
<span>7 min read</span>
<span>•</span>
<span>By Glenn Thompson</span>
</div>
<div class="flex flex-wrap gap-2 mt-4">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">personal</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">tech</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">gnu</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">guix</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">swaywm</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">nvidia</span>
</div>
</header>
<article class="prose prose-palenight max-w-none">
<h1>A Journey Through GNU Guix: From Installation to Returning to Arch Linux</h1>
<p>As a long-time user of Arch Linux, I decided to explore the world of GNU Guix to see if it could better suit my needs, especially with my growing interest in functional package management. The journey was insightful, filled with learning experiences, but ultimately led me back to the reliable shores of Arch. Here&#39;s a detailed account of my venture into GNU Guix, adding non-GNU channels, dealing with Nvidia drivers, running SwayWM, and the eventual retreat to Arch.</p>
<h2>Installation of GNU Guix</h2>
<p>The installation process of GNU Guix was straightforward, thanks to the well-documented guide provided on their official website. Here&#39;s a quick rundown of the steps I followed:</p>
<ol>
<li><strong>Downloading the Installation Image</strong>: I started by downloading the latest ISO image from the <a href="https://guix.gnu.org/">GNU Guix website</a>.</li>
<li><strong>Creating a Bootable USB</strong>: Using <code>dd</code>, I created a bootable USB stick to install GNU Guix on my system.</li>
<li><strong>Booting into the Installer</strong>: Booting from the USB was smooth, and I was greeted with the GNU Guix installer. The installer&#39;s simplicity reminded me of early days with Arch, where a minimalistic approach is preferred.</li>
<li><strong>Partitioning and Setting Up File Systems</strong>: I partitioned my drive using <code>fdisk</code> and set up my file systems. I opted for ext4 for simplicity.</li>
<li><strong>Configuring the System</strong>: Following the partition setup, I proceeded to configure my system by selecting the required packages and services. I decided to go with the Sway window manager as it&#39;s my preferred choice on Arch.</li>
</ol>
<h2>System Configuration</h2>
<p>During the installation process a window appears informing you that the <code>config.scm</code> file is located at <code>/etc/config.scm</code>. The first time I installed gnu guix on my work laptop I missed this message (pilot error) and I had to ask in the <a href="https://systemcrafters.net">System Crafters</a> IRC channel at <code>irc.libera.chat</code>, <code>#systemcrafters</code>. Come and join. It&#39;s a great place to be and the community there are an absolute treasure. Use your favourite IRC client or join through the webchat <a href="https://web.libera.chat/?channel=#systemcrafters">here</a>. We would be glad to see you. Tell them glenneth sent you :).</p>
<p>My point is, I missed some vital information, so to the guix manual online it was. This can be found <a href="https://guix.gnu.org/manual/devel/en/guix.html">here</a>. This link will take you to the dev version of the manual. Something else they don&#39;t tell you. This version has a little more detail than the standard manual, and I believe details extra features and may even be a little more up to date.</p>
<h2>Adding Non-GNU Channels</h2>
<p>One of the standout features of GNU Guix is the ability to add non-GNU channels to access a wider array of software packages. Here&#39;s how I did it:</p>
<ol>
<li><strong>Editing Channels</strong>: I edited the <code>~/.config/guix/channels.scm</code> file to include non-GNU channels.<pre><code class="language-scheme">(cons* (channel
(name &#39;non-gnu)
(url &quot;https://example.com/non-gnu-channel.git&quot;))
%default-channels)
</code></pre>
</li>
<li><strong>Updating Channels</strong>: Running <code>guix pull</code> updated my system to include packages from the non-GNU channel.</li>
</ol>
<h2>Installing Nvidia Drivers</h2>
<p>Being a gamer and someone who requires GPU acceleration for certain tasks, Nvidia drivers were a must. Here&#39;s the process I followed:</p>
<ol>
<li><strong>Adding Nvidia Channel</strong>: Added a channel that includes Nvidia drivers.</li>
<li><strong>Installing Drivers</strong>: Installed the drivers using <code>guix package -i nvidia-driver</code>.</li>
<li><strong>Configuring the System</strong>: I had to manually configure Xorg to use the Nvidia drivers, which involved editing the Xorg configuration files.</li>
</ol>
<h2>Creating My Home Environment</h2>
<p>To personalize my setup further, I used <code>guix home import</code> to create my own home environment and add packages. This allowed me to have a consistent environment across different machines. I also edited the <code>config.scm</code> file to include the latest Linux kernels and Nvidia drivers.</p>
<p>Additionally, I used the <code>syncthing home-service-type</code> in my <code>home-configuration.scm</code> file to install and configure Syncthing. This setup ensured my files were always in sync across devices, which is crucial for my workflow.</p>
<h2>GNOME</h2>
<p>All was good and I had a solid desktop environment running, even though it was gnome desktop. I had never used gnome, and I am more at home with a keyboard driven workflow. I had come from hyprland on Arch and wanted to get back to that workflow. The option I was presented with, in order to continue using wayland, pipewire etc. was SwayWM.</p>
<h2>Sway</h2>
<p>Installing SwayWM and it&#39;s dependencies and nice to haves was relatively straightforward. add the required packages, sway, swaybg, swayidle, swaylock, to my home-configuration.scm gile and run <code>guix home reconfigure</code> easy! The packages were installed and we were good to go.</p>
<p>The first issue I encountered was that sway does not run with the proprietary nvidia drivers, this was on the work laptop. I could get it to run but only after adding the <code>--unsupported-gpu</code> flag to <code>exec sway</code>. Lo and behold, we had a default sway window manager running.</p>
<h2>Challenges with SwayWM and SMB Shares</h2>
<p>With the system set up, I ran into a major roadblock: accessing SMB shares in a file manager while running SwayWM.</p>
<ol>
<li><strong>Thunar and GNOME Files</strong>: Neither Thunar nor the GNOME Files application could access SMB shares. This was crucial for my workflow as I frequently access network shares.</li>
<li><strong>Troubleshooting</strong>: I tried various solutions, including installing additional packages and tweaking configurations, but nothing seemed to work.</li>
<li><strong>Community Support</strong>: I reached out to the GNU Guix community for help. While they were supportive, the solutions provided didn&#39;t resolve my issues.</li>
</ol>
<p>To ensure that the problem was not hardware-related, I went out and purchased a Lenovo ThinkPad E16 Gen 1. I upgraded the RAM to 48GB and installed a Lenovo 2TB SSD to make it my personal laptop. However, even on this new setup, I faced the same issues accessing SMB shares and some networking services just wouldn&#39;t work.</p>
<p>I tried deleting the <code>gdm</code> login manager in my system configuration file, but after rebooting it was still showing the gnome login window. This was after reading somewhere online that sway was not on friendly terms with the gdm login manager.</p>
<h2>Returning to Arch Linux</h2>
<p>After several days of troubleshooting and not being able to access my SMB shares reliably, I made the difficult decision to revert to Arch Linux. The steps were:</p>
<ol>
<li><strong>Reinstalling Arch</strong>: I reinstalled Arch Linux using my tried-and-tested setup process.</li>
<li><strong>Configuring SwayWM</strong>: Set up SwayWM and ensured all my applications were running smoothly.</li>
<li><strong>Accessing SMB Shares</strong>: Accessing SMB shares was seamless, just as it was before my experiment with GNU Guix.</li>
</ol>
<h2>Conclusion</h2>
<p>I am still running GNU guix on the work laptop, I had to cave on my personal laptop and revert to Arch. My journey with GNU Guix was both enlightening and challenging. While I appreciate the functional package management and the philosophy behind GNU Guix, certain practical issues, like accessing SMB shares, were deal-breakers for my workflow. Arch Linux continues to be my go-to distribution, providing the flexibility and reliability I need for my daily tasks. So, at the moment I am using my personal laptop for work and still trying to figure out the issues I am having on my work laptop. But, to be honest, I prefer working on the thinkpad over working on the MSI laptop that work handed out :).</p>
<p>If you&#39;re an enthusiast looking to explore new package management paradigms, I highly recommend giving GNU Guix a try. Just be prepared for a few hiccups along the way, and always have a backup plan!</p>
<hr>
<p>Feel free to share your thoughts and experiences with GNU Guix or any other distributions you&#39;ve tried. Let&#39;s keep the conversation going!</p>
<h2>Shameless plug</h2>
<p>Go <a href="https://systemcrafters.net/community/">here</a> to find all the ways you can engage with the SystemCrafters community. It&#39;s a great place to hang out and discuss all thing craftery. You will also notice the Craftering ring that I am a part of. Click the links and see blogs by some of the community members. Always interesting to read what other Crafters are up to.</p>
<p>Thanks for taking the time to read my blog post. It is greatly appreciated, and I hope you come back.</p>
<p>Happy Hacking!!</p>
</article>
</div>
</div>
</main>
<footer class="bg-base-darker text-palenight-200 py-12 border-t border-palenight-400/20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<p class="text-palenight-300">&copy; 2024 Glenn Thompson. All rights reserved.</p>
<div class="webring-text mt-6">
<p class="text-palenight-300">I am part of the <a href="https://systemcrafters.net" target="_blank" class="text-accent-blue hover:text-accent-cyan">System Crafters</a> webring:</p>
</div>
<div class="craftering mt-2 flex items-center justify-center gap-4 text-accent-blue">
<a href="https://craftering.systemcrafters.net/@glenneth/previous" class="hover:text-accent-cyan">Previous</a>
<a href="https://craftering.systemcrafters.net/@glenneth" class="hover:text-accent-cyan">Random</a>
<a href="https://craftering.systemcrafters.net/@glenneth/next" class="hover:text-accent-cyan">Next</a>
</div>
<p class="text-palenight-300 mt-2">
<a href="mailto:glenn@glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenn@glenneth.org</a> |
<a href="https://glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenneth.org</a>
</p>
</div>
</div>
</footer>
</body>
<!DOCTYPE html>
<html lang="en" class="bg-base-bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta property="og:title" content="A Journey Through GNU Guix: From Installation to Returning to Arch Linux">
<meta property="og:description" content="">
<meta property="og:url" content="https://glenneth.orgcontent/posts/2024-07-26-gnu-guix-journey">
<title>A Journey Through GNU Guix: From Installation to Returning to Arch Linux - Glenn Thompson</title>
<link rel="alternate" type="application/rss+xml" title="Glenn Thompson's Blog" href="/feed.xml" />
<link href="../../dist/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
.prose-palenight {
--tw-prose-body: #bfc7d5;
--tw-prose-headings: #ffd580;
--tw-prose-links: #82aaff;
--tw-prose-code: #c792ea;
--tw-prose-pre-bg: #1b1e2b;
}
.prose h2 {
color: var(--tw-prose-headings);
font-family: Merriweather, serif;
font-weight: 700;
font-size: 1.5rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.prose p {
margin-bottom: 1rem;
line-height: 1.625;
}
.prose a {
color: var(--tw-prose-links);
text-decoration: none;
}
.prose a:hover {
color: #89ddff;
}
.prose code {
color: var(--tw-prose-code);
font-family: 'JetBrains Mono', monospace;
}
.prose pre {
background-color: var(--tw-prose-pre-bg);
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
margin-bottom: 1rem;
}
.prose ul, .prose ol {
margin-top: 0.5rem;
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.prose ul {
list-style-type: disc;
}
.prose ol {
list-style-type: decimal;
}
</style>
</head>
<body class="bg-base-bg text-palenight-50">
<nav class="bg-base-darker/80 backdrop-blur-sm shadow-sm border-b border-palenight-400/20 mb-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="/" class="text-accent-yellow font-serif text-xl font-bold">Glenn Thompson</a>
<div class="flex items-center gap-2 text-accent-yellow text-sm font-bold">
<span>personal, tech, gnu, guix, swaywm, nvidia</span>
<span>•</span>
<time datetime="2024-07-26 10:30">July 26, 2024</time>
<span>•</span>
<span>7 min read</span>
</div>
</div>
</div>
</nav>
<main class="pt-24 pb-16 px-4">
<div class="max-w-4xl mx-auto">
<div class="content text-palenight-100 space-y-6">
<header class="mb-8">
<h1 class="text-4xl font-serif font-bold text-accent-yellow">A Journey Through GNU Guix: From Installation to Returning to Arch Linux</h1>
<div class="flex items-center gap-4 text-palenight-300 mt-4">
<time datetime="2024-07-26 10:30">2024-07-26 10:30</time>
<span>•</span>
<span>7 min read</span>
<span>•</span>
<span>By Glenn Thompson</span>
</div>
<div class="flex flex-wrap gap-2 mt-4">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">personal</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">tech</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">gnu</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">guix</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">swaywm</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">nvidia</span>
</div>
</header>
<article class="prose prose-palenight max-w-none">
<h1>A Journey Through GNU Guix: From Installation to Returning to Arch Linux</h1>
<p>As a long-time user of Arch Linux, I decided to explore the world of GNU Guix to see if it could better suit my needs, especially with my growing interest in functional package management. The journey was insightful, filled with learning experiences, but ultimately led me back to the reliable shores of Arch. Here&#39;s a detailed account of my venture into GNU Guix, adding non-GNU channels, dealing with Nvidia drivers, running SwayWM, and the eventual retreat to Arch.</p>
<h2>Installation of GNU Guix</h2>
<p>The installation process of GNU Guix was straightforward, thanks to the well-documented guide provided on their official website. Here&#39;s a quick rundown of the steps I followed:</p>
<ol>
<li><strong>Downloading the Installation Image</strong>: I started by downloading the latest ISO image from the <a href="https://guix.gnu.org/">GNU Guix website</a>.</li>
<li><strong>Creating a Bootable USB</strong>: Using <code>dd</code>, I created a bootable USB stick to install GNU Guix on my system.</li>
<li><strong>Booting into the Installer</strong>: Booting from the USB was smooth, and I was greeted with the GNU Guix installer. The installer&#39;s simplicity reminded me of early days with Arch, where a minimalistic approach is preferred.</li>
<li><strong>Partitioning and Setting Up File Systems</strong>: I partitioned my drive using <code>fdisk</code> and set up my file systems. I opted for ext4 for simplicity.</li>
<li><strong>Configuring the System</strong>: Following the partition setup, I proceeded to configure my system by selecting the required packages and services. I decided to go with the Sway window manager as it&#39;s my preferred choice on Arch.</li>
</ol>
<h2>System Configuration</h2>
<p>During the installation process a window appears informing you that the <code>config.scm</code> file is located at <code>/etc/config.scm</code>. The first time I installed gnu guix on my work laptop I missed this message (pilot error) and I had to ask in the <a href="https://systemcrafters.net">System Crafters</a> IRC channel at <code>irc.libera.chat</code>, <code>#systemcrafters</code>. Come and join. It&#39;s a great place to be and the community there are an absolute treasure. Use your favourite IRC client or join through the webchat <a href="https://web.libera.chat/?channel=#systemcrafters">here</a>. We would be glad to see you. Tell them glenneth sent you :).</p>
<p>My point is, I missed some vital information, so to the guix manual online it was. This can be found <a href="https://guix.gnu.org/manual/devel/en/guix.html">here</a>. This link will take you to the dev version of the manual. Something else they don&#39;t tell you. This version has a little more detail than the standard manual, and I believe details extra features and may even be a little more up to date.</p>
<h2>Adding Non-GNU Channels</h2>
<p>One of the standout features of GNU Guix is the ability to add non-GNU channels to access a wider array of software packages. Here&#39;s how I did it:</p>
<ol>
<li><strong>Editing Channels</strong>: I edited the <code>~/.config/guix/channels.scm</code> file to include non-GNU channels.<pre><code class="language-scheme">(cons* (channel
(name &#39;non-gnu)
(url &quot;https://example.com/non-gnu-channel.git&quot;))
%default-channels)
</code></pre>
</li>
<li><strong>Updating Channels</strong>: Running <code>guix pull</code> updated my system to include packages from the non-GNU channel.</li>
</ol>
<h2>Installing Nvidia Drivers</h2>
<p>Being a gamer and someone who requires GPU acceleration for certain tasks, Nvidia drivers were a must. Here&#39;s the process I followed:</p>
<ol>
<li><strong>Adding Nvidia Channel</strong>: Added a channel that includes Nvidia drivers.</li>
<li><strong>Installing Drivers</strong>: Installed the drivers using <code>guix package -i nvidia-driver</code>.</li>
<li><strong>Configuring the System</strong>: I had to manually configure Xorg to use the Nvidia drivers, which involved editing the Xorg configuration files.</li>
</ol>
<h2>Creating My Home Environment</h2>
<p>To personalize my setup further, I used <code>guix home import</code> to create my own home environment and add packages. This allowed me to have a consistent environment across different machines. I also edited the <code>config.scm</code> file to include the latest Linux kernels and Nvidia drivers.</p>
<p>Additionally, I used the <code>syncthing home-service-type</code> in my <code>home-configuration.scm</code> file to install and configure Syncthing. This setup ensured my files were always in sync across devices, which is crucial for my workflow.</p>
<h2>GNOME</h2>
<p>All was good and I had a solid desktop environment running, even though it was gnome desktop. I had never used gnome, and I am more at home with a keyboard driven workflow. I had come from hyprland on Arch and wanted to get back to that workflow. The option I was presented with, in order to continue using wayland, pipewire etc. was SwayWM.</p>
<h2>Sway</h2>
<p>Installing SwayWM and it&#39;s dependencies and nice to haves was relatively straightforward. add the required packages, sway, swaybg, swayidle, swaylock, to my home-configuration.scm gile and run <code>guix home reconfigure</code> easy! The packages were installed and we were good to go.</p>
<p>The first issue I encountered was that sway does not run with the proprietary nvidia drivers, this was on the work laptop. I could get it to run but only after adding the <code>--unsupported-gpu</code> flag to <code>exec sway</code>. Lo and behold, we had a default sway window manager running.</p>
<h2>Challenges with SwayWM and SMB Shares</h2>
<p>With the system set up, I ran into a major roadblock: accessing SMB shares in a file manager while running SwayWM.</p>
<ol>
<li><strong>Thunar and GNOME Files</strong>: Neither Thunar nor the GNOME Files application could access SMB shares. This was crucial for my workflow as I frequently access network shares.</li>
<li><strong>Troubleshooting</strong>: I tried various solutions, including installing additional packages and tweaking configurations, but nothing seemed to work.</li>
<li><strong>Community Support</strong>: I reached out to the GNU Guix community for help. While they were supportive, the solutions provided didn&#39;t resolve my issues.</li>
</ol>
<p>To ensure that the problem was not hardware-related, I went out and purchased a Lenovo ThinkPad E16 Gen 1. I upgraded the RAM to 48GB and installed a Lenovo 2TB SSD to make it my personal laptop. However, even on this new setup, I faced the same issues accessing SMB shares and some networking services just wouldn&#39;t work.</p>
<p>I tried deleting the <code>gdm</code> login manager in my system configuration file, but after rebooting it was still showing the gnome login window. This was after reading somewhere online that sway was not on friendly terms with the gdm login manager.</p>
<h2>Returning to Arch Linux</h2>
<p>After several days of troubleshooting and not being able to access my SMB shares reliably, I made the difficult decision to revert to Arch Linux. The steps were:</p>
<ol>
<li><strong>Reinstalling Arch</strong>: I reinstalled Arch Linux using my tried-and-tested setup process.</li>
<li><strong>Configuring SwayWM</strong>: Set up SwayWM and ensured all my applications were running smoothly.</li>
<li><strong>Accessing SMB Shares</strong>: Accessing SMB shares was seamless, just as it was before my experiment with GNU Guix.</li>
</ol>
<h2>Conclusion</h2>
<p>I am still running GNU guix on the work laptop, I had to cave on my personal laptop and revert to Arch. My journey with GNU Guix was both enlightening and challenging. While I appreciate the functional package management and the philosophy behind GNU Guix, certain practical issues, like accessing SMB shares, were deal-breakers for my workflow. Arch Linux continues to be my go-to distribution, providing the flexibility and reliability I need for my daily tasks. So, at the moment I am using my personal laptop for work and still trying to figure out the issues I am having on my work laptop. But, to be honest, I prefer working on the thinkpad over working on the MSI laptop that work handed out :).</p>
<p>If you&#39;re an enthusiast looking to explore new package management paradigms, I highly recommend giving GNU Guix a try. Just be prepared for a few hiccups along the way, and always have a backup plan!</p>
<hr>
<p>Feel free to share your thoughts and experiences with GNU Guix or any other distributions you&#39;ve tried. Let&#39;s keep the conversation going!</p>
<h2>Shameless plug</h2>
<p>Go <a href="https://systemcrafters.net/community/">here</a> to find all the ways you can engage with the SystemCrafters community. It&#39;s a great place to hang out and discuss all thing craftery. You will also notice the Craftering ring that I am a part of. Click the links and see blogs by some of the community members. Always interesting to read what other Crafters are up to.</p>
<p>Thanks for taking the time to read my blog post. It is greatly appreciated, and I hope you come back.</p>
<p>Happy Hacking!!</p>
</article>
</div>
</div>
</main>
<footer class="bg-base-darker text-palenight-200 py-12 border-t border-palenight-400/20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<p class="text-palenight-300">&copy; 2024 Glenn Thompson. All rights reserved.</p>
<div class="webring-text mt-6">
<p class="text-palenight-300">I am part of the <a href="https://systemcrafters.net" target="_blank" class="text-accent-blue hover:text-accent-cyan">System Crafters</a> webring:</p>
</div>
<div class="craftering mt-2 flex items-center justify-center gap-4 text-accent-blue">
<a href="https://craftering.systemcrafters.net/@glenneth/previous" class="hover:text-accent-cyan">Previous</a>
<a href="https://craftering.systemcrafters.net/@glenneth" class="hover:text-accent-cyan">Random</a>
<a href="https://craftering.systemcrafters.net/@glenneth/next" class="hover:text-accent-cyan">Next</a>
</div>
<p class="text-palenight-300 mt-2">
<a href="mailto:glenn@glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenn@glenneth.org</a> |
<a href="https://glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenneth.org</a>
</p>
</div>
</div>
</footer>
</body>
</html>

374
deploy/content/posts/2024-09-24-scheme-journey.html
View File

@ -1,188 +1,188 @@
<!DOCTYPE html>
<html lang="en" class="bg-base-bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta property="og:title" content="A Journey into Scheme">
<meta property="og:description" content="">
<meta property="og:url" content="https://glenneth.orgcontent/posts/2024-09-24-scheme-journey">
<title>A Journey into Scheme - Glenn Thompson</title>
<link rel="alternate" type="application/rss+xml" title="Glenn Thompson's Blog" href="/feed.xml" />
<link href="../../dist/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
.prose-palenight {
--tw-prose-body: #bfc7d5;
--tw-prose-headings: #ffd580;
--tw-prose-links: #82aaff;
--tw-prose-code: #c792ea;
--tw-prose-pre-bg: #1b1e2b;
}
.prose h2 {
color: var(--tw-prose-headings);
font-family: Merriweather, serif;
font-weight: 700;
font-size: 1.5rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.prose p {
margin-bottom: 1rem;
line-height: 1.625;
}
.prose a {
color: var(--tw-prose-links);
text-decoration: none;
}
.prose a:hover {
color: #89ddff;
}
.prose code {
color: var(--tw-prose-code);
font-family: 'JetBrains Mono', monospace;
}
.prose pre {
background-color: var(--tw-prose-pre-bg);
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
margin-bottom: 1rem;
}
.prose ul, .prose ol {
margin-top: 0.5rem;
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.prose ul {
list-style-type: disc;
}
.prose ol {
list-style-type: decimal;
}
</style>
</head>
<body class="bg-base-bg text-palenight-50">
<nav class="bg-base-darker/80 backdrop-blur-sm shadow-sm border-b border-palenight-400/20 mb-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="/" class="text-accent-yellow font-serif text-xl font-bold">Glenn Thompson</a>
<div class="flex items-center gap-2 text-accent-yellow text-sm font-bold">
<span>personal, tech, guile, scheme, gnu, development</span>
<span>•</span>
<time datetime="2024-09-24 09:30">September 24, 2024</time>
<span>•</span>
<span>5 min read</span>
</div>
</div>
</div>
</nav>
<main class="pt-24 pb-16 px-4">
<div class="max-w-4xl mx-auto">
<div class="content text-palenight-100 space-y-6">
<header class="mb-8">
<h1 class="text-4xl font-serif font-bold text-accent-yellow">A Journey into Scheme</h1>
<div class="flex items-center gap-4 text-palenight-300 mt-4">
<time datetime="2024-09-24 09:30">2024-09-24 09:30</time>
<span>•</span>
<span>5 min read</span>
<span>•</span>
<span>By Glenn Thompson</span>
</div>
<div class="flex flex-wrap gap-2 mt-4">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">personal</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">tech</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">guile</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">scheme</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">gnu</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">development</span>
</div>
</header>
<article class="prose prose-palenight max-w-none">
<h1>My Journey into Scheme: Building a Simple Symlink Manager with Guile Scheme</h1>
<h2>Introduction</h2>
<p>I&#39;ve spent my career as an electrical engineer, not a software developer. However, my recent journey in to GNU/Liniux required a tool for managing symlinks, and that&#39;s how I began learning Scheme—specifically Guile Scheme. I&#39;m writing this post to share how I built <code>stash</code>, a utility that mimics GNU Stow&#39;s functionality, and how my learning journey was shaped by David Wilson&#39;s &quot;Hands-On Guile Scheme for Beginners&quot; course from System Crafters, more about this below.</p>
<h2>How I Started with Scheme</h2>
<p>My programming background was <em>VERY</em> limited, I produce documents in (La)Tex but I decided to take the plunge into learning Scheme, thanks to a course led by David Wilson from System Crafters. The course, <a href="https://systemcrafters.net/courses/hands-on-guile-scheme-beginners/">&quot;Hands-On Guile Scheme for Beginners&quot;</a>, was incredibly helpful in making Scheme accessible even for someone like me, without a traditional programming background. I know (La)Tex isn&#39;t a programming language, it&#39;s typesetting. But how hard can it be? Right?</p>
<p>The course took me through the basics of Scheme, from simple expressions to more complex concepts like functions, recursion, and working with files. This structured learning environment gave me the confidence to start building <code>stash</code>.</p>
<p>The course was &quot;instructor-led&quot; with live meet-up sessions weekly. David has since made this course on-demand, and will be, if not already, available at the above link. Highly recommended if you are interested in taking your first steps with scheme.</p>
<h2>Why Build Stash?</h2>
<p>After completing David Wilson&#39;s course, I wanted to put my newly found Guile Scheme skills into practice with a real project. It wasn&#39;t enough just to understand the language conceptually—I needed to build something tangible that solved a problem I encountered regularly in my workflow. Writing <code>stash</code> gave me that opportunity. It allowed me to apply what I&#39;d learned while also deepening my understanding of file manipulation, command-line tools, and conflict resolution—all within the Guile Scheme environment.</p>
<p>After migrating to GNU/Linux and speaking with other <a href="https://systemcrafters.net/community">System Crafters Community</a> members, I found I needed a way to manage symbolic links and organize directories. Existing tools like GNU Stow helped, but I wanted to learn how such tools are built. I decided to write my own version using Guile Scheme to enhance my understanding of the language and to have more control over the functionality.</p>
<p>The goal of <code>stash</code> is simple: allow users to move directories and create symlinks with conflict resolution, offering options to overwrite, back up, skip, or cancel the operation.</p>
<h2>Breaking Down Stash</h2>
<p>The core of <code>stash</code> revolves around:</p>
<ol>
<li><strong>Moving Directories</strong>: Using Scheme&#39;s file manipulation functions, I learned how to move directories and files around. </li>
<li><strong>Creating Symlinks</strong>: I implemented functions to create symlinks to the moved directories, ensuring that the original structure remains accessible.</li>
<li><strong>Conflict Resolution</strong>: One of the key features I wanted was handling conflicts when a file or symlink already exists at the target location. This required prompting the user for input and responding accordingly (backup, overwrite, skip, or cancel).</li>
</ol>
<p>Here&#39;s an excerpt of the core functionality that handles moving a source directory and creating a symlink:</p>
<pre><code class="language-scheme">;;; Helper function to move source to target
(define (move-source-to-target source-dir target-dir)
&quot;Move the entire source directory to the target directory.&quot;
(let* ((source-dir (expand-home source-dir))
(target-dir (expand-home target-dir))
(source-name (basename source-dir))
(target-source-dir (string-append target-dir &quot;/&quot; source-name)))
(if (file-exists? target-source-dir)
;; Conflict handling here...
...)
(rename-file source-dir target-source-dir)
(display (format #f &quot;Moved ~a to ~a\n&quot; source-dir target-source-dir))))
</code></pre>
<h2>What I Learned</h2>
<p>This project taught me a lot about not just Scheme, but programming in general:</p>
<ul>
<li><strong>File and Directory Manipulation</strong>: Scheme&#39;s file handling functions were different from what I had experienced before, but they allowed for powerful manipulation of file systems.</li>
<li><strong>Command-Line Utilities</strong>: Scheme isn&#39;t just a language for academic exercises; you can write real, useful command-line tools with it.</li>
<li><strong>Problem Solving</strong>: From parsing command-line arguments to resolving conflicts with existing files, every part of the program required careful thought and consideration of edge cases.</li>
</ul>
<h2>Guile Scheme Support Resources</h2>
<ol>
<li><p><strong><a href="https://www.gnu.org/software/guile/docs/">Guile Scheme Documentation</a></strong><br>The official documentation for Guile Scheme, which includes tutorials, references, and the Guile Manual.</p>
</li>
<li><p><strong><a href="https://www.gnu.org/software/guile/manual/html_node/">Guile Reference Manual</a></strong><br>A comprehensive manual covering core language concepts, libraries, and functions available in Guile Scheme.</p>
</li>
<li><p><strong><a href="http://community.schemewiki.org/">Scheme Wiki</a></strong><br>A community-maintained wiki that covers various Scheme dialects, including Guile Scheme, with tutorials, guides, and general information on Scheme programming.</p>
</li>
<li><p><strong><a href="http://schemers.org/">Guile at Schemers.org</a></strong><br>A site dedicated to Scheme with resources, libraries, tools, and documentation for Scheme and its implementations, including Guile.</p>
</li>
<li><p><strong><a href="https://systemcrafters.net/">System Crafters</a></strong><br>Led by David Wilson, System Crafters provides tutorials and blog posts on Guile Scheme and other GNU tools.</p>
</li>
<li><p><strong><a href="https://lists.gnu.org/mailman/listinfo/guile-user">Guile Users Mailing List</a></strong><br>Join the Guile mailing list to ask questions and engage with the Guile Scheme community.</p>
</li>
<li><p><strong><a href="https://github.com/artyom-poptsov/guile-cookbook">Guile Cookbook</a></strong><br>An unofficial GitHub repository with practical code snippets and tips for Guile Scheme, covering various common use cases and tasks.</p>
</li>
<li><p><strong><a href="https://libera.chat/">#guile and #scheme on Libera Chat IRC</a></strong><br>A helpful IRC channel where you can connect with other Guile users for real-time support and advice.</p>
</li>
<li><p><strong><a href="https://Libera.chat/">#systemcrafters on Libera Chat IRC</a></strong><br>A <em>SUPER</em> helpful IRC channel not only for guile and scheme, there are a huge variety of different people here. Tell them glenneth sent you.</p>
</li>
</ol>
<h2>Next Steps</h2>
<p>I am still refining <code>stash</code>, especially around its conflict resolution system and the way it handles symbolic links. But it&#39;s in a usable state, and I&#39;m excited to continue iterating on it. You can check out the code <a href="https://codeberg.org/glenneth/stash">on Codeberg</a>.</p>
<p>If you&#39;re curious about Scheme and how it can be used practically, I highly recommend checking out David Wilson&#39;s course. It&#39;s been instrumental in helping me grasp the concepts I needed to build this tool. Here&#39;s the link, again :) <a href="https://systemcrafters.net/courses/hands-on-guile-scheme-beginners/">&quot;Hands-On Guile Scheme for Beginners&quot;</a></p>
</article>
</div>
</div>
</main>
<footer class="bg-base-darker text-palenight-200 py-12 border-t border-palenight-400/20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<p class="text-palenight-300">&copy; 2024 Glenn Thompson. All rights reserved.</p>
<div class="webring-text mt-6">
<p class="text-palenight-300">I am part of the <a href="https://systemcrafters.net" target="_blank" class="text-accent-blue hover:text-accent-cyan">System Crafters</a> webring:</p>
</div>
<div class="craftering mt-2 flex items-center justify-center gap-4 text-accent-blue">
<a href="https://craftering.systemcrafters.net/@glenneth/previous" class="hover:text-accent-cyan">Previous</a>
<a href="https://craftering.systemcrafters.net/@glenneth" class="hover:text-accent-cyan">Random</a>
<a href="https://craftering.systemcrafters.net/@glenneth/next" class="hover:text-accent-cyan">Next</a>
</div>
<p class="text-palenight-300 mt-2">
<a href="mailto:glenn@glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenn@glenneth.org</a> |
<a href="https://glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenneth.org</a>
</p>
</div>
</div>
</footer>
</body>
<!DOCTYPE html>
<html lang="en" class="bg-base-bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta property="og:title" content="A Journey into Scheme">
<meta property="og:description" content="">
<meta property="og:url" content="https://glenneth.orgcontent/posts/2024-09-24-scheme-journey">
<title>A Journey into Scheme - Glenn Thompson</title>
<link rel="alternate" type="application/rss+xml" title="Glenn Thompson's Blog" href="/feed.xml" />
<link href="../../dist/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
.prose-palenight {
--tw-prose-body: #bfc7d5;
--tw-prose-headings: #ffd580;
--tw-prose-links: #82aaff;
--tw-prose-code: #c792ea;
--tw-prose-pre-bg: #1b1e2b;
}
.prose h2 {
color: var(--tw-prose-headings);
font-family: Merriweather, serif;
font-weight: 700;
font-size: 1.5rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.prose p {
margin-bottom: 1rem;
line-height: 1.625;
}
.prose a {
color: var(--tw-prose-links);
text-decoration: none;
}
.prose a:hover {
color: #89ddff;
}
.prose code {
color: var(--tw-prose-code);
font-family: 'JetBrains Mono', monospace;
}
.prose pre {
background-color: var(--tw-prose-pre-bg);
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
margin-bottom: 1rem;
}
.prose ul, .prose ol {
margin-top: 0.5rem;
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.prose ul {
list-style-type: disc;
}
.prose ol {
list-style-type: decimal;
}
</style>
</head>
<body class="bg-base-bg text-palenight-50">
<nav class="bg-base-darker/80 backdrop-blur-sm shadow-sm border-b border-palenight-400/20 mb-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="/" class="text-accent-yellow font-serif text-xl font-bold">Glenn Thompson</a>
<div class="flex items-center gap-2 text-accent-yellow text-sm font-bold">
<span>personal, tech, guile, scheme, gnu, development</span>
<span>•</span>
<time datetime="2024-09-24 09:30">September 24, 2024</time>
<span>•</span>
<span>5 min read</span>
</div>
</div>
</div>
</nav>
<main class="pt-24 pb-16 px-4">
<div class="max-w-4xl mx-auto">
<div class="content text-palenight-100 space-y-6">
<header class="mb-8">
<h1 class="text-4xl font-serif font-bold text-accent-yellow">A Journey into Scheme</h1>
<div class="flex items-center gap-4 text-palenight-300 mt-4">
<time datetime="2024-09-24 09:30">2024-09-24 09:30</time>
<span>•</span>
<span>5 min read</span>
<span>•</span>
<span>By Glenn Thompson</span>
</div>
<div class="flex flex-wrap gap-2 mt-4">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">personal</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">tech</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">guile</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">scheme</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">gnu</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">development</span>
</div>
</header>
<article class="prose prose-palenight max-w-none">
<h1>My Journey into Scheme: Building a Simple Symlink Manager with Guile Scheme</h1>
<h2>Introduction</h2>
<p>I&#39;ve spent my career as an electrical engineer, not a software developer. However, my recent journey in to GNU/Liniux required a tool for managing symlinks, and that&#39;s how I began learning Scheme—specifically Guile Scheme. I&#39;m writing this post to share how I built <code>stash</code>, a utility that mimics GNU Stow&#39;s functionality, and how my learning journey was shaped by David Wilson&#39;s &quot;Hands-On Guile Scheme for Beginners&quot; course from System Crafters, more about this below.</p>
<h2>How I Started with Scheme</h2>
<p>My programming background was <em>VERY</em> limited, I produce documents in (La)Tex but I decided to take the plunge into learning Scheme, thanks to a course led by David Wilson from System Crafters. The course, <a href="https://systemcrafters.net/courses/hands-on-guile-scheme-beginners/">&quot;Hands-On Guile Scheme for Beginners&quot;</a>, was incredibly helpful in making Scheme accessible even for someone like me, without a traditional programming background. I know (La)Tex isn&#39;t a programming language, it&#39;s typesetting. But how hard can it be? Right?</p>
<p>The course took me through the basics of Scheme, from simple expressions to more complex concepts like functions, recursion, and working with files. This structured learning environment gave me the confidence to start building <code>stash</code>.</p>
<p>The course was &quot;instructor-led&quot; with live meet-up sessions weekly. David has since made this course on-demand, and will be, if not already, available at the above link. Highly recommended if you are interested in taking your first steps with scheme.</p>
<h2>Why Build Stash?</h2>
<p>After completing David Wilson&#39;s course, I wanted to put my newly found Guile Scheme skills into practice with a real project. It wasn&#39;t enough just to understand the language conceptually—I needed to build something tangible that solved a problem I encountered regularly in my workflow. Writing <code>stash</code> gave me that opportunity. It allowed me to apply what I&#39;d learned while also deepening my understanding of file manipulation, command-line tools, and conflict resolution—all within the Guile Scheme environment.</p>
<p>After migrating to GNU/Linux and speaking with other <a href="https://systemcrafters.net/community">System Crafters Community</a> members, I found I needed a way to manage symbolic links and organize directories. Existing tools like GNU Stow helped, but I wanted to learn how such tools are built. I decided to write my own version using Guile Scheme to enhance my understanding of the language and to have more control over the functionality.</p>
<p>The goal of <code>stash</code> is simple: allow users to move directories and create symlinks with conflict resolution, offering options to overwrite, back up, skip, or cancel the operation.</p>
<h2>Breaking Down Stash</h2>
<p>The core of <code>stash</code> revolves around:</p>
<ol>
<li><strong>Moving Directories</strong>: Using Scheme&#39;s file manipulation functions, I learned how to move directories and files around. </li>
<li><strong>Creating Symlinks</strong>: I implemented functions to create symlinks to the moved directories, ensuring that the original structure remains accessible.</li>
<li><strong>Conflict Resolution</strong>: One of the key features I wanted was handling conflicts when a file or symlink already exists at the target location. This required prompting the user for input and responding accordingly (backup, overwrite, skip, or cancel).</li>
</ol>
<p>Here&#39;s an excerpt of the core functionality that handles moving a source directory and creating a symlink:</p>
<pre><code class="language-scheme">;;; Helper function to move source to target
(define (move-source-to-target source-dir target-dir)
&quot;Move the entire source directory to the target directory.&quot;
(let* ((source-dir (expand-home source-dir))
(target-dir (expand-home target-dir))
(source-name (basename source-dir))
(target-source-dir (string-append target-dir &quot;/&quot; source-name)))
(if (file-exists? target-source-dir)
;; Conflict handling here...
...)
(rename-file source-dir target-source-dir)
(display (format #f &quot;Moved ~a to ~a\n&quot; source-dir target-source-dir))))
</code></pre>
<h2>What I Learned</h2>
<p>This project taught me a lot about not just Scheme, but programming in general:</p>
<ul>
<li><strong>File and Directory Manipulation</strong>: Scheme&#39;s file handling functions were different from what I had experienced before, but they allowed for powerful manipulation of file systems.</li>
<li><strong>Command-Line Utilities</strong>: Scheme isn&#39;t just a language for academic exercises; you can write real, useful command-line tools with it.</li>
<li><strong>Problem Solving</strong>: From parsing command-line arguments to resolving conflicts with existing files, every part of the program required careful thought and consideration of edge cases.</li>
</ul>
<h2>Guile Scheme Support Resources</h2>
<ol>
<li><p><strong><a href="https://www.gnu.org/software/guile/docs/">Guile Scheme Documentation</a></strong><br>The official documentation for Guile Scheme, which includes tutorials, references, and the Guile Manual.</p>
</li>
<li><p><strong><a href="https://www.gnu.org/software/guile/manual/html_node/">Guile Reference Manual</a></strong><br>A comprehensive manual covering core language concepts, libraries, and functions available in Guile Scheme.</p>
</li>
<li><p><strong><a href="http://community.schemewiki.org/">Scheme Wiki</a></strong><br>A community-maintained wiki that covers various Scheme dialects, including Guile Scheme, with tutorials, guides, and general information on Scheme programming.</p>
</li>
<li><p><strong><a href="http://schemers.org/">Guile at Schemers.org</a></strong><br>A site dedicated to Scheme with resources, libraries, tools, and documentation for Scheme and its implementations, including Guile.</p>
</li>
<li><p><strong><a href="https://systemcrafters.net/">System Crafters</a></strong><br>Led by David Wilson, System Crafters provides tutorials and blog posts on Guile Scheme and other GNU tools.</p>
</li>
<li><p><strong><a href="https://lists.gnu.org/mailman/listinfo/guile-user">Guile Users Mailing List</a></strong><br>Join the Guile mailing list to ask questions and engage with the Guile Scheme community.</p>
</li>
<li><p><strong><a href="https://github.com/artyom-poptsov/guile-cookbook">Guile Cookbook</a></strong><br>An unofficial GitHub repository with practical code snippets and tips for Guile Scheme, covering various common use cases and tasks.</p>
</li>
<li><p><strong><a href="https://libera.chat/">#guile and #scheme on Libera Chat IRC</a></strong><br>A helpful IRC channel where you can connect with other Guile users for real-time support and advice.</p>
</li>
<li><p><strong><a href="https://Libera.chat/">#systemcrafters on Libera Chat IRC</a></strong><br>A <em>SUPER</em> helpful IRC channel not only for guile and scheme, there are a huge variety of different people here. Tell them glenneth sent you.</p>
</li>
</ol>
<h2>Next Steps</h2>
<p>I am still refining <code>stash</code>, especially around its conflict resolution system and the way it handles symbolic links. But it&#39;s in a usable state, and I&#39;m excited to continue iterating on it. You can check out the code <a href="https://codeberg.org/glenneth/stash">on Codeberg</a>.</p>
<p>If you&#39;re curious about Scheme and how it can be used practically, I highly recommend checking out David Wilson&#39;s course. It&#39;s been instrumental in helping me grasp the concepts I needed to build this tool. Here&#39;s the link, again :) <a href="https://systemcrafters.net/courses/hands-on-guile-scheme-beginners/">&quot;Hands-On Guile Scheme for Beginners&quot;</a></p>
</article>
</div>
</div>
</main>
<footer class="bg-base-darker text-palenight-200 py-12 border-t border-palenight-400/20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<p class="text-palenight-300">&copy; 2024 Glenn Thompson. All rights reserved.</p>
<div class="webring-text mt-6">
<p class="text-palenight-300">I am part of the <a href="https://systemcrafters.net" target="_blank" class="text-accent-blue hover:text-accent-cyan">System Crafters</a> webring:</p>
</div>
<div class="craftering mt-2 flex items-center justify-center gap-4 text-accent-blue">
<a href="https://craftering.systemcrafters.net/@glenneth/previous" class="hover:text-accent-cyan">Previous</a>
<a href="https://craftering.systemcrafters.net/@glenneth" class="hover:text-accent-cyan">Random</a>
<a href="https://craftering.systemcrafters.net/@glenneth/next" class="hover:text-accent-cyan">Next</a>
</div>
<p class="text-palenight-300 mt-2">
<a href="mailto:glenn@glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenn@glenneth.org</a> |
<a href="https://glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenneth.org</a>
</p>
</div>
</div>
</footer>
</body>
</html>

534
deploy/content/posts/2024-12-03-practical-scheme.html
View File

@ -1,268 +1,268 @@
<!DOCTYPE html>
<html lang="en" class="bg-base-bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta property="og:title" content="Beyond Theory: Building Practical Tools with Guile Scheme">
<meta property="og:description" content="">
<meta property="og:url" content="https://glenneth.orgcontent/posts/2024-12-03-practical-scheme">
<title>Beyond Theory: Building Practical Tools with Guile Scheme - Glenn Thompson</title>
<link rel="alternate" type="application/rss+xml" title="Glenn Thompson's Blog" href="/feed.xml" />
<link href="../../dist/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
.prose-palenight {
--tw-prose-body: #bfc7d5;
--tw-prose-headings: #ffd580;
--tw-prose-links: #82aaff;
--tw-prose-code: #c792ea;
--tw-prose-pre-bg: #1b1e2b;
}
.prose h2 {
color: var(--tw-prose-headings);
font-family: Merriweather, serif;
font-weight: 700;
font-size: 1.5rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.prose p {
margin-bottom: 1rem;
line-height: 1.625;
}
.prose a {
color: var(--tw-prose-links);
text-decoration: none;
}
.prose a:hover {
color: #89ddff;
}
.prose code {
color: var(--tw-prose-code);
font-family: 'JetBrains Mono', monospace;
}
.prose pre {
background-color: var(--tw-prose-pre-bg);
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
margin-bottom: 1rem;
}
.prose ul, .prose ol {
margin-top: 0.5rem;
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.prose ul {
list-style-type: disc;
}
.prose ol {
list-style-type: decimal;
}
</style>
</head>
<body class="bg-base-bg text-palenight-50">
<nav class="bg-base-darker/80 backdrop-blur-sm shadow-sm border-b border-palenight-400/20 mb-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="/" class="text-accent-yellow font-serif text-xl font-bold">Glenn Thompson</a>
<div class="flex items-center gap-2 text-accent-yellow text-sm font-bold">
<span>tech, guile, scheme, development, functional-programming</span>
<span>•</span>
<time datetime="2024-12-03 10:00">December 3, 2024</time>
<span>•</span>
<span>5 min read</span>
</div>
</div>
</div>
</nav>
<main class="pt-24 pb-16 px-4">
<div class="max-w-4xl mx-auto">
<div class="content text-palenight-100 space-y-6">
<header class="mb-8">
<h1 class="text-4xl font-serif font-bold text-accent-yellow">Beyond Theory: Building Practical Tools with Guile Scheme</h1>
<div class="flex items-center gap-4 text-palenight-300 mt-4">
<time datetime="2024-12-03 10:00">2024-12-03 10:00</time>
<span>•</span>
<span>5 min read</span>
<span>•</span>
<span>By Glenn Thompson</span>
</div>
<div class="flex flex-wrap gap-2 mt-4">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">tech</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">guile</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">scheme</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">development</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">functional-programming</span>
</div>
</header>
<article class="prose prose-palenight max-w-none">
<h1>Beyond Theory: Building Practical Tools with Guile Scheme</h1>
<h2>Introduction</h2>
<p>A few months ago, I shared my journey into learning Scheme through building <code>stash</code>, a symlink manager. Since then, I&#39;ve discovered that the gap between learning Scheme and applying it to real-world problems is where the most valuable lessons emerge. This post explores what I&#39;ve learned about building practical tools with Guile Scheme, sharing both successes and challenges along the way.</p>
<h2>The Power of Modular Design</h2>
<p>One of the most important lessons I learned was the value of modular design. Breaking down a program into focused, single-responsibility modules not only makes the code more maintainable but also helps in reasoning about the program&#39;s behavior. Here&#39;s how I structured <code>stash</code>:</p>
<pre><code class="language-scheme">(use-modules (ice-9 getopt-long)
(stash help) ;; Help module
(stash colors) ;; ANSI colors
(stash log) ;; Logging module
(stash paths) ;; Path handling module
(stash conflict) ;; Conflict resolution module
(stash file-ops)) ;; File and symlink operations module
</code></pre>
<p>Each module has a specific responsibility:</p>
<ul>
<li><code>colors.scm</code>: Handles ANSI color formatting for terminal output</li>
<li><code>conflict.scm</code>: Manages conflict resolution when files already exist</li>
<li><code>file-ops.scm</code>: Handles file system operations</li>
<li><code>help.scm</code>: Provides usage information</li>
<li><code>log.scm</code>: Manages logging operations</li>
<li><code>paths.scm</code>: Handles path manipulation and normalization</li>
</ul>
<h2>Robust Path Handling</h2>
<p>One of the first challenges in building a file management tool is handling paths correctly. Here&#39;s how I approached it:</p>
<pre><code class="language-scheme">(define (expand-home path)
&quot;Expand ~ to the user&#39;s home directory.&quot;
(if (string-prefix? &quot;~&quot; path)
(string-append (getenv &quot;HOME&quot;) (substring path 1))
path))
(define (concat-path base path)
&quot;Concatenate two paths, ensuring there are no double slashes.&quot;
(if (string-suffix? &quot;/&quot; base)
(string-append (string-drop-right base 1) &quot;/&quot; path)
(string-append base &quot;/&quot; path)))
(define (ensure-config-path target-dir)
&quot;Ensure that the target directory has .config appended, avoiding double slashes.&quot;
(let ((target-dir (expand-home target-dir)))
(if (string-suffix? &quot;/&quot; target-dir)
(set! target-dir (string-drop-right target-dir 1)))
(if (not (string-suffix? &quot;/.config&quot; target-dir))
(string-append target-dir &quot;/.config&quot;)
target-dir)))
</code></pre>
<p>This approach ensures that:</p>
<ul>
<li>Home directory references (<code>~</code>) are properly expanded</li>
<li>Path concatenation doesn&#39;t create double slashes</li>
<li>Configuration paths are consistently structured</li>
</ul>
<h2>Interactive Conflict Resolution</h2>
<p>Real-world tools often need to handle conflicts. I implemented an interactive conflict resolution system:</p>
<pre><code class="language-scheme">(define (prompt-user-for-action)
&quot;Prompt the user to decide how to handle a conflict: overwrite (o), skip (s), or cancel (c).&quot;
(display (color-message
&quot;A conflict was detected. Choose action - Overwrite (o), Skip (s), or Cancel (c): &quot;
yellow-text))
(let ((response (read-line)))
(cond
((string-ci=? response &quot;o&quot;) &#39;overwrite)
((string-ci=? response &quot;s&quot;) &#39;skip)
((string-ci=? response &quot;c&quot;) &#39;cancel)
(else
(display &quot;Invalid input. Please try again.\n&quot;)
(prompt-user-for-action)))))
</code></pre>
<p>This provides a user-friendly interface for resolving conflicts while maintaining data safety.</p>
<h2>Logging for Debugging and Auditing</h2>
<p>Proper logging is crucial for debugging and auditing. I implemented a simple but effective logging system:</p>
<pre><code class="language-scheme">(define (current-timestamp)
&quot;Return the current date and time as a formatted string.&quot;
(let* ((time (current-time))
(seconds (time-second time)))
(strftime &quot;%Y-%m-%d-%H-%M-%S&quot; (localtime seconds))))
(define (log-action message)
&quot;Log an action with a timestamp to the stash.log file.&quot;
(let ((log-port (open-file &quot;stash.log&quot; &quot;a&quot;)))
(display (color-message
(string-append &quot;[&quot; (current-timestamp) &quot;] &quot; message)
green-text) log-port)
(newline log-port)
(close-port log-port)))
</code></pre>
<p>This logging system:</p>
<ul>
<li>Timestamps each action</li>
<li>Uses color coding for better readability</li>
<li>Maintains a persistent log file</li>
<li>Properly handles file operations</li>
</ul>
<h2>File Operations with Safety</h2>
<p>When dealing with file system operations, safety is paramount. Here&#39;s how I handle moving directories:</p>
<pre><code class="language-scheme">(define (move-source-to-target source-dir target-dir)
&quot;Move the entire source directory to the target directory, ensuring .config in the target path.&quot;
(let* ((target-dir (ensure-config-path target-dir))
(source-dir (expand-home source-dir))
(source-name (basename source-dir))
(target-source-dir (concat-path target-dir source-name)))
(if (not (file-exists? target-dir))
(mkdir target-dir #o755))
(if (file-exists? target-source-dir)
(handle-conflict target-source-dir source-dir delete-directory log-action)
(begin
(rename-file source-dir target-source-dir)
(display (format #f &quot;Moved ~a to ~a\n&quot; source-dir target-source-dir))
(log-action (format #f &quot;Moved ~a to ~a&quot; source-dir target-source-dir))))
target-source-dir))
</code></pre>
<p>This implementation:</p>
<ul>
<li>Ensures paths are properly formatted</li>
<li>Creates necessary directories</li>
<li>Handles conflicts gracefully</li>
<li>Logs all operations</li>
<li>Returns the new path for further operations</li>
</ul>
<h2>Lessons Learned</h2>
<h3>What Worked Well</h3>
<ol>
<li><strong>Modular Design</strong>: Breaking the code into focused modules made it easier to maintain and test</li>
<li><strong>Functional Approach</strong>: Using pure functions where possible made the code more predictable</li>
<li><strong>Interactive Interface</strong>: Providing clear user prompts and colored output improved usability</li>
<li><strong>Robust Logging</strong>: Detailed logging helped with debugging and understanding program flow</li>
</ol>
<h3>Challenges Faced</h3>
<ol>
<li><strong>Path Handling</strong>: Dealing with different path formats and edge cases required careful attention</li>
<li><strong>Error States</strong>: Managing various error conditions while keeping the code clean</li>
<li><strong>User Interface</strong>: Balancing between automation and user control</li>
<li><strong>Documentation</strong>: Writing clear documentation that helps users understand the tool</li>
</ol>
<h2>Moving Forward</h2>
<p>Building <code>stash</code> has taught me that while functional programming principles are valuable, pragmatism is equally important. The key is finding the right balance between elegant functional code and practical solutions.</p>
<h2>Resources</h2>
<ol>
<li><a href="https://www.gnu.org/software/guile/manual/">Guile Manual</a></li>
<li><a href="/content/posts/scheme-journey.html">My Previous Scheme Journey Post</a></li>
<li><a href="https://systemcrafters.net/community">System Crafters Community</a></li>
<li><a href="https://codeberg.org/glenneth/stash">Stash on Codeberg</a></li>
</ol>
<p>The code examples in this post are from my actual implementation of <code>stash</code>. Feel free to explore, use, and improve upon them!</p>
</article>
</div>
</div>
</main>
<footer class="bg-base-darker text-palenight-200 py-12 border-t border-palenight-400/20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<p class="text-palenight-300">&copy; 2024 Glenn Thompson. All rights reserved.</p>
<div class="webring-text mt-6">
<p class="text-palenight-300">I am part of the <a href="https://systemcrafters.net" target="_blank" class="text-accent-blue hover:text-accent-cyan">System Crafters</a> webring:</p>
</div>
<div class="craftering mt-2 flex items-center justify-center gap-4 text-accent-blue">
<a href="https://craftering.systemcrafters.net/@glenneth/previous" class="hover:text-accent-cyan">Previous</a>
<a href="https://craftering.systemcrafters.net/@glenneth" class="hover:text-accent-cyan">Random</a>
<a href="https://craftering.systemcrafters.net/@glenneth/next" class="hover:text-accent-cyan">Next</a>
</div>
<p class="text-palenight-300 mt-2">
<a href="mailto:glenn@glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenn@glenneth.org</a> |
<a href="https://glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenneth.org</a>
</p>
</div>
</div>
</footer>
</body>
<!DOCTYPE html>
<html lang="en" class="bg-base-bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta property="og:title" content="Beyond Theory: Building Practical Tools with Guile Scheme">
<meta property="og:description" content="">
<meta property="og:url" content="https://glenneth.orgcontent/posts/2024-12-03-practical-scheme">
<title>Beyond Theory: Building Practical Tools with Guile Scheme - Glenn Thompson</title>
<link rel="alternate" type="application/rss+xml" title="Glenn Thompson's Blog" href="/feed.xml" />
<link href="../../dist/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
.prose-palenight {
--tw-prose-body: #bfc7d5;
--tw-prose-headings: #ffd580;
--tw-prose-links: #82aaff;
--tw-prose-code: #c792ea;
--tw-prose-pre-bg: #1b1e2b;
}
.prose h2 {
color: var(--tw-prose-headings);
font-family: Merriweather, serif;
font-weight: 700;
font-size: 1.5rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.prose p {
margin-bottom: 1rem;
line-height: 1.625;
}
.prose a {
color: var(--tw-prose-links);
text-decoration: none;
}
.prose a:hover {
color: #89ddff;
}
.prose code {
color: var(--tw-prose-code);
font-family: 'JetBrains Mono', monospace;
}
.prose pre {
background-color: var(--tw-prose-pre-bg);
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
margin-bottom: 1rem;
}
.prose ul, .prose ol {
margin-top: 0.5rem;
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.prose ul {
list-style-type: disc;
}
.prose ol {
list-style-type: decimal;
}
</style>
</head>
<body class="bg-base-bg text-palenight-50">
<nav class="bg-base-darker/80 backdrop-blur-sm shadow-sm border-b border-palenight-400/20 mb-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="/" class="text-accent-yellow font-serif text-xl font-bold">Glenn Thompson</a>
<div class="flex items-center gap-2 text-accent-yellow text-sm font-bold">
<span>tech, guile, scheme, development, functional-programming</span>
<span>•</span>
<time datetime="2024-12-03 10:00">December 3, 2024</time>
<span>•</span>
<span>5 min read</span>
</div>
</div>
</div>
</nav>
<main class="pt-24 pb-16 px-4">
<div class="max-w-4xl mx-auto">
<div class="content text-palenight-100 space-y-6">
<header class="mb-8">
<h1 class="text-4xl font-serif font-bold text-accent-yellow">Beyond Theory: Building Practical Tools with Guile Scheme</h1>
<div class="flex items-center gap-4 text-palenight-300 mt-4">
<time datetime="2024-12-03 10:00">2024-12-03 10:00</time>
<span>•</span>
<span>5 min read</span>
<span>•</span>
<span>By Glenn Thompson</span>
</div>
<div class="flex flex-wrap gap-2 mt-4">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">tech</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">guile</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">scheme</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">development</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">functional-programming</span>
</div>
</header>
<article class="prose prose-palenight max-w-none">
<h1>Beyond Theory: Building Practical Tools with Guile Scheme</h1>
<h2>Introduction</h2>
<p>A few months ago, I shared my journey into learning Scheme through building <code>stash</code>, a symlink manager. Since then, I&#39;ve discovered that the gap between learning Scheme and applying it to real-world problems is where the most valuable lessons emerge. This post explores what I&#39;ve learned about building practical tools with Guile Scheme, sharing both successes and challenges along the way.</p>
<h2>The Power of Modular Design</h2>
<p>One of the most important lessons I learned was the value of modular design. Breaking down a program into focused, single-responsibility modules not only makes the code more maintainable but also helps in reasoning about the program&#39;s behavior. Here&#39;s how I structured <code>stash</code>:</p>
<pre><code class="language-scheme">(use-modules (ice-9 getopt-long)
(stash help) ;; Help module
(stash colors) ;; ANSI colors
(stash log) ;; Logging module
(stash paths) ;; Path handling module
(stash conflict) ;; Conflict resolution module
(stash file-ops)) ;; File and symlink operations module
</code></pre>
<p>Each module has a specific responsibility:</p>
<ul>
<li><code>colors.scm</code>: Handles ANSI color formatting for terminal output</li>
<li><code>conflict.scm</code>: Manages conflict resolution when files already exist</li>
<li><code>file-ops.scm</code>: Handles file system operations</li>
<li><code>help.scm</code>: Provides usage information</li>
<li><code>log.scm</code>: Manages logging operations</li>
<li><code>paths.scm</code>: Handles path manipulation and normalization</li>
</ul>
<h2>Robust Path Handling</h2>
<p>One of the first challenges in building a file management tool is handling paths correctly. Here&#39;s how I approached it:</p>
<pre><code class="language-scheme">(define (expand-home path)
&quot;Expand ~ to the user&#39;s home directory.&quot;
(if (string-prefix? &quot;~&quot; path)
(string-append (getenv &quot;HOME&quot;) (substring path 1))
path))
(define (concat-path base path)
&quot;Concatenate two paths, ensuring there are no double slashes.&quot;
(if (string-suffix? &quot;/&quot; base)
(string-append (string-drop-right base 1) &quot;/&quot; path)
(string-append base &quot;/&quot; path)))
(define (ensure-config-path target-dir)
&quot;Ensure that the target directory has .config appended, avoiding double slashes.&quot;
(let ((target-dir (expand-home target-dir)))
(if (string-suffix? &quot;/&quot; target-dir)
(set! target-dir (string-drop-right target-dir 1)))
(if (not (string-suffix? &quot;/.config&quot; target-dir))
(string-append target-dir &quot;/.config&quot;)
target-dir)))
</code></pre>
<p>This approach ensures that:</p>
<ul>
<li>Home directory references (<code>~</code>) are properly expanded</li>
<li>Path concatenation doesn&#39;t create double slashes</li>
<li>Configuration paths are consistently structured</li>
</ul>
<h2>Interactive Conflict Resolution</h2>
<p>Real-world tools often need to handle conflicts. I implemented an interactive conflict resolution system:</p>
<pre><code class="language-scheme">(define (prompt-user-for-action)
&quot;Prompt the user to decide how to handle a conflict: overwrite (o), skip (s), or cancel (c).&quot;
(display (color-message
&quot;A conflict was detected. Choose action - Overwrite (o), Skip (s), or Cancel (c): &quot;
yellow-text))
(let ((response (read-line)))
(cond
((string-ci=? response &quot;o&quot;) &#39;overwrite)
((string-ci=? response &quot;s&quot;) &#39;skip)
((string-ci=? response &quot;c&quot;) &#39;cancel)
(else
(display &quot;Invalid input. Please try again.\n&quot;)
(prompt-user-for-action)))))
</code></pre>
<p>This provides a user-friendly interface for resolving conflicts while maintaining data safety.</p>
<h2>Logging for Debugging and Auditing</h2>
<p>Proper logging is crucial for debugging and auditing. I implemented a simple but effective logging system:</p>
<pre><code class="language-scheme">(define (current-timestamp)
&quot;Return the current date and time as a formatted string.&quot;
(let* ((time (current-time))
(seconds (time-second time)))
(strftime &quot;%Y-%m-%d-%H-%M-%S&quot; (localtime seconds))))
(define (log-action message)
&quot;Log an action with a timestamp to the stash.log file.&quot;
(let ((log-port (open-file &quot;stash.log&quot; &quot;a&quot;)))
(display (color-message
(string-append &quot;[&quot; (current-timestamp) &quot;] &quot; message)
green-text) log-port)
(newline log-port)
(close-port log-port)))
</code></pre>
<p>This logging system:</p>
<ul>
<li>Timestamps each action</li>
<li>Uses color coding for better readability</li>
<li>Maintains a persistent log file</li>
<li>Properly handles file operations</li>
</ul>
<h2>File Operations with Safety</h2>
<p>When dealing with file system operations, safety is paramount. Here&#39;s how I handle moving directories:</p>
<pre><code class="language-scheme">(define (move-source-to-target source-dir target-dir)
&quot;Move the entire source directory to the target directory, ensuring .config in the target path.&quot;
(let* ((target-dir (ensure-config-path target-dir))
(source-dir (expand-home source-dir))
(source-name (basename source-dir))
(target-source-dir (concat-path target-dir source-name)))
(if (not (file-exists? target-dir))
(mkdir target-dir #o755))
(if (file-exists? target-source-dir)
(handle-conflict target-source-dir source-dir delete-directory log-action)
(begin
(rename-file source-dir target-source-dir)
(display (format #f &quot;Moved ~a to ~a\n&quot; source-dir target-source-dir))
(log-action (format #f &quot;Moved ~a to ~a&quot; source-dir target-source-dir))))
target-source-dir))
</code></pre>
<p>This implementation:</p>
<ul>
<li>Ensures paths are properly formatted</li>
<li>Creates necessary directories</li>
<li>Handles conflicts gracefully</li>
<li>Logs all operations</li>
<li>Returns the new path for further operations</li>
</ul>
<h2>Lessons Learned</h2>
<h3>What Worked Well</h3>
<ol>
<li><strong>Modular Design</strong>: Breaking the code into focused modules made it easier to maintain and test</li>
<li><strong>Functional Approach</strong>: Using pure functions where possible made the code more predictable</li>
<li><strong>Interactive Interface</strong>: Providing clear user prompts and colored output improved usability</li>
<li><strong>Robust Logging</strong>: Detailed logging helped with debugging and understanding program flow</li>
</ol>
<h3>Challenges Faced</h3>
<ol>
<li><strong>Path Handling</strong>: Dealing with different path formats and edge cases required careful attention</li>
<li><strong>Error States</strong>: Managing various error conditions while keeping the code clean</li>
<li><strong>User Interface</strong>: Balancing between automation and user control</li>
<li><strong>Documentation</strong>: Writing clear documentation that helps users understand the tool</li>
</ol>
<h2>Moving Forward</h2>
<p>Building <code>stash</code> has taught me that while functional programming principles are valuable, pragmatism is equally important. The key is finding the right balance between elegant functional code and practical solutions.</p>
<h2>Resources</h2>
<ol>
<li><a href="https://www.gnu.org/software/guile/manual/">Guile Manual</a></li>
<li><a href="/content/posts/scheme-journey.html">My Previous Scheme Journey Post</a></li>
<li><a href="https://systemcrafters.net/community">System Crafters Community</a></li>
<li><a href="https://codeberg.org/glenneth/stash">Stash on Codeberg</a></li>
</ol>
<p>The code examples in this post are from my actual implementation of <code>stash</code>. Feel free to explore, use, and improve upon them!</p>
</article>
</div>
</div>
</main>
<footer class="bg-base-darker text-palenight-200 py-12 border-t border-palenight-400/20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<p class="text-palenight-300">&copy; 2024 Glenn Thompson. All rights reserved.</p>
<div class="webring-text mt-6">
<p class="text-palenight-300">I am part of the <a href="https://systemcrafters.net" target="_blank" class="text-accent-blue hover:text-accent-cyan">System Crafters</a> webring:</p>
</div>
<div class="craftering mt-2 flex items-center justify-center gap-4 text-accent-blue">
<a href="https://craftering.systemcrafters.net/@glenneth/previous" class="hover:text-accent-cyan">Previous</a>
<a href="https://craftering.systemcrafters.net/@glenneth" class="hover:text-accent-cyan">Random</a>
<a href="https://craftering.systemcrafters.net/@glenneth/next" class="hover:text-accent-cyan">Next</a>
</div>
<p class="text-palenight-300 mt-2">
<a href="mailto:glenn@glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenn@glenneth.org</a> |
<a href="https://glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenneth.org</a>
</p>
</div>
</div>
</footer>
</body>
</html>

392
deploy/content/posts/2025-01-02-from-haunt-to-custom.html
View File

@ -1,197 +1,197 @@
<!DOCTYPE html>
<html lang="en" class="bg-base-bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A reflection on my evolving journey through static site generators - from Hugo to Haunt, and finally to building my own custom solution, highlighting the valuable lessons learned along the way.">
<meta property="og:title" content="From Hugo to Haunt to Custom: My Journey in Static Site Generation">
<meta property="og:description" content="A reflection on my evolving journey through static site generators - from Hugo to Haunt, and finally to building my own custom solution, highlighting the valuable lessons learned along the way.">
<meta property="og:url" content="https://glenneth.orgcontent/posts/2025-01-02-from-haunt-to-custom">
<title>From Hugo to Haunt to Custom: My Journey in Static Site Generation - Glenn Thompson</title>
<link rel="alternate" type="application/rss+xml" title="Glenn Thompson's Blog" href="/feed.xml" />
<link href="/dist/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
.prose-palenight {
--tw-prose-body: #bfc7d5;
--tw-prose-headings: #ffd580;
--tw-prose-links: #82aaff;
--tw-prose-code: #c792ea;
--tw-prose-pre-bg: #1b1e2b;
}
.prose h2 {
color: var(--tw-prose-headings);
font-family: Merriweather, serif;
font-weight: 700;
font-size: 1.5rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.prose p {
margin-bottom: 1rem;
line-height: 1.625;
}
.prose a {
color: var(--tw-prose-links);
text-decoration: none;
}
.prose a:hover {
color: #89ddff;
}
.prose code {
color: var(--tw-prose-code);
font-family: 'JetBrains Mono', monospace;
}
.prose pre {
background-color: var(--tw-prose-pre-bg);
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
margin-bottom: 1rem;
}
.prose ul, .prose ol {
margin-top: 0.5rem;
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.prose ul {
list-style-type: disc;
}
.prose ol {
list-style-type: decimal;
}
</style>
</head>
<body class="bg-base-bg text-palenight-50">
<nav class="bg-base-darker/80 backdrop-blur-sm shadow-sm border-b border-palenight-400/20 mb-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="/" class="text-accent-yellow font-serif text-xl font-bold">Glenn Thompson</a>
<div class="flex items-center gap-2 text-accent-yellow text-sm font-bold">
<span>web, development, javascript, static-site, haunt, guile, hugo</span>
<span>•</span>
<time datetime="2025-01-02">January 2, 2025</time>
<span>•</span>
<span>4 min read</span>
</div>
</div>
</div>
</nav>
<main class="pt-24 pb-16 px-4">
<div class="max-w-4xl mx-auto">
<div class="content text-palenight-100 space-y-6">
<header class="mb-8">
<h1 class="text-4xl font-serif font-bold text-accent-yellow">From Hugo to Haunt to Custom: My Journey in Static Site Generation</h1>
<div class="flex items-center gap-4 text-palenight-300 mt-4">
<time datetime="2025-01-02">2025-01-02</time>
<span>•</span>
<span>4 min read</span>
<span>•</span>
<span>By Glenn Thompson</span>
</div>
<div class="flex flex-wrap gap-2 mt-4">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">web</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">development</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">javascript</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">static-site</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">haunt</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">guile</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">hugo</span>
</div>
</header>
<article class="prose prose-palenight max-w-none">
<p>My journey with static site generators has been one of continuous learning and evolution. It started with Hugo, transitioned through Haunt, and has now led me to build my own custom solution. Each step of this journey has taught me valuable lessons about web development, programming languages, and the importance of understanding the tools we use.</p>
<h2>The Hugo Beginning</h2>
<p>Like many &quot;bloggers&quot;, I started with Hugo, a popular static site generator known for its speed and extensive theme ecosystem. Hugo served its purpose well, providing a robust platform for my blog with ready-made themes and a strong community.</p>
<h2>The Transition to Haunt</h2>
<p>My journey took an interesting turn when I joined the <a href="https://systemcrafters.net/community/">System Crafters Community</a>. Through David Wilson&#39;s excellent course, <a href="https://systemcrafters.net/courses/hands-on-guile-scheme-beginners/">Hands-On Guile Scheme for Beginners</a>, I was introduced to the world of Scheme programming. This led me to adopt GNU Guix as my operating system, which naturally led me to <a href="https://dthompson.us/projects/haunt.html">Haunt</a>, a static site generator written in Guile Scheme.</p>
<p>The transition to Haunt was motivated by several factors:</p>
<ul>
<li>Alignment with my growing interest in Scheme and functional programming</li>
<li>Integration with the GNU Guix ecosystem</li>
<li>The opportunity to write site configuration in Scheme</li>
<li>A desire for a simpler, more controllable setup</li>
</ul>
<h3>The Haunt Experience</h3>
<p>Haunt offered a different perspective on site generation. Some highlights of my Haunt experience included:</p>
<ul>
<li>Writing site configuration in Scheme, which felt natural after learning Guile</li>
<li>Creating custom templates that matched my site&#39;s aesthetic needs</li>
<li>Learning to leverage Scheme&#39;s flexibility for site customization</li>
<li>Being part of a community that values simplicity and transparency</li>
</ul>
<p>However, working with Haunt also presented challenges:</p>
<ul>
<li>Limited availability of ready-made templates</li>
<li>Need to create custom solutions for common features</li>
<li>Learning curve of Scheme for web development</li>
</ul>
<h2>The Move to Custom Development</h2>
<p>As I became more comfortable with web development and gained a deeper understanding of static site generation, I felt ready for the next step: building my own static site generator. This decision wasn&#39;t about Haunt&#39;s limitations - it was about the desire to understand every aspect of my site&#39;s generation process and have complete control over its architecture.</p>
<h2>The New Architecture</h2>
<p>My custom solution combines the lessons learned from both Hugo and Haunt with modern web development practices:</p>
<ul>
<li><strong>Modern JavaScript</strong>: Using Node.js and contemporary JavaScript tools</li>
<li><strong>Markdown Processing</strong>: Leveraging the <code>marked</code> library for flexible content processing</li>
<li><strong>Tailwind CSS</strong>: Adopting a utility-first approach to styling</li>
<li><strong>Simple Build Process</strong>: A straightforward build script that handles all aspects of site generation</li>
<li><strong>Development Server</strong>: Live reload functionality for immediate feedback</li>
</ul>
<h2>Benefits of the Custom Solution</h2>
<p>Building my own solution has brought several advantages:</p>
<ol>
<li><strong>Complete Understanding</strong>: I now understand every aspect of my site&#39;s generation</li>
<li><strong>Faster Iterations</strong>: Quick implementation of new features</li>
<li><strong>Modern Development</strong>: Integration with current web development tools</li>
<li><strong>Simplified Deployment</strong>: Streamlined process for updates</li>
<li><strong>Better Performance</strong>: Only including features I actually need</li>
</ol>
<h2>Learning Experience</h2>
<p>This journey from Hugo through Haunt to a custom solution has taught me:</p>
<ul>
<li>The value of understanding different approaches to static site generation</li>
<li>The importance of choosing tools that align with your learning goals</li>
<li>How different programming paradigms (Go, Scheme, JavaScript) approach similar problems</li>
<li>The benefits of building your own tools when the learning opportunity outweighs convenience</li>
</ul>
<h2>Future Improvements</h2>
<p>While my custom solution meets my current needs, I&#39;m excited about potential improvements:</p>
<ul>
<li>Adding support for draft posts</li>
<li>Implementing a tag-based navigation system</li>
<li>Adding search functionality</li>
<li>Improving the build process</li>
<li>Adding image optimization</li>
</ul>
<h2>Conclusion</h2>
<p>My journey from Hugo through Haunt to a custom solution reflects a common pattern in software development - starting with established tools, learning their principles, and eventually building your own solutions. Each step has been valuable:</p>
<ul>
<li>Hugo taught me about static site generators and their capabilities</li>
<li>Haunt introduced me to functional programming and the beauty of Scheme</li>
<li>Building my own solution has given me deep insights into web development</li>
</ul>
<p>The source code for my site generator is available on <a href="https://github.com/glenneth1/personal-website">GitHub</a>. While it may not be the most feature-rich static site generator, it&#39;s perfectly tailored to my needs and represents a significant learning journey.</p>
<p>Remember, the goal of building your own tools isn&#39;t always to create something better than existing solutions - sometimes it&#39;s about the learning experience and creating something that perfectly fits your specific needs. Whether you&#39;re using Hugo, Haunt, or considering building your own solution, the most important thing is that it serves your purposes and helps you grow.</p>
</article>
</div>
</div>
</main>
<footer class="bg-base-darker text-palenight-200 py-12 border-t border-palenight-400/20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<p class="text-palenight-300">&copy; 2024 Glenn Thompson. All rights reserved.</p>
<div class="webring-text mt-6">
<p class="text-palenight-300">I am part of the <a href="https://systemcrafters.net" target="_blank" class="text-accent-blue hover:text-accent-cyan">System Crafters</a> webring:</p>
</div>
<div class="craftering mt-2 flex items-center justify-center gap-4 text-accent-blue">
<a href="https://craftering.systemcrafters.net/@glenneth/previous" class="hover:text-accent-cyan">Previous</a>
<a href="https://craftering.systemcrafters.net/@glenneth" class="hover:text-accent-cyan">Random</a>
<a href="https://craftering.systemcrafters.net/@glenneth/next" class="hover:text-accent-cyan">Next</a>
</div>
<p class="text-palenight-300 mt-2">
<a href="mailto:glenn@glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenn@glenneth.org</a> |
<a href="https://glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenneth.org</a>
</p>
</div>
</div>
</footer>
</body>
<!DOCTYPE html>
<html lang="en" class="bg-base-bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A reflection on my evolving journey through static site generators - from Hugo to Haunt, and finally to building my own custom solution, highlighting the valuable lessons learned along the way.">
<meta property="og:title" content="From Hugo to Haunt to Custom: My Journey in Static Site Generation">
<meta property="og:description" content="A reflection on my evolving journey through static site generators - from Hugo to Haunt, and finally to building my own custom solution, highlighting the valuable lessons learned along the way.">
<meta property="og:url" content="https://glenneth.orgcontent/posts/2025-01-02-from-haunt-to-custom">
<title>From Hugo to Haunt to Custom: My Journey in Static Site Generation - Glenn Thompson</title>
<link rel="alternate" type="application/rss+xml" title="Glenn Thompson's Blog" href="/feed.xml" />
<link href="/dist/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
.prose-palenight {
--tw-prose-body: #bfc7d5;
--tw-prose-headings: #ffd580;
--tw-prose-links: #82aaff;
--tw-prose-code: #c792ea;
--tw-prose-pre-bg: #1b1e2b;
}
.prose h2 {
color: var(--tw-prose-headings);
font-family: Merriweather, serif;
font-weight: 700;
font-size: 1.5rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.prose p {
margin-bottom: 1rem;
line-height: 1.625;
}
.prose a {
color: var(--tw-prose-links);
text-decoration: none;
}
.prose a:hover {
color: #89ddff;
}
.prose code {
color: var(--tw-prose-code);
font-family: 'JetBrains Mono', monospace;
}
.prose pre {
background-color: var(--tw-prose-pre-bg);
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
margin-bottom: 1rem;
}
.prose ul, .prose ol {
margin-top: 0.5rem;
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.prose ul {
list-style-type: disc;
}
.prose ol {
list-style-type: decimal;
}
</style>
</head>
<body class="bg-base-bg text-palenight-50">
<nav class="bg-base-darker/80 backdrop-blur-sm shadow-sm border-b border-palenight-400/20 mb-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="/" class="text-accent-yellow font-serif text-xl font-bold">Glenn Thompson</a>
<div class="flex items-center gap-2 text-accent-yellow text-sm font-bold">
<span>web, development, javascript, static-site, haunt, guile, hugo</span>
<span>•</span>
<time datetime="2025-01-02">January 2, 2025</time>
<span>•</span>
<span>4 min read</span>
</div>
</div>
</div>
</nav>
<main class="pt-24 pb-16 px-4">
<div class="max-w-4xl mx-auto">
<div class="content text-palenight-100 space-y-6">
<header class="mb-8">
<h1 class="text-4xl font-serif font-bold text-accent-yellow">From Hugo to Haunt to Custom: My Journey in Static Site Generation</h1>
<div class="flex items-center gap-4 text-palenight-300 mt-4">
<time datetime="2025-01-02">2025-01-02</time>
<span>•</span>
<span>4 min read</span>
<span>•</span>
<span>By Glenn Thompson</span>
</div>
<div class="flex flex-wrap gap-2 mt-4">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">web</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">development</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">javascript</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">static-site</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">haunt</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">guile</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">hugo</span>
</div>
</header>
<article class="prose prose-palenight max-w-none">
<p>My journey with static site generators has been one of continuous learning and evolution. It started with Hugo, transitioned through Haunt, and has now led me to build my own custom solution. Each step of this journey has taught me valuable lessons about web development, programming languages, and the importance of understanding the tools we use.</p>
<h2>The Hugo Beginning</h2>
<p>Like many &quot;bloggers&quot;, I started with Hugo, a popular static site generator known for its speed and extensive theme ecosystem. Hugo served its purpose well, providing a robust platform for my blog with ready-made themes and a strong community.</p>
<h2>The Transition to Haunt</h2>
<p>My journey took an interesting turn when I joined the <a href="https://systemcrafters.net/community/">System Crafters Community</a>. Through David Wilson&#39;s excellent course, <a href="https://systemcrafters.net/courses/hands-on-guile-scheme-beginners/">Hands-On Guile Scheme for Beginners</a>, I was introduced to the world of Scheme programming. This led me to adopt GNU Guix as my operating system, which naturally led me to <a href="https://dthompson.us/projects/haunt.html">Haunt</a>, a static site generator written in Guile Scheme.</p>
<p>The transition to Haunt was motivated by several factors:</p>
<ul>
<li>Alignment with my growing interest in Scheme and functional programming</li>
<li>Integration with the GNU Guix ecosystem</li>
<li>The opportunity to write site configuration in Scheme</li>
<li>A desire for a simpler, more controllable setup</li>
</ul>
<h3>The Haunt Experience</h3>
<p>Haunt offered a different perspective on site generation. Some highlights of my Haunt experience included:</p>
<ul>
<li>Writing site configuration in Scheme, which felt natural after learning Guile</li>
<li>Creating custom templates that matched my site&#39;s aesthetic needs</li>
<li>Learning to leverage Scheme&#39;s flexibility for site customization</li>
<li>Being part of a community that values simplicity and transparency</li>
</ul>
<p>However, working with Haunt also presented challenges:</p>
<ul>
<li>Limited availability of ready-made templates</li>
<li>Need to create custom solutions for common features</li>
<li>Learning curve of Scheme for web development</li>
</ul>
<h2>The Move to Custom Development</h2>
<p>As I became more comfortable with web development and gained a deeper understanding of static site generation, I felt ready for the next step: building my own static site generator. This decision wasn&#39;t about Haunt&#39;s limitations - it was about the desire to understand every aspect of my site&#39;s generation process and have complete control over its architecture.</p>
<h2>The New Architecture</h2>
<p>My custom solution combines the lessons learned from both Hugo and Haunt with modern web development practices:</p>
<ul>
<li><strong>Modern JavaScript</strong>: Using Node.js and contemporary JavaScript tools</li>
<li><strong>Markdown Processing</strong>: Leveraging the <code>marked</code> library for flexible content processing</li>
<li><strong>Tailwind CSS</strong>: Adopting a utility-first approach to styling</li>
<li><strong>Simple Build Process</strong>: A straightforward build script that handles all aspects of site generation</li>
<li><strong>Development Server</strong>: Live reload functionality for immediate feedback</li>
</ul>
<h2>Benefits of the Custom Solution</h2>
<p>Building my own solution has brought several advantages:</p>
<ol>
<li><strong>Complete Understanding</strong>: I now understand every aspect of my site&#39;s generation</li>
<li><strong>Faster Iterations</strong>: Quick implementation of new features</li>
<li><strong>Modern Development</strong>: Integration with current web development tools</li>
<li><strong>Simplified Deployment</strong>: Streamlined process for updates</li>
<li><strong>Better Performance</strong>: Only including features I actually need</li>
</ol>
<h2>Learning Experience</h2>
<p>This journey from Hugo through Haunt to a custom solution has taught me:</p>
<ul>
<li>The value of understanding different approaches to static site generation</li>
<li>The importance of choosing tools that align with your learning goals</li>
<li>How different programming paradigms (Go, Scheme, JavaScript) approach similar problems</li>
<li>The benefits of building your own tools when the learning opportunity outweighs convenience</li>
</ul>
<h2>Future Improvements</h2>
<p>While my custom solution meets my current needs, I&#39;m excited about potential improvements:</p>
<ul>
<li>Adding support for draft posts</li>
<li>Implementing a tag-based navigation system</li>
<li>Adding search functionality</li>
<li>Improving the build process</li>
<li>Adding image optimization</li>
</ul>
<h2>Conclusion</h2>
<p>My journey from Hugo through Haunt to a custom solution reflects a common pattern in software development - starting with established tools, learning their principles, and eventually building your own solutions. Each step has been valuable:</p>
<ul>
<li>Hugo taught me about static site generators and their capabilities</li>
<li>Haunt introduced me to functional programming and the beauty of Scheme</li>
<li>Building my own solution has given me deep insights into web development</li>
</ul>
<p>The source code for my site generator is available on <a href="https://github.com/glenneth1/personal-website">GitHub</a>. While it may not be the most feature-rich static site generator, it&#39;s perfectly tailored to my needs and represents a significant learning journey.</p>
<p>Remember, the goal of building your own tools isn&#39;t always to create something better than existing solutions - sometimes it&#39;s about the learning experience and creating something that perfectly fits your specific needs. Whether you&#39;re using Hugo, Haunt, or considering building your own solution, the most important thing is that it serves your purposes and helps you grow.</p>
</article>
</div>
</div>
</main>
<footer class="bg-base-darker text-palenight-200 py-12 border-t border-palenight-400/20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<p class="text-palenight-300">&copy; 2024 Glenn Thompson. All rights reserved.</p>
<div class="webring-text mt-6">
<p class="text-palenight-300">I am part of the <a href="https://systemcrafters.net" target="_blank" class="text-accent-blue hover:text-accent-cyan">System Crafters</a> webring:</p>
</div>
<div class="craftering mt-2 flex items-center justify-center gap-4 text-accent-blue">
<a href="https://craftering.systemcrafters.net/@glenneth/previous" class="hover:text-accent-cyan">Previous</a>
<a href="https://craftering.systemcrafters.net/@glenneth" class="hover:text-accent-cyan">Random</a>
<a href="https://craftering.systemcrafters.net/@glenneth/next" class="hover:text-accent-cyan">Next</a>
</div>
<p class="text-palenight-300 mt-2">
<a href="mailto:glenn@glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenn@glenneth.org</a> |
<a href="https://glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenneth.org</a>
</p>
</div>
</div>
</footer>
</body>
</html>

644
deploy/content/posts/2025-03-08-my-dev-environment-2025.html
View File

@ -1,323 +1,323 @@
<!DOCTYPE html>
<html lang="en" class="bg-base-bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A comprehensive look at my current development setup in 2025, covering everything from my GNU Guix system foundation to editor configurations, terminal tools, and deployment processes.">
<meta property="og:title" content="My Development Environment in 2025: From Editor to Deployment">
<meta property="og:description" content="A comprehensive look at my current development setup in 2025, covering everything from my GNU Guix system foundation to editor configurations, terminal tools, and deployment processes.">
<meta property="og:url" content="https://glenneth.orgcontent/posts/2025-03-08-my-dev-environment-2025">
<title>My Development Environment in 2025: From Editor to Deployment - Glenn Thompson</title>
<link rel="alternate" type="application/rss+xml" title="Glenn Thompson's Blog" href="/feed.xml" />
<link href="/dist/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
.prose-palenight {
--tw-prose-body: #bfc7d5;
--tw-prose-headings: #ffd580;
--tw-prose-links: #82aaff;
--tw-prose-code: #c792ea;
--tw-prose-pre-bg: #1b1e2b;
}
.prose h2 {
color: var(--tw-prose-headings);
font-family: Merriweather, serif;
font-weight: 700;
font-size: 1.5rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.prose p {
margin-bottom: 1rem;
line-height: 1.625;
}
.prose a {
color: var(--tw-prose-links);
text-decoration: none;
}
.prose a:hover {
color: #89ddff;
}
.prose code {
color: var(--tw-prose-code);
font-family: 'JetBrains Mono', monospace;
}
.prose pre {
background-color: var(--tw-prose-pre-bg);
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
margin-bottom: 1rem;
}
.prose ul, .prose ol {
margin-top: 0.5rem;
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.prose ul {
list-style-type: disc;
}
.prose ol {
list-style-type: decimal;
}
</style>
</head>
<body class="bg-base-bg text-palenight-50">
<nav class="bg-base-darker/80 backdrop-blur-sm shadow-sm border-b border-palenight-400/20 mb-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="/" class="text-accent-yellow font-serif text-xl font-bold">Glenn Thompson</a>
<div class="flex items-center gap-2 text-accent-yellow text-sm font-bold">
<span>development, guix, tools, workflow, productivity, web</span>
<span>•</span>
<time datetime="2025-03-08">March 8, 2025</time>
<span>•</span>
<span>6 min read</span>
</div>
</div>
</div>
</nav>
<main class="pt-24 pb-16 px-4">
<div class="max-w-4xl mx-auto">
<div class="content text-palenight-100 space-y-6">
<header class="mb-8">
<h1 class="text-4xl font-serif font-bold text-accent-yellow">My Development Environment in 2025: From Editor to Deployment</h1>
<div class="flex items-center gap-4 text-palenight-300 mt-4">
<time datetime="2025-03-08">2025-03-08</time>
<span>•</span>
<span>6 min read</span>
<span>•</span>
<span>By Glenn Thompson</span>
</div>
<div class="flex flex-wrap gap-2 mt-4">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">development</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">guix</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">tools</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">workflow</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">productivity</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">web</span>
</div>
</header>
<article class="prose prose-palenight max-w-none">
<h2>Introduction</h2>
<p>The tools we use shape how we work. Over the years, my development environment has evolved alongside my technical journey through different programming languages, paradigms, and projects. This post offers a snapshot of my current setup in early 2025, detailing the choices I&#39;ve made and why they work for me.</p>
<h2>System Foundation: ArcoLinux with GNU Guix</h2>
<p>My journey to <a href="https://guix.gnu.org/">GNU Guix</a> began through my exploration of Scheme programming, as I detailed in my <a href="/content/posts/2024-07-26-gnu-guix-journey.html">GNU Guix Journey</a> post. While I initially experimented with Guix System, I&#39;ve settled on a hybrid approach: running Guix as a package manager on top of ArcoLinux (an Arch-based distribution).</p>
<h3>Current Configuration Approach</h3>
<p>I manage my development environment using a combination of Arch&#39;s pacman, AUR, and Guix&#39;s declarative package management. My Guix configuration lives in a Git repository, allowing me to:</p>
<ul>
<li>Track changes to my development environment over time</li>
<li>Reproduce my development setup on new hardware</li>
<li>Roll back to previous package states when needed</li>
<li>Share configuration snippets with the community</li>
</ul>
<h3>Key Packages and Tools</h3>
<p>I maintain a hybrid package approach:</p>
<p><strong>System packages (via pacman/AUR):</strong></p>
<ul>
<li>Base system utilities and desktop environment</li>
<li>Graphics drivers and hardware support</li>
<li>Some GUI applications</li>
</ul>
<p><strong>Development tools (via Guix):</strong></p>
<pre><code class="language-scheme">;; My primary development tools managed by Guix
(specifications-&gt;manifest
&#39;(&quot;emacs&quot; &quot;git&quot; &quot;openssh&quot; &quot;ripgrep&quot; &quot;fd&quot; &quot;exa&quot; &quot;bat&quot;
&quot;guile&quot; &quot;node&quot; &quot;python&quot; &quot;gcc-toolchain&quot; &quot;make&quot;
&quot;nss-certs&quot; &quot;glibc-locales&quot;))
</code></pre>
<p>This hybrid approach gives me the best of both worlds: Arch&#39;s extensive package repository and up-to-date system packages, combined with Guix&#39;s reproducible development environments.</p>
<h3>Reproducibility Benefits</h3>
<p>The reproducibility of Guix for development environments has been invaluable. I can:</p>
<ul>
<li>Spin up development environments with precise dependencies</li>
<li>Ensure consistent behavior across machines</li>
<li>Isolate project-specific dependencies using Guix environments</li>
<li>Share exact environment specifications with collaborators</li>
</ul>
<h3>Challenges and Solutions</h3>
<p>Working with this hybrid approach isn&#39;t without challenges:</p>
<ul>
<li><p><strong>Challenge</strong>: Keeping Guix packages in sync with system libraries<br><strong>Solution</strong>: Careful management of library paths and containerization when needed</p>
</li>
<li><p><strong>Challenge</strong>: Learning curve for Guix&#39;s declarative configuration<br><strong>Solution</strong>: Incremental adoption and community resources</p>
</li>
<li><p><strong>Challenge</strong>: Occasional conflicts between package managers<br><strong>Solution</strong>: Clear separation of responsibilities (system vs. development tools)</p>
</li>
</ul>
<h2>Editor Environment: Emacs</h2>
<p>After experimenting with various editors, I&#39;ve settled on Emacs as my primary development environment. Its extensibility and Scheme-based configuration language (Emacs Lisp) align well with my interests.</p>
<h3>Configuration Approach</h3>
<p>I use a literate configuration with Org mode, which allows me to:</p>
<ul>
<li>Document my configuration choices</li>
<li>Organize settings by purpose rather than file</li>
<li>Selectively load components based on context</li>
<li>Share readable documentation with others</li>
</ul>
<h3>Key Extensions</h3>
<p>My most valuable Emacs extensions include:</p>
<ul>
<li><strong>Magit</strong>: Git interface that has transformed my version control workflow</li>
<li><strong>LSP Mode</strong>: Language server integration for intelligent code assistance</li>
<li><strong>Org Mode</strong>: For notes, task management, and literate programming</li>
<li><strong>Projectile</strong>: Project navigation and management</li>
<li><strong>Company</strong>: Completion framework</li>
<li><strong>Consult/Vertico/Marginalia</strong>: Modern completion UI</li>
<li><strong>Tree-sitter</strong>: Improved syntax highlighting and structural editing</li>
</ul>
<h3>Language-Specific Setups</h3>
<p>For my primary languages:</p>
<ul>
<li><strong>Scheme/Guile</strong>: Geiser for REPL integration</li>
<li><strong>JavaScript/TypeScript</strong>: TypeScript LSP, prettier, eslint integration</li>
<li><strong>Python</strong>: Pyright LSP, black formatting</li>
<li><strong>Web Development</strong>: Web mode, emmet, css-mode</li>
</ul>
<h3>Productivity Enhancements</h3>
<p>Some productivity boosters in my setup:</p>
<ul>
<li>Custom keybindings for frequent operations</li>
<li>Snippets for common code patterns</li>
<li>Template generation for new projects</li>
<li>Integration with system notifications</li>
</ul>
<h2>Terminal and CLI Tools</h2>
<p>While Emacs handles many tasks, I still rely heavily on terminal tools for specific workflows.</p>
<h3>Shell Configuration</h3>
<p>I use Zsh with a custom configuration that provides:</p>
<ul>
<li>Intuitive aliases</li>
<li>Helpful prompts with Git integration</li>
<li>Command history management</li>
<li>Directory navigation shortcuts</li>
</ul>
<h3>Custom Scripts and Utilities</h3>
<p>I&#39;ve developed several custom scripts to streamline repetitive tasks:</p>
<ul>
<li>Project initialization templates</li>
<li>Deployment automation</li>
<li>System maintenance routines</li>
<li>Content management for this blog</li>
</ul>
<h3>Task Automation</h3>
<p>For task automation, I use a combination of:</p>
<ul>
<li>Shell scripts for simple operations</li>
<li>Guile scripts for more complex logic</li>
<li>Make for build processes</li>
<li>Cron for scheduled tasks</li>
</ul>
<h3>Version Control Workflow</h3>
<p>My Git workflow relies on:</p>
<ul>
<li>Branch-per-feature approach</li>
<li>Interactive rebasing for clean history</li>
<li>Commit message templates</li>
<li>Hooks for quality checks</li>
</ul>
<h2>Web Development Stack</h2>
<p>As the creator of this website, my web development setup has been refined through experience.</p>
<h3>Local Development Server</h3>
<p>For local development, I use:</p>
<ul>
<li>Live-server for static sites</li>
<li>Custom Node.js servers for API development</li>
<li>Docker containers for complex dependencies</li>
</ul>
<h3>Build Tools and Processes</h3>
<p>My build process typically involves:</p>
<ul>
<li>Tailwind CSS for styling</li>
<li>Minimal JavaScript bundling</li>
<li>Custom static site generation (as detailed in my <a href="/content/posts/2025-01-02-from-haunt-to-custom.html">previous post</a>)</li>
<li>Automated optimization steps</li>
</ul>
<h3>Testing Approach</h3>
<p>For testing, I employ:</p>
<ul>
<li>Jest for JavaScript unit tests</li>
<li>Cypress for end-to-end testing</li>
<li>Manual testing across devices and browsers</li>
<li>Accessibility validation tools</li>
</ul>
<h3>Browser Tools and Extensions</h3>
<p>Essential browser tools include:</p>
<ul>
<li>Firefox Developer Edition as my primary browser</li>
<li>Chrome for cross-browser testing</li>
<li>DevTools for performance analysis</li>
<li>React and Redux DevTools</li>
<li>Accessibility checkers</li>
</ul>
<h2>Deployment Pipeline</h2>
<p>My approach to deployment emphasizes security and reliability.</p>
<h3>Secure Deployment Process</h3>
<p>As you might have noticed from my <a href="/content/posts/2025-03-08-my-dev-environment-2025.html">.env.gpg file</a>, I take security seriously:</p>
<ul>
<li>Credentials stored in GPG-encrypted files</li>
<li>Separate development and production configurations</li>
<li>Principle of least privilege for service accounts</li>
<li>Regular security audits</li>
</ul>
<h3>Automation Scripts</h3>
<p>My deployment is automated through:</p>
<ul>
<li>Custom shell scripts for build and deploy</li>
<li>Validation steps before deployment</li>
<li>Rollback capabilities</li>
<li>Notification systems for success/failure</li>
</ul>
<h3>CI/CD Considerations</h3>
<p>While not using a formal CI/CD pipeline for this personal site, I follow similar principles:</p>
<ul>
<li>Pre-commit checks for code quality</li>
<li>Automated testing before deployment</li>
<li>Consistent build environments</li>
<li>Deployment approval steps</li>
</ul>
<h3>Monitoring and Analytics</h3>
<p>For site monitoring, I use:</p>
<ul>
<li>Simple analytics for privacy-respecting visitor tracking</li>
<li>Uptime monitoring</li>
<li>Performance metrics collection</li>
<li>Error logging and alerting</li>
</ul>
<h2>Future Improvements</h2>
<p>My environment continues to evolve. Areas I&#39;m exploring include:</p>
<ul>
<li>Further integration between Emacs and system tools</li>
<li>More comprehensive test automation</li>
<li>Expanded use of Guix channels for package management</li>
<li>Improved mobile development workflow</li>
</ul>
<h2>Conclusion</h2>
<p>A development environment is deeply personal, reflecting both technical needs and individual preferences. Mine has evolved through years of experimentation, learning, and refinement.</p>
<p>The most important lesson I&#39;ve learned is that tools should serve your workflow, not dictate it. Be willing to experiment, but also recognize when a tool is working well enough that further optimization yields diminishing returns.</p>
<p>I hope sharing my setup provides some inspiration for your own environment. I&#39;d love to hear about your setup and what tools have made the biggest difference in your workflow.</p>
<p>What aspects of your development environment have you found most valuable? Are there tools or approaches you think I should consider? Let me know!</p>
</article>
</div>
</div>
</main>
<footer class="bg-base-darker text-palenight-200 py-12 border-t border-palenight-400/20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<p class="text-palenight-300">&copy; 2024 Glenn Thompson. All rights reserved.</p>
<div class="webring-text mt-6">
<p class="text-palenight-300">I am part of the <a href="https://systemcrafters.net" target="_blank" class="text-accent-blue hover:text-accent-cyan">System Crafters</a> webring:</p>
</div>
<div class="craftering mt-2 flex items-center justify-center gap-4 text-accent-blue">
<a href="https://craftering.systemcrafters.net/@glenneth/previous" class="hover:text-accent-cyan">Previous</a>
<a href="https://craftering.systemcrafters.net/@glenneth" class="hover:text-accent-cyan">Random</a>
<a href="https://craftering.systemcrafters.net/@glenneth/next" class="hover:text-accent-cyan">Next</a>
</div>
<p class="text-palenight-300 mt-2">
<a href="mailto:glenn@glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenn@glenneth.org</a> |
<a href="https://glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenneth.org</a>
</p>
</div>
</div>
</footer>
</body>
<!DOCTYPE html>
<html lang="en" class="bg-base-bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A comprehensive look at my current development setup in 2025, covering everything from my GNU Guix system foundation to editor configurations, terminal tools, and deployment processes.">
<meta property="og:title" content="My Development Environment in 2025: From Editor to Deployment">
<meta property="og:description" content="A comprehensive look at my current development setup in 2025, covering everything from my GNU Guix system foundation to editor configurations, terminal tools, and deployment processes.">
<meta property="og:url" content="https://glenneth.orgcontent/posts/2025-03-08-my-dev-environment-2025">
<title>My Development Environment in 2025: From Editor to Deployment - Glenn Thompson</title>
<link rel="alternate" type="application/rss+xml" title="Glenn Thompson's Blog" href="/feed.xml" />
<link href="/dist/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
.prose-palenight {
--tw-prose-body: #bfc7d5;
--tw-prose-headings: #ffd580;
--tw-prose-links: #82aaff;
--tw-prose-code: #c792ea;
--tw-prose-pre-bg: #1b1e2b;
}
.prose h2 {
color: var(--tw-prose-headings);
font-family: Merriweather, serif;
font-weight: 700;
font-size: 1.5rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.prose p {
margin-bottom: 1rem;
line-height: 1.625;
}
.prose a {
color: var(--tw-prose-links);
text-decoration: none;
}
.prose a:hover {
color: #89ddff;
}
.prose code {
color: var(--tw-prose-code);
font-family: 'JetBrains Mono', monospace;
}
.prose pre {
background-color: var(--tw-prose-pre-bg);
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
margin-bottom: 1rem;
}
.prose ul, .prose ol {
margin-top: 0.5rem;
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.prose ul {
list-style-type: disc;
}
.prose ol {
list-style-type: decimal;
}
</style>
</head>
<body class="bg-base-bg text-palenight-50">
<nav class="bg-base-darker/80 backdrop-blur-sm shadow-sm border-b border-palenight-400/20 mb-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="/" class="text-accent-yellow font-serif text-xl font-bold">Glenn Thompson</a>
<div class="flex items-center gap-2 text-accent-yellow text-sm font-bold">
<span>development, guix, tools, workflow, productivity, web</span>
<span>•</span>
<time datetime="2025-03-08">March 8, 2025</time>
<span>•</span>
<span>6 min read</span>
</div>
</div>
</div>
</nav>
<main class="pt-24 pb-16 px-4">
<div class="max-w-4xl mx-auto">
<div class="content text-palenight-100 space-y-6">
<header class="mb-8">
<h1 class="text-4xl font-serif font-bold text-accent-yellow">My Development Environment in 2025: From Editor to Deployment</h1>
<div class="flex items-center gap-4 text-palenight-300 mt-4">
<time datetime="2025-03-08">2025-03-08</time>
<span>•</span>
<span>6 min read</span>
<span>•</span>
<span>By Glenn Thompson</span>
</div>
<div class="flex flex-wrap gap-2 mt-4">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">development</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">guix</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">tools</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">workflow</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">productivity</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">web</span>
</div>
</header>
<article class="prose prose-palenight max-w-none">
<h2>Introduction</h2>
<p>The tools we use shape how we work. Over the years, my development environment has evolved alongside my technical journey through different programming languages, paradigms, and projects. This post offers a snapshot of my current setup in early 2025, detailing the choices I&#39;ve made and why they work for me.</p>
<h2>System Foundation: ArcoLinux with GNU Guix</h2>
<p>My journey to <a href="https://guix.gnu.org/">GNU Guix</a> began through my exploration of Scheme programming, as I detailed in my <a href="/content/posts/2024-07-26-gnu-guix-journey.html">GNU Guix Journey</a> post. While I initially experimented with Guix System, I&#39;ve settled on a hybrid approach: running Guix as a package manager on top of ArcoLinux (an Arch-based distribution).</p>
<h3>Current Configuration Approach</h3>
<p>I manage my development environment using a combination of Arch&#39;s pacman, AUR, and Guix&#39;s declarative package management. My Guix configuration lives in a Git repository, allowing me to:</p>
<ul>
<li>Track changes to my development environment over time</li>
<li>Reproduce my development setup on new hardware</li>
<li>Roll back to previous package states when needed</li>
<li>Share configuration snippets with the community</li>
</ul>
<h3>Key Packages and Tools</h3>
<p>I maintain a hybrid package approach:</p>
<p><strong>System packages (via pacman/AUR):</strong></p>
<ul>
<li>Base system utilities and desktop environment</li>
<li>Graphics drivers and hardware support</li>
<li>Some GUI applications</li>
</ul>
<p><strong>Development tools (via Guix):</strong></p>
<pre><code class="language-scheme">;; My primary development tools managed by Guix
(specifications-&gt;manifest
&#39;(&quot;emacs&quot; &quot;git&quot; &quot;openssh&quot; &quot;ripgrep&quot; &quot;fd&quot; &quot;exa&quot; &quot;bat&quot;
&quot;guile&quot; &quot;node&quot; &quot;python&quot; &quot;gcc-toolchain&quot; &quot;make&quot;
&quot;nss-certs&quot; &quot;glibc-locales&quot;))
</code></pre>
<p>This hybrid approach gives me the best of both worlds: Arch&#39;s extensive package repository and up-to-date system packages, combined with Guix&#39;s reproducible development environments.</p>
<h3>Reproducibility Benefits</h3>
<p>The reproducibility of Guix for development environments has been invaluable. I can:</p>
<ul>
<li>Spin up development environments with precise dependencies</li>
<li>Ensure consistent behavior across machines</li>
<li>Isolate project-specific dependencies using Guix environments</li>
<li>Share exact environment specifications with collaborators</li>
</ul>
<h3>Challenges and Solutions</h3>
<p>Working with this hybrid approach isn&#39;t without challenges:</p>
<ul>
<li><p><strong>Challenge</strong>: Keeping Guix packages in sync with system libraries<br><strong>Solution</strong>: Careful management of library paths and containerization when needed</p>
</li>
<li><p><strong>Challenge</strong>: Learning curve for Guix&#39;s declarative configuration<br><strong>Solution</strong>: Incremental adoption and community resources</p>
</li>
<li><p><strong>Challenge</strong>: Occasional conflicts between package managers<br><strong>Solution</strong>: Clear separation of responsibilities (system vs. development tools)</p>
</li>
</ul>
<h2>Editor Environment: Emacs</h2>
<p>After experimenting with various editors, I&#39;ve settled on Emacs as my primary development environment. Its extensibility and Scheme-based configuration language (Emacs Lisp) align well with my interests.</p>
<h3>Configuration Approach</h3>
<p>I use a literate configuration with Org mode, which allows me to:</p>
<ul>
<li>Document my configuration choices</li>
<li>Organize settings by purpose rather than file</li>
<li>Selectively load components based on context</li>
<li>Share readable documentation with others</li>
</ul>
<h3>Key Extensions</h3>
<p>My most valuable Emacs extensions include:</p>
<ul>
<li><strong>Magit</strong>: Git interface that has transformed my version control workflow</li>
<li><strong>LSP Mode</strong>: Language server integration for intelligent code assistance</li>
<li><strong>Org Mode</strong>: For notes, task management, and literate programming</li>
<li><strong>Projectile</strong>: Project navigation and management</li>
<li><strong>Company</strong>: Completion framework</li>
<li><strong>Consult/Vertico/Marginalia</strong>: Modern completion UI</li>
<li><strong>Tree-sitter</strong>: Improved syntax highlighting and structural editing</li>
</ul>
<h3>Language-Specific Setups</h3>
<p>For my primary languages:</p>
<ul>
<li><strong>Scheme/Guile</strong>: Geiser for REPL integration</li>
<li><strong>JavaScript/TypeScript</strong>: TypeScript LSP, prettier, eslint integration</li>
<li><strong>Python</strong>: Pyright LSP, black formatting</li>
<li><strong>Web Development</strong>: Web mode, emmet, css-mode</li>
</ul>
<h3>Productivity Enhancements</h3>
<p>Some productivity boosters in my setup:</p>
<ul>
<li>Custom keybindings for frequent operations</li>
<li>Snippets for common code patterns</li>
<li>Template generation for new projects</li>
<li>Integration with system notifications</li>
</ul>
<h2>Terminal and CLI Tools</h2>
<p>While Emacs handles many tasks, I still rely heavily on terminal tools for specific workflows.</p>
<h3>Shell Configuration</h3>
<p>I use Zsh with a custom configuration that provides:</p>
<ul>
<li>Intuitive aliases</li>
<li>Helpful prompts with Git integration</li>
<li>Command history management</li>
<li>Directory navigation shortcuts</li>
</ul>
<h3>Custom Scripts and Utilities</h3>
<p>I&#39;ve developed several custom scripts to streamline repetitive tasks:</p>
<ul>
<li>Project initialization templates</li>
<li>Deployment automation</li>
<li>System maintenance routines</li>
<li>Content management for this blog</li>
</ul>
<h3>Task Automation</h3>
<p>For task automation, I use a combination of:</p>
<ul>
<li>Shell scripts for simple operations</li>
<li>Guile scripts for more complex logic</li>
<li>Make for build processes</li>
<li>Cron for scheduled tasks</li>
</ul>
<h3>Version Control Workflow</h3>
<p>My Git workflow relies on:</p>
<ul>
<li>Branch-per-feature approach</li>
<li>Interactive rebasing for clean history</li>
<li>Commit message templates</li>
<li>Hooks for quality checks</li>
</ul>
<h2>Web Development Stack</h2>
<p>As the creator of this website, my web development setup has been refined through experience.</p>
<h3>Local Development Server</h3>
<p>For local development, I use:</p>
<ul>
<li>Live-server for static sites</li>
<li>Custom Node.js servers for API development</li>
<li>Docker containers for complex dependencies</li>
</ul>
<h3>Build Tools and Processes</h3>
<p>My build process typically involves:</p>
<ul>
<li>Tailwind CSS for styling</li>
<li>Minimal JavaScript bundling</li>
<li>Custom static site generation (as detailed in my <a href="/content/posts/2025-01-02-from-haunt-to-custom.html">previous post</a>)</li>
<li>Automated optimization steps</li>
</ul>
<h3>Testing Approach</h3>
<p>For testing, I employ:</p>
<ul>
<li>Jest for JavaScript unit tests</li>
<li>Cypress for end-to-end testing</li>
<li>Manual testing across devices and browsers</li>
<li>Accessibility validation tools</li>
</ul>
<h3>Browser Tools and Extensions</h3>
<p>Essential browser tools include:</p>
<ul>
<li>Firefox Developer Edition as my primary browser</li>
<li>Chrome for cross-browser testing</li>
<li>DevTools for performance analysis</li>
<li>React and Redux DevTools</li>
<li>Accessibility checkers</li>
</ul>
<h2>Deployment Pipeline</h2>
<p>My approach to deployment emphasizes security and reliability.</p>
<h3>Secure Deployment Process</h3>
<p>As you might have noticed from my <a href="/content/posts/2025-03-08-my-dev-environment-2025.html">.env.gpg file</a>, I take security seriously:</p>
<ul>
<li>Credentials stored in GPG-encrypted files</li>
<li>Separate development and production configurations</li>
<li>Principle of least privilege for service accounts</li>
<li>Regular security audits</li>
</ul>
<h3>Automation Scripts</h3>
<p>My deployment is automated through:</p>
<ul>
<li>Custom shell scripts for build and deploy</li>
<li>Validation steps before deployment</li>
<li>Rollback capabilities</li>
<li>Notification systems for success/failure</li>
</ul>
<h3>CI/CD Considerations</h3>
<p>While not using a formal CI/CD pipeline for this personal site, I follow similar principles:</p>
<ul>
<li>Pre-commit checks for code quality</li>
<li>Automated testing before deployment</li>
<li>Consistent build environments</li>
<li>Deployment approval steps</li>
</ul>
<h3>Monitoring and Analytics</h3>
<p>For site monitoring, I use:</p>
<ul>
<li>Simple analytics for privacy-respecting visitor tracking</li>
<li>Uptime monitoring</li>
<li>Performance metrics collection</li>
<li>Error logging and alerting</li>
</ul>
<h2>Future Improvements</h2>
<p>My environment continues to evolve. Areas I&#39;m exploring include:</p>
<ul>
<li>Further integration between Emacs and system tools</li>
<li>More comprehensive test automation</li>
<li>Expanded use of Guix channels for package management</li>
<li>Improved mobile development workflow</li>
</ul>
<h2>Conclusion</h2>
<p>A development environment is deeply personal, reflecting both technical needs and individual preferences. Mine has evolved through years of experimentation, learning, and refinement.</p>
<p>The most important lesson I&#39;ve learned is that tools should serve your workflow, not dictate it. Be willing to experiment, but also recognize when a tool is working well enough that further optimization yields diminishing returns.</p>
<p>I hope sharing my setup provides some inspiration for your own environment. I&#39;d love to hear about your setup and what tools have made the biggest difference in your workflow.</p>
<p>What aspects of your development environment have you found most valuable? Are there tools or approaches you think I should consider? Let me know!</p>
</article>
</div>
</div>
</main>
<footer class="bg-base-darker text-palenight-200 py-12 border-t border-palenight-400/20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<p class="text-palenight-300">&copy; 2024 Glenn Thompson. All rights reserved.</p>
<div class="webring-text mt-6">
<p class="text-palenight-300">I am part of the <a href="https://systemcrafters.net" target="_blank" class="text-accent-blue hover:text-accent-cyan">System Crafters</a> webring:</p>
</div>
<div class="craftering mt-2 flex items-center justify-center gap-4 text-accent-blue">
<a href="https://craftering.systemcrafters.net/@glenneth/previous" class="hover:text-accent-cyan">Previous</a>
<a href="https://craftering.systemcrafters.net/@glenneth" class="hover:text-accent-cyan">Random</a>
<a href="https://craftering.systemcrafters.net/@glenneth/next" class="hover:text-accent-cyan">Next</a>
</div>
<p class="text-palenight-300 mt-2">
<a href="mailto:glenn@glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenn@glenneth.org</a> |
<a href="https://glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenneth.org</a>
</p>
</div>
</div>
</footer>
</body>
</html>

390
deploy/content/posts/2025-03-12-lessons-learned-custom-ssg.html
View File

@ -1,196 +1,196 @@
<!DOCTYPE html>
<html lang="en" class="bg-base-bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta property="og:title" content=""Lessons Learned: One Year with a Custom Static Site Generator"">
<meta property="og:description" content="">
<meta property="og:url" content="https://glenneth.orgcontent/posts/2025-03-12-lessons-learned-custom-ssg">
<title>"Lessons Learned: One Year with a Custom Static Site Generator" - Glenn Thompson</title>
<link rel="alternate" type="application/rss+xml" title="Glenn Thompson's Blog" href="/feed.xml" />
<link href="/dist/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
.prose-palenight {
--tw-prose-body: #bfc7d5;
--tw-prose-headings: #ffd580;
--tw-prose-links: #82aaff;
--tw-prose-code: #c792ea;
--tw-prose-pre-bg: #1b1e2b;
}
.prose h2 {
color: var(--tw-prose-headings);
font-family: Merriweather, serif;
font-weight: 700;
font-size: 1.5rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.prose p {
margin-bottom: 1rem;
line-height: 1.625;
}
.prose a {
color: var(--tw-prose-links);
text-decoration: none;
}
.prose a:hover {
color: #89ddff;
}
.prose code {
color: var(--tw-prose-code);
font-family: 'JetBrains Mono', monospace;
}
.prose pre {
background-color: var(--tw-prose-pre-bg);
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
margin-bottom: 1rem;
}
.prose ul, .prose ol {
margin-top: 0.5rem;
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.prose ul {
list-style-type: disc;
}
.prose ol {
list-style-type: decimal;
}
</style>
</head>
<body class="bg-base-bg text-palenight-50">
<nav class="bg-base-darker/80 backdrop-blur-sm shadow-sm border-b border-palenight-400/20 mb-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="/" class="text-accent-yellow font-serif text-xl font-bold">Glenn Thompson</a>
<div class="flex items-center gap-2 text-accent-yellow text-sm font-bold">
<span>[web, development, javascript, static-site, lessons]</span>
<span>•</span>
<time datetime="2025-03-13">March 13, 2025</time>
<span>•</span>
<span>6 min read</span>
</div>
</div>
</div>
</nav>
<main class="pt-24 pb-16 px-4">
<div class="max-w-4xl mx-auto">
<div class="content text-palenight-100 space-y-6">
<header class="mb-8">
<h1 class="text-4xl font-serif font-bold text-accent-yellow">"Lessons Learned: One Year with a Custom Static Site Generator"</h1>
<div class="flex items-center gap-4 text-palenight-300 mt-4">
<time datetime="2025-03-13">2025-03-13</time>
<span>•</span>
<span>6 min read</span>
<span>•</span>
<span>By Glenn Thompson</span>
</div>
<div class="flex flex-wrap gap-2 mt-4">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">[web</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">development</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">javascript</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">static-site</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">lessons]</span>
</div>
</header>
<article class="prose prose-palenight max-w-none">
<p>It&#39;s been just over a year since I <a href="/content/posts/2025-01-02-from-haunt-to-custom.html">transitioned from Haunt to my own custom static site generator</a> for this website. What started as an experiment to gain more control over my publishing workflow has evolved into a valuable learning experience that has shaped how I approach web development projects.</p>
<p>In this post, I&#39;ll share the key lessons I&#39;ve learned and insights I&#39;ve gained from building and maintaining my own static site generator. While the technical details are interesting, the real value has been in the broader lessons about software development, user experience, and the balance between complexity and simplicity.</p>
<h2>The Journey of Evolution</h2>
<h3>From Simple Beginnings</h3>
<p>When I first built my static site generator, it was remarkably simple - just the essential features needed to convert my writing into a website. No extra features, no complex configurations, just the basics.</p>
<p>Today, the system has evolved considerably, but not through grand design or elaborate planning. Instead, it grew organically based on real needs and actual usage. This organic growth taught me valuable lessons about software development.</p>
<h3>Lesson 1: Features Should Emerge from Usage</h3>
<p>Many of the features in my static site generator emerged from actual writing and publishing needs:</p>
<ol>
<li><p><strong>The Draft System</strong><br>When I found myself working on multiple posts simultaneously, I needed a way to keep unfinished posts separate from published content. This led to the draft system, which now helps me manage my writing workflow effectively.</p>
</li>
<li><p><strong>Tag Organization</strong><br>As my collection of posts grew, I needed a way to organize related content. The tag system emerged naturally from this need, rather than being built upfront based on assumptions about how I might want to organize content.</p>
</li>
<li><p><strong>Content Validation</strong><br>After accidentally publishing a post with a malformed date and another with a duplicate title, I added validation checks. These weren&#39;t part of the initial design but came from real-world publishing mishaps.</p>
</li>
</ol>
<h3>Lesson 2: Simplicity Drives Performance</h3>
<p>One of the most surprising lessons was how simplicity led to better performance:</p>
<ol>
<li><p><strong>Static HTML Generation</strong><br>By generating plain HTML files, the site loads quickly without any client-side processing. There&#39;s no JavaScript framework, no hydration, and no complex build process - just simple, fast HTML.</p>
</li>
<li><p><strong>Incremental Builds</strong><br>The build system only processes files that have changed. This means that even with hundreds of posts, updates are nearly instantaneous because only the necessary files are rebuilt.</p>
</li>
<li><p><strong>Minimal JavaScript</strong><br>By keeping JavaScript to a minimum and focusing on progressive enhancement, the site remains fast and accessible, even on slower connections.</p>
</li>
</ol>
<h3>Lesson 3: Developer Experience Matters</h3>
<p>A good developer experience has proven crucial for maintaining motivation to write and publish:</p>
<ol>
<li><p><strong>Smart Port Management</strong><br>After encountering port conflicts with other services, I added automatic port detection and fallback. The system now checks if a port is in use and automatically finds the next available one, eliminating the frustration of manual port configuration.</p>
</li>
<li><p><strong>Clear Error Messages</strong><br>When something goes wrong (like a failed CSS build or HTML conversion), the system provides clear, actionable error messages. This immediate feedback helps quickly identify and fix issues during the development process.</p>
</li>
<li><p><strong>Automated Validation</strong><br>The build system validates the environment before starting, checking for required directories and dependencies. These checks catch common setup issues early, making the development process smoother.</p>
</li>
</ol>
<h3>Lesson 4: Content Drives Development</h3>
<p>Perhaps the most important lesson has been letting content needs drive development:</p>
<ol>
<li><p><strong>Markdown Features</strong><br>I only added support for additional Markdown features (like tables and task lists) when I actually needed them in my writing. This prevented feature bloat and kept the system focused.</p>
</li>
<li><p><strong>RSS Feed</strong><br>The RSS feed wasn&#39;t part of the initial design but was added when the content volume grew enough to warrant it. This is a pattern I&#39;ve seen repeatedly - features are most valuable when they solve real, existing needs.</p>
</li>
<li><p><strong>Summary Generation</strong><br>The way post summaries are generated has evolved based on the actual content I write. Initially, it was a simple character count, but it now intelligently extracts meaningful previews based on content structure.</p>
</li>
</ol>
<h2>Looking Forward</h2>
<p>This project has taught me that the best software often evolves gradually in response to real needs rather than being built all at once from a grand design. It&#39;s a lesson that applies well beyond static site generators - it&#39;s about building software that serves actual needs rather than imagined ones.</p>
<p>Just today, while writing this post, I encountered and solved several development workflow issues. Instead of being frustrated by these challenges, I saw them as opportunities to improve the system. The resulting changes - like automatic port detection and better error handling - weren&#39;t part of any grand plan. They emerged naturally from real usage and made the system better in practical, meaningful ways.</p>
<p>The system isn&#39;t perfect, and it probably never will be. But it&#39;s continuously improving in ways that matter for my writing and publishing workflow. That, I&#39;ve learned, is far more valuable than technical perfection.</p>
<p>If you&#39;re considering building your own tools, remember:</p>
<ol>
<li>Start simple and let features emerge from actual usage</li>
<li>Focus on the experience - both for users and developers</li>
<li>Let real needs guide development</li>
<li>Embrace incremental improvements</li>
<li>Value simplicity - it often leads to better performance and maintainability</li>
<li>Use real-world problems as opportunities for improvement</li>
</ol>
<p>These lessons have influenced not just how I approach this project, but how I think about software development in general. Sometimes, the best insights come from the simplest projects - and often, they come right in the middle of writing about them.</p>
<h2>Looking Back and Forward</h2>
<p>Reflecting on this journey, the most valuable insight has been understanding that great software evolves naturally from real needs. Every feature in my static site generator—from the draft system to the validation checks—emerged from actual usage rather than upfront planning.</p>
<p>This experience has fundamentally changed how I approach software development. Instead of trying to build the perfect system from the start, I&#39;ve learned to:</p>
<ol>
<li>Start with the simplest solution that works</li>
<li>Let real usage guide feature development</li>
<li>Focus on maintainability over complexity</li>
<li>Prioritize the developer experience</li>
<li>Keep performance in mind at every step</li>
</ol>
<p>These principles have not only made my static site generator better but have also influenced how I approach every new project. Sometimes the best insights come from the simplest projects, and often they come right in the middle of writing about them.</p>
</article>
</div>
</div>
</main>
<footer class="bg-base-darker text-palenight-200 py-12 border-t border-palenight-400/20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<p class="text-palenight-300">&copy; 2024 Glenn Thompson. All rights reserved.</p>
<div class="webring-text mt-6">
<p class="text-palenight-300">I am part of the <a href="https://systemcrafters.net" target="_blank" class="text-accent-blue hover:text-accent-cyan">System Crafters</a> webring:</p>
</div>
<div class="craftering mt-2 flex items-center justify-center gap-4 text-accent-blue">
<a href="https://craftering.systemcrafters.net/@glenneth/previous" class="hover:text-accent-cyan">Previous</a>
<a href="https://craftering.systemcrafters.net/@glenneth" class="hover:text-accent-cyan">Random</a>
<a href="https://craftering.systemcrafters.net/@glenneth/next" class="hover:text-accent-cyan">Next</a>
</div>
<p class="text-palenight-300 mt-2">
<a href="mailto:glenn@glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenn@glenneth.org</a> |
<a href="https://glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenneth.org</a>
</p>
</div>
</div>
</footer>
</body>
<!DOCTYPE html>
<html lang="en" class="bg-base-bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta property="og:title" content=""Lessons Learned: One Year with a Custom Static Site Generator"">
<meta property="og:description" content="">
<meta property="og:url" content="https://glenneth.orgcontent/posts/2025-03-12-lessons-learned-custom-ssg">
<title>"Lessons Learned: One Year with a Custom Static Site Generator" - Glenn Thompson</title>
<link rel="alternate" type="application/rss+xml" title="Glenn Thompson's Blog" href="/feed.xml" />
<link href="/dist/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
.prose-palenight {
--tw-prose-body: #bfc7d5;
--tw-prose-headings: #ffd580;
--tw-prose-links: #82aaff;
--tw-prose-code: #c792ea;
--tw-prose-pre-bg: #1b1e2b;
}
.prose h2 {
color: var(--tw-prose-headings);
font-family: Merriweather, serif;
font-weight: 700;
font-size: 1.5rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.prose p {
margin-bottom: 1rem;
line-height: 1.625;
}
.prose a {
color: var(--tw-prose-links);
text-decoration: none;
}
.prose a:hover {
color: #89ddff;
}
.prose code {
color: var(--tw-prose-code);
font-family: 'JetBrains Mono', monospace;
}
.prose pre {
background-color: var(--tw-prose-pre-bg);
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
margin-bottom: 1rem;
}
.prose ul, .prose ol {
margin-top: 0.5rem;
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.prose ul {
list-style-type: disc;
}
.prose ol {
list-style-type: decimal;
}
</style>
</head>
<body class="bg-base-bg text-palenight-50">
<nav class="bg-base-darker/80 backdrop-blur-sm shadow-sm border-b border-palenight-400/20 mb-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="/" class="text-accent-yellow font-serif text-xl font-bold">Glenn Thompson</a>
<div class="flex items-center gap-2 text-accent-yellow text-sm font-bold">
<span>[web, development, javascript, static-site, lessons]</span>
<span>•</span>
<time datetime="2025-03-13">March 13, 2025</time>
<span>•</span>
<span>6 min read</span>
</div>
</div>
</div>
</nav>
<main class="pt-24 pb-16 px-4">
<div class="max-w-4xl mx-auto">
<div class="content text-palenight-100 space-y-6">
<header class="mb-8">
<h1 class="text-4xl font-serif font-bold text-accent-yellow">"Lessons Learned: One Year with a Custom Static Site Generator"</h1>
<div class="flex items-center gap-4 text-palenight-300 mt-4">
<time datetime="2025-03-13">2025-03-13</time>
<span>•</span>
<span>6 min read</span>
<span>•</span>
<span>By Glenn Thompson</span>
</div>
<div class="flex flex-wrap gap-2 mt-4">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">[web</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">development</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">javascript</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">static-site</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">lessons]</span>
</div>
</header>
<article class="prose prose-palenight max-w-none">
<p>It&#39;s been just over a year since I <a href="/content/posts/2025-01-02-from-haunt-to-custom.html">transitioned from Haunt to my own custom static site generator</a> for this website. What started as an experiment to gain more control over my publishing workflow has evolved into a valuable learning experience that has shaped how I approach web development projects.</p>
<p>In this post, I&#39;ll share the key lessons I&#39;ve learned and insights I&#39;ve gained from building and maintaining my own static site generator. While the technical details are interesting, the real value has been in the broader lessons about software development, user experience, and the balance between complexity and simplicity.</p>
<h2>The Journey of Evolution</h2>
<h3>From Simple Beginnings</h3>
<p>When I first built my static site generator, it was remarkably simple - just the essential features needed to convert my writing into a website. No extra features, no complex configurations, just the basics.</p>
<p>Today, the system has evolved considerably, but not through grand design or elaborate planning. Instead, it grew organically based on real needs and actual usage. This organic growth taught me valuable lessons about software development.</p>
<h3>Lesson 1: Features Should Emerge from Usage</h3>
<p>Many of the features in my static site generator emerged from actual writing and publishing needs:</p>
<ol>
<li><p><strong>The Draft System</strong><br>When I found myself working on multiple posts simultaneously, I needed a way to keep unfinished posts separate from published content. This led to the draft system, which now helps me manage my writing workflow effectively.</p>
</li>
<li><p><strong>Tag Organization</strong><br>As my collection of posts grew, I needed a way to organize related content. The tag system emerged naturally from this need, rather than being built upfront based on assumptions about how I might want to organize content.</p>
</li>
<li><p><strong>Content Validation</strong><br>After accidentally publishing a post with a malformed date and another with a duplicate title, I added validation checks. These weren&#39;t part of the initial design but came from real-world publishing mishaps.</p>
</li>
</ol>
<h3>Lesson 2: Simplicity Drives Performance</h3>
<p>One of the most surprising lessons was how simplicity led to better performance:</p>
<ol>
<li><p><strong>Static HTML Generation</strong><br>By generating plain HTML files, the site loads quickly without any client-side processing. There&#39;s no JavaScript framework, no hydration, and no complex build process - just simple, fast HTML.</p>
</li>
<li><p><strong>Incremental Builds</strong><br>The build system only processes files that have changed. This means that even with hundreds of posts, updates are nearly instantaneous because only the necessary files are rebuilt.</p>
</li>
<li><p><strong>Minimal JavaScript</strong><br>By keeping JavaScript to a minimum and focusing on progressive enhancement, the site remains fast and accessible, even on slower connections.</p>
</li>
</ol>
<h3>Lesson 3: Developer Experience Matters</h3>
<p>A good developer experience has proven crucial for maintaining motivation to write and publish:</p>
<ol>
<li><p><strong>Smart Port Management</strong><br>After encountering port conflicts with other services, I added automatic port detection and fallback. The system now checks if a port is in use and automatically finds the next available one, eliminating the frustration of manual port configuration.</p>
</li>
<li><p><strong>Clear Error Messages</strong><br>When something goes wrong (like a failed CSS build or HTML conversion), the system provides clear, actionable error messages. This immediate feedback helps quickly identify and fix issues during the development process.</p>
</li>
<li><p><strong>Automated Validation</strong><br>The build system validates the environment before starting, checking for required directories and dependencies. These checks catch common setup issues early, making the development process smoother.</p>
</li>
</ol>
<h3>Lesson 4: Content Drives Development</h3>
<p>Perhaps the most important lesson has been letting content needs drive development:</p>
<ol>
<li><p><strong>Markdown Features</strong><br>I only added support for additional Markdown features (like tables and task lists) when I actually needed them in my writing. This prevented feature bloat and kept the system focused.</p>
</li>
<li><p><strong>RSS Feed</strong><br>The RSS feed wasn&#39;t part of the initial design but was added when the content volume grew enough to warrant it. This is a pattern I&#39;ve seen repeatedly - features are most valuable when they solve real, existing needs.</p>
</li>
<li><p><strong>Summary Generation</strong><br>The way post summaries are generated has evolved based on the actual content I write. Initially, it was a simple character count, but it now intelligently extracts meaningful previews based on content structure.</p>
</li>
</ol>
<h2>Looking Forward</h2>
<p>This project has taught me that the best software often evolves gradually in response to real needs rather than being built all at once from a grand design. It&#39;s a lesson that applies well beyond static site generators - it&#39;s about building software that serves actual needs rather than imagined ones.</p>
<p>Just today, while writing this post, I encountered and solved several development workflow issues. Instead of being frustrated by these challenges, I saw them as opportunities to improve the system. The resulting changes - like automatic port detection and better error handling - weren&#39;t part of any grand plan. They emerged naturally from real usage and made the system better in practical, meaningful ways.</p>
<p>The system isn&#39;t perfect, and it probably never will be. But it&#39;s continuously improving in ways that matter for my writing and publishing workflow. That, I&#39;ve learned, is far more valuable than technical perfection.</p>
<p>If you&#39;re considering building your own tools, remember:</p>
<ol>
<li>Start simple and let features emerge from actual usage</li>
<li>Focus on the experience - both for users and developers</li>
<li>Let real needs guide development</li>
<li>Embrace incremental improvements</li>
<li>Value simplicity - it often leads to better performance and maintainability</li>
<li>Use real-world problems as opportunities for improvement</li>
</ol>
<p>These lessons have influenced not just how I approach this project, but how I think about software development in general. Sometimes, the best insights come from the simplest projects - and often, they come right in the middle of writing about them.</p>
<h2>Looking Back and Forward</h2>
<p>Reflecting on this journey, the most valuable insight has been understanding that great software evolves naturally from real needs. Every feature in my static site generator—from the draft system to the validation checks—emerged from actual usage rather than upfront planning.</p>
<p>This experience has fundamentally changed how I approach software development. Instead of trying to build the perfect system from the start, I&#39;ve learned to:</p>
<ol>
<li>Start with the simplest solution that works</li>
<li>Let real usage guide feature development</li>
<li>Focus on maintainability over complexity</li>
<li>Prioritize the developer experience</li>
<li>Keep performance in mind at every step</li>
</ol>
<p>These principles have not only made my static site generator better but have also influenced how I approach every new project. Sometimes the best insights come from the simplest projects, and often they come right in the middle of writing about them.</p>
</article>
</div>
</div>
</main>
<footer class="bg-base-darker text-palenight-200 py-12 border-t border-palenight-400/20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<p class="text-palenight-300">&copy; 2024 Glenn Thompson. All rights reserved.</p>
<div class="webring-text mt-6">
<p class="text-palenight-300">I am part of the <a href="https://systemcrafters.net" target="_blank" class="text-accent-blue hover:text-accent-cyan">System Crafters</a> webring:</p>
</div>
<div class="craftering mt-2 flex items-center justify-center gap-4 text-accent-blue">
<a href="https://craftering.systemcrafters.net/@glenneth/previous" class="hover:text-accent-cyan">Previous</a>
<a href="https://craftering.systemcrafters.net/@glenneth" class="hover:text-accent-cyan">Random</a>
<a href="https://craftering.systemcrafters.net/@glenneth/next" class="hover:text-accent-cyan">Next</a>
</div>
<p class="text-palenight-300 mt-2">
<a href="mailto:glenn@glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenn@glenneth.org</a> |
<a href="https://glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenneth.org</a>
</p>
</div>
</div>
</footer>
</body>
</html>

10
deploy/favicon.svg
View File

@ -1,5 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="32" height="32" version="1.1" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<rect width="32" height="32" rx="6" fill="#1a1b26"/>
<text x="50%" y="50%" text-anchor="middle" dominant-baseline="central" fill="#e0af68" font-family="Inter, sans-serif" font-size="16" font-weight="bold">GT</text>
</svg>
<?xml version="1.0" encoding="UTF-8"?>
<svg width="32" height="32" version="1.1" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<rect width="32" height="32" rx="6" fill="#1a1b26"/>
<text x="50%" y="50%" text-anchor="middle" dominant-baseline="central" fill="#e0af68" font-family="Inter, sans-serif" font-size="16" font-weight="bold">GT</text>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 363 B

After

Width:  |  Height:  |  Size: 368 B

1990
deploy/feed.xml
View File

File diff suppressed because it is too large Load Diff

768
deploy/index.html
View File

@ -1,385 +1,385 @@
<!DOCTYPE html>
<html lang="en" class="bg-base-bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description"
content="Glenn Thompson's personal blog about technology, engineering, and travel experiences in the Middle East">
<meta property="og:title" content="Glenn Thompson - Technology, Engineering & Travel">
<meta property="og:description"
content="Exploring the intersection of electrical engineering, technology, and cultural experiences from two decades in the Middle East">
<meta property="og:url" content="https://glenneth.org">
<title>Glenn Thompson - Technology, Engineering & Travel</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="alternate" type="application/rss+xml" title="Glenn Thompson's Blog" href="/feed.xml" />
<link href="./dist/styles.css" rel="stylesheet">
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap"
rel="stylesheet">
<script defer src="./src/js/main.js"></script>
</head>
<body class="bg-base-bg text-palenight-50">
<nav class="fixed w-full bg-base-darker/80 backdrop-blur-sm shadow-sm z-50 border-b border-palenight-400/20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex">
<a href="#" class="flex items-center font-serif text-xl font-bold text-accent-purple">Glenn
Thompson</a>
</div>
<div class="hidden sm:ml-6 sm:flex sm:space-x-8">
<a href="#about" class="nav-link text-accent-blue hover:text-accent-cyan">About</a>
<a href="#blog" class="nav-link text-accent-blue hover:text-accent-cyan">Blog</a>
<a href="#projects" class="nav-link text-accent-blue hover:text-accent-cyan">Projects</a>
<a href="#contact" class="nav-link text-accent-blue hover:text-accent-cyan">Contact</a>
</div>
</div>
</div>
</nav>
<main>
<!-- Hero Section -->
<section class="pt-24 pb-16 px-4 sm:pt-32 sm:pb-24 bg-base-bg">
<div class="max-w-7xl mx-auto">
<div class="text-center">
<h1 class="text-4xl font-serif font-bold tracking-tight text-accent-yellow sm:text-6xl">
Technology, Engineering & Travel
</h1>
<p class="mt-6 text-lg leading-8 text-palenight-100 max-w-2xl mx-auto">
Exploring the intersection of electrical engineering, technology, and cultural experiences from
two decades in the Middle East.
</p>
</div>
</div>
</section>
<!-- Featured Posts -->
<section id="blog" class="py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-serif font-bold text-accent-yellow mb-8">Blog Posts</h2>
<div class="grid gap-8 md:grid-cols-2">
<article class="bg-base-darker p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors">
<div class="flex flex-wrap items-center gap-2 text-accent-yellow text-sm mb-2 font-bold">
<span>Tech</span>
<span>•</span><span>web</span><span>•</span><span>development</span><span>•</span><span>javascript</span><span>•</span><span>static-site</span><span>•</span><span>lessons</span>
<span>•</span>
<time datetime="2025-03-13">March 13, 2025</time>
</div>
<h3 class="text-xl font-serif font-bold text-accent-yellow mb-3">
<a href="/content/posts/2025-03-12-lessons-learned-custom-ssg.html" class="hover:text-accent-cyan transition-colors">
Lessons Learned: One Year with a Custom Static Site Generator
</a>
</h3>
<p class="text-palenight-100 mb-4">It's been just over a year since I transitioned from Haunt to my own custom static site generator for this website. What started as an experiment to gain more control over my publishing workflow has e...</p>
<div class="flex flex-wrap gap-2">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">web</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">development</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">javascript</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">static-site</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">lessons</span>
</div>
</article>
<article class="bg-base-darker p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors">
<div class="flex flex-wrap items-center gap-2 text-accent-yellow text-sm mb-2 font-bold">
<span>Tech</span>
<span>•</span><span>development</span><span>•</span><span>guix</span><span>•</span><span>tools</span><span>•</span><span>workflow</span><span>•</span><span>productivity</span><span>•</span><span>web</span>
<span>•</span>
<time datetime="2025-03-08">March 8, 2025</time>
</div>
<h3 class="text-xl font-serif font-bold text-accent-yellow mb-3">
<a href="/content/posts/2025-03-08-my-dev-environment-2025.html" class="hover:text-accent-cyan transition-colors">
My Development Environment in 2025: From Editor to Deployment
</a>
</h3>
<p class="text-palenight-100 mb-4">The tools we use shape how we work. Over the years, my development environment has evolved alongside my technical journey through different programming languages, paradigms, and projects. This post of...</p>
<div class="flex flex-wrap gap-2">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">development</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">guix</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">tools</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">workflow</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">productivity</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">web</span>
</div>
</article>
<article class="bg-base-darker p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors">
<div class="flex flex-wrap items-center gap-2 text-accent-yellow text-sm mb-2 font-bold">
<span>Tech</span>
<span>•</span><span>web</span><span>•</span><span>development</span><span>•</span><span>javascript</span><span>•</span><span>static-site</span><span>•</span><span>haunt</span><span>•</span><span>guile</span><span>•</span><span>hugo</span>
<span>•</span>
<time datetime="2025-01-02">January 2, 2025</time>
</div>
<h3 class="text-xl font-serif font-bold text-accent-yellow mb-3">
<a href="/content/posts/2025-01-02-from-haunt-to-custom.html" class="hover:text-accent-cyan transition-colors">
From Hugo to Haunt to Custom: My Journey in Static Site Generation
</a>
</h3>
<p class="text-palenight-100 mb-4">My journey with static site generators has been one of continuous learning and evolution. It started with Hugo, transitioned through Haunt, and has now led me to build my own custom solution. Each ste...</p>
<div class="flex flex-wrap gap-2">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">web</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">development</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">javascript</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">static-site</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">haunt</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">guile</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">hugo</span>
</div>
</article>
<article class="bg-base-darker p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors">
<div class="flex flex-wrap items-center gap-2 text-accent-yellow text-sm mb-2 font-bold">
<span>Tech</span>
<span>•</span><span>tech</span><span>•</span><span>guile</span><span>•</span><span>scheme</span><span>•</span><span>development</span><span>•</span><span>functional-programming</span>
<span>•</span>
<time datetime="2024-12-03">December 3, 2024</time>
</div>
<h3 class="text-xl font-serif font-bold text-accent-yellow mb-3">
<a href="/content/posts/2024-12-03-practical-scheme.html" class="hover:text-accent-cyan transition-colors">
Beyond Theory: Building Practical Tools with Guile Scheme
</a>
</h3>
<p class="text-palenight-100 mb-4">A few months ago, I shared my journey into learning Scheme through building stash, a symlink manager. Since then, I've discovered that the gap between learning Scheme and applying it to real-world pro...</p>
<div class="flex flex-wrap gap-2">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">tech</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">guile</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">scheme</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">development</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">functional-programming</span>
</div>
</article>
<article class="bg-base-darker p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors">
<div class="flex flex-wrap items-center gap-2 text-accent-yellow text-sm mb-2 font-bold">
<span>Tech</span>
<span>•</span><span>personal</span><span>•</span><span>tech</span><span>•</span><span>guile</span><span>•</span><span>scheme</span><span>•</span><span>gnu</span><span>•</span><span>development</span>
<span>•</span>
<time datetime="2024-09-24">September 24, 2024</time>
</div>
<h3 class="text-xl font-serif font-bold text-accent-yellow mb-3">
<a href="/content/posts/2024-09-24-scheme-journey.html" class="hover:text-accent-cyan transition-colors">
A Journey into Scheme
</a>
</h3>
<p class="text-palenight-100 mb-4">I've spent my career as an electrical engineer, not a software developer. However, my recent journey in to GNU/Liniux required a tool for managing symlinks, and that's how I began learning Scheme—spec...</p>
<div class="flex flex-wrap gap-2">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">personal</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">tech</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">guile</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">scheme</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">gnu</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">development</span>
</div>
</article>
<article class="bg-base-darker p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors">
<div class="flex flex-wrap items-center gap-2 text-accent-yellow text-sm mb-2 font-bold">
<span>Tech</span>
<span>•</span><span>personal</span><span>•</span><span>tech</span><span>•</span><span>gnu</span><span>•</span><span>guix</span><span>•</span><span>swaywm</span><span>•</span><span>nvidia</span>
<span>•</span>
<time datetime="2024-07-26">July 26, 2024</time>
</div>
<h3 class="text-xl font-serif font-bold text-accent-yellow mb-3">
<a href="/content/posts/2024-07-26-gnu-guix-journey.html" class="hover:text-accent-cyan transition-colors">
A Journey Through GNU Guix: From Installation to Returning to Arch Linux
</a>
</h3>
<p class="text-palenight-100 mb-4">As a long-time user of Arch Linux, I decided to explore the world of GNU Guix to see if it could better suit my needs, especially with my growing interest in functional package management. The journey...</p>
<div class="flex flex-wrap gap-2">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">personal</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">tech</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">gnu</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">guix</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">swaywm</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">nvidia</span>
</div>
</article>
<article class="bg-base-darker p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors">
<div class="flex flex-wrap items-center gap-2 text-accent-yellow text-sm mb-2 font-bold">
<span>Tech</span>
<span>•</span><span>personal</span><span>•</span><span>tech</span><span>•</span><span>keyboards</span><span>•</span><span>glove80</span>
<span>•</span>
<time datetime="2024-05-15">May 15, 2024</time>
</div>
<h3 class="text-xl font-serif font-bold text-accent-yellow mb-3">
<a href="/content/posts/2024-05-15-hugo-to-haunt.html" class="hover:text-accent-cyan transition-colors">
Transitioning from Hugo to Haunt: Embracing Scheme and GNU Guix
</a>
</h3>
<p class="text-palenight-100 mb-4">Hello there! I'm Glenn Thompson, and today, I want to share a significant part of my recent journey into the world of Scheme, GNU Guix, and static site generation.</p>
<div class="flex flex-wrap gap-2">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">personal</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">tech</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">keyboards</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">glove80</span>
</div>
</article>
<article class="bg-base-darker p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors">
<div class="flex flex-wrap items-center gap-2 text-accent-yellow text-sm mb-2 font-bold">
<span>Tech</span>
<span>•</span><span>work</span><span>•</span><span>travel</span>
<span>•</span>
<time datetime="2024-05-01">May 1, 2024</time>
</div>
<h3 class="text-xl font-serif font-bold text-accent-yellow mb-3">
<a href="/content/posts/2024-05-01-amman-newcastle-journey.html" class="hover:text-accent-cyan transition-colors">
A Rollercoaster Week: From Amman to Newcastle, and back again
</a>
</h3>
<p class="text-palenight-100 mb-4">Two weeks ago was a whirlwind of events, taking me from the conforting embrace of Amman, Jordan to the vibrant streets of Newcastle, England. It was a journey filled with highs and lows, professional...</p>
<div class="flex flex-wrap gap-2">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">work</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">travel</span>
</div>
</article>
<article class="bg-base-darker p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors">
<div class="flex flex-wrap items-center gap-2 text-accent-yellow text-sm mb-2 font-bold">
<span>Tech</span>
<span>•</span><span>personal</span><span>•</span><span>tech</span><span>•</span><span>keyboards</span><span>•</span><span>glove80</span>
<span>•</span>
<time datetime=""2024-04-08">April 8, 2024</time>
</div>
<h3 class="text-xl font-serif font-bold text-accent-yellow mb-3">
<a href="/content/posts/2024-04-08-glove80-review.html" class="hover:text-accent-cyan transition-colors">
Aesthetic Meets Ergonomics: My Deep Dive into the Glove80 Keyboard
</a>
</h3>
<p class="text-palenight-100 mb-4">As my career trajectory veered from being an integral member of an electrical engineering team to assuming the role of Deputy Project Manager, the nature of my daily activities underwent a significant...</p>
<div class="flex flex-wrap gap-2">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">personal</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">tech</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">keyboards</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">glove80</span>
</div>
</article>
</div><!-- End blog posts -->
</div>
</section>
<!-- Projects Section -->
<section id="projects" class="py-16 bg-base-darker">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-serif font-bold text-accent-yellow mb-8">Projects</h2>
<div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
<!-- Personal Website Project -->
<article
class="bg-base-bg p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors">
<h3 class="text-xl font-serif font-bold text-accent-yellow mb-3">Personal Website</h3>
<p class="text-palenight-100 mb-4">A modern, responsive personal website built with HTML,
TailwindCSS, and JavaScript. Features a dark theme and blog functionality.</p>
<div class="flex gap-2 mb-4">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-darker text-xs">HTML</span>
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-darker text-xs">TailwindCSS</span>
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-darker text-xs">JavaScript</span>
</div>
<a href="https://github.com/glenneth1/personal-website"
class="text-accent-cyan hover:text-accent-purple transition-colors">View Source →</a>
</article>
<!-- Symlink Manager Project -->
<article
class="bg-base-bg p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors">
<h3 class="text-xl font-serif font-bold text-accent-yellow mb-3">Scheme Symlink Manager</h3>
<p class="text-palenight-100 mb-4">A command-line tool built with Guile Scheme for managing
symbolic links in Unix-like systems. Simplifies dotfile management.</p>
<div class="flex gap-2 mb-4">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-darker text-xs">Scheme</span>
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-darker text-xs">Guile</span>
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-darker text-xs">CLI</span>
</div>
<a href="#" class="text-accent-cyan hover:text-accent-purple transition-colors">Coming Soon
→</a>
</article>
<!-- Add Project Card -->
<article
class="bg-base-bg p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors flex items-center justify-center">
<div class="text-center">
<p class="text-palenight-100 mb-2">More projects coming soon!</p>
<p class="text-accent-cyan">Stay tuned...</p>
</div>
</article>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="py-16 bg-base-bg">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<div>
<h2 class="text-3xl font-serif font-bold text-accent-yellow mb-6">About Me</h2>
<p class="text-palenight-100 mb-4">
With over 20 years in the electrical engineering field, I've had the privilege of working on
groundbreaking projects across the Middle East. My journey has been marked by continuous
learning, cultural exploration, and technological innovation.
</p>
<p class="text-palenight-100 mb-4">
Beyond my professional work, I'm passionate about technology, particularly static site
generation, Scheme programming, and tools like GNU Guix and Haunt. This blog is where I
share my experiences, insights, and the lessons learned along the way.
</p>
</div>
<div class="bg-base-darker p-8 rounded-lg shadow-md border border-palenight-400/20">
<h3 class="text-xl font-bold text-accent-yellow mb-4">Areas of Focus</h3>
<ul class="space-y-3">
<li class="flex items-center text-palenight-100">
<svg class="w-5 h-5 text-accent-blue mr-2" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"></path>
</svg>
Electrical Engineering
</li>
<li class="flex items-center text-palenight-100">
<svg class="w-5 h-5 text-accent-blue mr-2" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"></path>
</svg>
Static Site Generation
</li>
<li class="flex items-center text-palenight-100">
<svg class="w-5 h-5 text-accent-blue mr-2" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"></path>
</svg>
Scheme Programming
</li>
<li class="flex items-center text-palenight-100">
<svg class="w-5 h-5 text-accent-blue mr-2" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"></path>
</svg>
Middle Eastern Culture
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-16 bg-base-darker">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<h2 class="text-3xl font-serif font-bold text-accent-yellow mb-6">Get in Touch</h2>
<p class="text-palenight-100 mb-8">
Interested in connecting? Feel free to reach out for discussions about technology, engineering,
or sharing travel stories.
</p>
<a href="mailto:glenn@glenneth.org"
class="inline-flex items-center px-6 py-3 border border-accent-blue text-base font-medium rounded-md text-accent-blue hover:bg-accent-blue hover:text-base-bg transition-colors">
Send a Message
</a>
</div>
</div>
</section>
</main>
<footer class="bg-base-darker text-palenight-200 py-12 border-t border-palenight-400/20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<p class="text-palenight-300">&copy; 2024 Glenn Thompson. All rights reserved.</p>
<div class="webring-text mt-6">
<p class="text-palenight-300">I am part of the <a href="https://systemcrafters.net" target="_blank"
class="text-accent-blue hover:text-accent-cyan">System Crafters</a> webring:</p>
</div>
<div class="craftering mt-2 flex items-center justify-center gap-4 text-accent-blue">
<a href="https://craftering.systemcrafters.net/@glenneth/previous"
class="hover:text-accent-cyan">←</a>
<a href="https://craftering.systemcrafters.net/" class="hover:text-accent-cyan">craftering</a>
<a href="https://craftering.systemcrafters.net/@glenneth/next" class="hover:text-accent-cyan">→</a>
</div>
<p class="text-palenight-300 mt-2">
<a href="mailto:glenn@glenneth.org"
class="text-accent-blue hover:text-accent-cyan transition-colors">glenn@glenneth.org</a> |
<a href="https://glenneth.org"
class="text-accent-blue hover:text-accent-cyan transition-colors">glenneth.org</a>
</p>
</div>
</div>
</footer>
</body>
<!DOCTYPE html>
<html lang="en" class="bg-base-bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description"
content="Glenn Thompson's personal blog about technology, engineering, and travel experiences in the Middle East">
<meta property="og:title" content="Glenn Thompson - Technology, Engineering & Travel">
<meta property="og:description"
content="Exploring the intersection of electrical engineering, technology, and cultural experiences from two decades in the Middle East">
<meta property="og:url" content="https://glenneth.org">
<title>Glenn Thompson - Technology, Engineering & Travel</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="alternate" type="application/rss+xml" title="Glenn Thompson's Blog" href="/feed.xml" />
<link href="./dist/styles.css" rel="stylesheet">
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap"
rel="stylesheet">
<script defer src="./src/js/main.js"></script>
</head>
<body class="bg-base-bg text-palenight-50">
<nav class="fixed w-full bg-base-darker/80 backdrop-blur-sm shadow-sm z-50 border-b border-palenight-400/20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex">
<a href="#" class="flex items-center font-serif text-xl font-bold text-accent-purple">Glenn
Thompson</a>
</div>
<div class="hidden sm:ml-6 sm:flex sm:space-x-8">
<a href="#about" class="nav-link text-accent-blue hover:text-accent-cyan">About</a>
<a href="#blog" class="nav-link text-accent-blue hover:text-accent-cyan">Blog</a>
<a href="#projects" class="nav-link text-accent-blue hover:text-accent-cyan">Projects</a>
<a href="#contact" class="nav-link text-accent-blue hover:text-accent-cyan">Contact</a>
</div>
</div>
</div>
</nav>
<main>
<!-- Hero Section -->
<section class="pt-24 pb-16 px-4 sm:pt-32 sm:pb-24 bg-base-bg">
<div class="max-w-7xl mx-auto">
<div class="text-center">
<h1 class="text-4xl font-serif font-bold tracking-tight text-accent-yellow sm:text-6xl">
Technology, Engineering & Travel
</h1>
<p class="mt-6 text-lg leading-8 text-palenight-100 max-w-2xl mx-auto">
Exploring the intersection of electrical engineering, technology, and cultural experiences from
two decades in the Middle East.
</p>
</div>
</div>
</section>
<!-- Featured Posts -->
<section id="blog" class="py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-serif font-bold text-accent-yellow mb-8">Blog Posts</h2>
<div class="grid gap-8 md:grid-cols-2">
<article class="bg-base-darker p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors">
<div class="flex flex-wrap items-center gap-2 text-accent-yellow text-sm mb-2 font-bold">
<span>Tech</span>
<span>•</span><span>web</span><span>•</span><span>development</span><span>•</span><span>javascript</span><span>•</span><span>static-site</span><span>•</span><span>lessons</span>
<span>•</span>
<time datetime="2025-03-13">March 13, 2025</time>
</div>
<h3 class="text-xl font-serif font-bold text-accent-yellow mb-3">
<a href="/content/posts/2025-03-12-lessons-learned-custom-ssg.html" class="hover:text-accent-cyan transition-colors">
Lessons Learned: One Year with a Custom Static Site Generator
</a>
</h3>
<p class="text-palenight-100 mb-4">It's been just over a year since I transitioned from Haunt to my own custom static site generator for this website. What started as an experiment to gain more control over my publishing workflow has e...</p>
<div class="flex flex-wrap gap-2">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">web</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">development</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">javascript</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">static-site</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">lessons</span>
</div>
</article>
<article class="bg-base-darker p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors">
<div class="flex flex-wrap items-center gap-2 text-accent-yellow text-sm mb-2 font-bold">
<span>Tech</span>
<span>•</span><span>development</span><span>•</span><span>guix</span><span>•</span><span>tools</span><span>•</span><span>workflow</span><span>•</span><span>productivity</span><span>•</span><span>web</span>
<span>•</span>
<time datetime="2025-03-08">March 8, 2025</time>
</div>
<h3 class="text-xl font-serif font-bold text-accent-yellow mb-3">
<a href="/content/posts/2025-03-08-my-dev-environment-2025.html" class="hover:text-accent-cyan transition-colors">
My Development Environment in 2025: From Editor to Deployment
</a>
</h3>
<p class="text-palenight-100 mb-4">The tools we use shape how we work. Over the years, my development environment has evolved alongside my technical journey through different programming languages, paradigms, and projects. This post of...</p>
<div class="flex flex-wrap gap-2">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">development</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">guix</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">tools</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">workflow</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">productivity</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">web</span>
</div>
</article>
<article class="bg-base-darker p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors">
<div class="flex flex-wrap items-center gap-2 text-accent-yellow text-sm mb-2 font-bold">
<span>Tech</span>
<span>•</span><span>web</span><span>•</span><span>development</span><span>•</span><span>javascript</span><span>•</span><span>static-site</span><span>•</span><span>haunt</span><span>•</span><span>guile</span><span>•</span><span>hugo</span>
<span>•</span>
<time datetime="2025-01-02">January 2, 2025</time>
</div>
<h3 class="text-xl font-serif font-bold text-accent-yellow mb-3">
<a href="/content/posts/2025-01-02-from-haunt-to-custom.html" class="hover:text-accent-cyan transition-colors">
From Hugo to Haunt to Custom: My Journey in Static Site Generation
</a>
</h3>
<p class="text-palenight-100 mb-4">My journey with static site generators has been one of continuous learning and evolution. It started with Hugo, transitioned through Haunt, and has now led me to build my own custom solution. Each ste...</p>
<div class="flex flex-wrap gap-2">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">web</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">development</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">javascript</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">static-site</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">haunt</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">guile</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">hugo</span>
</div>
</article>
<article class="bg-base-darker p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors">
<div class="flex flex-wrap items-center gap-2 text-accent-yellow text-sm mb-2 font-bold">
<span>Tech</span>
<span>•</span><span>tech</span><span>•</span><span>guile</span><span>•</span><span>scheme</span><span>•</span><span>development</span><span>•</span><span>functional-programming</span>
<span>•</span>
<time datetime="2024-12-03">December 3, 2024</time>
</div>
<h3 class="text-xl font-serif font-bold text-accent-yellow mb-3">
<a href="/content/posts/2024-12-03-practical-scheme.html" class="hover:text-accent-cyan transition-colors">
Beyond Theory: Building Practical Tools with Guile Scheme
</a>
</h3>
<p class="text-palenight-100 mb-4">A few months ago, I shared my journey into learning Scheme through building stash, a symlink manager. Since then, I've discovered that the gap between learning Scheme and applying it to real-world pro...</p>
<div class="flex flex-wrap gap-2">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">tech</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">guile</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">scheme</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">development</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">functional-programming</span>
</div>
</article>
<article class="bg-base-darker p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors">
<div class="flex flex-wrap items-center gap-2 text-accent-yellow text-sm mb-2 font-bold">
<span>Tech</span>
<span>•</span><span>personal</span><span>•</span><span>tech</span><span>•</span><span>guile</span><span>•</span><span>scheme</span><span>•</span><span>gnu</span><span>•</span><span>development</span>
<span>•</span>
<time datetime="2024-09-24">September 24, 2024</time>
</div>
<h3 class="text-xl font-serif font-bold text-accent-yellow mb-3">
<a href="/content/posts/2024-09-24-scheme-journey.html" class="hover:text-accent-cyan transition-colors">
A Journey into Scheme
</a>
</h3>
<p class="text-palenight-100 mb-4">I've spent my career as an electrical engineer, not a software developer. However, my recent journey in to GNU/Liniux required a tool for managing symlinks, and that's how I began learning Scheme—spec...</p>
<div class="flex flex-wrap gap-2">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">personal</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">tech</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">guile</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">scheme</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">gnu</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">development</span>
</div>
</article>
<article class="bg-base-darker p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors">
<div class="flex flex-wrap items-center gap-2 text-accent-yellow text-sm mb-2 font-bold">
<span>Tech</span>
<span>•</span><span>personal</span><span>•</span><span>tech</span><span>•</span><span>gnu</span><span>•</span><span>guix</span><span>•</span><span>swaywm</span><span>•</span><span>nvidia</span>
<span>•</span>
<time datetime="2024-07-26">July 26, 2024</time>
</div>
<h3 class="text-xl font-serif font-bold text-accent-yellow mb-3">
<a href="/content/posts/2024-07-26-gnu-guix-journey.html" class="hover:text-accent-cyan transition-colors">
A Journey Through GNU Guix: From Installation to Returning to Arch Linux
</a>
</h3>
<p class="text-palenight-100 mb-4">As a long-time user of Arch Linux, I decided to explore the world of GNU Guix to see if it could better suit my needs, especially with my growing interest in functional package management. The journey...</p>
<div class="flex flex-wrap gap-2">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">personal</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">tech</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">gnu</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">guix</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">swaywm</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">nvidia</span>
</div>
</article>
<article class="bg-base-darker p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors">
<div class="flex flex-wrap items-center gap-2 text-accent-yellow text-sm mb-2 font-bold">
<span>Tech</span>
<span>•</span><span>personal</span><span>•</span><span>tech</span><span>•</span><span>keyboards</span><span>•</span><span>glove80</span>
<span>•</span>
<time datetime="2024-05-15">May 15, 2024</time>
</div>
<h3 class="text-xl font-serif font-bold text-accent-yellow mb-3">
<a href="/content/posts/2024-05-15-hugo-to-haunt.html" class="hover:text-accent-cyan transition-colors">
Transitioning from Hugo to Haunt: Embracing Scheme and GNU Guix
</a>
</h3>
<p class="text-palenight-100 mb-4">Hello there! I'm Glenn Thompson, and today, I want to share a significant part of my recent journey into the world of Scheme, GNU Guix, and static site generation.</p>
<div class="flex flex-wrap gap-2">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">personal</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">tech</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">keyboards</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">glove80</span>
</div>
</article>
<article class="bg-base-darker p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors">
<div class="flex flex-wrap items-center gap-2 text-accent-yellow text-sm mb-2 font-bold">
<span>Tech</span>
<span>•</span><span>work</span><span>•</span><span>travel</span>
<span>•</span>
<time datetime="2024-05-01">May 1, 2024</time>
</div>
<h3 class="text-xl font-serif font-bold text-accent-yellow mb-3">
<a href="/content/posts/2024-05-01-amman-newcastle-journey.html" class="hover:text-accent-cyan transition-colors">
A Rollercoaster Week: From Amman to Newcastle, and back again
</a>
</h3>
<p class="text-palenight-100 mb-4">Two weeks ago was a whirlwind of events, taking me from the conforting embrace of Amman, Jordan to the vibrant streets of Newcastle, England. It was a journey filled with highs and lows, professional...</p>
<div class="flex flex-wrap gap-2">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">work</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">travel</span>
</div>
</article>
<article class="bg-base-darker p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors">
<div class="flex flex-wrap items-center gap-2 text-accent-yellow text-sm mb-2 font-bold">
<span>Tech</span>
<span>•</span><span>personal</span><span>•</span><span>tech</span><span>•</span><span>keyboards</span><span>•</span><span>glove80</span>
<span>•</span>
<time datetime=""2024-04-08">April 8, 2024</time>
</div>
<h3 class="text-xl font-serif font-bold text-accent-yellow mb-3">
<a href="/content/posts/2024-04-08-glove80-review.html" class="hover:text-accent-cyan transition-colors">
Aesthetic Meets Ergonomics: My Deep Dive into the Glove80 Keyboard
</a>
</h3>
<p class="text-palenight-100 mb-4">As my career trajectory veered from being an integral member of an electrical engineering team to assuming the role of Deputy Project Manager, the nature of my daily activities underwent a significant...</p>
<div class="flex flex-wrap gap-2">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">personal</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">tech</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">keyboards</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">glove80</span>
</div>
</article>
</div><!-- End blog posts -->
</div>
</section>
<!-- Projects Section -->
<section id="projects" class="py-16 bg-base-darker">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-serif font-bold text-accent-yellow mb-8">Projects</h2>
<div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
<!-- Personal Website Project -->
<article
class="bg-base-bg p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors">
<h3 class="text-xl font-serif font-bold text-accent-yellow mb-3">Personal Website</h3>
<p class="text-palenight-100 mb-4">A modern, responsive personal website built with HTML,
TailwindCSS, and JavaScript. Features a dark theme and blog functionality.</p>
<div class="flex gap-2 mb-4">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-darker text-xs">HTML</span>
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-darker text-xs">TailwindCSS</span>
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-darker text-xs">JavaScript</span>
</div>
<a href="https://github.com/glenneth1/personal-website"
class="text-accent-cyan hover:text-accent-purple transition-colors">View Source →</a>
</article>
<!-- Symlink Manager Project -->
<article
class="bg-base-bg p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors">
<h3 class="text-xl font-serif font-bold text-accent-yellow mb-3">Scheme Symlink Manager</h3>
<p class="text-palenight-100 mb-4">A command-line tool built with Guile Scheme for managing
symbolic links in Unix-like systems. Simplifies dotfile management.</p>
<div class="flex gap-2 mb-4">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-darker text-xs">Scheme</span>
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-darker text-xs">Guile</span>
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-darker text-xs">CLI</span>
</div>
<a href="#" class="text-accent-cyan hover:text-accent-purple transition-colors">Coming Soon
→</a>
</article>
<!-- Add Project Card -->
<article
class="bg-base-bg p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors flex items-center justify-center">
<div class="text-center">
<p class="text-palenight-100 mb-2">More projects coming soon!</p>
<p class="text-accent-cyan">Stay tuned...</p>
</div>
</article>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="py-16 bg-base-bg">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<div>
<h2 class="text-3xl font-serif font-bold text-accent-yellow mb-6">About Me</h2>
<p class="text-palenight-100 mb-4">
With over 20 years in the electrical engineering field, I've had the privilege of working on
groundbreaking projects across the Middle East. My journey has been marked by continuous
learning, cultural exploration, and technological innovation.
</p>
<p class="text-palenight-100 mb-4">
Beyond my professional work, I'm passionate about technology, particularly static site
generation, Scheme programming, and tools like GNU Guix and Haunt. This blog is where I
share my experiences, insights, and the lessons learned along the way.
</p>
</div>
<div class="bg-base-darker p-8 rounded-lg shadow-md border border-palenight-400/20">
<h3 class="text-xl font-bold text-accent-yellow mb-4">Areas of Focus</h3>
<ul class="space-y-3">
<li class="flex items-center text-palenight-100">
<svg class="w-5 h-5 text-accent-blue mr-2" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"></path>
</svg>
Electrical Engineering
</li>
<li class="flex items-center text-palenight-100">
<svg class="w-5 h-5 text-accent-blue mr-2" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"></path>
</svg>
Static Site Generation
</li>
<li class="flex items-center text-palenight-100">
<svg class="w-5 h-5 text-accent-blue mr-2" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"></path>
</svg>
Scheme Programming
</li>
<li class="flex items-center text-palenight-100">
<svg class="w-5 h-5 text-accent-blue mr-2" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"></path>
</svg>
Middle Eastern Culture
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-16 bg-base-darker">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<h2 class="text-3xl font-serif font-bold text-accent-yellow mb-6">Get in Touch</h2>
<p class="text-palenight-100 mb-8">
Interested in connecting? Feel free to reach out for discussions about technology, engineering,
or sharing travel stories.
</p>
<a href="mailto:glenn@glenneth.org"
class="inline-flex items-center px-6 py-3 border border-accent-blue text-base font-medium rounded-md text-accent-blue hover:bg-accent-blue hover:text-base-bg transition-colors">
Send a Message
</a>
</div>
</div>
</section>
</main>
<footer class="bg-base-darker text-palenight-200 py-12 border-t border-palenight-400/20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<p class="text-palenight-300">&copy; 2024 Glenn Thompson. All rights reserved.</p>
<div class="webring-text mt-6">
<p class="text-palenight-300">I am part of the <a href="https://systemcrafters.net" target="_blank"
class="text-accent-blue hover:text-accent-cyan">System Crafters</a> webring:</p>
</div>
<div class="craftering mt-2 flex items-center justify-center gap-4 text-accent-blue">
<a href="https://craftering.systemcrafters.net/@glenneth/previous"
class="hover:text-accent-cyan">←</a>
<a href="https://craftering.systemcrafters.net/" class="hover:text-accent-cyan">craftering</a>
<a href="https://craftering.systemcrafters.net/@glenneth/next" class="hover:text-accent-cyan">→</a>
</div>
<p class="text-palenight-300 mt-2">
<a href="mailto:glenn@glenneth.org"
class="text-accent-blue hover:text-accent-cyan transition-colors">glenn@glenneth.org</a> |
<a href="https://glenneth.org"
class="text-accent-blue hover:text-accent-cyan transition-colors">glenneth.org</a>
</p>
</div>
</div>
</footer>
</body>
</html>

222
deploy/js/generate-rss.js
View File

@ -1,111 +1,111 @@
const fs = require('fs');
const path = require('path');
const marked = require('marked');
function sanitizeTitle(title) {
// Remove any surrounding quotes and trim whitespace
return title.replace(/^["']|["']$/g, '').trim();
}
function formatDate(dateStr) {
// Ensure consistent date format
const date = new Date(dateStr);
return date.toUTCString();
}
function extractMetadata(markdown) {
const metadata = {};
const match = markdown.match(/^---\n([\s\S]*?)\n---/);
if (match) {
const frontMatter = match[1];
frontMatter.split('\n').forEach(line => {
const [key, ...valueParts] = line.split(':');
if (key && valueParts.length > 0) {
metadata[key.trim()] = valueParts.join(':').trim();
}
});
}
// Get content without front matter
const content = markdown.replace(/^---\n[\s\S]*?\n---\n/, '');
// Extract first paragraph as description if no description in metadata
if (!metadata.description) {
const firstParagraph = content.match(/\n\n(.*?)\n\n/);
if (firstParagraph) {
metadata.description = firstParagraph[1].replace(/[#*`]/g, '').trim();
}
}
// Convert markdown content to HTML
const htmlContent = marked.parse(content, {
gfm: true,
breaks: true,
smartLists: true,
smartypants: true
});
metadata.content = htmlContent;
return metadata;
}
function generateRSSFeed() {
const postsDir = path.join(__dirname, '../../content/posts');
const posts = [];
// Read all markdown files
fs.readdirSync(postsDir)
.filter(file => file.endsWith('.md'))
.forEach(file => {
const filePath = path.join(postsDir, file);
const content = fs.readFileSync(filePath, 'utf-8');
const metadata = extractMetadata(content);
if (metadata.title && metadata.date) {
posts.push({
title: sanitizeTitle(metadata.title),
date: formatDate(metadata.date),
description: metadata.description || '',
content: metadata.content,
author: metadata.author || 'Glenn Thompson',
link: `https://glenneth.org/content/posts/${file.replace('.md', '.html')}`,
tags: metadata.tags || ''
});
}
});
// Sort posts by date (newest first)
posts.sort((a, b) => new Date(b.date) - new Date(a.date));
// Generate RSS XML
const rss = `<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
<channel>
<title>Glenn Thompson's Blog</title>
<description>Personal blog about programming, technology, and other interests</description>
<link>https://glenneth.org</link>
<atom:link href="https://glenneth.org/feed.xml" rel="self" type="application/rss+xml" />
<language>en-us</language>
<lastBuildDate>${new Date().toUTCString()}</lastBuildDate>
${posts.map(post => `
<item>
<title>${post.title}</title>
<description>${post.description}</description>
<content:encoded><![CDATA[${post.content}]]></content:encoded>
<link>${post.link}</link>
<guid isPermaLink="true">${post.link}</guid>
<pubDate>${post.date}</pubDate>
<author>${post.author}</author>
${post.tags ? `<category>${post.tags}</category>` : ''}
</item>`).join('\n ')}
</channel>
</rss>`;
// Write the RSS feed to file
fs.writeFileSync(path.join(__dirname, '../../feed.xml'), rss);
console.log('Generated RSS feed at feed.xml');
}
generateRSSFeed();
const fs = require('fs');
const path = require('path');
const marked = require('marked');
function sanitizeTitle(title) {
// Remove any surrounding quotes and trim whitespace
return title.replace(/^["']|["']$/g, '').trim();
}
function formatDate(dateStr) {
// Ensure consistent date format
const date = new Date(dateStr);
return date.toUTCString();
}
function extractMetadata(markdown) {
const metadata = {};
const match = markdown.match(/^---\n([\s\S]*?)\n---/);
if (match) {
const frontMatter = match[1];
frontMatter.split('\n').forEach(line => {
const [key, ...valueParts] = line.split(':');
if (key && valueParts.length > 0) {
metadata[key.trim()] = valueParts.join(':').trim();
}
});
}
// Get content without front matter
const content = markdown.replace(/^---\n[\s\S]*?\n---\n/, '');
// Extract first paragraph as description if no description in metadata
if (!metadata.description) {
const firstParagraph = content.match(/\n\n(.*?)\n\n/);
if (firstParagraph) {
metadata.description = firstParagraph[1].replace(/[#*`]/g, '').trim();
}
}
// Convert markdown content to HTML
const htmlContent = marked.parse(content, {
gfm: true,
breaks: true,
smartLists: true,
smartypants: true
});
metadata.content = htmlContent;
return metadata;
}
function generateRSSFeed() {
const postsDir = path.join(__dirname, '../../content/posts');
const posts = [];
// Read all markdown files
fs.readdirSync(postsDir)
.filter(file => file.endsWith('.md'))
.forEach(file => {
const filePath = path.join(postsDir, file);
const content = fs.readFileSync(filePath, 'utf-8');
const metadata = extractMetadata(content);
if (metadata.title && metadata.date) {
posts.push({
title: sanitizeTitle(metadata.title),
date: formatDate(metadata.date),
description: metadata.description || '',
content: metadata.content,
author: metadata.author || 'Glenn Thompson',
link: `https://glenneth.org/content/posts/${file.replace('.md', '.html')}`,
tags: metadata.tags || ''
});
}
});
// Sort posts by date (newest first)
posts.sort((a, b) => new Date(b.date) - new Date(a.date));
// Generate RSS XML
const rss = `<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
<channel>
<title>Glenn Thompson's Blog</title>
<description>Personal blog about programming, technology, and other interests</description>
<link>https://glenneth.org</link>
<atom:link href="https://glenneth.org/feed.xml" rel="self" type="application/rss+xml" />
<language>en-us</language>
<lastBuildDate>${new Date().toUTCString()}</lastBuildDate>
${posts.map(post => `
<item>
<title>${post.title}</title>
<description>${post.description}</description>
<content:encoded><![CDATA[${post.content}]]></content:encoded>
<link>${post.link}</link>
<guid isPermaLink="true">${post.link}</guid>
<pubDate>${post.date}</pubDate>
<author>${post.author}</author>
${post.tags ? `<category>${post.tags}</category>` : ''}
</item>`).join('\n ')}
</channel>
</rss>`;
// Write the RSS feed to file
fs.writeFileSync(path.join(__dirname, '../../feed.xml'), rss);
console.log('Generated RSS feed at feed.xml');
}
generateRSSFeed();

50
deploy/js/main.js
View File

@ -1,25 +1,25 @@
// Handle mobile menu toggle
document.addEventListener('DOMContentLoaded', () => {
// Smooth scroll for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth'
});
}
});
});
// Add scroll event listener for navbar
const navbar = document.querySelector('nav');
window.addEventListener('scroll', () => {
if (window.scrollY > 0) {
navbar.classList.add('shadow-md');
} else {
navbar.classList.remove('shadow-md');
}
});
});
// Handle mobile menu toggle
document.addEventListener('DOMContentLoaded', () => {
// Smooth scroll for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth'
});
}
});
});
// Add scroll event listener for navbar
const navbar = document.querySelector('nav');
window.addEventListener('scroll', () => {
if (window.scrollY > 0) {
navbar.classList.add('shadow-md');
} else {
navbar.classList.remove('shadow-md');
}
});
});

684
deploy/js/md-to-html.js
View File

@ -1,342 +1,342 @@
const { marked } = require('marked');
const fs = require('fs');
const path = require('path');
const cheerio = require('cheerio');
// Configure marked options
const options = {
headerIds: true,
gfm: true
};
// Footer template
const footer = `
<footer class="bg-base-darker text-palenight-200 py-12 border-t border-palenight-400/20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<p class="text-palenight-300">&copy; 2024 Glenn Thompson. All rights reserved.</p>
<div class="webring-text mt-6">
<p class="text-palenight-300">I am part of the <a href="https://systemcrafters.net" target="_blank" class="text-accent-blue hover:text-accent-cyan">System Crafters</a> webring:</p>
</div>
<div class="craftering mt-2 flex items-center justify-center gap-4 text-accent-blue">
<a href="https://craftering.systemcrafters.net/@glenneth/previous" class="hover:text-accent-cyan">Previous</a>
<a href="https://craftering.systemcrafters.net/@glenneth" class="hover:text-accent-cyan">Random</a>
<a href="https://craftering.systemcrafters.net/@glenneth/next" class="hover:text-accent-cyan">Next</a>
</div>
<p class="text-palenight-300 mt-2">
<a href="mailto:glenn@glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenn@glenneth.org</a> |
<a href="https://glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenneth.org</a>
</p>
</div>
</div>
</footer>
</body>
</html>`;
// Function to convert markdown to HTML
async function convertMarkdownToHtml(mdFilePath, outputPath) {
try {
// Read markdown file
const markdown = await fs.promises.readFile(mdFilePath, 'utf8');
// Extract metadata from markdown (assuming front matter)
const metadata = {};
const content = markdown.replace(/^---\n([\s\S]*?)\n---\n/, (_, frontMatter) => {
frontMatter.split('\n').forEach(line => {
const [key, ...valueParts] = line.split(':');
if (key && valueParts.length > 0) {
metadata[key.trim()] = valueParts.join(':').trim();
}
});
return '';
});
// Configure marked options for proper heading rendering
const markedOptions = {
headerIds: true,
gfm: true,
breaks: true,
pedantic: false,
smartLists: true,
smartypants: true
};
// Convert markdown to HTML
const articleContent = marked.parse(content, markedOptions);
// Calculate read time (rough estimate: 200 words per minute)
const wordCount = content.trim().split(/\s+/).length;
const readTime = Math.ceil(wordCount / 200);
// Create full HTML document
const html = `<!DOCTYPE html>
<html lang="en" class="bg-base-bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="${metadata.description || ''}">
<meta property="og:title" content="${metadata.title || 'Blog Post'}">
<meta property="og:description" content="${metadata.description || ''}">
<meta property="og:url" content="https://glenneth.org${mdFilePath.replace(/\.md$/, '')}">
<title>${metadata.title || 'Blog Post'} - Glenn Thompson</title>
<link rel="alternate" type="application/rss+xml" title="Glenn Thompson's Blog" href="/feed.xml" />
<link href="/dist/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
.prose-palenight {
--tw-prose-body: #bfc7d5;
--tw-prose-headings: #ffd580;
--tw-prose-links: #82aaff;
--tw-prose-code: #c792ea;
--tw-prose-pre-bg: #1b1e2b;
}
.prose h2 {
color: var(--tw-prose-headings);
font-family: Merriweather, serif;
font-weight: 700;
font-size: 1.5rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.prose p {
margin-bottom: 1rem;
line-height: 1.625;
}
.prose a {
color: var(--tw-prose-links);
text-decoration: none;
}
.prose a:hover {
color: #89ddff;
}
.prose code {
color: var(--tw-prose-code);
font-family: 'JetBrains Mono', monospace;
}
.prose pre {
background-color: var(--tw-prose-pre-bg);
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
margin-bottom: 1rem;
}
.prose ul, .prose ol {
margin-top: 0.5rem;
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.prose ul {
list-style-type: disc;
}
.prose ol {
list-style-type: decimal;
}
</style>
</head>
<body class="bg-base-bg text-palenight-50">
<nav class="bg-base-darker/80 backdrop-blur-sm shadow-sm border-b border-palenight-400/20 mb-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="/" class="text-accent-yellow font-serif text-xl font-bold">Glenn Thompson</a>
<div class="flex items-center gap-2 text-accent-yellow text-sm font-bold">
<span>${metadata.tags || 'Tech'}</span>
<span>•</span>
<time datetime="${metadata.date}">${new Date(metadata.date).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })}</time>
<span>•</span>
<span>${readTime} min read</span>
</div>
</div>
</div>
</nav>
<main class="pt-24 pb-16 px-4">
<div class="max-w-4xl mx-auto">
<div class="content text-palenight-100 space-y-6">
<header class="mb-8">
<h1 class="text-4xl font-serif font-bold text-accent-yellow">${metadata.title || 'Blog Post'}</h1>
<div class="flex items-center gap-4 text-palenight-300 mt-4">
<time datetime="${metadata.date || ''}">${metadata.date || ''}</time>
<span>•</span>
<span>${readTime} min read</span>
<span>•</span>
<span>By ${metadata.author || 'Glenn Thompson'}</span>
</div>
${metadata.tags ? `
<div class="flex flex-wrap gap-2 mt-4">
${metadata.tags.split(',').map(tag =>
`<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">${tag.trim()}</span>`
).join('')}
</div>` : ''}
</header>
<article class="prose prose-palenight max-w-none">
${articleContent}
</article>
</div>
</div>
</main>${footer}`;
// Write HTML file
const htmlPath = outputPath || mdFilePath.replace('.md', '.html');
await fs.promises.writeFile(htmlPath, html);
console.log(`Converted ${mdFilePath} to ${htmlPath}`);
} catch (error) {
console.error('Error converting markdown to HTML:', error);
process.exit(1);
}
}
// Function to extract summary from markdown content
function extractSummary(content, maxLength = 200) {
// Remove frontmatter
const contentWithoutFrontmatter = content.replace(/^---\n[\s\S]*?\n---\n/, '');
// Parse the markdown to HTML
const html = marked.parse(contentWithoutFrontmatter);
// Use cheerio to extract text from the first paragraph
const $ = cheerio.load(html);
const firstParagraph = $('p').first().text();
// Truncate to maxLength and add ellipsis if needed
if (firstParagraph.length <= maxLength) {
return firstParagraph;
}
return firstParagraph.substring(0, maxLength).trim() + '...';
}
// Function to update index.html with blog post summaries
async function updateIndexWithSummaries() {
try {
const postsDir = path.join(process.cwd(), 'content', 'posts');
const indexPath = path.join(process.cwd(), 'index.html');
// Read all markdown files
const files = await fs.promises.readdir(postsDir);
const posts = [];
for (const file of files) {
if (file.endsWith('.md')) {
const filePath = path.join(postsDir, file);
const content = await fs.promises.readFile(filePath, 'utf8');
// Extract metadata
const metadata = {};
content.replace(/^---\n([\s\S]*?)\n---\n/, (_, frontMatter) => {
frontMatter.split('\n').forEach(line => {
const [key, ...valueParts] = line.split(':');
if (key && valueParts.length > 0) {
metadata[key.trim()] = valueParts.join(':').trim();
}
});
return '';
});
// Extract summary
const summary = extractSummary(content);
// Parse and format the date
let formattedDate = '';
let isoDate = '';
try {
// Handle date formats like "2024-04-08 16:50" or "2024-04-08"
const dateStr = metadata.date.split(' ')[0];
const date = new Date(dateStr);
formattedDate = date.toLocaleDateString('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric'
});
isoDate = dateStr;
} catch (e) {
console.error(`Error parsing date for ${file}:`, e);
}
// Parse tags
let tags = [];
if (metadata.tags) {
// Remove square brackets and split by commas
tags = metadata.tags.replace(/[\[\]]/g, '').split(',').map(t => t.trim().replace(/"/g, ''));
}
posts.push({
title: metadata.title?.replace(/"/g, '') || 'Untitled',
date: formattedDate,
isoDate,
summary,
tags,
url: `/content/posts/${path.basename(file, '.md')}.html`
});
}
}
// Sort posts by date (newest first)
posts.sort((a, b) => new Date(b.isoDate) - new Date(a.isoDate));
// Read index.html
let indexHtml = await fs.promises.readFile(indexPath, 'utf8');
// Create the HTML for blog posts
const postsHtml = posts.map(post => `
<article class="bg-base-darker p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors">
<div class="flex flex-wrap items-center gap-2 text-accent-yellow text-sm mb-2 font-bold">
<span>Tech</span>
${post.tags.map(tag => `<span>•</span><span>${tag}</span>`).join('')}
<span>•</span>
<time datetime="${post.isoDate}">${post.date}</time>
</div>
<h3 class="text-xl font-serif font-bold text-accent-yellow mb-3">
<a href="${post.url}" class="hover:text-accent-cyan transition-colors">
${post.title}
</a>
</h3>
<p class="text-palenight-100 mb-4">${post.summary}</p>
<div class="flex flex-wrap gap-2">
${post.tags.map(tag => `<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">${tag}</span>`).join('')}
</div>
</article>
`).join('\n');
// Find the blog posts section and replace its content
const blogSectionStart = indexHtml.indexOf('<div class="grid gap-8 md:grid-cols-2">');
const blogSectionEnd = indexHtml.indexOf('</div><!-- End blog posts -->') + '</div><!-- End blog posts -->'.length;
if (blogSectionStart === -1 || blogSectionEnd === -1) {
console.error('Could not find blog posts section in index.html');
return;
}
// Replace the content between the markers
indexHtml = indexHtml.substring(0, blogSectionStart) +
'<div class="grid gap-8 md:grid-cols-2">\n' +
postsHtml + '\n' +
' </div><!-- End blog posts -->' +
indexHtml.substring(blogSectionEnd);
// Write the updated index.html
await fs.promises.writeFile(indexPath, indexHtml);
console.log('Successfully updated index.html with blog post summaries');
} catch (error) {
console.error('Error updating index.html:', error);
throw error;
}
}
// Export functions
module.exports = {
convertMarkdownToHtml,
updateIndexWithSummaries
};
// If running from command line
if (require.main === module) {
const mdFilePath = process.argv[2];
const outputPath = process.argv[3];
if (!mdFilePath) {
console.error('Please provide a markdown file path');
process.exit(1);
}
convertMarkdownToHtml(mdFilePath, outputPath);
}
const { marked } = require('marked');
const fs = require('fs');
const path = require('path');
const cheerio = require('cheerio');
// Configure marked options
const options = {
headerIds: true,
gfm: true
};
// Footer template
const footer = `
<footer class="bg-base-darker text-palenight-200 py-12 border-t border-palenight-400/20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<p class="text-palenight-300">&copy; 2024 Glenn Thompson. All rights reserved.</p>
<div class="webring-text mt-6">
<p class="text-palenight-300">I am part of the <a href="https://systemcrafters.net" target="_blank" class="text-accent-blue hover:text-accent-cyan">System Crafters</a> webring:</p>
</div>
<div class="craftering mt-2 flex items-center justify-center gap-4 text-accent-blue">
<a href="https://craftering.systemcrafters.net/@glenneth/previous" class="hover:text-accent-cyan">Previous</a>
<a href="https://craftering.systemcrafters.net/@glenneth" class="hover:text-accent-cyan">Random</a>
<a href="https://craftering.systemcrafters.net/@glenneth/next" class="hover:text-accent-cyan">Next</a>
</div>
<p class="text-palenight-300 mt-2">
<a href="mailto:glenn@glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenn@glenneth.org</a> |
<a href="https://glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenneth.org</a>
</p>
</div>
</div>
</footer>
</body>
</html>`;
// Function to convert markdown to HTML
async function convertMarkdownToHtml(mdFilePath, outputPath) {
try {
// Read markdown file
const markdown = await fs.promises.readFile(mdFilePath, 'utf8');
// Extract metadata from markdown (assuming front matter)
const metadata = {};
const content = markdown.replace(/^---\n([\s\S]*?)\n---\n/, (_, frontMatter) => {
frontMatter.split('\n').forEach(line => {
const [key, ...valueParts] = line.split(':');
if (key && valueParts.length > 0) {
metadata[key.trim()] = valueParts.join(':').trim();
}
});
return '';
});
// Configure marked options for proper heading rendering
const markedOptions = {
headerIds: true,
gfm: true,
breaks: true,
pedantic: false,
smartLists: true,
smartypants: true
};
// Convert markdown to HTML
const articleContent = marked.parse(content, markedOptions);
// Calculate read time (rough estimate: 200 words per minute)
const wordCount = content.trim().split(/\s+/).length;
const readTime = Math.ceil(wordCount / 200);
// Create full HTML document
const html = `<!DOCTYPE html>
<html lang="en" class="bg-base-bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="${metadata.description || ''}">
<meta property="og:title" content="${metadata.title || 'Blog Post'}">
<meta property="og:description" content="${metadata.description || ''}">
<meta property="og:url" content="https://glenneth.org${mdFilePath.replace(/\.md$/, '')}">
<title>${metadata.title || 'Blog Post'} - Glenn Thompson</title>
<link rel="alternate" type="application/rss+xml" title="Glenn Thompson's Blog" href="/feed.xml" />
<link href="/dist/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
.prose-palenight {
--tw-prose-body: #bfc7d5;
--tw-prose-headings: #ffd580;
--tw-prose-links: #82aaff;
--tw-prose-code: #c792ea;
--tw-prose-pre-bg: #1b1e2b;
}
.prose h2 {
color: var(--tw-prose-headings);
font-family: Merriweather, serif;
font-weight: 700;
font-size: 1.5rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.prose p {
margin-bottom: 1rem;
line-height: 1.625;
}
.prose a {
color: var(--tw-prose-links);
text-decoration: none;
}
.prose a:hover {
color: #89ddff;
}
.prose code {
color: var(--tw-prose-code);
font-family: 'JetBrains Mono', monospace;
}
.prose pre {
background-color: var(--tw-prose-pre-bg);
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
margin-bottom: 1rem;
}
.prose ul, .prose ol {
margin-top: 0.5rem;
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.prose ul {
list-style-type: disc;
}
.prose ol {
list-style-type: decimal;
}
</style>
</head>
<body class="bg-base-bg text-palenight-50">
<nav class="bg-base-darker/80 backdrop-blur-sm shadow-sm border-b border-palenight-400/20 mb-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="/" class="text-accent-yellow font-serif text-xl font-bold">Glenn Thompson</a>
<div class="flex items-center gap-2 text-accent-yellow text-sm font-bold">
<span>${metadata.tags || 'Tech'}</span>
<span>•</span>
<time datetime="${metadata.date}">${new Date(metadata.date).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })}</time>
<span>•</span>
<span>${readTime} min read</span>
</div>
</div>
</div>
</nav>
<main class="pt-24 pb-16 px-4">
<div class="max-w-4xl mx-auto">
<div class="content text-palenight-100 space-y-6">
<header class="mb-8">
<h1 class="text-4xl font-serif font-bold text-accent-yellow">${metadata.title || 'Blog Post'}</h1>
<div class="flex items-center gap-4 text-palenight-300 mt-4">
<time datetime="${metadata.date || ''}">${metadata.date || ''}</time>
<span>•</span>
<span>${readTime} min read</span>
<span>•</span>
<span>By ${metadata.author || 'Glenn Thompson'}</span>
</div>
${metadata.tags ? `
<div class="flex flex-wrap gap-2 mt-4">
${metadata.tags.split(',').map(tag =>
`<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">${tag.trim()}</span>`
).join('')}
</div>` : ''}
</header>
<article class="prose prose-palenight max-w-none">
${articleContent}
</article>
</div>
</div>
</main>${footer}`;
// Write HTML file
const htmlPath = outputPath || mdFilePath.replace('.md', '.html');
await fs.promises.writeFile(htmlPath, html);
console.log(`Converted ${mdFilePath} to ${htmlPath}`);
} catch (error) {
console.error('Error converting markdown to HTML:', error);
process.exit(1);
}
}
// Function to extract summary from markdown content
function extractSummary(content, maxLength = 200) {
// Remove frontmatter
const contentWithoutFrontmatter = content.replace(/^---\n[\s\S]*?\n---\n/, '');
// Parse the markdown to HTML
const html = marked.parse(contentWithoutFrontmatter);
// Use cheerio to extract text from the first paragraph
const $ = cheerio.load(html);
const firstParagraph = $('p').first().text();
// Truncate to maxLength and add ellipsis if needed
if (firstParagraph.length <= maxLength) {
return firstParagraph;
}
return firstParagraph.substring(0, maxLength).trim() + '...';
}
// Function to update index.html with blog post summaries
async function updateIndexWithSummaries() {
try {
const postsDir = path.join(process.cwd(), 'content', 'posts');
const indexPath = path.join(process.cwd(), 'index.html');
// Read all markdown files
const files = await fs.promises.readdir(postsDir);
const posts = [];
for (const file of files) {
if (file.endsWith('.md')) {
const filePath = path.join(postsDir, file);
const content = await fs.promises.readFile(filePath, 'utf8');
// Extract metadata
const metadata = {};
content.replace(/^---\n([\s\S]*?)\n---\n/, (_, frontMatter) => {
frontMatter.split('\n').forEach(line => {
const [key, ...valueParts] = line.split(':');
if (key && valueParts.length > 0) {
metadata[key.trim()] = valueParts.join(':').trim();
}
});
return '';
});
// Extract summary
const summary = extractSummary(content);
// Parse and format the date
let formattedDate = '';
let isoDate = '';
try {
// Handle date formats like "2024-04-08 16:50" or "2024-04-08"
const dateStr = metadata.date.split(' ')[0];
const date = new Date(dateStr);
formattedDate = date.toLocaleDateString('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric'
});
isoDate = dateStr;
} catch (e) {
console.error(`Error parsing date for ${file}:`, e);
}
// Parse tags
let tags = [];
if (metadata.tags) {
// Remove square brackets and split by commas
tags = metadata.tags.replace(/[\[\]]/g, '').split(',').map(t => t.trim().replace(/"/g, ''));
}
posts.push({
title: metadata.title?.replace(/"/g, '') || 'Untitled',
date: formattedDate,
isoDate,
summary,
tags,
url: `/content/posts/${path.basename(file, '.md')}.html`
});
}
}
// Sort posts by date (newest first)
posts.sort((a, b) => new Date(b.isoDate) - new Date(a.isoDate));
// Read index.html
let indexHtml = await fs.promises.readFile(indexPath, 'utf8');
// Create the HTML for blog posts
const postsHtml = posts.map(post => `
<article class="bg-base-darker p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors">
<div class="flex flex-wrap items-center gap-2 text-accent-yellow text-sm mb-2 font-bold">
<span>Tech</span>
${post.tags.map(tag => `<span>•</span><span>${tag}</span>`).join('')}
<span>•</span>
<time datetime="${post.isoDate}">${post.date}</time>
</div>
<h3 class="text-xl font-serif font-bold text-accent-yellow mb-3">
<a href="${post.url}" class="hover:text-accent-cyan transition-colors">
${post.title}
</a>
</h3>
<p class="text-palenight-100 mb-4">${post.summary}</p>
<div class="flex flex-wrap gap-2">
${post.tags.map(tag => `<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">${tag}</span>`).join('')}
</div>
</article>
`).join('\n');
// Find the blog posts section and replace its content
const blogSectionStart = indexHtml.indexOf('<div class="grid gap-8 md:grid-cols-2">');
const blogSectionEnd = indexHtml.indexOf('</div><!-- End blog posts -->') + '</div><!-- End blog posts -->'.length;
if (blogSectionStart === -1 || blogSectionEnd === -1) {
console.error('Could not find blog posts section in index.html');
return;
}
// Replace the content between the markers
indexHtml = indexHtml.substring(0, blogSectionStart) +
'<div class="grid gap-8 md:grid-cols-2">\n' +
postsHtml + '\n' +
' </div><!-- End blog posts -->' +
indexHtml.substring(blogSectionEnd);
// Write the updated index.html
await fs.promises.writeFile(indexPath, indexHtml);
console.log('Successfully updated index.html with blog post summaries');
} catch (error) {
console.error('Error updating index.html:', error);
throw error;
}
}
// Export functions
module.exports = {
convertMarkdownToHtml,
updateIndexWithSummaries
};
// If running from command line
if (require.main === module) {
const mdFilePath = process.argv[2];
const outputPath = process.argv[3];
if (!mdFilePath) {
console.error('Please provide a markdown file path');
process.exit(1);
}
convertMarkdownToHtml(mdFilePath, outputPath);
}

1598
dist/styles.css vendored
View File

File diff suppressed because one or more lines are too long

38
encrypt-credentials.sh
View File

@ -1,19 +1,19 @@
#!/bin/bash
# Check if .env exists
if [ ! -f ".env" ]; then
echo "Error: .env file not found!"
exit 1
fi
# Encrypt .env to .env.gpg
gpg --symmetric --cipher-algo AES256 .env
# Check if encryption was successful
if [ $? -eq 0 ]; then
echo "Credentials encrypted successfully to .env.gpg"
echo "You can now safely delete the original .env file"
echo "To delete it, run: rm .env"
else
echo "Encryption failed!"
fi
#!/bin/bash
# Check if .env exists
if [ ! -f ".env" ]; then
echo "Error: .env file not found!"
exit 1
fi
# Encrypt .env to .env.gpg
gpg --symmetric --cipher-algo AES256 .env
# Check if encryption was successful
if [ $? -eq 0 ]; then
echo "Credentials encrypted successfully to .env.gpg"
echo "You can now safely delete the original .env file"
echo "To delete it, run: rm .env"
else
echo "Encryption failed!"
fi

10
favicon.svg
View File

@ -1,5 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="32" height="32" version="1.1" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<rect width="32" height="32" rx="6" fill="#1a1b26"/>
<text x="50%" y="50%" text-anchor="middle" dominant-baseline="central" fill="#e0af68" font-family="Inter, sans-serif" font-size="16" font-weight="bold">GT</text>
</svg>
<?xml version="1.0" encoding="UTF-8"?>
<svg width="32" height="32" version="1.1" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<rect width="32" height="32" rx="6" fill="#1a1b26"/>
<text x="50%" y="50%" text-anchor="middle" dominant-baseline="central" fill="#e0af68" font-family="Inter, sans-serif" font-size="16" font-weight="bold">GT</text>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 363 B

After

Width:  |  Height:  |  Size: 368 B

2060
feed.xml
View File

File diff suppressed because it is too large Load Diff

806
index.html
View File

@ -1,404 +1,404 @@
<!DOCTYPE html>
<html lang="en" class="bg-base-bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description"
content="Glenn Thompson's personal blog about technology, engineering, and travel experiences in the Middle East">
<meta property="og:title" content="Glenn Thompson - Technology, Engineering & Travel">
<meta property="og:description"
content="Exploring the intersection of electrical engineering, technology, and cultural experiences from two decades in the Middle East">
<meta property="og:url" content="https://glenneth.org">
<title>Glenn Thompson - Technology, Engineering & Travel</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="alternate" type="application/rss+xml" title="Glenn Thompson's Blog" href="/feed.xml" />
<link href="./dist/styles.css" rel="stylesheet">
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap"
rel="stylesheet">
<script defer src="./src/js/main.js"></script>
</head>
<body class="bg-base-bg text-palenight-50">
<nav class="fixed w-full bg-base-darker/80 backdrop-blur-sm shadow-sm z-50 border-b border-palenight-400/20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex">
<a href="#" class="flex items-center font-serif text-xl font-bold text-accent-purple">Glenn
Thompson</a>
</div>
<div class="hidden sm:ml-6 sm:flex sm:space-x-8">
<a href="#about" class="nav-link text-accent-blue hover:text-accent-cyan">About</a>
<a href="#blog" class="nav-link text-accent-blue hover:text-accent-cyan">Blog</a>
<a href="#projects" class="nav-link text-accent-blue hover:text-accent-cyan">Projects</a>
<a href="#contact" class="nav-link text-accent-blue hover:text-accent-cyan">Contact</a>
</div>
</div>
</div>
</nav>
<main>
<!-- Hero Section -->
<section class="pt-24 pb-16 px-4 sm:pt-32 sm:pb-24 bg-base-bg">
<div class="max-w-7xl mx-auto">
<div class="text-center">
<h1 class="text-4xl font-serif font-bold tracking-tight text-accent-yellow sm:text-6xl">
Technology, Engineering & Travel
</h1>
<p class="mt-6 text-lg leading-8 text-palenight-100 max-w-2xl mx-auto">
Exploring the intersection of electrical engineering, technology, and cultural experiences from
two decades in the Middle East.
</p>
</div>
</div>
</section>
<!-- Featured Posts -->
<section id="blog" class="py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-serif font-bold text-accent-yellow mb-8">Blog Posts</h2>
<div class="grid gap-8 md:grid-cols-2">
<article class="bg-base-darker p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors">
<div class="flex flex-wrap items-center gap-2 text-accent-yellow text-sm mb-2 font-bold">
<span>Tech</span>
<span>•</span><span>community</span><span>•</span><span>webring</span><span>•</span><span>systemcrafters</span><span>•</span><span>reflection</span>
<span>•</span>
<time datetime="2025-04-02">April 2, 2025</time>
</div>
<h3 class="text-xl font-serif font-bold text-accent-yellow mb-3">
<a href="/content/posts/2025-04-04-one-year-of-craftering.html" class="hover:text-accent-cyan transition-colors">
One Year of Craftering: Building Connections in the System Crafters Community
</a>
</h3>
<p class="text-palenight-100 mb-4">Next Thursday, 03-APR-2025, marks the first anniversary of the Craftering webring, a vibrant community initiative started by shom that connects personal websites and blogs within the System Crafters c...</p>
<div class="flex flex-wrap gap-2">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">community</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">webring</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">systemcrafters</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">reflection</span>
</div>
</article>
<article class="bg-base-darker p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors">
<div class="flex flex-wrap items-center gap-2 text-accent-yellow text-sm mb-2 font-bold">
<span>Tech</span>
<span>•</span><span>web</span><span>•</span><span>development</span><span>•</span><span>javascript</span><span>•</span><span>static-site</span><span>•</span><span>lessons</span>
<span>•</span>
<time datetime="2025-03-13">March 13, 2025</time>
</div>
<h3 class="text-xl font-serif font-bold text-accent-yellow mb-3">
<a href="/content/posts/2025-03-12-lessons-learned-custom-ssg.html" class="hover:text-accent-cyan transition-colors">
Lessons Learned: One Year with a Custom Static Site Generator
</a>
</h3>
<p class="text-palenight-100 mb-4">It's been just over a year since I transitioned from Haunt to my own custom static site generator for this website. What started as an experiment to gain more control over my publishing workflow has e...</p>
<div class="flex flex-wrap gap-2">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">web</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">development</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">javascript</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">static-site</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">lessons</span>
</div>
</article>
<article class="bg-base-darker p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors">
<div class="flex flex-wrap items-center gap-2 text-accent-yellow text-sm mb-2 font-bold">
<span>Tech</span>
<span>•</span><span>development</span><span>•</span><span>guix</span><span>•</span><span>tools</span><span>•</span><span>workflow</span><span>•</span><span>productivity</span><span>•</span><span>web</span>
<span>•</span>
<time datetime="2025-03-08">March 8, 2025</time>
</div>
<h3 class="text-xl font-serif font-bold text-accent-yellow mb-3">
<a href="/content/posts/2025-03-08-my-dev-environment-2025.html" class="hover:text-accent-cyan transition-colors">
My Development Environment in 2025: From Editor to Deployment
</a>
</h3>
<p class="text-palenight-100 mb-4">The tools we use shape how we work. Over the years, my development environment has evolved alongside my technical journey through different programming languages, paradigms, and projects. This post of...</p>
<div class="flex flex-wrap gap-2">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">development</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">guix</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">tools</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">workflow</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">productivity</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">web</span>
</div>
</article>
<article class="bg-base-darker p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors">
<div class="flex flex-wrap items-center gap-2 text-accent-yellow text-sm mb-2 font-bold">
<span>Tech</span>
<span>•</span><span>web</span><span>•</span><span>development</span><span>•</span><span>javascript</span><span>•</span><span>static-site</span><span>•</span><span>haunt</span><span>•</span><span>guile</span><span>•</span><span>hugo</span>
<span>•</span>
<time datetime="2025-01-02">January 2, 2025</time>
</div>
<h3 class="text-xl font-serif font-bold text-accent-yellow mb-3">
<a href="/content/posts/2025-01-02-from-haunt-to-custom.html" class="hover:text-accent-cyan transition-colors">
From Hugo to Haunt to Custom: My Journey in Static Site Generation
</a>
</h3>
<p class="text-palenight-100 mb-4">My journey with static site generators has been one of continuous learning and evolution. It started with Hugo, transitioned through Haunt, and has now led me to build my own custom solution. Each ste...</p>
<div class="flex flex-wrap gap-2">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">web</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">development</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">javascript</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">static-site</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">haunt</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">guile</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">hugo</span>
</div>
</article>
<article class="bg-base-darker p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors">
<div class="flex flex-wrap items-center gap-2 text-accent-yellow text-sm mb-2 font-bold">
<span>Tech</span>
<span>•</span><span>tech</span><span>•</span><span>guile</span><span>•</span><span>scheme</span><span>•</span><span>development</span><span>•</span><span>functional-programming</span>
<span>•</span>
<time datetime="2024-12-03">December 3, 2024</time>
</div>
<h3 class="text-xl font-serif font-bold text-accent-yellow mb-3">
<a href="/content/posts/2024-12-03-practical-scheme.html" class="hover:text-accent-cyan transition-colors">
Beyond Theory: Building Practical Tools with Guile Scheme
</a>
</h3>
<p class="text-palenight-100 mb-4">A few months ago, I shared my journey into learning Scheme through building stash, a symlink manager. Since then, I've discovered that the gap between learning Scheme and applying it to real-world pro...</p>
<div class="flex flex-wrap gap-2">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">tech</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">guile</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">scheme</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">development</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">functional-programming</span>
</div>
</article>
<article class="bg-base-darker p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors">
<div class="flex flex-wrap items-center gap-2 text-accent-yellow text-sm mb-2 font-bold">
<span>Tech</span>
<span>•</span><span>personal</span><span>•</span><span>tech</span><span>•</span><span>guile</span><span>•</span><span>scheme</span><span>•</span><span>gnu</span><span>•</span><span>development</span>
<span>•</span>
<time datetime="2024-09-24">September 24, 2024</time>
</div>
<h3 class="text-xl font-serif font-bold text-accent-yellow mb-3">
<a href="/content/posts/2024-09-24-scheme-journey.html" class="hover:text-accent-cyan transition-colors">
A Journey into Scheme
</a>
</h3>
<p class="text-palenight-100 mb-4">I've spent my career as an electrical engineer, not a software developer. However, my recent journey in to GNU/Liniux required a tool for managing symlinks, and that's how I began learning Scheme—spec...</p>
<div class="flex flex-wrap gap-2">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">personal</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">tech</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">guile</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">scheme</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">gnu</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">development</span>
</div>
</article>
<article class="bg-base-darker p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors">
<div class="flex flex-wrap items-center gap-2 text-accent-yellow text-sm mb-2 font-bold">
<span>Tech</span>
<span>•</span><span>personal</span><span>•</span><span>tech</span><span>•</span><span>gnu</span><span>•</span><span>guix</span><span>•</span><span>swaywm</span><span>•</span><span>nvidia</span>
<span>•</span>
<time datetime="2024-07-26">July 26, 2024</time>
</div>
<h3 class="text-xl font-serif font-bold text-accent-yellow mb-3">
<a href="/content/posts/2024-07-26-gnu-guix-journey.html" class="hover:text-accent-cyan transition-colors">
A Journey Through GNU Guix: From Installation to Returning to Arch Linux
</a>
</h3>
<p class="text-palenight-100 mb-4">As a long-time user of Arch Linux, I decided to explore the world of GNU Guix to see if it could better suit my needs, especially with my growing interest in functional package management. The journey...</p>
<div class="flex flex-wrap gap-2">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">personal</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">tech</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">gnu</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">guix</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">swaywm</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">nvidia</span>
</div>
</article>
<article class="bg-base-darker p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors">
<div class="flex flex-wrap items-center gap-2 text-accent-yellow text-sm mb-2 font-bold">
<span>Tech</span>
<span>•</span><span>personal</span><span>•</span><span>tech</span><span>•</span><span>keyboards</span><span>•</span><span>glove80</span>
<span>•</span>
<time datetime="2024-05-15">May 15, 2024</time>
</div>
<h3 class="text-xl font-serif font-bold text-accent-yellow mb-3">
<a href="/content/posts/2024-05-15-hugo-to-haunt.html" class="hover:text-accent-cyan transition-colors">
Transitioning from Hugo to Haunt: Embracing Scheme and GNU Guix
</a>
</h3>
<p class="text-palenight-100 mb-4">Hello there! I'm Glenn Thompson, and today, I want to share a significant part of my recent journey into the world of Scheme, GNU Guix, and static site generation.</p>
<div class="flex flex-wrap gap-2">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">personal</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">tech</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">keyboards</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">glove80</span>
</div>
</article>
<article class="bg-base-darker p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors">
<div class="flex flex-wrap items-center gap-2 text-accent-yellow text-sm mb-2 font-bold">
<span>Tech</span>
<span>•</span><span>work</span><span>•</span><span>travel</span>
<span>•</span>
<time datetime="2024-05-01">May 1, 2024</time>
</div>
<h3 class="text-xl font-serif font-bold text-accent-yellow mb-3">
<a href="/content/posts/2024-05-01-amman-newcastle-journey.html" class="hover:text-accent-cyan transition-colors">
A Rollercoaster Week: From Amman to Newcastle, and back again
</a>
</h3>
<p class="text-palenight-100 mb-4">Two weeks ago was a whirlwind of events, taking me from the conforting embrace of Amman, Jordan to the vibrant streets of Newcastle, England. It was a journey filled with highs and lows, professional...</p>
<div class="flex flex-wrap gap-2">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">work</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">travel</span>
</div>
</article>
<article class="bg-base-darker p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors">
<div class="flex flex-wrap items-center gap-2 text-accent-yellow text-sm mb-2 font-bold">
<span>Tech</span>
<span>•</span><span>personal</span><span>•</span><span>tech</span><span>•</span><span>keyboards</span><span>•</span><span>glove80</span>
<span>•</span>
<time datetime=""2024-04-08">April 8, 2024</time>
</div>
<h3 class="text-xl font-serif font-bold text-accent-yellow mb-3">
<a href="/content/posts/2024-04-08-glove80-review.html" class="hover:text-accent-cyan transition-colors">
Aesthetic Meets Ergonomics: My Deep Dive into the Glove80 Keyboard
</a>
</h3>
<p class="text-palenight-100 mb-4">As my career trajectory veered from being an integral member of an electrical engineering team to assuming the role of Deputy Project Manager, the nature of my daily activities underwent a significant...</p>
<div class="flex flex-wrap gap-2">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">personal</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">tech</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">keyboards</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">glove80</span>
</div>
</article>
</div><!-- End blog posts -->
</div>
</section>
<!-- Projects Section -->
<section id="projects" class="py-16 bg-base-darker">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-serif font-bold text-accent-yellow mb-8">Projects</h2>
<div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
<!-- Personal Website Project -->
<article
class="bg-base-bg p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors">
<h3 class="text-xl font-serif font-bold text-accent-yellow mb-3">Personal Website</h3>
<p class="text-palenight-100 mb-4">A modern, responsive personal website built with HTML,
TailwindCSS, and JavaScript. Features a dark theme and blog functionality.</p>
<div class="flex gap-2 mb-4">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-darker text-xs">HTML</span>
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-darker text-xs">TailwindCSS</span>
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-darker text-xs">JavaScript</span>
</div>
<a href="https://github.com/glenneth1/personal-website"
class="text-accent-cyan hover:text-accent-purple transition-colors">View Source →</a>
</article>
<!-- Symlink Manager Project -->
<article
class="bg-base-bg p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors">
<h3 class="text-xl font-serif font-bold text-accent-yellow mb-3">Scheme Symlink Manager</h3>
<p class="text-palenight-100 mb-4">A command-line tool built with Guile Scheme for managing
symbolic links in Unix-like systems. Simplifies dotfile management.</p>
<div class="flex gap-2 mb-4">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-darker text-xs">Scheme</span>
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-darker text-xs">Guile</span>
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-darker text-xs">CLI</span>
</div>
<a href="#" class="text-accent-cyan hover:text-accent-purple transition-colors">Coming Soon
→</a>
</article>
<!-- Add Project Card -->
<article
class="bg-base-bg p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors flex items-center justify-center">
<div class="text-center">
<p class="text-palenight-100 mb-2">More projects coming soon!</p>
<p class="text-accent-cyan">Stay tuned...</p>
</div>
</article>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="py-16 bg-base-bg">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<div>
<h2 class="text-3xl font-serif font-bold text-accent-yellow mb-6">About Me</h2>
<p class="text-palenight-100 mb-4">
With over 20 years in the electrical engineering field, I've had the privilege of working on
groundbreaking projects across the Middle East. My journey has been marked by continuous
learning, cultural exploration, and technological innovation.
</p>
<p class="text-palenight-100 mb-4">
Beyond my professional work, I'm passionate about technology, particularly static site
generation, Scheme programming, and tools like GNU Guix and Haunt. This blog is where I
share my experiences, insights, and the lessons learned along the way.
</p>
</div>
<div class="bg-base-darker p-8 rounded-lg shadow-md border border-palenight-400/20">
<h3 class="text-xl font-bold text-accent-yellow mb-4">Areas of Focus</h3>
<ul class="space-y-3">
<li class="flex items-center text-palenight-100">
<svg class="w-5 h-5 text-accent-blue mr-2" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"></path>
</svg>
Electrical Engineering
</li>
<li class="flex items-center text-palenight-100">
<svg class="w-5 h-5 text-accent-blue mr-2" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"></path>
</svg>
Static Site Generation
</li>
<li class="flex items-center text-palenight-100">
<svg class="w-5 h-5 text-accent-blue mr-2" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"></path>
</svg>
Scheme Programming
</li>
<li class="flex items-center text-palenight-100">
<svg class="w-5 h-5 text-accent-blue mr-2" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"></path>
</svg>
Middle Eastern Culture
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-16 bg-base-darker">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<h2 class="text-3xl font-serif font-bold text-accent-yellow mb-6">Get in Touch</h2>
<p class="text-palenight-100 mb-8">
Interested in connecting? Feel free to reach out for discussions about technology, engineering,
or sharing travel stories.
</p>
<a href="mailto:glenn@glenneth.org"
class="inline-flex items-center px-6 py-3 border border-accent-blue text-base font-medium rounded-md text-accent-blue hover:bg-accent-blue hover:text-base-bg transition-colors">
Send a Message
</a>
</div>
</div>
</section>
</main>
<footer class="bg-base-darker text-palenight-200 py-12 border-t border-palenight-400/20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<p class="text-palenight-300">&copy; 2024 Glenn Thompson. All rights reserved.</p>
<div class="webring-text mt-6">
<p class="text-palenight-300">I am part of the <a href="https://systemcrafters.net" target="_blank"
class="text-accent-blue hover:text-accent-cyan">System Crafters</a> webring:</p>
</div>
<div class="craftering mt-2 flex items-center justify-center gap-4 text-accent-blue">
<a href="https://craftering.systemcrafters.net/@glenneth/previous"
class="hover:text-accent-cyan">←</a>
<a href="https://craftering.systemcrafters.net/" class="hover:text-accent-cyan">craftering</a>
<a href="https://craftering.systemcrafters.net/@glenneth/next" class="hover:text-accent-cyan">→</a>
</div>
<p class="text-palenight-300 mt-2">
<a href="mailto:glenn@glenneth.org"
class="text-accent-blue hover:text-accent-cyan transition-colors">glenn@glenneth.org</a> |
<a href="https://glenneth.org"
class="text-accent-blue hover:text-accent-cyan transition-colors">glenneth.org</a>
</p>
</div>
</div>
</footer>
</body>
<!DOCTYPE html>
<html lang="en" class="bg-base-bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description"
content="Glenn Thompson's personal blog about technology, engineering, and travel experiences in the Middle East">
<meta property="og:title" content="Glenn Thompson - Technology, Engineering & Travel">
<meta property="og:description"
content="Exploring the intersection of electrical engineering, technology, and cultural experiences from two decades in the Middle East">
<meta property="og:url" content="https://glenneth.org">
<title>Glenn Thompson - Technology, Engineering & Travel</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="alternate" type="application/rss+xml" title="Glenn Thompson's Blog" href="/feed.xml" />
<link href="./dist/styles.css" rel="stylesheet">
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap"
rel="stylesheet">
<script defer src="./src/js/main.js"></script>
</head>
<body class="bg-base-bg text-palenight-50">
<nav class="fixed w-full bg-base-darker/80 backdrop-blur-sm shadow-sm z-50 border-b border-palenight-400/20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex">
<a href="#" class="flex items-center font-serif text-xl font-bold text-accent-purple">Glenn
Thompson</a>
</div>
<div class="hidden sm:ml-6 sm:flex sm:space-x-8">
<a href="#about" class="nav-link text-accent-blue hover:text-accent-cyan">About</a>
<a href="#blog" class="nav-link text-accent-blue hover:text-accent-cyan">Blog</a>
<a href="#projects" class="nav-link text-accent-blue hover:text-accent-cyan">Projects</a>
<a href="#contact" class="nav-link text-accent-blue hover:text-accent-cyan">Contact</a>
</div>
</div>
</div>
</nav>
<main>
<!-- Hero Section -->
<section class="pt-24 pb-16 px-4 sm:pt-32 sm:pb-24 bg-base-bg">
<div class="max-w-7xl mx-auto">
<div class="text-center">
<h1 class="text-4xl font-serif font-bold tracking-tight text-accent-yellow sm:text-6xl">
Technology, Engineering & Travel
</h1>
<p class="mt-6 text-lg leading-8 text-palenight-100 max-w-2xl mx-auto">
Exploring the intersection of electrical engineering, technology, and cultural experiences from
two decades in the Middle East.
</p>
</div>
</div>
</section>
<!-- Featured Posts -->
<section id="blog" class="py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-serif font-bold text-accent-yellow mb-8">Blog Posts</h2>
<div class="grid gap-8 md:grid-cols-2">
<article class="bg-base-darker p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors">
<div class="flex flex-wrap items-center gap-2 text-accent-yellow text-sm mb-2 font-bold">
<span>Tech</span>
<span>•</span><span>community</span><span>•</span><span>webring</span><span>•</span><span>systemcrafters</span><span>•</span><span>reflection</span>
<span>•</span>
<time datetime="2025-04-02">April 2, 2025</time>
</div>
<h3 class="text-xl font-serif font-bold text-accent-yellow mb-3">
<a href="/content/posts/2025-04-04-one-year-of-craftering.html" class="hover:text-accent-cyan transition-colors">
One Year of Craftering: Building Connections in the System Crafters Community
</a>
</h3>
<p class="text-palenight-100 mb-4">Next Thursday, 03-APR-2025, marks the first anniversary of the Craftering webring, a vibrant community initiative started by shom that connects personal websites and blogs within the System Crafters c...</p>
<div class="flex flex-wrap gap-2">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">community</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">webring</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">systemcrafters</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">reflection</span>
</div>
</article>
<article class="bg-base-darker p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors">
<div class="flex flex-wrap items-center gap-2 text-accent-yellow text-sm mb-2 font-bold">
<span>Tech</span>
<span>•</span><span>web</span><span>•</span><span>development</span><span>•</span><span>javascript</span><span>•</span><span>static-site</span><span>•</span><span>lessons</span>
<span>•</span>
<time datetime="2025-03-13">March 13, 2025</time>
</div>
<h3 class="text-xl font-serif font-bold text-accent-yellow mb-3">
<a href="/content/posts/2025-03-12-lessons-learned-custom-ssg.html" class="hover:text-accent-cyan transition-colors">
Lessons Learned: One Year with a Custom Static Site Generator
</a>
</h3>
<p class="text-palenight-100 mb-4">It's been just over a year since I transitioned from Haunt to my own custom static site generator for this website. What started as an experiment to gain more control over my publishing workflow has e...</p>
<div class="flex flex-wrap gap-2">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">web</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">development</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">javascript</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">static-site</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">lessons</span>
</div>
</article>
<article class="bg-base-darker p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors">
<div class="flex flex-wrap items-center gap-2 text-accent-yellow text-sm mb-2 font-bold">
<span>Tech</span>
<span>•</span><span>development</span><span>•</span><span>guix</span><span>•</span><span>tools</span><span>•</span><span>workflow</span><span>•</span><span>productivity</span><span>•</span><span>web</span>
<span>•</span>
<time datetime="2025-03-08">March 8, 2025</time>
</div>
<h3 class="text-xl font-serif font-bold text-accent-yellow mb-3">
<a href="/content/posts/2025-03-08-my-dev-environment-2025.html" class="hover:text-accent-cyan transition-colors">
My Development Environment in 2025: From Editor to Deployment
</a>
</h3>
<p class="text-palenight-100 mb-4">The tools we use shape how we work. Over the years, my development environment has evolved alongside my technical journey through different programming languages, paradigms, and projects. This post of...</p>
<div class="flex flex-wrap gap-2">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">development</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">guix</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">tools</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">workflow</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">productivity</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">web</span>
</div>
</article>
<article class="bg-base-darker p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors">
<div class="flex flex-wrap items-center gap-2 text-accent-yellow text-sm mb-2 font-bold">
<span>Tech</span>
<span>•</span><span>web</span><span>•</span><span>development</span><span>•</span><span>javascript</span><span>•</span><span>static-site</span><span>•</span><span>haunt</span><span>•</span><span>guile</span><span>•</span><span>hugo</span>
<span>•</span>
<time datetime="2025-01-02">January 2, 2025</time>
</div>
<h3 class="text-xl font-serif font-bold text-accent-yellow mb-3">
<a href="/content/posts/2025-01-02-from-haunt-to-custom.html" class="hover:text-accent-cyan transition-colors">
From Hugo to Haunt to Custom: My Journey in Static Site Generation
</a>
</h3>
<p class="text-palenight-100 mb-4">My journey with static site generators has been one of continuous learning and evolution. It started with Hugo, transitioned through Haunt, and has now led me to build my own custom solution. Each ste...</p>
<div class="flex flex-wrap gap-2">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">web</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">development</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">javascript</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">static-site</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">haunt</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">guile</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">hugo</span>
</div>
</article>
<article class="bg-base-darker p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors">
<div class="flex flex-wrap items-center gap-2 text-accent-yellow text-sm mb-2 font-bold">
<span>Tech</span>
<span>•</span><span>tech</span><span>•</span><span>guile</span><span>•</span><span>scheme</span><span>•</span><span>development</span><span>•</span><span>functional-programming</span>
<span>•</span>
<time datetime="2024-12-03">December 3, 2024</time>
</div>
<h3 class="text-xl font-serif font-bold text-accent-yellow mb-3">
<a href="/content/posts/2024-12-03-practical-scheme.html" class="hover:text-accent-cyan transition-colors">
Beyond Theory: Building Practical Tools with Guile Scheme
</a>
</h3>
<p class="text-palenight-100 mb-4">A few months ago, I shared my journey into learning Scheme through building stash, a symlink manager. Since then, I've discovered that the gap between learning Scheme and applying it to real-world pro...</p>
<div class="flex flex-wrap gap-2">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">tech</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">guile</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">scheme</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">development</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">functional-programming</span>
</div>
</article>
<article class="bg-base-darker p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors">
<div class="flex flex-wrap items-center gap-2 text-accent-yellow text-sm mb-2 font-bold">
<span>Tech</span>
<span>•</span><span>personal</span><span>•</span><span>tech</span><span>•</span><span>guile</span><span>•</span><span>scheme</span><span>•</span><span>gnu</span><span>•</span><span>development</span>
<span>•</span>
<time datetime="2024-09-24">September 24, 2024</time>
</div>
<h3 class="text-xl font-serif font-bold text-accent-yellow mb-3">
<a href="/content/posts/2024-09-24-scheme-journey.html" class="hover:text-accent-cyan transition-colors">
A Journey into Scheme
</a>
</h3>
<p class="text-palenight-100 mb-4">I've spent my career as an electrical engineer, not a software developer. However, my recent journey in to GNU/Liniux required a tool for managing symlinks, and that's how I began learning Scheme—spec...</p>
<div class="flex flex-wrap gap-2">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">personal</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">tech</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">guile</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">scheme</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">gnu</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">development</span>
</div>
</article>
<article class="bg-base-darker p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors">
<div class="flex flex-wrap items-center gap-2 text-accent-yellow text-sm mb-2 font-bold">
<span>Tech</span>
<span>•</span><span>personal</span><span>•</span><span>tech</span><span>•</span><span>gnu</span><span>•</span><span>guix</span><span>•</span><span>swaywm</span><span>•</span><span>nvidia</span>
<span>•</span>
<time datetime="2024-07-26">July 26, 2024</time>
</div>
<h3 class="text-xl font-serif font-bold text-accent-yellow mb-3">
<a href="/content/posts/2024-07-26-gnu-guix-journey.html" class="hover:text-accent-cyan transition-colors">
A Journey Through GNU Guix: From Installation to Returning to Arch Linux
</a>
</h3>
<p class="text-palenight-100 mb-4">As a long-time user of Arch Linux, I decided to explore the world of GNU Guix to see if it could better suit my needs, especially with my growing interest in functional package management. The journey...</p>
<div class="flex flex-wrap gap-2">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">personal</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">tech</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">gnu</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">guix</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">swaywm</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">nvidia</span>
</div>
</article>
<article class="bg-base-darker p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors">
<div class="flex flex-wrap items-center gap-2 text-accent-yellow text-sm mb-2 font-bold">
<span>Tech</span>
<span>•</span><span>personal</span><span>•</span><span>tech</span><span>•</span><span>keyboards</span><span>•</span><span>glove80</span>
<span>•</span>
<time datetime="2024-05-15">May 15, 2024</time>
</div>
<h3 class="text-xl font-serif font-bold text-accent-yellow mb-3">
<a href="/content/posts/2024-05-15-hugo-to-haunt.html" class="hover:text-accent-cyan transition-colors">
Transitioning from Hugo to Haunt: Embracing Scheme and GNU Guix
</a>
</h3>
<p class="text-palenight-100 mb-4">Hello there! I'm Glenn Thompson, and today, I want to share a significant part of my recent journey into the world of Scheme, GNU Guix, and static site generation.</p>
<div class="flex flex-wrap gap-2">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">personal</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">tech</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">keyboards</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">glove80</span>
</div>
</article>
<article class="bg-base-darker p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors">
<div class="flex flex-wrap items-center gap-2 text-accent-yellow text-sm mb-2 font-bold">
<span>Tech</span>
<span>•</span><span>work</span><span>•</span><span>travel</span>
<span>•</span>
<time datetime="2024-05-01">May 1, 2024</time>
</div>
<h3 class="text-xl font-serif font-bold text-accent-yellow mb-3">
<a href="/content/posts/2024-05-01-amman-newcastle-journey.html" class="hover:text-accent-cyan transition-colors">
A Rollercoaster Week: From Amman to Newcastle, and back again
</a>
</h3>
<p class="text-palenight-100 mb-4">Two weeks ago was a whirlwind of events, taking me from the conforting embrace of Amman, Jordan to the vibrant streets of Newcastle, England. It was a journey filled with highs and lows, professional...</p>
<div class="flex flex-wrap gap-2">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">work</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">travel</span>
</div>
</article>
<article class="bg-base-darker p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors">
<div class="flex flex-wrap items-center gap-2 text-accent-yellow text-sm mb-2 font-bold">
<span>Tech</span>
<span>•</span><span>personal</span><span>•</span><span>tech</span><span>•</span><span>keyboards</span><span>•</span><span>glove80</span>
<span>•</span>
<time datetime=""2024-04-08">April 8, 2024</time>
</div>
<h3 class="text-xl font-serif font-bold text-accent-yellow mb-3">
<a href="/content/posts/2024-04-08-glove80-review.html" class="hover:text-accent-cyan transition-colors">
Aesthetic Meets Ergonomics: My Deep Dive into the Glove80 Keyboard
</a>
</h3>
<p class="text-palenight-100 mb-4">As my career trajectory veered from being an integral member of an electrical engineering team to assuming the role of Deputy Project Manager, the nature of my daily activities underwent a significant...</p>
<div class="flex flex-wrap gap-2">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">personal</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">tech</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">keyboards</span><span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">glove80</span>
</div>
</article>
</div><!-- End blog posts -->
</div>
</section>
<!-- Projects Section -->
<section id="projects" class="py-16 bg-base-darker">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-serif font-bold text-accent-yellow mb-8">Projects</h2>
<div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
<!-- Personal Website Project -->
<article
class="bg-base-bg p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors">
<h3 class="text-xl font-serif font-bold text-accent-yellow mb-3">Personal Website</h3>
<p class="text-palenight-100 mb-4">A modern, responsive personal website built with HTML,
TailwindCSS, and JavaScript. Features a dark theme and blog functionality.</p>
<div class="flex gap-2 mb-4">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-darker text-xs">HTML</span>
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-darker text-xs">TailwindCSS</span>
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-darker text-xs">JavaScript</span>
</div>
<a href="https://github.com/glenneth1/personal-website"
class="text-accent-cyan hover:text-accent-purple transition-colors">View Source →</a>
</article>
<!-- Symlink Manager Project -->
<article
class="bg-base-bg p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors">
<h3 class="text-xl font-serif font-bold text-accent-yellow mb-3">Scheme Symlink Manager</h3>
<p class="text-palenight-100 mb-4">A command-line tool built with Guile Scheme for managing
symbolic links in Unix-like systems. Simplifies dotfile management.</p>
<div class="flex gap-2 mb-4">
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-darker text-xs">Scheme</span>
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-darker text-xs">Guile</span>
<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-darker text-xs">CLI</span>
</div>
<a href="#" class="text-accent-cyan hover:text-accent-purple transition-colors">Coming Soon
→</a>
</article>
<!-- Add Project Card -->
<article
class="bg-base-bg p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors flex items-center justify-center">
<div class="text-center">
<p class="text-palenight-100 mb-2">More projects coming soon!</p>
<p class="text-accent-cyan">Stay tuned...</p>
</div>
</article>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="py-16 bg-base-bg">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<div>
<h2 class="text-3xl font-serif font-bold text-accent-yellow mb-6">About Me</h2>
<p class="text-palenight-100 mb-4">
With over 20 years in the electrical engineering field, I've had the privilege of working on
groundbreaking projects across the Middle East. My journey has been marked by continuous
learning, cultural exploration, and technological innovation.
</p>
<p class="text-palenight-100 mb-4">
Beyond my professional work, I'm passionate about technology, particularly static site
generation, Scheme programming, and tools like GNU Guix and Haunt. This blog is where I
share my experiences, insights, and the lessons learned along the way.
</p>
</div>
<div class="bg-base-darker p-8 rounded-lg shadow-md border border-palenight-400/20">
<h3 class="text-xl font-bold text-accent-yellow mb-4">Areas of Focus</h3>
<ul class="space-y-3">
<li class="flex items-center text-palenight-100">
<svg class="w-5 h-5 text-accent-blue mr-2" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"></path>
</svg>
Electrical Engineering
</li>
<li class="flex items-center text-palenight-100">
<svg class="w-5 h-5 text-accent-blue mr-2" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"></path>
</svg>
Static Site Generation
</li>
<li class="flex items-center text-palenight-100">
<svg class="w-5 h-5 text-accent-blue mr-2" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"></path>
</svg>
Scheme Programming
</li>
<li class="flex items-center text-palenight-100">
<svg class="w-5 h-5 text-accent-blue mr-2" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"></path>
</svg>
Middle Eastern Culture
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-16 bg-base-darker">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<h2 class="text-3xl font-serif font-bold text-accent-yellow mb-6">Get in Touch</h2>
<p class="text-palenight-100 mb-8">
Interested in connecting? Feel free to reach out for discussions about technology, engineering,
or sharing travel stories.
</p>
<a href="mailto:glenn@glenneth.org"
class="inline-flex items-center px-6 py-3 border border-accent-blue text-base font-medium rounded-md text-accent-blue hover:bg-accent-blue hover:text-base-bg transition-colors">
Send a Message
</a>
</div>
</div>
</section>
</main>
<footer class="bg-base-darker text-palenight-200 py-12 border-t border-palenight-400/20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<p class="text-palenight-300">&copy; 2024 Glenn Thompson. All rights reserved.</p>
<div class="webring-text mt-6">
<p class="text-palenight-300">I am part of the <a href="https://systemcrafters.net" target="_blank"
class="text-accent-blue hover:text-accent-cyan">System Crafters</a> webring:</p>
</div>
<div class="craftering mt-2 flex items-center justify-center gap-4 text-accent-blue">
<a href="https://craftering.systemcrafters.net/@glenneth/previous"
class="hover:text-accent-cyan">←</a>
<a href="https://craftering.systemcrafters.net/" class="hover:text-accent-cyan">craftering</a>
<a href="https://craftering.systemcrafters.net/@glenneth/next" class="hover:text-accent-cyan">→</a>
</div>
<p class="text-palenight-300 mt-2">
<a href="mailto:glenn@glenneth.org"
class="text-accent-blue hover:text-accent-cyan transition-colors">glenn@glenneth.org</a> |
<a href="https://glenneth.org"
class="text-accent-blue hover:text-accent-cyan transition-colors">glenneth.org</a>
</p>
</div>
</div>
</footer>
</body>
</html>

222
js/generate-rss.js
View File

@ -1,111 +1,111 @@
const fs = require('fs');
const path = require('path');
const marked = require('marked');
function sanitizeTitle(title) {
// Remove any surrounding quotes and trim whitespace
return title.replace(/^["']|["']$/g, '').trim();
}
function formatDate(dateStr) {
// Ensure consistent date format
const date = new Date(dateStr);
return date.toUTCString();
}
function extractMetadata(markdown) {
const metadata = {};
const match = markdown.match(/^---\n([\s\S]*?)\n---/);
if (match) {
const frontMatter = match[1];
frontMatter.split('\n').forEach(line => {
const [key, ...valueParts] = line.split(':');
if (key && valueParts.length > 0) {
metadata[key.trim()] = valueParts.join(':').trim();
}
});
}
// Get content without front matter
const content = markdown.replace(/^---\n[\s\S]*?\n---\n/, '');
// Extract first paragraph as description if no description in metadata
if (!metadata.description) {
const firstParagraph = content.match(/\n\n(.*?)\n\n/);
if (firstParagraph) {
metadata.description = firstParagraph[1].replace(/[#*`]/g, '').trim();
}
}
// Convert markdown content to HTML
const htmlContent = marked.parse(content, {
gfm: true,
breaks: true,
smartLists: true,
smartypants: true
});
metadata.content = htmlContent;
return metadata;
}
function generateRSSFeed() {
const postsDir = path.join(__dirname, '../../content/posts');
const posts = [];
// Read all markdown files
fs.readdirSync(postsDir)
.filter(file => file.endsWith('.md'))
.forEach(file => {
const filePath = path.join(postsDir, file);
const content = fs.readFileSync(filePath, 'utf-8');
const metadata = extractMetadata(content);
if (metadata.title && metadata.date) {
posts.push({
title: sanitizeTitle(metadata.title),
date: formatDate(metadata.date),
description: metadata.description || '',
content: metadata.content,
author: metadata.author || 'Glenn Thompson',
link: `https://glenneth.org/content/posts/${file.replace('.md', '.html')}`,
tags: metadata.tags || ''
});
}
});
// Sort posts by date (newest first)
posts.sort((a, b) => new Date(b.date) - new Date(a.date));
// Generate RSS XML
const rss = `<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
<channel>
<title>Glenn Thompson's Blog</title>
<description>Personal blog about programming, technology, and other interests</description>
<link>https://glenneth.org</link>
<atom:link href="https://glenneth.org/feed.xml" rel="self" type="application/rss+xml" />
<language>en-us</language>
<lastBuildDate>${new Date().toUTCString()}</lastBuildDate>
${posts.map(post => `
<item>
<title>${post.title}</title>
<description>${post.description}</description>
<content:encoded><![CDATA[${post.content}]]></content:encoded>
<link>${post.link}</link>
<guid isPermaLink="true">${post.link}</guid>
<pubDate>${post.date}</pubDate>
<author>${post.author}</author>
${post.tags ? `<category>${post.tags}</category>` : ''}
</item>`).join('\n ')}
</channel>
</rss>`;
// Write the RSS feed to file
fs.writeFileSync(path.join(__dirname, '../../feed.xml'), rss);
console.log('Generated RSS feed at feed.xml');
}
generateRSSFeed();
const fs = require('fs');
const path = require('path');
const marked = require('marked');
function sanitizeTitle(title) {
// Remove any surrounding quotes and trim whitespace
return title.replace(/^["']|["']$/g, '').trim();
}
function formatDate(dateStr) {
// Ensure consistent date format
const date = new Date(dateStr);
return date.toUTCString();
}
function extractMetadata(markdown) {
const metadata = {};
const match = markdown.match(/^---\n([\s\S]*?)\n---/);
if (match) {
const frontMatter = match[1];
frontMatter.split('\n').forEach(line => {
const [key, ...valueParts] = line.split(':');
if (key && valueParts.length > 0) {
metadata[key.trim()] = valueParts.join(':').trim();
}
});
}
// Get content without front matter
const content = markdown.replace(/^---\n[\s\S]*?\n---\n/, '');
// Extract first paragraph as description if no description in metadata
if (!metadata.description) {
const firstParagraph = content.match(/\n\n(.*?)\n\n/);
if (firstParagraph) {
metadata.description = firstParagraph[1].replace(/[#*`]/g, '').trim();
}
}
// Convert markdown content to HTML
const htmlContent = marked.parse(content, {
gfm: true,
breaks: true,
smartLists: true,
smartypants: true
});
metadata.content = htmlContent;
return metadata;
}
function generateRSSFeed() {
const postsDir = path.join(__dirname, '../../content/posts');
const posts = [];
// Read all markdown files
fs.readdirSync(postsDir)
.filter(file => file.endsWith('.md'))
.forEach(file => {
const filePath = path.join(postsDir, file);
const content = fs.readFileSync(filePath, 'utf-8');
const metadata = extractMetadata(content);
if (metadata.title && metadata.date) {
posts.push({
title: sanitizeTitle(metadata.title),
date: formatDate(metadata.date),
description: metadata.description || '',
content: metadata.content,
author: metadata.author || 'Glenn Thompson',
link: `https://glenneth.org/content/posts/${file.replace('.md', '.html')}`,
tags: metadata.tags || ''
});
}
});
// Sort posts by date (newest first)
posts.sort((a, b) => new Date(b.date) - new Date(a.date));
// Generate RSS XML
const rss = `<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
<channel>
<title>Glenn Thompson's Blog</title>
<description>Personal blog about programming, technology, and other interests</description>
<link>https://glenneth.org</link>
<atom:link href="https://glenneth.org/feed.xml" rel="self" type="application/rss+xml" />
<language>en-us</language>
<lastBuildDate>${new Date().toUTCString()}</lastBuildDate>
${posts.map(post => `
<item>
<title>${post.title}</title>
<description>${post.description}</description>
<content:encoded><![CDATA[${post.content}]]></content:encoded>
<link>${post.link}</link>
<guid isPermaLink="true">${post.link}</guid>
<pubDate>${post.date}</pubDate>
<author>${post.author}</author>
${post.tags ? `<category>${post.tags}</category>` : ''}
</item>`).join('\n ')}
</channel>
</rss>`;
// Write the RSS feed to file
fs.writeFileSync(path.join(__dirname, '../../feed.xml'), rss);
console.log('Generated RSS feed at feed.xml');
}
generateRSSFeed();

50
js/main.js
View File

@ -1,25 +1,25 @@
// Handle mobile menu toggle
document.addEventListener('DOMContentLoaded', () => {
// Smooth scroll for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth'
});
}
});
});
// Add scroll event listener for navbar
const navbar = document.querySelector('nav');
window.addEventListener('scroll', () => {
if (window.scrollY > 0) {
navbar.classList.add('shadow-md');
} else {
navbar.classList.remove('shadow-md');
}
});
});
// Handle mobile menu toggle
document.addEventListener('DOMContentLoaded', () => {
// Smooth scroll for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth'
});
}
});
});
// Add scroll event listener for navbar
const navbar = document.querySelector('nav');
window.addEventListener('scroll', () => {
if (window.scrollY > 0) {
navbar.classList.add('shadow-md');
} else {
navbar.classList.remove('shadow-md');
}
});
});

684
js/md-to-html.js
View File

@ -1,342 +1,342 @@
const { marked } = require('marked');
const fs = require('fs');
const path = require('path');
const cheerio = require('cheerio');
// Configure marked options
const options = {
headerIds: true,
gfm: true
};
// Footer template
const footer = `
<footer class="bg-base-darker text-palenight-200 py-12 border-t border-palenight-400/20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<p class="text-palenight-300">&copy; 2024 Glenn Thompson. All rights reserved.</p>
<div class="webring-text mt-6">
<p class="text-palenight-300">I am part of the <a href="https://systemcrafters.net" target="_blank" class="text-accent-blue hover:text-accent-cyan">System Crafters</a> webring:</p>
</div>
<div class="craftering mt-2 flex items-center justify-center gap-4 text-accent-blue">
<a href="https://craftering.systemcrafters.net/@glenneth/previous" class="hover:text-accent-cyan">Previous</a>
<a href="https://craftering.systemcrafters.net/@glenneth" class="hover:text-accent-cyan">Random</a>
<a href="https://craftering.systemcrafters.net/@glenneth/next" class="hover:text-accent-cyan">Next</a>
</div>
<p class="text-palenight-300 mt-2">
<a href="mailto:glenn@glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenn@glenneth.org</a> |
<a href="https://glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenneth.org</a>
</p>
</div>
</div>
</footer>
</body>
</html>`;
// Function to convert markdown to HTML
async function convertMarkdownToHtml(mdFilePath, outputPath) {
try {
// Read markdown file
const markdown = await fs.promises.readFile(mdFilePath, 'utf8');
// Extract metadata from markdown (assuming front matter)
const metadata = {};
const content = markdown.replace(/^---\n([\s\S]*?)\n---\n/, (_, frontMatter) => {
frontMatter.split('\n').forEach(line => {
const [key, ...valueParts] = line.split(':');
if (key && valueParts.length > 0) {
metadata[key.trim()] = valueParts.join(':').trim();
}
});
return '';
});
// Configure marked options for proper heading rendering
const markedOptions = {
headerIds: true,
gfm: true,
breaks: true,
pedantic: false,
smartLists: true,
smartypants: true
};
// Convert markdown to HTML
const articleContent = marked.parse(content, markedOptions);
// Calculate read time (rough estimate: 200 words per minute)
const wordCount = content.trim().split(/\s+/).length;
const readTime = Math.ceil(wordCount / 200);
// Create full HTML document
const html = `<!DOCTYPE html>
<html lang="en" class="bg-base-bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="${metadata.description || ''}">
<meta property="og:title" content="${metadata.title || 'Blog Post'}">
<meta property="og:description" content="${metadata.description || ''}">
<meta property="og:url" content="https://glenneth.org${mdFilePath.replace(/\.md$/, '')}">
<title>${metadata.title || 'Blog Post'} - Glenn Thompson</title>
<link rel="alternate" type="application/rss+xml" title="Glenn Thompson's Blog" href="/feed.xml" />
<link href="/dist/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
.prose-palenight {
--tw-prose-body: #bfc7d5;
--tw-prose-headings: #ffd580;
--tw-prose-links: #82aaff;
--tw-prose-code: #c792ea;
--tw-prose-pre-bg: #1b1e2b;
}
.prose h2 {
color: var(--tw-prose-headings);
font-family: Merriweather, serif;
font-weight: 700;
font-size: 1.5rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.prose p {
margin-bottom: 1rem;
line-height: 1.625;
}
.prose a {
color: var(--tw-prose-links);
text-decoration: none;
}
.prose a:hover {
color: #89ddff;
}
.prose code {
color: var(--tw-prose-code);
font-family: 'JetBrains Mono', monospace;
}
.prose pre {
background-color: var(--tw-prose-pre-bg);
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
margin-bottom: 1rem;
}
.prose ul, .prose ol {
margin-top: 0.5rem;
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.prose ul {
list-style-type: disc;
}
.prose ol {
list-style-type: decimal;
}
</style>
</head>
<body class="bg-base-bg text-palenight-50">
<nav class="bg-base-darker/80 backdrop-blur-sm shadow-sm border-b border-palenight-400/20 mb-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="/" class="text-accent-yellow font-serif text-xl font-bold">Glenn Thompson</a>
<div class="flex items-center gap-2 text-accent-yellow text-sm font-bold">
<span>${metadata.tags || 'Tech'}</span>
<span>•</span>
<time datetime="${metadata.date}">${new Date(metadata.date).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })}</time>
<span>•</span>
<span>${readTime} min read</span>
</div>
</div>
</div>
</nav>
<main class="pt-24 pb-16 px-4">
<div class="max-w-4xl mx-auto">
<div class="content text-palenight-100 space-y-6">
<header class="mb-8">
<h1 class="text-4xl font-serif font-bold text-accent-yellow">${metadata.title || 'Blog Post'}</h1>
<div class="flex items-center gap-4 text-palenight-300 mt-4">
<time datetime="${metadata.date || ''}">${metadata.date || ''}</time>
<span>•</span>
<span>${readTime} min read</span>
<span>•</span>
<span>By ${metadata.author || 'Glenn Thompson'}</span>
</div>
${metadata.tags ? `
<div class="flex flex-wrap gap-2 mt-4">
${metadata.tags.split(',').map(tag =>
`<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">${tag.trim()}</span>`
).join('')}
</div>` : ''}
</header>
<article class="prose prose-palenight max-w-none">
${articleContent}
</article>
</div>
</div>
</main>${footer}`;
// Write HTML file
const htmlPath = outputPath || mdFilePath.replace('.md', '.html');
await fs.promises.writeFile(htmlPath, html);
console.log(`Converted ${mdFilePath} to ${htmlPath}`);
} catch (error) {
console.error('Error converting markdown to HTML:', error);
process.exit(1);
}
}
// Function to extract summary from markdown content
function extractSummary(content, maxLength = 200) {
// Remove frontmatter
const contentWithoutFrontmatter = content.replace(/^---\n[\s\S]*?\n---\n/, '');
// Parse the markdown to HTML
const html = marked.parse(contentWithoutFrontmatter);
// Use cheerio to extract text from the first paragraph
const $ = cheerio.load(html);
const firstParagraph = $('p').first().text();
// Truncate to maxLength and add ellipsis if needed
if (firstParagraph.length <= maxLength) {
return firstParagraph;
}
return firstParagraph.substring(0, maxLength).trim() + '...';
}
// Function to update index.html with blog post summaries
async function updateIndexWithSummaries() {
try {
const postsDir = path.join(process.cwd(), 'content', 'posts');
const indexPath = path.join(process.cwd(), 'index.html');
// Read all markdown files
const files = await fs.promises.readdir(postsDir);
const posts = [];
for (const file of files) {
if (file.endsWith('.md')) {
const filePath = path.join(postsDir, file);
const content = await fs.promises.readFile(filePath, 'utf8');
// Extract metadata
const metadata = {};
content.replace(/^---\n([\s\S]*?)\n---\n/, (_, frontMatter) => {
frontMatter.split('\n').forEach(line => {
const [key, ...valueParts] = line.split(':');
if (key && valueParts.length > 0) {
metadata[key.trim()] = valueParts.join(':').trim();
}
});
return '';
});
// Extract summary
const summary = extractSummary(content);
// Parse and format the date
let formattedDate = '';
let isoDate = '';
try {
// Handle date formats like "2024-04-08 16:50" or "2024-04-08"
const dateStr = metadata.date.split(' ')[0];
const date = new Date(dateStr);
formattedDate = date.toLocaleDateString('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric'
});
isoDate = dateStr;
} catch (e) {
console.error(`Error parsing date for ${file}:`, e);
}
// Parse tags
let tags = [];
if (metadata.tags) {
// Remove square brackets and split by commas
tags = metadata.tags.replace(/[\[\]]/g, '').split(',').map(t => t.trim().replace(/"/g, ''));
}
posts.push({
title: metadata.title?.replace(/"/g, '') || 'Untitled',
date: formattedDate,
isoDate,
summary,
tags,
url: `/content/posts/${path.basename(file, '.md')}.html`
});
}
}
// Sort posts by date (newest first)
posts.sort((a, b) => new Date(b.isoDate) - new Date(a.isoDate));
// Read index.html
let indexHtml = await fs.promises.readFile(indexPath, 'utf8');
// Create the HTML for blog posts
const postsHtml = posts.map(post => `
<article class="bg-base-darker p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors">
<div class="flex flex-wrap items-center gap-2 text-accent-yellow text-sm mb-2 font-bold">
<span>Tech</span>
${post.tags.map(tag => `<span>•</span><span>${tag}</span>`).join('')}
<span>•</span>
<time datetime="${post.isoDate}">${post.date}</time>
</div>
<h3 class="text-xl font-serif font-bold text-accent-yellow mb-3">
<a href="${post.url}" class="hover:text-accent-cyan transition-colors">
${post.title}
</a>
</h3>
<p class="text-palenight-100 mb-4">${post.summary}</p>
<div class="flex flex-wrap gap-2">
${post.tags.map(tag => `<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">${tag}</span>`).join('')}
</div>
</article>
`).join('\n');
// Find the blog posts section and replace its content
const blogSectionStart = indexHtml.indexOf('<div class="grid gap-8 md:grid-cols-2">');
const blogSectionEnd = indexHtml.indexOf('</div><!-- End blog posts -->') + '</div><!-- End blog posts -->'.length;
if (blogSectionStart === -1 || blogSectionEnd === -1) {
console.error('Could not find blog posts section in index.html');
return;
}
// Replace the content between the markers
indexHtml = indexHtml.substring(0, blogSectionStart) +
'<div class="grid gap-8 md:grid-cols-2">\n' +
postsHtml + '\n' +
' </div><!-- End blog posts -->' +
indexHtml.substring(blogSectionEnd);
// Write the updated index.html
await fs.promises.writeFile(indexPath, indexHtml);
console.log('Successfully updated index.html with blog post summaries');
} catch (error) {
console.error('Error updating index.html:', error);
throw error;
}
}
// Export functions
module.exports = {
convertMarkdownToHtml,
updateIndexWithSummaries
};
// If running from command line
if (require.main === module) {
const mdFilePath = process.argv[2];
const outputPath = process.argv[3];
if (!mdFilePath) {
console.error('Please provide a markdown file path');
process.exit(1);
}
convertMarkdownToHtml(mdFilePath, outputPath);
}
const { marked } = require('marked');
const fs = require('fs');
const path = require('path');
const cheerio = require('cheerio');
// Configure marked options
const options = {
headerIds: true,
gfm: true
};
// Footer template
const footer = `
<footer class="bg-base-darker text-palenight-200 py-12 border-t border-palenight-400/20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<p class="text-palenight-300">&copy; 2024 Glenn Thompson. All rights reserved.</p>
<div class="webring-text mt-6">
<p class="text-palenight-300">I am part of the <a href="https://systemcrafters.net" target="_blank" class="text-accent-blue hover:text-accent-cyan">System Crafters</a> webring:</p>
</div>
<div class="craftering mt-2 flex items-center justify-center gap-4 text-accent-blue">
<a href="https://craftering.systemcrafters.net/@glenneth/previous" class="hover:text-accent-cyan">Previous</a>
<a href="https://craftering.systemcrafters.net/@glenneth" class="hover:text-accent-cyan">Random</a>
<a href="https://craftering.systemcrafters.net/@glenneth/next" class="hover:text-accent-cyan">Next</a>
</div>
<p class="text-palenight-300 mt-2">
<a href="mailto:glenn@glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenn@glenneth.org</a> |
<a href="https://glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenneth.org</a>
</p>
</div>
</div>
</footer>
</body>
</html>`;
// Function to convert markdown to HTML
async function convertMarkdownToHtml(mdFilePath, outputPath) {
try {
// Read markdown file
const markdown = await fs.promises.readFile(mdFilePath, 'utf8');
// Extract metadata from markdown (assuming front matter)
const metadata = {};
const content = markdown.replace(/^---\n([\s\S]*?)\n---\n/, (_, frontMatter) => {
frontMatter.split('\n').forEach(line => {
const [key, ...valueParts] = line.split(':');
if (key && valueParts.length > 0) {
metadata[key.trim()] = valueParts.join(':').trim();
}
});
return '';
});
// Configure marked options for proper heading rendering
const markedOptions = {
headerIds: true,
gfm: true,
breaks: true,
pedantic: false,
smartLists: true,
smartypants: true
};
// Convert markdown to HTML
const articleContent = marked.parse(content, markedOptions);
// Calculate read time (rough estimate: 200 words per minute)
const wordCount = content.trim().split(/\s+/).length;
const readTime = Math.ceil(wordCount / 200);
// Create full HTML document
const html = `<!DOCTYPE html>
<html lang="en" class="bg-base-bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="${metadata.description || ''}">
<meta property="og:title" content="${metadata.title || 'Blog Post'}">
<meta property="og:description" content="${metadata.description || ''}">
<meta property="og:url" content="https://glenneth.org${mdFilePath.replace(/\.md$/, '')}">
<title>${metadata.title || 'Blog Post'} - Glenn Thompson</title>
<link rel="alternate" type="application/rss+xml" title="Glenn Thompson's Blog" href="/feed.xml" />
<link href="/dist/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
.prose-palenight {
--tw-prose-body: #bfc7d5;
--tw-prose-headings: #ffd580;
--tw-prose-links: #82aaff;
--tw-prose-code: #c792ea;
--tw-prose-pre-bg: #1b1e2b;
}
.prose h2 {
color: var(--tw-prose-headings);
font-family: Merriweather, serif;
font-weight: 700;
font-size: 1.5rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.prose p {
margin-bottom: 1rem;
line-height: 1.625;
}
.prose a {
color: var(--tw-prose-links);
text-decoration: none;
}
.prose a:hover {
color: #89ddff;
}
.prose code {
color: var(--tw-prose-code);
font-family: 'JetBrains Mono', monospace;
}
.prose pre {
background-color: var(--tw-prose-pre-bg);
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
margin-bottom: 1rem;
}
.prose ul, .prose ol {
margin-top: 0.5rem;
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.prose ul {
list-style-type: disc;
}
.prose ol {
list-style-type: decimal;
}
</style>
</head>
<body class="bg-base-bg text-palenight-50">
<nav class="bg-base-darker/80 backdrop-blur-sm shadow-sm border-b border-palenight-400/20 mb-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="/" class="text-accent-yellow font-serif text-xl font-bold">Glenn Thompson</a>
<div class="flex items-center gap-2 text-accent-yellow text-sm font-bold">
<span>${metadata.tags || 'Tech'}</span>
<span>•</span>
<time datetime="${metadata.date}">${new Date(metadata.date).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })}</time>
<span>•</span>
<span>${readTime} min read</span>
</div>
</div>
</div>
</nav>
<main class="pt-24 pb-16 px-4">
<div class="max-w-4xl mx-auto">
<div class="content text-palenight-100 space-y-6">
<header class="mb-8">
<h1 class="text-4xl font-serif font-bold text-accent-yellow">${metadata.title || 'Blog Post'}</h1>
<div class="flex items-center gap-4 text-palenight-300 mt-4">
<time datetime="${metadata.date || ''}">${metadata.date || ''}</time>
<span>•</span>
<span>${readTime} min read</span>
<span>•</span>
<span>By ${metadata.author || 'Glenn Thompson'}</span>
</div>
${metadata.tags ? `
<div class="flex flex-wrap gap-2 mt-4">
${metadata.tags.split(',').map(tag =>
`<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">${tag.trim()}</span>`
).join('')}
</div>` : ''}
</header>
<article class="prose prose-palenight max-w-none">
${articleContent}
</article>
</div>
</div>
</main>${footer}`;
// Write HTML file
const htmlPath = outputPath || mdFilePath.replace('.md', '.html');
await fs.promises.writeFile(htmlPath, html);
console.log(`Converted ${mdFilePath} to ${htmlPath}`);
} catch (error) {
console.error('Error converting markdown to HTML:', error);
process.exit(1);
}
}
// Function to extract summary from markdown content
function extractSummary(content, maxLength = 200) {
// Remove frontmatter
const contentWithoutFrontmatter = content.replace(/^---\n[\s\S]*?\n---\n/, '');
// Parse the markdown to HTML
const html = marked.parse(contentWithoutFrontmatter);
// Use cheerio to extract text from the first paragraph
const $ = cheerio.load(html);
const firstParagraph = $('p').first().text();
// Truncate to maxLength and add ellipsis if needed
if (firstParagraph.length <= maxLength) {
return firstParagraph;
}
return firstParagraph.substring(0, maxLength).trim() + '...';
}
// Function to update index.html with blog post summaries
async function updateIndexWithSummaries() {
try {
const postsDir = path.join(process.cwd(), 'content', 'posts');
const indexPath = path.join(process.cwd(), 'index.html');
// Read all markdown files
const files = await fs.promises.readdir(postsDir);
const posts = [];
for (const file of files) {
if (file.endsWith('.md')) {
const filePath = path.join(postsDir, file);
const content = await fs.promises.readFile(filePath, 'utf8');
// Extract metadata
const metadata = {};
content.replace(/^---\n([\s\S]*?)\n---\n/, (_, frontMatter) => {
frontMatter.split('\n').forEach(line => {
const [key, ...valueParts] = line.split(':');
if (key && valueParts.length > 0) {
metadata[key.trim()] = valueParts.join(':').trim();
}
});
return '';
});
// Extract summary
const summary = extractSummary(content);
// Parse and format the date
let formattedDate = '';
let isoDate = '';
try {
// Handle date formats like "2024-04-08 16:50" or "2024-04-08"
const dateStr = metadata.date.split(' ')[0];
const date = new Date(dateStr);
formattedDate = date.toLocaleDateString('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric'
});
isoDate = dateStr;
} catch (e) {
console.error(`Error parsing date for ${file}:`, e);
}
// Parse tags
let tags = [];
if (metadata.tags) {
// Remove square brackets and split by commas
tags = metadata.tags.replace(/[\[\]]/g, '').split(',').map(t => t.trim().replace(/"/g, ''));
}
posts.push({
title: metadata.title?.replace(/"/g, '') || 'Untitled',
date: formattedDate,
isoDate,
summary,
tags,
url: `/content/posts/${path.basename(file, '.md')}.html`
});
}
}
// Sort posts by date (newest first)
posts.sort((a, b) => new Date(b.isoDate) - new Date(a.isoDate));
// Read index.html
let indexHtml = await fs.promises.readFile(indexPath, 'utf8');
// Create the HTML for blog posts
const postsHtml = posts.map(post => `
<article class="bg-base-darker p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors">
<div class="flex flex-wrap items-center gap-2 text-accent-yellow text-sm mb-2 font-bold">
<span>Tech</span>
${post.tags.map(tag => `<span>•</span><span>${tag}</span>`).join('')}
<span>•</span>
<time datetime="${post.isoDate}">${post.date}</time>
</div>
<h3 class="text-xl font-serif font-bold text-accent-yellow mb-3">
<a href="${post.url}" class="hover:text-accent-cyan transition-colors">
${post.title}
</a>
</h3>
<p class="text-palenight-100 mb-4">${post.summary}</p>
<div class="flex flex-wrap gap-2">
${post.tags.map(tag => `<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">${tag}</span>`).join('')}
</div>
</article>
`).join('\n');
// Find the blog posts section and replace its content
const blogSectionStart = indexHtml.indexOf('<div class="grid gap-8 md:grid-cols-2">');
const blogSectionEnd = indexHtml.indexOf('</div><!-- End blog posts -->') + '</div><!-- End blog posts -->'.length;
if (blogSectionStart === -1 || blogSectionEnd === -1) {
console.error('Could not find blog posts section in index.html');
return;
}
// Replace the content between the markers
indexHtml = indexHtml.substring(0, blogSectionStart) +
'<div class="grid gap-8 md:grid-cols-2">\n' +
postsHtml + '\n' +
' </div><!-- End blog posts -->' +
indexHtml.substring(blogSectionEnd);
// Write the updated index.html
await fs.promises.writeFile(indexPath, indexHtml);
console.log('Successfully updated index.html with blog post summaries');
} catch (error) {
console.error('Error updating index.html:', error);
throw error;
}
}
// Export functions
module.exports = {
convertMarkdownToHtml,
updateIndexWithSummaries
};
// If running from command line
if (require.main === module) {
const mdFilePath = process.argv[2];
const outputPath = process.argv[3];
if (!mdFilePath) {
console.error('Please provide a markdown file path');
process.exit(1);
}
convertMarkdownToHtml(mdFilePath, outputPath);
}

9468
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

64
package.json
View File

@ -1,32 +1,32 @@
{
"name": "glenneth-org",
"version": "1.0.0",
"description": "Personal website and blog of Glenn Thompson - https://glenneth.org",
"scripts": {
"dev": "concurrently \"npm run watch:css\" \"npm run serve\"",
"build": "tailwindcss -i ./src/input.css -o ./dist/styles.css --minify",
"watch:css": "tailwindcss -i ./src/input.css -o ./dist/styles.css --watch",
"serve": "live-server --port=3000 --no-browser",
"convert": "node src/js/md-to-html.js",
"update-summaries": "node -e 'require(\"./src/js/md-to-html.js\").updateIndexWithSummaries()'"
},
"keywords": [
"blog",
"personal-website",
"engineering",
"technology",
"glenneth.org"
],
"author": "Glenn Thompson <glenn@glenneth.org>",
"license": "MIT",
"devDependencies": {
"@tailwindcss/typography": "^0.5.15",
"autoprefixer": "^10.4.14",
"cheerio": "^1.0.0",
"concurrently": "^8.0.1",
"live-server": "^1.2.2",
"marked": "^11.1.0",
"postcss": "^8.4.21",
"tailwindcss": "^3.3.0"
}
}
{
"name": "glenneth-org",
"version": "1.0.0",
"description": "Personal website and blog of Glenn Thompson - https://glenneth.org",
"scripts": {
"dev": "concurrently \"npm run watch:css\" \"npm run serve\"",
"build": "tailwindcss -i ./src/input.css -o ./dist/styles.css --minify",
"watch:css": "tailwindcss -i ./src/input.css -o ./dist/styles.css --watch",
"serve": "live-server --port=3000 --no-browser",
"convert": "node src/js/md-to-html.js",
"update-summaries": "node -e 'require(\"./src/js/md-to-html.js\").updateIndexWithSummaries()'"
},
"keywords": [
"blog",
"personal-website",
"engineering",
"technology",
"glenneth.org"
],
"author": "Glenn Thompson <glenn@glenneth.org>",
"license": "MIT",
"devDependencies": {
"@tailwindcss/typography": "^0.5.15",
"autoprefixer": "^10.4.14",
"cheerio": "^1.0.0",
"concurrently": "^8.0.1",
"live-server": "^1.2.2",
"marked": "^11.1.0",
"postcss": "^8.4.21",
"tailwindcss": "^3.3.0"
}
}

12
postcss.config.js
View File

@ -1,6 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

78
src/input.css
View File

@ -1,39 +1,39 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
html {
scroll-behavior: smooth;
}
body {
@apply antialiased text-palenight-50;
}
h1, h2, h3, h4, h5, h6 {
@apply font-serif;
}
}
@layer components {
.nav-link {
@apply inline-flex items-center px-1 pt-1 text-sm font-medium text-accent-blue hover:text-accent-cyan transition-colors;
}
.blog-card {
@apply bg-base-bg rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 border border-palenight-400/20;
}
.button-primary {
@apply inline-flex items-center px-6 py-3 border border-accent-blue text-base font-medium rounded-md text-accent-blue hover:bg-accent-blue hover:text-base-bg transition-colors;
}
}
.prose {
@apply max-w-none;
}
.prose img {
@apply rounded-lg shadow-md;
}
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
html {
scroll-behavior: smooth;
}
body {
@apply antialiased text-palenight-50;
}
h1, h2, h3, h4, h5, h6 {
@apply font-serif;
}
}
@layer components {
.nav-link {
@apply inline-flex items-center px-1 pt-1 text-sm font-medium text-accent-blue hover:text-accent-cyan transition-colors;
}
.blog-card {
@apply bg-base-bg rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 border border-palenight-400/20;
}
.button-primary {
@apply inline-flex items-center px-6 py-3 border border-accent-blue text-base font-medium rounded-md text-accent-blue hover:bg-accent-blue hover:text-base-bg transition-colors;
}
}
.prose {
@apply max-w-none;
}
.prose img {
@apply rounded-lg shadow-md;
}

222
src/js/generate-rss.js
View File

@ -1,111 +1,111 @@
const fs = require('fs');
const path = require('path');
const marked = require('marked');
function sanitizeTitle(title) {
// Remove any surrounding quotes and trim whitespace
return title.replace(/^["']|["']$/g, '').trim();
}
function formatDate(dateStr) {
// Ensure consistent date format
const date = new Date(dateStr);
return date.toUTCString();
}
function extractMetadata(markdown) {
const metadata = {};
const match = markdown.match(/^---\n([\s\S]*?)\n---/);
if (match) {
const frontMatter = match[1];
frontMatter.split('\n').forEach(line => {
const [key, ...valueParts] = line.split(':');
if (key && valueParts.length > 0) {
metadata[key.trim()] = valueParts.join(':').trim();
}
});
}
// Get content without front matter
const content = markdown.replace(/^---\n[\s\S]*?\n---\n/, '');
// Extract first paragraph as description if no description in metadata
if (!metadata.description) {
const firstParagraph = content.match(/\n\n(.*?)\n\n/);
if (firstParagraph) {
metadata.description = firstParagraph[1].replace(/[#*`]/g, '').trim();
}
}
// Convert markdown content to HTML
const htmlContent = marked.parse(content, {
gfm: true,
breaks: true,
smartLists: true,
smartypants: true
});
metadata.content = htmlContent;
return metadata;
}
function generateRSSFeed() {
const postsDir = path.join(__dirname, '../../content/posts');
const posts = [];
// Read all markdown files
fs.readdirSync(postsDir)
.filter(file => file.endsWith('.md'))
.forEach(file => {
const filePath = path.join(postsDir, file);
const content = fs.readFileSync(filePath, 'utf-8');
const metadata = extractMetadata(content);
if (metadata.title && metadata.date) {
posts.push({
title: sanitizeTitle(metadata.title),
date: formatDate(metadata.date),
description: metadata.description || '',
content: metadata.content,
author: metadata.author || 'Glenn Thompson',
link: `https://glenneth.org/content/posts/${file.replace('.md', '.html')}`,
tags: metadata.tags || ''
});
}
});
// Sort posts by date (newest first)
posts.sort((a, b) => new Date(b.date) - new Date(a.date));
// Generate RSS XML
const rss = `<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
<channel>
<title>Glenn Thompson's Blog</title>
<description>Personal blog about programming, technology, and other interests</description>
<link>https://glenneth.org</link>
<atom:link href="https://glenneth.org/feed.xml" rel="self" type="application/rss+xml" />
<language>en-us</language>
<lastBuildDate>${new Date().toUTCString()}</lastBuildDate>
${posts.map(post => `
<item>
<title>${post.title}</title>
<description>${post.description}</description>
<content:encoded><![CDATA[${post.content}]]></content:encoded>
<link>${post.link}</link>
<guid isPermaLink="true">${post.link}</guid>
<pubDate>${post.date}</pubDate>
<author>${post.author}</author>
${post.tags ? `<category>${post.tags}</category>` : ''}
</item>`).join('\n ')}
</channel>
</rss>`;
// Write the RSS feed to file
fs.writeFileSync(path.join(__dirname, '../../feed.xml'), rss);
console.log('Generated RSS feed at feed.xml');
}
generateRSSFeed();
const fs = require('fs');
const path = require('path');
const marked = require('marked');
function sanitizeTitle(title) {
// Remove any surrounding quotes and trim whitespace
return title.replace(/^["']|["']$/g, '').trim();
}
function formatDate(dateStr) {
// Ensure consistent date format
const date = new Date(dateStr);
return date.toUTCString();
}
function extractMetadata(markdown) {
const metadata = {};
const match = markdown.match(/^---\n([\s\S]*?)\n---/);
if (match) {
const frontMatter = match[1];
frontMatter.split('\n').forEach(line => {
const [key, ...valueParts] = line.split(':');
if (key && valueParts.length > 0) {
metadata[key.trim()] = valueParts.join(':').trim();
}
});
}
// Get content without front matter
const content = markdown.replace(/^---\n[\s\S]*?\n---\n/, '');
// Extract first paragraph as description if no description in metadata
if (!metadata.description) {
const firstParagraph = content.match(/\n\n(.*?)\n\n/);
if (firstParagraph) {
metadata.description = firstParagraph[1].replace(/[#*`]/g, '').trim();
}
}
// Convert markdown content to HTML
const htmlContent = marked.parse(content, {
gfm: true,
breaks: true,
smartLists: true,
smartypants: true
});
metadata.content = htmlContent;
return metadata;
}
function generateRSSFeed() {
const postsDir = path.join(__dirname, '../../content/posts');
const posts = [];
// Read all markdown files
fs.readdirSync(postsDir)
.filter(file => file.endsWith('.md'))
.forEach(file => {
const filePath = path.join(postsDir, file);
const content = fs.readFileSync(filePath, 'utf-8');
const metadata = extractMetadata(content);
if (metadata.title && metadata.date) {
posts.push({
title: sanitizeTitle(metadata.title),
date: formatDate(metadata.date),
description: metadata.description || '',
content: metadata.content,
author: metadata.author || 'Glenn Thompson',
link: `https://glenneth.org/content/posts/${file.replace('.md', '.html')}`,
tags: metadata.tags || ''
});
}
});
// Sort posts by date (newest first)
posts.sort((a, b) => new Date(b.date) - new Date(a.date));
// Generate RSS XML
const rss = `<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
<channel>
<title>Glenn Thompson's Blog</title>
<description>Personal blog about programming, technology, and other interests</description>
<link>https://glenneth.org</link>
<atom:link href="https://glenneth.org/feed.xml" rel="self" type="application/rss+xml" />
<language>en-us</language>
<lastBuildDate>${new Date().toUTCString()}</lastBuildDate>
${posts.map(post => `
<item>
<title>${post.title}</title>
<description>${post.description}</description>
<content:encoded><![CDATA[${post.content}]]></content:encoded>
<link>${post.link}</link>
<guid isPermaLink="true">${post.link}</guid>
<pubDate>${post.date}</pubDate>
<author>${post.author}</author>
${post.tags ? `<category>${post.tags}</category>` : ''}
</item>`).join('\n ')}
</channel>
</rss>`;
// Write the RSS feed to file
fs.writeFileSync(path.join(__dirname, '../../feed.xml'), rss);
console.log('Generated RSS feed at feed.xml');
}
generateRSSFeed();

50
src/js/main.js
View File

@ -1,25 +1,25 @@
// Handle mobile menu toggle
document.addEventListener('DOMContentLoaded', () => {
// Smooth scroll for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth'
});
}
});
});
// Add scroll event listener for navbar
const navbar = document.querySelector('nav');
window.addEventListener('scroll', () => {
if (window.scrollY > 0) {
navbar.classList.add('shadow-md');
} else {
navbar.classList.remove('shadow-md');
}
});
});
// Handle mobile menu toggle
document.addEventListener('DOMContentLoaded', () => {
// Smooth scroll for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth'
});
}
});
});
// Add scroll event listener for navbar
const navbar = document.querySelector('nav');
window.addEventListener('scroll', () => {
if (window.scrollY > 0) {
navbar.classList.add('shadow-md');
} else {
navbar.classList.remove('shadow-md');
}
});
});

684
src/js/md-to-html.js
View File

@ -1,342 +1,342 @@
const { marked } = require('marked');
const fs = require('fs');
const path = require('path');
const cheerio = require('cheerio');
// Configure marked options
const options = {
headerIds: true,
gfm: true
};
// Footer template
const footer = `
<footer class="bg-base-darker text-palenight-200 py-12 border-t border-palenight-400/20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<p class="text-palenight-300">&copy; 2024 Glenn Thompson. All rights reserved.</p>
<div class="webring-text mt-6">
<p class="text-palenight-300">I am part of the <a href="https://systemcrafters.net" target="_blank" class="text-accent-blue hover:text-accent-cyan">System Crafters</a> webring:</p>
</div>
<div class="craftering mt-2 flex items-center justify-center gap-4 text-accent-blue">
<a href="https://craftering.systemcrafters.net/@glenneth/previous" class="hover:text-accent-cyan">Previous</a>
<a href="https://craftering.systemcrafters.net/@glenneth" class="hover:text-accent-cyan">Random</a>
<a href="https://craftering.systemcrafters.net/@glenneth/next" class="hover:text-accent-cyan">Next</a>
</div>
<p class="text-palenight-300 mt-2">
<a href="mailto:glenn@glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenn@glenneth.org</a> |
<a href="https://glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenneth.org</a>
</p>
</div>
</div>
</footer>
</body>
</html>`;
// Function to convert markdown to HTML
async function convertMarkdownToHtml(mdFilePath, outputPath) {
try {
// Read markdown file
const markdown = await fs.promises.readFile(mdFilePath, 'utf8');
// Extract metadata from markdown (assuming front matter)
const metadata = {};
const content = markdown.replace(/^---\n([\s\S]*?)\n---\n/, (_, frontMatter) => {
frontMatter.split('\n').forEach(line => {
const [key, ...valueParts] = line.split(':');
if (key && valueParts.length > 0) {
metadata[key.trim()] = valueParts.join(':').trim();
}
});
return '';
});
// Configure marked options for proper heading rendering
const markedOptions = {
headerIds: true,
gfm: true,
breaks: true,
pedantic: false,
smartLists: true,
smartypants: true
};
// Convert markdown to HTML
const articleContent = marked.parse(content, markedOptions);
// Calculate read time (rough estimate: 200 words per minute)
const wordCount = content.trim().split(/\s+/).length;
const readTime = Math.ceil(wordCount / 200);
// Create full HTML document
const html = `<!DOCTYPE html>
<html lang="en" class="bg-base-bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="${metadata.description || ''}">
<meta property="og:title" content="${metadata.title || 'Blog Post'}">
<meta property="og:description" content="${metadata.description || ''}">
<meta property="og:url" content="https://glenneth.org${mdFilePath.replace(/\.md$/, '')}">
<title>${metadata.title || 'Blog Post'} - Glenn Thompson</title>
<link rel="alternate" type="application/rss+xml" title="Glenn Thompson's Blog" href="/feed.xml" />
<link href="/dist/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
.prose-palenight {
--tw-prose-body: #bfc7d5;
--tw-prose-headings: #ffd580;
--tw-prose-links: #82aaff;
--tw-prose-code: #c792ea;
--tw-prose-pre-bg: #1b1e2b;
}
.prose h2 {
color: var(--tw-prose-headings);
font-family: Merriweather, serif;
font-weight: 700;
font-size: 1.5rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.prose p {
margin-bottom: 1rem;
line-height: 1.625;
}
.prose a {
color: var(--tw-prose-links);
text-decoration: none;
}
.prose a:hover {
color: #89ddff;
}
.prose code {
color: var(--tw-prose-code);
font-family: 'JetBrains Mono', monospace;
}
.prose pre {
background-color: var(--tw-prose-pre-bg);
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
margin-bottom: 1rem;
}
.prose ul, .prose ol {
margin-top: 0.5rem;
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.prose ul {
list-style-type: disc;
}
.prose ol {
list-style-type: decimal;
}
</style>
</head>
<body class="bg-base-bg text-palenight-50">
<nav class="bg-base-darker/80 backdrop-blur-sm shadow-sm border-b border-palenight-400/20 mb-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="/" class="text-accent-yellow font-serif text-xl font-bold">Glenn Thompson</a>
<div class="flex items-center gap-2 text-accent-yellow text-sm font-bold">
<span>${metadata.tags || 'Tech'}</span>
<span>•</span>
<time datetime="${metadata.date}">${new Date(metadata.date).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })}</time>
<span>•</span>
<span>${readTime} min read</span>
</div>
</div>
</div>
</nav>
<main class="pt-24 pb-16 px-4">
<div class="max-w-4xl mx-auto">
<div class="content text-palenight-100 space-y-6">
<header class="mb-8">
<h1 class="text-4xl font-serif font-bold text-accent-yellow">${metadata.title || 'Blog Post'}</h1>
<div class="flex items-center gap-4 text-palenight-300 mt-4">
<time datetime="${metadata.date || ''}">${metadata.date || ''}</time>
<span>•</span>
<span>${readTime} min read</span>
<span>•</span>
<span>By ${metadata.author || 'Glenn Thompson'}</span>
</div>
${metadata.tags ? `
<div class="flex flex-wrap gap-2 mt-4">
${metadata.tags.split(',').map(tag =>
`<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">${tag.trim()}</span>`
).join('')}
</div>` : ''}
</header>
<article class="prose prose-palenight max-w-none">
${articleContent}
</article>
</div>
</div>
</main>${footer}`;
// Write HTML file
const htmlPath = outputPath || mdFilePath.replace('.md', '.html');
await fs.promises.writeFile(htmlPath, html);
console.log(`Converted ${mdFilePath} to ${htmlPath}`);
} catch (error) {
console.error('Error converting markdown to HTML:', error);
process.exit(1);
}
}
// Function to extract summary from markdown content
function extractSummary(content, maxLength = 200) {
// Remove frontmatter
const contentWithoutFrontmatter = content.replace(/^---\n[\s\S]*?\n---\n/, '');
// Parse the markdown to HTML
const html = marked.parse(contentWithoutFrontmatter);
// Use cheerio to extract text from the first paragraph
const $ = cheerio.load(html);
const firstParagraph = $('p').first().text();
// Truncate to maxLength and add ellipsis if needed
if (firstParagraph.length <= maxLength) {
return firstParagraph;
}
return firstParagraph.substring(0, maxLength).trim() + '...';
}
// Function to update index.html with blog post summaries
async function updateIndexWithSummaries() {
try {
const postsDir = path.join(process.cwd(), 'content', 'posts');
const indexPath = path.join(process.cwd(), 'index.html');
// Read all markdown files
const files = await fs.promises.readdir(postsDir);
const posts = [];
for (const file of files) {
if (file.endsWith('.md')) {
const filePath = path.join(postsDir, file);
const content = await fs.promises.readFile(filePath, 'utf8');
// Extract metadata
const metadata = {};
content.replace(/^---\n([\s\S]*?)\n---\n/, (_, frontMatter) => {
frontMatter.split('\n').forEach(line => {
const [key, ...valueParts] = line.split(':');
if (key && valueParts.length > 0) {
metadata[key.trim()] = valueParts.join(':').trim();
}
});
return '';
});
// Extract summary
const summary = extractSummary(content);
// Parse and format the date
let formattedDate = '';
let isoDate = '';
try {
// Handle date formats like "2024-04-08 16:50" or "2024-04-08"
const dateStr = metadata.date.split(' ')[0];
const date = new Date(dateStr);
formattedDate = date.toLocaleDateString('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric'
});
isoDate = dateStr;
} catch (e) {
console.error(`Error parsing date for ${file}:`, e);
}
// Parse tags
let tags = [];
if (metadata.tags) {
// Remove square brackets and split by commas
tags = metadata.tags.replace(/[\[\]]/g, '').split(',').map(t => t.trim().replace(/"/g, ''));
}
posts.push({
title: metadata.title?.replace(/"/g, '') || 'Untitled',
date: formattedDate,
isoDate,
summary,
tags,
url: `/content/posts/${path.basename(file, '.md')}.html`
});
}
}
// Sort posts by date (newest first)
posts.sort((a, b) => new Date(b.isoDate) - new Date(a.isoDate));
// Read index.html
let indexHtml = await fs.promises.readFile(indexPath, 'utf8');
// Create the HTML for blog posts
const postsHtml = posts.map(post => `
<article class="bg-base-darker p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors">
<div class="flex flex-wrap items-center gap-2 text-accent-yellow text-sm mb-2 font-bold">
<span>Tech</span>
${post.tags.map(tag => `<span>•</span><span>${tag}</span>`).join('')}
<span>•</span>
<time datetime="${post.isoDate}">${post.date}</time>
</div>
<h3 class="text-xl font-serif font-bold text-accent-yellow mb-3">
<a href="${post.url}" class="hover:text-accent-cyan transition-colors">
${post.title}
</a>
</h3>
<p class="text-palenight-100 mb-4">${post.summary}</p>
<div class="flex flex-wrap gap-2">
${post.tags.map(tag => `<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">${tag}</span>`).join('')}
</div>
</article>
`).join('\n');
// Find the blog posts section and replace its content
const blogSectionStart = indexHtml.indexOf('<div class="grid gap-8 md:grid-cols-2">');
const blogSectionEnd = indexHtml.indexOf('</div><!-- End blog posts -->') + '</div><!-- End blog posts -->'.length;
if (blogSectionStart === -1 || blogSectionEnd === -1) {
console.error('Could not find blog posts section in index.html');
return;
}
// Replace the content between the markers
indexHtml = indexHtml.substring(0, blogSectionStart) +
'<div class="grid gap-8 md:grid-cols-2">\n' +
postsHtml + '\n' +
' </div><!-- End blog posts -->' +
indexHtml.substring(blogSectionEnd);
// Write the updated index.html
await fs.promises.writeFile(indexPath, indexHtml);
console.log('Successfully updated index.html with blog post summaries');
} catch (error) {
console.error('Error updating index.html:', error);
throw error;
}
}
// Export functions
module.exports = {
convertMarkdownToHtml,
updateIndexWithSummaries
};
// If running from command line
if (require.main === module) {
const mdFilePath = process.argv[2];
const outputPath = process.argv[3];
if (!mdFilePath) {
console.error('Please provide a markdown file path');
process.exit(1);
}
convertMarkdownToHtml(mdFilePath, outputPath);
}
const { marked } = require('marked');
const fs = require('fs');
const path = require('path');
const cheerio = require('cheerio');
// Configure marked options
const options = {
headerIds: true,
gfm: true
};
// Footer template
const footer = `
<footer class="bg-base-darker text-palenight-200 py-12 border-t border-palenight-400/20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<p class="text-palenight-300">&copy; 2024 Glenn Thompson. All rights reserved.</p>
<div class="webring-text mt-6">
<p class="text-palenight-300">I am part of the <a href="https://systemcrafters.net" target="_blank" class="text-accent-blue hover:text-accent-cyan">System Crafters</a> webring:</p>
</div>
<div class="craftering mt-2 flex items-center justify-center gap-4 text-accent-blue">
<a href="https://craftering.systemcrafters.net/@glenneth/previous" class="hover:text-accent-cyan">Previous</a>
<a href="https://craftering.systemcrafters.net/@glenneth" class="hover:text-accent-cyan">Random</a>
<a href="https://craftering.systemcrafters.net/@glenneth/next" class="hover:text-accent-cyan">Next</a>
</div>
<p class="text-palenight-300 mt-2">
<a href="mailto:glenn@glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenn@glenneth.org</a> |
<a href="https://glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenneth.org</a>
</p>
</div>
</div>
</footer>
</body>
</html>`;
// Function to convert markdown to HTML
async function convertMarkdownToHtml(mdFilePath, outputPath) {
try {
// Read markdown file
const markdown = await fs.promises.readFile(mdFilePath, 'utf8');
// Extract metadata from markdown (assuming front matter)
const metadata = {};
const content = markdown.replace(/^---\n([\s\S]*?)\n---\n/, (_, frontMatter) => {
frontMatter.split('\n').forEach(line => {
const [key, ...valueParts] = line.split(':');
if (key && valueParts.length > 0) {
metadata[key.trim()] = valueParts.join(':').trim();
}
});
return '';
});
// Configure marked options for proper heading rendering
const markedOptions = {
headerIds: true,
gfm: true,
breaks: true,
pedantic: false,
smartLists: true,
smartypants: true
};
// Convert markdown to HTML
const articleContent = marked.parse(content, markedOptions);
// Calculate read time (rough estimate: 200 words per minute)
const wordCount = content.trim().split(/\s+/).length;
const readTime = Math.ceil(wordCount / 200);
// Create full HTML document
const html = `<!DOCTYPE html>
<html lang="en" class="bg-base-bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="${metadata.description || ''}">
<meta property="og:title" content="${metadata.title || 'Blog Post'}">
<meta property="og:description" content="${metadata.description || ''}">
<meta property="og:url" content="https://glenneth.org${mdFilePath.replace(/\.md$/, '')}">
<title>${metadata.title || 'Blog Post'} - Glenn Thompson</title>
<link rel="alternate" type="application/rss+xml" title="Glenn Thompson's Blog" href="/feed.xml" />
<link href="/dist/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
.prose-palenight {
--tw-prose-body: #bfc7d5;
--tw-prose-headings: #ffd580;
--tw-prose-links: #82aaff;
--tw-prose-code: #c792ea;
--tw-prose-pre-bg: #1b1e2b;
}
.prose h2 {
color: var(--tw-prose-headings);
font-family: Merriweather, serif;
font-weight: 700;
font-size: 1.5rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.prose p {
margin-bottom: 1rem;
line-height: 1.625;
}
.prose a {
color: var(--tw-prose-links);
text-decoration: none;
}
.prose a:hover {
color: #89ddff;
}
.prose code {
color: var(--tw-prose-code);
font-family: 'JetBrains Mono', monospace;
}
.prose pre {
background-color: var(--tw-prose-pre-bg);
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
margin-bottom: 1rem;
}
.prose ul, .prose ol {
margin-top: 0.5rem;
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.prose ul {
list-style-type: disc;
}
.prose ol {
list-style-type: decimal;
}
</style>
</head>
<body class="bg-base-bg text-palenight-50">
<nav class="bg-base-darker/80 backdrop-blur-sm shadow-sm border-b border-palenight-400/20 mb-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="/" class="text-accent-yellow font-serif text-xl font-bold">Glenn Thompson</a>
<div class="flex items-center gap-2 text-accent-yellow text-sm font-bold">
<span>${metadata.tags || 'Tech'}</span>
<span>•</span>
<time datetime="${metadata.date}">${new Date(metadata.date).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })}</time>
<span>•</span>
<span>${readTime} min read</span>
</div>
</div>
</div>
</nav>
<main class="pt-24 pb-16 px-4">
<div class="max-w-4xl mx-auto">
<div class="content text-palenight-100 space-y-6">
<header class="mb-8">
<h1 class="text-4xl font-serif font-bold text-accent-yellow">${metadata.title || 'Blog Post'}</h1>
<div class="flex items-center gap-4 text-palenight-300 mt-4">
<time datetime="${metadata.date || ''}">${metadata.date || ''}</time>
<span>•</span>
<span>${readTime} min read</span>
<span>•</span>
<span>By ${metadata.author || 'Glenn Thompson'}</span>
</div>
${metadata.tags ? `
<div class="flex flex-wrap gap-2 mt-4">
${metadata.tags.split(',').map(tag =>
`<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">${tag.trim()}</span>`
).join('')}
</div>` : ''}
</header>
<article class="prose prose-palenight max-w-none">
${articleContent}
</article>
</div>
</div>
</main>${footer}`;
// Write HTML file
const htmlPath = outputPath || mdFilePath.replace('.md', '.html');
await fs.promises.writeFile(htmlPath, html);
console.log(`Converted ${mdFilePath} to ${htmlPath}`);
} catch (error) {
console.error('Error converting markdown to HTML:', error);
process.exit(1);
}
}
// Function to extract summary from markdown content
function extractSummary(content, maxLength = 200) {
// Remove frontmatter
const contentWithoutFrontmatter = content.replace(/^---\n[\s\S]*?\n---\n/, '');
// Parse the markdown to HTML
const html = marked.parse(contentWithoutFrontmatter);
// Use cheerio to extract text from the first paragraph
const $ = cheerio.load(html);
const firstParagraph = $('p').first().text();
// Truncate to maxLength and add ellipsis if needed
if (firstParagraph.length <= maxLength) {
return firstParagraph;
}
return firstParagraph.substring(0, maxLength).trim() + '...';
}
// Function to update index.html with blog post summaries
async function updateIndexWithSummaries() {
try {
const postsDir = path.join(process.cwd(), 'content', 'posts');
const indexPath = path.join(process.cwd(), 'index.html');
// Read all markdown files
const files = await fs.promises.readdir(postsDir);
const posts = [];
for (const file of files) {
if (file.endsWith('.md')) {
const filePath = path.join(postsDir, file);
const content = await fs.promises.readFile(filePath, 'utf8');
// Extract metadata
const metadata = {};
content.replace(/^---\n([\s\S]*?)\n---\n/, (_, frontMatter) => {
frontMatter.split('\n').forEach(line => {
const [key, ...valueParts] = line.split(':');
if (key && valueParts.length > 0) {
metadata[key.trim()] = valueParts.join(':').trim();
}
});
return '';
});
// Extract summary
const summary = extractSummary(content);
// Parse and format the date
let formattedDate = '';
let isoDate = '';
try {
// Handle date formats like "2024-04-08 16:50" or "2024-04-08"
const dateStr = metadata.date.split(' ')[0];
const date = new Date(dateStr);
formattedDate = date.toLocaleDateString('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric'
});
isoDate = dateStr;
} catch (e) {
console.error(`Error parsing date for ${file}:`, e);
}
// Parse tags
let tags = [];
if (metadata.tags) {
// Remove square brackets and split by commas
tags = metadata.tags.replace(/[\[\]]/g, '').split(',').map(t => t.trim().replace(/"/g, ''));
}
posts.push({
title: metadata.title?.replace(/"/g, '') || 'Untitled',
date: formattedDate,
isoDate,
summary,
tags,
url: `/content/posts/${path.basename(file, '.md')}.html`
});
}
}
// Sort posts by date (newest first)
posts.sort((a, b) => new Date(b.isoDate) - new Date(a.isoDate));
// Read index.html
let indexHtml = await fs.promises.readFile(indexPath, 'utf8');
// Create the HTML for blog posts
const postsHtml = posts.map(post => `
<article class="bg-base-darker p-6 rounded-lg shadow-lg border border-palenight-400/20 hover:border-accent-purple/40 transition-colors">
<div class="flex flex-wrap items-center gap-2 text-accent-yellow text-sm mb-2 font-bold">
<span>Tech</span>
${post.tags.map(tag => `<span>•</span><span>${tag}</span>`).join('')}
<span>•</span>
<time datetime="${post.isoDate}">${post.date}</time>
</div>
<h3 class="text-xl font-serif font-bold text-accent-yellow mb-3">
<a href="${post.url}" class="hover:text-accent-cyan transition-colors">
${post.title}
</a>
</h3>
<p class="text-palenight-100 mb-4">${post.summary}</p>
<div class="flex flex-wrap gap-2">
${post.tags.map(tag => `<span class="text-accent-yellow px-2 py-1 rounded-full bg-base-bg text-xs">${tag}</span>`).join('')}
</div>
</article>
`).join('\n');
// Find the blog posts section and replace its content
const blogSectionStart = indexHtml.indexOf('<div class="grid gap-8 md:grid-cols-2">');
const blogSectionEnd = indexHtml.indexOf('</div><!-- End blog posts -->') + '</div><!-- End blog posts -->'.length;
if (blogSectionStart === -1 || blogSectionEnd === -1) {
console.error('Could not find blog posts section in index.html');
return;
}
// Replace the content between the markers
indexHtml = indexHtml.substring(0, blogSectionStart) +
'<div class="grid gap-8 md:grid-cols-2">\n' +
postsHtml + '\n' +
' </div><!-- End blog posts -->' +
indexHtml.substring(blogSectionEnd);
// Write the updated index.html
await fs.promises.writeFile(indexPath, indexHtml);
console.log('Successfully updated index.html with blog post summaries');
} catch (error) {
console.error('Error updating index.html:', error);
throw error;
}
}
// Export functions
module.exports = {
convertMarkdownToHtml,
updateIndexWithSummaries
};
// If running from command line
if (require.main === module) {
const mdFilePath = process.argv[2];
const outputPath = process.argv[3];
if (!mdFilePath) {
console.error('Please provide a markdown file path');
process.exit(1);
}
convertMarkdownToHtml(mdFilePath, outputPath);
}

246
tailwind.config.js
View File

@ -1,123 +1,123 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./index.html",
"./src/**/*.{html,js}"
],
theme: {
extend: {
colors: {
base: {
bg: '#292D3E', // Main background
darker: '#2A3446', // Code background
lighter: '#2C3B4C', // Accent background
},
palenight: {
50: '#A6ACCD', // Main text
100: '#A6ACCD', // Light text
200: '#82AAFF', // Links
300: '#4A596E', // Table borders
400: '#3D4857', // Borders
500: '#2E3C4E', // Blockquote background
600: '#2C3B4C', // Accent background
700: '#2A3446', // Code background
800: '#283544', // Table row background
900: '#1c1f24', // Dark mode background
},
accent: {
purple: '#C792EA', // Headings
blue: '#82AAFF', // Links
yellow: '#FFCB6B', // Link hover (dark mode)
cyan: '#C792EA', // Link hover
}
},
fontFamily: {
sans: ['monospace', 'system-ui'],
serif: ['monospace', 'serif'],
mono: ['monospace'],
},
typography: {
DEFAULT: {
css: {
maxWidth: 'none',
color: '#A6ACCD',
fontSize: '1.25rem',
lineHeight: '1.4',
a: {
color: '#82AAFF',
textDecoration: 'none',
'&:hover': {
color: '#C792EA',
},
},
strong: {
color: '#C792EA',
},
h1: {
color: '#C792EA',
fontFamily: 'monospace',
},
h2: {
color: '#C792EA',
fontFamily: 'monospace',
},
h3: {
color: '#C792EA',
fontFamily: 'monospace',
},
h4: {
color: '#C792EA',
fontFamily: 'monospace',
},
blockquote: {
color: '#A6ACCD',
borderLeftColor: '#3D4857',
backgroundColor: '#2E3C4E',
fontStyle: 'italic',
borderRadius: '5px',
},
code: {
color: '#C792EA',
backgroundColor: '#2A3446',
fontFamily: 'monospace',
borderRadius: '5px',
padding: '0.2em',
},
'code::before': {
content: '""',
},
'code::after': {
content: '""',
},
pre: {
backgroundColor: '#2A3446',
color: '#A6ACCD',
fontFamily: 'monospace',
borderRadius: '5px',
},
ul: {
listStyleType: 'upper-roman',
},
table: {
backgroundColor: '#283544',
borderColor: '#4A596E',
},
th: {
backgroundColor: '#374A62',
color: '#C792EA',
},
'tr:nth-child(even)': {
backgroundColor: '#2C3B4C',
},
'tr:hover': {
backgroundColor: '#374A62',
},
},
},
},
},
},
plugins: [
require('@tailwindcss/typography'),
],
}
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./index.html",
"./src/**/*.{html,js}"
],
theme: {
extend: {
colors: {
base: {
bg: '#292D3E', // Main background
darker: '#2A3446', // Code background
lighter: '#2C3B4C', // Accent background
},
palenight: {
50: '#A6ACCD', // Main text
100: '#A6ACCD', // Light text
200: '#82AAFF', // Links
300: '#4A596E', // Table borders
400: '#3D4857', // Borders
500: '#2E3C4E', // Blockquote background
600: '#2C3B4C', // Accent background
700: '#2A3446', // Code background
800: '#283544', // Table row background
900: '#1c1f24', // Dark mode background
},
accent: {
purple: '#C792EA', // Headings
blue: '#82AAFF', // Links
yellow: '#FFCB6B', // Link hover (dark mode)
cyan: '#C792EA', // Link hover
}
},
fontFamily: {
sans: ['monospace', 'system-ui'],
serif: ['monospace', 'serif'],
mono: ['monospace'],
},
typography: {
DEFAULT: {
css: {
maxWidth: 'none',
color: '#A6ACCD',
fontSize: '1.25rem',
lineHeight: '1.4',
a: {
color: '#82AAFF',
textDecoration: 'none',
'&:hover': {
color: '#C792EA',
},
},
strong: {
color: '#C792EA',
},
h1: {
color: '#C792EA',
fontFamily: 'monospace',
},
h2: {
color: '#C792EA',
fontFamily: 'monospace',
},
h3: {
color: '#C792EA',
fontFamily: 'monospace',
},
h4: {
color: '#C792EA',
fontFamily: 'monospace',
},
blockquote: {
color: '#A6ACCD',
borderLeftColor: '#3D4857',
backgroundColor: '#2E3C4E',
fontStyle: 'italic',
borderRadius: '5px',
},
code: {
color: '#C792EA',
backgroundColor: '#2A3446',
fontFamily: 'monospace',
borderRadius: '5px',
padding: '0.2em',
},
'code::before': {
content: '""',
},
'code::after': {
content: '""',
},
pre: {
backgroundColor: '#2A3446',
color: '#A6ACCD',
fontFamily: 'monospace',
borderRadius: '5px',
},
ul: {
listStyleType: 'upper-roman',
},
table: {
backgroundColor: '#283544',
borderColor: '#4A596E',
},
th: {
backgroundColor: '#374A62',
color: '#C792EA',
},
'tr:nth-child(even)': {
backgroundColor: '#2C3B4C',
},
'tr:hover': {
backgroundColor: '#374A62',
},
},
},
},
},
},
plugins: [
require('@tailwindcss/typography'),
],
}