fix: styling improvements

Evi-2003 · Dec 26, 2024 · 0354f7c · 0354f7c
2 parents 81c96f1 + ed2bd09
commit 0354f7c
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 13 deletions.
diff --git a/app/about-me/page.tsx b/app/about-me/page.tsx
@@ -37,7 +37,7 @@ export async function generateMetadata() {
 
 const aboutMe = () => {
   return (
-    <main className="flex w-full flex-col gap-3 text-stone-800 dark:text-stone-100">
+    <div className="flex w-full flex-col gap-3 text-stone-800 dark:text-stone-100">
       <div className="grid w-full grid-cols-1 gap-3 md:grid-cols-2">
         <div
           className="flex h-fit w-full flex-col rounded-lg border border-black/10 bg-neutral-100 p-4
@@ -69,7 +69,7 @@ const aboutMe = () => {
       </div>
 
       <Gallery />
-    </main>
+    </div>
   );
 };
 

diff --git a/app/blog/page.tsx b/app/blog/page.tsx
@@ -46,7 +46,7 @@ const blog = async () => {
   });
 
   return (
-    <main className="flex w-full flex-col gap-2 text-stone-800 dark:text-stone-100">
+    <div className="flex w-full flex-col gap-2 text-stone-800 dark:text-stone-100">
       <h1 className="text-balance text-3xl font-bold">Blog</h1>
       <ul className="flex w-fit min-w-96 max-w-96 flex-col gap-4">
         {result?.allBlogs.map((post) => (
@@ -65,7 +65,7 @@ const blog = async () => {
           </Link>
         ))}
       </ul>
-    </main>
+    </div>
   );
 };
 

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -22,7 +22,7 @@ export default async function RootLayout(
             <link rel="manifest" href="/site.webmanifest" />
           </head>
           <body
-            className={`flex min-h-screen flex-col items-center bg-gradient-to-b from-white to-gray-100 px-12 pb-5
+            className={`flex min-h-screen flex-col items-center bg-gradient-to-b from-white to-gray-100 px-6 pb-5
               md:px-3 dark:from-neutral-900 dark:to-neutral-950 ${GeistSans.className}`}
           >
             <Header lng={'en-US'} />

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,4 +1,6 @@
-import { Image as ResponsiveImage, StructuredText } from 'react-datocms';
+import Link from 'next/link';
+import { Image as ResponsiveImage } from 'react-datocms';
+import StyledMarkdown from './components/StyledMarkdown';
 
 async function getSeoData(lng: string) {
   if (!process.env.DATO_CMS_URL) {
@@ -63,6 +65,7 @@ async function getBasicInfo(lng: string) {
             voornaam
             achternaam
             functie
+            omschrijving(markdown: false)
             aboutMe (locale: ${lng}) {
               value
               links
@@ -84,10 +87,10 @@ export default async function Home() {
   return (
     <div className="grid w-full grid-flow-col grid-cols-1 gap-5">
       <article className="col-start-1 lg:col-span-3">
-        <h1 className="text-3xl font-bold text-stone-800 lg:text-3xl dark:text-stone-100">{data.heading}</h1>
+        <h1 className="text-3xl font-bold text-stone-800 lg:text-3xl dark:text-stone-100">👋 {data.heading}</h1>
         <h2 className="text-lg font-medium text-sky-900 lg:text-lg dark:text-stone-200">{data.functie}</h2>
-        <div className="text-balance text-base text-stone-800 xl:text-lg dark:text-stone-100">
-          <StructuredText data={data?.aboutMe} />
+        <div className="flex flex-col text-stone-800 dark:text-stone-100">
+          <StyledMarkdown content={data?.omschrijving} />
         </div>
       </article>
 
@@ -103,7 +106,7 @@ export default async function Home() {
           className="bg-transparant flex h-fit w-full flex-col gap-1 px-3 py-2 text-lg font-semibold md:text-base
             dark:text-stone-100"
         >
-          <li>
+          <li className="flex gap-2">
             <a
               className="decoration-stone-900/50 underline-offset-4 hover:underline dark:decoration-stone-100/50"
               href="mailto:[email protected]"
@@ -112,7 +115,7 @@ export default async function Home() {
               ✉️ <span className="sr-only">Email: </span>[email protected]
             </a>
           </li>
-          <li>
+          <li className="flex gap-2">
             <a
               href="tel:+31640707077"
               aria-label="Call 06-40707077"
@@ -121,7 +124,7 @@ export default async function Home() {
               📞 <span className="sr-only">Phone: </span>06-40707077
             </a>
           </li>
-          <li>
+          <li className="flex gap-2">
             <a
               className="decoration-stone-900/50 underline-offset-4 hover:underline dark:decoration-stone-100/50"
               href="https://maps.app.goo.gl/ARmC54ZH69zgyWVe9"
@@ -130,6 +133,33 @@ export default async function Home() {
               📍 <span className="sr-only">Location: </span>Amsterdam, NL
             </a>
           </li>
+          <li className="flex items-center gap-2">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 34 33"
+              width={20}
+              height={20}
+              className="aspect-square size-3 invert dark:invert-0"
+            >
+              <g fill="#fff" clip-path="url(#a)">
+                <path d="M2.637 18.023c3.179 0 5.512-4.98 6.461-6.742.928-1.724 2.49-4.814 4.439-6.163l.756-3.65C14.47.728 13.93.011 13.197.011H3.292c-.783 0-1.464.559-1.648 1.35C.596 5.872.046 9.73.046 12.618c0 2.802.897 5.406 2.591 5.406ZM18.199 10.815c0-1.547-.495-3.211-1.581-3.211-1.653 0-3.066 2.623-4.562 5.4-1.041 1.935-2.118 3.935-3.515 5.533-.819.936-2.028 2.066-3.7 2.637h7.608c.785 0 1.515-.424 1.926-1.121.232-.395.467-.785.7-1.17 1.607-2.662 3.124-5.175 3.124-8.068Z" />
+                <path d="M29.795 4.773H18.973c1.735 1.13 2.617 3.426 2.617 6.042 0 3.908-1.852 6.976-3.642 9.943-1.614 2.672-3.138 5.197-3.138 8.118v2.937c0 .65.506 1.176 1.13 1.176h10.103c.624 0 1.13-.526 1.13-1.176v-2.73c0-6.728 6.781-10.62 6.781-18.334 0-3.724-1.762-5.976-4.159-5.976Z" />
+              </g>
+              <defs>
+                <clipPath id="a">
+                  <path fill="#fff" d="M0 0h34v33H0z" />
+                </clipPath>
+              </defs>
+            </svg>
+            <span className="flex gap-1">
+              <span>Developer</span>
+              <span>@</span>
+              <Link target="_blank" className="hover:underline" href="https://yummygum.com">
+                Yummygum
+              </Link>
+            </span>
+          </li>
         </ul>
       </aside>
     </div>

diff --git a/app/utils/markdownToText.ts b/app/utils/markdownToText.ts
@@ -5,5 +5,17 @@ export const markdownToText = (markdown: string) => {
     allowedTags: [], // Remove all HTML tags
     allowedAttributes: {}, // Remove all HTML attributes
   });
-  return sanitizedMarkdown.replace(/^\s*#+\s*/gm, ''); // Remove Markdown headings (e.g., # Heading)
+
+  // Remove all Markdown syntax
+  const plainText = sanitizedMarkdown
+    .replace(/^\s*#+\s*/gm, '') // Remove headings (e.g., # Heading)
+    .replace(/\*\*(.*?)\*\*/g, '$1') // Remove bold syntax (e.g., **text**)
+    .replace(/\*(.*?)\*/g, '$1') // Remove italic syntax (e.g., *text*)
+    .replace(/\[(.*?)\]\(.*?\)/g, '$1') // Remove links (e.g., [text](url))
+    .replace(/`(.*?)`/g, '$1') // Remove inline code (e.g., `code`)
+    .replace(/~~(.*?)~~/g, '$1') // Remove strikethrough (e.g., ~~text~~)
+    .replace(/\n+/g, '\n') // Normalize newlines
+    .trim(); // Trim leading/trailing whitespace
+
+  return plainText;
 };