Add blog support

.gitignore

@@ -1,5 +1,5 @@
-dist
 .sass-cache
 .jekyll-cache
 .jekyll-metadata
 vendor
+_site

Dockerfile

@@ -4,6 +4,6 @@ EXPOSE 4000
 WORKDIR /app
 
 COPY Gemfile .
-RUN gem install bundler
+RUN gem install bundler && bundle install
-RUN bundle install
+ENTRYPOINT [ "bundle", "exec", "jekyll" ]
-CMD [ "bundle", "exec", "jekyll", "serve", "--force_polling", "-H", "0.0.0.0", "-P", "4000" ]
+CMD [ "serve", "-H", "0.0.0.0", "--force_polling", "--livereload", "--drafts" ]

Gemfile

@@ -2,11 +2,9 @@ source "https://rubygems.org"
 
 gem "jekyll", "~> 4.3.4"
 
-# If you want to use GitHub Pages, remove the "gem "jekyll"" above and
-# uncomment the line below. To upgrade, run `bundle update github-pages`.
-# gem "github-pages", group: :jekyll_plugins
-
-# If you have any plugins, put them here!
 group :jekyll_plugins do
   gem "jekyll-feed", "~> 0.12"
+  gem "jekyll-compose", "~> 0.12.0"
 end
+
+gem "kramdown-syntax-coderay", "~> 1.0"

Gemfile.lock

@@ -4,19 +4,16 @@ GEM
     addressable (2.8.7)
       public_suffix (>= 2.0.2, < 7.0)
     bigdecimal (3.1.8)
+    coderay (1.1.3)
     colorator (1.1.0)
     concurrent-ruby (1.3.4)
     em-websocket (0.5.3)
       eventmachine (>= 0.12.9)
       http_parser.rb (~> 0)
     eventmachine (1.2.7)
-    ffi (1.17.0-aarch64-linux-gnu)
     ffi (1.17.0-x86_64-linux-gnu)
     forwardable-extended (2.6.0)
-    google-protobuf (4.29.0-aarch64-linux)
+    google-protobuf (4.29.2-x86_64-linux)
-      bigdecimal
-      rake (>= 13)
-    google-protobuf (4.29.0-x86_64-linux)
       bigdecimal
       rake (>= 13)
     http_parser.rb (0.8.0)
@@ -38,6 +35,8 @@ GEM
       safe_yaml (~> 1.0)
       terminal-table (>= 1.8, < 4.0)
       webrick (~> 1.7)
+    jekyll-compose (0.12.0)
+      jekyll (>= 3.7, < 5.0)
     jekyll-feed (0.17.0)
       jekyll (>= 3.7, < 5.0)
     jekyll-sass-converter (3.0.0)
@@ -48,6 +47,9 @@ GEM
       rexml (>= 3.3.9)
     kramdown-parser-gfm (1.1.0)
       kramdown (~> 2.0)
+    kramdown-syntax-coderay (1.0.1)
+      coderay (~> 1.1)
+      kramdown (~> 2.0)
     liquid (4.0.4)
     listen (3.9.0)
       rb-fsevent (~> 0.10, >= 0.10.3)
@@ -60,25 +62,24 @@ GEM
     rb-fsevent (0.11.2)
     rb-inotify (0.11.1)
       ffi (~> 1.0)
-    rexml (3.3.9)
+    rexml (3.4.0)
     rouge (4.5.1)
     safe_yaml (1.0.5)
-    sass-embedded (1.81.0-aarch64-linux-gnu)
+    sass-embedded (1.83.0-x86_64-linux-gnu)
-      google-protobuf (~> 4.28)
-    sass-embedded (1.81.0-x86_64-linux-gnu)
       google-protobuf (~> 4.28)
     terminal-table (3.0.2)
       unicode-display_width (>= 1.1.1, < 3)
     unicode-display_width (2.6.0)
-    webrick (1.9.0)
+    webrick (1.9.1)
 
 PLATFORMS
-  aarch64-linux
   x86_64-linux-gnu
 
 DEPENDENCIES
   jekyll (~> 4.3.4)
+  jekyll-compose (~> 0.12.0)
   jekyll-feed (~> 0.12)
+  kramdown-syntax-coderay (~> 1.0)
 
 BUNDLED WITH
-   2.5.23
+   2.6.1

Makefile

@@ -0,0 +1,34 @@
+args :=
+
+default: clean start
+
+start:
+	docker compose up -d
+
+rebuild:
+	docker compose up -d --build
+
+stop:
+	docker compose down
+
+clean:
+	\rm -rf .jekyll-cache _site
+	docker compose down -v
+
+logs:
+	docker compose logs --follow --since 1m
+
+build:
+	docker compose run --rm -e JEKYLL_ENV=production jekyll build
+
+install:
+	docker compose run --rm --entrypoint bash jekyll -c bundle add ${args}
+
+make draft:
+	docker compose run --rm jekyll draft ${args}
+
+make publish:
+	docker compose run --rm jekyll publish ${args}
+
+make unpublish:
+	docker compose run --rm jekyll unpublish ${args}

_config.yml

@@ -1,9 +1,8 @@
-# Site settings
 title: Erick Ruiz de Chavez
 author: Erick Ruiz de Chavez
 url: https://erickruizdechavez.com
 
-social_links:
+site_links:
   - title: 💼 LinkedIn
     url: https://linkedin.com/in/erickruizdechavez
   - title: 🐙 GitHub
@@ -13,7 +12,17 @@ social_links:
   - title: 🦋 Bluesky
     url: https://bsky.app/profile/erick.social
 
-# Build settings
+exclude:
-source: src
+  - Dockerfile
-destination: dist
+  - compose.yaml
-livereload: true
+  - Makefile
+
+jekyll_compose:
+  default_front_matter:
+    drafts:
+      layout: article
+    posts:
+      layout: article
+
+kramdown:
+  syntax_highlighter: coderay

