twk95/11ty-site
Public Access
1
0
Fork 0
Code Actions Packages Activity

Tweaks

Browse Source
This commit is contained in:
Jesus Otero Lagunes
2025-08-06 14:07:07 -04:00
parent c1fa3e8863
commit 3f6a319565
8 changed files with 212 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
.eleventy.js
View File

@@ -1,4 +1,5 @@
module.exports = function(eleventyConfig) { module.exports = function(eleventyConfig) {
// Pass through static assets from the "src" directory // Pass through static assets from the "src" directory
eleventyConfig.addPassthroughCopy("src/css"); eleventyConfig.addPassthroughCopy("src/css");
eleventyConfig.addPassthroughCopy("src/js"); eleventyConfig.addPassthroughCopy("src/js");
@@ -16,6 +17,15 @@ module.exports = function(eleventyConfig) {
}); });
}); });
// Shortcode for creating a callout box
// This is a "paired shortcode" which means it has a start and end tag.
eleventyConfig.addPairedShortcode("callout", function(content, title) {
return `<div class="bg-blue-100 border-l-4 border-blue-500 text-blue-700 p-4" role="alert">
<p class="font-bold">${title}</p>
<p>${content}</p>
</div>`;
});
// Add a shortcode for the current year for the footer // Add a shortcode for the current year for the footer
eleventyConfig.addShortcode("year", () => `${new Date().getFullYear()}`); eleventyConfig.addShortcode("year", () => `${new Date().getFullYear()}`);

2
src/_data/site.json
View File

@@ -1,6 +1,6 @@
{ {
"author": { "author": {
"name": "Jesus Otero Lagunes", "name": "Jesus Network Solutions",
"email": "jesus@twk95.com", "email": "jesus@twk95.com",
"linkedinUrl": "https://linkedin.twk95.com" "linkedinUrl": "https://linkedin.twk95.com"
}, },

89
src/_includes/base.njk Normal file
View File

@@ -0,0 +1,89 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }}</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
}
.prose {
max-width: 65ch;
margin-left: auto;
margin-right: auto;
}
.prose h1, .prose h2, .prose h3 {
font-weight: 700;
}
.prose a {
color: #3b82f6;
text-decoration: none;
}
.prose a:hover {
text-decoration: underline;
}
.prose code {
background-color: #f3f4f6;
padding: 0.2em 0.4em;
margin: 0;
font-size: 85%;
border-radius: 3px;
}
.prose pre {
background-color: #1f2937;
color: #f9fafb;
padding: 1em;
border-radius: 0.5rem;
overflow-x: auto;
}
.prose pre code {
background-color: transparent;
padding: 0;
}
.prose blockquote {
border-left: 4px solid #d1d5db;
padding-left: 1em;
font-style: italic;
color: #6b7280;
}
.prose table {
width: 100%;
border-collapse: collapse;
}
.prose th, .prose td {
border: 1px solid #d1d5db;
padding: 0.5em;
}
.prose th {
background-color: #f3f4f6;
}
</style>
</head>
<body class="bg-gray-50 text-gray-800">
<!-- Header -->
<header class="bg-white shadow-sm">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
<h1 class="text-3xl font-bold text-gray-900">{{ title }}</h1>
<p class="text-gray-600 mt-1">A demonstration of what's possible with this powerful static site generator.</p>
</div>
</header>
<main class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div class="prose">
{{ content | safe }}
</div>
</main>
<!-- Footer -->
<footer class="bg-white mt-12">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-4 text-center text-gray-500">
<p>Created to showcase the power of <a href="https://www.11ty.dev/" target="_blank" class="text-blue-500 hover:underline">Eleventy</a>.</p>
</div>
</footer>
</body>
</html>

2
src/_includes/post.njk
View File

@@ -4,6 +4,6 @@ layout: "layout.njk"
<article class="prose prose-invert lg:prose-xl max-w-none"> <article class="prose prose-invert lg:prose-xl max-w-none">
<h1>{{ title }}</h1> <h1>{{ title }}</h1>
<p class="text-gray-400">Published on: {{ date | readableDate }}</p> <p class="text-gray-400">Published on: {{ date | readableDate }}</p>
<br/>
{{ content | safe }} {{ content | safe }}
</article> </article>

