maciejpedzich/spotifyplaylistarchive.com
1
0
Fork 0
mirror of https://github.com/maciejpedzich/spotifyplaylistarchive.com.git synced 2024-09-20 02:26:20 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

Create and use CenteredContent layout

Browse Source
This commit is contained in:
Maciej Pędzich 2023-01-07 22:22:09 +01:00
parent 91712b6c03
commit 99edd68344
4 changed files with 64 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/layouts/CenteredContent.astro Normal file
View File

@ -0,0 +1,18 @@
---
import BaseLayout from '../layouts/BaseLayout.astro';
interface Props {
title: string;
description: string;
}
const { title, description } = Astro.props as Props;
---
<BaseLayout title={title} description={description}>
<div
class="w-screen h-screen p-5 text-center flex flex-col gap-5 justify-center items-center"
>
<slot />
</div>
</BaseLayout>

16
src/pages/404.astro
View File

@ -1,16 +1,12 @@
---
import Layout from '../layouts/Layout.astro';
import CenteredContent from '../layouts/CenteredContent.astro';
const tagline =
'Browse past versions of thousands of Spotify playlists saved over time';
---
<Layout title="404" description={tagline}>
<div
class="p-5 w-full h-full text-center flex flex-col md:gap-7 gap-5 justify-center items-center"
>
<span class="md:text-4xl text-3xl text-center">
This page doesn't exist (yet)
</span>
</div>
</Layout>
<CenteredContent title="404" description={tagline}>
<span class="md:text-4xl text-3xl text-center">
This page doesn't exist (yet)
</span>
</CenteredContent>

66
src/pages/about.astro
View File

@ -1,44 +1,40 @@
---
import Layout from '../layouts/Layout.astro';
import CenteredContent from '../layouts/CenteredContent.astro';
const currentYear = new Date().getFullYear();
---
<Layout
<CenteredContent
title="About"
description="Browse past versions of thousands of Spotify playlists saved over time"
>
<div
class="w-full h-full p-5 md:text-xl text-base text-center flex flex-col md:gap-5 gap-3 justify-center items-center"
>
<h1 class="md:mb-3 mb-2 font-bold md:text-5xl text-3xl">
Spotify Playlist Archive
</h1>
<p>
&copy; 2019-{currentYear} Mack Ward, Maciej Pędzich. Released under MIT License.
</p>
<p>
Developed using
<a
href="https://github.com/maciejpedzich/spotify-playlist-archive-website/blob/master/package.json#L11"
target="_blank">these packages</a
>. Hosted on
<a href="https://www.netlify.com" target="_blank">Netlify</a>.
</p>
<p>
Source code:
<a
href="https://github.com/mackorone/spotify-playlist-archive"
target="_blank">playlist archive</a
>
|
<a
href="https://github.com/maciejpedzich/spotify-playlist-archive-website"
target="_blank">this website</a
>.
</p>
<strong class="m-0"
>This project is not associated with Spotify AB in any way!</strong
<h1 class="md:mb-3 mb-2 font-bold md:text-5xl text-3xl">
Spotify Playlist Archive
</h1>
<p>
&copy; 2019-{currentYear} Mack Ward, Maciej Pędzich. Released under MIT License.
</p>
<p>
Developed using
<a
href="https://github.com/maciejpedzich/spotify-playlist-archive-website/blob/master/package.json#L11"
target="_blank">these packages</a
>. Hosted on
<a href="https://www.netlify.com" target="_blank">Netlify</a>.
</p>
<p>
Source code:
<a
href="https://github.com/mackorone/spotify-playlist-archive"
target="_blank">playlist archive</a
>
</div>
</Layout>
|
<a
href="https://github.com/maciejpedzich/spotify-playlist-archive-website"
target="_blank">this website</a
>.
</p>
<p class="m-0 font-bold">
This project is not associated with Spotify AB in any way!
</p>
</CenteredContent>

23
src/pages/index.astro
View File

@ -1,22 +1,17 @@
---
import Layout from '../layouts/Layout.astro';
import CenteredContent from '../layouts/CenteredContent.astro';
import PlaylistSearchInput from '../components/vue/PlaylistSearchInput.vue';
const tagline =
'Browse past versions of thousands of Spotify playlists saved over time';
---
<Layout title="Home" description={tagline}>
<div
class="p-5 w-full h-full text-center flex flex-col md:gap-7 gap-5 justify-center items-center"
>
<h1 class="font-bold md:text-5xl text-4xl text-center">
Spotify Playlist Archive
</h1>
<div>
<p class="mb-7 md:text-xl text-lg">{tagline}</p>
<PlaylistSearchInput client:load />
</div>
<CenteredContent title="Home" description={tagline}>
<h1 class="font-bold md:text-5xl text-4xl text-center">
Spotify Playlist Archive
</h1>
<div>
<p class="mt-2 mb-6">{tagline}</p>
<PlaylistSearchInput client:load />
</div>
</Layout>
</CenteredContent>