Merge pull request #6 from khoaxuantu/dev

Optimize blogs

src/components/content_grp.tsx

@@ -43,7 +43,7 @@ export function BlogsContent() {
 
 export function SingleBlogContent(props: {id: string}) {
     return (
-        <article className="single-blog-wrapper fade-in-left">
+        <article className="single-blog-wrapper transition-blog">
             <Blogs.SingleBlog id={props.id} />
         </article>
     );

src/components/contents/blogs.tsx

@@ -59,7 +59,8 @@ export function BlogsList(props: {blogInfoList: { dictKey: string; date: string;
 export function SingleBlog(props: {id: string}) {
     const blogInfo = blogInfoDict[props.id];
     const [text, setText] = useState('');
-
+    const mdWrapper = document.getElementsByClassName("single-blog-wrapper")[0];
+
     useEffect(() => {
         import(`../../markdown/${blogInfo.file}`)
             .then(res => {
@@ -69,8 +70,20 @@ export function SingleBlog(props: {id: string}) {
                 .catch(err => console.log(err));
             })
             .catch(err => console.log(err));
-    })
-
+        }, [])
+
+    /**
+     * Due to the delay of ReactMarkdown's render, an useEffect is needed
+     * to detect the change of the blogWrapper
+     * 
+     * If the blogWrapper's childNodes is not empty, set its height back to auto
+     * (initially the height is constant pixels)
+     */
+    useEffect(() => {
+        const blogWrapper = document.getElementsByClassName("single-blog-wrapper")[0] as HTMLElement;
+        if (blogWrapper.childNodes.length !== 0) blogWrapper.style.height = "auto";
+    }, [mdWrapper]);
+
     return (
         <>
             <ReactMarkdown

src/components/header_grp.tsx

@@ -73,7 +73,7 @@ export function BlogsPageHeaderGrp() {
         <b>Blogs</b>
       </div>
       <div className='description-txt mt-2'>
-        ~ Some notes, some ideas, some opinions ~
+        Some notes, some ideas, some opinions
       </div>
     </div>
   );

src/components/site.tsx

@@ -20,7 +20,7 @@ export function Layout() {
 export function BlogsLayout() {
     return (
         <m.div
-            transition={{ duration: 1}}
+            transition={{ duration: 0.8}}
             exit={{ opacity: 0 }}
             className="container page-wrapper transition-page">
             <Outlet />
@@ -51,7 +51,7 @@ export function MenuBuilder() {
 
     return (
         <m.div
-            transition={{ duration: 1 }}
+            transition={{ duration: 0.8 }}
             exit={{ opacity: 0 }}
             className={`container menu-wrapper ${orientation} transition-menu`}>
             <Header.MenuHeaderGrp />
@@ -65,7 +65,7 @@ export function MenuBuilder() {
 export function AboutPage() {
     return (
         <m.div
-            transition={{ duration: 1 }}
+            transition={{ duration: 0.8 }}
             exit={{ opacity: 0 }}
             className="container page-wrapper transition-page">
             <Header.AboutHeaderGrp />
@@ -78,7 +78,7 @@ export function AboutPage() {
 export function ProjectsPage() {
     return (
         <m.div
-            transition={{ duration: 1}}
+            transition={{ duration: 0.8 }}
             exit={{ opacity: 0 }} 
             className="container page-wrapper transition-page">
             <Header.ProjectsPageHeaderGrp />
@@ -93,9 +93,9 @@ export function BlogsPage() {
         <>
             <Header.BlogsPageHeaderGrp />
             <Content.BlogsContent />
-            <div className="m-5 description-txt" style={{textAlign: "center"}}>
+            {/* <div className="m-5 description-txt" style={{textAlign: "center"}}>
                 Nothing yet lol ~~ This section will be updated soon.
-            </div>
+            </div> */}
         </>
     );
 }

src/css/scss/general/_animation.scss

@@ -66,6 +66,8 @@
     @include animation(fadeIn, 0.5s);
 }
 
-.fade-in-left {
-    @include animation(fadeInLeft, 1s);
+.transition-blog {
+    &>*{
+        @include animation(fadeInLeft, 1s);
+    }
 }

src/css/scss/general/_container.scss

@@ -47,6 +47,7 @@
 
 .single-blog-wrapper {
     @include content-wrapper(80%, 900px, 50px);
+    height: 1000px;
 }
 
 .lightgray-box {

src/lib/general_info.ts

@@ -308,12 +308,22 @@ export const blogInfoDict: {[id: string]: IBlogCardProps} = {
         id: "great_ytb_channels_1",
         title: "Great Youtube Channels (Part 1)",
         brief_description: `I watch youtube a lot, and I make a list of youtube channels
-            I have watched that you may find interesting.`,
+            I have watched that you may find interesting. Here is part 1 of my list...`,
         url: "/great_ytb_channels_1",
         file: "great_ytb_channels_1.md"
-    }
+    },
+    "great_ytb_channels_2": {
+        content_section: "Blogs",
+        id: "great_ytb_channels_2",
+        title: "Great Youtube Channels (Part 2)",
+        brief_description: `I watch youtube a lot, and I make a list of youtube channels
+            I have watched that you may find interesting. Here is part 2 of my list...`,
+        url: "/great_ytb_channels_2",
+        file: "great_ytb_channels_2.md"
+    },
 };
 
 export const blogInfoList: {dictKey: string, date: string}[] = [
     {dictKey: "great_ytb_channels_1", date: "Apr 26 2023 22:35:23 GMT+0800"},
+    {dictKey: "great_ytb_channels_2", date: "Apr 27 2023 13:30:59 GMT+0800"},
 ];

src/markdown/great_ytb_channels_1.md

@@ -10,7 +10,7 @@ This topic will be divided into 2 parts
 - Part 1 is our current standing and contains only channels about
 information technology. Because I’m focusing on IT, these channels
 are the majority of my list.
-- Part 2 is in the next part, which contains channels about other
+- Part 2 is in the next blog, which contains channels about other
 genres such as general science, entertainment, etc...
 
 # Some guys are coding...
@@ -19,8 +19,10 @@ genres such as general science, entertainment, etc...
 - [Anson the Developer](https://www.youtube.com/@ansonthedev)
 - [Ashleynguci](https://www.youtube.com/@Ashleynguci) | Cute channel :)
 - [Ben Awad](https://www.youtube.com/@bawad)
+- [Ben Eater](https://www.youtube.com/@BenEater)
 - [Chris Chang](https://www.youtube.com/@ChrisChangSWE)
 - [Clément Mihailescu](https://www.youtube.com/@clem)
+- [Code Monkey](https://www.youtube.com/@CodeMonkeyUnity)
 - [Colin Galen](https://www.youtube.com/@ColinGalen)
 - [DesignCourse](https://www.youtube.com/@DesignCourse) | UX/UI buddies may love it ~
 - [Darian Sampare](https://www.youtube.com/@DarianSampare)
@@ -35,15 +37,18 @@ genres such as general science, entertainment, etc...
 - [Marko](https://www.youtube.com/@withmarko)
 - [Matthew Ventures](https://www.youtube.com/@matthewventures)
 - [NeetCode](https://www.youtube.com/@NeetCode)
+- [Normalized Nerd](https://www.youtube.com/@NormalizedNerd)
+- [polylog](https://www.youtube.com/@polylog7346)
 - [PedroTech](https://www.youtube.com/@PedroTechnologies)
 - [PIRATE KING](https://www.youtube.com/@PIRATEKINGDOM)
+- [Sebastian Lague](https://www.youtube.com/@SebastianLague)
 - [Servet Gulnaroglu](https://www.youtube.com/@ServetGulnaroglu)
 - [Stefan Mischook](https://www.youtube.com/@StefanMischook)
 - [Tech With Tim](https://www.youtube.com/@TechWithTim)
 - [TechWorld with Nana](https://www.youtube.com/@TechWorldwithNana)
 - [The Coding Train](https://www.youtube.com/@TheCodingTrain)
 - [Tina Huang](https://www.youtube.com/@TinaHuang1)
-- [Unreal Sensei](https://www.youtube.com/@UnrealSensei) | Unreal Engine buddies may love it
+- [Unreal Sensei](https://www.youtube.com/@UnrealSensei) | Unreal Engine buddies may love it ~
 - [Web Dev Simplified](https://www.youtube.com/@WebDevSimplified)
 - [Web Dev Cody](https://www.youtube.com/@WebDevCody)
 - [William Lin](https://www.youtube.com/@tmwilliamlin168)
@@ -58,17 +63,20 @@ genres such as general science, entertainment, etc...
 - [freeCodeCamp.org](https://www.youtube.com/@freecodecamp)
 - [Firebase](https://www.youtube.com/@firebase) if you learn Firebase
 - [Google Cloud](https://www.youtube.com/@googlecloud) & [Google Cloud Tech](https://www.youtube.com/@googlecloudtech) 
+if you learn GCP
 - [Google Developers](https://www.youtube.com/@GoogleDevelopers)
 - [High-Performance Programming](https://www.youtube.com/@HighPerformanceProgramming)
 - [Life at Google](https://www.youtube.com/@LifeatGoogle)
 - [Prisma](https://www.youtube.com/@PrismaData) if you lean Prisma
-if you learn GCP
+- [Reducible](https://www.youtube.com/@Reducible)
 - [Simplilearn](https://www.youtube.com/@SimplilearnOfficial)
 
 
-## Meme
+## Memes
 - [Fireship](https://www.youtube.com/@SimplilearnOfficial)
 - [Joma Tech](https://www.youtube.com/@jomaoppa)
 - [Mr. P Solver](https://www.youtube.com/@MrPSolver)
 - [Nicholas T.](https://www.youtube.com/@nicholast)
-- [Virbox](https://www.youtube.com/@Virbox)
+- [Virbox](https://www.youtube.com/@Virbox)
+
+> To be continued...