Merge pull request #3 from husni-zuhdi/integrate-tailwindcss

Integrate tailwindcss
husni-zuhdi · Aug 12, 2024 · 641ea6f · 641ea6f
2 parents 2983f09 + bcd9e92
commit 641ea6f
Show file tree

Hide file tree

Showing 16 changed files with 1,328 additions and 108 deletions.
diff --git a/README.md b/README.md
@@ -7,6 +7,7 @@ My Portfolio webiste
 * [Askama](https://github.com/djc/askama)
 * [Markdown-rs](https://github.com/wooorm/markdown-rs)
 * [Taskfile](https://taskfile.dev/)
+* [TailwindCSS](https://tailwindcss.com/)
 
 ## How to use
 

diff --git a/Taskfile.yml b/Taskfile.yml
@@ -5,8 +5,14 @@ tasks:
     summary: Run unit test with logs
     cmds:
       - RUST_LOG=debug cargo test -- --nocapture
+  build-tailwind:
+    summary: Build tailwindcss
+    cmds:
+      - tailwindcss -i ./statics/input.css -o ./statics/styles.css
   run:
     summary: Run application with hot-reload
+    deps:
+      - build-tailwind
     cmds:
       - cargo watch -s 'export $(cat .env | xargs) && cargo run -- -release'
   update_version:
@@ -22,6 +28,8 @@ tasks:
         EOF
   compose-run:
     summary: Run application in docker compose with database
+    deps:
+      - build-tailwind
     cmds:
       - |
         export $(cat .env | xargs)

diff --git a/internal/src/handler.rs b/internal/src/handler.rs
@@ -27,10 +27,11 @@ pub async fn handler(cfg: Config) -> std::io::Result<()> {
             .app_data(web::Data::new(blogs_data.clone()))
             .app_data(web::Data::new(config.clone()))
             .service(web::resource("/").route(web::get().to(profile)))
-            .service(web::resource("/styles.css").route(web::get().to(styles)))
+            .service(web::resource("/statics/{static_file}").route(web::get().to(statics)))
             .service(web::resource("/blogs").route(web::get().to(get_blogs)))
             .service(web::resource("/blogs/{blogid}").route(web::get().to(get_blog)))
             .service(web::resource("/version").route(web::get().to(get_version)))
+            .service(web::resource("/not-found").route(web::get().to(get_404_not_found)))
     })
     .bind((endpoint, port))
     .expect("Failed to start Http Server")

diff --git a/internal/src/model/templates.rs b/internal/src/model/templates.rs
@@ -27,3 +27,7 @@ pub struct Version<'a> {
     pub build_hash: &'a str,
     pub build_date: &'a str,
 }
+
+#[derive(Template, Debug)]
+#[template(path = "not_found.html")]
+pub struct NotFound;
diff --git a/internal/src/router.rs b/internal/src/router.rs
@@ -5,18 +5,36 @@ use actix_files::NamedFile;
 use actix_web::{web, Responder, Result};
 use actix_web_lab::respond::Html;
 use askama::Template;
-use log::info;
+use log::{error, info};
 
-pub async fn styles() -> Result<NamedFile> {
-    let styles = NamedFile::open("./statics/styles.css").expect("Failed to render styles.css");
-    Ok(styles)
+pub async fn statics(path: web::Path<String>) -> Result<impl Responder> {
+    info!("Statics path: {}", path.clone());
+    let static_path = match path.into_inner().as_str() {
+        "styles.css" => Ok(format!("./statics/styles.css")),
+        "apple-touch-icon.png" => Ok(format!("./statics/favicon/apple-touch-icon.png")),
+        "favicon-16x16.png" => Ok(format!("./statics/favicon/favicon-16x16.png")),
+        "favicon-32x32.png" => Ok(format!("./statics/favicon/favicon-32x32.png")),
+        _ => {
+            let err = "Failed to get static path. Statics path is not allowed.";
+            error!("{}", err);
+            Err(err)
+        }
+    }
+    .expect("Failed to get static path");
+    let static_file = NamedFile::open(static_path).expect("Failed to render static file(s)");
+    Ok(static_file)
 }
 
 pub async fn profile() -> Result<impl Responder> {
     let profile = Profile.render().expect("Failed to render profile.html");
     Ok(Html(profile))
 }
 
+pub async fn get_404_not_found() -> Result<impl Responder> {
+    let html = NotFound.render().expect("Failed to render not_found.html");
+    Ok(Html(html))
+}
+
 pub async fn get_blogs(blogs_data: web::Data<BlogsData>) -> Result<impl Responder> {
     // Copy data to Template struct
     let blogs_template: Vec<Blog> = blogs_data

diff --git a/internal/templates/base.html b/internal/templates/base.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en-US">
+<html lang="en-US" class="text-gray-900 bg-gray-100 font-mono">
     <head>
         <title>{% block title %}{% endblock %}</title>
         <!-- Setup Metadatas -->
@@ -8,50 +8,156 @@
         <meta name="author" content="Husni Zuhdi">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <!-- HTMX-->
-        <script src="https://unpkg.com/htmx.org@1.9.8"></script>
+        <script type="text/javascript" id="HTMX"
+            async src="https://unpkg.com/htmx.org@1.9.8">
+        </script>
         <!-- MathJax-->
-        <script type="text/javascript" id="MathJax-script" async
-          src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
+        <script type="text/javascript" id="MathJax-script"
+            async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
         </script>
         <!-- Emoji as icon -->
-        <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>☸️</text></svg>">
+        <link rel="apple-touch-icon" sizes="180x180" href="/statics/apple-touch-icon.png">
+        <link rel="icon" type="image/png" sizes="32x32" href="/statics/favicon-32x32.png">
+        <link rel="icon" type="image/png" sizes="16x16" href="/statics/favicon-16x16.png">
         <!-- Sttlesheet CSS -->
-        <link rel="stylesheet" href="/styles.css"/>
+        <link rel="stylesheet" href="/statics/styles.css"/>
     </head>
     <body class="body">
-        <div id="navbar" class="navbar">
-            <a class="special btn"
-                href="/"
-            >
-                Home
-            </a>
-            <a class="btn"
-                href="/blogs"
-            >
-                Blogs
-            </a>
-        </div>
-        <div id="main" class="main">
+        <nav class="bg-gray-100">
+          <div class="mx-6">
+            <div class="relative flex h-16 items-center justify-between">
+              <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
+                <!-- Mobile menu button-->
+                <button type="button" class="relative inline-flex items-center justify-center rounded-md p-2 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
+                  <span class="absolute -inset-0.5"></span>
+                  <span class="sr-only">Open main menu</span>
+                  <!--
+                    Icon when menu is closed.
+
+                    Menu open: "hidden", Menu closed: "block"
+                  -->
+                  <svg class="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+                  </svg>
+                  <!--
+                    Icon when menu is open.
+
+                    Menu open: "block", Menu closed: "hidden"
+                  -->
+                  <svg class="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                  </svg>
+                </button>
+              </div>
+              <div class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
+                <div class="flex flex-shrink-0 items-center">
+                  <img class="h-8 w-auto" src="/statics/favicon-32x32.png" alt="Husni Zuhdi">
+                </div>
+                <div class="hidden sm:ml-6 sm:block">
+                  <div class="flex space-x-4">
+                    <a href="/" class="rounded-md px-3 py-2 text-sm font-medium hover:bg-gray-700 hover:text-white" aria-current="page">Home</a>
+                    <a href="/blogs" class="rounded-md px-3 py-2 text-sm font-medium hover:bg-gray-700 hover:text-white">Blogs</a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Mobile menu, show/hide based on menu state. -->
+          <div class="sm:hidden" id="mobile-menu">
+            <div class="space-y-1 px-2 pb-3 pt-2">
+              <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
+              <a href="/" class="block rounded-md px-3 py-2 text-base font-medium hover:bg-gray-700 hover:text-white" aria-current="page">Home</a>
+              <a href="/blogs" class="block rounded-md px-3 py-2 text-base font-medium hover:bg-gray-700 hover:text-white">Blogs</a>
+            </div>
+          </div>
+        </nav>
+
+        <!-- Main Section -->
+        <div id="main" class="mx-6 bg-gray-100 text-left">
             {% block content %}<p>Placeholder content</p>{% endblock %}
         </div>
-        <div id="footer" class="footer">
-            <address>
-                Husni Naufal Zuhdi - 2024
-                <br>
 
-                <a href="mailto:husninaufalz@gmail.com"> husninaufalz@gmail.com</a>
-                <br>
+        <!-- Footer container -->
+        <footer class="bg-gray-100 text-center lg:text-left bottom-0">
+          <div class="flex items-center justify-center border-b-2 border-neutral-200 p-6 lg:justify-between">
+            <div class="me-12 hidden lg:block">
+              <span>Get connected with me on social networks:</span>
+            </div>
+            <!-- Social network icons container -->
+            <div class="flex justify-center">
+              <a href="https://www.linkedin.com/in/husni-naufal-zuhdi" target="_blank" class="me-6 [&>svg]:h-4 [&>svg]:w-4">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="currentColor"
+                  viewBox="0 0 448 512">
+                  <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                  <path
+                    d="M100.3 448H7.4V148.9h92.9zM53.8 108.1C24.1 108.1 0 83.5 0 53.8a53.8 53.8 0 0 1 107.6 0c0 29.7-24.1 54.3-53.8 54.3zM447.9 448h-92.7V302.4c0-34.7-.7-79.2-48.3-79.2-48.3 0-55.7 37.7-55.7 76.7V448h-92.8V148.9h89.1v40.8h1.3c12.4-23.5 42.7-48.3 87.9-48.3 94 0 111.3 61.9 111.3 142.3V448z" />
+                </svg>
+              </a>
+              <a href="https://github.com/husni-zuhdi" target="_blank" class="[&>svg]:h-4 [&>svg]:w-4">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="currentColor"
+                  viewBox="0 0 496 512">
+                  <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                  <path
+                    d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
+                </svg>
+              </a>
+            </div>
+          </div>
 
-                <a href="https://www.linkedin.com/in/husni-naufal-zuhdi" target="_blank">
-                LinkedIn
+          <div class="mx-6 py-10 text-center md:text-left">
+            <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-4">
+              <!-- TW Elements section -->
+              <div class="">
+                <h6 class="mb-4 flex items-center justify-center font-semibold uppercase md:justify-start">
+                  Husni Zuhdi
+                </h6>
+                <p>
+                    <i>Character is Destiny</i>
+                </p>
+                <p>
+                    <i>~ Heraclitus</i>
+                </p>
+              </div>
+              <!-- Pages section -->
+              <div>
+                <h6 class="mb-4 flex justify-center font-semibold uppercase md:justify-start">
+                  Pages
+                </h6>
+                <p class="mb-4">
+                  <a href="/">Home</a>
+                </p>
+                <p class="mb-4">
+                  <a href="/blogs">Blogs</a>
+                </p>
+              </div>
+               <!-- Contact section -->
+              <div>
+                <h6 class="mb-4 flex justify-center font-semibold uppercase md:justify-start">
+                  Contact
+                </h6>
+                <a href="mailto:husninaufalz@gmail.com">
+                    <p class="mb-4 flex items-center justify-center md:justify-start">
+                      <span class="me-3 [&>svg]:h-5 [&>svg]:w-5">
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          viewBox="0 0 24 24"
+                          fill="currentColor">
+                          <path
+                            d="M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z" />
+                          <path
+                            d="M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z" />
+                        </svg>
+                      </span>
+                      husninaufalz@gmail.com
+                    </p>
                 </a>
-
-                <a href="https://github.com/husni-zuhdi" target="_blank">
-                GitHub
-                </a>
-                <br>
-            </address>
-        </div>
+            </div>
+          </div>
     </body>
 </html>
 
diff --git a/internal/templates/blog.html b/internal/templates/blog.html
@@ -4,8 +4,7 @@
 {% block description %}"Blog {{id}} - {{name}}"{% endblock %}
 
 {% block content %}
-    <h1>{{id}} | {{name}}</h1>
-    <!-- <h2>{{filename}}</h2> -->
+    <h1 class="mb-4 font-semibold uppercase md:justify-start">{{id}} | {{name}}</h1>
     <hr>
     <div>
         {{body|safe}}

diff --git a/internal/templates/blogs.html b/internal/templates/blogs.html
@@ -4,10 +4,10 @@
 {% block description %}"Husni Naufal Zuhdi Blogs"{% endblock %}
 
 {% block content %}
-<h1>Blogs</h1>
+<h1 class="mb-4 font-semibold uppercase md:justify-start">Blogs</h1>
 <hr>
 {% for blog in blogs %}
-    <h2>
+    <h2 class="mb-2 hover:font-bold md:justify-start">
         {{blog.id}} | <a href="/blogs/{{blog.id}}">{{blog.name}}</a>
     </h2>
 {% endfor %}

diff --git a/internal/templates/not_found.html b/internal/templates/not_found.html
@@ -0,0 +1,25 @@
+{% extends "base.html" %}
+
+{% block title %}404 Not Found{% endblock %}
+{% block description %}"Sorry, we couldn’t find the page you’re looking for"{% endblock %}
+
+{% block content %}
+<!--
+  This example requires updating your template:
+
+  ```
+  <html class="h-full">
+  <body class="h-full">
+  ```
+-->
+<main class="grid min-h-full place-items-center px-6 py-24 sm:py-32 lg:px-8">
+  <div class="text-center">
+    <p class="text-base font-semibold text-red-700">404</p>
+    <h1 class="mt-4 text-3xl font-bold tracking-tight text-gray-900 sm:text-5xl">Page not found</h1>
+    <p class="mt-6 text-base leading-7 text-gray-600">Sorry, we couldn’t find the page you’re looking for.</p>
+    <div class="mt-10 flex items-center justify-center gap-x-6">
+      <a href="/" class="rounded-md bg-green-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600">Go back to Home</a>
+    </div>
+  </div>
+</main>
+{% endblock content %}
diff --git a/internal/templates/profile.html b/internal/templates/profile.html
@@ -20,8 +20,8 @@ <h3>2022 - Now  | Site Reliability Engineer at <a href="https://accelbyte.io/abo
     <li>Develop Backend Service for internal alerting subscription</li>
 </ul>
 <h3>2022 - 2022 | System Engineer at <a href="https://www.tokopedia.com/about/">Tokopedia</a></h3>
-<p class="paragraph">Handle Tokopedia Multi-Cloud Environment</p>
 <ul>
+    <li>Handle Tokopedia Multi-Cloud Environment</li>
     <li>Onboard several existing Jenkins Pipelines into our new GitHub Action Workflows</li>
     <li>Rolling out our existing Consul Service Discovery into the Enterprise version</li>
     <li>Develop Cloud Platform Diary for our Internal Cloud-related Data Analytics Platform</li>
@@ -102,7 +102,6 @@ <h3>Linux</h3>
 <!--     </div> -->
 <!-- </div> -->
 
-
 <h2>Personal Interests</h2>
 <hr>
 

diff --git a/statics/favicon/apple-touch-icon.png b/statics/favicon/apple-touch-icon.png
diff --git a/statics/favicon/favicon-16x16.png b/statics/favicon/favicon-16x16.png
diff --git a/statics/favicon/favicon-32x32.png b/statics/favicon/favicon-32x32.png
diff --git a/statics/input.css b/statics/input.css
@@ -0,0 +1,18 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    h1 {
+        @apply mb-4 mt-6 font-bold uppercase text-2xl md:justify-start;
+    }
+    h2 {
+        @apply mb-2 mt-4 text-xl font-semibold md:justify-start;
+    }
+    h3 {
+        @apply mb-2 mt-4 text-xl md:justify-start;
+    }
+    a {
+        @apply text-blue-500 hover:text-blue-900;
+    }
+}