Add open graph support!

Reboot-Codes · Reboot-Codes · commit ae6d55942ea3 · 2024-10-22T22:21:14.000-07:00
diff --git a/src/_data/generalData.json b/src/_data/generalData.json
@@ -1,4 +1,5 @@
 {
+  "baseUrl": "https://www.reboot-codes.com",
   "site": {
     "title": "Reboot/Fitz"
   },
diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk
@@ -6,16 +6,18 @@ useContainer: true
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>{% include "copywriting/title.njk" %}</title>
     <link rel="stylesheet" href="/styles/global.css" />
     <link rel="icon" href="/favicon.png" />
-    <a rel="me" href="https://mastodon.social/@reboothasmastodon"></a>
-    <a rel="me" href="https://tiggi.es/@reboot"></a>
-    {% if (opengraph) %}
     <!-- TODO: Implement opengraph for all pages. -->
-    {% endif %}
+    <meta property="og:title" content="{% if title %}{{ title }}{% else %}{% include "copywriting/sectionTitle.njk" %}{% endif %}" />
+    <meta property="og:description" content="{% if description %}{{ description }}{% else %}{% if title %}{% include "copywriting/sectionTitle.njk" %}{% endif %}{% endif %}" />
+    <meta property="og:site_name" content="{% include "copywriting/sectionTitle.njk" %}" />
+    {% if openGraph.imgUrl %}<meta id="og:image" content="{{ openGraph.imgUrl }}" />{% endif %}
+    <a rel="me" href="https://mastodon.social/@reboothasmastodon" style="color: rgba(0, 0, 0, 0); position: absolute;" aria-hidden="true"></a>
+    <a rel="me" href="https://tiggi.es/@reboot" style="color: rgba(0, 0, 0, 0); position: absolute;" aria-hidden="true"></a>
   </head>
   <body>
     {% include "components/navigation.njk" %}
diff --git a/src/_includes/layouts/project.njk b/src/_includes/layouts/project.njk
@@ -30,7 +30,7 @@ useContainer: true
 {%- for item in pagination.items %}
   {% if item.data.published != false %}
     <a id="post-{{ loop.index }}" class="post transition" href="{{ item.page.url }}">
-      <p>{{ item.data.title }}</p>
+      <p class="post-title">{{ item.data.title }}</p>
       <p>on {{ item.page.date | formatDate }}, takes {{ item.content | timeToRead }} to read.</p>
     </a>
   {% endif %}
diff --git a/src/index.njk b/src/index.njk
@@ -17,7 +17,7 @@ pagination:
   <div class="home-section-card-content">
     {%- for item in pagination.items %}
       <a href="{{ item.page.url }}" class="home-section-card">
-        <h3>{{ item.data.title }}</h3>
+        <h3 class="home-section-card-title">{{ item.data.title }}</h3>
         <p>{{ item.data.description }}</p>
       </a>
     {% endfor -%}
diff --git a/src/posts.njk b/src/posts.njk
@@ -31,7 +31,7 @@ pagination:
 <div id="posts-list" class="post-list">
 {%- for item in pagination.items %}
   <a id="post-{{ loop.index }}" href="{{ item.page.url }}" class="post transition">
-    <p>{{ item.data.title }}</p>
+    <p class="post-title">{{ item.data.title }}</p>
     <p>on {{ item.page.date | formatDate }}, takes {{ item.content | timeToRead }} to read.</p>
   </a>
 {% endfor -%}
diff --git a/src/projects.njk b/src/projects.njk
@@ -13,7 +13,7 @@ pagination:
 <div id="posts-list" class="post-list">
 {%- for item in pagination.items %}
   <a id="post-{{ loop.index }}" class="post transition" href="{{ item.page.url }}">
-    <p>{{ item.data.title }}</p>
+    <p class="post-title">{{ item.data.title }}</p>
     <p>{{ item.data.description }}</p>
   </a>
 {% endfor -%}
diff --git a/src/styles/home.scss b/src/styles/home.scss
@@ -59,3 +59,8 @@
     flex-direction: row;
   }
 }
+
+.post-title, .home-section-card-title {
+  font-weight: bold;
+  font-size: 1.15em;
+}
diff --git a/src/tags.njk b/src/tags.njk
@@ -20,7 +20,7 @@ isBlog: true
 <div id="taggedposts" class="tagged-posts">
 {% for post in (collections[ tag ] | reverse) %}
   <a class="tagged-post transition" href="{{ post.url }}">
-    <p>{{ post.data.title }}</p>
+    <p class="post-title">{{ post.data.title }}</p>
     <p>on {{ post.page.date | formatDate }}</p>
   </a>
 {% endfor %}

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`{`
	`2`	`+ "baseUrl": "https://www.reboot-codes.com",`
`2`	`3`	`"site": {`
`3`	`4`	`"title": "Reboot/Fitz"`
`4`	`5`	`},`
Original file line number	Diff line number	Diff line change
`@@ -59,3 +59,8 @@`
`59`	`59`	`flex-direction: row;`
`60`	`60`	`}`
`61`	`61`	`}`
	`62`	`+`
	`63`	`+.post-title, .home-section-card-title {`
	`64`	`+ font-weight: bold;`
	`65`	`+ font-size: 1.15em;`
	`66`	`+}`