15
src/css/style.css
View File

@@ -52,3 +52,18 @@ body {
margin-right: 1rem; margin-right: 1rem;
color: #4299e1; color: #4299e1;
} }
article ul {
list-style-type: disc;
padding-left: 2rem; /* Adjust for indentation */
margin-bottom: 1rem;
}
article ol {
list-style-type: decimal;
padding-left: 2rem; /* Adjust for indentation */
margin-bottom: 1rem;
}
article li {
margin-bottom: 0.5rem;
}

15
src/posts/6-5-25.md
View File

@@ -1,15 +0,0 @@
---
title: "My First Blog Post"
date: "2025-08-05"
layout: "post.njk"
tags: "posts"
---
Welcome to my new blog! This is my very first post, written in Markdown.
Eleventy makes it easy to create content. You can use standard Markdown syntax.
- Like lists
- And more lists
Check back soon for more updates on networking, homelabbing, and technology!

11
src/posts/8-5-25.md Normal file
View File

@@ -0,0 +1,11 @@
---
title: "My First Blog Post"
date: "2025-08-05"
layout: "post.njk"
tags: "posts"
---
Welcome to my new blog! This is my very first post. This website was created with eleventy using a custom nodejs docker container, pretty cool huh??
Check back soon for more updates on networking, homelabbing, and technology!

85
src/posts/test.md Normal file
View File

@@ -0,0 +1,85 @@
---
title: "Second blog post"
date: "2025-08-06"
layout: "base.njk"
---
## Purpose
This post is moreso a feature showcase of what I can do with Markdown
## What is Eleventy?
Eleventy (or 11ty) is a simpler static site generator. It's written in JavaScript and transforms a directory of templates of various types into a folder of plain HTML files. It's known for its flexibility, speed, and the fact that it doesn't ship any client-side JavaScript by default.
***
## Markdown Features
Eleventy has excellent support for Markdown. Here are some examples of what you can do.
### Basic Formatting
You can use **bold text**, *italic text*, and even ***both***. You can also create links, like this one to the [official Eleventy website](https://www.11ty.dev/).
### Lists
* Unordered list item 1
* Unordered list item 2
* Nested item
1. Ordered list item 1
2. Ordered list item 2
### Code Blocks
You can include inline code like `<div>` within a sentence. For larger code blocks, you can use fenced code blocks with syntax highlighting:
```js
// This is a JavaScript code block
function greet(name) {
console.log(`Hello, ${name}!`);
}
greet('World');
```
### Tables
| Feature | Description |
| --------------- | ----------------------------------------------------------- |
| Templating | Supports over 10 different templating languages. |
| Data Cascade | Merge data from different sources to use in your templates. |
### Blockquotes
> "The web should be a platform for creativity and expression. Eleventy helps make that a reality."
### Markdown Plugins
You can extend Markdown's functionality with plugins. For example, with `markdown-it-emoji`, you can write things like :tada: and get 🎉.
***
## Templating and Data
Eleventy can use data from JSON or JavaScript files. Imagine you have a `_data/users.json` file. You could then use a templating language like Nunjucks within your Markdown file to loop through this data:
### Team Members:
<ul>
{%- for user in users -%}
<li><strong>{{ user.name }}</strong> - {{ user.role }}</li>
{%- endfor -%}
</ul>
***
## Shortcodes
Shortcodes are reusable snippets of content. You could create a shortcode for a callout box like this:
{% callout "Heads up!" %}
This is a custom callout box created with a shortcode. It's a great way to create reusable components.
{% endcallout %}
***
## Layouts
Layouts allow you to wrap your content in a parent template. For example, this entire page could be a Markdown file that uses a main layout file to provide the header, footer, and overall page structure. This avoids repeating the same HTML in every file.
In your Markdown file's front matter, you would specify the layout like this:
```
---
layout: base.njk
title: My Awesome Page
---
Your Markdown content goes here...