Compare commits
1 Commits
renovate/a
...
9814e45412
| Author | SHA1 | Date | |
|---|---|---|---|
9814e45412
|
@@ -26,18 +26,7 @@ jobs:
|
||||
cache: pnpm
|
||||
|
||||
- name: Install Dependencies
|
||||
run: pnpm install --frozen-lockfile
|
||||
|
||||
- name: Cache Astro Build Cache
|
||||
uses: actions/cache@v5
|
||||
with:
|
||||
path: |
|
||||
node_modules/.cache
|
||||
.astro/cache
|
||||
key: ${{ runner.os }}-astro-cache-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ github.sha }}
|
||||
restore-keys: |
|
||||
${{ runner.os }}-astro-cache-${{ hashFiles('**/pnpm-lock.yaml') }}-
|
||||
${{ runner.os }}-astro-cache-
|
||||
run: pnpm install
|
||||
|
||||
- name: Lint Code
|
||||
run: pnpm lint
|
||||
@@ -53,14 +42,14 @@ jobs:
|
||||
uses: actions/checkout@v6
|
||||
|
||||
- name: Login to Registry
|
||||
uses: docker/login-action@v4
|
||||
uses: docker/login-action@v3
|
||||
with:
|
||||
registry: ${{ vars.REPOSITORY_HOST }}
|
||||
username: ${{ gitea.actor }}
|
||||
password: ${{ secrets.REPOSITORY_TOKEN }}
|
||||
|
||||
- name: Login to Docker
|
||||
uses: docker/login-action@v4
|
||||
uses: docker/login-action@v3
|
||||
with:
|
||||
registry: ${{ vars.DH_REGISTRY }}
|
||||
username: ${{ secrets.DH_USERNAME }}
|
||||
@@ -73,7 +62,7 @@ jobs:
|
||||
|
||||
- name: Set up Docker Buildx
|
||||
id: buildx
|
||||
uses: docker/setup-buildx-action@v4
|
||||
uses: docker/setup-buildx-action@v3
|
||||
with:
|
||||
driver: kubernetes
|
||||
driver-opts: |
|
||||
@@ -88,7 +77,7 @@ jobs:
|
||||
|
||||
- name: Extract Metadata
|
||||
id: meta
|
||||
uses: docker/metadata-action@v6
|
||||
uses: docker/metadata-action@v5
|
||||
with:
|
||||
tags: |
|
||||
type=ref,event=branch
|
||||
@@ -112,7 +101,7 @@ jobs:
|
||||
fi
|
||||
|
||||
- name: Build and Push Image
|
||||
uses: docker/build-push-action@v7
|
||||
uses: docker/build-push-action@v6
|
||||
with:
|
||||
context: .
|
||||
push: true
|
||||
@@ -124,8 +113,6 @@ jobs:
|
||||
COMMIT_SHA=${{ steps.version.outputs.commit }}
|
||||
IS_RELEASE=${{ steps.version.outputs.is_release }}
|
||||
file: ./Dockerfile
|
||||
cache-from: type=gha
|
||||
cache-to: type=gha,mode=max
|
||||
|
||||
- name: ntfy Success
|
||||
uses: niniyas/ntfy-action@master
|
||||
|
||||
@@ -26,18 +26,7 @@ jobs:
|
||||
cache: pnpm
|
||||
|
||||
- name: Install Dependencies
|
||||
run: pnpm install --frozen-lockfile
|
||||
|
||||
- name: Cache Astro Build Cache
|
||||
uses: actions/cache@v5
|
||||
with:
|
||||
path: |
|
||||
node_modules/.cache
|
||||
.astro/cache
|
||||
key: ${{ runner.os }}-astro-cache-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ github.sha }}
|
||||
restore-keys: |
|
||||
${{ runner.os }}-astro-cache-${{ hashFiles('**/pnpm-lock.yaml') }}-
|
||||
${{ runner.os }}-astro-cache-
|
||||
run: pnpm install
|
||||
|
||||
- name: Lint Code
|
||||
run: pnpm lint
|
||||
@@ -53,14 +42,14 @@ jobs:
|
||||
uses: actions/checkout@v6
|
||||
|
||||
- name: Login to Registry
|
||||
uses: docker/login-action@v4
|
||||
uses: docker/login-action@v3
|
||||
with:
|
||||
registry: ${{ vars.REGISTRY_HOST }}
|
||||
username: ${{ vars.REGISTRY_USER }}
|
||||
password: ${{ secrets.REGISTRY_SECRET }}
|
||||
|
||||
- name: Login to Docker
|
||||
uses: docker/login-action@v4
|
||||
uses: docker/login-action@v3
|
||||
with:
|
||||
registry: ${{ vars.DH_REGISTRY }}
|
||||
username: ${{ secrets.DH_USERNAME }}
|
||||
@@ -73,7 +62,7 @@ jobs:
|
||||
|
||||
- name: Set up Docker Buildx
|
||||
id: buildx
|
||||
uses: docker/setup-buildx-action@v4
|
||||
uses: docker/setup-buildx-action@v3
|
||||
with:
|
||||
driver: kubernetes
|
||||
driver-opts: |
|
||||
@@ -88,7 +77,7 @@ jobs:
|
||||
|
||||
- name: Extract Metadata
|
||||
id: meta
|
||||
uses: docker/metadata-action@v6
|
||||
uses: docker/metadata-action@v5
|
||||
with:
|
||||
tags: |
|
||||
type=ref,event=branch
|
||||
@@ -112,7 +101,7 @@ jobs:
|
||||
fi
|
||||
|
||||
- name: Build and Push Image
|
||||
uses: docker/build-push-action@v7
|
||||
uses: docker/build-push-action@v6
|
||||
with:
|
||||
context: .
|
||||
push: true
|
||||
@@ -124,8 +113,6 @@ jobs:
|
||||
COMMIT_SHA=${{ steps.version.outputs.commit }}
|
||||
IS_RELEASE=${{ steps.version.outputs.is_release }}
|
||||
file: ./Dockerfile
|
||||
cache-from: type=gha
|
||||
cache-to: type=gha,mode=max
|
||||
|
||||
- name: ntfy Success
|
||||
uses: niniyas/ntfy-action@master
|
||||
|
||||
@@ -28,18 +28,7 @@ jobs:
|
||||
cache: pnpm
|
||||
|
||||
- name: Install Dependencies
|
||||
run: pnpm install --frozen-lockfile
|
||||
|
||||
- name: Cache Astro Build Cache
|
||||
uses: actions/cache@v5
|
||||
with:
|
||||
path: |
|
||||
node_modules/.cache
|
||||
.astro/cache
|
||||
key: ${{ runner.os }}-astro-cache-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ github.sha }}
|
||||
restore-keys: |
|
||||
${{ runner.os }}-astro-cache-${{ hashFiles('**/pnpm-lock.yaml') }}-
|
||||
${{ runner.os }}-astro-cache-
|
||||
run: pnpm install
|
||||
|
||||
- name: Lint Code
|
||||
run: pnpm lint
|
||||
|
||||
@@ -22,7 +22,7 @@ WORKDIR /app
|
||||
COPY --from=prod-deps /app/node_modules /app/node_modules
|
||||
COPY --from=build /app/dist /app/dist
|
||||
|
||||
LABEL version="2.24.0"
|
||||
LABEL version="2.17.1"
|
||||
LABEL description="Astro based personal website"
|
||||
|
||||
ENV HOST=0.0.0.0
|
||||
|
||||
14
package.json
14
package.json
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "site-profile",
|
||||
"type": "module",
|
||||
"version": "2.24.0",
|
||||
"version": "2.17.1",
|
||||
"homepage": "https://www.alexlebens.dev",
|
||||
"bugs": {
|
||||
"url": "https://gitea.alexlebens.dev/alexlebens/site-profile/issues",
|
||||
@@ -33,11 +33,11 @@
|
||||
"@astrojs/react": "^4.4.2",
|
||||
"@astrojs/rss": "^4.0.15",
|
||||
"@astrojs/sitemap": "^3.7.0",
|
||||
"@directus/sdk": "^21.2.0",
|
||||
"@directus/sdk": "^21.1.0",
|
||||
"@giscus/react": "^3.1.0",
|
||||
"@iconify-json/mdi": "^1.2.3",
|
||||
"@iconify-json/pajamas": "^1.2.15",
|
||||
"@iconify-json/simple-icons": "^1.2.72",
|
||||
"@iconify-json/simple-icons": "^1.2.71",
|
||||
"@playform/compress": "^0.2.1",
|
||||
"@swup/astro": "^1.8.0",
|
||||
"@tailwindcss/postcss": "^4.2.1",
|
||||
@@ -46,16 +46,16 @@
|
||||
"@types/unist": "^3.0.3",
|
||||
"astro": "^5.18.0",
|
||||
"astro-icon": "^1.1.5",
|
||||
"marked": "^17.0.4",
|
||||
"marked": "^17.0.3",
|
||||
"marked-shiki": "^1.2.1",
|
||||
"mdast-util-to-string": "^4.0.0",
|
||||
"preline": "^4.1.2",
|
||||
"preline": "^4.1.1",
|
||||
"react": "^19.2.4",
|
||||
"react-dom": "^19.2.4",
|
||||
"reading-time": "^1.5.0",
|
||||
"sharp": "^0.34.5",
|
||||
"sharp-ico": "^0.1.5",
|
||||
"shiki": "^4.0.1",
|
||||
"shiki": "^4.0.0",
|
||||
"tailwindcss": "^4.2.1",
|
||||
"ultrahtml": "^1.6.0"
|
||||
},
|
||||
@@ -63,7 +63,7 @@
|
||||
"@eslint-react/eslint-plugin": "^2.13.0",
|
||||
"@tailwindcss/forms": "^0.5.11",
|
||||
"@tailwindcss/typography": "^0.5.19",
|
||||
"eslint": "^10.0.3",
|
||||
"eslint": "^10.0.2",
|
||||
"eslint-config-prettier": "^10.1.8",
|
||||
"eslint-plugin-astro": "^1.6.0",
|
||||
"eslint-plugin-format": "^2.0.1",
|
||||
|
||||
1033
pnpm-lock.yaml
generated
1033
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -12,7 +12,7 @@ const currentPath = pathname.slice(1);
|
||||
class="fixed flex flex-wrap md:flex-nowrap md:justify-start inset-x-0 top-0 w-full z-50"
|
||||
>
|
||||
<nav
|
||||
class="nav-base relative md:flex md:items-center md:justify-between rounded-[36px] transition-all duration-300 w-full px-4 py-3 mx-2 md:mx-8 mt-4"
|
||||
class="nav-base relative md:flex md:items-center md:justify-between rounded-[36px] w-full px-4 mx-2 py-3 mt-4"
|
||||
aria-label="Global"
|
||||
>
|
||||
<div class="flex items-center justify-between ml-0">
|
||||
|
||||
@@ -64,7 +64,7 @@
|
||||
const overlay = document.createElement('div');
|
||||
overlay.className = 'theme-switch-overlay fixed inset-0 pointer-events-none z-50';
|
||||
overlay.style.opacity = '0';
|
||||
overlay.style.transition = 'opacity 0.15s ease-out';
|
||||
overlay.style.transition = 'opacity 0.3s ease-out';
|
||||
document.body.appendChild(overlay);
|
||||
}
|
||||
|
||||
@@ -130,7 +130,7 @@
|
||||
overlay.style.opacity = '0';
|
||||
}
|
||||
document.documentElement.classList.remove('theme-switching');
|
||||
}, 150);
|
||||
}, 300);
|
||||
}, 50);
|
||||
},
|
||||
{ passive: false }
|
||||
|
||||
@@ -2,30 +2,28 @@
|
||||
import { Icon } from 'astro-icon/components';
|
||||
import { Image } from 'astro:assets';
|
||||
|
||||
import { formatDate } from '@support/time';
|
||||
import { getDirectusImageURL } from '@/support/url';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
subTitle: string;
|
||||
url: string;
|
||||
pubDate: Date,
|
||||
img: string;
|
||||
imgAlt: string;
|
||||
}
|
||||
|
||||
const { title, subTitle, url, pubDate, img, imgAlt } = Astro.props;
|
||||
const { title, subTitle, url, img, imgAlt } = Astro.props;
|
||||
---
|
||||
|
||||
<div class="smooth-reveal flex flex-col px-4 py-10 mx-auto w-full">
|
||||
<div class="smooth-reveal flex flex-col px-4 py-10 mx-auto">
|
||||
<a
|
||||
class="md:card-base-hidden group items-center md:grid md:grid-cols-2 lg:grid lg:grid-cols-2 gap-8 xl:gap-16 w-full md:px-8 md:py-8"
|
||||
class="md:card-base-hidden group items-center md:grid md:grid-cols-2 lg:grid lg:grid-cols-2 gap-8 xl:gap-16 max-w-340 2xl:max-w-full md:px-8 md:py-8"
|
||||
href={url}
|
||||
data-astro-prefetch
|
||||
>
|
||||
<div>
|
||||
<Image
|
||||
class="rounded-2xl rounded-b-none md:rounded-2xl md:shadow-2xl w-full h-full sm:max-h-80 md:max-h-90 object-cover"
|
||||
class="rounded-2xl rounded-b-none md:rounded-2xl w-full h-full sm:max-h-80 md:max-h-90 object-cover"
|
||||
src={getDirectusImageURL(img)}
|
||||
alt={imgAlt}
|
||||
draggable="false"
|
||||
@@ -42,21 +40,17 @@ const { title, subTitle, url, pubDate, img, imgAlt } = Astro.props;
|
||||
<p class="card-text-title font-light text-pretty sm:text-lg max-w-prose mb-8">
|
||||
{subTitle}
|
||||
</p>
|
||||
<div class="flex items-center justify-between w-full">
|
||||
<div class="button-base button-bg-teal inline-flex rounded-lg gap-x-2">
|
||||
<div class="button-text-title flex relative items-center text-center">
|
||||
<span class="mr-2">
|
||||
Read More
|
||||
</span>
|
||||
<Icon
|
||||
name="mdi:keyboard-arrow-right"
|
||||
class="button-hover-arrow"
|
||||
/>
|
||||
</div>
|
||||
<div class="button-base button-bg-teal inline-flex rounded-lg gap-x-2">
|
||||
<div class="button-text-title flex relative items-center text-center">
|
||||
<span class="mr-2">
|
||||
Read More
|
||||
</span>
|
||||
<Icon
|
||||
name="mdi:keyboard-arrow-right"
|
||||
class="button-hover-arrow"
|
||||
/>
|
||||
</div>
|
||||
<span class="card-text-description text-sm ml-auto">
|
||||
{formatDate(pubDate)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -2,26 +2,25 @@
|
||||
import { Icon } from 'astro-icon/components';
|
||||
import { Image } from 'astro:assets';
|
||||
|
||||
import { formatDate } from '@support/time';
|
||||
import { getDirectusImageURL } from '@/support/url';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
subTitle: string;
|
||||
url: string;
|
||||
pubDate: Date;
|
||||
imgOne: string;
|
||||
imgOneAlt: string;
|
||||
imgTwo?: string;
|
||||
imgTwoAlt?: string;
|
||||
single?: boolean;
|
||||
imgOne: any;
|
||||
imgOneAlt: any;
|
||||
imgTwo?: any;
|
||||
imgTwoAlt?: any;
|
||||
}
|
||||
|
||||
const { title, subTitle, url, pubDate, imgOne, imgOneAlt, imgTwo, imgTwoAlt } = Astro.props;
|
||||
const { title, subTitle, url, single, imgOne, imgOneAlt, imgTwo, imgTwoAlt } = Astro.props;
|
||||
---
|
||||
|
||||
<div class="smooth-reveal flex flex-col px-4 py-10 mx-auto w-full">
|
||||
<div class="smooth-reveal flex flex-col px-5 py-10 mx-auto">
|
||||
<a
|
||||
class="md:card-base-hidden group flex flex-col-reverse md:grid md:items-center md:grid-cols-2 lg:grid lg:grid-cols-2 md:gap-8 xl:gap-16 w-full md:px-8 md:py-8"
|
||||
class="md:card-base-hidden group flex flex-col-reverse md:items-center md:grid md:grid-cols-2 lg:grid lg:grid-cols-2 md:gap-8 xl:gap-16 max-w-340 2xl:max-w-full md:px-8 md:py-8"
|
||||
href={url}
|
||||
data-astro-prefetch
|
||||
>
|
||||
@@ -32,30 +31,25 @@ const { title, subTitle, url, pubDate, imgOne, imgOneAlt, imgTwo, imgTwoAlt } =
|
||||
<p class="card-text-title font-light text-pretty sm:text-lg max-w-prose mb-8">
|
||||
{subTitle}
|
||||
</p>
|
||||
<div class="flex items-center justify-between w-full">
|
||||
<div class="button-base button-bg-teal inline-flex rounded-lg gap-x-2">
|
||||
<div class="button-text-title flex relative items-center text-center">
|
||||
<span class="mr-2">
|
||||
Read More
|
||||
</span>
|
||||
<Icon
|
||||
name="mdi:keyboard-arrow-right"
|
||||
class="button-hover-arrow"
|
||||
/>
|
||||
</div>
|
||||
<div class="button-base button-bg-teal inline-flex rounded-lg gap-x-2">
|
||||
<div class="button-text-title flex relative items-center text-center">
|
||||
<span class="mr-2">
|
||||
Read More
|
||||
</span>
|
||||
<Icon
|
||||
name="mdi:keyboard-arrow-right"
|
||||
class="button-hover-arrow"
|
||||
/>
|
||||
</div>
|
||||
<span class="card-text-description text-sm ml-auto">
|
||||
{formatDate(pubDate)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{!imgTwo ? (
|
||||
{single ? (
|
||||
<div>
|
||||
<Image
|
||||
class="rounded-2xl rounded-b-none md:rounded-2xl md:shadow-2xl w-full h-full sm:max-h-80 md:max-h-90 object-cover"
|
||||
class="rounded-2xl rounded-b-none md:rounded-2xl w-full"
|
||||
src={getDirectusImageURL(imgOne)}
|
||||
alt={imgOneAlt}
|
||||
draggable="false"
|
||||
format="webp"
|
||||
loading="lazy"
|
||||
width="850"
|
||||
height="420"
|
||||
@@ -63,42 +57,30 @@ const { title, subTitle, url, pubDate, imgOne, imgOneAlt, imgTwo, imgTwoAlt } =
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div class="md:hidden">
|
||||
<Image
|
||||
class="rounded-2xl rounded-b-none shadow-2xl w-full h-full sm:max-h-80 object-cover"
|
||||
src={getDirectusImageURL(imgOne)}
|
||||
alt={imgOneAlt}
|
||||
draggable="false"
|
||||
loading="lazy"
|
||||
width="850"
|
||||
height="420"
|
||||
inferSize={true}
|
||||
/>
|
||||
</div>
|
||||
<div class="hidden md:flex md:items-start">
|
||||
<Image
|
||||
class="rounded-xl z-10 shadow-2xl w-3/5 h-full object-cover"
|
||||
src={getDirectusImageURL(imgOne)}
|
||||
alt={imgOneAlt}
|
||||
draggable="false"
|
||||
loading="lazy"
|
||||
width="600"
|
||||
height="310"
|
||||
inferSize={true}
|
||||
/>
|
||||
<Image
|
||||
class="rounded-xl shadow-2xl w-3/5 h-full -ml-16 mt-12 object-cover"
|
||||
src={getDirectusImageURL(imgTwo)}
|
||||
alt={imgTwoAlt}
|
||||
draggable="false"
|
||||
loading="lazy"
|
||||
width="600"
|
||||
height="310"
|
||||
inferSize={true}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<Image
|
||||
class="rounded-xl w-full"
|
||||
src={getDirectusImageURL(imgOne)}
|
||||
alt={imgOneAlt}
|
||||
draggable="false"
|
||||
format="webp"
|
||||
loading="lazy"
|
||||
width="400"
|
||||
height="230"
|
||||
inferSize={true}
|
||||
/>
|
||||
<Image
|
||||
class="rounded-xl w-full mt-4 lg:mt-10"
|
||||
src={getDirectusImageURL(imgTwo)}
|
||||
alt={imgTwoAlt}
|
||||
draggable="false"
|
||||
format="webp"
|
||||
loading="lazy"
|
||||
width="400"
|
||||
height="230"
|
||||
inferSize={true}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -4,11 +4,12 @@ import { Image } from 'astro:assets';
|
||||
const { srcLight, srcDark, alt, style, width, height } = Astro.props;
|
||||
---
|
||||
|
||||
<div class="grid grid-cols-1 grid-rows-1">
|
||||
<div class="themed-image-container">
|
||||
<Image
|
||||
src={srcLight}
|
||||
alt={alt}
|
||||
class:list={['col-start-1 row-start-1 transition-all duration-300 ease-in-out opacity-100 scale-100 dark:opacity-0 dark:scale-65', style]}
|
||||
class={`light-logo ${style}`}
|
||||
inferSize={true}
|
||||
width={width}
|
||||
height={height}
|
||||
inferSize={true}
|
||||
@@ -17,9 +18,29 @@ const { srcLight, srcDark, alt, style, width, height } = Astro.props;
|
||||
<Image
|
||||
src={srcDark}
|
||||
alt={alt}
|
||||
class:list={['col-start-1 row-start-1 transition-all duration-300 ease-in-out opacity-0 scale-65 dark:opacity-100 dark:scale-100', style]}
|
||||
class={`dark-logo ${style}`}
|
||||
inferSize={true}
|
||||
width={width}
|
||||
height={height}
|
||||
inferSize={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.themed-image-container {
|
||||
display: grid;
|
||||
grid-template-areas: "stack";
|
||||
}
|
||||
|
||||
.themed-image-container :global(img) {
|
||||
grid-area: stack;
|
||||
}
|
||||
|
||||
:global(.dark) .light-logo {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
:global(.dark) .dark-logo {
|
||||
display: block !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -10,7 +10,7 @@ import { timeago } from '@support/time';
|
||||
const posts = await directus.request(
|
||||
readItems('posts', {
|
||||
filter: { published: { _eq: true } },
|
||||
fields: ['*', 'category.slug'],
|
||||
fields: ['*'],
|
||||
sort: ['-published_date'],
|
||||
})
|
||||
);
|
||||
@@ -31,16 +31,13 @@ const layoutPattern = [
|
||||
const postMap: Map<string, Post[]> = posts
|
||||
.sort((a: Post, b: Post) => b.published_date.valueOf() - a.published_date.valueOf())
|
||||
.reduce((acc, obj) => {
|
||||
const categorySlug = obj.category?.slug;
|
||||
if (!categorySlug) return acc;
|
||||
|
||||
let posts = acc.get(categorySlug);
|
||||
let posts = acc.get(obj.category);
|
||||
if (!posts) {
|
||||
posts = [];
|
||||
}
|
||||
posts.push(obj);
|
||||
|
||||
acc.set(categorySlug, posts);
|
||||
acc.set(obj.category, posts);
|
||||
|
||||
return acc;
|
||||
}, new Map<string, Post[]>());
|
||||
|
||||
@@ -15,29 +15,25 @@ const global = await directus.request(readSingleton('site_global'));
|
||||
title="Cloud Engineer"
|
||||
description="Full stack and cloud engineer."
|
||||
url="/about"
|
||||
logoUrlLight="https://directus.alexlebens.net/assets/8e674299-2dfc-4ea3-8193-a1c4050bf06f?key=system-large-contain&v=2026-02-26T21%3A23%3A22.457Z"
|
||||
logoUrlDark="https://directus.alexlebens.net/assets/cdd6efce-3231-4213-8b1e-cae9c1b3a18f?key=system-large-contain&v=2026-03-03T19%3A30%3A01.263Z"
|
||||
logoUrlLight="https://img.icons8.com/cotton/64/cloud-development--v2.png"
|
||||
/>
|
||||
<FeaturesCard
|
||||
title="Homelab"
|
||||
description="Tinkering, testing, deploying, etc, etc ..."
|
||||
url="/categories/homelab/"
|
||||
logoUrlLight="https://directus.alexlebens.net/assets/4ccb3d9f-e203-4c2b-bfad-600f1aa5b7a4?key=system-large-contain&v=2026-02-26T21%3A25%3A30.853Z"
|
||||
logoUrlDark="https://directus.alexlebens.net/assets/33fb6b45-1834-44a0-bc04-692be4f6d4ce?key=system-large-contain&v=2026-03-03T19%3A30%3A37.961Z"
|
||||
logoUrlLight="https://img.icons8.com/cotton/64/smart-home-connection.png"
|
||||
/>
|
||||
<FeaturesCard
|
||||
title="Documentation"
|
||||
description="Reference and guides for my homelab."
|
||||
url="https://docs.alexlebens.dev"
|
||||
logoUrlLight="https://directus.alexlebens.net/assets/5f5faad9-2c36-40a5-a519-f631d39ab388?key=system-large-contain&v=2026-03-03T19%3A49%3A43.620Z"
|
||||
logoUrlDark="https://directus.alexlebens.net/assets/c49b40a9-ddf2-4fa2-ba35-6039682b93de?key=system-large-contain&v=2026-03-03T19%3A50%3A14.893Z"
|
||||
logoUrlLight="https://img.icons8.com/cotton/64/bookmarked-document--v1.png"
|
||||
/>
|
||||
<FeaturesCard
|
||||
title="Email"
|
||||
description={`Send me a message.`}
|
||||
url=`mailto:${global.email}`
|
||||
logoUrlLight="https://directus.alexlebens.net/assets/4b1c771e-c709-4094-b018-0197b4747829?key=system-large-contain&v=2026-03-03T19%3A48%3A36.432Z"
|
||||
logoUrlDark="https://directus.alexlebens.net/assets/cdf2ea11-fcfc-41f1-a701-43084fb06efa?key=system-large-contain&v=2026-03-03T19%3A47%3A28.109Z"
|
||||
logoUrlLight="https://img.icons8.com/cotton/64/secured-letter--v3.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -23,11 +23,7 @@ const { posts, title, subTitle } = Astro.props;
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns-1 sm:columns-2 lg:columns-3 gap-6">
|
||||
{posts.map((b) => (
|
||||
<div class="break-inside-avoid mb-6">
|
||||
<BlogCard post={b} />
|
||||
</div>
|
||||
))}
|
||||
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{posts.map((b) => <BlogCard post={b} />)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -11,13 +11,12 @@ interface Props {
|
||||
const { posts } = Astro.props;
|
||||
---
|
||||
|
||||
<section class="smooth-reveal flex flex-col gap-4 md:mb-20">
|
||||
<section class="smooth-reveal flex flex-col gap-4">
|
||||
{posts.map((post, index) => index % 2 === 0 ? (
|
||||
<LargeBlogLeftCard
|
||||
title={post.title}
|
||||
subTitle={post.description}
|
||||
url={`/blog/${post.slug}`}
|
||||
pubDate={post.published_date}
|
||||
img={post.image}
|
||||
imgAlt={post.image_alt}
|
||||
/>
|
||||
@@ -26,7 +25,7 @@ const { posts } = Astro.props;
|
||||
title={post.title}
|
||||
subTitle={post.description}
|
||||
url={`/blog/${post.slug}`}
|
||||
pubDate={post.published_date}
|
||||
single={!post.image_second}
|
||||
imgOne={post.image}
|
||||
imgOneAlt={post.image_alt}
|
||||
imgTwo={post?.image_second}
|
||||
|
||||
@@ -68,66 +68,67 @@ const normalizeTitle = !title ? global.name : `${title} | ${global.name}`;
|
||||
/>
|
||||
</head>
|
||||
|
||||
<body class="bg-background selection:bg-yellow-400 m-0 p-0 overflow-hidden">
|
||||
<body class="bg-background selection:bg-yellow-400 m-0 p-0 overflow-x-hidden">
|
||||
|
||||
<!-- Sliding backgrounds -->
|
||||
<div class="bg"/>
|
||||
<div class="bg bg2"/>
|
||||
<div class="bg bg3"/>
|
||||
|
||||
<!-- Fixed header -->
|
||||
<Header />
|
||||
<!-- Layout -->
|
||||
<div class="grow w-full max-w-(--breakpoint-2xl) px-4 sm:px-6 lg:px-8 py-20 mx-auto">
|
||||
|
||||
<!-- Main body -->
|
||||
<div id="reset-scroll" class="mask-container w-screen h-screen overflow-y-auto overflow-x-hidden">
|
||||
<main>
|
||||
<Header />
|
||||
|
||||
<!-- Content -->
|
||||
<div class="grow w-full max-w-(--breakpoint-2xl) px-4 sm:px-6 lg:px-8 py-20 mx-auto">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<Footer />
|
||||
|
||||
<main class="has-js scroll-fade-container min-h-screen">
|
||||
<slot />
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<script>
|
||||
const resetScroll = () => {
|
||||
const scrollContainer = document.getElementById('reset-scroll');
|
||||
if (scrollContainer) {
|
||||
scrollContainer.scrollTop = 0;
|
||||
}
|
||||
};
|
||||
resetScroll();
|
||||
document.addEventListener('astro:after-swap', resetScroll);
|
||||
document.addEventListener('astro:page-load', () => {
|
||||
const onScroll = () => {
|
||||
document.documentElement.style.setProperty('--scroll-offset', `${window.scrollY}px`);
|
||||
document.documentElement.classList.add('has-js');
|
||||
};
|
||||
|
||||
window.removeEventListener('scroll', onScroll);
|
||||
window.addEventListener('scroll', onScroll, { passive: true });
|
||||
|
||||
onScroll();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* Fade away content below header when scrolling */
|
||||
.mask-container {
|
||||
.has-js .scroll-fade-container {
|
||||
-webkit-mask-image: linear-gradient(
|
||||
to bottom,
|
||||
transparent 0px,
|
||||
transparent 90px,
|
||||
black 140px,
|
||||
transparent 16px,
|
||||
black 80px,
|
||||
black 100%
|
||||
);
|
||||
|
||||
mask-image: linear-gradient(
|
||||
to bottom,
|
||||
transparent 0px,
|
||||
transparent 90px,
|
||||
black 140px,
|
||||
transparent 16px,
|
||||
black 60px,
|
||||
black 100%
|
||||
);
|
||||
|
||||
-webkit-mask-size: 100vw 100vh;
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
|
||||
-webkit-mask-position-y: var(--scroll-offset);
|
||||
mask-position-y: var(--scroll-offset);
|
||||
}
|
||||
|
||||
/* Background that creates the "glimmer" effect */
|
||||
@@ -148,9 +149,9 @@ const normalizeTitle = !title ? global.name : `${title} | ${global.name}`;
|
||||
}
|
||||
|
||||
:global(.dark) .bg {
|
||||
--bg-primary: #3b3836;
|
||||
--bg-secondary: #332f2e;
|
||||
--bg-tertiary: #44403c;
|
||||
--bg-primary: #332f2e;
|
||||
--bg-secondary: #44403c;
|
||||
--bg-tertiary: #57534e;
|
||||
}
|
||||
|
||||
.bg2 {
|
||||
|
||||
@@ -37,7 +37,7 @@ export type Post = {
|
||||
title: string;
|
||||
description: string;
|
||||
tags: string[];
|
||||
category: Category;
|
||||
category: string;
|
||||
selected: boolean;
|
||||
published: boolean;
|
||||
content: string;
|
||||
|
||||
@@ -17,9 +17,7 @@ import { getDirectusImageURL } from '@/support/url';
|
||||
const post = Astro.props;
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const posts = await directus.request(readItems('posts', {
|
||||
fields: ['*', 'category.*'],
|
||||
}));
|
||||
const posts = await directus.request(readItems('posts'));
|
||||
return posts.map((post) => ({
|
||||
params: { slug: post.slug },
|
||||
props: post,
|
||||
@@ -27,7 +25,12 @@ export async function getStaticPaths() {
|
||||
}
|
||||
|
||||
const global = await directus.request(readSingleton('site_global'));
|
||||
const category = post.category;
|
||||
const [category] = post.category ? await directus.request(
|
||||
readItems('categories', {
|
||||
filter: { slug: { _eq: post.category },},
|
||||
limit: 1,
|
||||
}))
|
||||
: [];
|
||||
|
||||
const readingTime = getReadingTime(post.content || '');
|
||||
|
||||
|
||||
@@ -20,7 +20,7 @@ const posts = await directus.request(
|
||||
})
|
||||
);
|
||||
|
||||
const selectedPosts: Post[] = posts.filter((p) => p.selected).slice(0, 4);
|
||||
const selectedPosts: Post[] = posts.filter((p) => p.selected).slice(0, 3);
|
||||
const recentPosts: Post[] = posts.filter(
|
||||
(p) => !selectedPosts.some((selected) => selected.slug === p.slug)
|
||||
).slice(0, 9);
|
||||
|
||||
@@ -22,7 +22,7 @@ const global = await directus.request(readSingleton('site_global'));
|
||||
const posts = await directus.request(
|
||||
readItems('posts', {
|
||||
filter: { published: { _eq: true } },
|
||||
fields: ['*', 'category.slug'],
|
||||
fields: ['*'],
|
||||
sort: ['-published_date'],
|
||||
})
|
||||
);
|
||||
@@ -30,7 +30,7 @@ const posts = await directus.request(
|
||||
const categoriesPosts = posts
|
||||
.sort((a: Post, b: Post) => b.published_date.valueOf() - a.published_date.valueOf())
|
||||
.filter((b) => {
|
||||
return b.category?.slug === category.slug;
|
||||
return b.category === category.slug;
|
||||
});
|
||||
---
|
||||
|
||||
|
||||
@@ -39,10 +39,10 @@
|
||||
|
||||
/* Object colors */
|
||||
--color-background: light-dark(var(--color-neutral-200), var(--color-stone-700));
|
||||
--color-background-accent: light-dark(color-mix(in srgb, var(--color-slate-300) 40%, transparent), color-mix(in srgb, var(--color-stone-800) 20%, transparent));
|
||||
--color-background-accent: light-dark(color-mix(in srgb, var(--color-neutral-300) 40%, transparent), color-mix(in srgb, var(--color-stone-800) 20%, transparent));
|
||||
--color-background-card: light-dark(color-mix(in srgb, var(--color-neutral-100) 80%, transparent), color-mix(in srgb, var(--color-neutral-800) 60%, transparent));
|
||||
|
||||
--color-divider: light-dark(color-mix(in srgb, var(--color-slate-400) 40%, transparent), color-mix(in srgb, var(--color-neutral-500) 50%, transparent));
|
||||
--color-divider: light-dark(color-mix(in srgb, var(--color-neutral-400) 50%, transparent), color-mix(in srgb, var(--color-neutral-500) 50%, transparent));
|
||||
}
|
||||
|
||||
@layer base {
|
||||
|
||||
Reference in New Issue
Block a user