adds customizable "about" section

This commit is contained in:
Christian Beutel
2025-08-23 19:10:46 +02:00
parent 5205d721a0
commit 4ba0281e0f
19 changed files with 124 additions and 191 deletions

View File

@@ -1,5 +1,4 @@
<script lang="ts">
import { theme } from "$lib/stores/theme_store";
import { T, useTask } from "@threlte/core";
import { onMount } from "svelte";
@@ -42,9 +41,9 @@
<T.PerspectiveCamera
makeDefault
position={[35.5, 32, 35.5]}
position={[35.5, 28, 35.5]}
oncreate={(c) => {
c.lookAt(0, 0, 0);
c.lookAt(-17, 0, 12);
}}
/>

View File

@@ -66,7 +66,7 @@
</script>
<div
class="trail-card relative rounded-2xl border border-input-border min-w-72 h-[386px] {fullWidth
class="trail-card relative rounded-2xl border border-input-border min-w-72 h-[386px] bg-background {fullWidth
? ''
: 'lg:w-72'} cursor-pointer flex flex-col"
class:bg-secondary-hover={selected}

View File

@@ -178,6 +178,7 @@
"gas-station": "",
"german": "Deutsch",
"get-position-from-exif": "Koordinaten aus EXIF Daten",
"get-started": "",
"grid": "Gitter",
"grocery-store": "",
"heading": "Heading",
@@ -320,6 +321,7 @@
"radius": "Radius",
"railway-station": "",
"read-more": "Mehr",
"ready-to-join": "",
"recalculate-elevation-data": "",
"recalculating-elevation-data-hint": "",
"register": "Registrieren",

View File

@@ -178,6 +178,7 @@
"gas-station": "Gas station",
"german": "German",
"get-position-from-exif": "Get coordinates from EXIF data",
"get-started": "Get started",
"grid": "Grid",
"grocery-store": "Grocery store",
"heading": "Heading",
@@ -320,6 +321,7 @@
"radius": "Radius",
"railway-station": "Railway station",
"read-more": "Read more",
"ready-to-join": "Ready to join",
"recalculate-elevation-data": "Recalculate elevation data",
"recalculating-elevation-data-hint": "Recalculating elevation data will erase the existing elevation data, if any, and replace it with data from Valhalla.",
"register": "Register",

View File

@@ -178,6 +178,7 @@
"gas-station": "",
"german": "Alemán",
"get-position-from-exif": "Obtener las coordenadas de los datos EXIF",
"get-started": "",
"grid": "Cuadricula",
"grocery-store": "",
"heading": "Heading",
@@ -320,6 +321,7 @@
"radius": "Radio",
"railway-station": "",
"read-more": "Leer más",
"ready-to-join": "",
"recalculate-elevation-data": "",
"recalculating-elevation-data-hint": "",
"register": "Registrar",

View File

@@ -178,6 +178,7 @@
"gas-station": "",
"german": "German",
"get-position-from-exif": "Get coordinates from EXIF data",
"get-started": "",
"grid": "Grid",
"grocery-store": "",
"heading": "Heading",
@@ -320,6 +321,7 @@
"radius": "Radius",
"railway-station": "",
"read-more": "Read more",
"ready-to-join": "",
"recalculate-elevation-data": "",
"recalculating-elevation-data-hint": "",
"register": "Register",

View File

@@ -178,6 +178,7 @@
"gas-station": "",
"german": "Allemand",
"get-position-from-exif": "Obtenir les coordonnées à partir des données EXIF",
"get-started": "",
"grid": "Grille",
"grocery-store": "",
"heading": "Heading",
@@ -320,6 +321,7 @@
"radius": "Rayon",
"railway-station": "",
"read-more": "Voir plus",
"ready-to-join": "",
"recalculate-elevation-data": "",
"recalculating-elevation-data-hint": "",
"register": "Créer un compte",

View File

@@ -178,6 +178,7 @@
"gas-station": "",
"german": "Német",
"get-position-from-exif": "Get coordinates from EXIF data",
"get-started": "",
"grid": "Grid",
"grocery-store": "",
"heading": "Heading",
@@ -320,6 +321,7 @@
"radius": "Átmérő",
"railway-station": "",
"read-more": "Read more",
"ready-to-join": "",
"recalculate-elevation-data": "",
"recalculating-elevation-data-hint": "",
"register": "Regisztráció",

View File

