diff --git a/.eleventy.js b/.eleventy.js index c7d2dbc..1c8e872 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -1,4 +1,5 @@ module.exports = function(eleventyConfig) { + // Pass through static assets from the "src" directory eleventyConfig.addPassthroughCopy("src/css"); 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 ``; + }); + // Add a shortcode for the current year for the footer eleventyConfig.addShortcode("year", () => `${new Date().getFullYear()}`); diff --git a/src/_data/site.json b/src/_data/site.json index 0eb820f..8e70e1e 100644 --- a/src/_data/site.json +++ b/src/_data/site.json @@ -1,6 +1,6 @@ { "author": { - "name": "Jesus Otero Lagunes", + "name": "Jesus Network Solutions", "email": "jesus@twk95.com", "linkedinUrl": "https://linkedin.twk95.com" }, diff --git a/src/_includes/base.njk b/src/_includes/base.njk new file mode 100644 index 0000000..ab9651d --- /dev/null +++ b/src/_includes/base.njk @@ -0,0 +1,89 @@ + + + + + + {{ title }} + + + + + + + +
+
+

{{ title }}

+

A demonstration of what's possible with this powerful static site generator.

+
+
+ +
+
+ {{ content | safe }} +
+
+ + + + + + diff --git a/src/_includes/post.njk b/src/_includes/post.njk index 096e026..67da6a6 100644 --- a/src/_includes/post.njk +++ b/src/_includes/post.njk @@ -4,6 +4,6 @@ layout: "layout.njk"

{{ title }}

Published on: {{ date | readableDate }}

- +
{{ content | safe }}
diff --git a/src/css/style.css b/src/css/style.css index 699560b..29044e5 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -52,3 +52,18 @@ body { margin-right: 1rem; 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; +} diff --git a/src/posts/6-5-25.md b/src/posts/6-5-25.md deleted file mode 100644 index 1d9b7a7..0000000 --- a/src/posts/6-5-25.md +++ /dev/null @@ -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! \ No newline at end of file diff --git a/src/posts/8-5-25.md b/src/posts/8-5-25.md new file mode 100644 index 0000000..3db1a67 --- /dev/null +++ b/src/posts/8-5-25.md @@ -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! \ No newline at end of file diff --git a/src/posts/test.md b/src/posts/test.md new file mode 100644 index 0000000..1781c18 --- /dev/null +++ b/src/posts/test.md @@ -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 `
` 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: + + +*** + +## 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...