feat: site aware header titles

components/Layout.js

@@ -27,7 +27,7 @@ export default function Layout({
   return (
     <section className={`layout`}>
       <Meta siteTitle={siteTitle} siteDescription={siteDescription} />
-      <Header siteTitle="~garrit" />
+      <Header siteTitle={siteTitle} />
       <div className="content">{children}</div>
       <Footer />
       <style jsx>

components/Page.js

@@ -1,9 +1,10 @@
 import Layout from "./Layout";
 
 export default function Page(props) {
-    const { title, date } = props;
+    const { title, date, siteTitle } = props;
+    console.log(props);
     return (
-        <Layout siteTitle={title}>
+        <Layout siteTitle={siteTitle}>
             <article className="page">
                 { title && <div className="page__info">
                     <h1>{title}</h1>

content/cv.md

@@ -1,5 +1,6 @@
 ---
 title: "Curriculum Vitae"
+siteTitle: "Garrit's CV"
 ---
 
 ## Education

pages/[page].js

@@ -11,8 +11,10 @@ export default function PageTemplate(props) {
      */
     if (!props.frontmatter) return <></>;
 
+    const siteTitle = props.frontmatter.siteTitle || props.siteTitle;
+
     return (
-        <Page title={props.frontmatter.title}>
+        <Page title={props.frontmatter.title} siteTitle={siteTitle}>
             <ReactMarkdown source={props.markdownBody} />
         </Page>
     );
@@ -25,7 +27,7 @@ export async function getStaticProps({ ...ctx }) {
 
     return {
         props: {
-            siteTitle: "~garrit",
+            siteTitle: "Garrit's Site",
             frontmatter: data.data,
             markdownBody: data.content,
         },

pages/index.js

@@ -4,7 +4,7 @@ import Page from "../components/Page";
 
 const Index = (props) => {
     return (
-        <Page>
+        <Page siteTitle="Garrit's Site">
             <ReactMarkdown source={props.markdownBody} />
         </Page>
     );

pages/posts/[post].js

@@ -18,7 +18,7 @@ export default function BlogTemplate(props) {
     if (!props.frontmatter) return <></>;
 
     return (
-        <Page title={props.frontmatter.title} date={reformatDate(props.frontmatter.date)}>
+        <Page siteTitle="Garrit's Notes" title={props.frontmatter.title} date={reformatDate(props.frontmatter.date)}>
             <ReactMarkdown
                 source={props.markdownBody}
                 date={props.frontmatter.date}
@@ -49,7 +49,6 @@ export async function getStaticProps({ ...ctx }) {
 
     return {
         props: {
-            siteTitle: "~garrit",
             frontmatter: data.data,
             markdownBody: data.content,
         },

pages/posts/index.js

@@ -4,7 +4,7 @@ import matter from "gray-matter";
 
 const Index = (props) => {
   return (
-    <Layout pathname="/" siteTitle="~garrit" siteDescription="">
+    <Layout pathname="/" siteTitle="Garrit's Notes" siteDescription="">
       <section>
         <BlogList posts={props.posts} />
       </section>
@@ -40,7 +40,6 @@ export async function getStaticProps() {
   return {
     props: {
       posts,
-      title: "~garrit",
       description: "",
     },
   };

styles/components/header.scss

@@ -9,6 +9,7 @@ nav {
         text-align: center;
         padding: 24px;
         font-weight: 400;
+        font-family: 'Roboto Mono', Courier, monospace;
         font-size: 40px;
 
         @media (prefers-color-scheme: light) {

styles/foundation/fonts.scss

@@ -7,3 +7,8 @@
   font-family: "Source Sans Pro Light";
   src: url("/fonts/OpenSans-Regular.ttf") format("ttf");
 }
+
+@font-face {
+  font-family: "Roboto Mono";
+  src: url("/fonts/RobotoMono-Variable.ttf") format("ttf");
+}