@@ -178,6 +178,7 @@
"gas-station": "",
"german": "Tedesco",
"get-position-from-exif": "Ottieni posizione da dati EXIF",
"get-started": "",
"grid": "Griglia",
"grocery-store": "",
"heading": "Heading",
@@ -320,6 +321,7 @@
"radius": "Raggio",
"railway-station": "",
"read-more": "Per saperne di più",
"ready-to-join": "",
"recalculate-elevation-data": "",
"recalculating-elevation-data-hint": "",
"register": "Registrati",

View File

@@ -178,6 +178,7 @@
"gas-station": "",
"german": "Duits",
"get-position-from-exif": "Coördinaten ophalen uit EXIF-gegevens",
"get-started": "",
"grid": "Rooster",
"grocery-store": "",
"heading": "Heading",
@@ -320,6 +321,7 @@
"radius": "Straal",
"railway-station": "",
"read-more": "Lees meer",
"ready-to-join": "",
"recalculate-elevation-data": "",
"recalculating-elevation-data-hint": "",
"register": "Registreren",

View File

@@ -178,6 +178,7 @@
"gas-station": "",
"german": "Niemiecki",
"get-position-from-exif": "Odczytaj współrzędne z danych EXIF",
"get-started": "",
"grid": "Siatka",
"grocery-store": "",
"heading": "Heading",
@@ -320,6 +321,7 @@
"radius": "Promień",
"railway-station": "",
"read-more": "Czytaj dalej",
"ready-to-join": "",
"recalculate-elevation-data": "",
"recalculating-elevation-data-hint": "",
"register": "Zarejestruj",

View File

@@ -178,6 +178,7 @@
"gas-station": "",
"german": "Alemão",
"get-position-from-exif": "Obter coordenadas dos dados EXIF",
"get-started": "",
"grid": "Grelha",
"grocery-store": "",
"heading": "Heading",
@@ -320,6 +321,7 @@
"radius": "Raio",
"railway-station": "",
"read-more": "Ler mais",
"ready-to-join": "",
"recalculate-elevation-data": "",
"recalculating-elevation-data-hint": "",
"register": "Registo",

View File

@@ -178,6 +178,7 @@
"gas-station": "",
"german": "Немецкий",
"get-position-from-exif": "Координаты из EXIF",
"get-started": "",
"grid": "Сетка",
"grocery-store": "",
"heading": "Heading",
@@ -320,6 +321,7 @@
"radius": "Радиус",
"railway-station": "",
"read-more": "Подробнее",
"ready-to-join": "",
"recalculate-elevation-data": "",
"recalculating-elevation-data-hint": "",
"register": "Регистрация",

View File

@@ -178,6 +178,7 @@
"gas-station": "",
"german": "德语",
"get-position-from-exif": "从EXIF数据获取坐标",
"get-started": "",
"grid": "网格",
"grocery-store": "",
"heading": "Heading",
@@ -320,6 +321,7 @@
"radius": "半径",
"railway-station": "",
"read-more": "阅读更多",
"ready-to-join": "",
"recalculate-elevation-data": "",
"recalculating-elevation-data-hint": "",
"register": "注册",

View File

