feat: add counter page and add star it on github

watchakorn-18k · Dec 22, 2023 · f2465f8 · f2465f8
1 parent d66a51a
commit f2465f8
Show file tree

Hide file tree

Showing 7 changed files with 92 additions and 54 deletions.
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-theme="dark">
 
 <head>
   <link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
@@ -11,7 +11,8 @@
   <meta name="theme-color" content="#ffffff">
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <link href="https://fonts.googleapis.com/css2?family=K2D:wght@200&family=Noto+Sans+Thai:wght@300&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=K2D:wght@200&family=Noto+Sans+Thai:wght@300&display=swap"
+    rel="stylesheet">
   <meta name="title" content="Genarate Image | สร้างรูปภาพด้วยข้อความ">
   <meta name="description" content="Genarate Image, สร้างรูปภาพด้วยข้อความแบบฟรีไม่เสียเงิน">
 
@@ -20,15 +21,17 @@
   <meta property="og:url" content="https://metatags.io/">
   <meta property="og:title" content="Genarate Image สร้างรูปภาพด้วยข้อความ">
   <meta property="og:description" content="Genarate Image From Image, สร้างรูปภาพด้วยข้อความแบบฟรีไม่เสียเงิน">
-  <meta property="og:image" content="https://cdn.discordapp.com/attachments/585069498986397707/1111517913015402537/6fa251c196ebc9221d3690b2f7cef060.png">
+  <meta property="og:image"
+    content="https://cdn.discordapp.com/attachments/585069498986397707/1111517913015402537/6fa251c196ebc9221d3690b2f7cef060.png">
 
   <!-- Twitter -->
   <meta property="twitter:card" content="summary_large_image">
   <meta property="twitter:url" content="https://metatags.io/">
   <meta property="twitter:title" content="Genarate Image สร้างรูปภาพด้วยข้อความ">
   <meta property="twitter:description" content="Genarate Image From Image, สร้างรูปภาพด้วยข้อความแบบฟรีไม่เสียเงิน">
-  <meta property="twitter:image" content="https://cdn.discordapp.com/attachments/585069498986397707/1111517913015402537/6fa251c196ebc9221d3690b2f7cef060.png">
-    <title>Genarate Image | สร้างรูปภาพด้วยข้อความ</title>
+  <meta property="twitter:image"
+    content="https://cdn.discordapp.com/attachments/585069498986397707/1111517913015402537/6fa251c196ebc9221d3690b2f7cef060.png">
+  <title>Genarate Image | สร้างรูปภาพด้วยข้อความ</title>
 </head>
 
 <body>

diff --git a/readme.md b/readme.md
@@ -80,6 +80,7 @@ npm run build
 
 # Changelog
 
+- v1.2.0 add counter page and add star it on github
 - v1.1.9 change icon twitter to X
 - v1.1.8 add button copy image
 - v1.1.7 Fix bug can't access image

diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -6,24 +6,35 @@ import {
   SiTsnode,
   SiVite,
 } from "@icons-pack/react-simple-icons";