_includes/footer.html

@@ -0,0 +1,3 @@
+<footer class="site_footer">
+    &copy; {{ "now" | date: "%Y" }} {{ site.author }}
+</footer>

_includes/head.html

@@ -0,0 +1,7 @@
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="{{ "/assets/styles.css" | relative_url }}">
+    <title>{{ site.title }}</title>
+</head>

_includes/header.html

@@ -0,0 +1,22 @@
+<header class="site_header">
+    <img
+        class="panda"
+        src="{{ 'assets/panda.webp' | relative_url }}"
+        alt="Generated Image of an anthropomorphic Panda wearing a sweater and jeans, sitting on a couch, using a laptop."
+    />
+
+    {%- if site.site_links -%}
+        <nav class="site_links">
+            {%- if page.url != "/" -%}
+                <a class="site_links__link" href="{{ "/" | relative_url }}">🏡 Front Page</a>
+            {%- endif -%}
+            {%- for my_page in site.site_links -%}
+                {%- if my_page.title -%}
+                    <a class="site_links__link" href="{{ my_page.url }}" rel="me noreferrer" target="_blank">
+                        {{ my_page.title | escape }}
+                    </a>
+                {%- endif -%}
+            {%- endfor -%}
+        </nav>
+    {%- endif -%}
+</header>

_layouts/article.html

@@ -0,0 +1,14 @@
+---
+layout: default
+---
+<div class="article">
+    <h1 class="article__title">
+        {{ page.title | escape }}
+    </h1>
+    <time class="article__published">
+        {{ page.date | date: "%Y-%m-%d" }}
+    </time>
+    <div class="article__content">
+        {{ content }}
+    </div>
+</div>

_layouts/home.html

@@ -0,0 +1,21 @@
+---
+layout: default
+---
+<div class="home">
+    {{ content }}
+
+    {%- if site.posts.size > 0 -%}
+        <section class="articles">
+            <h2 class="articles__heading">Articles</h2>
+            <ul class="articles__list">
+                {%- for post in site.posts -%}
+                <li class="articles__article">
+                    <a href="{{ post.url | relative_url }}">
+                        {{ post.date | date: "%Y-%m-%d" }} - {{ post.title | escape }}
+                    </a>
+                </li>
+                {%- endfor -%}
+            </ul>
+        </section>
+    {%- endif -%}
+</div>

_sass/main.scss

@@ -23,42 +23,78 @@ body {
     align-items: center;
 }
 
-header {
+h1 {
-    margin-top: 40px;
+    font-size: 1.5rem;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    img {
-        width: 200px;
-        height: 200px;
-        border-radius: 100px;
-    }
 }
 
-nav {
+h2 {
-    display: flex;
+    font-size: 1.2rem;
-    flex-wrap: wrap;
+}
-    justify-content: center;
-    margin: 40px 0;
 
-    a {
+h3 {
-        display: block;
+    font-size: 1.1rem;
-        margin: 0 20px;
+}
-        opacity: .8;
+
-    }
+h4,h5,h6 {
+    font-size: 1rem;
+}
+
+main {
+    margin: 20px;
+    opacity: .8;
+    line-height: 1.5rem;
 }
 
 a {
     text-decoration: none;
 }
 
-main {
+.site_header {
-    margin: 20px;
+    margin-top: 40px;
-    opacity: .8;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
 }
 
-footer {
+.panda {
+    width: 200px;
+    height: 200px;
+    border-radius: 100px;
+}
+
+.site_links {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin: 40px 0;
+
+    &__link {
+        display: block;
+        margin: 0 20px;
+        opacity: .8;
+    }
+}
+
+.site_footer {
     margin-top: 40px;
+    padding-bottom: 20px;
     opacity: .3;
 }
+
+.articles {
+    opacity: .8;
+    margin-top: 60px;
+}
+
+.article {
+    &__back {
+        font-size: .9rem;
+    }
+
+    &__published {
+        font-style: italic;
+        font-size: .9rem;
+        opacity: .6;
+    }
+}

compose.yaml

@@ -1,8 +1,6 @@
 services:
   jekyll:
-    build:
+    build: .
-      context: .
-      dockerfile: Dockerfile
     platform: linux/amd64
     ports:
       - 4000:4000

src/_includes/footer.html

@@ -1 +0,0 @@
-<footer>&copy; {{ "now" | date: "%Y" }} {{ site.author }}</footer>

src/_includes/head.html

@@ -1,7 +0,0 @@
-<head>
-  <meta charset="utf-8" />
-  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <link rel="stylesheet" href="{{ "/assets/styles.css" | relative_url }}">
-  <title>{{ site.title }}</title>
-</head>

src/_includes/header.html

@@ -1,17 +0,0 @@
-<header>
-  <img
-    src="{{ 'assets/panda.webp' | relative_url }}"
-    alt="Generated Image of an anthropomorphic Panda wearing a sweater and jeans, sitting on a couch, using a laptop."
-  />
-
-  {%- if site.social_links -%}
-  <nav>
-    {%- for my_page in site.social_links -%} {%- if my_page.title -%}
-    <a href="{{ my_page.url }}" rel="me noreferrer" target="_blank"
-      >{{ my_page.title | escape }}</a
-    >
-    {%- endif -%} {%- endfor -%}
-  </nav>
-
-  {%- endif -%}
-</header>

src/_layouts/home.html

@@ -1,11 +0,0 @@
----
-layout: default
----
-
-<div class="home">
-    {%- if page.title -%}
-    <h1 class="page-heading">{{ page.title }}</h1>
-    {%- endif -%}
-
-    {{ content }}
-</div>