updates readme

README.md

@@ -8,13 +8,16 @@
 [![GitHub Repo stars](https://img.shields.io/github/stars/flomp/wanderer?style=social)](https://github.com/Flomp/wanderer/)
 [![Buy Me A Coffee](https://img.shields.io/badge/Support-wanderer-yellow?logo=buy-me-a-coffee)](https://www.buymeacoffee.com/wanderertrails)
 
+
+[![Try the demo](https://img.shields.io/badge/Try_the_demo-EF2D5E?style=for-the-badge&logoColor=white&logo=rocket&color=2a56f1&labelColor=242734)](https://wanderer.to)
+
 </div>
 
 wanderer is a self-hosted trail database. You can upload your recorded tracks or create new ones and add various metadata to build an easily searchable catalogue. 
 
 ## Core Features
 
-![Screenshot of wanderer](docs/src/assets/features.png)
+![Screenshot of wanderer](docs/src/assets/hero.png)
 
 - Manage your trails
 - Plan new routes

docs/src/content/docs/index.mdx

@@ -9,7 +9,7 @@ hero:
   image:
     file: ../../assets/logo_dark.svg
   actions:
-    - text: Visit the demo
+    - text: Try the demo
       link: https://demo.wanderer.to
       icon: rocket
       variant: primary

web/src/routes/+layout.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
     import { beforeNavigate, goto } from "$app/navigation";
+    import { PUBLIC_IS_DEMO } from "$env/static/public";
     import Toast from "$lib/components/base/toast.svelte";
     import Footer from "$lib/components/footer.svelte";
     import NavBar from "$lib/components/nav_bar.svelte";
     import { currentUser } from "$lib/stores/user_store";
     import { isRouteProtected } from "$lib/util/authorization_util";
     import "@fortawesome/fontawesome-free/css/all.min.css";
+    import { fade, slide } from "svelte/transition";
     import "../css/app.css";
     import "../css/components.css";
     import "../css/theme.css";
@@ -16,8 +18,26 @@
             goto("/login?r=" + n.to?.url?.pathname);
         }
     });
+
+    let hideDemoHint = false;
 </script>
 
+{#if PUBLIC_IS_DEMO && !hideDemoHint}
+    <div
+        class="flex items-center justify-between bg-amber-200 text-center p-4 text-sm"
+        out:slide
+    >
+        <div></div>
+        <span
+            >This is a demo instance. Do not store any relevant data here. You
+            can use the user 'demo' and password 'password' to login.
+        </span>
+        <button class="btn-icon self-end" on:click={() => (hideDemoHint = true)}
+            ><i class="fa fa-close"></i></button
+        >
+    </div>
+{/if}
+
 <NavBar></NavBar>
 <Toast></Toast>
 <slot />