auto create blog list

content/blogs/graphics/god-rays-01.md

@@ -4,7 +4,7 @@ title: God Rays - Part 1
 tags:
   - graphics
 created: 2024-06-12
-date: 2024-06-13
+publishDate: 2024-06-13
 aliases:
   - God Rays
 description: In this post we go over what are god rays and a couple different high-level approaches to them.
@@ -60,7 +60,6 @@ The occlusion map is an image that tells us which pixels are being **directly li
 > Default Scene [(Source)](https://raw.githubusercontent.com/math-araujo/screen-space-godrays/master/docs/images/first_pass.png)
 
 This is just the scene rendered normally. When rendering the scene as normal something called a [[shadow-map|Shadow Map]] is generated which is another image that just tells us what part of our scene is in shadow and what is illuminated. This will come in handy later when we want to composite our final image.
-
 > [!important]
 > It's important to note the distinction between the purpose of the shadow and occlusion map. The shadow map tells us **where shadows are** while the occlusion map tells us **what is blocking the light sources**. 
 

content/blogs/graphics/god-rays-02.md

@@ -4,10 +4,10 @@ title: God Rays - Part 2
 tags:
   - graphics
 created: 2024-06-14
-date: 2024-06-14
+publishDate: 2024-06-16
 aliases: 
 description: In this post I document my progress as I attempt my own implementation of god rays.
-previewImg: ./Resources/crepuscular_rays_fake.png
+previewImg: ./Resources/god-rays/god-rays-2-preview.png
 ---
 
 > [!warning] Disclaimer

content/index.md

@@ -17,8 +17,4 @@ So come join me in here in this blog where I will be attempting to document my p
 ## Dev Log
 No blog posts yet.
 
-## Graphics Blog
 
-> [!gridfloatleft] [[god-rays-01|God Rays]]
-> **Date**: *06/12/204*
-> ![[crepuscular_rays_fake.png]] 

quartz/components/Footer.tsx

@@ -13,6 +13,7 @@ export default ((opts?: Options) => {
     const links = opts?.links ?? []
     return (
       <footer class={`${displayClass ?? ""}`}>
+        <hr />
         <div class="giscus" style={{ marginTop: "5rem" }}></div>
         <hr />
         <p>
@@ -26,7 +27,7 @@ export default ((opts?: Options) => {
             </li>
           ))}
         </ul>
-      </footer>
+      </footer >
     )
   }
 

quartz/components/GraphicsBlogs.tsx

@@ -0,0 +1,79 @@
+import style from "./styles/recentblog.scss"
+
+// @ts-ignore: typescript doesn't know about our inline bundling system
+// so we need to silence the error
+import script from "./scripts/graphicsblog.inline"
+
+import { i18n } from "../i18n"
+import { FullSlug, resolveRelative } from "../util/path"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { Data } from "vfile"
+
+export default (() => {
+
+    const GraphicsBlogs: QuartzComponent = ({
+        allFiles,
+        fileData,
+        cfg
+    }: QuartzComponentProps) => {
+
+        const pages = allFiles.filter(curr => {
+            const isValid = (p: Data) => {
+                return p.filePath?.startsWith("content/blogs/graphics/") && !p.frontmatter?.draft
+            }
+            return isValid(curr)
+        })
+
+        const parseDate = (date: Date) => {
+            return date.toLocaleDateString('en-US') //`${date.getFullYear()}/${date.getMonth()}/${date.getDay()}`
+        }
+
+        return (
+            <div class="preview-graphics">
+                <h2 id="graphics-blog">
+                    Graphics Blogs
+                </h2>
+
+                {pages.map(page => {
+                    const title = page.frontmatter?.title ?? i18n(cfg.locale).propertyDefaults.title
+                    const tags = page.frontmatter?.tags ?? []
+
+                    return (<div class="preview">
+                        <img class="preview-image" src={page.frontmatter?.previewImg!} width="150" height="150" />
+                        <div class="preview-content">
+                            <div class="preview-title">
+                                <div>
+                                    <a href={resolveRelative(fileData.slug!, page.slug!)} class="internal">
+                                        {title}
+                                    </a>
+                                </div>
+
+                                <i>{page.frontmatter?.publishDate!}</i>
+                            </div>
+                            <ul class="preview-tags tags">
+                                {tags.map((tag) => (
+                                    <li>
+                                        <a
+                                            class="internal tag-link"
+                                            href={resolveRelative(fileData.slug!, `tags/${tag}` as FullSlug)}
+                                        >
+                                            {tag}
+                                        </a>
+                                    </li>
+                                ))}
+                            </ul>
+
+                            <p>{page.description}</p>
+                        </div>
+                    </div>)
+                })}
+            </div>
+        )
+    }
+
+    GraphicsBlogs.afterDOMLoaded = script;
+    GraphicsBlogs.css = style
+
+
+    return GraphicsBlogs
+}) satisfies QuartzComponentConstructor

quartz/components/index.ts

@@ -22,6 +22,7 @@ import Breadcrumbs from "./Breadcrumbs"
 
 import Comments from "./Comments"
 import RecentBlog from "./RecentBlog"
+import GraphicsBlogs from "./GraphicsBlogs"
 
 export {
   ArticleTitle,
@@ -47,5 +48,6 @@ export {
   Breadcrumbs,
 
   Comments,
-  RecentBlog
+  RecentBlog,
+  GraphicsBlogs
 }

quartz/components/renderPage.tsx

@@ -8,6 +8,7 @@ import { visit } from "unist-util-visit"
 import { Root, Element, ElementContent } from "hast"
 import { GlobalConfiguration } from "../cfg"
 import { i18n } from "../i18n"
+import GraphicsBlogs from "./GraphicsBlogs"
 
 interface RenderComponents {
   head: QuartzComponent
@@ -211,6 +212,8 @@ export function renderPage(
   )
 
   const lang = componentData.fileData.frontmatter?.lang ?? cfg.locale?.split("-")[0] ?? "en"
+  const BlogFeed = GraphicsBlogs()
+
   const doc = (
     <html lang={lang}>
       <Head {...componentData} />
@@ -232,6 +235,9 @@ export function renderPage(
                 </div>
               </div>
               <Content {...componentData} />
+              {componentData.fileData.filePath?.startsWith("content/index") && (
+                <BlogFeed {...componentData} />
+              )}
             </div>
             {RightComponent}
           </Body>

quartz/components/styles/recentblog.scss

@@ -1,3 +1,7 @@
+.preview-graphics .preview {
+    margin: 20px 0px;
+}
+
 .preview {
     display: flex;
     flex-direction: row;
@@ -11,6 +15,7 @@
     background: #00bfa510;
 
     & > .preview-image {
+        object-fit: cover;
         margin: 0px 0px;
         align-self: center;
     }