Add share button

package-lock.json

@@ -18,10 +18,12 @@
 				"@sveltejs/adapter-node": "^1.3.1",
 				"@sveltejs/kit": "^1.27.4",
 				"@zerodevx/svelte-img": "^2.1.0",
+				"drab": "^4.1.4",
 				"lorem-ipsum": "^2.0.8",
 				"sass": "^1.69.5",
 				"svelte": "^4.0.5",
 				"svelte-check": "^3.6.0",
+				"svelte-share-buttons-component": "^2.0.0",
 				"tslib": "^2.4.1",
 				"typescript": "^5.0.0",
 				"vite": "^4.4.2",
@@ -808,6 +810,18 @@
 				"dequal": "^2.0.3"
 			}
 		},
+		"node_modules/atob": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
+			"integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
+			"dev": true,
+			"bin": {
+				"atob": "bin/atob.js"
+			},
+			"engines": {
+				"node": ">= 4.5.0"
+			}
+		},
 		"node_modules/axobject-query": {
 			"version": "3.2.1",
 			"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
@@ -1060,6 +1074,17 @@
 				"node": ">= 0.6"
 			}
 		},
+		"node_modules/css": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/css/-/css-3.0.0.tgz",
+			"integrity": "sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==",
+			"dev": true,
+			"dependencies": {
+				"inherits": "^2.0.4",
+				"source-map": "^0.6.1",
+				"source-map-resolve": "^0.6.0"
+			}
+		},
 		"node_modules/css-tree": {
 			"version": "2.3.1",
 			"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
@@ -1089,6 +1114,15 @@
 				}
 			}
 		},
+		"node_modules/decode-uri-component": {
+			"version": "0.2.2",
+			"resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz",
+			"integrity": "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10"
+			}
+		},
 		"node_modules/decompress-response": {
 			"version": "6.0.0",
 			"resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
@@ -1154,6 +1188,15 @@
 			"integrity": "sha512-KqFl6pOgOW+Y6wJgu80rHpo2/3H07vr8ntR9rkkFIRETewbf5GaYYcakYfiKz89K+sLsuPkQIZaXDMjUObZwWg==",
 			"dev": true
 		},
+		"node_modules/drab": {
+			"version": "4.1.4",
+			"resolved": "https://registry.npmjs.org/drab/-/drab-4.1.4.tgz",
+			"integrity": "sha512-sC3fJTOwbrx5kkmM505QcoKMxk2nLVOuIsXrtfG9JTaWRHXX3+p4t9zmCRuE/1qVcPB74/MCqKrHBP3MOw1JFQ==",
+			"dev": true,
+			"dependencies": {
+				"svelte": "^4.2.1"
+			}
+		},
 		"node_modules/end-of-stream": {
 			"version": "1.4.4",
 			"resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
@@ -1289,6 +1332,12 @@
 			"resolved": "https://registry.npmjs.org/fp-ts/-/fp-ts-2.16.1.tgz",
 			"integrity": "sha512-by7U5W8dkIzcvDofUcO42yl9JbnHTEDBrzu3pt5fKT+Z4Oy85I21K80EYJYdjQGC2qum4Vo55Ag57iiIK4FYuA=="
 		},
+		"node_modules/from": {
+			"version": "0.1.7",
+			"resolved": "https://registry.npmjs.org/from/-/from-0.1.7.tgz",
+			"integrity": "sha512-twe20eF1OxVxp/ML/kq2p1uc6KvFK/+vs8WjEbeKmV2He22MKm7YF2ANIt+EOqhJ5L3K/SuuPhk0hWQDjOM23g==",
+			"dev": true
+		},
 		"node_modules/fs-constants": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
@@ -1430,6 +1479,21 @@
 			"integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==",
 			"dev": true
 		},
