forge/Anvil
1
0
Fork 0
Code Pull requests Activity

refactor: extract first page into a component

Browse source 
It is a component now which allows for inspection in Storybook.

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
This commit is contained in:
André Jaenisch 2024-07-05 16:21:48 +02:00
parent c89f9d6f1b
commit 0d1b0454ef
No known key found for this signature in database
GPG key ID: 5A668E771F1ED854
9 changed files with 88 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/app.postcss
View file

@ -18,7 +18,7 @@
/*place global styles here */ /*place global styles here */
html, html,
body { body {
@apply h-full overflow-hidden; @apply h-full overflow-hidden bg-white;
} }
:root { :root {

39
src/lib/components/molecules/Welcome.svelte Normal file
View file

@ -0,0 +1,39 @@
<!--
Welcome molecule.
Copyright (C) 2024 André Jaenisch
SPDX-FileCopyrightText: 2024 André Jaenisch
SPDX-License-Identifier: AGPL-3.0-or-later
This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<script>
import { _ } from 'svelte-i18n';
import AnvilLogo from '../atoms/AnvilLogo.svelte';
</script>
<div
class="max-w-[400px] mx-auto flex flex-col self-center justify-start items-center content-stretch bg-surface-50 border border-rounded border-surface-200 drop-shadow p-8"
>
<AnvilLogo class="items-center w-[77px]" />
<h1 class="font-semibold text-4xl text-surface-500">{$_('page.welcome.headline')}</h1>
<p class="text-surface-500">{$_('page.welcome.intro')}</p>
<div class="space-y-3">
<div>
<a href="/account/create" class="btn variant-filled-primary">Create F2 account</a>
</div>
<div>
<a href="/account/login" class="btn text-primary-500 font-semibold variant-filled-ghost"
>I have an account</a
>
</div>
</div>
<div class="text-center">
<a href="/" class="btn bg-initial text-surface-500">Reset passphrase</a>
</div>
</div>

5
src/lib/i18n/locales/bg.json
View file

@ -127,6 +127,9 @@
} }
} }
}, },
"welcome": "" "welcome": {
"headline": "",
"intro": ""
}
} }
} }

5
src/lib/i18n/locales/de.json
View file

@ -127,6 +127,9 @@
} }
} }
}, },
"welcome": "Willkommen bei Anvil!" "welcome": {
"headline": "Willkommen bei Anvil",
"intro": ""
}
} }
} }

5
src/lib/i18n/locales/en.json
View file

@ -127,6 +127,9 @@
} }
} }
}, },
"welcome": "Welcome to Anvil!" "welcome": {
"headline": "Welcome to Anvil",
"intro": "Anvil is a F2 („ForgeFed”) client. If you don't have an F2 account you need to create one on an F2 server."
}
} }
} }

5
src/lib/i18n/locales/he.json
View file

@ -127,6 +127,9 @@
} }
} }
}, },
"welcome": "" "welcome": {
"headline": "",
"intro": ""
}
} }
} }

5
src/lib/i18n/locales/pl.json
View file

@ -127,6 +127,9 @@
} }
} }
}, },
"welcome": "Witamy w Anvil!" "welcome": {
"headline": "Witamy w Anvil",
"intro": ""
}
} }
} }

22
src/routes/+page.svelte
View file

@ -8,25 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
<script lang="ts"> <script lang="ts">
import { _ } from 'svelte-i18n'; import { _ } from 'svelte-i18n';
import AnvilLogo from '$lib/components/atoms/AnvilLogo.svelte'; import Welcome from '$lib/components/molecules/Welcome.svelte';
</script> </script>
<div class="w-full max-w-md h-full mx-auto flex flex-col justify-center items-center py-10"> <Welcome />
<AnvilLogo class="items-center w-[77px]" />
<h1 class="h1 font-bold">{$_('page.welcome')}</h1>
<p>
Anvil is a F2 (Federated Forge) client. Would you like to create a new F2 account or log in with
your existing one?
</p>
<div class="text-center space-y-3">
<div>
<a href="/account/create" class="btn variant-filled-primary">Create F2 account</a>
</div>
<div>
<a href="/account/login" class="btn variant-filled-secondary">I have an account</a>
</div>
</div>
<div class="text-center">
<a href="/" class="btn btn-sm bg-initial">Reset passphrase</a>
</div>
</div>

26
stories/molecules/Welcome.stories.ts Normal file
View file

@ -0,0 +1,26 @@
/* Stories for Welcome molecule.
* Copyright (C) 2024 André Jaenisch
* SPDX-FileCopyrightText: 2024 André Jaenisch
* SPDX-License-Identifier: AGPL-3.0-or-later
*
* This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import type { Meta, StoryObj } from '@storybook/svelte';
import Welcome from '$lib/components/molecules/Welcome.svelte';
const meta = {
title: 'Molecules/Welcome',
component: Welcome,
tags: ['autodocs']
} satisfies Meta<Welcome>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Plain: Story = {};