styling and metadata improvements

src/lib/components/bottombar.svelte

@@ -0,0 +1,48 @@
+<script>
+    import darkmode from "$lib/stores/darkmode";
+    import Bar from "./bar.svelte";
+    import Split from "./split.svelte";
+</script>
+
+<div class="bottombar" class:dark={$darkmode}>
+	<Bar>
+		<h3>Daniel Bulant</h3>
+		<Split />
+		<h3>
+			Design by Carl Hansen
+		</h3>
+	</Bar>
+</div>
+
+<style>
+	.bottombar {
+		margin: 30px auto 30px auto;
+		width: calc(100% - min(100px, 10%));
+	}
+	@media (max-width: 520px) {
+		.bottombar {
+			margin: 30px 0 0 0;
+			width: 100%;
+			background: white;
+		}
+		.dark.bottombar {
+			background: rgb(28, 28, 33);
+		}
+	}
+	.bottombar {
+		max-width: 1380px;
+	}
+	.bottombar h3 {
+		font-size: 18px;
+		font-weight: bold;
+		margin: 0;
+	}
+	.dark h3 {
+		color: rgb(191, 191, 191);
+	}
+	h3 {
+		font-size: 29px;
+		font-weight: 400;
+		color: #282B29;
+	}
+</style>

src/lib/components/heroPost.svelte

@@ -1,6 +1,6 @@
 <script>
     export var bigThumbnail;
-    export var categories = [];
+    // export var categories = [];
     export var author;
     export var relDate;
     export var title;
@@ -12,11 +12,11 @@
 <a href={path} class="post">
     <img src={bigThumbnail} width="800" height="400" alt="Thumbnail" class="thumbnail" draggable={false}>
     <div class="data">
