From 5df7b1f878cfdfc2752735e1469870dfc05414f3 Mon Sep 17 00:00:00 2001
From: hwakabh <hrykwkbys1024@gmail.com>
Date: Sun, 3 Aug 2025 23:06:50 +0900
Subject: [PATCH 1/3] feat: integrated API and UI with Tumblr API.

---
 api-server/routes/api.js        |  2 +
 api-server/routes/logues.js     | 38 +++++++++++++++
 web-frontend/src/pages/Blog.vue | 83 +++++++++------------------------
 3 files changed, 63 insertions(+), 60 deletions(-)
 create mode 100644 api-server/routes/logues.js

diff --git a/api-server/routes/api.js b/api-server/routes/api.js
index cc72f181..7ac51fc0 100644
--- a/api-server/routes/api.js
+++ b/api-server/routes/api.js
@@ -5,6 +5,7 @@ const aboutRouter = require('./about');
 const cvRouter = require('./cv');
 const worksRouter = require('./works');
 const contactRouter = require('./contact');
+const postsRouter = require('./logues');
 
 const URL_PREFIX = '/api/v1';
 
@@ -12,5 +13,6 @@ router.use(URL_PREFIX + '/about', aboutRouter);
 router.use(URL_PREFIX + '/cv', cvRouter);
 router.use(URL_PREFIX + '/works', worksRouter);
 router.use(URL_PREFIX + '/contact', contactRouter);
+router.use(URL_PREFIX + '/posts', postsRouter);
 
 module.exports = router;
diff --git a/api-server/routes/logues.js b/api-server/routes/logues.js
new file mode 100644
index 00000000..26f087da
--- /dev/null
+++ b/api-server/routes/logues.js
@@ -0,0 +1,38 @@
+const express = require('express');
+const router = express.Router();
+const axios = require('axios');
+
+router.get('/', async (req, res, next) => {
+  // #swagger.tags = ['Logues']
+  // #swagger.summary = 'returns dynamic content for the blog page'
+  // #swagger.description = '/api/v1/logues'
+
+  const CONSUMER_KEY = process.env.TUMBLR_CONSUMER_KEY;
+  const url = 'https://api.tumblr.com/v2/blog/hwakabh.tumblr.com/posts?api_key=' + CONSUMER_KEY;
+  const respPosts = await axios.get(url)
+    .then(response => {
+      return response.data.response.posts
+    })
+    .catch(error => {
+      console.log(error);
+    })
+
+  const posts = [];
+  respPosts.forEach(p => {
+    posts.push({
+      date: p.date,
+      body: p.body
+    })
+  });
+
+  console.log(posts);
+
+  res.header('Content-Type', 'application/json; charset=utf-8');
+  res.json({
+    "path": req.originalUrl,
+    "content": posts
+  });
+
+});
+
+module.exports = router;
diff --git a/web-frontend/src/pages/Blog.vue b/web-frontend/src/pages/Blog.vue
index 66a6b3bc..901d21a3 100644
--- a/web-frontend/src/pages/Blog.vue
+++ b/web-frontend/src/pages/Blog.vue
@@ -1,67 +1,30 @@
-<template>
-  <section class="wrapper fullscreen">
-    <div class="inner">
-      <h1 class="major">Elements</h1>
-      <section>
-        <h2>Text</h2>
-        <p>This is <b>bold</b> and this is <strong>strong</strong>. This is <i>italic</i> and this is <em>emphasized</em>.
-        This is <sup>superscript</sup> text and this is <sub>subscript</sub> text.
-        This is <u>underlined</u> and this is code: <code>for (;;) { ... }</code>. Finally, <a href="#">this is a link</a>.</p>
-        <hr />
-        <p>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.</p>
-        <hr />
-        <h2>Heading Level 2</h2>
-        <h3>Heading Level 3</h3>
-        <h4>Heading Level 4</h4>
-        <hr />
-        <h3>Blockquote</h3>
-        <blockquote>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan faucibus. Vestibulum ante ipsum primis in faucibus lorem ipsum dolor sit amet nullam adipiscing eu felis.</blockquote>
-        <h3>Preformatted</h3>
-        <pre><code>i = 0;
+<script setup>
+import axios from "axios";
+import { ref } from "vue";
 
