blog rendering finished

package.json

@@ -50,6 +50,7 @@
 		"rehype-highlight": "^7.0.0",
 		"rehype-picture": "^5.0.0",
 		"rehype-stringify": "^10.0.0",
+		"rehype-wrap": "^1.1.0",
 		"remark-frontmatter": "^5.0.0",
 		"remark-gfm": "^4.0.0",
 		"remark-parse": "^11.0.0",

src/lib/NavBar.svelte

@@ -20,6 +20,9 @@
                 <a href="{ base }/about" class="px-3 py-2 transition hover:-translate-y-1">
                     About
                 </a>
+				<a href="{ base }/blogs" class="px-3 py-2 transition hover:-translate-y-1">
+					Blog
+				</a>
                 <a href="{ base }/contact" class="px-3 py-2 transition hover:-translate-y-1">
                     Contact
                 </a>

src/lib/ProjectCard.svelte

@@ -1,12 +1,17 @@
 <script lang="ts">
+	export let link: string;
+	export let img: string;
+	export let title: string;
+
     import { base } from '$app/paths';
 
-	export let img, title, href: string
+	import { onMount } from 'svelte';
+
 
 
 </script>
 
-<a href="{ base }{ href? href : '/' }" class="flex flex-col group relative space">
+<a href="{ base }/{ link? `projects/${link}` : '/' }" class="flex flex-col group relative space">
     <div class="aspect-h-8 aspect-w-16 relative">
         <img src="{ base }{ img? img : '/' }" alt="" class="w-full object-cover rounded-3xl group-hover:scale-[0.99] duration-500">
 		<!--height is in the arrow direction-->

src/lib/server/PageGeneration.ts

@@ -5,14 +5,16 @@ import { unified } from 'unified';
 import remarkGfm from 'remark-gfm';
 import remarkParse from 'remark-parse';
 import rehypeStringify from 'rehype-stringify';
-import remark2rehype from 'remark-rehype';
+import remarkRehype from 'remark-rehype'
 import rehypeHighlight from 'rehype-highlight';
 import rehypePicture from 'rehype-picture';
 import remarkFrontmatter from 'remark-frontmatter';
 import remarkStringify from 'remark-stringify';
 import { matter } from 'vfile-matter';
 import { VFile } from 'vfile';
