add new demo component

src/app/blog/page.jsx

@@ -9,6 +9,7 @@ export const revalidate = parseInt(process.env.REVALIDATE_INTERVAL);
 
 export default async function Blog({ searchParams }) {
   const postsMeta = await getPostsMeta();
+  console.log("debug postsMeta: ", postsMeta);
 
   if (!postsMeta) {
     return <p className="mt-10 text-center">Sorry, no posts available</p>;

src/app/demo/page.jsx

@@ -0,0 +1,15 @@
+import HeightTransition from "@/components/(demo)/HeightTransition"
+import React from "react"
+
+const page = () => {
+  return (
+    <div>
+      <h1>Demo component</h1>
+      <HeightTransition>
+        tailwindcss - transition height auto using max-height
+      </HeightTransition>
+    </div>
+  )
+}
+
+export default page

src/app/page.js

@@ -42,6 +42,8 @@ export default function Home() {
             </p>
           </section>
 
+          {/* Turning a design file into a fully functional and responsive website is truly fulfiling, and it motivates me to continuously strive for improvement. */}
+
           <section>
             <h2 className="mt-12 text-base font-medium dark:text-white">
               Toolbox

src/components/(demo)/HeightTransition.jsx

@@ -0,0 +1,26 @@
+import React from "react"
+import style from "./HeightTransition.module.css"
+
+const HeightTransition = ({ children }) => {
+  return (
+    <>
+      <div className={style.example}>
+        <div>transition height auto using CSS grid</div>
+      </div>
+
+      <div className="p-4 m-8 rounded-lg bg-slate-500 grid grid-rows-0 hover:grid-rows-1 transition-[grid-template-rows] duration-1000  ">
+        <div className="text-white overflow-hidden">
+          tailwindcss - attempt to transition height auto using grid
+        </div>
+      </div>
+
+      <div className="p-4 m-8 rounded-lg bg-blue-500 group  ">
+        <div className="text-white overflow-hidden max-h-0 group-hover:max-h-[500px] transition-max-height duration-500 ">
+          {children}
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default HeightTransition

src/components/(demo)/HeightTransition.module.css

@@ -0,0 +1,18 @@
+.example {
+  margin: 2rem;
+  padding: 1rem;
+  background-color: #ed5ab3;
+  border-radius: 5px;
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 500ms;
+}
+
+.example > div {
+  color: white;
+  overflow: hidden;
+}
+
+.example:hover {
+  grid-template-rows: 1fr;
+}

src/components/Video.jsx

@@ -1,14 +1,14 @@
-import React from 'react'
+import React from "react"
 
-export default function Video({id}) {
-    console.log("Video id: ", id)
+export default function Video({ id }) {
+  // console.log("Video id: ", id)
   return (
-    <div className='aspect-w-16 aspect-h-9'>
-        <iframe
-            src={`https://www.youtube.com/embed/${id}`}
-            title="YouTube video player"
-            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-        />
+    <div className="aspect-w-16 aspect-h-9">
+      <iframe
+        src={`https://www.youtube.com/embed/${id}`}
+        title="YouTube video player"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+      />
     </div>
   )
 }

src/lib/posts.js

@@ -1,11 +1,12 @@
-import { compileMDX } from "next-mdx-remote/rsc"; //support for react server component
-import rehypeAutolinkHeadings from "rehype-autolink-headings/lib";
-import rehypeHighlight from "rehype-highlight/lib";
-import rehypeSlug from "rehype-slug";
-import Video from "@/components/Video";
-import Button from "@/components/Button";
-import LinkToNewTab from "@/components/LinkToNewTab";
-import { s } from "hastscript";
+import { compileMDX } from "next-mdx-remote/rsc" //support for react server component
+import rehypeAutolinkHeadings from "rehype-autolink-headings/lib"
+import rehypeHighlight from "rehype-highlight/lib"
+import rehypeSlug from "rehype-slug"
+import Video from "@/components/Video"
+import Button from "@/components/Button"
+import LinkToNewTab from "@/components/LinkToNewTab"
+import HeightTransition from "@/components/(demo)/HeightTransition"
+import { s } from "hastscript"
 
 export async function getPostByName(fileName) {
   const res = await fetch(
@@ -17,20 +18,21 @@ export async function getPostByName(fileName) {
         "X-GitHub-Api-Version": "2022-11-28",
       },
     }
-  );
+  )
 
-  if (!res.ok) return undefined;
+  if (!res.ok) return undefined
 
-  const rawMDX = await res.text(); // note that it's not json(), it's text()
+  const rawMDX = await res.text() // note that it's not json(), it's text()
   //   console.log("debug rawMDX: ", rawMDX.substring(1, 100));
-  if (rawMDX === "404: Not Found") return undefined;
+  if (rawMDX === "404: Not Found") return undefined
 
   const { frontmatter, content } = await compileMDX({
     source: rawMDX,
     components: {
       Video,
       Button,
       LinkToNewTab,
+      HeightTransition,
     },
     options: {
       parseFrontmatter: true,
@@ -62,9 +64,9 @@ export async function getPostByName(fileName) {
         ],
       },
     },
-  });
+  })
 
-  const slug = fileName.replace(/\.mdx$/, "");
+  const slug = fileName.replace(/\.mdx$/, "")
 
   // console.log("debug frontmatter: ", frontmatter)
 
@@ -77,11 +79,11 @@ export async function getPostByName(fileName) {
       tags: frontmatter.tags,
     },
     content,
-  };
+  }
 
   //   console.log("debug meta: ", blogPostObj.meta);
 
-  return blogPostObj;
+  return blogPostObj
 }
 
 export async function getPostsMeta() {
@@ -94,25 +96,25 @@ export async function getPostsMeta() {
         "X-GitHub-Api-Version": "2022-11-28",
       },
     }
-  );
+  )
 
-  if (!res.ok) return undefined;
+  if (!res.ok) return undefined
 
-  const repoFiletree = await res.json();
+  const repoFiletree = await res.json()
   const filesArray = repoFiletree.tree
     .map((obj) => obj.path)
     .filter((path) => path.endsWith(".mdx"))
-    .filter((path) => path !== "bookmark.mdx");
+    .filter((path) => path !== "bookmark.mdx")
 
-  const posts = [];
+  const posts = []
 
   for (const file of filesArray) {
-    const post = await getPostByName(file);
+    const post = await getPostByName(file)
     if (post) {
-      const { meta } = post;
-      posts.push(meta);
+      const { meta } = post
+      posts.push(meta)
     }
   }
 
-  return posts.sort((a, b) => (a.date < b.date ? 1 : -1));
+  return posts.sort((a, b) => (a.date < b.date ? 1 : -1))
 }

tailwind.config.js

@@ -1,22 +1,29 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  darkMode: 'class',
+  darkMode: "class",
   content: [
-    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
     extend: {
       backgroundImage: {
-        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic':
-          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+      },
+      gridTemplateRows: {
+        0: "0fr",
+      },
+      transitionProperty: {
+        "max-height": "max-height",
+        "grid-template-rows": "grid-template-rows",
       },
     },
   },
   plugins: [
-    require('@tailwindcss/typography'),
-    require('@tailwindcss/aspect-ratio') // for video
+    require("@tailwindcss/typography"),
+    require("@tailwindcss/aspect-ratio"), // for video
   ],
 }