velog-readm-stats 1.3.0 (#32)

eungyeole · web-flow · commit 047dd369abe7 · 2023-10-03T20:52:41.000+09:00
* feat: 문자열 escape 문제를 수정합니다

* feat: 뱃지 문자열에 따른 넓이 문제를 수정합니다

fix: 문자열 넓이 구하는 함수를 jsdom방식으로 변경합니다

fix:

fix: 필요 없는 코드 제거

feat: 뱃지 문자열에 따른 넓이 문제를 수정합니다

* chore: 필요없는 dependency 제거

* chore: .vscode settings
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+v18.12.1
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,7 @@
+{
+  "editor.tabSize": 2,
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  }
+}
diff --git a/api/badge.js b/api/badge.js
@@ -1,8 +1,9 @@
-const createBadge = require("../src/cards/velog-badge");
+import createBadge from "../src/cards/velog-badge.js";
 
-module.exports = async (req, res) => {
+export default async (req, res) => {
   const { name } = req.query;
   res.setHeader("Content-Type", "image/svg+xml");
+
   try {
     return res.send(createBadge(name));
   } catch (e) {
diff --git a/api/index.js b/api/index.js
@@ -1,9 +1,9 @@
-const createCard = require("../src/cards/new-log");
-const createCardDark = require("../src/cards/new-log-black");
-const fetchPost = require("../src/fetchers/post-fetcher");
-const fetchReadPost = require("../src/fetchers/readpost-fetcher");
+import createCard from "../src/cards/new-log.js";
+import createCardDark from "../src/cards/new-log-black.js";
+import fetchPost from "../src/fetchers/post-fetcher.js";
+import fetchReadPost from "../src/fetchers/readpost-fetcher.js";
 
-module.exports = async (req, res) => {
+export default async (req, res) => {
   const { name, tag, color, slug } = req.query;
   res.setHeader("Content-Type", "image/svg+xml");
   try {
diff --git a/api/list.js b/api/list.js
@@ -1,7 +1,7 @@
-const createLatestPostsCard = require("../src/cards/latest-posts");
-const fetchPosts = require("../src/fetchers/posts-fetcher");
+import createLatestPostsCard from "../src/cards/latest-posts.js";
+import fetchPosts from "../src/fetchers/posts-fetcher.js";
 
-module.exports = async (req, res) => {
+export default async (req, res) => {
   const { name } = req.query;
   res.setHeader("Content-Type", "image/svg+xml");
   try {
diff --git a/api/redirect.js b/api/redirect.js
@@ -1,6 +1,6 @@
-const fetchPost = require("../src/fetchers/post-fetcher");
+import fetchPost from "../src/fetchers/post-fetcher.js";
 
-module.exports = async (req, res) => {
+export default async (req, res) => {
   const { name, tag } = req.query;
   try {
     const post = await fetchPost(name, tag);
diff --git a/package.json b/package.json
@@ -5,15 +5,16 @@
   "main": "./api/index.js",
   "scripts": {
     "start": "node ./api/index.js",
-    "dev": "vercel dev",
+    "dev:vercel": "vercel dev --debug",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "axios": "^0.21.4",
-    "express": "^4.17.1",
-    "graphql-request": "^3.4.0"
+    "@napi-rs/canvas": "^0.1.44",
+    "axios": "^1.5.1",
+    "graphql-request": "^6.1.0"
   },
-  "type": "commonjs"
+  "type": "module",
+  "devDependencies": {} 
 }
diff --git a/src/cards/latest-posts.js b/src/cards/latest-posts.js
@@ -1,3 +1,5 @@
+import { escapeHtml } from "../utils/index.js";
+
 const createLatestCardTitle = (username) => {
   return `
     <g data-testid="card-title" transform="translate(25, 35)">
@@ -9,37 +11,28 @@ const createLatestCardTitle = (username) => {
 };
 
 const createLatestCardBody = ({ posts }) => {
-  const post_urls = posts.map(
+  const postUrls = posts.map(
     (post) => `https://velog.io/@${post.user.username}/` + post.url_slug
   );
+
   return `
   <g data-testid="main-card-body" transform="translate(0, 45)">
   <svg data-testid="lang-items" x="25" width="400" height="400" viewBox="0 0 400 400">
       <g transform="translate(0, 0)">
-          <text data-testid="lang-list" class="list-style" x="5" y="20">•</text>
-          <a href="${post_urls[0]}">
-              <text data-testid="lang-name" x="20" y="20" class="log-title">${
-                posts[0]?.title || "-"
-              }</text>
-          </a>
-          <text data-testid="lang-list" class="list-style" x="5" y="43">•</text>
-          <a href="${post_urls[1]}">
-              <text data-testid="lang-name" x="20" y="43" class="log-title">${
-                posts[1]?.title || "-"
-              }</text>
-          </a>
-          <text data-testid="lang-list" class="list-style" x="5" y="66">•</text>
-          <a href="${post_urls[2]}">
-              <text data-testid="lang-name" x="20" y="66" class="log-title">${
-                posts[2]?.title || "-"
-              }</text>
-          </a>
-          <text data-testid="lang-list" class="list-style" x="5" y="89">•</text>
-          <a href="${post_urls[3]}">
-              <text data-testid="lang-name" x="20" y="89" class="log-title">${
-                posts[3]?.title || "-"
-              }</text>
-          </a>
+          ${postUrls.map((url, index) => {
+            return `
+              <text data-testid="lang-list" class="list-style" x="5" y="${
+                20 + index * 23
+              }">•</text>
+              <a href="${url}">
+                  <text data-testid="lang-name" x="20" y="${
+                    20 + index * 23
+                  }" class="log-title">${
+              escapeHtml(posts[index]?.title) || "-"
+            }</text>
+              </a>
+            `;
+          })}
       </g>
   </svg>
 </g>
@@ -73,4 +66,4 @@ const createLatestCard = (data) => {
     `;
 };
 
-module.exports = createLatestCard;
+export default createLatestCard;
diff --git a/src/cards/new-log-black.js b/src/cards/new-log-black.js
@@ -1,4 +1,4 @@
-const { koCheck, replaceAll } = require("../utils");
+import { koCheck, replaceAll } from "../utils/index.js";
 
 const createCardTitle = (username, likes) => {
   const likeX = likes > 99 ? 365 : likes > 9 ? 370 : 380;
@@ -20,11 +20,11 @@ const createCardBody = ({ title, short_description }) => {
         <g data-testid="main-card-body" transform="translate(0, 45)">
         <svg data-testid="lang-items" x="25" width="400" height="40" viewBox="0 0 400 40">
             <g transform="translate(0, 0)">
-                <text data-testid="lang-name" x="2" y="15" class="log-title">${title}</text>
-                <text ata-testid="lang-description" x="2" y="35" class="log-description">${replaceAll(
-                  short_description,
-                  "<",
-                  "&lt;"
+                <text data-testid="lang-name" x="2" y="15" class="log-title">${escapeHtml(
+                  title
+                )}</text>
+                <text ata-testid="lang-description" x="2" y="35" class="log-description">${escapeHtml(
+                  short_description
                 )}</text>
             </g>
         </svg>
@@ -85,4 +85,4 @@ const createCardDark = (data) => {
     `;
 };
 
-module.exports = createCardDark;
+export default createCardDark;
diff --git a/src/cards/new-log.js b/src/cards/new-log.js
@@ -1,4 +1,4 @@
-const { koCheck, replaceAll } = require("../utils");
+import { koCheck, escapeHtml, replaceAll } from "../utils/index.js";
 
 const createCardTitle = (username, likes) => {
   const likeX = likes > 99 ? 365 : likes > 9 ? 370 : 380;
@@ -20,11 +20,11 @@ const createCardBody = ({ title, short_description }) => {
         <g data-testid="main-card-body" transform="translate(0, 45)">
         <svg data-testid="lang-items" x="25" width="400" height="40" viewBox="0 0 400 40">
             <g transform="translate(0, 0)">
-                <text data-testid="lang-name" x="2" y="15" class="log-title">${title}</text>
-                <text ata-testid="lang-description" x="2" y="35" class="log-description">${replaceAll(
-                  short_description,
-                  "<",
-                  "&lt;"
+                <text data-testid="lang-name" x="2" y="15" class="log-title">${escapeHtml(
+                  title
+                )}</text>
+                <text ata-testid="lang-description" x="2" y="35" class="log-description">${escapeHtml(
+                  short_description
                 )}</text>
             </g>
         </svg>
@@ -85,4 +85,4 @@ const createCard = (data) => {
     `;
 };
 
-module.exports = createCard;
+export default createCard;
diff --git a/src/cards/velog-badge.js b/src/cards/velog-badge.js
@@ -1,20 +1,29 @@
+import { getTextWidth } from "../utils/index.js";
+
 const createBadge = (name) => {
-  const size = name.length * 9;
+  const size = getTextWidth(name, "13px --apple-system") * 1.1;
+
+  const rectWidth = size + 16;
+  const rectX = 22;
+  const containerWidth = rectWidth + rectX;
+
   return `
-        <svg width="117" height="34" viewBox="0 0 117 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <svg width="${containerWidth}" height="25" fill="none" xmlns="http://www.w3.org/2000/svg">
             <style>
                 .name{ fill: #ffffff; font-weight: 500; font-size: 13px;}
             </style>
-            <svg width="98" height="25" viewBox="0 0 98 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <g>
-                    <rect x="22" width="${size}" height="25" fill="#20C997"/>
-                    <text x="30" y="17" class="name">${name}</text>
+            <g>
+                <g fill="#20C997">
+                    <rect x="${rectX}" width="${rectWidth}" height="25" />
+                    <text x="${
+                      rectX + 8
+                    }" y="17" textLength="${size}" class="name">${name}</text>
                 </g>
                 <path d="M3.125 0H21.875C23.6009 0 25 1.39911 25 3.125V21.875C25 23.6009 23.6009 25 21.875 25H3.125C1.39911 25 0 23.6009 0 21.875V3.125C0 1.39911 1.39911 0 3.125 0Z" fill="#20C997"/>
                 <path d="M18.6199 8.526V7.54163C17.9949 7.3385 17.2605 7.11975 16.4167 6.88538C15.573 6.63538 15.0027 6.51038 14.7058 6.51038C14.0496 6.51038 13.6589 6.82288 13.5339 7.44788L12.0105 16.0963C11.5261 15.4557 11.1277 14.9166 10.8152 14.4791C10.3308 13.7916 9.8855 13.0026 9.47925 12.1119C9.05737 11.2213 8.84644 10.4244 8.84644 9.72131C8.84644 9.29944 8.96362 8.9635 9.198 8.7135C9.41675 8.44788 9.83081 8.11194 10.4402 7.70569C9.81519 6.90881 9.03393 6.51038 8.09643 6.51038C7.59644 6.51038 7.18237 6.65881 6.85425 6.95569C6.5105 7.25256 6.33862 7.69006 6.33862 8.26819C6.33862 9.23694 6.74487 10.4479 7.55737 11.901C8.35425 13.3385 9.89331 15.5026 12.1746 18.3932L14.4949 18.5573L16.2761 8.526H18.6199Z" fill="white"/>
-            </svg>
+            </g>
         </svg>
     `;
 };
 
-module.exports = createBadge;
+export default createBadge;
diff --git a/src/fetchers/post-fetcher.js b/src/fetchers/post-fetcher.js
@@ -1,4 +1,4 @@
-const { request } = require("../utils");
+import { request } from "../utils/index.js";
 
 const fetcher = (variables) => {
   return request({
@@ -37,4 +37,4 @@ async function fetchPost(name, tag) {
   }
 }
 
-module.exports = fetchPost;
+export default fetchPost;
diff --git a/src/fetchers/posts-fetcher.js b/src/fetchers/posts-fetcher.js
@@ -1,4 +1,4 @@
-const { request } = require("../utils");
+import { request } from "../utils/index.js";
 
 const fetcher = (variables) => {
   return request({
@@ -37,4 +37,4 @@ async function fetchPosts(name) {
   }
 }
 
-module.exports = fetchPosts;
+export default fetchPosts;
diff --git a/src/fetchers/readpost-fetcher.js b/src/fetchers/readpost-fetcher.js
@@ -1,4 +1,4 @@
-const { request } = require("../utils");
+import { request } from "../utils/index.js";
 
 const fetcher = (variables) => {
   return request({
@@ -37,4 +37,4 @@ async function fetchReadPost(name, slug) {
   }
 }
 
-module.exports = fetchReadPost;
+export default fetchReadPost;
diff --git a/src/utils/index.js b/src/utils/index.js
@@ -1,21 +1,40 @@
-const axios = require("axios");
-function request(data) {
+import axios from "axios";
+import canvas from "@napi-rs/canvas";
+
+export function request(data) {
   return axios({
     url: "https://v2.velog.io/graphql",
     method: "post",
     data,
   });
 }
-function koCheck(lang) {
+
+export function koCheck(lang) {
   var check = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/;
   return check.test(lang);
 }
-function replaceAll(str, searchStr, replaceStr) {
+
+export function replaceAll(str, searchStr, replaceStr) {
   return str.split(searchStr).join(replaceStr);
 }
 
-module.exports = {
-  request,
-  koCheck,
-  replaceAll,
-};
+export function escapeHtml(text) {
+  const map = {
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;",
+    "'": "&#039;",
+  };
+  return text.replace(/[&<>"']/g, function (m) {
+    return map[m];
+  });
+}
+
+export function getTextWidth(text, font) {
+  const ctx = canvas.createCanvas(1, 1).getContext("2d");
+  ctx.font = font;
+  const textMetrics = ctx.measureText(text);
+
+  return textMetrics.width;
+}
diff --git a/vercel.json b/vercel.json
@@ -1,8 +1,8 @@
 {
-    "redirects": [
-        {
-          "source": "/",
-          "destination": "https://github.com/eungyeole/velog-readme-stats"
-        }
-    ]
+  "redirects": [
+    {
+      "source": "/",
+      "destination": "https://github.com/eungyeole/velog-readme-stats"
+    }
+  ]
 }
diff --git a/yarn.lock b/yarn.lock
