adding blogs pages

Author: prateekbh

package.json

@@ -33,6 +33,7 @@
   },
   "dependencies": {
     "@preact/prerender-data-provider": "^0.0.1",
+    "markdown-to-jsx": "^6.10.3",
     "preact": "^10.0.0",
     "preact-cli-plugin-netlify": "^1.5.0",
     "preact-render-to-string": "^5.0.6",

prerender-urls.js

@@ -1,25 +1,35 @@
 const { generateFileList } = require('./src/crawler');
 const { join } = require('path');
+const fs = require('fs');
 
 const [blogs, images] = generateFileList(join(__dirname, 'content')).nodes;
-
 module.exports = () => {
 	const pages = [
 		{ url: '/' }
 	];
 
-	// adding all blog posts page
+	// adding blogs list posts page
 	pages.push({
-		url: '/blog/',
+		url: '/blogs/',
 		data: blogs
 	});
 
+	// adding all blog pages
+	pages.push(...blogs.edges.map(blog => {
+		const data = fs.readFileSync(join('content', 'blog', blog.id), 'utf-8').replace(/---(.*\n)*---/, '');
+		return {
+			url: `/blog/${blog.id}`,
+			data: {
+				content: data
+			}
+		};
+	}));
+
+
 	pages.push({
 		url: '/photography/',
 		data: images
 	});
 
-	console.log({pages});
-
 	return pages;
 };

src/components/app.js

@@ -5,6 +5,7 @@ import Header from './header';
 
 // Code-splitting is automated for routes
 import Home from '../routes/home';
+import Blogs from '../routes/blogs';
 import Blog from '../routes/blog';
 import Photographs from '../routes/photographs';
 
@@ -25,7 +26,8 @@ export default class App extends Component {
 					<Header />
 					<Router onChange={this.handleRoute}>
 						<Home path="/" />
-						<Blog path="/blog/" />
+						<Blogs path="/blogs/" />
+						<Blog path="/blog/:name" />
 						<Photographs path="/photography/" />
 					</Router>
 				</div>

src/components/header/index.js

@@ -6,7 +6,7 @@ const Header = () => (
 	<header class={style.header}>
 		<Link href="/"><h1>Jane Doe</h1></Link>
 		<nav>
-			<Link activeClassName={style.active} href="/blog">Blogs</Link>
+			<Link activeClassName={style.active} href="/blogs">Blogs</Link>
 			<Link activeClassName={style.active} href="/photography">Photography</Link>
 		</nav>
 	</header>

src/routes/blog/index.js

@@ -1,38 +1,20 @@
 import { h } from 'preact';
 import { Link } from 'preact-router';
 import { usePrerenderData } from '@preact/prerender-data-provider';
+import Markdown from 'markdown-to-jsx';
 import style from './style';
 
 const blogs = (props) => {
 	const [data, isLoading] = usePrerenderData(props);
 	if (isLoading) {
 		return (<h1>Loading</h1>);
 	}
-	if (data && data.data) {
-		const { data: blogs } = data;
-		return (
-			<div class={style.pageBlogs}>
-				<h1 class={style.pageTitle}>My Blogs</h1>
-				{blogs.edges.map(blog => (
-					<Link href={`/blog/${blog.id}`}>
-						<article>
-							<h2>{blog.details.title}</h2>
-							<div>
-								{
-									(blog.details.tags.substr(1, blog.details.tags.length - 2).split(',') || []).map(tag => <span class={style.tag}>{tag}</span>)
-								}
-							</div>
-							<p class={style.preview}>
-								{blog.preview}
-							</p>
-						</article>
-					</Link>
-				))}
-			</div>
-		);
+
+	if (data && data.data && data.data.content) {
+		return (<Markdown>{ data.data.content }</Markdown>);
 	}
 
-	return (<h1>Error</h1>);
+	return (<h1>Blog</h1>);
 };
 
 export default blogs;

src/routes/blogs/index.js

@@ -0,0 +1,38 @@
+import { h } from 'preact';
+import { Link } from 'preact-router';
+import { usePrerenderData } from '@preact/prerender-data-provider';
+import style from './style';
+
+const blogs = (props) => {
+	const [data, isLoading] = usePrerenderData(props);
+	if (isLoading) {
+		return (<h1>Loading</h1>);
+	}
+	if (data && data.data) {
+		const { data: blogs } = data;
+		return (
+			<div class={style.pageBlogs}>
+				<h1 class={style.pageTitle}>My Blogs</h1>
+				{blogs.edges.map(blog => (
+					<Link href={`/blog/${blog.id}`}>
+						<article>
+							<h2>{blog.details.title}</h2>
+							<div>
+								{
+									(blog.details.tags.substr(1, blog.details.tags.length - 2).split(',') || []).map(tag => <span class={style.tag}>{tag}</span>)
+								}
+							</div>
+							<p class={style.preview}>
+								{blog.preview}
+							</p>
+						</article>
+					</Link>
+				))}
+			</div>
+		);
+	}
+
+	return (<h1>Error</h1>);
+};
+
+export default blogs;

src/routes/blogs/style.css

@@ -0,0 +1,48 @@
+.pageBlogs {
+  padding: 0 5%;
+}
+
+.pageTitle {
+  position: relative;
+  display: inline-block;
+  font-weight: 500;
+  font-family: serif;
+}
+
+.pageTitle:after {
+  position: absolute;
+  bottom: -5px;
+  left: 0px;
+  content: '';
+  width: 75%;
+  border-bottom: 2px solid #FFC107;
+}
+
+h2 {
+  font-weight: 400;
+  font-size: 24px;
+  margin: 48px 0 12px 0;
+}
+
+.tag {
+  padding: 4px 8px;
+  margin-left: 8px;
+  text-transform: lowercase;
+  background-color: #ffdd037c;
+  border-radius: 5px;
+  color: #999;
+  font-size: 12px;
+}
+
+.tag:first-child {
+  margin-left: 0px;
+}
+
+.preview {
+  width: 50%;
+  line-height: 1.3;
+  color: #666;
+  max-height: 80px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

yarn.lock

@@ -6233,6 +6233,14 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+markdown-to-jsx@^6.10.3:
+  version "6.10.3"
+  resolved "https://registry.yarnpkg.com/markdown-to-jsx/-/markdown-to-jsx-6.10.3.tgz#7f0946684acd321125ff2de7fd258a9b9c7c40b7"
+  integrity sha512-PSoUyLnW/xoW6RsxZrquSSz5eGEOTwa15H5eqp3enmrp8esmgDJmhzd6zmQ9tgAA9TxJzx1Hmf3incYU/IamoQ==
+  dependencies:
+    prop-types "^15.6.2"
+    unquote "^1.1.0"
+
 markdown@^0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/markdown/-/markdown-0.5.0.tgz#28205b565a8ae7592de207463d6637dc182722b2"
@@ -7961,7 +7969,7 @@ prompts@^2.2.1:
     kleur "^3.0.3"
     sisteransi "^1.0.3"
 
-prop-types@^15.6.1, prop-types@^15.7.2:
+prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -9678,7 +9686,7 @@ [email protected], unpipe@~1.0.0:
   resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
   integrity sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=
 
-unquote@~1.1.1:
+unquote@^1.1.0, unquote@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/unquote/-/unquote-1.1.1.tgz#8fded7324ec6e88a0ff8b905e7c098cdc086d544"
   integrity sha1-j97XMk7G6IoP+LkF58CYzcCG1UQ=