Merge pull request #713 from hwakabh/feat/blog-integrations

feat: Tumblr integrations

Author: hwakabh

.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 }}

api-server/routes/api.js

@@ -5,12 +5,14 @@ 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';
 
 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;

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;

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"
+          }
+        }
+      }
     }
   }
 }

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>