chore: localization button added

Author: henrynoowah

package.json

@@ -18,6 +18,7 @@
     "eslint": "8.35.0",
     "eslint-config-next": "13.2.3",
     "framer-motion": "^11.0.3",
+    "lodash": "^4.17.21",
     "negotiator": "^0.6.3",
     "next": "^14.2.3",
     "react": "^18.3.1",

src/app/[locale]/_components/LocaleToggle.tsx

@@ -0,0 +1,52 @@
+'use client'
+
+import { themeCheck } from '@/utils/themeCheck'
+import { useParams, useRouter } from 'next/navigation'
+import { MouseEventHandler, useEffect, useState } from 'react'
+
+const LocaleToggle = () => {
+  const router = useRouter()
+  const params = useParams()
+  const locale = params.locale as string
+
+  const [iconToggle, setIconToggle] = useState<boolean>(themeCheck())
+
+  const handleLocaleSwitch: MouseEventHandler<HTMLButtonElement> = (e) => {
+    e.preventDefault()
+    router.replace(locale === 'ko' ? '/' : '/ko')
+    setIconToggle(true)
+  }
+
+  useEffect(() => {
+    if (iconToggle === true) {
+      setIconToggle(false)
+    }
+  }, [iconToggle])
+
+  console.log(locale === 'ko')
+
+  return (
+    <button
+      aria-label="Theme Toggle"
+      onClick={handleLocaleSwitch}
+      className="!text-light relative w-[36px] h-[36px] flex justify-center items-center rounded-full ring-1 ring-light/60 dark:bg-dark-80"
+    >
+      <span
+        className={`absolute ${
+          locale === 'en' || !locale ? 'rotate-0 opacity-100' : 'rotate-180 opacity-0'
+        }  transform transition duration-500 ease-in-out`}
+      >
+        <p className="text-sm font-semibold">EN</p>
+      </span>
+      <span
+        className={`absolute ${
+          locale === 'ko' ? 'rotate-0 opacity-100' : 'rotate-180 opacity-0'
+        }  transform transition duration-500 ease-in-out`}
+      >
+        <p className="text-sm font-semibold">KO</p>
+      </span>
+    </button>
+  )
+}
+
+export default LocaleToggle

src/app/[locale]/_components/MainContainer.tsx

@@ -9,9 +9,9 @@ import { ChatBubbleLeftEllipsisIcon, DocumentIcon } from '@heroicons/react/24/so
 import { Application, SPEObject } from '@splinetool/runtime'
 import { motion } from 'framer-motion'
 import dynamic from 'next/dynamic'
-import { Inter } from 'next/font/google'
-import { useParams, usePathname, useSearchParams } from 'next/navigation'
+import { useParams } from 'next/navigation'
 import { useRef, useState } from 'react'