-        <div class="categories">
+        <!-- <div class="categories">
             {#each categories as category}
                 <span>{category}</span>
             {/each}
-        </div>
+        </div> -->
         <h3>{title}</h3>
         <p>{description}</p>
         <div class="author">

src/lib/components/post.svelte

@@ -1,6 +1,6 @@
 <script>
     export var thumbnail;
-    export var categories = [];
+    // export var categories = [];
     export var author;
     export var relDate;
     export var title;
@@ -22,11 +22,11 @@
 <a href={path} class="post" class:grayscale on:mouseenter={mouseenter} on:mouseleave={mouseleave}>
     <img src={thumbnail} height="256" width="256" alt="Thumbnail" class="thumbnail" draggable={false}>
     <div class="data">
-        <div class="categories">
+        <!-- <div class="categories">
             {#each categories as category}
                 <span>{category}</span>
             {/each}
-        </div>
+        </div> -->
         <h4>{title}</h4>
         <div class="author">
             <img src={authorIcon} alt="Avatar of author" draggable={false}>

src/lib/components/posts/a.svelte

@@ -0,0 +1,11 @@
+<script>
+    export var href;
+</script>
+
+<a {href}><slot /></a>
+
+<style>
+    a {
+        color: aqua;
+    }
+</style>

src/lib/components/posts/described.svelte

@@ -0,0 +1,13 @@
+<div class="image">
+    <slot name="content" />
+    <span><slot /></span>
+</div>
+
+<style>
+    span {
+        text-align: center;
+        color: gray;
+        width: 100%;
+        display: inline-block;
+    }
+</style>

src/lib/components/posts/image.svelte

@@ -0,0 +1,18 @@
+<script>
+    import Described from "./described.svelte";
+
+    export var src;
+    export var alt;
+    export var title;
+</script>
+
+<Described>
+    <img {src} {alt} {title} name="content">
+    <slot />
+</Described>
+
+<style>
+    img {
+        border-radius: 5px;
+    }
+</style>

src/lib/layouts/post.svelte

@@ -5,11 +5,28 @@
     export let title;
     export let date;
     export let description;
+    export let categories;
+    export let bigThumbnail;
+    export let thumbnail;
 </script>
 
 <svelte:head>
 	<title>{title} - Daniel Bulant</title>
 	<meta name="description" content={description}>
+    <meta property="og:title" content={title}/>
+    <meta property="og:site_name" content="Daniel Bulant"/>
+    <meta property="og:locale" content="en_US" />
+	<meta name="og:description" content={description}>
+    <meta property="og:type" content="article" />
+    <meta property="og:article:published_time" content={date} />
+    <meta property="og:article:author" content="Daniel Bulant" />
+    <meta property="og:article:tag" content={categories.join(" ")} />
+    <meta property="og:image" content={bigThumbnail} />
+    <meta property="og:image:width" content="800" />
+    <meta property="og:image:height" content="400" />
+    <meta property="og:image" content={thumbnail} />
+    <meta property="og:image:width" content="256" />
+    <meta property="og:image:height" content="256" />
 </svelte:head>
 
 <main class:dark={$darkmode}>
@@ -17,13 +34,27 @@
     <h1>{title}</h1>
     <span>Written {DateTime.fromISO(date).toRelativeCalendar()}</span>
     <slot />
+    <script src="https://utteranc.es/client.js"
+        repo="danbulant/design"
+        issue-term="pathname"
+        label="comment"
+        theme="github-{$darkmode ? "dark" : "light"}"
+        crossorigin="anonymous"
+        async>
+    </script>
 </main>
 
+<hr class:dark={$darkmode}>
+
+<footer>
+    Daniel Bulant - Blog posts CC-BY-SA 
+</footer>
+
 <style>
 	main {
         margin: 0 auto;
         max-width: 700px;
-        padding: 0 20px;
+        padding: 0 20px 20px;
 	}
     h1 {
         padding: 0 0 15px;
@@ -31,4 +62,12 @@
     span {
         color: gray;
     }
+    footer {
+        width: 100%;
+        text-align: center;
+        padding: 20px 0 40px;
+    }
+    hr.dark {
+        border-color: #999;
+    }
 </style>

src/routes/index.svelte

@@ -13,6 +13,7 @@
 
 <script>
 	import Bar from "$lib/components/bar.svelte";
+import Bottombar from "$lib/components/bottombar.svelte";
 	import Button from "$lib/components/button.svelte";
 	import Contact from "$lib/components/contact.svelte";
 	import Hero from "$lib/components/hero.svelte";
@@ -34,7 +35,16 @@
 
 <svelte:head>
 	<title>Daniel Bulant - Homepage</title>
+    <meta property="og:title" content="Daniel Bulant - Homepage"/>
 	<meta name="description" content="Homepage of danbulant.eu - List of my projects, contact info.">
+	<meta name="og:description" content="Homepage of danbulant.eu - List of my projects, contact info.">
+    <meta property="og:site_name" content="Daniel Bulant"/>
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="profile" />
+    <meta property="og:profile:first_name" content="Daniel" />
+    <meta property="og:profile:last_name" content="Bulant" />
+    <meta property="og:profile:username" content="danbulant" />
+    <meta property="og:profile:gender" content="male" />
 </svelte:head>
 
 <Navbar />
@@ -199,15 +209,7 @@
 		<Contact />
 	</div>
 </main>
-<div class="bottombar" class:dark={$darkmode}>
+<Bottombar />
-	<Bar>
-		<h3>Daniel Bulant</h3>
-		<Split />
-		<h3>
-			Design by Carl Hansen
-		</h3>
-	</Bar>
-</div>
 
 <style>
 	/* :global(body) {
@@ -238,28 +240,9 @@
 		margin: 0 min(50px, 5%) 0 min(50px, 5%);
 		width: calc(100% - min(100px, 10%));
 	}
-	.projects, .bottombar {
+	.projects {
 		max-width: 1380px;
 	}
-	.bottombar {
-		margin: 30px auto 30px auto;
-		width: calc(100% - min(100px, 10%));
-	}
-	@media (max-width: 520px) {
-		.bottombar {
-			margin: 30px 0 0 0;
-			width: 100%;
-			background: white;
-		}
-		.dark.bottombar {
-			background: rgb(28, 28, 33);
-		}
-	}
-	.bottombar h3 {
-		font-size: 18px;
-		font-weight: bold;
-		margin: 0;
-	}
 	.projects {
 		display: flex;
 		flex-wrap: wrap;
@@ -348,12 +331,9 @@
 		margin-inline-start: 40px;
 		margin-inline-end: 40px;
 	}
-	h1, h3 {
+	h1 {
 		color: #282B29;
 	}
-	.dark h3 {
-		color: rgb(191, 191, 191);
-	}
 	h1 {
 		font-size: 72px;
 	}
@@ -362,8 +342,4 @@
 			font-size: 40px;
 		}
 	}
-	h3 {
-		font-size: 29px;
-		font-weight: 400;
-	}
 </style>

src/routes/posts/__layout.svelte

@@ -4,4 +4,15 @@
 
 <Navbar/>
 
+<div class="post-layout">
     <slot />
+</div>
+
+<style>
+    :global(body .post-layout a) {
+        color: rgb(4, 192, 192);
+    }
+    :global(body .post-layout a:hover) {
+        color: rgb(2, 218, 218);
+    }
+</style>