Trivernis
/
plantwiki-svelte
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add share button

Browse Source
main
trivernis 6 months ago
parent 849921e994
commit 62636f9804
Signed by: Trivernis
GPG Key ID: DFFFCC2C7A02DB45
7 changed files with 196 additions and 6 deletions
Show Stats Download Patch File Download Diff File

113
package-lock.json generated
Unescape Escape View File

@ -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",

2
package.json
Unescape Escape View File

@ -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",

26
src/app.scss
Unescape Escape View File

@ -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;
}

5
src/routes/+layout.svelte
Unescape Escape View File

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

14
src/routes/+page.svelte
Unescape Escape View File

@ -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;

32
src/routes/Header.svelte
Unescape Escape View File

@ -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>

10
src/routes/plants/[plant]/+page.svelte
Unescape Escape View File

@ -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>

Write Preview
Loading…
Cancel
Save