+		"node_modules/import": {
+			"version": "0.0.6",
+			"resolved": "https://registry.npmjs.org/import/-/import-0.0.6.tgz",
+			"integrity": "sha512-QPhTdjy9J4wUzmWSG7APkSgMFuPGPw+iJTYUblcfc2AfpqaatbwgCldK1HoLYx+v/+lWvab63GWZtNkcnj9JcQ==",
+			"dev": true,
+			"dependencies": {
+				"optimist": "0.3.x"
+			},
+			"bin": {
+				"import": "import"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/import-fresh": {
 			"version": "3.3.0",
 			"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -1810,6 +1874,15 @@
 				"wrappy": "1"
 			}
 		},
+		"node_modules/optimist": {
+			"version": "0.3.7",
+			"resolved": "https://registry.npmjs.org/optimist/-/optimist-0.3.7.tgz",
+			"integrity": "sha512-TCx0dXQzVtSCg2OgY/bO9hjM9cV4XYx09TVK+s3+FhkjT6LovsLe+pPMzpWf+6yXK/hUizs2gUoTw3jHM0VaTQ==",
+			"dev": true,
+			"dependencies": {
+				"wordwrap": "~0.0.2"
+			}
+		},
 		"node_modules/parent-module": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -2307,6 +2380,15 @@
 				"sorcery": "bin/sorcery"
 			}
 		},
+		"node_modules/source-map": {
+			"version": "0.6.1",
+			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+			"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/source-map-js": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
@@ -2315,6 +2397,17 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/source-map-resolve": {
+			"version": "0.6.0",
+			"resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.6.0.tgz",
+			"integrity": "sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==",
+			"deprecated": "See https://github.com/lydell/source-map-resolve#deprecated",
+			"dev": true,
+			"dependencies": {
+				"atob": "^2.1.2",
+				"decode-uri-component": "^0.2.0"
+			}
+		},
 		"node_modules/streamx": {
 			"version": "2.15.5",
 			"resolved": "https://registry.npmjs.org/streamx/-/streamx-2.15.5.tgz",
@@ -2510,6 +2603,17 @@
 				"node": ">=12"
 			}
 		},
+		"node_modules/svelte-share-buttons-component": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/svelte-share-buttons-component/-/svelte-share-buttons-component-2.0.0.tgz",
+			"integrity": "sha512-e2tvmbV8YsF7OilCg1t7f/jxtpfWS1yhN9/uphyf8gFBbPZP7wq5I3gXe9z/9JPrFj/5Y3agkKv12Z3M978BtQ==",
+			"dev": true,
+			"dependencies": {
+				"css": "^3.0.0",
+				"from": "^0.1.7",
+				"import": "^0.0.6"
+			}
+		},
 		"node_modules/tar-fs": {
 			"version": "3.0.4",
 			"resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.4.tgz",
@@ -2725,6 +2829,15 @@
 				}
 			}
 		},
+		"node_modules/wordwrap": {
+			"version": "0.0.3",
+			"resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",
+			"integrity": "sha512-1tMA907+V4QmxV7dbRvb4/8MaRALK6q9Abid3ndMYnbyo8piisCmeONVqVSXqQA3KaP4SLt5b7ud6E2sqP8TFw==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.4.0"
+			}
+		},
 		"node_modules/wrappy": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",

package.json

@@ -14,10 +14,12 @@
 		"@sveltejs/adapter-node": "^1.3.1",
 		"@sveltejs/kit": "^1.27.4",
 		"@zerodevx/svelte-img": "^2.1.0",
+		"drab": "^4.1.4",
 		"lorem-ipsum": "^2.0.8",
 		"sass": "^1.69.5",
 		"svelte": "^4.0.5",
 		"svelte-check": "^3.6.0",
+		"svelte-share-buttons-component": "^2.0.0",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
 		"vite": "^4.4.2",

src/app.scss

@@ -18,6 +18,30 @@ a {
   color: colors.$text;
 }
 