-
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
+import rehypeWrap from 'rehype-wrap';
 
 export type PageOption = "blogs" | "projects";
 export interface PageMeta {
@@ -36,10 +38,11 @@ export const processMarkdown = async (rawJSON: PageMeta): Promise<PageMeta> => {
 		.parse(rawJSON.body);
 
 	const processor =  unified()
-		.use(remark2rehype)
+		.use(remarkRehype)
 		.use(rehypePicture)
 		.use(rehypeStringify)
-		.use(rehypeHighlight);
+		.use(rehypeHighlight)
+		.use(rehypeWrap, {selector: 'img', wrapper: 'div.round.p-4.bg-stone-500'})
 
 
 	return {
@@ -64,6 +67,7 @@ export const readPage = async (fileName: string, pageType: PageOption): Promise<
 	matter(pageVFile, {strip: true})
 	data.body = String(pageVFile)
 	console.log("test" + data.body)
+
 	data.unixDate = dayjs(data.date).unix();
 	data.unixLastMod = dayjs(data.lastMod).unix();
 

src/routes/+page.svelte

@@ -31,21 +31,22 @@
 
 
     <div class="flex flex-col space-y-6 ">
-		<ProjectCard img="/RealityFromScratchHeadset.jpg" title="Reality From Scratch">
+		<ProjectCard img="/RealityFromScratchHeadset.jpg" title="Reality From Scratch" link="reality-from-scratch">
 			The modular, open-source VR headset for research and experimentation.
 		</ProjectCard>
 		<div class="flex flex-col lg:flex-row space-y-2 lg:space-y-0 lg:space-x-2 h-[200]">
-			<ProjectCard img="/NorthStarHeadset.jpg" title="Project Northstar-DIY" >
+			<ProjectCard img="/NorthStarHeadset.jpg" title="Project Northstar-DIY" link="project-north-star">
 				A fully self-contained AR device based on Ultraleap's Project North Star.
 			</ProjectCard>
-			<ProjectCard img="/DeepFocus.webp" title="DeepFocus (Redux)" >
+			<ProjectCard img="/DeepFocus.webp" title="DeepFocus (Redux)" link="deep-focus">
 				Generating training data for ML-based real-time defocus blur.
 			</ProjectCard>
 		</div>
 
-        <ProjectCard img="/EyeTrackVR.webp" title="Eye Tracking"  >
+        <ProjectCard img="/EyeTrackVR.webp" title="Eye Tracking" link="eye-track-vr" >
 			Pupil tracking based on EyeTrackVR with ML & computer vision.
 		</ProjectCard>
+
     </div>
 
 

src/routes/blogs/+page.svelte

@@ -0,0 +1,47 @@
+<script>
+import ProjectCard from '$lib/ProjectCard.svelte';
+import LightButton from '$lib/LightButton.svelte';
+import { base } from '$app/paths';
+</script>
+
+
+
+<div class="p-4 sm:p-10 lg:p-20 flex flex-col space-y-4 sm:space-y-8 lg:space-y-32">
+
+	<div class="flex flex-col space-y-10 pb-10">
+
+		<div class="ml-2">
+			<h1 class="font-normal text-5xl md:text-6xl lg:text-7xl">
+				The Project Collective
+			</h1>
+		</div>
+		<div class="font-normal text-2xl md:text-3xl lg:text-4xl">
+			See how we've turned ideas into <span class="line-through">virtual</span> reality.
+			<span class="text-gray-500">Dive into our teams' current research.</span>
+		</div>
+	</div>
+
+
+	<div class="flex flex-col lg:flex-none space-y-6 sm:space-y-0 sm:gap-4 sm:grid sm:grid-cols-2 sm:grid-flow-row ">
+		<a href="{base}/blogs/about">
+			test blog path
+		</a>
+	</div>
+
+
+	<div class="flex flex-col">
+		<div class="">
+			<span class="font-normal text-5xl lg:text-6xl">Interested in starting your own project?</span>
+			<span class="font-normal text-5xl lg:text-6xl text-gray-500">Join us in crafting impactful virtual experiences.</span>
+		</div>
+		<div class="flex flex-row pt-10">
+			<LightButton url="/projects" >
+				CONTACT US
+		 	</LightButton>
+		</div>
+
+	</div>
+
+
+
+</div>

src/routes/blogs/[blog]/+page.svelte

@@ -0,0 +1,23 @@
+<script lang='ts'>
+	import type { PageMeta } from '$lib/server/PageGeneration';
+
+	export let data: PageMeta
+	let blog = data
+</script>
+<div class="w-full ">
+	<div id="blogCard" class="bg-gray-50 dark:bg-gray-700 rounded-xl p-8 w-full">
+		<div class="font-bold text-3xl pb-4 dark:text-gray-100">
+			{blog.title}
+		</div>
+		<div class="font-medium text-lg pb-4 dark:text-gray-100">
+			{blog.date}
+		</div>
+		<div class="font-medium text-base pb-4 text-gray-600 dark:text-gray-200">
+			{blog.description}
+		</div>
+		<div class="prose lg:prose-xl sm:prose-sm dark:text-gray-100 dark:prose-dark">
+			{@html blog.body}
+		</div>
+
+	</div>
+</div>

src/routes/blogs/[blog]/+page.ts

@@ -0,0 +1,6 @@
+import type { PageLoad } from './$types';
+import type { PageMeta } from '$lib/server/PageGeneration';
+
+export const load: PageLoad = async ({ data, params }) => {
+	return data as PageMeta
+};

src/routes/projects/+page.svelte

@@ -22,19 +22,16 @@ import LightButton from '$lib/LightButton.svelte';
 
 
 	<div class="flex flex-col lg:flex-none space-y-6 sm:space-y-0 sm:gap-4 sm:grid sm:grid-cols-2 sm:grid-flow-row ">
-		<ProjectCard img="/RealityFromScratchHeadset.jpg" title="Reality From Scratch">
+		<ProjectCard img="/RealityFromScratchHeadset.jpg" title="Reality From Scratch" link="reality-from-scratch">
 			The modular, open-source VR headset for research and experimentation.
 		</ProjectCard>
-
-		<ProjectCard img="/NorthStarHeadset.jpg" title="Project Northstar-DIY" >
+		<ProjectCard img="/NorthStarHeadset.jpg" title="Project Northstar-DIY" link="project-north-star">
 			A fully self-contained AR device based on Ultraleap's Project North Star.
 		</ProjectCard>
-
-		<ProjectCard img="/DeepFocus.webp" title="DeepFocus (Redux)" >
+		<ProjectCard img="/DeepFocus.webp" title="DeepFocus (Redux)" link="deep-focus">
 			Generating training data for ML-based real-time defocus blur.
 		</ProjectCard>
-
-		<ProjectCard img="/EyeTrackVR.webp" title="Eye Tracking"  >
+		<ProjectCard img="/EyeTrackVR.webp" title="Eye Tracking" link="eye-track-vr" >
 			Pupil tracking based on EyeTrackVR with ML & computer vision.
 		</ProjectCard>
 	</div>

src/routes/projects/[project]/+page.svelte

@@ -3,7 +3,6 @@
 
 	export let data: PageMeta
 	let blog = data
-	console.log(data.body)
 </script>
 <div class="w-full ">
 	<div id="blogCard" class="bg-gray-50 dark:bg-gray-700 rounded-xl p-8 w-full">

static/projects/deep-focus.md

@@ -0,0 +1,30 @@
+---
+title: About us
+date: 2019-02-23 19:20:33
+description: About Our Team
+thumbnail: NorthStarHeadset.jpg
+category: About
+author: UW Reality Labs
+tags:
+- About
+- VR
+- AR
+- Design
+- Development
+lastMod: 2019-02-23 19:20:33
+license: CC BY-NC-ND
+---
+![Saturn](//upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Saturn_during_Equinox.jpg/300px-Saturn_during_Equinox.jpg)
+
+## 👋 Hello From UW Reality Labs
+
+We're the newest design team on the block, and we're here to make your virtual reality dreams come true.
+We're a small team of designers, developers, and artists who are passionate about creating the best virtual reality experiences possible.
+We're always looking for new ways to push the boundaries of what's possible in VR, and we're excited to share our work with you.
+
+## 📓 Contacts
+You can reach us at:
+
+Github: [@uwrealitylabs](https://github.com/uwrealitylabs)
+
+Twitter: [UW Reality Labs](https://twitter.com/uwrealitylabs)

static/projects/eye-track-vr.md

@@ -0,0 +1,30 @@
+---
+title: About us
+date: 2019-02-23 19:20:33
+description: About Our Team
+thumbnail: NorthStarHeadset.jpg
+category: About
+author: UW Reality Labs
+tags:
+- About
+- VR
+- AR
+- Design
+- Development
+lastMod: 2019-02-23 19:20:33
+license: CC BY-NC-ND
+---
+![Saturn](//upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Saturn_during_Equinox.jpg/300px-Saturn_during_Equinox.jpg)
+
+## 👋 Hello From UW Reality Labs
+
+We're the newest design team on the block, and we're here to make your virtual reality dreams come true.
+We're a small team of designers, developers, and artists who are passionate about creating the best virtual reality experiences possible.
+We're always looking for new ways to push the boundaries of what's possible in VR, and we're excited to share our work with you.
+
+## 📓 Contacts
+You can reach us at:
+
+Github: [@uwrealitylabs](https://github.com/uwrealitylabs)
+
+Twitter: [UW Reality Labs](https://twitter.com/uwrealitylabs)

static/projects/project-north-star.md

@@ -14,6 +14,7 @@ tags:
 lastMod: 2019-02-23 19:20:33
 license: CC BY-NC-ND
 ---
+![Saturn](//upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Saturn_during_Equinox.jpg/300px-Saturn_during_Equinox.jpg)
 
 ## 👋 Hello From UW Reality Labs
 

static/projects/reality-from-scratch.md

@@ -0,0 +1,30 @@
+---
+title: About us
+date: 2019-02-23 19:20:33
+description: About Our Team
+thumbnail: NorthStarHeadset.jpg
+category: About
+author: UW Reality Labs
+tags:
+- About
+- VR
+- AR
+- Design
+- Development
+lastMod: 2019-02-23 19:20:33
+license: CC BY-NC-ND
+---
+![Saturn](//upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Saturn_during_Equinox.jpg/300px-Saturn_during_Equinox.jpg)
+
+## 👋 Hello From UW Reality Labs
+
+We're the newest design team on the block, and we're here to make your virtual reality dreams come true.
+We're a small team of designers, developers, and artists who are passionate about creating the best virtual reality experiences possible.
+We're always looking for new ways to push the boundaries of what's possible in VR, and we're excited to share our work with you.
+
+## 📓 Contacts
+You can reach us at:
+
+Github: [@uwrealitylabs](https://github.com/uwrealitylabs)
+
+Twitter: [UW Reality Labs](https://twitter.com/uwrealitylabs)