diff --git a/content/Resources/god-rays/god-rays-2-preview.png b/content/Resources/god-rays/god-rays-2-preview.png new file mode 100644 index 000000000..a9d365f4f Binary files /dev/null and b/content/Resources/god-rays/god-rays-2-preview.png differ diff --git a/content/blogs/graphics/god-rays-01.md b/content/blogs/graphics/god-rays-01.md index 7ba7d57f5..96800574b 100644 --- a/content/blogs/graphics/god-rays-01.md +++ b/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**. diff --git a/content/blogs/graphics/god-rays-02.md b/content/blogs/graphics/god-rays-02.md index 4563b3ebc..e3bca5442 100644 --- a/content/blogs/graphics/god-rays-02.md +++ b/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 diff --git a/content/index.md b/content/index.md index 8cf9df548..6098b2229 100644 --- a/content/index.md +++ b/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]] diff --git a/quartz/components/Footer.tsx b/quartz/components/Footer.tsx index f1cd160b3..3b959d9de 100644 --- a/quartz/components/Footer.tsx +++ b/quartz/components/Footer.tsx @@ -13,6 +13,7 @@ export default ((opts?: Options) => { const links = opts?.links ?? [] return ( + ) } diff --git a/quartz/components/GraphicsBlogs.tsx b/quartz/components/GraphicsBlogs.tsx new file mode 100644 index 000000000..3d40b1b74 --- /dev/null +++ b/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 ( +
+

+ Graphics Blogs +

+ + {pages.map(page => { + const title = page.frontmatter?.title ?? i18n(cfg.locale).propertyDefaults.title + const tags = page.frontmatter?.tags ?? [] + + return (
+ +
+
+
+ + {title} + +
+ + {page.frontmatter?.publishDate!} +
+ + +

{page.description}

+
+
) + })} +
+ ) + } + + GraphicsBlogs.afterDOMLoaded = script; + GraphicsBlogs.css = style + + + return GraphicsBlogs +}) satisfies QuartzComponentConstructor \ No newline at end of file diff --git a/quartz/components/index.ts b/quartz/components/index.ts index 43ad33b79..2a9224d71 100644 --- a/quartz/components/index.ts +++ b/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 } diff --git a/quartz/components/renderPage.tsx b/quartz/components/renderPage.tsx index 251a53f2e..d80607785 100644 --- a/quartz/components/renderPage.tsx +++ b/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 = ( @@ -232,6 +235,9 @@ export function renderPage( + {componentData.fileData.filePath?.startsWith("content/index") && ( + + )} {RightComponent} diff --git a/quartz/components/scripts/graphicsblog.inline.ts b/quartz/components/scripts/graphicsblog.inline.ts new file mode 100644 index 000000000..e69de29bb diff --git a/quartz/components/styles/recentblog.scss b/quartz/components/styles/recentblog.scss index 54e372cae..3360f4e99 100644 --- a/quartz/components/styles/recentblog.scss +++ b/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; }