diff --git a/app/components/README.tsx b/app/components/README.tsx new file mode 100644 index 0000000..12b365e --- /dev/null +++ b/app/components/README.tsx @@ -0,0 +1,42 @@ +import React from 'react'; +import { remark } from 'remark'; +import html from 'remark-html'; +import rehypeStringify from 'rehype-stringify' +import remarkFrontmatter from 'remark-frontmatter' +import remarkGfm from 'remark-gfm' +import remarkParse from 'remark-parse' +import remarkRehype from 'remark-rehype' + +const readmeUrl = 'https://raw.githubusercontent.com/imnyang/imnyang/refs/heads/main/README.md'; + +const markdownToHtml = async (markdown: string) => { + const result = await remark() + .use(remarkParse) + .use(remarkFrontmatter) + .use(remarkGfm) + .use(remarkRehype) + .use(rehypeStringify) + .use(html) + .process(markdown); + return result.toString(); +}; + +const README = () => { + const [content, setContent] = React.useState(''); + + React.useEffect(() => { + const fetchAndConvertMarkdown = async () => { + const response = await fetch(readmeUrl); + const markdown = await response.text(); + const htmlContent = await markdownToHtml(markdown); + setContent(htmlContent); + }; + fetchAndConvertMarkdown(); + }, []); + + return ( +
+ ); +}; + +export default README; diff --git a/app/components/TimeCounter.tsx b/app/components/TimeCounter.tsx deleted file mode 100644 index 16dbf1a..0000000 --- a/app/components/TimeCounter.tsx +++ /dev/null @@ -1,83 +0,0 @@ -/* - All rights reserved to NY0510 (As Known As NY64), 2024 - https://github.com/NY0510/ny64.kr/blob/main/src/components/ProfileSection.tsx -*/ - -import { useState, useEffect } from 'react'; -import { useMotionValue, motion, useMotionTemplate } from "framer-motion"; - -const birthday = new Date('2021-11-14'); - -export function TimeCounter() { - const mouseX = useMotionValue(0); - const mouseY = useMotionValue(0); - - const background = useMotionTemplate`radial-gradient(200px circle at ${mouseX}px ${mouseY}px, rgba(38, 38, 38, 0.4), transparent 80%)`; - - const [afterBirth, setAfterBirth] = useState(''); - const [tenThousands, setTenThousands] = useState(0); - const [animate, setAnimate] = useState(false); - - - useEffect(() => { - const interval = setInterval(() => { - const elapsed = new Date().getTime() - birthday.getTime(); - setAfterBirth(elapsed.toLocaleString()); - - const newTenThousands = Math.floor(elapsed / 10000); - if (newTenThousands !== tenThousands) { - setTenThousands(newTenThousands); - setAnimate(true); - setTimeout(() => setAnimate(false), 200); - } - }, 1); - - return () => clearInterval(interval); - }, [tenThousands]); - - return ( -
{ - const { left, top } = e.currentTarget.getBoundingClientRect(); - - mouseX.set(e.clientX - left); - mouseY.set(e.clientY - top); - }} - className="group relative w-full max-w-[350px] overflow-hidden rounded-xl bg-neutral-950" - title='암냥으로 활동한지' - > -
- -
-
- 암냥 ~ -

- {afterBirth} ms -

-
-
-
- ); - - /* - return ( -
- - - - - - 암냥으로 활동한지 - - {afterBirth} ms - - -
- );*/ - } - \ No newline at end of file diff --git a/app/components/TimelineComponents.tsx b/app/components/TimelineComponents.tsx index 27dbc35..56fa982 100644 --- a/app/components/TimelineComponents.tsx +++ b/app/components/TimelineComponents.tsx @@ -182,6 +182,7 @@ export default function TimelineComponents() { {event.description} )}
+

