Merge pull request #99 from 1chooo/chore/next-js-react

[Chore] migrate create-reate-app to next (#90)

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -1,5 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+.next
+
 # dependencies
 /node_modules
 /.pnp

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -0,0 +1,10 @@
+// next.config.js
+const nextConfig = {
+  images: {
+    domains: ['skillicons.dev', 'blog.1chooo.com'], // Use domains instead of remotePatterns
+    dangerouslyAllowSVG: true, // Enable SVG support for remote SVG images
+    unoptimized: true, // Disable image optimization to avoid issues with remote images
+  },
+};
+
+module.exports = nextConfig;

package.json

@@ -11,28 +11,29 @@
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
     "bootstrap": "^5.3.3",
+    "caniuse-lite": "^1.0.30001651",
+    "next": "^14.2.5",
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.4",
     "react-dom": "^18.2.0",
     "react-github-calendar": "^4.1.1",
     "react-icons": "^5.0.1",
     "react-loading-skeleton": "^3.4.0",
     "react-markdown": "^9.0.1",
-    "react-router-dom": "^6.26.0",
-    "react-scripts": "5.0.1",
     "react-syntax-highlighter": "^15.5.0",
     "remark-gfm": "^4.0.0",
+    "sharp": "^0.33.4",
+    "tailwindcss": "^3.4.9",
     "typescript": "^5.5.4",
     "web-vitals": "^4.2.2"
   },
   "overrides": {
     "typescript": "^5.5.4"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "dev": "next dev --turbo",
+    "build": "next build",
+    "start": "next start"
   },
   "eslintConfig": {
     "extends": [
@@ -55,6 +56,9 @@
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@types/react-syntax-highlighter": "^15.5.13",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.5",
+    "postcss": "^8",
     "sass": "^1.77.8",
     "sass-loader": "^16.0.0"
   }

postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

src/page/Blog/index.tsx → src/app/blog/page.tsx

@@ -1,30 +1,32 @@
-import { useLocation } from "react-router-dom";
-import React, { useState, useEffect } from 'react';
-
-import NavBar from "../../components/NavBar";
-import Sidebar from "../../components/sideBar/SideBar";
-import FilterList from '../../components/blog/FilterList';
-import FilterSelectBox from '../../components/blog/FilterSelectBox';
-import BlogPostList from '../../components/blog/BlogPostList';
-import Pagination from '../../components/blog/Pagination';
-import Header from "../../components/Header";
+'use client';
 
-import { postsData } from '../../config/BlogData';
-import { IPost } from "../../interface/iPost";
+import React, { useState, useEffect } from 'react';
+import { usePathname } from 'next/navigation';
+import SideBar from '@/components/side-bar';
+import NavBar from '@/components/nav-bar';
+import Header from '@/components/header';
+import FilterList from "@/components/blog/filter-list";
+import FilterSelectBox from "@/components/blog/filter-select-box";
+import BlogPostList from "@/components/blog/blog-post-list";
+import Pagination from "@/components/blog/pagination";
+import { initializeCustomSelect, filterItemsByCategory } from '@/utils/dom-utils';
 
+import { filterCategory, handleItemClick } from "@/utils/filter-utils";
+import { IPost } from "@/interface/iPost";
+import { postsData } from "@/config/blog";
 
-import { filterCategory, handleItemClick } from '../../utils/filterUtils';
-import { initializeCustomSelect, filterItemsByCategory } from "../../utils/domUtils";
 
-const Blog: React.FC = () => {
-  const location = useLocation();
+const Blog = () => {
+  const pathname = usePathname();
 
   useEffect(() => {
     initializeCustomSelect(filterItemsByCategory);
     handleItemClick('All', setSelectedValue);
     document.title = "Blog - Hugo ChunHo Lin (1chooo) | Open Source Enthusiast";
   }, []);
 
+
+
   const [selectedValue, setSelectedValue] = useState('All');
   const [isSelectActive, setIsSelectActive] = useState(false);
   const [currentPage, setCurrentPage] = useState(1);
@@ -46,11 +48,11 @@ const Blog: React.FC = () => {
 
   return (
     <main>
-      <Sidebar />
+      <SideBar />
       <div className="main-content">
         <NavBar />
         <article
-          className={`blog ${location.pathname === '/blog' ? 'active' : ''}`}
+          className={`blog ${pathname === '/blog' ? 'active' : ''}`}
           data-page="blog"
         >
           <Header title="Hugo's Blog" />

src/page/Contact/index.tsx → src/app/contact/page.tsx

@@ -1,16 +1,21 @@
-import React, {useEffect} from "react";
-import { useLocation } from 'react-router-dom';
+'use client';
+
+import React, { useEffect } from "react";
+import { usePathname } from 'next/navigation';
+import SideBar from '@/components/side-bar';
+import NavBar from '@/components/nav-bar';
+import Header from '@/components/header';
+import MapBox from '@/components/contact/map-box';
 import { FaRegPaperPlane } from "react-icons/fa";
+import { initializeCustomSelect, filterItemsByCategory } from '@/utils/dom-utils';
 
-import MapBox from "../../components/contact/MapBox";
-import NavBar from "../../components/NavBar";
-import SideBar from "../../components/sideBar/SideBar";
 
-const Contract: React.FC = () => {
+const Contact = () => {
+  const pathname = usePathname();
 
-  const location = useLocation();
   useEffect(() => {
-    document.title = "Contract - Hugo ChunHo Lin (1chooo) | Portfolio";
+    initializeCustomSelect(filterItemsByCategory);
+    document.title = "Contact - Hugo ChunHo Lin (1chooo) | Open Source Enthusiast";
   }, []);
 
   return (
@@ -19,12 +24,10 @@ const Contract: React.FC = () => {
       <div className="main-content">
         <NavBar />
         <article
-          className={`resume ${location.pathname === '/contact' ? 'active' : ''}`}
+          className={`contact ${pathname === '/contact' ? 'active' : ''}`}
           data-page="contact"
         >
-          <header>
-            <h2 className="h2 article-title">Contact</h2>
-          </header>
+          <Header title="Hugo's Contact" />
           <section className="contact-form">
             <MapBox />
             <h3 className="h3 form-title">Contact Form</h3>
@@ -71,4 +74,4 @@ const Contract: React.FC = () => {
   );
 }
 
-export default Contract;
+export default Contact