functions: hatena: show hatena stars

Signed-off-by: smallkirby <ssmallkirby@gmail.com>

assets/js/app.js

@@ -4,6 +4,7 @@ import {
   clipboard,
   highlightToc,
   algoliaSearch,
+  hatena,
 } from './components/components';
 // eslint-disable-next-line no-unused-vars
 import { header } from './layouts/header';

assets/js/components/components.js

@@ -2,3 +2,4 @@ export { switcher } from './switchTheme';
 export { clipboard } from './clipboard';
 export { highlightToc } from './toc';
 export { algoliaSearch } from './bundle/algolia';
+export { hatena } from './hatena';

assets/js/components/hatena.js

@@ -0,0 +1,46 @@
+// eslint-disable-next-line no-unused-vars
+const fetchHatenaStars = (uri) => {
+  const colors = {
+    normal: '#ffb000',
+    green: '#00d300',
+    red: '#ff003e',
+    blue: '#00a1de',
+    purple: '#b400c0',
+  };
+
+  window.addEventListener('DOMContentLoaded', () => {
+    const setStars = (stars) => {
+      const container = document.getElementById('hatena-stars');
+      if (!container) {
+        return;
+      }
+
+      for (const star of stars) {
+        const starSpan = document.createElement('span');
+        starSpan.classList.add('hatena-star');
+        starSpan.classList.add(`hatena-star-${star.color}`);
+        starSpan.innerHTML = '★';
+        const color = colors[star.color] || colors['normal'];
+        starSpan.style.color = color;
+        container.appendChild(starSpan);
+      }
+    };
+
+    fetch(`/funcs/hatenastar?uri=${encodeURIComponent(uri)}`).then(
+      async (res) => {
+        if (res.status !== 200) {
+          console.error('Failed to fetch stars');
+          return;
+        }
+        const data = await res.json();
+        if (data.msg !== 'ok') {
+          console.error('Failed to fetch stars: ' + data.msg);
+          return;
+        }
+
+        const stars = data.stars;
+        setStars(stars);
+      }
+    );
+  });
+};

assets/scss/components/_hatena.scss

@@ -0,0 +1,25 @@
+.hatena {
+  display: flex;
+  width: 100%;
+
+  .hatena-bookmark {
+    margin-right: 1rem;
+  }
+
+  .hatena-star-area {
+    width: 100%;
+    display: flex;
+    align-items: center;
+
+    img {
+      cursor: pointer;
+      display: block;
+      margin-right: 0.5rem;
+    }
+
+    .hatena-star {
+      font-size: 1.1rem;
+      cursor: pointer;
+    }
+  }
+}

assets/scss/main.scss

@@ -16,7 +16,7 @@
 @import 'components/switch-theme', 'components/socials', 'components/buttons',
   'components/pagination', 'components/draft-label', 'components/clipboard',
   'components/code-highlight', 'components/markdown', 'components/toc',
-  'components/page-header', 'components/search';
+  'components/page-header', 'components/search', 'components/hatena';
 
 // 6. Page-specific styles
 @import 'pages/home', 'pages/contact', 'pages/single', 'pages/terms',

functions/funcs/hatenastar.js

@@ -3,29 +3,38 @@ export async function onRequest(context) {
   const urlObj = new URL(request.url);
   const uri = urlObj.searchParams.get('uri');
   if (!uri) {
-    return new Response(JSON.stringify({
-      msg: 'uri is required',
-    }), {
-      status: 400,
-    });
+    return new Response(
+      JSON.stringify({
+        msg: 'uri is required',
+      }),
+      {
+        status: 400,
+      }
+    );
   }
 
-  const res = await fetch(`https://s.hatena.com/entry.json?uri=${encodeURIComponent(uri)}`, {
-    method: 'GET',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-  });
+  const res = await fetch(
+    `https://s.hatena.com/entry.json?uri=${encodeURIComponent(uri)}`,
+    {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    }
+  );
   const data = await res.json();
   const entries = data.entries;
 
   if (!entries || entries.length === 0) {
-    return new Response(JSON.stringify({
-      stars: [],
-      msg: 'ok',
-    }), {
-      status: 200,
-    });
+    return new Response(
+      JSON.stringify({
+        stars: [],
+        msg: 'ok',
+      }),
+      {
+        status: 200,
+      }
+    );
   }
 
   // eslint-disable-next-line camelcase
@@ -47,10 +56,13 @@ export async function onRequest(context) {
     }
   }
 
-  return new Response(JSON.stringify({
-    stars: allStars,
-    msg: 'ok',
-  }), {
-    status: 200,
-  });
-};
+  return new Response(
+    JSON.stringify({
+      stars: allStars,
+      msg: 'ok',
+    }),
+    {
+      status: 200,
+    }
+  );
+}

layouts/partials/head/head.html

@@ -15,10 +15,13 @@
     crossorigin="anonymous"
     referrerpolicy="no-referrer"
   ></script>
-  <script src="https://unpkg.com/lunr/lunr.js"></script>
-  <script src="/js/vendor/tinyseg.js"></script>
-  <script src="/js/vendor/lunr.stemmer.support.js"></script>
-  <script src="/js/vendor/lunr.ja.js"></script>
+  <!--
+    <script src="https://unpkg.com/lunr/lunr.js"></script>
+    <script src="/js/vendor/tinyseg.js"></script>
+    <script src="/js/vendor/lunr.stemmer.support.js"></script>
+    <script src="/js/vendor/lunr.ja.js"></script>
+  -->
+  <script src="https://s.hatena.ne.jp/js/HatenaStar.js"></script>
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   {{ partial "head/resource-hints.html" . }} {{ partial "head/styles.html" . }}
   {{ partial "head/seo/seo.html" . }} {{ partial "head/favicons.html" . }} {{

layouts/partials/posts/hatena-bookmark.html → layouts/partials/posts/hatena.html

@@ -1,11 +1,12 @@
 <!-- Hatena Bookmark -->
-{{ $title := .Title }} {{ $url := printf "%s" .RelPermalink }} {{ $body := print
-$title ", by " .Site.Title "\n" .Params.description "\n\n" $url "\n" }}
+{{ $title := .Title }} {{ $path := printf "%s" .RelPermalink }} {{ $url :=
+printf "%s" .Permalink }} {{ $body := print $title ", by " .Site.Title "\n"
+.Params.description "\n\n" $url "\n" }}
 
-<section>
-  <div class="hatena-share">
+<div class="hatena">
+  <div class="hatena-bookmark">
     <a
-      href="https://b.hatena.ne.jp/entry/s/blog.smallkirby.com{{ $url }}"
+      href="https://b.hatena.ne.jp/entry/s/blog.smallkirby.com{{ $path }}"
       class="hatena-bookmark-button"
       data-hatena-bookmark-layout="basic-label-counter"
       data-hatena-bookmark-lang="en"
@@ -24,4 +25,18 @@
       async="async"
     ></script>
   </div>
-</section>
+  <div class="hatena-star-area" id="hatena-star">
+    {{ $hatenajs := resources.Get "js/components/hatena.js" }}
+    <script src="{{ $hatenajs.Permalink }}"></script>
+    <script>
+      fetchHatenaStars('{{ $url }}');
+    </script>
+    <div>
+      <img
+        src="https://cdn.blog.st-hatena.com/images/theme/star/hatena-star-add-button.svg"
+        alt="Add Hatena Star"
+      />
+    </div>
+    <div class="hatena-stars" id="hatena-stars"></div>
+  </div>
+</div>

layouts/posts/single.html

@@ -1,8 +1,8 @@
 {{ define "main" }}
-<section class="content-container">
+<section class="content-container" id="post-container">
   <div class="content-center-column" id="content-div">
     <section class="page-header">
-      <h1 class="page-header-title">
+      <h1 class="page-header-title" id="post-title">
         {{- .Title -}}
       </h1>
       <div class="post-list-meta">
@@ -67,7 +67,7 @@ <h1 class="page-header-title">
               {{ end }}
             {{ end }}
           </div>
-          {{ partial "posts/hatena-bookmark.html" . }}
+          {{ partial "posts/hatena.html" . }}
           {{ partial "posts/social-share.html" . }}
           {{- if .Params.series }}
             <div class="series">