feat: Add more microformats

Author: Tiim

content/mf2.json

@@ -4,12 +4,12 @@
   "family_name": "Bachmann",
   "nickname": "Tiim",
   "email": "[email protected]",
-  "photo": "https://media.tiim.ch/tiim.jpg",
+  "photo": "https://avatars.githubusercontent.com/u/1063187",
   "url": "https://tiim.ch/",
   "locality": "Basel",
   "country_name": "Switzerland",
-  "org": "University of Basel",
-  "job_title": "",
-  "role": "master graduate in computer science",
+  "org": "Coop Genossenschaft",
+  "job_title": "Software Engineer",
+  "role": "software engineer",
   "gender_identity": "male"
 }

src/lib/AboutCard.svelte

@@ -10,7 +10,12 @@
   <div>
     <p class="author-bio p-note">{@html about.html}</p>
     <div class="author-detail">
+      <span class="hidden p-name">{mf2.name}</span>
       <span class="hidden p-gender-identity">{mf2.gender_identity}</span>
+      <span class="hidden p-locality">{mf2.locality}</span>
+      <span class="hidden p-country-name">{mf2.country_name}</span>
+      <span class="hidden p-org">{mf2.org}</span>
+      <span class="hidden p-role">{mf2.role}</span>
       <a href={`mailto:${mf2.email}`} class="p-email">{mf2.email}</a>
       <a class="p-url" href={mf2.url}>{mf2.url}</a>
     </div>

src/lib/Card.svelte

@@ -5,26 +5,33 @@
   export let links = [];
   export let tags = [];
   export let date = null;
+  export let url = null;
 </script>
 
-<article class="card">
+<article class="card h-entry">
   <h3 class="card-header">
-    {title}
+    {#if url}
+      <a href={url} class="p-name u-url">{title}</a>
+    {:else}
+      <span class="p-name">{title}</span>
+    {/if}
   </h3>
   {#if date}
-    <span class="date">{new Date(date).toLocaleDateString()}</span>
+    <time class="date dt-published" datetime={date}>
+      {new Date(date).toLocaleDateString()}
+    </time>
   {/if}
   <div class="card-content">
     {#if image}
-      <img src={image?.src} alt={image?.alt || title + " title image"} />
+      <img class="u-featured" src={image?.src} alt={image?.alt || title + " title image"} />
     {/if}
-    <p>
+    <p class="p-summary">
       <slot />
     </p>
     {#if tags && tags.length > 0}
       <div class="tags">
         {#each tags as tag}
-          <a href={`/tags/${tag}`} class="tag">
+          <a href={`/tags/${tag}`} class="tag p-category">
             {tag}
           </a>
         {/each}

src/lib/MarkdownSite.svelte

@@ -55,7 +55,7 @@
   <article class="container h-entry">
     {#if site.cover_image}
       <figure>
-        <img alt={site.title} src={resolveUrl(site.cover_image)} />
+        <img class="u-featured" alt={site.title} src={resolveUrl(site.cover_image)} />
         {#if site.cover_image_txt}
           <figcaption>{site.cover_image_txt}</figcaption>
         {/if}
@@ -77,7 +77,7 @@
 
     <div class="by">
       <address class="author">
-        by <a href="/" rel="author">Tim Bachmann</a>
+        by <a class="u-author" href="/" rel="author">Tim Bachmann</a>
       </address>
       <PubDate {site} />
     </div>
@@ -99,7 +99,7 @@
     {#if site.photos}
       <div class="images">
         {#each site.photos as photo}
-          <img alt={photo.alt} src={photo.url} />
+          <img class="u-photo" alt={photo.alt} src={photo.url} />
         {/each}
       </div>
     {/if}

src/lib/PostCard.svelte

@@ -19,6 +19,7 @@
   {links}
   {linksHtml}
   date={post.date}
+  url={`/${post.slug}`}
 >
   <div>
     {@html post.description || post.abstract}

src/routes/+page.svelte

@@ -35,6 +35,12 @@
       <a class="u-email" href={`mailto:${data.mf2.email}`}>{data.mf2.email}</a>
       <a class="u-url" href={data.mf2.url}>{data.mf2.url}</a>
       <span class="p-locality">{data.mf2.locality}</span>
+      <span class="p-country-name">{data.mf2.country_name}</span>
+      <span class="p-org">{data.mf2.org}</span>
+      {#if data.mf2.job_title}
+        <span class="p-job-title">{data.mf2.job_title}</span>
+      {/if}
+      <span class="p-role">{data.mf2.role}</span>
       <span class="p-gender-identity">{data.mf2.gender_identity}</span>
     </div>
     <div class="section">

src/routes/blog/+page.svelte

@@ -9,9 +9,9 @@
   <title>Blog - Tim Bachmann</title>
 </svelte:head>
 
-<div class="container has-text-centered">
+<div class="container has-text-centered h-feed">
   <div class="section">
-    <h1>Blog 📖</h1>
+    <h1 class="p-name">Blog 📖</h1>
     <p>
       Subscribe to my blog via
       <a href="blog/rss.xml" target="_blank">

src/routes/mf2/+page.svelte

@@ -4,9 +4,9 @@
   export let data;
 </script>
 
-<div class="container has-text-centered">
+<div class="container has-text-centered h-feed">
   <div class="section">
-    <h1>Notes 📒</h1>
+    <h1 class="p-name">Notes 📒</h1>
   </div>
   <div class="section">
     <PostCardList posts={data.notes} />

src/routes/projects/+page.svelte

@@ -7,9 +7,9 @@
   <title>Projects and Apps</title>
 </svelte:head>
 
-<div class="container has-text-centered">
+<div class="container has-text-centered h-feed">
   <div class="section">
-    <h1>Projects, Utility Apps &amp; other Resources⚙️</h1>
+    <h1 class="p-name">Projects, Utility Apps &amp; other Resources⚙️</h1>
     <p>
       This is a list of some of my current or past projects, as well as some
       useful resources that I compiled. Go check them out!

src/routes/tags/[slug]/+page.svelte

@@ -7,9 +7,9 @@
   <title>🏷️{data.details.tag} - Tim Bachmann</title>
 </svelte:head>
 
-<div class="container has-text-centered">
+<div class="container has-text-centered h-feed">
   <div class="section">
-    <h1>🏷️ Tag: {data.details.tag}</h1>
+    <h1 class="p-name">🏷️ Tag: {data.details.tag}</h1>
   </div>
   {#if data.details.html}
     <div class="tag-content section">