Compare commits

..

No commits in common. "5de454d1c3e7ac5117a279c6eaf16c6079c4b4ed" and "14d2a46b3f64f501a21472e23a49f19434b9d4d3" have entirely different histories.

22 changed files with 2262 additions and 697 deletions

1
.gitignore vendored
View File

@ -11,3 +11,4 @@ Gemfile.lock
# JavaScript
node_modules
package-lock.json

18
Gemfile
View File

@ -1,20 +1,8 @@
source "https://rubygems.org"
gem "jekyll", "~> 4.3.3"
gem "jekyll-postcss"
gem "jekyll-feed"
gem "jekyll-sitemap"
gem "jekyll-seo-tag"
gem "webrick", "~> 1.8"
gem "csv"
gem "base64"
gem "bigdecimal"
gem "stringio"
gem "json"
gem "racc"
gem "psych"
gem "io-console"
gem "rss"
gem "jekyll", "~> 4"
gem "webrick", "~> 1.7"
group :jekyll_plugins do
gem "jekyll-postcss"
end

View File

@ -7,12 +7,9 @@ You want to run `jekyll new your-site --blank` and add
Dont.
Fork this repo instead.
[Responsive demo](https://jekyll-tailwind.netlify.app/)
(resize your window and watch it adjust)
[Responsive demo](https://jekyll-tailwind.netlify.app/) (resize your window and watch it adjust)
Check out the accompanying
[blog post](https://stefcoetzee.com/2021/07/28/jekyll-tailwind-starter-repo)
for more.
Check out the accompanying [blog post](https://stefcoetzee.com/2021/07/28/jekyll-tailwind-starter-repo).
[![Netlify Status](https://api.netlify.com/api/v1/badges/a22ca4cf-cb1f-4bf3-9fbc-2833226e9b8e/deploy-status)](https://app.netlify.com/sites/jekyll-tailwind/deploys)
@ -29,20 +26,27 @@ bin/setup
### Development
```bash
# Start a live-reload server at http://localhost:4000
# Make all Tailwind utility classes available for development.
bin/build-dev
# Start a live-reload server at http://localhost:4000, skipping file with Tailwind
# @import statements during regeneration.
bin/start
```
### Production
Note: Delete `.site` and its contents to see the production build output.
Delete `.site` and its contents to see the production build output.
```bash
# Purge unused classes.
bin/build-prod
```
## Credit
Thanks to [@shafy](https://github.com/shafy) for sharing the two config-file
approach [here](https://canolcer.com/post/jekyll-and-tailwind/).
Thanks to [@joemasilotti](https://github.com/joemasilotti) for sharing his build
scripts [here](https://github.com/joemasilotti/masilotti.com/tree/main/bin).

View File

@ -1,53 +1,13 @@
url: "https://hackmarine.com" # the base hostname & protocol for your site
url: "" # the base hostname & protocol for your site, e.g. http://example.com
baseurl: "" # the subpath of your site, e.g. /blog
title: "Hackmarine" # the name of your site
description: "Open source technology solutions for sailboats and liveaboards"
email: "contact@hackmarine.com"
author: "Hackmarine Team"
title: "Jekyll with Tailwind" # the name of your site, e.g. ACME Corp.
# Build settings
markdown: kramdown
permalink: pretty
# Collections
collections:
projects:
output: true
permalink: /projects/:path/
# Default front matter
defaults:
-
scope:
path: ""
type: "posts"
values:
layout: "post"
author: "Hackmarine Team"
-
scope:
path: ""
type: "projects"
values:
layout: "project"
author: "Hackmarine Team"
# Plugins
plugins:
- jekyll-postcss
- jekyll-feed
- jekyll-sitemap
- jekyll-seo-tag
# Sass settings
sass:
sourcemap: never
# PostCSS settings
postcss:
cache: false
# Exclude files from processing
exclude:
- .gitignore
- bin
@ -55,10 +15,9 @@ exclude:
- package-lock.json
- postcss.config.js
- README.md
- Gemfile
- Gemfile.lock
- assets/css/tailwind.scss
# Keep files in _site
# files Jekyll should not delete from .site
keep_files:
- assets/css/tailwind.css
- assets/css/tailwind.css.map

2
_config_tailwind.yml Normal file
View File

@ -0,0 +1,2 @@
include:
- assets/css/tailwind.scss

View File

@ -1,59 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<html lang="{{ site.lang | default: "en-US" }}">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<title>{{ page.title }} - {{ site.title }}</title>
<meta name="description" content="{{ page.description | default: site.description }}">
<link rel="stylesheet" href="{{ '/assets/css/tailwind.css' | relative_url }}">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
{% seo %}
{% feed_meta %}
<link rel="stylesheet" href="{{ "/assets/css/tailwind.css" | relative_url }}">
<link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}">
</head>
<body class="bg-slate-900 text-slate-100 font-mono min-h-screen flex flex-col">
<header class="bg-slate-800 border-b border-slate-700">
<nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex">
<div class="flex-shrink-0 flex items-center">
<a href="{{ '/' | relative_url }}" class="text-2xl font-bold text-cyan-400 hover:text-cyan-300">
hackmarine
</a>
</div>
<div class="hidden sm:ml-6 sm:flex sm:space-x-8">
<a href="{{ '/' | relative_url }}" class="text-slate-300 hover:text-cyan-400 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-cyan-400 text-sm font-medium">
~/home
</a>
<a href="{{ '/projects' | relative_url }}" class="text-slate-300 hover:text-cyan-400 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-cyan-400 text-sm font-medium">
~/projects
</a>
<a href="{{ '/blog' | relative_url }}" class="text-slate-300 hover:text-cyan-400 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-cyan-400 text-sm font-medium">
~/blog
</a>
<a href="{{ '/about' | relative_url }}" class="text-slate-300 hover:text-cyan-400 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-cyan-400 text-sm font-medium">
~/about
</a>
</div>
</div>
</div>
</nav>
</header>
<main class="flex-grow max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div class="prose prose-invert max-w-7xl">
{{ content }}
</div>
</main>
<footer class="bg-slate-800 border-t border-slate-700 mt-auto">
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
<div class="text-center text-slate-400 text-sm">
<p class="font-mono">// All content is open source and available under MIT License</p>
<p class="mt-2 text-xs">© {{ site.time | date: '%Y' }} hackmarine</p>
</div>
</div>
</footer>
<body>
{{ content }}
</body>
</html>

View File

@ -1,40 +0,0 @@
---
layout: default
---
<article class="prose max-w-none">
<header class="mb-8">
<h1 class="text-4xl font-bold text-gray-900 mb-2">{{ page.title }}</h1>
<div class="flex items-center text-sm text-gray-500">
<time datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date: "%B %-d, %Y" }}</time>
<span class="mx-2"></span>
<span>{{ page.author }}</span>
{% if page.categories %}
<span class="mx-2"></span>
<div class="flex space-x-2">
{% for category in page.categories %}
<a href="{{ '/categories/' | append: category | relative_url }}" class="text-blue-600 hover:text-blue-800">
{{ category }}
</a>
{% endfor %}
</div>
{% endif %}
</div>
</header>
<div class="content">
{{ content }}
</div>
{% if page.tags %}
<footer class="mt-8 pt-4 border-t border-gray-200">
<div class="flex flex-wrap gap-2">
{% for tag in page.tags %}
<a href="{{ '/tags/' | append: tag | relative_url }}" class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm hover:bg-gray-200">
#{{ tag }}
</a>
{% endfor %}
</div>
</footer>
{% endif %}
</article>

View File

@ -1,84 +0,0 @@
---
layout: default
---
<article class="prose max-w-none">
<header class="mb-8">
<h1 class="text-4xl font-bold text-gray-900 mb-2">{{ page.title }}</h1>
<div class="flex items-center text-sm text-gray-500">
<time datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date: "%B %-d, %Y" }}</time>
<span class="mx-2"></span>
<span>{{ page.author }}</span>
{% if page.categories %}
<span class="mx-2"></span>
<div class="flex space-x-2">
{% for category in page.categories %}
<a href="{{ '/categories/' | append: category | relative_url }}" class="text-blue-600 hover:text-blue-800">
{{ category }}
</a>
{% endfor %}
</div>
{% endif %}
</div>
</header>
{% if page.image %}
<div class="mb-8">
<img src="{{ page.image | relative_url }}" alt="{{ page.title }}" class="rounded-lg shadow-lg">
</div>
{% endif %}
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
<div class="md:col-span-2">
<div class="content">
{{ content }}
</div>
</div>
<div class="md:col-span-1">
<div class="bg-gray-50 p-6 rounded-lg">
<h3 class="text-lg font-semibold mb-4">Project Details</h3>
{% if page.components %}
<div class="mb-4">
<h4 class="text-sm font-medium text-gray-500 mb-2">Components</h4>
<ul class="text-sm">
{% for component in page.components %}
<li class="mb-1">{{ component }}</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% if page.difficulty %}
<div class="mb-4">
<h4 class="text-sm font-medium text-gray-500 mb-2">Difficulty</h4>
<p class="text-sm">{{ page.difficulty }}</p>
</div>
{% endif %}
{% if page.cost %}
<div class="mb-4">
<h4 class="text-sm font-medium text-gray-500 mb-2">Estimated Cost</h4>
<p class="text-sm">{{ page.cost }}</p>
</div>
{% endif %}
{% if page.github %}
<div>
<a href="{{ page.github }}" class="text-blue-600 hover:text-blue-800 text-sm" target="_blank" rel="noopener">
View on GitHub →
</a>
</div>
{% endif %}
</div>
</div>
</div>
{% if page.tags %}
<footer class="mt-8 pt-4 border-t border-gray-200">
<div class="flex flex-wrap gap-2">
{% for tag in page.tags %}
<a href="{{ '/tags/' | append: tag | relative_url }}" class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm hover:bg-gray-200">
#{{ tag }}
</a>
{% endfor %}
</div>
</footer>
{% endif %}
</article>

View File

@ -1,33 +0,0 @@
---
layout: post
title: "Welcome to Hackmarine"
date: 2024-04-23
author: "Hackmarine Team"
categories: [announcements]
tags: [open-source, sailing, technology]
image: /assets/images/welcome.jpg
---
Welcome to Hackmarine, your new resource for open-source technology solutions for sailboats and liveaboards. Our mission is to provide accessible, affordable, and open-source alternatives to expensive commercial marine technology.
## What to Expect
At Hackmarine, you'll find:
- Detailed project guides for DIY marine technology
- Open-source hardware and software solutions
- 3D printable designs for custom cases and mounts
- Community-driven development and improvements
- Budget-friendly alternatives to commercial products
## Our First Project
Coming soon, we'll be releasing our first project: an open-source anchor alarm system. This will include:
- ESP32-based hardware design
- Custom PCB layout
- 3D printable waterproof case
- Complete software solution
- Step-by-step assembly guide
Stay tuned for more updates and project releases. We're excited to build this community of tech-savvy sailors and liveaboards!

View File

@ -1,66 +0,0 @@
---
layout: project
title: "Open Source Anchor Alarm"
date: 2024-04-23
author: "Hackmarine Team"
categories: [hardware]
tags: [esp32, gps, anchor-alarm, 3d-printing]
image: /assets/images/anchor-alarm.jpg
components:
- ESP32 Development Board
- TFT SPI Display (2.4")
- NEO-6M GPS Module
- 3D Printed Waterproof Case
- LiPo Battery (2000mAh)
difficulty: "Intermediate"
cost: "~$50"
github: "https://github.com/hackmarine/anchor-alarm"
---
# Open Source Anchor Alarm
A DIY anchor alarm system that helps you monitor your boat's position while at anchor. This project combines an ESP32 microcontroller with a GPS module and TFT display to create a reliable and affordable anchor alarm system.
## Features
- Real-time GPS position monitoring
- Customizable anchor radius
- Visual and audible alarms
- Battery-powered operation
- Waterproof 3D printed case
- Open source hardware and software
## Project Overview
This anchor alarm system is designed to be:
- Affordable (under $50 in components)
- Easy to build with basic soldering skills
- Reliable in marine environments
- Customizable to your needs
## Technical Details
The system uses:
- ESP32 for processing and WiFi capabilities
- NEO-6M GPS module for accurate positioning
- TFT display for user interface
- Custom PCB for clean assembly
- 3D printed waterproof case
## Getting Started
The complete project documentation will be available on our documentation site at docs.hackmarine.com. This will include:
- Detailed assembly instructions
- PCB design files
- 3D printable case files
- Software installation guide
- Calibration procedures
## Future Improvements
We're planning to add:
- Mobile app integration
- Cloud logging
- Weather data integration
- Solar charging capability
- Community-driven features

View File

@ -1,49 +0,0 @@
---
layout: default
title: About Hackmarine
---
# About Hackmarine
Hackmarine is an open-source initiative dedicated to bringing affordable, DIY technology solutions to the sailing and liveaboard community. We believe that modern marine technology should be accessible to everyone, not just those who can afford expensive commercial solutions.
## Our Mission
Our mission is to:
- Create open-source alternatives to expensive marine technology
- Share knowledge and empower the sailing community
- Build a community of tech-savvy sailors and makers
- Promote sustainable and affordable solutions for life at sea
## What We Do
We develop and share:
- Open-source hardware projects
- DIY marine electronics
- 3D printable designs for marine applications
- Detailed build guides and documentation
- Software solutions for marine applications
## Why Open Source?
We believe in the power of open source to:
- Make marine technology more accessible
- Enable community-driven innovation
- Allow customization for specific needs
- Reduce costs through shared knowledge
- Create better, more reliable solutions through collaboration
## Get Involved
There are many ways to get involved with Hackmarine:
- Contribute to our projects on GitHub
- Share your own marine DIY projects
- Join our community discussions
- Test and improve our designs
- Help with documentation and guides
## Contact Us
Have questions or want to contribute? Reach out to us at:
- Email: [contact@hackmarine.com](mailto:contact@hackmarine.com)
- GitHub: [github.com/hackmarine](https://github.com/hackmarine)

2
assets/css/main.scss Normal file
View File

@ -0,0 +1,2 @@
---
---

View File

@ -1,3 +1,3 @@
#!/bin/sh
bundle exec jekyll build --profile --config _config.yml
bundle exec jekyll build --profile --config _config.yml,_config_tailwind.yml

View File

@ -1,3 +1,3 @@
#!/bin/sh
JEKYLL_ENV=production bundle exec jekyll build --profile --config _config.yml
JEKYLL_ENV=production bundle exec jekyll build --profile --config _config.yml,_config_tailwind.yml

View File

@ -1,67 +0,0 @@
---
layout: default
title: Blog
---
<div class="max-w-4xl mx-auto">
<h1 class="text-4xl font-bold text-cyan-400 mb-8">// Blog Posts</h1>
<div class="space-y-6">
{% for post in site.posts %}
<div class="ncurses-box">
<div class="ncurses-header">
<span class="text-cyan-400">[{{ post.date | date: "%Y-%m-%d" }}]</span>
<span class="text-slate-400">//</span>
<span class="text-cyan-400">{{ post.title }}</span>
</div>
<div class="ncurses-content">
<div class="flex items-center text-sm text-slate-400 mb-4">
{% if post.categories %}
<div class="flex space-x-2">
{% for category in post.categories %}
<a href="{{ '/categories/' | append: category | relative_url }}" class="text-cyan-400 hover:text-cyan-300">
{{ category }}
</a>
{% unless forloop.last %}, {% endunless %}
{% endfor %}
</div>
{% endif %}
</div>
{% if post.description %}
<p class="text-slate-300 mb-4">{{ post.description }}</p>
{% endif %}
<div class="flex items-center space-x-4">
<a href="{{ post.url | relative_url }}" class="text-cyan-400 hover:text-cyan-300">
$ read more →
</a>
{% if post.tags %}
<div class="flex flex-wrap gap-2">
{% for tag in post.tags %}
<span class="px-2 py-1 bg-slate-800 text-sm text-slate-400 rounded">#{{ tag }}</span>
{% endfor %}
</div>
{% endif %}
</div>
</div>
</div>
{% endfor %}
</div>
</div>
<style>
.ncurses-box {
@apply border border-slate-700 bg-slate-800 rounded;
box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.1);
}
.ncurses-header {
@apply border-b border-slate-700 px-4 py-2 flex items-center space-x-2;
background: linear-gradient(to right, rgba(56, 189, 248, 0.1), transparent);
}
.ncurses-content {
@apply p-4;
}
</style>

View File

@ -3,45 +3,21 @@ layout: default
title: "It's alive!"
---
<div class="flex flex-col items-center min-h-screen text-gray-700 ">
<div class="flex items-center justify-center flex-grow">
<div class="w-5/6 sm:px-0 sm:w-2/3 md:w-1/2 2xl:w-1/3">
<div class="flex justify-start">
<div class="pr-1 font-serif text-2xl font-extrabold md:font-bold sm:text-5xl xl:text-7xl sm:pr-2 xl:pr-3">
</div>
<div class="text-xl sm:text-2xl xl:text-4xl md:font-medium">
What gets us into trouble is not what we don't know.
It's what we know for sure that just ain't so.
</div>
<div class="h-screen flex items-center justify-center">
<div class="w-5/6 sm:px-0 sm:w-2/3 md:w-1/2 2xl:w-1/3 text-gray-700">
<div class="flex justify-start">
<div class="font-serif font-extrabold md:font-bold text-2xl sm:text-5xl xl:text-7xl pr-1 sm:pr-2 xl:pr-3">
</div>
<div class="flex justify-end">
<span class="font-serif text-lg italic sm:text-xl xl:text-3xl md:pt-2">
— Mark Twain
</span>
<div class="text-xl sm:text-2xl xl:text-4xl md:font-medium">
What gets us into trouble is not what we don't know.
It's what we know for sure that just ain't so.
</div>
</div>
</div>
<div class="py-2 text-sm md:text-base">
<a href="https://github.com/stefcoetzee/jekyll-tailwind"
class="flex items-center space-x-1 hover:text-blue-700 hover:underline">
<svg class="w-4 h-4 fill-current" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205
11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422
18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729
1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305
3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93
0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0
0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006
2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24
2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475
5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0
.315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
</svg>
<span>
View on GitHub
<div class="flex justify-end">
<span class="font-serif italic text-lg sm:text-xl xl:text-3xl md:pt-2">
— Mark Twain
</span>
</a>
</div>
</div>
</div>

2314
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -2,10 +2,11 @@
"dependencies": {
"autoprefixer": "^10.3.1",
"postcss": "^8.3.5",
"postcss-import": "^14.0.2"
"postcss-import": "^14.0.2",
"postcss-scss": "^4.0.0"
},
"devDependencies": {
"cssnano": "^5.0.6",
"tailwindcss": "^3.0.10"
"tailwindcss": "^2.2.4"
}
}

View File

@ -1,9 +1,10 @@
module.exports = {
plugins: [
parser: 'postcss-scss',
plugins: [
require('postcss-import'),
require('tailwindcss'),
require("autoprefixer"), // example of plugin you might use
...(process.env.JEKYLL_ENV == "production" // example of only using a plugin in production
require("autoprefixer"), // example of plugin you might use
...(process.env.JEKYLL_ENV == "production" // example of only using a plugin in production
? [require("cssnano")({ preset: "default" })]
: [])
]

View File

@ -1,76 +0,0 @@
---
layout: default
title: Projects
---
<div class="max-w-7xl mx-auto">
<h1 class="text-4xl font-bold text-cyan-400 mb-8">// Open Source Marine Projects</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{% for project in site.projects %}
<div class="ncurses-box">
<div class="ncurses-header">
<span class="text-cyan-400">[{{ project.date | date: "%Y-%m-%d" }}]</span>
<span class="text-slate-400">//</span>
<span class="text-cyan-400">{{ project.title }}</span>
</div>
<div class="ncurses-content">
{% if project.image %}
<div class="mb-4">
<img src="{{ project.image | relative_url }}" alt="{{ project.title }}" class="w-full h-48 object-cover rounded">
</div>
{% endif %}
{% if project.description %}
<p class="text-slate-300 mb-4">{{ project.description }}</p>
{% endif %}
<div class="flex items-center text-sm text-slate-400 mb-4">
{% if project.difficulty %}
<span class="mr-4">
<span class="text-cyan-400">Difficulty:</span> {{ project.difficulty }}
</span>
{% endif %}
{% if project.cost %}
<span>
<span class="text-cyan-400">Cost:</span> {{ project.cost }}
</span>
{% endif %}
</div>
{% if project.tags %}
<div class="flex flex-wrap gap-2 mb-4">
{% for tag in project.tags %}
<span class="px-2 py-1 bg-slate-900 text-sm text-slate-400 rounded">#{{ tag }}</span>
{% endfor %}
</div>
{% endif %}
{% if project.github %}
<div>
<a href="{{ project.github }}" class="text-cyan-400 hover:text-cyan-300 text-sm" target="_blank" rel="noopener">
$ view on github →
</a>
</div>
{% endif %}
</div>
</div>
{% endfor %}
</div>
</div>
<style>
.ncurses-box {
@apply border border-slate-700 bg-slate-800 rounded;
box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.1);
}
.ncurses-header {
@apply border-b border-slate-700 px-4 py-2 flex items-center space-x-2;
background: linear-gradient(to right, rgba(56, 189, 248, 0.1), transparent);
}
.ncurses-content {
@apply p-4;
}
</style>

View File

@ -1,10 +1,14 @@
module.exports = {
content:[
'./_includes/**/*.html',
'./_layouts/**/*.html',
'./_posts/*.md',
'./*.html',
],
purge: {
enabled: process.env.JEKYLL_ENV == "production",
content:[
'./_includes/**/*.html',
'./_layouts/**/*.html',
'./_posts/*.md',
'./*.html',
],
},
darkMode: false,
theme: {
extend: {}
},