add archives feature

rizkikadafi · Apr 10, 2024 · c490d2a · c490d2a
1 parent dad12e0
commit c490d2a
Show file tree

Hide file tree

Showing 12 changed files with 134 additions and 8 deletions.
diff --git a/Gemfile b/Gemfile
@@ -3,3 +3,6 @@ source 'https://rubygems.org'
 gem 'jekyll'
 gem 'jekyll-postcss'
 gem 'webrick'
+group :jekyll_plugins do
+  gem 'jekyll-archives'
+end
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -36,6 +36,8 @@ GEM
       safe_yaml (~> 1.0)
       terminal-table (>= 1.8, < 4.0)
       webrick (~> 1.7)
+    jekyll-archives (2.2.1)
+      jekyll (>= 3.6, < 5.0)
     jekyll-postcss (0.5.0)
     jekyll-sass-converter (3.0.0)
       sass-embedded (~> 1.54)
@@ -112,6 +114,7 @@ PLATFORMS
 
 DEPENDENCIES
   jekyll
+  jekyll-archives
   jekyll-postcss
   webrick
 

diff --git a/_config.yml b/_config.yml
@@ -1,4 +1,4 @@
-baseurl: ""
+baseurl: "https://rizkikadafi.github.io"
 url: ""
 defaults:
   - scope:

diff --git a/_data/blog-navigation.yml b/_data/blog-navigation.yml
@@ -3,7 +3,7 @@
 - name: Category
   link: "/blog/categories"
 - name: Recent Post
-  link: "/blog/#recent"
-- name: Archive
-  link: /blog/archive
+  link: "/blog#recent"
+- name: Archives
+  link: /blog/archives
 
diff --git a/_layouts/archive.html b/_layouts/archive.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en" class="scroll-smooth">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"
+    integrity="sha384-4LISF5TTJX/fLmGSxO53rV4miRxdg84mZsxmO8Rx5jGtp/LbrixFETvWa5a6sESd" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.1/flowbite.min.css" rel="stylesheet" />
+  <link rel="stylesheet" href="/assets/css/main.css" />
+
+  <title>Kadafi's Blog {% if page.title %} | {{page.title}} {% endif %}</title>
+
+</head>
+
+<body class="bg-slate-50 dark:bg-slate-800 transition duration-500 lg:px-24">
+  {% include blog-modal-navigation.html %}
+  <nav id="blog-nav"
+    class="px-10 lg:px-20 bg-slate-300/70 dark:bg-slate-700/70 fixed right-0 left-0 top-0 dark:text-gray-200 z-10 py-3 lg:py-5 transition duration-300 border-slate-600 text-gray-900
+  after:duration-1000 ease-out after:block after:h-0.5 after:w-full after:origin-bottom-right after:scale-x-0 after:bg-slate-500 after:transition-transform after:mt-3 after:absolute after:bottom-0 after:left-0 after:rounded-md after:px-3">
+    <div class="hidden after:origin-bottom-left after:scale-x-100 dark:bg-slate-800/70 backdrop-blur-md">
+
+    </div>
+    <div class=" flex justify-between items-center h-full">
+      <a href="{{site.baseurl}}/blog" class="font-medium text-md lg:text-xl">Kadafi's Blog</a>
+      <div class="flex">
+        <ul class="hidden sm:flex *:mx-5">
+          {% for item in site.data.blog-navigation %}
+          <li class="hover:underline hover:underline-offset-4"><a href="{{item.link}}">{{item.name}}</a></li>
+          {% endfor %}
+        </ul>
+        <div class="*:cursor-pointer"> <i id="dark-mode" class="bi bi-moon-stars-fill mr-2 text-lg dark:hidden"></i>
+          <i id="light-mode" class="bi bi-brightness-high-fill mr-2 text-xl hidden dark:inline-block"></i>
+          <i data-modal-target="default-modal" data-modal-toggle="default-modal"
+            class="bi bi-list sm:hidden text-xl"></i>
+        </div>
+      </div>
+    </div>
+  </nav>
+
+  <div class="content dark:text-white mt-20 mx-5 sm:mx-14 prose dark:prose-invert max-w-none">
+    {{content}}
+  </div>
+
+  <div id="top-btn" class="fixed right-5 bottom-5 hidden cursor-pointer z-50">
+    <i class="bi bi-arrow-up-circle dark:text-white text-4xl"></i>
+  </div>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.1/flowbite.min.js"></script>
+  <script src="/assets/js/toggle_dark.js"></script>
+  <script src="/assets/js/blog-navbar.js"></script>
+</body>
+
+</html>
diff --git a/_layouts/post.html b/_layouts/post.html
@@ -25,12 +25,12 @@
   {% endif %}
 
   <div