+hr {
+  border: 1px solid colors.$highlight;
+}
+
+button {
+  background-color: colors.$highlight;
+  color: colors.$highlight-text;
+  border: none;
+  height: 2.5em;
+  padding: 0.5em;
+  border-radius: 0.5em;
+  transition-duration: 0.25s;
+  font-size: 1em;
+
+  &:hover {
+    cursor: pointer;
+    background-color: lighten(colors.$highlight, 5%);
+  }
+
+  &:active {
+    background-color: darken(colors.$highlight, 5%);
+  }
+}
+
 .float-left {
   float: left;
 }
@@ -28,7 +52,7 @@ a {
 
 
 .card {
-  width: 50%;
+  width: 60%;
   margin: auto;
 }
 

src/routes/+layout.svelte

@@ -19,7 +19,10 @@
   });
 </script>
 
-<Header />
+<Header>
+  <slot slot="header-items" name="header-items" />
+</Header>
+
 <section class="main">
   <slot />
 </section>

src/routes/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import LazyImage from "$lib/components/LazyImage.svelte";
   import { plants } from "$lib/plants";
+
   const images = import.meta.glob("$lib/assets/images/*.{png,jpg,jpeg,webp}", {
     import: "default",
     eager: true,
@@ -8,8 +9,15 @@
   });
 </script>
 
-<h1>Plantwiki</h1>
+<h1 class="title">Welcome to the plant wiki!</h1>
+<p>
+  This is where I put the information I need to take care of my houseplants. And
+  to share with others.
+</p>
+
+<hr />
 <div class="plants-list">
+  <h2>Plants</h2>
   {#each Object.entries(plants) as [key, plant] (key)}
     <div class="plant-item-wrapper">
       <div class="plant-item">
@@ -36,6 +44,10 @@
 <style lang="scss">
   @use "../colors.scss";
 
+  .title {
+    font-size: 2em;
+  }
+
   .plants-list {
     width: 100%;
     display: block;

src/routes/Header.svelte

@@ -1,8 +1,22 @@
+<script lang="ts">
+  import { ShareButton } from "drab";
+  import { page } from "$app/stores";
+
+  $: shareData = {
+    text: $page.data.title,
+    title: $page.data.title,
+    url: `${$page.url.protocol}//${$page.url.host}${$page.url.pathname}`,
+  };
+</script>
+
 <header>
   <ul class="navbar">
-    <li>
+    <li class="float-left">
       <a href="/">Home</a>
     </li>
+    <li class="float-right">
+      <ShareButton class="header-share-button" {shareData} />
+    </li>
   </ul>
 </header>
 
@@ -24,7 +38,6 @@
 
     li {
       display: inline;
-      float: left;
 
       a {
         display: block;
@@ -42,4 +55,19 @@
       background-color: lighten(colors.$highlight, 5%);
     }
   }
+
+  :global(.header-share-button) {
+    float: right;
+    font-size: 1em;
+    padding: 1em 2em;
+    height: 100%;
+    font-weight: bold;
+    color: colors.$highlight-text;
+    border-radius: 0;
+    margin-top: 1px;
+
+    &:hover {
+      background-color: darken(colors.$highlight, 5%);
+    }
+  }
 </style>

src/routes/plants/[plant]/+page.svelte

@@ -5,13 +5,18 @@
   import Section from "./Section.svelte";
   import TempBar from "./TempBar.svelte";
   import SvelteMarkdown from "svelte-markdown";
+  import { ShareButton } from "drab";
 
   export let data: PageData;
 </script>
 
 <div class="card">
-  <h1>{data.name} (<i>{data.bin_name}</i>)</h1>
+  <h1>
+    {data.name} (<i>{data.bin_name}</i>)
+  </h1>
+
   <PlantImage image={data.image} />
+
   <Section title="Site">
     <div slot="subheading">
       <TempBar temp={data.temp} />
@@ -68,3 +73,6 @@
     </Section>
   {/if}
 </div>
+
+<style lang="scss">
+</style>