[Feat] Visitor count with Hits service (#162)

- #close #161 Co-authored-by: cloud <[email protected]>
sanghunlee-711 · Jan 31, 2024 · 42f991d · 42f991d
1 parent e26eb35
commit 42f991d
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 1 deletion.
diff --git a/src/components/Hits.js b/src/components/Hits.js
@@ -0,0 +1,17 @@
+class Hits {
+  constructor({ $target }) {
+    this.$target = $target;
+
+    this.render();
+  }
+
+  render() {
+    this.$target.innerHTML = /* html */ `
+      <div class="hits-wrapper">
+        <a href="https://hits.seeyoufarm.com"><img src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fwww.cloud-sanghun.com&count_bg=%23C9C9C9&title_bg=%23555555&icon=googlecloud.svg&icon_color=%23E7E7E7&title=hits&edge_flat=false"/></a>
+      <div>
+  `;
+  }
+}
+
+export default Hits;
diff --git a/src/components/Nav.js b/src/components/Nav.js
@@ -1,5 +1,6 @@
 import { SHOW_ROUTE } from '../common/constants/route.js';
 import BurgerNavPopup from './BurggerNavPopup.js';
+
 import Modal from './Modal.js';
 
 class Nav {
@@ -29,7 +30,7 @@ class Nav {
 
   render = () => {
     this.$wrapper.innerHTML = `
-      <h1>Sanghun(Cloud) Lee</h1>
+      <h1>Sanghun Lee</h1>
       <ul class="nav_list">
         ${SHOW_ROUTE.map((el) => {
           return `

diff --git a/src/pages/Home/constants/element.js b/src/pages/Home/constants/element.js
@@ -2,4 +2,5 @@ export const $ELEMENT = {
   HOME_MAIN_CONTAINER: 'home-main-container',
   LATEST_POST_CONTAINER: 'latest-post-container',
   RESUME_CONTAINERL: 'resume-container',
+  HITS_CONTAINER: 'hits-wrapper',
 };
diff --git a/src/pages/Home/index.js b/src/pages/Home/index.js
@@ -1,5 +1,6 @@
 import Contribution from './components/Contribution/index.js';
 import LatestPost from './components/LatestPost/index.js';
+import Hits from '../../components/Hits.js';
 import { $ELEMENT } from './constants/element.js';
 
 class Home {
@@ -17,6 +18,7 @@ class Home {
     <div>
       <section class="${$ELEMENT.LATEST_POST_CONTAINER}"></section>
       <section class="${$ELEMENT.RESUME_CONTAINERL}"></section>
+      <div class=${$ELEMENT.HITS_CONTAINER}></div>
     </div>
     `;
   };
@@ -30,11 +32,13 @@ class Home {
     const resumeContainer = document.querySelector(
       `.${$ELEMENT.RESUME_CONTAINERL}`
     );
+    const hitsContainer = document.querySelector(`.${$ELEMENT.HITS_CONTAINER}`);
 
     new LatestPost({
       $target: postContainer,
     });
     new Contribution({ $target: resumeContainer });
+    new Hits({ $target: hitsContainer });
   };
 
   addListeners = () => {};

diff --git a/src/styles/style.css b/src/styles/style.css
@@ -544,3 +544,7 @@ body {
   align-items: center;
   justify-content: center;
 }
+
+.hits-wrapper {
+  margin: 36px 0px;
+}