-    class="prose prose-sm sm:prose-base dark:prose-invert prose-h1:mb-2 max-w-none px-2 md:px-0 text-slate-800 dark:text-white mt-5">
+    class="prose prose-sm sm:prose-base dark:prose-invert prose-h1:mb-2 prose-h1:text-2xl sm:prose-h1:text-3xl max-w-none px-2 md:px-0 text-slate-800 dark:text-white mt-5">
     <h1>{{page.title}}</h1>
     <div class="not-prose">
       {% for tag in page.tags %}
       <a href="/blog/tags?tag={{ tag }}"
-        class="inline-block mr-2 w-fit text-sm bg-slate-500/70 backdrop-blur-md rounded-xl px-4 py-[2px] dark:text-slate-200">{{tag}}</a>
+        class="inline-block mr-2 my-1 w-fit text-sm bg-slate-500/70 backdrop-blur-md rounded-xl px-4 py-[2px] dark:text-slate-200">{{tag}}</a>
       {% endfor %}
     </div>
     {{ content }}

diff --git a/blog/archives.html b/blog/archives.html
@@ -0,0 +1,31 @@
+---
+layout: archive
+premalink: /blog/archives
+title: archives
+---
+{% for post in site.posts %}
+
+{% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %}
+{% capture next_year %}{{ post.previous.date | date: "%Y" }}{% endcapture %}
+
+  {% if forloop.first %}
+    <h1> {{this_year}} </h1>
+    <ul>
+  {% endif %}
+
+  <li>
+    <span class="">{{post.date | date: "%b %d"}}</span>
+    - <a href="{{ post.url }}">{{ post.title }}</a>
+  </li>
+
+  {% if forloop.last %}
+    </ul>
+  {% else %}
+    {% if this_year != next_year %}
+      </ul>
+      <h1> {{next_year}} </h1>
+      <ul>
+    {% endif %}
+  {% endif %}
+
+{% endfor %}
diff --git a/blog/categories.html b/blog/categories.html
@@ -1,6 +1,7 @@
 ---
 layout: blog
 permalink: /blog/categories
+title: categories
 ---
 
 <div class="px-8">
@@ -34,7 +35,7 @@
         </h1>
         <p class="w-3/5">{{page.desc}}</p>
       </div>
-      <div class="w-full mb-10 grid md:grid-cols-2 lg:grid-cols-3 justify-center items-center gap-5">
+      <div class="w-full mb-10 grid md:grid-cols-2 lg:grid-cols-3 justify-center items-start gap-5">
         {% for post in category[1] %}
         {% include blog-post-card.html post=post %}
         {% endfor %}

diff --git a/blog/index.html b/blog/index.html
@@ -59,7 +59,8 @@ <h1 class="font-bold text-xl sm:text-2xl lg:text-3xl">Welcome to Kadafi's Blog</
             <i class="hidden bi bi-arrow-right-circle-fill text-3xl group-hover:block"></i>
           </div>
         </div>
-        <a href="{{site.baseurl}}/blog/category" class="group flex justify-center items-center text-sm hover:underline">
+        <a href="{{site.baseurl}}/blog/categories"
+          class="group flex justify-center items-center text-sm hover:underline">
           <span class="block mr-2">view all category</span>
           <i class="bi bi-arrow-right block mt-[4px] group-hover:translate-x-2 transition-transform"></i>
         </a>

diff --git a/blog/math/_posts/2020-05-11-eigen-value.md b/blog/math/_posts/2020-05-11-eigen-value.md
@@ -0,0 +1,15 @@
+---
+layout: post
+author: Kadafi
+thumbnail: /assets/image/hero1.jpg
+tags: linear-algebra
+---
+
+A banana is an edible fruit – botanically a berry – produced by several
+kinds of large herbaceous flowering plants in the genus Musa.
+
+In some countries, bananas used for cooking may be called "plantains",
+distinguishing them from dessert bananas. The fruit is variable in size,
+color, and firmness, but is usually elongated and curved, with soft
+flesh rich in starch covered with a rind, which may be green, yellow,
+red, purple, or brown when ripe.
diff --git a/blog/programming/_posts/2023-11-11-b-tree.md b/blog/programming/_posts/2023-11-11-b-tree.md
@@ -0,0 +1,15 @@
+---
+layout: post
+author: Kadafi
+thumbnail: 
+tags: dsa
+---
+
+A banana is an edible fruit – botanically a berry – produced by several
+kinds of large herbaceous flowering plants in the genus Musa.
+
+In some countries, bananas used for cooking may be called "plantains",
+distinguishing them from dessert bananas. The fruit is variable in size,
+color, and firmness, but is usually elongated and curved, with soft
+flesh rich in starch covered with a rind, which may be green, yellow,
+red, purple, or brown when ripe.
diff --git a/blog/tags.html b/blog/tags.html
@@ -1,6 +1,7 @@
 ---
 layout: blog
 permalink: /blog/tags
+title: tags
 ---
 
 <div class="px-8">