{event.category}

))} diff --git a/app/components/Top.tsx b/app/components/Top.tsx new file mode 100644 index 0000000..22c8a63 --- /dev/null +++ b/app/components/Top.tsx @@ -0,0 +1,20 @@ +export default function Top() { + return ( +
+ imnyang +
+

암냥

+

@imnyang

+
+
+ ); +} \ No newline at end of file diff --git a/app/routes/home.tsx b/app/routes/home.tsx index 20f0744..6a03570 100644 --- a/app/routes/home.tsx +++ b/app/routes/home.tsx @@ -1,9 +1,11 @@ import type { Route } from "./+types/home"; -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import { Link, useNavigate } from "react-router"; import { AnimatedTabs } from "~/components/AnimatedTabs"; -import { TimeCounter } from "~/components/TimeCounter"; +import Readme from "~/components/README"; +import TimelineComponents from "~/components/TimelineComponents"; +import Top from "~/components/Top"; export function meta({}: Route.MetaArgs) { return [ @@ -13,16 +15,24 @@ export function meta({}: Route.MetaArgs) { } export default function Home() { + const navigate = useNavigate(); const [activeTab, setActiveTab] = useState("Home"); const ref = React.useRef(null); - const navigate = useNavigate(); - React.useEffect(() => { - if (activeTab === "Timeline") { - navigate("/timeline"); + useEffect(() => { + if (activeTab === "Home") { + navigate("/"); + } else if (activeTab === "Timeline") { + navigate("/#timeline"); } }, [activeTab, navigate]); + useEffect(() => { + if (window.location.hash === "#timeline") { + setActiveTab("Timeline"); + } + }, []); + return (
@@ -33,23 +43,48 @@ export default function Home() {
-
- imnyang -
-

암냥

-

@imnyang

-
- -

{`Tab: ${activeTab}`}

+ + {/* ActivatedTab */} +
+ {activeTab === "Home" && ( +
+

+ {/* Read README.md with remark */} +
+

+ + 암냥 & 남냥 + +

+
+

+ + + + + +

+

+

Normal Student Developer

+ + Team. Sqlare + +
+ )} + {activeTab === "Timeline" && ( +
+ +
+ )}
); diff --git a/app/routes/timeline.tsx b/app/routes/timeline.tsx index 9e2479d..f40e2d5 100644 --- a/app/routes/timeline.tsx +++ b/app/routes/timeline.tsx @@ -1,11 +1,6 @@ -import type { Route } from "./+types/home"; -import React, { useState } from "react"; -import { Link, useNavigate } from "react-router"; - -import { AnimatedTabs } from "~/components/AnimatedTabs"; -import { TimeCounter } from "~/components/TimeCounter"; - -import TimelineComponents from "~/components/TimelineComponents"; +import type { Route } from "./+types/timeline"; +import React from "react"; +import { useNavigate } from "react-router"; export function meta({}: Route.MetaArgs) { return [ @@ -15,37 +10,13 @@ export function meta({}: Route.MetaArgs) { } export default function Timeline() { - const [activeTab, setActiveTab] = useState("Timeline"); - const ref = React.useRef(null); const navigate = useNavigate(); React.useEffect(() => { - if (activeTab === "Home") { - navigate("/"); - } - }, [activeTab, navigate]); + navigate("/#timeline"); + }, [navigate]); return ( -
-
- 💕 -
- -
-
-
- imnyang -
-

암냥

-

@imnyang

-
- -
-

Timeline

-
- -
- -
+

Redirecting

); } diff --git a/bun.lockb b/bun.lockb index 85b74d9..083ccc3 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index d4dba4d..4e2331f 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,13 @@ "react": "^19.0.0", "react-dom": "^19.0.0", "react-router": "^7.1.1", + "rehype-stringify": "^10.0.1", + "remark": "^15.0.1", + "remark-frontmatter": "^5.0.0", + "remark-gfm": "^4.0.0", + "remark-html": "^16.0.1", + "remark-parse": "^11.0.0", + "remark-rehype": "^11.1.1", "tailwind-merge": "^2.6.0" }, "devDependencies": {