404 and Loading updated

git.sh

@@ -1,4 +1,4 @@
 #!/usr/bin/env bash
 git add .
-git commit -m "Contact Page Added"
+git commit -m "404 and Loading updated"
 git push origin main

src/app/_components/Footer.tsx

@@ -1,4 +1,3 @@
-import {loadJsonContents} from "@/libs/JsonFileService";
 import Link from "next/link";
 import {LayoutContent} from "@/app/_models/ContentsModel";
 
@@ -41,7 +40,7 @@ export default async function Footer({pageContent}: Props) {
  {pageContent.footer.footerLinks.map((footerLink, index) => {
  return <li key={index}>
  <Link href={footerLink.url} target={footerLink.target}
- className="text-gray-700 transition hover:text-gray-700/75">{footerLink.title}</Link>
+  className="text-gray-700 transition hover:text-gray-700/75">{footerLink.title}</Link>
  </li>
  })}
  </ul>

src/app/_components/Header.tsx

@@ -22,7 +22,7 @@ export default function Header({pageContent}: Props) {
  <header className="sticky inset-x-0 top-0 z-50 border-b border-gray-200 bg-white">
  <div className="mx-auto max-w-screen-xl px-4 sm:px-6 lg:px-8">
  <div className="flex h-16 items-center justify-between">
- <div  className="flex-1 md:flex md:items-center md:gap-12">
+ <div className="flex-1 md:flex md:items-center md:gap-12">
  <a className="block text-teal-600" href="/portfolio">
  <span className="sr-only">Home</span>
  <svg className="h-8" viewBox="0 0 28 24" fill="none" xmlns="https://www.w3.org/2000/svg">

src/app/_components/HeaderBanner.tsx

@@ -4,7 +4,7 @@ type Props = {
  subtitle?: string
 }
 
-export default function HeroBanner({children, title="", subtitle=""}: Props) {
+export default function HeroBanner({children, title = "", subtitle = ""}: Props) {
  return (<section className="bg-white text-center mx-auto max-w px-8 py-8">
  <div className="mx-auto max-w-screen-xl px-4 sm:px-6 md:py-4 lg:px-4">
  <div className="mx-auto max-w-3xl text-center">

src/app/_components/PageContents.tsx

@@ -1,5 +1,5 @@
 type Props = {
- children: string | JSX.Element | JSX.Element[]| undefined
+ children: string | JSX.Element | JSX.Element[] | undefined
  classNames: string
 }
 export default function PageContents({children, classNames}: Props) {

src/app/_components/blog/BlogDetail.tsx

@@ -1,5 +1,4 @@
 'use client'
-import {toDateFormat} from "@/libs/Utils";
 import {BlogContent} from "@/app/_models/BlogModels";
 
 type Props = {

src/app/_components/blog/BlogList.tsx

@@ -14,26 +14,26 @@ export default function BlogList({blogList}: Props) {
  return <div className="max-w">
  <div className="grid lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 items-center">
 
- {blogList.map((blogContent: BlogContent, index) => {
- return <article key={index}
- className="hover:animate-background mx-2 my-2 rounded-xl bg-gradient-to-r from-green-300 via-blue-500 to-purple-600 p-0.5 shadow-xl transition hover:bg-[length:400%_400%] hover:shadow-sm hover:[animation-duration:_4s]">
- <div className="rounded-[10px] bg-white p-4 !pt-20 sm:p-6">
- <time dateTime="2022-10-10" className="block text-xs text-gray-500">
- {toDateFormat(blogContent.dateTime)}
- </time>
- <Link href={blogContent.url}>
- <h3 className="mt-0.5 text-lg font-medium text-gray-900">
- {blogContent.title}
- </h3>
- </Link>
- <div className="mt-4 flex flex-wrap gap-1">
- {blogContent.tags?.map((tech, tech_index) => {
- return <Badge key={tech_index} title={tech}></Badge>
- })}
- </div>
+ {blogList.map((blogContent: BlogContent, index) => {
+ return <article key={index}
+ className="hover:animate-background mx-2 my-2 rounded-xl bg-gradient-to-r from-green-300 via-blue-500 to-purple-600 p-0.5 shadow-xl transition hover:bg-[length:400%_400%] hover:shadow-sm hover:[animation-duration:_4s]">
+ <div className="rounded-[10px] bg-white p-4 !pt-20 sm:p-6">
+ <time dateTime="2022-10-10" className="block text-xs text-gray-500">
+ {toDateFormat(blogContent.dateTime)}
+ </time>
+ <Link href={blogContent.url}>
+ <h3 className="mt-0.5 text-lg font-medium text-gray-900">
+ {blogContent.title}
+ </h3>
+ </Link>
+ <div className="mt-4 flex flex-wrap gap-1">
+ {blogContent.tags?.map((tech, tech_index) => {
+ return <Badge key={tech_index} title={tech}></Badge>
+ })}
  </div>
- </article>
- })}
+ </div>
+ </article>
+ })}
 
  </div>
  </div>

src/app/_models/ContentsModel.ts

@@ -98,21 +98,25 @@ export interface TermsContent extends BaseStaticContent {
  intro: string
  contents: [string]
 }
+
 export interface PrivacyContent extends BaseStaticContent {
  intro: string
  contents: [string]
 }
+
 export interface ContactPhoneNumber {
  phone: string
  countryCode?: string
  type: string
 }
+
 export interface ContactAddress {
  house: string
  road: string
  country?: string
  type: string
 }
+
 export interface ContactContent extends BaseStaticContent {
  intro: string
  contents: [string]

src/app/about/page.tsx

@@ -2,6 +2,7 @@ import HeroBanner from "@/app/_components/HeaderBanner";
 import PageContents from "@/app/_components/PageContents";
 import {loadJsonContents} from "@/libs/JsonFileService";
 import {AboutContent} from "@/app/_models/ContentsModel";
+
 export default async function About() {
  const pageContent: AboutContent = await loadJsonContents("about")
 

src/app/blog/[page]/[slug]/page.tsx

@@ -24,7 +24,9 @@ type Props = {
  slug: string
 }
 
-export default async function BlogSlug({params}: { params: Props }) {
+export default async function BlogSlug({params}: {
+ params: Props
+}) {
  const {page, slug} = params
  const blogMenuList: BlogMenu[] = await getBlogMenu(page);
  const blogContent: BlogContent = await loadJsonContents("/blog/" + page + "/" + slug)

src/app/blog/[page]/page.tsx

@@ -24,7 +24,9 @@ type Props = {
  page: string
 }
 
-export default async function BlogPage({params: {page}}: { params: Props }) {
+export default async function BlogPage({params: {page}}: {
+ params: Props
+}) {
  const pageContent: BlogContents = await loadJsonContents("blog/" + page + "/index")
  const blogMenuList: BlogMenu[] = await getBlogMenu(page);
  const blogContentList: BlogContent[] = await getBlogContentList(page);

src/app/blog/page.tsx

@@ -11,8 +11,8 @@ import SideBar from "@/app/_components/blog/SideBar";
 
 
 export default async function Blog() {
- const page="aws"
- const pageContent: BlogContents = await loadJsonContents("blog/"+page+"/index")
+ const page = "aws"
+ const pageContent: BlogContents = await loadJsonContents("blog/" + page + "/index")
  const blogMenuList: BlogMenu[] = await getBlogMenu(page);
  const blogContentList: BlogContent[] = await getBlogContentList(page);
 

src/app/career/page.tsx

@@ -19,7 +19,7 @@ export default async function Career() {
  {
  pageContent.workList.map((item, index) => {
  return <CareerCard key={index} companyInfo={item}
- pageContent={pageContent}></CareerCard>
+  pageContent={pageContent}></CareerCard>
  })
  }
  </div>

src/app/layout.tsx

@@ -31,7 +31,9 @@ const inter = Inter({
  variable: '--font-inter',
 })
 
-export default async function RootLayout({children,}: { children: React.ReactNode }) {
+export default async function RootLayout({children,}: {
+ children: React.ReactNode
+}) {
  const pageContent: LayoutContent = await loadJsonContents("layout")
 
  return (

src/app/loading.tsx

@@ -1,4 +1,13 @@
 export default function Loading() {
- // Or a custom loading skeleton component
- return <p>Loading...</p>
+ return <div>
+ <span id="ProgressLabel" className="sr-only">Loading</span>
+ <span role="progressbar"
+ aria-labelledby="ProgressLabel"
+ aria-valuenow="75"
+ className="block rounded-full bg-gray-200">
+ <span
+ className="block h-3 rounded-full bg-[repeating-linear-gradient(45deg,_var(--tw-gradient-from)_0,_var(--tw-gradient-from)_20px,_var(--tw-gradient-to)_20px,_var(--tw-gradient-to)_40px)] from-indigo-400 to-indigo-500"
+ ></span>
+ </span>
+ </div>
 }

src/app/privacy/page.tsx

@@ -1,7 +1,8 @@
 import HeroBanner from "@/app/_components/HeaderBanner";
 import PageContents from "@/app/_components/PageContents";
 import {loadJsonContents} from "@/libs/JsonFileService";
-import { PrivacyContent} from "@/app/_models/ContentsModel";
+import {PrivacyContent} from "@/app/_models/ContentsModel";
+
 export default async function Terms() {
  const pageContent: PrivacyContent = await loadJsonContents("privacy")
 

src/app/robots.ts

@@ -1,4 +1,4 @@
-import type { MetadataRoute } from 'next'
+import type {MetadataRoute} from 'next'
 
 export default function robots(): MetadataRoute.Robots {
  return {

src/app/sitemap.ts

@@ -1,4 +1,4 @@
-import { MetadataRoute } from 'next'
+import {MetadataRoute} from 'next'
 
 export default function sitemap(): MetadataRoute.Sitemap {
  return [

src/app/terms/page.tsx

@@ -1,7 +1,8 @@
 import HeroBanner from "@/app/_components/HeaderBanner";
 import PageContents from "@/app/_components/PageContents";
 import {loadJsonContents} from "@/libs/JsonFileService";
-import { TermsContent} from "@/app/_models/ContentsModel";
+import {TermsContent} from "@/app/_models/ContentsModel";
+
 export default async function Terms() {
  const pageContent: TermsContent = await loadJsonContents("terms")
 

src/json_data/blog/aws/title-1.json

@@ -2,10 +2,12 @@
  "title": "Title 1",
  "intro": "Intro",
  "contents": [
-
  ],
  "tags": [
- "webdev","productivity","opensource","programming"
+ "webdev",
+ "productivity",
+ "opensource",
+ "programming"
  ],
  "dateTime": "2024-01-19"
 }

src/json_data/blog/aws/title-2.json

@@ -2,10 +2,12 @@
  "title": "Title 2",
  "intro": "Intro",
  "contents": [
-
  ],
  "tags": [
- "webdev","productivity","opensource","programming"
+ "webdev",
+ "productivity",
+ "opensource",
+ "programming"
  ],
  "dateTime": "2024-01-19"
 }

src/json_data/blog/aws/title-3.json

@@ -2,10 +2,12 @@
  "title": "Title 3",
  "intro": "Intro",
  "contents": [
-
  ],
  "tags": [
- "webdev","productivity","opensource","programming"
+ "webdev",
+ "productivity",
+ "opensource",
+ "programming"
  ],
  "dateTime": "2024-01-19"
 }

src/json_data/blog/aws/title-4.json

@@ -2,10 +2,12 @@
  "title": "Title 4",
  "intro": "Intro",
  "contents": [
-
  ],
  "tags": [
- "webdev","productivity","opensource","programming"
+ "webdev",
+ "productivity",
+ "opensource",
+ "programming"
  ],
  "dateTime": "2024-01-19"
 }

src/json_data/blog/dev.to/10-game-changing-tools-you-should-bookmark-now-2a10.json

@@ -28,7 +28,10 @@
  "Thanks for reading this article ❤.If you found this article helpful, please consider giving it \uD83D\uDC96\uD83E\uDD84\uD83D\uDD25\uD83D\uDE4C"
  ],
  "tags": [
- "webdev","productivity","opensource","programming"
+ "webdev",
+ "productivity",
+ "opensource",
+ "programming"
  ],
  "dateTime": "2024-01-19"
 }

src/json_data/blog/page2/title-3.json

@@ -2,10 +2,12 @@
  "title": "Title 3",
  "intro": "Intro",
  "contents": [
-
  ],
  "tags": [
- "webdev","productivity","opensource","programming"
+ "webdev",
+ "productivity",
+ "opensource",
+ "programming"
  ],
  "dateTime": "2024-01-19"
 }