update hehe

ridhozhr10 · May 18, 2024 · 8990fa7 · 8990fa7
1 parent 0b5ac87
commit 8990fa7
Show file tree

Hide file tree

Showing 13 changed files with 260 additions and 61 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,8 +9,10 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "dayjs": "^1.11.11",
     "gray-matter": "^4.0.3",
     "next": "14.2.3",
+    "nextjs-toploader": "^1.6.12",
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^5.2.1",

diff --git a/src/app/_components/BlogPost/index.tsx b/src/app/_components/BlogPost/index.tsx
@@ -1,21 +1,32 @@
+import Link from "next/link";
 import "./markdown.css";
+import "./style.scss";
 import "highlight.js/styles/monokai.css";
 
 export type BlogPostProps = {
   content: string;
   title: string;
 };
-// TODO: selesain, kalo bingung liat aja contohnya referensi
-export default function BlogPost({ content }: BlogPostProps) {
+
+export default function BlogPost({ content, ...post }: BlogPostProps) {
   return (
     <>
-      <h1 className="my-20 block mx-auto text-5xl text-center">
-        WIP: CONSTRUCTION
-      </h1>
-      <article
-        className="markdown-body"
-        dangerouslySetInnerHTML={{ __html: content }}
-      />
+      <article>
+        <h1 className="text-4xl mb-5 mt-12 font-bold ">
+          <Link href="" className="no-underline">
+            {post.title}
+          </Link>
+        </h1>
+        <div
+          className="markdown-body mt-[30px]"
+          dangerouslySetInnerHTML={{ __html: content }}
+        />
+      </article>
+      <hr className="bg-[#4e4e57] h-[1px]" />
+      <div className="post-info">
+        <p></p>
+      </div>
+      <div id="pagination"></div>
     </>
   );
 }
diff --git a/src/app/_components/BlogPost/markdown.css b/src/app/_components/BlogPost/markdown.css
@@ -4,7 +4,7 @@
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
   margin: 0;
-  color: #e6edf3;
+  color: #a9a9b3;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans",
     Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
   font-size: 16px;
@@ -49,8 +49,8 @@
 
 .markdown-body a {
   background-color: transparent;
-  color: #2f81f7;
-  text-decoration: none;
+  color: #a9a9b3;
+  text-decoration: underline;
 }
 
 .markdown-body abbr[title] {
@@ -78,7 +78,7 @@
 
 .markdown-body mark {
   background-color: rgba(187, 128, 9, 0.15);
-  color: #e6edf3;
+  color: #a9a9b3;
 }
 
 .markdown-body small {
@@ -105,7 +105,7 @@
   border-style: none;
   max-width: 100%;
   box-sizing: content-box;
-  background-color: #0d1117;
+  background-color: #1b1c1d;
 }
 
 .markdown-body code,
@@ -124,11 +124,10 @@
   box-sizing: content-box;
   overflow: hidden;
   background: transparent;
-  border-bottom: 1px solid #21262d;
-  height: 0.25em;
+  height: 2px;
   padding: 0;
   margin: 24px 0;
-  background-color: #30363d;
+  background-color: #4e4e57;
   border: 0;
 }
 
@@ -258,9 +257,9 @@
   font: 11px ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
     Liberation Mono, monospace;
   line-height: 10px;
-  color: #e6edf3;
+  color: #a9a9b3;
   vertical-align: middle;
-  background-color: #161b22;
+  background-color: #1b1c1d;
   border: solid 1px rgba(110, 118, 129, 0.4);
   border-bottom-color: rgba(110, 118, 129, 0.4);
   border-radius: 6px;
@@ -315,7 +314,7 @@
 .markdown-body blockquote {
   margin: 0;
   padding: 0 1em;
-  color: #848d97;
+  color: #b2becd;
   border-left: 0.25em solid #30363d;
 }
 
@@ -442,7 +441,7 @@
 .markdown-body h4 .octicon-link,
 .markdown-body h5 .octicon-link,
 .markdown-body h6 .octicon-link {
-  color: #e6edf3;
+  color: #a9a9b3;
   vertical-align: middle;
   visibility: hidden;
 }
@@ -590,12 +589,12 @@
 }
 
 .markdown-body table tr {
-  background-color: #0d1117;
+  background-color: #1b1c1d;
   border-top: 1px solid #21262d;
 }
 
 .markdown-body table tr:nth-child(2n) {
-  background-color: #161b22;
+  background-color: #232425;
 }
 
 .markdown-body table img {
@@ -640,7 +639,7 @@
   display: block;
   padding: 5px 0 0;
   clear: both;
-  color: #e6edf3;
+  color: #a9a9b3;
 }
 
 .markdown-body span.align-center {
@@ -755,8 +754,8 @@
   overflow: auto;
   font-size: 85%;
   line-height: 1.45;
-  color: #e6edf3;
-  background-color: #161b22;
+  color: #a9a9b3;
+  background-color: #1b1c1d;
   border-radius: 6px;
 }
 
@@ -786,7 +785,7 @@
 .markdown-body .csv-data .blob-num {
   padding: 10px 8px 9px;
   text-align: right;
-  background: #0d1117;
+  background: #1b1c1d;
   border: 0;
 }
 
@@ -796,7 +795,7 @@
 
 .markdown-body .csv-data th {
   font-weight: 600;
-  background: #161b22;
+  background: #1b1c1d;
   border-top: 0;
 }
 
@@ -841,7 +840,7 @@
 }
 
 .markdown-body .footnotes li:target {
-  color: #e6edf3;
+  color: #a9a9b3;
 }
 
 .markdown-body .footnotes .data-footnote-backref g-emoji {

diff --git a/src/app/_components/BlogPost/style.scss b/src/app/_components/BlogPost/style.scss
@@ -0,0 +1,28 @@
+.post-info {
+  p {
+    margin: 0.8em 0;
+  }
+
+  a:hover {
+    border-bottom: 1px solid white;
+  }
+
+  svg {
+    margin-right: 0.8em;
+  }
+
+  .tag {
+    margin-right: 0.5em;
+
+    &::before {
+      content: "#";
+    }
+  }
+
+  .feather {
+    display: inline-block;
+    vertical-align: -0.125em;
+    width: 1em;
+    height: 1em;
+  }
+}
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+* {
+  @apply scroll-smooth;
+}
+
 body {
   @apply bg-bg-dark text-[#a9a9b3] min-h-[100vh] flex flex-col;
 }

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,11 +1,32 @@
 import type { Metadata } from "next";
-import { Inter, IBM_Plex_Mono } from "next/font/google";
+import NextTopLoader from "nextjs-toploader";
+import localFont from "next/font/local";
 import "./globals.css";
 
-const inter = Inter({
-  subsets: ["latin"],
-  weight: ["400", "600", "700"],
+const inter = localFont({
+  src: [
+    {
+      path: "../fonts/Inter-Bold.woff2",
+      weight: "600",
+      style: "normal",
+    },
+    {
+      path: "../fonts/Inter-Regular.woff2",
+      weight: "400",
+      style: "normal",
+    },
+  ],
   display: "swap",
+  declarations: [
+    {
+      prop: "font-feature-settings",
+      value: '"liga", "tnum", "case", "calt", "zero", "ss01", "locl"',
+    },
+    {
+      prop: "text-rendering",
+      value: "optimizeLegibility",
+    },
+  ],
   variable: "--font-inter",
 });
 
@@ -21,7 +42,10 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={`${inter.variable} font-sans`}>{children}</body>
+      <body className={`${inter.variable} font-sans`}>
+        <NextTopLoader color="#a9a9b3" />
+        {children}
+      </body>
     </html>
   );
 }