pages and imprint
This commit is contained in:
Vincent van der Wal
@@ -131,6 +131,36 @@
|
||||
{/each}
|
||||
</nav>
|
||||
|
||||
<!-- About / legal links (hidden when collapsed; the pages stay reachable
|
||||
via any expanded sidebar and the signup page footer) -->
|
||||
{#if !collapsed}
|
||||
<div class="px-4 py-3 text-[11px] leading-relaxed text-sidebar-foreground/60">
|
||||
<a
|
||||
class="hover:text-sidebar-foreground hover:underline"
|
||||
href={resolve('/about')}
|
||||
onclick={onMobileClose}>About</a
|
||||
>
|
||||
<span aria-hidden="true"> · </span>
|
||||
<a
|
||||
class="hover:text-sidebar-foreground hover:underline"
|
||||
href={resolve('/legal/imprint')}
|
||||
onclick={onMobileClose}>Imprint</a
|
||||
>
|
||||
<span aria-hidden="true"> · </span>
|
||||
<a
|
||||
class="hover:text-sidebar-foreground hover:underline"
|
||||
href={resolve('/legal/privacy')}
|
||||
onclick={onMobileClose}>Privacy</a
|
||||
>
|
||||
<span aria-hidden="true"> · </span>
|
||||
<a
|
||||
class="hover:text-sidebar-foreground hover:underline"
|
||||
href={resolve('/legal/terms')}
|
||||
onclick={onMobileClose}>Terms</a
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Collapse toggle (desktop sidebar only; the mobile drawer omits onToggle) -->
|
||||
{#if onToggle}
|
||||
<div class="border-t border-sidebar-border px-2 py-3">
|
||||
|
||||
@@ -0,0 +1,77 @@
|
||||
<script lang="ts">
|
||||
import type { Snippet } from 'svelte';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
/** Optional muted line under the title (e.g. "Last updated ..."). */
|
||||
subtitle?: string;
|
||||
children: Snippet;
|
||||
}
|
||||
|
||||
let { title, subtitle, children }: Props = $props();
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{title} · Drizz.li</title>
|
||||
</svelte:head>
|
||||
|
||||
<article class="mx-auto max-w-3xl py-2 lg:py-4">
|
||||
<h1 class="text-2xl font-bold tracking-tight lg:text-3xl">{title}</h1>
|
||||
{#if subtitle}
|
||||
<p class="mt-1.5 text-sm text-muted-foreground">{subtitle}</p>
|
||||
{/if}
|
||||
<div class="prose-body mt-6">
|
||||
{@render children()}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<style>
|
||||
/* Lightweight typography for long-form pages (about / legal), themed with the
|
||||
app tokens so it reads correctly in light and dark. */
|
||||
.prose-body {
|
||||
line-height: 1.65;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
.prose-body :global(h2) {
|
||||
margin: 2rem 0 0.6rem;
|
||||
font-size: 1.15rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
.prose-body :global(h3) {
|
||||
margin: 1.4rem 0 0.4rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.prose-body :global(p) {
|
||||
margin: 0.6rem 0;
|
||||
}
|
||||
.prose-body :global(ul) {
|
||||
margin: 0.6rem 0;
|
||||
padding-left: 1.4rem;
|
||||
}
|
||||
.prose-body :global(li) {
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
.prose-body :global(a) {
|
||||
color: var(--primary);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
.prose-body :global(strong) {
|
||||
font-weight: 600;
|
||||
}
|
||||
.prose-body :global(address) {
|
||||
font-style: normal;
|
||||
margin: 0.6rem 0;
|
||||
padding: 0.8rem 1rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.625rem;
|
||||
background: var(--card);
|
||||
}
|
||||
.prose-body :global(hr) {
|
||||
margin: 2rem 0;
|
||||
border: 0;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
</style>
|
||||
@@ -52,9 +52,10 @@
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<h2 class="text-xl font-bold tracking-tight">{feature} is a premium feature</h2>
|
||||
<h2 class="text-xl font-bold tracking-tight">{feature} is a supporter extra</h2>
|
||||
<p class="mx-auto mt-1.5 max-w-sm text-sm text-muted-foreground">
|
||||
Support this open-source weather project and unlock the extras from {price}.
|
||||
Drizz.li is free and open source. Chip in from {price} to keep it running - as a thank-you, supporters
|
||||
unlock the extras.
|
||||
</p>
|
||||
|
||||
<ul class="mx-auto mt-5 grid max-w-sm gap-2 text-left">
|
||||
@@ -81,7 +82,7 @@
|
||||
rel="noopener"
|
||||
class="inline-flex h-10 w-full items-center justify-center rounded-lg bg-primary px-5 text-sm font-semibold text-primary-foreground transition-colors hover:bg-primary/90 sm:w-auto"
|
||||
>
|
||||
Subscribe
|
||||
Become a supporter
|
||||
</a>
|
||||
<button
|
||||
type="button"
|
||||
|
||||
@@ -16,8 +16,8 @@
|
||||
? 'border-amber-400/50 bg-amber-400/10 text-amber-700 hover:bg-amber-400/20 dark:text-amber-300'
|
||||
: 'border-border/70 text-muted-foreground hover:bg-muted hover:text-foreground'}"
|
||||
onclick={() => (open = true)}
|
||||
title={$isPremium ? 'Premium active' : 'Unlock premium'}
|
||||
aria-label={$isPremium ? 'Premium active' : 'Unlock premium'}
|
||||
title={$isPremium ? 'Supporter extras active' : 'Support Drizz.li'}
|
||||
aria-label={$isPremium ? 'Supporter extras active' : 'Support Drizz.li'}
|
||||
>
|
||||
{#if $isPremium}
|
||||
<!-- star -->
|
||||
|
||||
@@ -60,9 +60,9 @@
|
||||
<Dialog.Root bind:open>
|
||||
<Dialog.Content class="sm:max-w-md">
|
||||
<Dialog.Header>
|
||||
<Dialog.Title>Drizz.li Premium</Dialog.Title>
|
||||
<Dialog.Title>Drizz.li Supporter</Dialog.Title>
|
||||
<Dialog.Description>
|
||||
Paste the access key from your subscription email to unlock premium pages.
|
||||
Paste the access key from your supporter email to unlock the extras.
|
||||
</Dialog.Description>
|
||||
</Dialog.Header>
|
||||
|
||||
@@ -131,7 +131,7 @@
|
||||
rel="noopener"
|
||||
class="font-semibold text-primary underline-offset-2 hover:underline"
|
||||
>
|
||||
Subscribe from {price}
|
||||
Support the project from {price}
|
||||
</a>
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
@@ -13,7 +13,7 @@ const stripTrailingSlash = (url: string): string => url.replace(/\/+$/, '');
|
||||
|
||||
/** Base URL of the self-hosted verify API (drizzli-paywall). */
|
||||
export const PAYWALL_API_BASE = stripTrailingSlash(
|
||||
env.VITE_PAYWALL_API_BASE ?? 'https://paywall.drizz.li'
|
||||
env.VITE_PAYWALL_API_BASE ?? 'https://support.drizz.li'
|
||||
);
|
||||
|
||||
/** Where prospective subscribers go to sign up (the paywall repo's signup form). */
|
||||
@@ -60,8 +60,8 @@ export function getPremiumPrice(): string {
|
||||
return currency === 'CHF' ? `${symbol} 3 / month` : `${symbol}3 / month`;
|
||||
}
|
||||
|
||||
/** Short, human list of what premium unlocks (shown on the locked panel). */
|
||||
/** Short, human list of what supporting unlocks (shown on the locked panel). */
|
||||
export const PREMIUM_PERKS = [
|
||||
'Historical weather & climate-normal comparisons',
|
||||
'New premium features as they land'
|
||||
'New supporter extras as they land'
|
||||
];
|
||||
|
||||
Reference in New Issue
Block a user