95 lines
2.9 KiB
Plaintext
95 lines
2.9 KiB
Plaintext
---
|
|
import { readSingleton, readItems } from '@directus/sdk';
|
|
|
|
import type { Post } from '@lib/directusTypes';
|
|
|
|
import HeroSection from '@components/sections/HeroSection.astro';
|
|
import FeatureSection from '@components/sections/FeatureSection.astro';
|
|
import WeatherSection from '@components/sections/WeatherSection.astro';
|
|
import RecentPostsSection from '@components/sections/RecentPostsSection.astro';
|
|
import GiteaSection from '@components/sections/GiteaSection.astro';
|
|
import BaseLayout from '@layouts/BaseLayout.astro';
|
|
import directus from '@lib/directus';
|
|
|
|
const global = await directus.request(readSingleton('site_global'));
|
|
const weather = await directus.request(readSingleton('site_weather'));
|
|
const posts = await directus.request(
|
|
readItems('posts', {
|
|
filter: { published: { _eq: true } },
|
|
fields: ['*', { category: ['*'] }],
|
|
sort: ['-published_date'],
|
|
})
|
|
);
|
|
|
|
const recentPosts = posts
|
|
.sort((a: Post, b: Post) => (new Date(b.published_date).getTime()) - (new Date(a.published_date).getTime()))
|
|
.slice(0, 3);
|
|
---
|
|
|
|
<BaseLayout
|
|
title="Home"
|
|
description={global.about_description}
|
|
structuredData={{
|
|
'@context': 'https://schema.org',
|
|
'@type': 'WebPage',
|
|
inLanguage: 'en-US',
|
|
'@id': Astro.url.href,
|
|
url: Astro.url.href,
|
|
name: `Home | ${global.name}`,
|
|
description: global.about_description,
|
|
isPartOf: {
|
|
'@type': 'WebSite',
|
|
url: global.site_url,
|
|
name: global.name,
|
|
description: global.about,
|
|
},
|
|
}}
|
|
>
|
|
|
|
<HeroSection
|
|
title={`Hello, I'm <span class="text-steel dark:text-steel">Alex Lebens</span>`}
|
|
subTitle={global.about_description}
|
|
primaryBtn="About Me"
|
|
primaryBtnURL="/about"
|
|
/>
|
|
|
|
<FeatureSection />
|
|
|
|
<RecentPostsSection
|
|
posts={recentPosts}
|
|
title="Latest Posts"
|
|
subTitle="Checkout my most recent thoughts here"
|
|
/>
|
|
|
|
<WeatherSection
|
|
server:defer
|
|
latitude={weather.latitude}
|
|
longitude={weather.longitude}
|
|
cityName={weather.location}
|
|
timezone={weather.timezone}
|
|
>
|
|
<div slot="fallback" class="max-w-340 2xl:max-w-full px-4 sm:px-6 lg:px-8 py-10 lg:py-14 mx-auto mb-2 md:mb-8">
|
|
<div class="text-center max-w-2xl mx-auto mb-10 lg:mb-14">
|
|
<h1 class="smooth-reveal card-text-header block">
|
|
Loading weather...
|
|
</h1>
|
|
<div class="smooth-reveal mx-auto mt-5 max-w-3xl text-center flex justify-center">
|
|
<div class="h-6 w-64"></div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-wrap justify-center gap-4 lg:gap-6">
|
|
{Array.from({ length: 5 }).map((_, index) => (
|
|
<div class={`card-base h-62.5 w-40 animate-pulse bg-neutral-200 dark:bg-neutral-800 ${index === 3 ? "hidden min-[800px]:block" : index >= 4 ? "hidden min-[1100px]:block" : ""}`}></div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</WeatherSection>
|
|
|
|
<GiteaSection
|
|
title="Follow me on Gitea"
|
|
subTitle="I love open source and have my code availabile on my Gitea server."
|
|
url="https://gitea.alexlebens.dev"
|
|
/>
|
|
|
|
</BaseLayout>
|