-while (!deck.isInOrder()) {
-    print 'Iteration ' + i;
-    deck.shuffle();
-    i++;
-}
+const postData = ref([]);
+axios.get('/api/v1/posts')
+  .then((resp) => {
+    postData.value = resp.data.content;
+  })
+  .catch((err) => {
+    console.log(err);
+  })
 
-print 'It took ' + i + ' iterations to sort the deck.';</code></pre>
-      </section>
+</script>
 
-      <!-- Lists -->
-      <section>
-        <h2>Lists</h2>
-        <div class="row">
-          <div class="col-4 col-12-medium">
-            <h3>Unordered</h3>
-            <ul>
-              <li>Dolor pulvinar etiam.</li>
-              <li>Sagittis adipiscing.</li>
-              <li>Felis enim feugiat.</li>
-            </ul>
-          </div>
-          <div class="col-4 col-12-medium">
-            <h3>Alternate</h3>
-            <ul class="alt">
-              <li>Dolor pulvinar etiam.</li>
-              <li>Sagittis adipiscing.</li>
-              <li>Felis enim feugiat.</li>
-            </ul>
-          </div>
-          <div class="col-4 col-12-medium">
-            <h3>Ordered</h3>
-            <ol>
-              <li>Dolor pulvinar etiam.</li>
-              <li>Etiam vel felis viverra.</li>
-              <li>Felis enim feugiat.</li>
-              <li>Dolor pulvinar etiam.</li>
-              <li>Etiam vel felis lorem.</li>
-              <li>Felis enim et feugiat.</li>
-            </ol>
-          </div>
+<template>
+  <section class="wrapper fullscreen">
+    <div class="inner">
+      <h1 class="major">Blogs</h1>
+        <div v-for="(p, idx) in postData"
+          :key="idx"
+          class="post-detail"
+          >
+            <div v-html="p.date"></div>
+            <div v-html="p.body"></div>
+          <hr />
         </div>
-      </section>
-
     </div>
   </section>
 </template>

From 4f17147088b78b0ea0189a0f1d47d1c8988c6baa Mon Sep 17 00:00:00 2001
From: hwakabh <hrykwkbys1024@gmail.com>
Date: Sun, 3 Aug 2025 23:07:19 +0900
Subject: [PATCH 2/3] ci: enabled to pass consumer_key of Tumblr API.

---
 .github/workflows/backend.yaml | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/backend.yaml b/.github/workflows/backend.yaml
index 0942ef8b..892b8ebe 100644
--- a/.github/workflows/backend.yaml
+++ b/.github/workflows/backend.yaml
@@ -11,7 +11,7 @@ on:
 
 env:
   MAIL_API_KEY: ${{ secrets.MAIL_API_KEY }}
-  RAPID_API_KEY: ${{ secrets.RAPID_API_KEY }}
+  TUMBLR_CONSUMER_KEY: ${{ secrets.TUMBLR_CONSUMER_KEY }}
 
 jobs:
   build-and-ship:
@@ -67,3 +67,4 @@ jobs:
           flags: '--service-min-instances=3'
           env_vars: |
             MAIL_API_KEY=${{ env.MAIL_API_KEY }}
+            TUMBLR_CONSUMER_KEY=${{ env.TUMBLR_CONSUMER_KEY }}

From 95a5920b931c966f2a7f89784308ead17fa1f338 Mon Sep 17 00:00:00 2001
From: hwakabh <hrykwkbys1024@gmail.com>
Date: Sun, 3 Aug 2025 23:13:01 +0900
Subject: [PATCH 3/3] chore(schema): updated swagger documents.

---
 schemas/swagger.json | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/schemas/swagger.json b/schemas/swagger.json
index 0810cc1f..a904ed58 100644
--- a/schemas/swagger.json
+++ b/schemas/swagger.json
@@ -226,6 +226,20 @@
           }
         }
       }
+    },
+    "/api/v1/posts/": {
+      "get": {
+        "tags": [
+          "Logues"
+        ],
+        "summary": "returns dynamic content for the blog page",
+        "description": "/api/v1/logues",
+        "responses": {
+          "200": {
+            "description": "OK"
+          }
+        }
+      }
     }
   }
 }
\ No newline at end of file