@@ -6,7 +6,6 @@
import Search, {
type SearchItem,
} from "$lib/components/base/search.svelte";
import CategoryCard from "$lib/components/category_card.svelte";
import EmptyStateFeed from "$lib/components/empty_states/empty_state_feed.svelte";
import FeedCard from "$lib/components/profile/feed_card.svelte";
import Scene from "$lib/components/scene.svelte";
@@ -15,7 +14,6 @@
defaultTrailSearchAttributes,
type TrailSearchResult,
} from "$lib/models/trail.js";
import { categories } from "$lib/stores/category_store";
import { feed_index } from "$lib/stores/feed_store.js";
import {
searchActors,
@@ -26,6 +24,8 @@
import { theme } from "$lib/stores/theme_store";
import { getIconForLocation } from "$lib/util/icon_util.js";
import { Canvas } from "@threlte/core";
import { marked } from "marked";
import { onMount } from "svelte";
import { _ } from "svelte-i18n";
let { data } = $props();
@@ -41,6 +41,20 @@
let loading: boolean = false;
let about: string = $state("");
onMount(async () => {
try {
const markdownResponse = await fetch("/md/about.md");
if (markdownResponse.ok) {
const text = await markdownResponse.text();
about = await marked.parse(text);
}
} catch (e) {
console.warn(e);
}
});
async function search(q: string) {
if (q.startsWith("@")) {
const actors = await searchActors(q);
@@ -143,7 +157,7 @@
style="min-height: calc(100vh - 112px)"
>
<div
class="flex flex-col justify-center gap-8 max-w-md mx-8 sm:mx-auto mt-0 lg:sticky"
class="flex flex-col justify-center gap-8 px-8 md:px-24 mt-0 lg:sticky"
style="max-height: calc(100vh - 112px); top: 112px;"
>
<h2 class="text-5xl sm:text-6xl md:text-7xl font-bold">
@@ -161,13 +175,7 @@
items={searchDropdownItems}
></Search>
</div>
{#if !page.data.user}
<div class="hidden md:block">
<Canvas toneMapping={0}>
<Scene></Scene>
</Canvas>
</div>
{:else}
{#if page.data.user}
<div class="space-y-2">
{#if feed.items.length === 0}
<EmptyStateFeed></EmptyStateFeed>
@@ -181,13 +189,32 @@
{/if}
</section>
{#if !page.data.user}
<section
class="max-w-7xl mx-auto mt-8 px-8 xl:px-0 grid grid-cols-1 md:grid-cols-2 items-center gap-x-12"
<div
class="hidden md:block w-full fixed top-[112px] -z-10"
style="min-height: calc(100vh - 112px)"
>
<div
id="trails"
class="flex flex-wrap justify-items-center gap-8 py-8 order-1 md:order-none"
>
<Canvas toneMapping={0}>
<Scene></Scene>
</Canvas>
</div>
<section class="md:px-8 md:max-w-1/2 mb-24" id="about">
<div class="px-8 md:px-24">
<h2 class="text-4xl md:text-5xl font-bold mt-1 mb-8">
{$_("about")}
</h2>
<div class="prose dark:prose-invert">
{@html about}
</div>
</div>
</section>
<section class="md:px-8 md:max-w-1/2 mb-24" id="trails">
<div class="px-8 md:px-24 space-y-4">
<h2 class="text-4xl md:text-5xl font-bold">
{$_("explore-some-trails")}
</h2>
<h5>
{$_("hero_section_1_text")}
</h5>
{#if data.trails.length == 0}
<img
style="width: min(450px, 100%)"
@@ -200,7 +227,7 @@
{:else}
{#each data.trails as trail}
<a
class="w-full md:max-w-72"
class="w-full block"
href="/trail/view/@{trail.author}{trail.domain
? '@' + trail.domain
: ''}/{trail.id}"
@@ -215,53 +242,16 @@
{/each}
{/if}
</div>
<div class="max-w-md md:mx-auto space-y-8">
{#if data.trails.length == 0}
<h2 class="text-4xl md:text-5xl font-bold">
{$_("hero_section_1_heading")}
</h2>
<h5>{$_("hero_section_1_text_alternative")}</h5>
<a
class="inline-block btn-primary btn-large"
href="/trail/edit/new"
role="button">{$_("new-trail")}</a
>
{:else}
<h2 class="text-4xl md:text-5xl font-bold">
{$_("explore-some-trails")}
</h2>
<h5>
{$_("hero_section_1_text")}
</h5>
<a
class="inline-block btn-primary btn-large"
href="/trails"
role="button">{$_("explore")}</a
>
{/if}
</div>
</section>
<section
class="max-w-7xl mx-auto mt-8 px-8 xl:px-0 grid grid-cols-1 md:grid-cols-2 items-center"
>
<div class="max-w-md md:mx-auto space-y-8">
<h2 class="text-4xl md:text-5xl font-bold">{$_("categories")}</h2>
<h5>
{$_("hero_section_2_text")}
</h5>
</div>
<div
id="categories"
class="grid grid-cols-1 lg:grid-cols-2 justify-items-center gap-8 py-8"
>
{#each $categories as category}
<a href="/trails?category={category.name}">
<CategoryCard {category}></CategoryCard>
</a>
{/each}
<section id="get-started" class="md:px-8 md:max-w-1/2 mb-24">
<div class="px-8 md:px-24 space-y-4 text-center">
<h2 class="text-4xl md:text-5xl font-bold">{$_("get-started")}</h2>
<p>{$_("ready-to-join")}?</p>
<a
class="inline-block btn-primary btn-large"
href="/login"
role="button">Signup or Login</a
>
</div>
</section>
{/if}
<style>
</style>