+import LocaleToggle from './LocaleToggle'
 
 const Spline = dynamic(() => import('@splinetool/react-spline'), {
   ssr: false,
@@ -113,6 +113,9 @@ const MainContainer = () => {
       >
         <ChatBox isOpen={isBotChatOpened} />
       </div>
+      <div className={`fixed w-full max-w-[1020px] flex justify-end z-30 pointer-events-auto top-4 end-4`}>
+        <LocaleToggle />
+      </div>
 
       {navList.map((nav, i) => (
         <NavModal selected={selected === nav.name} {...nav} key={`nav-modal-${nav}-${i}`} />

src/app/[locale]/_components/NavModal.tsx

@@ -41,13 +41,14 @@ export const NavModal = ({ onClick, selected, ...nav }: Params) => {
   }
 
   const windowWidth = useResizeHandler()
+
   return isReady && document.getElementById(nav.name) ? (
     <motion.div
       key={`modal-${nav.name}-${windowWidth}`}
       initial={'closed'}
       animate={!!selected ? 'open' : 'closed'}
       variants={{
-        open: (height = 1000) => ({
+        open: (height = 500) => ({
           clipPath: `circle(${height * 2 + 200}px at ${
             (document.getElementById(nav.name)?.getBoundingClientRect().x as number) + 25
           }px ${(document.getElementById(nav.name)?.getBoundingClientRect().y as number) + 25}px)`,
@@ -83,7 +84,7 @@ export const NavModal = ({ onClick, selected, ...nav }: Params) => {
           <span className="w-[24px] h-[24px] aspect-square">{nav.icon}</span>
         </div>
         <Link
-          href={!nav.external && nav.locale ? `/${nav.locale}${nav.href}` : nav.href}
+          href={!nav.external ? `${nav.locale !== 'en' ? `/${nav.locale}` : ''}${nav.href}` : nav.href}
           target={nav.external ? '_blank' : undefined}
           className="text-light text-[36px] font-medium capitalize z-40 flex justify-center gap-4 items-center hover:underline pointer-events-auto"
         >

src/app/api/text-splitter/output.md

@@ -0,0 +1,61 @@
+````ts
+[
+  Document {
+    pageContent: "# Henry's Blog (NoowaH)\n" +
+      '\n' +
+      "Welcome to the GitHub repository for my blog! This platform is a personal project where I share my development notes, studies, and showcase my portfolio. It's built with modern web technologies, focusing on performance, aesthetics, and interactivity.",
+    metadata: { loc: [Object] }
+  },
+  Document {
+    pageContent: '## Website Contents\n' +
+      '\n' +
+      "- **`/posts`**: This section contains my development notes and in-depth studies on various topics within software development. It's a space where I document my learning journey and share insights on complex concepts.\n" +
+      '\n' +
+      '- **`/about`**: Learn more about me, my background in software development, and what drives my passion for technology.',
+    metadata: { loc: [Object] }
+  },
+  Document {
+    pageContent: '- **`/about`**: Learn more about me, my background in software development, and what drives my passion for technology.\n' +
+      '\n' +
+      "- **`/works`**: A showcase of my portfolio, highlighting projects and works that I've contributed to or developed. This section demonstrates my skills and areas of expertise.",
+    metadata: { loc: [Object] }
+  },
+  Document {
+    pageContent: '## Stack\n' +
+      '\n' +
+      'The blog leverages a modern technology stack to deliver a seamless user experience:\n' +
+      '\n' +
+      '- **Next.js 14 (App Router)**: Utilizes the latest features of Next.js for efficient, scalable routing, enhancing the performance and SEO of the blog.\n' +
+      '\n' +
+      '- **TailwindCSS & PostCSS**: For styling, the blog uses TailwindCSS along with PostCSS for a utility-first CSS workflow, enabling responsive and customizable design with ease.',
+    metadata: { loc: [Object] }
+  },
+  Document {
+    pageContent: '- **TailwindCSS & PostCSS**: For styling, the blog uses TailwindCSS along with PostCSS for a utility-first CSS workflow, enabling responsive and customizable design with ease.\n' +
+      '\n' +
+      "- **Markdown**: Content for the blog posts is written in Markdown, allowing for easy formatting and maintenance of the blog's written content.\n" +
+      '\n' +
+      '- **Framer Motion**: This library is used to add smooth, powerful animations throughout the website, enriching the user interaction and visual appeal.',
+    metadata: { loc: [Object] }
+  },
+  Document {
+    pageContent: '- **Framer Motion**: This library is used to add smooth, powerful animations throughout the website, enriching the user interaction and visual appeal.\n' +
+      '\n' +
+      '- **SWR**: For data fetching, SWR is implemented to handle caching, revalidation, and fetching data, ensuring up-to-date content is served with minimal loading times.',
+    metadata: { loc: [Object] }
+  },
+  Document {
+    pageContent: '## Getting Started\n' +
+      '\n' +
+      'To set up the blog locally, follow these steps:\n' +
+      '\n' +
+      '1. Clone the repository:\n' +
+      '\n' +
+      '```bash\n' +
+      'git clone https://github.com/henrynoowah/blog.git\n' +
+      'cd blog\n' +
+      '```',
+    metadata: { loc: [Object] }
+  }
+]
+````

src/app/api/text-splitter/route.ts

@@ -0,0 +1,20 @@
+import { promises as fs } from 'fs'
+import { MarkdownTextSplitter, RecursiveCharacterTextSplitter } from 'langchain/text_splitter'
+
+export const GET = async () => {
+  try {
+    const text = await fs.readFile('README.md', 'utf-8')
+
+    const splitter = new RecursiveCharacterTextSplitter({
+      chunkSize: 500,
+      chunkOverlap: 50,
+      separators: ['\n\n', '\n', ' ', '', '#', '##']
+    })
+
+    const output = await splitter.createDocuments([text])
+    return Response.json({ ...output })
+  } catch (e) {
+    console.log(e)
+  }
+  return new Response('Hello, Next.js!')
+}

src/components/common/layouts/header/Nav_mobile.tsx

@@ -36,7 +36,7 @@ const Nav_mobile = ({ navOption }: Params) => {
               }`}
             >
               <Link
-                href={!nav.external && nav.locale ? `/${nav.locale}/${nav.href}` : nav.href}
+                href={!nav.external ? `${nav.locale !== 'en' ? `/${nav.locale}` : ''}${nav.href}` : nav.href}
                 target={nav.external ? '_blank' : undefined}
               >
                 <Button className="w-full px-4 sm:px-10 flex justify-between items-center bg-transparent !text-light !text-md py-2 text-left">

src/components/common/themeToggle/ThemeToggle.tsx

@@ -24,6 +24,7 @@ const ThemeToggle = () => {
 
   return (
     <button
+      type="button"
       aria-label="Theme Toggle"
       onClick={handleThemeSwitch}
       className="!text-light relative w-[36px] h-[36px] flex justify-center items-center rounded-full ring-1 ring-light dark:bg-dark-80"

yarn.lock

@@ -2253,7 +2253,7 @@ lodash.merge@^4.6.2:
 
 lodash@^4.17.21:
   version "4.17.21"
-  resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
 longest-streak@^3.0.0: