WIP...

Author: devRD

_posts/hello-world.md renamed to _posts/gsoc_fin.md

@@ -1,13 +1,13 @@
 ---
 title: 'Learn How to Pre-render Pages Using Static Generation with Next.js'
 excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus.'
-coverImage: '/assets/blog/hello-world/cover.jpg'
-date: '2020-03-16T05:35:07.322Z'
+coverImage: 'http://localhost:3000/website/assets/blog/gsoc_fin/cover.png'
+date: '2023-08-12T15:21:32.163Z'
 author:
   name: Ratnabali Dutta
   picture: '/assets/blog/authors/myAvatar.png'
 ogImage:
-  url: '/assets/blog/hello-world/cover.jpg'
+  url: 'http://localhost:3000/website/assets/blog/gsoc_fin/cover.png'
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.

_posts/latex_1.md

@@ -0,0 +1,57 @@
+---
+title: 'About LaTeX, Modes, and Mathtext'
+excerpt: 'This blog is a textual reference to help document what I learned about LaTeX and the mechanics of its implementation.'
+coverImage: 'http://localhost:3000/website/assets/blog/latex_1/cover.png'
+date: '2023-08-12T15:21:32.163Z'
+author:
+  name: devrd
+  picture: '/assets/blog/authors/myAvatar.png'
+ogImage:
+  url: 'http://localhost:3000/website/assets/blog/latex_1/cover.png'
+---
+
+## **LaTeX: Yes, the one used in _typesetting_ [Part - I]**
+
+A significant usage of LaTeX is its ability to handle complex mathematical expressions and keep user-friendliness in mind, primarily combining the simplest of formulas to build a more intricate one. We will discuss how LaTeX typesets math formulas and mathematical fonts. 
+
+TeX can tap into 6 modes: the Vertical Mode, Internal Vertical Mode, Horizontal Mode, Restricted Horizontal Mode, Math Mode, and Display Math Mode. We will come across this along the way of discussing math
+
+In math mode, (fun fact $$ is used as math brackets because typesetting math is supposedly expensive) TeX creates math lists that are composed of the following types of things:
+* An atom 
+* A horizontal or a vertical material (check) (\hbox, \vadjust{kern1pt})
+* A glob of Glue (\hskip, \mskip)
+* Kern (\kern)
+* A style change (\displaystyle, \scriptstyle)
+* Generalized fraction (\above, \over)
+* Boundary (\left, \right)
+* A four-way choice (\mathchoice)
+
+
+The most important items are called atoms, and they have three parts: a nucleus, a
+superscript, and a subscript. In TeX, atoms can be one of 13 different types, Ord (ordinary like ‘x’), Op (large operator like summation in the figure below), Bin (binary operator ‘+’), Rel (relational operator ‘=’), Open ‘(’, Close ‘)’, Punctuation, Inner (12), Over (a), Under (a), Accented (à), Radical (√2), \Vcent (Vbox to be centered).
+
+
+#### **Boxes, dimensions, and glue** 
+
+<div style="display: flex;">
+  <p>
+   Boxes are two-dimensional rectangles with mainly 3 associated measurements, height, width, and depth. Basically, everything gets constructed nimbly by gluing these rectangles together. The TeX boxes come with a baseline which is also the reference point in aligning the characters used in the text. These dimensions vary across different fonts. Some of the symbols, however, extend beyond these measurements in special cases like using an italic font or a big operator. We can also use black boxes (◼) in TeX which are used to create horizontal or vertical lines, notably known as ‘\hrule’ or ‘\vrule’.
+
+  </p>
+  <img src="http://localhost:3000/website/assets/blog/latex_1/baseline.png" width="250" height="250"/>
+</div>
+
+<div style="display: flex;">
+  <img src="http://localhost:3000/website/assets/blog/latex_1/baseline_eg.png" width="300" height="250"/>
+  <p>
+------ Placeholder text:------The TeX boxes come with a baseline which is also the reference point in aligning the characters used in the text. These dimensions vary across different fonts. Some of the symbols, however, extend beyond these measurements in special cases like using an italic font or a big operator. We can also use black boxes (◼) in TeX which are used to create horizontal or vertical lines, notably known as ‘\hrule’ or ‘\vrule’.
+  </p>
+</div>
+
+When typesetting any formula, we wrap the appropriate characters in a box derived from its font dimensions using the ‘\hbox’ command, and eventually the individual horizontal boxes are wrapped in a ‘\vbox’ command to create a vertical box. In TeX’s view, two lines of text would look like this:
+
+<div style="text-align: center">
+  <img src="http://localhost:3000/website/assets/blog/latex_1/boxes.png" width="750" height="250"/>
+</div>
+
+Like every crafting project, TeX also uses glue to paste these boxes together. In simpler terms, words and lines are glued together to maintain cleanliness and alignment. Glue also comes with its own attributes which are construed as its own space, the ability to stretch, and the ability to shrink. To determine the thickness of the glue, TeX has its own formula to set the stretchability and shrinkability. (Commands used to set glue: \vskip, \hskip, \vfill, \hfill)

drafts/preview.md renamed to _posts/latex_2.md

@@ -1,13 +1,13 @@
 ---
-title: 'Preview Mode for Static Generation'
+title: 'Learn How to Pre-render Pages Using Static Generation with Next.js'
 excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus.'
-coverImage: '/assets/blog/preview/cover.jpg'
-date: '2020-03-16T05:35:07.322Z'
+coverImage: 'http://localhost:3000/website/assets/blog/latex_2/cover.png'
+date: '2023-08-13T15:21:32.163Z'
 author:
-  name: Ratnabali Dutta
+  name: devrd
   picture: '/assets/blog/authors/myAvatar.png'
 ogImage:
-  url: '/assets/blog/preview/cover.jpg'
+  url: 'http://localhost:3000/website/assets/blog/latex_2/cover.png'
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.

components/hero-post.tsx

@@ -34,19 +34,23 @@ const HeroPost = ({
   return (
     <>
       {/** Add Cover Image Hero as background **/}
-      <div className={`${unna.className} position-relative ${styles.herocont}`}>
+      <div className={`${unna.className} ${styles.herocont}`}>
         <CoverImage title={title} src={coverImage} slug={slug} />
-        <div className={`${styles.text} position-absolute`}>
-          <h4 className={`mb-4 text-truncate ${styles.herotitle}`}>
+        <div className={`${styles.text}`}>
+          <h3 className="fs-4 mb-1 text-truncate">
             <Link
               as={`/posts/${slug}`}
               href="/posts/[slug]"
+              className="hover:underline"
             >
               {title}
             </Link>
-          </h4>
-          <DateFormatter dateString={date} />
-          <p className="mt-4 mb-4 text-truncate">{excerpt}</p>
+          </h3>
+          <div className="text-lg mb-4">
+            <DateFormatter dateString={date} />
+          </div>
+          <p className="mb-4">{excerpt}</p>
+          <Avatar name={author.name} picture={author.picture} />
         </div>
       </div>
     </>

components/more-stories.tsx

@@ -9,7 +9,7 @@ const MoreStories = ({ posts }: Props) => {
   return (
     <section>
       <h2 className="mt-5 mb-3 fs-3 fw-bold">
-        More Stories...
+        More Posts...
       </h2>
       <div className="row">
         {posts.map((post) => (

components/post-body.tsx

@@ -1,17 +1,33 @@
 import markdownStyles from './markdown-styles.module.css'
+import ReactMarkdown from 'react-markdown'
+import rehypeRaw from "rehype-raw";
+import Image from 'next/image'
 
 type Props = {
   content: string
 }
 
 const PostBody = ({ content }: Props) => {
+  
+  console.log(content)
   return (
-    <div className="max-w-2xl mx-auto">
-      <div
-        className={markdownStyles['markdown']}
-        dangerouslySetInnerHTML={{ __html: content }}
-      />
-    </div>
+    <ReactMarkdown
+      children={content}
+      rehypePlugins={[rehypeRaw]}
+      className={markdownStyles['markdown']}
+      escapeHtml={false}
+      components={{
+        img: (props) => (
+          <Image
+            src={props.src}
+            alt={props.alt}
+            width={props.width}
+            height={props.height}
+            className="position-relative p-3 m-1"
+          />
+        ),
+      }}
+    />
   )
 }
 

drafts/test.md renamed to drafts/gsoc_fin.md

@@ -1,13 +1,13 @@
 ---
 title: 'Learn How to Pre-render Pages Using Static Generation with Next.js'
 excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus.'
-coverImage: '/assets/blog/hello-world/cover.jpg'
-date: '2020-03-16T05:35:07.322Z'
+coverImage: 'http://localhost:3000/website/assets/blog/gsoc_fin/cover.png'
+date: '2023-08-12T15:21:32.163Z'
 author:
   name: Ratnabali Dutta
   picture: '/assets/blog/authors/myAvatar.png'
 ogImage:
-  url: '/assets/blog/hello-world/cover.jpg'
+  url: 'http://localhost:3000/website/assets/blog/gsoc_fin/cover.png'
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.

next.config.js

@@ -4,6 +4,10 @@ const nextConfig = {
 
  // Add basePath
   basePath: '/website',
+  images: {
+    domains: ['localhost'],
+  },
+
 
 }
 

package-lock.json

@@ -13,6 +13,8 @@
     "next": "latest",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-markdown": "^8.0.7",
+    "rehype-raw": "^6.1.1",
     "remark": "^14.0.2",
     "remark-html": "^15.0.1",
     "typescript": "^4.7.4"