+import axios from "axios";
+import { useEffect, useState } from "react";
 
 export default function Footer() {
   const { t } = useTranslation();
+  const [counter, setCounter] = useState(0);
+  const fetchCounter = async () => {
+    const response = await axios.get(
+      "https://counterapi.com/api/watchakorn-18k.github.io/generate_image_web/"
+    );
+    setCounter(response.data.value);
+  };
+  useEffect(() => {
+    fetchCounter();
+  }, [counter]);
   return (
-    <div className="pt-10">
+    <div className="pt-10 bg-neutral">
       <footer className="footer p-5 bg-neutral text-neutral-content flex justify-center md:flex md:justify-around ">
         <div>
           <span className="footer-title"> {t("by")}</span>
           <div className="grid grid-flow-row grid-cols-1 md:grid-flow-col gap-5">
-
             <div className="grid grid-flow-col gap-0 md:gap-1">
               <SiFastapi />
               <SiPython />
               <SiVite />
               <SiTsnode />
             </div>
 
-            <p >{t("name_1")} ( Front-End / Back-End )</p>
+            <p>{t("name_1")} ( Front-End / Back-End )</p>
           </div>
           <div className="grid grid-flow-col">
             <svg
@@ -73,19 +84,24 @@ export default function Footer() {
         </div>
       </footer>
       <div className="footer p-2 bg-neutral text-neutral-content flex justify-center md:flex md:justify-around ">
-        <div className="flex justify-center w-full">
-          <div className="grid grid-cols-1 gap-1 place-items-center">
-          <img
-            src="https://sciencetech.nrru.ac.th/vendor/bootstrap/images/logo_nrru.png"
-            alt=""
-            className="w-5 grayscale brightness-150 contrast-125 hover:grayscale-0 hover:contrast-100 transition duration-300"
-            draggable="false"
-          />
-            <span className="footer-title">NRRU</span>
+        <div className="flex flex-col">
+          <div className="flex justify-center w-full">
+            <div className="grid grid-cols-1 gap-1 place-items-center">
+              <img
+                src="https://sciencetech.nrru.ac.th/vendor/bootstrap/images/logo_nrru.png"
+                alt=""
+                className="w-5 grayscale brightness-150 contrast-125 hover:grayscale-0 hover:contrast-100 transition duration-300"
+                draggable="false"
+              />
+              <span className="footer-title">NRRU</span>
+            </div>
+          </div>
+          <div>
+            <span className="badge badge-neutral-base p-4">
+              {t("counter_viewer")} : {counter}
+            </span>
           </div>
-
         </div>
-
       </div>
     </div>
   );

diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
@@ -1,41 +1,55 @@
-import { useState, useEffect } from 'react';
-import i18n from 'i18next';
-import { useTranslation, initReactI18next } from 'react-i18next';
-import en from '@/locales/en.json';
-import th from '@/locales/th.json';
-import { IconLanguage } from "@tabler/icons-react";
-
+import { useState, useEffect } from "react";
+import i18n from "i18next";
+import { useTranslation, initReactI18next } from "react-i18next";
+import en from "@/locales/en.json";
+import th from "@/locales/th.json";
+import { IconBrandGithub, IconLanguage } from "@tabler/icons-react";
 
 // Initialize i18next
 i18n.use(initReactI18next).init({
-    resources: {
-      en: { translation: en },
-      th: { translation: th },
-    },
-    lng: sessionStorage.getItem('language') || 'en', // Default language
-  });
-
+  resources: {
+    en: { translation: en },
+    th: { translation: th },
+  },
+  lng: sessionStorage.getItem("language") || "en", // Default language
+});
 
 export default function Navbar() {
   const [language, setLanguage] = useState(() => {
-    const storedValue = sessionStorage.getItem('language');
-    return storedValue !== null ? storedValue : 'th';
-    });
-    const { t, i18n } = useTranslation()
+    const storedValue = sessionStorage.getItem("language");
+    return storedValue !== null ? storedValue : "th";
+  });
+  const { t, i18n } = useTranslation();
   useEffect(() => {
-        sessionStorage.setItem('language', language);
-    }, [language]);
-    
-    const handleLanguageChange = (newLanguage:string) => {
-        i18n.changeLanguage(newLanguage);
-        setLanguage(newLanguage);
-      };
+    sessionStorage.setItem("language", language);
+  }, [language]);
+
+  const handleLanguageChange = (newLanguage: string) => {
+    i18n.changeLanguage(newLanguage);
+    setLanguage(newLanguage);
+  };
   return (
     <div>
       <div className="navbar bg-base-100">
         <div className="flex-1">
-          <a className="btn btn-ghost normal-case text-xl hover:animate-pulse">{t('name_web')}</a>
+          <a className="btn btn-ghost normal-case text-xl hover:animate-pulse">
+            {t("name_web")}
+          </a>
         </div>
+        <button className="btn btn-ghost">
+          <div className="flex gap-2 items-center">
+            <p
+              onClick={() =>
+                (window.location.href =
+                  "https://github.com/watchakorn-18k/generate_image_web")
+              }
+            >
+              {t("star_github")}
+            </p>
+            <IconBrandGithub />
+          </div>
+        </button>
+        <div className="counterapi" style={{ minHeight: "44px" }}></div>
         <div className="dropdown dropdown-bottom dropdown-end dropdown-hover">
           <div className="flex-none">
             <button className="btn btn-square btn-ghost">
@@ -44,14 +58,14 @@ export default function Navbar() {
           </div>
           <ul
             tabIndex={0}
-            className="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52" about={language}
+            className="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52"
+            about={language}
           >
-            <li onClick={() => handleLanguageChange('th')}>
+            <li onClick={() => handleLanguageChange("th")}>
               <a>ภาษาไทย</a>
             </li>
-            <li onClick={() => handleLanguageChange('en')}>
+            <li onClick={() => handleLanguageChange("en")}>
               <a>English</a>
-
             </li>
           </ul>
         </div>

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -12,5 +12,7 @@
     "tool-tip-image": "Image",
     "scenario": "Scenario",
     "status_err": "Your prompt has been blocked by Bing. Try to change any bad words and try again or unable to portray this word.",
-    "tool-tip-copy": "Copy image"
+    "tool-tip-copy": "Copy image",
+    "star_github": "Star it on GitHub",
+    "counter_viewer": "Total Page Views"
 }
diff --git a/src/locales/th.json b/src/locales/th.json
@@ -12,5 +12,7 @@
     "tool-tip-image": "รูปภาพ",
     "scenario": "สถานการณ์ที่",
     "status_err": "พรอมต์ของคุณถูกบล็อกโดย Bing เปลี่ยนคำเป็นคำที่ดีกว่านี้หน่อยนะหรือไม่สามารถวาดภาพคำนี้ได้",
-    "tool-tip-copy": "คัดลอกรูปภาพ"
+    "tool-tip-copy": "คัดลอกรูปภาพ",
+    "star_github": "ติดดาวบน GitHub",
+    "counter_viewer": "ยอดผู้เข้าชมเว็บ"
 }
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,15 +1,15 @@
 const withMT = require("@material-tailwind/react/utils/withMT");
 
 module.exports = withMT({
-  content: ['./src/**/*.{js,ts,jsx,tsx}','node_modules/@material-tailwind/react/components/**/*.{js,ts,jsx,tsx}"','node_modules/@material-tailwind/react/theme/components/**/*.{js,ts,jsx,tsx}'],
+  content: ['./src/**/*.{js,ts,jsx,tsx}', 'node_modules/@material-tailwind/react/components/**/*.{js,ts,jsx,tsx}"', 'node_modules/@material-tailwind/react/theme/components/**/*.{js,ts,jsx,tsx}'],
   theme: {
     extend: {},
     container: {
       center: true,
     },
   },
-  plugins: [require("@tailwindcss/typography"),require('daisyui')],
+  plugins: [require("@tailwindcss/typography"), require('daisyui')],
   daisyui: {
-    themes: ["emerald"],
+    themes: ["light"],
   },
 });