Compare commits
1 Commits
3.3.0
...
b3d6976dec
| Author | SHA1 | Date | |
|---|---|---|---|
b3d6976dec
|
@@ -3,7 +3,7 @@ name: release-image-gitea
|
|||||||
on:
|
on:
|
||||||
push:
|
push:
|
||||||
tags:
|
tags:
|
||||||
- 3.*
|
- 2.*
|
||||||
|
|
||||||
workflow_dispatch:
|
workflow_dispatch:
|
||||||
|
|
||||||
@@ -14,34 +14,25 @@ jobs:
|
|||||||
- name: Checkout
|
- name: Checkout
|
||||||
uses: actions/checkout@v6
|
uses: actions/checkout@v6
|
||||||
|
|
||||||
- name: Set up Bun
|
- name: Set up pnpm
|
||||||
uses: oven-sh/setup-bun@v2
|
uses: pnpm/action-setup@v4
|
||||||
with:
|
with:
|
||||||
bun-version: 1.3.10
|
version: 10.x
|
||||||
|
|
||||||
- name: Set up Node
|
- name: Set up Node.js
|
||||||
uses: actions/setup-node@v6
|
uses: actions/setup-node@v6
|
||||||
with:
|
with:
|
||||||
node-version: 24.14.0
|
node-version: 24.13.1
|
||||||
|
cache: pnpm
|
||||||
|
|
||||||
- name: Install Dependencies
|
- name: Install Dependencies
|
||||||
run: bun install --frozen-lockfile
|
run: pnpm install
|
||||||
|
|
||||||
- name: Cache Astro Build Cache
|
|
||||||
uses: actions/cache@v5
|
|
||||||
with:
|
|
||||||
path: |
|
|
||||||
.astro
|
|
||||||
node_modules/.vite
|
|
||||||
key: ${{ runner.os }}-astro-${{ hashFiles('**/*.astro', 'astro.config.mjs') }}
|
|
||||||
restore-keys: |
|
|
||||||
${{ runner.os }}-astro-
|
|
||||||
|
|
||||||
- name: Lint Code
|
- name: Lint Code
|
||||||
run: bun run lint
|
run: pnpm lint
|
||||||
|
|
||||||
- name: Build Project
|
- name: Build Project
|
||||||
run: bun run build
|
run: pnpm build
|
||||||
|
|
||||||
release:
|
release:
|
||||||
runs-on: ubuntu-js
|
runs-on: ubuntu-js
|
||||||
@@ -51,14 +42,14 @@ jobs:
|
|||||||
uses: actions/checkout@v6
|
uses: actions/checkout@v6
|
||||||
|
|
||||||
- name: Login to Registry
|
- name: Login to Registry
|
||||||
uses: docker/login-action@v4
|
uses: docker/login-action@v3
|
||||||
with:
|
with:
|
||||||
registry: ${{ vars.REPOSITORY_HOST }}
|
registry: ${{ vars.REPOSITORY_HOST }}
|
||||||
username: ${{ gitea.actor }}
|
username: ${{ gitea.actor }}
|
||||||
password: ${{ secrets.REPOSITORY_TOKEN }}
|
password: ${{ secrets.REPOSITORY_TOKEN }}
|
||||||
|
|
||||||
- name: Login to Docker
|
- name: Login to Docker
|
||||||
uses: docker/login-action@v4
|
uses: docker/login-action@v3
|
||||||
with:
|
with:
|
||||||
registry: ${{ vars.DH_REGISTRY }}
|
registry: ${{ vars.DH_REGISTRY }}
|
||||||
username: ${{ secrets.DH_USERNAME }}
|
username: ${{ secrets.DH_USERNAME }}
|
||||||
@@ -71,7 +62,7 @@ jobs:
|
|||||||
|
|
||||||
- name: Set up Docker Buildx
|
- name: Set up Docker Buildx
|
||||||
id: buildx
|
id: buildx
|
||||||
uses: docker/setup-buildx-action@v4
|
uses: docker/setup-buildx-action@v3
|
||||||
with:
|
with:
|
||||||
driver: kubernetes
|
driver: kubernetes
|
||||||
driver-opts: |
|
driver-opts: |
|
||||||
@@ -86,7 +77,7 @@ jobs:
|
|||||||
|
|
||||||
- name: Extract Metadata
|
- name: Extract Metadata
|
||||||
id: meta
|
id: meta
|
||||||
uses: docker/metadata-action@v6
|
uses: docker/metadata-action@v5
|
||||||
with:
|
with:
|
||||||
tags: |
|
tags: |
|
||||||
type=ref,event=branch
|
type=ref,event=branch
|
||||||
@@ -110,7 +101,7 @@ jobs:
|
|||||||
fi
|
fi
|
||||||
|
|
||||||
- name: Build and Push Image
|
- name: Build and Push Image
|
||||||
uses: docker/build-push-action@v7
|
uses: docker/build-push-action@v6
|
||||||
with:
|
with:
|
||||||
context: .
|
context: .
|
||||||
push: true
|
push: true
|
||||||
@@ -122,8 +113,6 @@ jobs:
|
|||||||
COMMIT_SHA=${{ steps.version.outputs.commit }}
|
COMMIT_SHA=${{ steps.version.outputs.commit }}
|
||||||
IS_RELEASE=${{ steps.version.outputs.is_release }}
|
IS_RELEASE=${{ steps.version.outputs.is_release }}
|
||||||
file: ./Dockerfile
|
file: ./Dockerfile
|
||||||
cache-from: type=gha
|
|
||||||
cache-to: type=gha,mode=max
|
|
||||||
|
|
||||||
- name: ntfy Success
|
- name: ntfy Success
|
||||||
uses: niniyas/ntfy-action@master
|
uses: niniyas/ntfy-action@master
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ name: release-image-harbor
|
|||||||
on:
|
on:
|
||||||
push:
|
push:
|
||||||
tags:
|
tags:
|
||||||
- 3.*
|
- 2.*
|
||||||
|
|
||||||
workflow_dispatch:
|
workflow_dispatch:
|
||||||
|
|
||||||
@@ -14,34 +14,25 @@ jobs:
|
|||||||
- name: Checkout
|
- name: Checkout
|
||||||
uses: actions/checkout@v6
|
uses: actions/checkout@v6
|
||||||
|
|
||||||
- name: Set up Bun
|
- name: Set up pnpm
|
||||||
uses: oven-sh/setup-bun@v2
|
uses: pnpm/action-setup@v4
|
||||||
with:
|
with:
|
||||||
bun-version: 1.3.10
|
version: 10.x
|
||||||
|
|
||||||
- name: Set up Node
|
- name: Set up Node.js
|
||||||
uses: actions/setup-node@v6
|
uses: actions/setup-node@v6
|
||||||
with:
|
with:
|
||||||
node-version: 24.14.0
|
node-version: 24.13.1
|
||||||
|
cache: pnpm
|
||||||
|
|
||||||
- name: Install Dependencies
|
- name: Install Dependencies
|
||||||
run: bun install --frozen-lockfile
|
run: pnpm install
|
||||||
|
|
||||||
- name: Cache Astro Build Cache
|
|
||||||
uses: actions/cache@v5
|
|
||||||
with:
|
|
||||||
path: |
|
|
||||||
.astro
|
|
||||||
node_modules/.vite
|
|
||||||
key: ${{ runner.os }}-astro-${{ hashFiles('**/*.astro', 'astro.config.mjs') }}
|
|
||||||
restore-keys: |
|
|
||||||
${{ runner.os }}-astro-
|
|
||||||
|
|
||||||
- name: Lint Code
|
- name: Lint Code
|
||||||
run: bun run lint
|
run: pnpm lint
|
||||||
|
|
||||||
- name: Build Project
|
- name: Build Project
|
||||||
run: bun run build
|
run: pnpm build
|
||||||
|
|
||||||
release:
|
release:
|
||||||
runs-on: ubuntu-js
|
runs-on: ubuntu-js
|
||||||
@@ -51,14 +42,14 @@ jobs:
|
|||||||
uses: actions/checkout@v6
|
uses: actions/checkout@v6
|
||||||
|
|
||||||
- name: Login to Registry
|
- name: Login to Registry
|
||||||
uses: docker/login-action@v4
|
uses: docker/login-action@v3
|
||||||
with:
|
with:
|
||||||
registry: ${{ vars.REGISTRY_HOST }}
|
registry: ${{ vars.REGISTRY_HOST }}
|
||||||
username: ${{ vars.REGISTRY_USER }}
|
username: ${{ vars.REGISTRY_USER }}
|
||||||
password: ${{ secrets.REGISTRY_SECRET }}
|
password: ${{ secrets.REGISTRY_SECRET }}
|
||||||
|
|
||||||
- name: Login to Docker
|
- name: Login to Docker
|
||||||
uses: docker/login-action@v4
|
uses: docker/login-action@v3
|
||||||
with:
|
with:
|
||||||
registry: ${{ vars.DH_REGISTRY }}
|
registry: ${{ vars.DH_REGISTRY }}
|
||||||
username: ${{ secrets.DH_USERNAME }}
|
username: ${{ secrets.DH_USERNAME }}
|
||||||
@@ -71,7 +62,7 @@ jobs:
|
|||||||
|
|
||||||
- name: Set up Docker Buildx
|
- name: Set up Docker Buildx
|
||||||
id: buildx
|
id: buildx
|
||||||
uses: docker/setup-buildx-action@v4
|
uses: docker/setup-buildx-action@v3
|
||||||
with:
|
with:
|
||||||
driver: kubernetes
|
driver: kubernetes
|
||||||
driver-opts: |
|
driver-opts: |
|
||||||
@@ -86,7 +77,7 @@ jobs:
|
|||||||
|
|
||||||
- name: Extract Metadata
|
- name: Extract Metadata
|
||||||
id: meta
|
id: meta
|
||||||
uses: docker/metadata-action@v6
|
uses: docker/metadata-action@v5
|
||||||
with:
|
with:
|
||||||
tags: |
|
tags: |
|
||||||
type=ref,event=branch
|
type=ref,event=branch
|
||||||
@@ -110,7 +101,7 @@ jobs:
|
|||||||
fi
|
fi
|
||||||
|
|
||||||
- name: Build and Push Image
|
- name: Build and Push Image
|
||||||
uses: docker/build-push-action@v7
|
uses: docker/build-push-action@v6
|
||||||
with:
|
with:
|
||||||
context: .
|
context: .
|
||||||
push: true
|
push: true
|
||||||
@@ -122,8 +113,6 @@ jobs:
|
|||||||
COMMIT_SHA=${{ steps.version.outputs.commit }}
|
COMMIT_SHA=${{ steps.version.outputs.commit }}
|
||||||
IS_RELEASE=${{ steps.version.outputs.is_release }}
|
IS_RELEASE=${{ steps.version.outputs.is_release }}
|
||||||
file: ./Dockerfile
|
file: ./Dockerfile
|
||||||
cache-from: type=gha
|
|
||||||
cache-to: type=gha,mode=max
|
|
||||||
|
|
||||||
- name: ntfy Success
|
- name: ntfy Success
|
||||||
uses: niniyas/ntfy-action@master
|
uses: niniyas/ntfy-action@master
|
||||||
|
|||||||
@@ -16,34 +16,25 @@ jobs:
|
|||||||
- name: Checkout
|
- name: Checkout
|
||||||
uses: actions/checkout@v6
|
uses: actions/checkout@v6
|
||||||
|
|
||||||
- name: Set up Bun
|
- name: Set up pnpm
|
||||||
uses: oven-sh/setup-bun@v2
|
uses: pnpm/action-setup@v4
|
||||||
with:
|
with:
|
||||||
bun-version: 1.3.10
|
version: 10.x
|
||||||
|
|
||||||
- name: Set up Node
|
- name: Set up Node.js
|
||||||
uses: actions/setup-node@v6
|
uses: actions/setup-node@v6
|
||||||
with:
|
with:
|
||||||
node-version: 24.14.0
|
node-version: 24.13.1
|
||||||
|
cache: pnpm
|
||||||
|
|
||||||
- name: Install Dependencies
|
- name: Install Dependencies
|
||||||
run: bun install --frozen-lockfile
|
run: pnpm install
|
||||||
|
|
||||||
- name: Cache Astro Build Cache
|
|
||||||
uses: actions/cache@v5
|
|
||||||
with:
|
|
||||||
path: |
|
|
||||||
.astro
|
|
||||||
node_modules/.vite
|
|
||||||
key: ${{ runner.os }}-astro-${{ hashFiles('**/*.astro', 'astro.config.mjs') }}
|
|
||||||
restore-keys: |
|
|
||||||
${{ runner.os }}-astro-
|
|
||||||
|
|
||||||
- name: Lint Code
|
- name: Lint Code
|
||||||
run: bun run lint
|
run: pnpm lint
|
||||||
|
|
||||||
- name: Build Project
|
- name: Build Project
|
||||||
run: bun run build
|
run: pnpm build
|
||||||
|
|
||||||
- name: ntfy Failed
|
- name: ntfy Failed
|
||||||
uses: niniyas/ntfy-action@master
|
uses: niniyas/ntfy-action@master
|
||||||
|
|||||||
2
.gitignore
vendored
2
.gitignore
vendored
@@ -10,6 +10,8 @@ node_modules/
|
|||||||
npm-debug.log*
|
npm-debug.log*
|
||||||
yarn-debug.log*
|
yarn-debug.log*
|
||||||
yarn-error.log*
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
|
||||||
|
|
||||||
# environment variables
|
# environment variables
|
||||||
.env
|
.env
|
||||||
|
|||||||
3
.npmrc
Normal file
3
.npmrc
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
registry=https://registry.npmjs.org/
|
||||||
|
engine-strict=true
|
||||||
|
save-exact=true
|
||||||
26
Dockerfile
26
Dockerfile
@@ -1,30 +1,32 @@
|
|||||||
FROM dhi.io/bun:1.3.10-debian13-dev AS builder
|
FROM docker.io/node:24.13.1-alpine AS builder
|
||||||
WORKDIR /app
|
|
||||||
|
|
||||||
COPY package.json bun.lock ./
|
ENV PNPM_HOME="/pnpm"
|
||||||
|
ENV PATH="$PNPM_HOME:$PATH"
|
||||||
|
RUN corepack enable
|
||||||
|
|
||||||
|
WORKDIR /app
|
||||||
|
COPY package.json pnpm-lock.yaml ./
|
||||||
|
|
||||||
FROM builder AS prod-deps
|
FROM builder AS prod-deps
|
||||||
RUN --mount=type=cache,id=bun,target=/root/.bun/install/cache \
|
RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --prod --frozen-lockfile
|
||||||
bun install --production --frozen-lockfile
|
|
||||||
|
|
||||||
FROM builder AS build-deps
|
FROM prod-deps AS build-deps
|
||||||
RUN --mount=type=cache,id=bun,target=/root/.bun/install/cache \
|
RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
|
||||||
bun install --frozen-lockfile
|
|
||||||
|
|
||||||
FROM build-deps AS build
|
FROM build-deps AS build
|
||||||
COPY . .
|
COPY . .
|
||||||
RUN bun run build
|
RUN pnpm run build
|
||||||
|
|
||||||
FROM dhi.io/bun:1.3.10-alpine3.22 AS runtime
|
FROM dhi.io/node:24.14.0 AS runtime
|
||||||
WORKDIR /app
|
WORKDIR /app
|
||||||
COPY --from=prod-deps /app/node_modules /app/node_modules
|
COPY --from=prod-deps /app/node_modules /app/node_modules
|
||||||
COPY --from=build /app/dist /app/dist
|
COPY --from=build /app/dist /app/dist
|
||||||
|
|
||||||
LABEL version="3.3.0"
|
LABEL version="2.15.1"
|
||||||
LABEL description="Astro based personal website"
|
LABEL description="Astro based personal website"
|
||||||
|
|
||||||
ENV HOST=0.0.0.0
|
ENV HOST=0.0.0.0
|
||||||
ENV PORT=4321
|
ENV PORT=4321
|
||||||
|
|
||||||
EXPOSE $PORT
|
EXPOSE $PORT
|
||||||
CMD ["bun", "run", "./dist/server/entry.mjs"]
|
CMD ["node", "./dist/server/entry.mjs"]
|
||||||
|
|||||||
12
README.md
12
README.md
@@ -2,23 +2,19 @@
|
|||||||
|
|
||||||
Personal site used for information about myself and blog.
|
Personal site used for information about myself and blog.
|
||||||
|
|
||||||
|
|
||||||
## Development
|
## Development
|
||||||
|
|
||||||
With dependencies installed, you can utilize the following npm scripts to manage your project's development lifecycle:
|
With dependencies installed, you can utilize the following npm scripts to manage your project's development lifecycle:
|
||||||
|
|
||||||
- `bun run build`: Bundles your site into static files for production.
|
- `pnpm build`: Bundles your site into static files for production.
|
||||||
- `bun run dev`: Starts a local development server with hot reloading enabled.
|
- `pnpm dev`: Starts a local development server with hot reloading enabled.
|
||||||
|
- `pnpm preview`: Serves your build output locally for preview before deployment.
|
||||||
|
|
||||||
For detailed help with Astro CLI commands, visit [Astro's documentation](https://docs.astro.build/en/reference/cli-reference/).
|
For detailed help with Astro CLI commands, visit [Astro's documentation](https://docs.astro.build/en/reference/cli-reference/).
|
||||||
|
|
||||||
|
|
||||||
## Thanks
|
## Thanks
|
||||||
|
|
||||||
Based the site on: [gblog-template](https://github.com/godruoyi/gblog/tree/gblog-template) and [ScrewFast](https://github.com/mearashadowfax/ScrewFast)
|
Thanks https://github.com/godruoyi/gblog/tree/gblog-template, https://github.com/mearashadowfax/ScrewFast,
|
||||||
|
|
||||||
Using Icons from [Icons8](https://icons8.com/)
|
|
||||||
|
|
||||||
|
|
||||||
## License
|
## License
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
import { defineConfig } from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
|
|
||||||
import node from '@astrojs/node';
|
import node from '@astrojs/node';
|
||||||
|
import partytown from '@astrojs/partytown';
|
||||||
import react from '@astrojs/react';
|
import react from '@astrojs/react';
|
||||||
import sitemap from '@astrojs/sitemap';
|
import sitemap from '@astrojs/sitemap';
|
||||||
|
|
||||||
@@ -13,8 +14,6 @@ import { getSiteURL } from './src/support/url';
|
|||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
site: getSiteURL(),
|
site: getSiteURL(),
|
||||||
|
|
||||||
// security: { csp: true },
|
|
||||||
|
|
||||||
image: {
|
image: {
|
||||||
remotePatterns: [
|
remotePatterns: [
|
||||||
{ protocol: 'https', hostname: '*.alexlebens.net' },
|
{ protocol: 'https', hostname: '*.alexlebens.net' },
|
||||||
@@ -29,6 +28,7 @@ export default defineConfig({
|
|||||||
prefetch: true,
|
prefetch: true,
|
||||||
|
|
||||||
integrations: [
|
integrations: [
|
||||||
|
partytown(),
|
||||||
react(),
|
react(),
|
||||||
sitemap(),
|
sitemap(),
|
||||||
icon({
|
icon({
|
||||||
|
|||||||
42
package.json
42
package.json
@@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "site-profile",
|
"name": "site-profile",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"version": "3.3.0",
|
"version": "2.15.1",
|
||||||
"homepage": "https://www.alexlebens.dev",
|
"homepage": "https://www.alexlebens.dev",
|
||||||
"bugs": {
|
"bugs": {
|
||||||
"url": "https://gitea.alexlebens.dev/alexlebens/site-profile/issues",
|
"url": "https://gitea.alexlebens.dev/alexlebens/site-profile/issues",
|
||||||
@@ -27,56 +27,54 @@
|
|||||||
"lint:fix": "eslint --fix \"src/**/*.{js,ts,jsx,tsx,astro}\""
|
"lint:fix": "eslint --fix \"src/**/*.{js,ts,jsx,tsx,astro}\""
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@astrojs/check": "^0.9.7",
|
"@astrojs/check": "^0.9.6",
|
||||||
"@astrojs/node": "^10.0.0",
|
"@astrojs/node": "^9.5.3",
|
||||||
"@astrojs/react": "^5.0.0",
|
"@astrojs/partytown": "^2.1.4",
|
||||||
"@astrojs/rss": "^4.0.17",
|
"@astrojs/react": "^4.4.2",
|
||||||
"@astrojs/sitemap": "^3.7.1",
|
"@astrojs/rss": "^4.0.15",
|
||||||
"@directus/sdk": "^21.2.0",
|
"@astrojs/sitemap": "^3.7.0",
|
||||||
|
"@directus/sdk": "^21.1.0",
|
||||||
"@giscus/react": "^3.1.0",
|
"@giscus/react": "^3.1.0",
|
||||||
"@iconify-json/mdi": "^1.2.3",
|
"@iconify-json/mdi": "^1.2.3",
|
||||||
"@iconify-json/pajamas": "^1.2.15",
|
"@iconify-json/pajamas": "^1.2.15",
|
||||||
"@iconify-json/simple-icons": "^1.2.73",
|
"@iconify-json/simple-icons": "^1.2.70",
|
||||||
"@playform/compress": "^0.2.1",
|
"@playform/compress": "^0.2.1",
|
||||||
"@swup/astro": "^1.8.0",
|
"@swup/astro": "^1.8.0",
|
||||||
"@tailwindcss/postcss": "^4.2.1",
|
"@tailwindcss/postcss": "^4.1.18",
|
||||||
"@tailwindcss/vite": "^4.2.1",
|
"@tailwindcss/vite": "^4.1.18",
|
||||||
"@types/react": "^19.2.14",
|
"@types/react": "^19.2.14",
|
||||||
"@types/unist": "^3.0.3",
|
"@types/unist": "^3.0.3",
|
||||||
"astro": "^6.0.2",
|
"astro": "^5.17.2",
|
||||||
"astro-icon": "^1.1.5",
|
"astro-icon": "^1.1.5",
|
||||||
"markdown-it": "^14.1.1",
|
"marked": "^17.0.2",
|
||||||
"marked": "^17.0.4",
|
|
||||||
"marked-shiki": "^1.2.1",
|
"marked-shiki": "^1.2.1",
|
||||||
"mdast-util-to-string": "^4.0.0",
|
"mdast-util-to-string": "^4.0.0",
|
||||||
"photoswipe": "^5.4.4",
|
"preline": "^4.0.1",
|
||||||
"preline": "^4.1.2",
|
|
||||||
"react": "^19.2.4",
|
"react": "^19.2.4",
|
||||||
"react-dom": "^19.2.4",
|
"react-dom": "^19.2.4",
|
||||||
"reading-time": "^1.5.0",
|
"reading-time": "^1.5.0",
|
||||||
"sharp": "^0.34.5",
|
"sharp": "^0.34.5",
|
||||||
"sharp-ico": "^0.1.5",
|
"sharp-ico": "^0.1.5",
|
||||||
"shiki": "^4.0.2",
|
"shiki": "^3.22.0",
|
||||||
"tailwindcss": "^4.2.1",
|
"tailwindcss": "^4.1.18",
|
||||||
"ultrahtml": "^1.6.0"
|
"ultrahtml": "^1.6.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@eslint-react/eslint-plugin": "^2.13.0",
|
"@eslint-react/eslint-plugin": "^2.13.0",
|
||||||
"@tailwindcss/forms": "^0.5.11",
|
"@tailwindcss/forms": "^0.5.11",
|
||||||
"@tailwindcss/typography": "^0.5.19",
|
"@tailwindcss/typography": "^0.5.19",
|
||||||
"@types/markdown-it": "^14.1.2",
|
"eslint": "^10.0.0",
|
||||||
"eslint": "^10.0.3",
|
|
||||||
"eslint-config-prettier": "^10.1.8",
|
"eslint-config-prettier": "^10.1.8",
|
||||||
"eslint-plugin-astro": "^1.6.0",
|
"eslint-plugin-astro": "^1.6.0",
|
||||||
"eslint-plugin-format": "^2.0.1",
|
"eslint-plugin-format": "^2.0.0",
|
||||||
"eslint-plugin-react": "^7.37.5",
|
"eslint-plugin-react": "^7.37.5",
|
||||||
"eslint-plugin-react-hooks": "^7.0.1",
|
"eslint-plugin-react-hooks": "^7.0.1",
|
||||||
"eslint-plugin-react-refresh": "^0.5.2",
|
"eslint-plugin-react-refresh": "^0.5.0",
|
||||||
"prettier": "^3.8.1",
|
"prettier": "^3.8.1",
|
||||||
"prettier-plugin-astro": "^0.14.1",
|
"prettier-plugin-astro": "^0.14.1",
|
||||||
"prettier-plugin-tailwindcss": "^0.7.2",
|
"prettier-plugin-tailwindcss": "^0.7.2",
|
||||||
"timeago.js": "^4.0.2",
|
"timeago.js": "^4.0.2",
|
||||||
"typescript": "^5.9.3",
|
"typescript": "^5.9.3",
|
||||||
"typescript-eslint": "^8.57.0"
|
"typescript-eslint": "^8.55.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
12617
pnpm-lock.yaml
generated
Normal file
12617
pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load Diff
2
pnpm-workspace.yaml
Normal file
2
pnpm-workspace.yaml
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
onlyBuiltDependencies:
|
||||||
|
- swup
|
||||||
BIN
public/i.jpg
Normal file
BIN
public/i.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 381 KiB |
4
public/robots.txt
Normal file
4
public/robots.txt
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
User-agent: *
|
||||||
|
Allow: /
|
||||||
|
|
||||||
|
Sitemap: https://www.alexlebens.dev/sitemap-index.xml
|
||||||
@@ -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"
|
class="fixed flex flex-wrap md:flex-nowrap md:justify-start inset-x-0 top-0 w-full z-50"
|
||||||
>
|
>
|
||||||
<nav
|
<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"
|
aria-label="Global"
|
||||||
>
|
>
|
||||||
<div class="flex items-center justify-between ml-0">
|
<div class="flex items-center justify-between ml-0">
|
||||||
|
|||||||
@@ -1,15 +0,0 @@
|
|||||||
---
|
|
||||||
import { Icon } from 'astro-icon/components';
|
|
||||||
---
|
|
||||||
|
|
||||||
<div class="button-base button-bg-teal inline-flex shrink-0 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>
|
|
||||||
@@ -64,7 +64,7 @@
|
|||||||
const overlay = document.createElement('div');
|
const overlay = document.createElement('div');
|
||||||
overlay.className = 'theme-switch-overlay fixed inset-0 pointer-events-none z-50';
|
overlay.className = 'theme-switch-overlay fixed inset-0 pointer-events-none z-50';
|
||||||
overlay.style.opacity = '0';
|
overlay.style.opacity = '0';
|
||||||
overlay.style.transition = 'opacity 0.15s ease-out';
|
overlay.style.transition = 'opacity 0.3s ease-out';
|
||||||
document.body.appendChild(overlay);
|
document.body.appendChild(overlay);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -130,7 +130,7 @@
|
|||||||
overlay.style.opacity = '0';
|
overlay.style.opacity = '0';
|
||||||
}
|
}
|
||||||
document.documentElement.classList.remove('theme-switching');
|
document.documentElement.classList.remove('theme-switching');
|
||||||
}, 150);
|
}, 300);
|
||||||
}, 50);
|
}, 50);
|
||||||
},
|
},
|
||||||
{ passive: false }
|
{ passive: false }
|
||||||
|
|||||||
@@ -1,9 +1,10 @@
|
|||||||
---
|
---
|
||||||
|
import { Icon } from 'astro-icon/components';
|
||||||
import { Image } from 'astro:assets';
|
import { Image } from 'astro:assets';
|
||||||
|
|
||||||
import type { Post } from '@lib/directusTypes';
|
import type { Post } from '@lib/directusTypes';
|
||||||
|
|
||||||
import PostMetadataSnippet from '@/components/snippets/PostMetadataSnippet.astro';
|
import { formatDate } from '@support/time';
|
||||||
import { getDirectusImageURL } from '@/support/url';
|
import { getDirectusImageURL } from '@/support/url';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
@@ -15,13 +16,13 @@ const { post } = Astro.props;
|
|||||||
|
|
||||||
<div class="smooth-reveal-cards group flex flex-col">
|
<div class="smooth-reveal-cards group flex flex-col">
|
||||||
<a
|
<a
|
||||||
class="card-base border-none! h-full flex flex-col"
|
class="card-base border-none!"
|
||||||
href={`/blog/${post.slug}/`}
|
href={`/blog/${post.slug}/`}
|
||||||
data-astro-prefetch
|
data-astro-prefetch
|
||||||
>
|
>
|
||||||
<div class="relative shrink-0 rounded-t-xl w-full overflow-hidden before:absolute before:inset-x-0 before:z-1 before:size-full">
|
<div class="relative shrink-0 rounded-t-xl w-full overflow-hidden before:absolute before:inset-x-0 before:z-1 before:size-full">
|
||||||
<Image
|
<Image
|
||||||
class="rounded-t-xl h-64 w-full object-cover"
|
class="rounded-t-xl h-auto w-full"
|
||||||
src={getDirectusImageURL(post.image)}
|
src={getDirectusImageURL(post.image)}
|
||||||
alt={post.image_alt}
|
alt={post.image_alt}
|
||||||
draggable="false"
|
draggable="false"
|
||||||
@@ -30,17 +31,25 @@ const { post } = Astro.props;
|
|||||||
inferSize={true}
|
inferSize={true}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col flex-1 rounded-xl p-4 md:p-5 mx-1 mb-2">
|
<div class="rounded-xl p-4 md:p-5">
|
||||||
<div class="flex flex-row items-center mb-8">
|
<h3 class="card-text-title text-xl">
|
||||||
<h3 class="card-text-title card-hover-text-title text-2xl">
|
{post.title}
|
||||||
{post.title}
|
</h3>
|
||||||
</h3>
|
<div class="ml-6 flex">
|
||||||
</div>
|
<div class="relative inline-block w-full">
|
||||||
<div class="mt-auto">
|
<div class="card-text-title card-hover-text-title flex relative items-center mx-auto min-h-11 sm:mx-0 sm:mt-4">
|
||||||
<PostMetadataSnippet
|
<span class="relative inline-block overflow-hidden ml-2">
|
||||||
enableCategoryLink={false}
|
Read more
|
||||||
post={post}
|
</span>
|
||||||
/>
|
<Icon
|
||||||
|
name="mdi:keyboard-arrow-right"
|
||||||
|
class="translate-y-0.5 transition duration-300 group-hover:translate-x-1"
|
||||||
|
/>
|
||||||
|
<p class="card-text-description text-sm ml-auto">
|
||||||
|
{formatDate(post.published_date)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
@@ -1,18 +1,13 @@
|
|||||||
---
|
---
|
||||||
import Logo from '@components/images/Logo.astro';
|
|
||||||
import { getDirectusImageURL } from '@/support/url';
|
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
slug: string;
|
slug: string;
|
||||||
title: string;
|
title: string;
|
||||||
description: string;
|
description: string;
|
||||||
logoLight: string;
|
|
||||||
logoDark?: string;
|
|
||||||
count: number;
|
count: number;
|
||||||
publishDate: string;
|
publishDate: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const { slug, title, description, logoLight, logoDark, count, publishDate } = Astro.props;
|
const { slug, title, description, count, publishDate } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="smooth-reveal-cards group h-full">
|
<div class="smooth-reveal-cards group h-full">
|
||||||
@@ -23,19 +18,10 @@ const { slug, title, description, logoLight, logoDark, count, publishDate } = As
|
|||||||
>
|
>
|
||||||
<div class="relative grow overflow-hidden">
|
<div class="relative grow overflow-hidden">
|
||||||
<div class="absolute inset-1 flex flex-col p-3 md:p-4 lg:p-5">
|
<div class="absolute inset-1 flex flex-col p-3 md:p-4 lg:p-5">
|
||||||
<div class="flex flex-row items-center mb-4">
|
<div class="overflow-hidden">
|
||||||
<div class="card-hover-icon-scale shrink-0 mr-3">
|
<h3 class="card-text-title-major card-hover-text-title whitespace-nowrap mb-4">
|
||||||
<Logo
|
|
||||||
srcLight={getDirectusImageURL(logoLight)}
|
|
||||||
srcDark={getDirectusImageURL(logoDark!)}
|
|
||||||
alt={`Logo of ${title}`}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<h3 class="card-text-title-major card-hover-text-title whitespace-nowrap">
|
|
||||||
{title}
|
{title}
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="card-text-description mb-4">
|
<p class="card-text-description mb-4">
|
||||||
{description}
|
{description}
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@@ -1,50 +1,53 @@
|
|||||||
---
|
---
|
||||||
|
import { Icon } from 'astro-icon/components';
|
||||||
import { Image } from 'astro:assets';
|
import { Image } from 'astro:assets';
|
||||||
|
|
||||||
import type { Post } from '@lib/directusTypes';
|
|
||||||
|
|
||||||
import ReadMoreButton from '@components/buttons/ReadMoreButton.astro';
|
|
||||||
import PostMetadataSnippet from '@/components/snippets/PostMetadataSnippet.astro';
|
|
||||||
import { getDirectusImageURL } from '@/support/url';
|
import { getDirectusImageURL } from '@/support/url';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
post: Post;
|
title: string;
|
||||||
|
subTitle: string;
|
||||||
|
url: string;
|
||||||
|
img: string;
|
||||||
|
imgAlt: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const { post } = 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
|
<a
|
||||||
class="md:card-base-hidden group 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={`/blog/${post.slug}`}
|
href={url}
|
||||||
data-astro-prefetch
|
data-astro-prefetch
|
||||||
>
|
>
|
||||||
<div class="h-full">
|
<div>
|
||||||
<Image
|
<Image
|
||||||
class="rounded-2xl rounded-b-none md:rounded-2xl md:shadow-2xl w-full h-full 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(post.image)}
|
src={getDirectusImageURL(img)}
|
||||||
alt={post.image_alt}
|
alt={imgAlt}
|
||||||
draggable="false"
|
draggable="false"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
|
width="850"
|
||||||
|
height="420"
|
||||||
inferSize={true}
|
inferSize={true}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col justify-center bg-background-card md:bg-transparent group-hover:bg-neutral-100 md:group-hover:bg-transparent dark:group-hover:bg-neutral-800/90 md:dark:group-hover:bg-transparent rounded-b-2xl transition-all duration-300 p-6 gap-4">
|
<div class="bg-background-card md:bg-transparent group-hover:bg-neutral-100 md:group-hover:bg-transparent dark:group-hover:bg-neutral-800/90 md:dark:group-hover:bg-transparent rounded-b-2xl transition-all duration-300 p-6">
|
||||||
<h2 class="card-text-header">
|
<h2 class="card-text-header mb-2">
|
||||||
{post.title}
|
{title}
|
||||||
</h2>
|
</h2>
|
||||||
<p class="card-text-title font-light text-pretty sm:text-lg max-w-prose">
|
<p class="card-text-title font-light text-pretty sm:text-lg max-w-prose mb-8">
|
||||||
{post.description}
|
{subTitle}
|
||||||
</p>
|
</p>
|
||||||
<div class="flex md:flex-col-reverse lg:flex-row items-center md:items-start lg:items-center justify-between w-full md:gap-4">
|
<div class="button-base button-bg-teal inline-flex rounded-lg gap-x-2">
|
||||||
<div class="hidden md:block shrink-0 mt-4">
|
<div class="button-text-title flex relative items-center text-center">
|
||||||
<ReadMoreButton/>
|
<span class="mr-2">
|
||||||
</div>
|
Read More
|
||||||
<div class="mt-2 lg:mt-4">
|
</span>
|
||||||
<PostMetadataSnippet
|
<Icon
|
||||||
post={post}
|
name="mdi:keyboard-arrow-right"
|
||||||
enableCategoryLink={false}
|
class="button-hover-arrow"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,85 +1,85 @@
|
|||||||
---
|
---
|
||||||
|
import { Icon } from 'astro-icon/components';
|
||||||
import { Image } from 'astro:assets';
|
import { Image } from 'astro:assets';
|
||||||
|
|
||||||
import type { Post } from '@lib/directusTypes';
|
|
||||||
|
|
||||||
import ReadMoreButton from '@components/buttons/ReadMoreButton.astro';
|
|
||||||
import PostMetadataSnippet from '@/components/snippets/PostMetadataSnippet.astro';
|
|
||||||
import { getDirectusImageURL } from '@/support/url';
|
import { getDirectusImageURL } from '@/support/url';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
post: Post;
|
title: string;
|
||||||
|
subTitle: string;
|
||||||
|
url: string;
|
||||||
|
single?: boolean;
|
||||||
|
imgOne: any;
|
||||||
|
imgOneAlt: any;
|
||||||
|
imgTwo?: any;
|
||||||
|
imgTwoAlt?: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
const { post } = 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
|
<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={`/blog/${post.slug}`}
|
href={url}
|
||||||
data-astro-prefetch
|
data-astro-prefetch
|
||||||
>
|
>
|
||||||
<div class="flex flex-col bg-background-card md:bg-transparent group-hover:bg-neutral-100 md:group-hover:bg-transparent dark:group-hover:bg-neutral-800/90 md:dark:group-hover:bg-transparent rounded-b-2xl transition-all duration-300 p-6 gap-4">
|
<div class="bg-background-card md:bg-transparent group-hover:bg-neutral-100 md:group-hover:bg-transparent dark:group-hover:bg-neutral-800/90 md:dark:group-hover:bg-transparent rounded-b-2xl transition-all duration-300 p-6">
|
||||||
<h2 class="card-text-header">
|
<h2 class="card-text-header mb-2">
|
||||||
{post.title}
|
{title}
|
||||||
</h2>
|
</h2>
|
||||||
<p class="card-text-title font-light text-pretty sm:text-lg max-w-prose">
|
<p class="card-text-title font-light text-pretty sm:text-lg max-w-prose mb-8">
|
||||||
{post.description}
|
{subTitle}
|
||||||
</p>
|
</p>
|
||||||
<div class="flex md:flex-col-reverse lg:flex-row items-center md:items-start lg:items-center justify-between w-full md:gap-4">
|
<div class="button-base button-bg-teal inline-flex rounded-lg gap-x-2">
|
||||||
<div class="hidden md:block shrink-0 mt-4">
|
<div class="button-text-title flex relative items-center text-center">
|
||||||
<ReadMoreButton/>
|
<span class="mr-2">
|
||||||
</div>
|
Read More
|
||||||
<div class="mt-2 lg:mt-4">
|
</span>
|
||||||
<PostMetadataSnippet
|
<Icon
|
||||||
post={post}
|
name="mdi:keyboard-arrow-right"
|
||||||
enableCategoryLink={false}
|
class="button-hover-arrow"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{!post.image_second ? (
|
{single ? (
|
||||||
<div class="h-full">
|
<div>
|
||||||
<Image
|
<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(post.image)}
|
src={getDirectusImageURL(imgOne)}
|
||||||
alt={post.image_alt}
|
alt={imgOneAlt}
|
||||||
draggable="false"
|
format="webp"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
|
width="850"
|
||||||
|
height="420"
|
||||||
inferSize={true}
|
inferSize={true}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div class="h-full">
|
<div class="grid grid-cols-2 gap-4">
|
||||||
<div class="md:hidden">
|
<Image
|
||||||
<Image
|
class="rounded-xl w-full"
|
||||||
class="rounded-2xl rounded-b-none shadow-2xl w-full h-full sm:max-h-80 object-cover"
|
src={getDirectusImageURL(imgOne)}
|
||||||
src={getDirectusImageURL(post.image)}
|
alt={imgOneAlt}
|
||||||
alt={post.image_alt}
|
draggable="false"
|
||||||
draggable="false"
|
format="webp"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
inferSize={true}
|
width="400"
|
||||||
/>
|
height="230"
|
||||||
</div>
|
inferSize={true}
|
||||||
<div class="hidden md:flex md:items-start">
|
/>
|
||||||
<Image
|
<Image
|
||||||
class="rounded-xl z-10 shadow-2xl w-3/5 h-full object-cover"
|
class="rounded-xl w-full mt-4 lg:mt-10"
|
||||||
src={getDirectusImageURL(post.image)}
|
src={getDirectusImageURL(imgTwo)}
|
||||||
alt={post.image_alt}
|
alt={imgTwoAlt}
|
||||||
draggable="false"
|
draggable="false"
|
||||||
loading="lazy"
|
format="webp"
|
||||||
inferSize={true}
|
loading="lazy"
|
||||||
/>
|
width="400"
|
||||||
<Image
|
height="230"
|
||||||
class="rounded-xl shadow-2xl w-3/5 h-full -ml-16 mt-12 object-cover"
|
inferSize={true}
|
||||||
src={getDirectusImageURL(post.image_second)}
|
/>
|
||||||
alt={post.image_second_alt}
|
|
||||||
draggable="false"
|
|
||||||
loading="lazy"
|
|
||||||
inferSize={true}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
@@ -1,77 +0,0 @@
|
|||||||
---
|
|
||||||
import Logo from '@components/images/Logo.astro';
|
|
||||||
import { getDirectusImageURL } from '@/support/url';
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
url: string;
|
|
||||||
title: string;
|
|
||||||
description: string;
|
|
||||||
logoLight: string;
|
|
||||||
logoDark?: string;
|
|
||||||
count: number;
|
|
||||||
publishDate: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const { url, title, description, logoLight, logoDark, count, publishDate } = Astro.props;
|
|
||||||
---
|
|
||||||
|
|
||||||
<div class="smooth-reveal-cards flex flex-col mx-auto w-full">
|
|
||||||
<a
|
|
||||||
class="card-base flex flex-col h-full min-h-55"
|
|
||||||
href={url}
|
|
||||||
data-astro-prefetch
|
|
||||||
>
|
|
||||||
<div class="relative grow overflow-hidden">
|
|
||||||
<div class="absolute inset-1 flex flex-col p-3 md:p-4 lg:p-5">
|
|
||||||
<div class="flex flex-row items-center mb-4">
|
|
||||||
<div class="card-hover-icon-scale shrink-0 mr-3">
|
|
||||||
<Logo
|
|
||||||
srcLight={getDirectusImageURL(logoLight)}
|
|
||||||
srcDark={getDirectusImageURL(logoDark!)}
|
|
||||||
alt={`Logo of ${title}`}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<h3 class="card-text-title-major card-hover-text-title whitespace-nowrap">
|
|
||||||
{title}
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="card-text-description mb-4">
|
|
||||||
{description}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="card-text-description flex items-center justify-between text-xs mt-auto pt-1 md:pt-2">
|
|
||||||
<span class="inline-flex items-center">
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="16"
|
|
||||||
height="16"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
class="mr-1"
|
|
||||||
>
|
|
||||||
<path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"></path>
|
|
||||||
</svg>
|
|
||||||
{count}
|
|
||||||
</span>
|
|
||||||
<span class="inline-flex items-center">
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="16"
|
|
||||||
height="16"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
class="mr-1"
|
|
||||||
>
|
|
||||||
<circle cx="12" cy="12" r="10"></circle>
|
|
||||||
<polyline points="12 6 12 12 16 14"></polyline>
|
|
||||||
</svg>
|
|
||||||
{publishDate}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
@@ -1,59 +0,0 @@
|
|||||||
---
|
|
||||||
import { Icon } from 'astro-icon/components';
|
|
||||||
import { Image } from 'astro:assets';
|
|
||||||
|
|
||||||
import { getDirectusImageURL } from '@/support/url';
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
title: string;
|
|
||||||
subTitle: string;
|
|
||||||
url: string;
|
|
||||||
img?: string;
|
|
||||||
imgAlt?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const { title, subTitle, url, img, imgAlt } = Astro.props;
|
|
||||||
---
|
|
||||||
|
|
||||||
<div class="smooth-reveal flex flex-col mx-auto w-full">
|
|
||||||
<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"
|
|
||||||
href={url}
|
|
||||||
data-astro-prefetch
|
|
||||||
>
|
|
||||||
{img && (
|
|
||||||
<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"
|
|
||||||
src={getDirectusImageURL(img)}
|
|
||||||
alt={imgAlt}
|
|
||||||
draggable="false"
|
|
||||||
loading="lazy"
|
|
||||||
width="850"
|
|
||||||
height="420"
|
|
||||||
inferSize={true}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div class="bg-background-card md:bg-transparent group-hover:bg-neutral-100 md:group-hover:bg-transparent dark:group-hover:bg-neutral-800/90 md:dark:group-hover:bg-transparent rounded-b-2xl transition-all duration-300 p-6">
|
|
||||||
<h2 class="card-text-header mb-2">
|
|
||||||
{title}
|
|
||||||
</h2>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
@@ -1,44 +0,0 @@
|
|||||||
---
|
|
||||||
import ReadMoreButton from '@components/buttons/ReadMoreButton.astro';
|
|
||||||
import Logo from '@components/images/Logo.astro';
|
|
||||||
import { getDirectusImageURL } from '@/support/url';
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
title: string;
|
|
||||||
subTitle: string;
|
|
||||||
url: string;
|
|
||||||
logoLight: string;
|
|
||||||
logoDark?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const { title, subTitle, url, logoLight, logoDark} = Astro.props;
|
|
||||||
---
|
|
||||||
|
|
||||||
<div class="smooth-reveal w-full mx-auto">
|
|
||||||
<a
|
|
||||||
class="card-base group flex flex-row items-center justify-between w-full p-8 gap-6 md:gap-8"
|
|
||||||
href={url}
|
|
||||||
data-astro-prefetch
|
|
||||||
>
|
|
||||||
<div class="flex flex-row items-center ml-4">
|
|
||||||
<div class="card-hover-icon-scale shrink-0 mr-3">
|
|
||||||
<Logo
|
|
||||||
srcLight={getDirectusImageURL(logoLight)}
|
|
||||||
srcDark={getDirectusImageURL(logoDark!)}
|
|
||||||
alt={`Logo of ${title}`}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col gap-3 text-left ml-4">
|
|
||||||
<h2 class="card-text-header text-2xl md:text-3xl">
|
|
||||||
{title}
|
|
||||||
</h2>
|
|
||||||
<p class="card-text-title font-light text-pretty text-lg max-w-3xl">
|
|
||||||
{subTitle}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="hidden md:block shrink-0 mr-4">
|
|
||||||
<ReadMoreButton/>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
@@ -10,7 +10,7 @@ const { dayName, label, icon, temp } = Astro.props;
|
|||||||
---
|
---
|
||||||
|
|
||||||
<div class="smooth-reveal-2 group flex flex-col">
|
<div class="smooth-reveal-2 group flex flex-col">
|
||||||
<div class="card-base w-40">
|
<div class="card-base w-32 md:w-40">
|
||||||
<div class="p-5 text-center">
|
<div class="p-5 text-center">
|
||||||
<span class="card-text-description block font-bold text-xs uppercase tracking-widest">
|
<span class="card-text-description block font-bold text-xs uppercase tracking-widest">
|
||||||
{dayName}
|
{dayName}
|
||||||
|
|||||||
@@ -4,11 +4,12 @@ import { Image } from 'astro:assets';
|
|||||||
const { srcLight, srcDark, alt, style, width, height } = Astro.props;
|
const { srcLight, srcDark, alt, style, width, height } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="grid grid-cols-1 grid-rows-1">
|
<div class="themed-image-container">
|
||||||
<Image
|
<Image
|
||||||
src={srcLight}
|
src={srcLight}
|
||||||
alt={alt}
|
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}
|
width={width}
|
||||||
height={height}
|
height={height}
|
||||||
inferSize={true}
|
inferSize={true}
|
||||||
@@ -17,9 +18,29 @@ const { srcLight, srcDark, alt, style, width, height } = Astro.props;
|
|||||||
<Image
|
<Image
|
||||||
src={srcDark}
|
src={srcDark}
|
||||||
alt={alt}
|
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}
|
width={width}
|
||||||
height={height}
|
height={height}
|
||||||
inferSize={true}
|
inferSize={true}
|
||||||
/>
|
/>
|
||||||
</div>
|
</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>
|
||||||
|
|||||||
@@ -1,19 +1,17 @@
|
|||||||
---
|
---
|
||||||
import { readItems, readSingleton } from '@directus/sdk';
|
import { getCollection } from 'astro:content';
|
||||||
|
import { readItems } from '@directus/sdk';
|
||||||
|
|
||||||
import type { Post } from '@lib/directusTypes';
|
import type { Post } from '@lib/directusTypes';
|
||||||
|
|
||||||
import CategoryCard from '@components/cards/CategoryCard.astro';
|
import CategoryCard from '@components/cards/CategoryCard.astro';
|
||||||
import LargeCategoryCard from '@components/cards/LargeCategoryCard.astro';
|
|
||||||
import directus from '@lib/directus';
|
import directus from '@lib/directus';
|
||||||
import { timeago } from '@support/time';
|
import { timeago } from '@support/time';
|
||||||
|
|
||||||
const global = await directus.request(readSingleton('site_global'));
|
|
||||||
|
|
||||||
const posts = await directus.request(
|
const posts = await directus.request(
|
||||||
readItems('posts', {
|
readItems('posts', {
|
||||||
filter: { published: { _eq: true } },
|
filter: { published: { _eq: true } },
|
||||||
fields: ['*', { category: ['*'] }],
|
fields: ['*'],
|
||||||
sort: ['-published_date'],
|
sort: ['-published_date'],
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
@@ -34,21 +32,18 @@ const layoutPattern = [
|
|||||||
const postMap: Map<string, Post[]> = posts
|
const postMap: Map<string, Post[]> = posts
|
||||||
.sort((a: Post, b: Post) => b.published_date.valueOf() - a.published_date.valueOf())
|
.sort((a: Post, b: Post) => b.published_date.valueOf() - a.published_date.valueOf())
|
||||||
.reduce((acc, obj) => {
|
.reduce((acc, obj) => {
|
||||||
const categorySlug = obj.category?.slug;
|
let posts = acc.get(obj.category);
|
||||||
if (!categorySlug) return acc;
|
|
||||||
|
|
||||||
let posts = acc.get(categorySlug);
|
|
||||||
if (!posts) {
|
if (!posts) {
|
||||||
posts = [];
|
posts = [];
|
||||||
}
|
}
|
||||||
posts.push(obj);
|
posts.push(obj);
|
||||||
|
|
||||||
acc.set(categorySlug, posts);
|
acc.set(obj.category, posts);
|
||||||
|
|
||||||
return acc;
|
return acc;
|
||||||
}, new Map<string, Post[]>());
|
}, new Map<string, Post[]>());
|
||||||
|
|
||||||
const categories = (await directus.request(readItems('categories')))
|
const categories = (await getCollection('categories'))
|
||||||
.sort((a, b) => {
|
.sort((a, b) => {
|
||||||
const aCount = postMap.get(a.slug)?.length ?? 0;
|
const aCount = postMap.get(a.slug)?.length ?? 0;
|
||||||
const bCount = postMap.get(b.slug)?.length ?? 0;
|
const bCount = postMap.get(b.slug)?.length ?? 0;
|
||||||
@@ -57,12 +52,11 @@ const categories = (await directus.request(readItems('categories')))
|
|||||||
.map((c, index) => {
|
.map((c, index) => {
|
||||||
const posts = postMap.get(c.slug);
|
const posts = postMap.get(c.slug);
|
||||||
const pattern = layoutPattern[index % layoutPattern.length];
|
const pattern = layoutPattern[index % layoutPattern.length];
|
||||||
const smColSpan = Math.min(pattern.col, 1);
|
const smColSpan = Math.min(pattern.col, 2);
|
||||||
const mdColSpan = Math.min(pattern.col, 2);
|
const mdColSpan = Math.min(pattern.col, 4);
|
||||||
const lgColSpan = Math.min(pattern.col, 4);
|
|
||||||
const rowSpan = pattern.row;
|
const rowSpan = pattern.row;
|
||||||
const rowSpanClass = rowSpan > 1 ? `row-span-${rowSpan}` : 'row-span-1';
|
const rowSpanClass = rowSpan > 1 ? `row-span-${rowSpan}` : 'row-span-1';
|
||||||
const gridItemClass = `col-span-${smColSpan} md:col-span-${mdColSpan} lg:col-span-${lgColSpan} ${rowSpanClass}`;
|
const gridItemClass = `col-span-${smColSpan} md:col-span-${mdColSpan} ${rowSpanClass}`;
|
||||||
return {
|
return {
|
||||||
...c,
|
...c,
|
||||||
posts,
|
posts,
|
||||||
@@ -70,7 +64,6 @@ const categories = (await directus.request(readItems('categories')))
|
|||||||
layoutPattern: {
|
layoutPattern: {
|
||||||
smCol: smColSpan,
|
smCol: smColSpan,
|
||||||
mdCol: mdColSpan,
|
mdCol: mdColSpan,
|
||||||
lgCol: lgColSpan,
|
|
||||||
row: rowSpan,
|
row: rowSpan,
|
||||||
index,
|
index,
|
||||||
},
|
},
|
||||||
@@ -79,7 +72,7 @@ const categories = (await directus.request(readItems('categories')))
|
|||||||
---
|
---
|
||||||
|
|
||||||
<section class="mx-auto px-4 py-10 sm:px-6 lg:px-8 lg:py-14 lg:pt-10 2xl:max-w-full">
|
<section class="mx-auto px-4 py-10 sm:px-6 lg:px-8 lg:py-14 lg:pt-10 2xl:max-w-full">
|
||||||
<div class="grid grid-flow-row-dense grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
<div class="grid grid-flow-row-dense grid-cols-2 md:grid-cols-4 gap-4">
|
||||||
{categories.map((category) => {
|
{categories.map((category) => {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
@@ -88,26 +81,13 @@ const categories = (await directus.request(readItems('categories')))
|
|||||||
>
|
>
|
||||||
<CategoryCard
|
<CategoryCard
|
||||||
slug={category.slug}
|
slug={category.slug}
|
||||||
title={category.title}
|
title={category.data.title}
|
||||||
description={category.description}
|
description={category.data.description}
|
||||||
logoLight={category.logoLight}
|
|
||||||
logoDark={category.logoDark}
|
|
||||||
count={postMap.get(category.slug)?.length ?? 0}
|
count={postMap.get(category.slug)?.length ?? 0}
|
||||||
publishDate={timeago(postMap.get(category.slug)?.[0]?.published_date)}
|
publishDate={timeago(postMap.get(category.slug)?.[0]?.published_date)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
<div class="col-span-full mt-8">
|
|
||||||
<LargeCategoryCard
|
|
||||||
title="All Posts"
|
|
||||||
description="Here you can forgoe the organization and browse everything I've posted"
|
|
||||||
url="/all"
|
|
||||||
logoLight={global.all_logoLight}
|
|
||||||
logoDark={global.all_logoDark}
|
|
||||||
count={posts.length}
|
|
||||||
publishDate={timeago(posts[0]?.published_date)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@@ -7,37 +7,33 @@ import directus from '@lib/directus';
|
|||||||
const global = await directus.request(readSingleton('site_global'));
|
const global = await directus.request(readSingleton('site_global'));
|
||||||
---
|
---
|
||||||
|
|
||||||
<section class="max-w-340 2xl:max-w-full px-4 py-10 mx-auto mb-2 md:mb-8">
|
<section 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="flex items-center justify-center">
|
<div class="flex flex-col sm:flex-row items-center justify-center gap-y-2 sm:gap-x-12 sm:gap-y-0 lg:gap-x-24">
|
||||||
<div class="max-w-5xl">
|
<div class="max-w-5xl sm:px-6 lg:px-8">
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 lg:gap-6">
|
<div class="flex flex-wrap gap-6 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3 justify-center">
|
||||||
<FeaturesCard
|
<FeaturesCard
|
||||||
title="Cloud Engineer"
|
title="Cloud Engineer"
|
||||||
description="Full stack and cloud engineer."
|
description="Full stack and cloud engineer."
|
||||||
url="/about"
|
url="/about"
|
||||||
logoUrlLight="https://directus.alexlebens.net/assets/8e674299-2dfc-4ea3-8193-a1c4050bf06f?key=system-large-contain&v=2026-02-26T21%3A23%3A22.457Z"
|
logoUrlLight="https://img.icons8.com/cotton/64/cloud-development--v2.png"
|
||||||
logoUrlDark="https://directus.alexlebens.net/assets/cdd6efce-3231-4213-8b1e-cae9c1b3a18f?key=system-large-contain&v=2026-03-03T19%3A30%3A01.263Z"
|
|
||||||
/>
|
/>
|
||||||
<FeaturesCard
|
<FeaturesCard
|
||||||
title="Homelab"
|
title="Homelab"
|
||||||
description="Tinkering, testing, deploying, etc, etc ..."
|
description="Tinkering, testing, deploying, etc, etc ..."
|
||||||
url="/categories/homelab/"
|
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"
|
logoUrlLight="https://img.icons8.com/cotton/64/smart-home-connection.png"
|
||||||
logoUrlDark="https://directus.alexlebens.net/assets/33fb6b45-1834-44a0-bc04-692be4f6d4ce?key=system-large-contain&v=2026-03-03T19%3A30%3A37.961Z"
|
|
||||||
/>
|
/>
|
||||||
<FeaturesCard
|
<FeaturesCard
|
||||||
title="Documentation"
|
title="Documentation"
|
||||||
description="Reference and guides for my homelab."
|
description="Reference and guides for my homelab."
|
||||||
url="https://docs.alexlebens.dev"
|
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"
|
logoUrlLight="https://img.icons8.com/cotton/64/bookmarked-document--v1.png"
|
||||||
logoUrlDark="https://directus.alexlebens.net/assets/c49b40a9-ddf2-4fa2-ba35-6039682b93de?key=system-large-contain&v=2026-03-03T19%3A50%3A14.893Z"
|
|
||||||
/>
|
/>
|
||||||
<FeaturesCard
|
<FeaturesCard
|
||||||
title="Email"
|
title="Email"
|
||||||
description={`Send me a message.`}
|
description={`Send me a message.`}
|
||||||
url=`mailto:${global.email}`
|
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"
|
logoUrlLight="https://img.icons8.com/cotton/64/secured-letter--v3.png"
|
||||||
logoUrlDark="https://directus.alexlebens.net/assets/cdf2ea11-fcfc-41f1-a701-43084fb06efa?key=system-large-contain&v=2026-03-03T19%3A47%3A28.109Z"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,39 +1,23 @@
|
|||||||
---
|
---
|
||||||
import GoLinkPrimaryButton from '@components/buttons/GoLinkPrimaryButton.astro';
|
import GoLinkPrimaryButton from '@components/buttons/GoLinkPrimaryButton.astro';
|
||||||
import Logo from '@components/images/Logo.astro';
|
|
||||||
import { getDirectusImageURL } from '@/support/url';
|
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
title: string;
|
title: string;
|
||||||
subTitle: string;
|
subTitle: string;
|
||||||
logoExists?: boolean;
|
|
||||||
logoLight?: string;
|
|
||||||
logoDark?: string;
|
|
||||||
btnExists?: boolean;
|
btnExists?: boolean;
|
||||||
btnTitle?: string;
|
btnTitle?: string;
|
||||||
btnURL?: string;
|
btnURL?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const { title, subTitle, logoExists, logoLight, logoDark, btnExists, btnTitle, btnURL } = Astro.props;
|
const { title, subTitle, btnExists, btnTitle, btnURL } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<section class="mx-auto mt-10 px-4 sm:px-6 lg:px-8 lg:pt-10 2xl:max-w-full">
|
<section class="mx-auto mt-10 px-4 sm:px-6 lg:px-8 lg:pt-10 2xl:max-w-full">
|
||||||
<div class="flex-wrap md:flex md:items-center md:justify-between">
|
<div class="flex-wrap md:flex md:items-center md:justify-between">
|
||||||
<div class="w-full md:w-auto">
|
<div class="w-full md:w-auto">
|
||||||
<div class="smooth-reveal flex flex-row items-center mb-4">
|
<h1 class="smooth-reveal card-text-header block lg:text-6xl">
|
||||||
{logoExists ? (
|
{title}
|
||||||
<div class="shrink-0 mr-5">
|
</h1>
|
||||||
<Logo
|
|
||||||
srcLight={getDirectusImageURL(logoLight!)}
|
|
||||||
srcDark={getDirectusImageURL(logoDark!)}
|
|
||||||
alt={`Logo of ${title}`}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
<h1 class="card-text-header block lg:text-6xl">
|
|
||||||
{title}
|
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
<p class="smooth-reveal card-text-header-description mt-4">
|
<p class="smooth-reveal card-text-header-description mt-4">
|
||||||
{subTitle}
|
{subTitle}
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@@ -1,13 +1,8 @@
|
|||||||
---
|
---
|
||||||
import { Image } from 'astro:assets';
|
import { Image } from 'astro:assets';
|
||||||
import { readItems } from '@directus/sdk';
|
|
||||||
|
|
||||||
import type { HeaderImage } from '@lib/directusTypes';
|
|
||||||
|
|
||||||
import GoLinkPrimaryButton from '@components/buttons/GoLinkPrimaryButton.astro';
|
import GoLinkPrimaryButton from '@components/buttons/GoLinkPrimaryButton.astro';
|
||||||
import GoLinkSecondaryButton from '@components/buttons/GoLinkSecondaryButton.astro';
|
import GoLinkSecondaryButton from '@components/buttons/GoLinkSecondaryButton.astro';
|
||||||
import directus from '@lib/directus';
|
|
||||||
import { getDirectusImageURL } from '@/support/url';
|
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
title: string;
|
title: string;
|
||||||
@@ -16,24 +11,18 @@ interface Props {
|
|||||||
primaryBtnURL?: string;
|
primaryBtnURL?: string;
|
||||||
secondaryBtn?: string;
|
secondaryBtn?: string;
|
||||||
secondaryBtnURL?: string;
|
secondaryBtnURL?: string;
|
||||||
|
src?: any;
|
||||||
|
alt?: string;
|
||||||
|
rounded?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const { title, subTitle, primaryBtn, primaryBtnURL, secondaryBtn, secondaryBtnURL } = Astro.props;
|
const { title, subTitle, primaryBtn, primaryBtnURL, secondaryBtn, secondaryBtnURL, src, alt } = Astro.props;
|
||||||
|
|
||||||
const imagesData = ((await directus.request(
|
const roundedClasses = Astro.props.rounded ? "rounded-2xl" : null;
|
||||||
readItems('header_images', {
|
|
||||||
fields: ['*'],
|
|
||||||
})
|
|
||||||
)) as unknown) as HeaderImage[];
|
|
||||||
|
|
||||||
const images = await Promise.all(imagesData.map(async (img) => ({
|
|
||||||
...img,
|
|
||||||
src: await getDirectusImageURL(img.image)
|
|
||||||
})));
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<section class="grid md:grid-cols-2 md:items-center gap-4 md:gap-8 max-w-340 2xl:max-w-full px-4 py-14 sm:px-6 lg:px-8">
|
<section class="mx-auto grid max-w-340 gap-4 px-4 py-14 sm:px-6 md:grid-cols-2 md:items-center md:gap-8 lg:px-8 2xl:max-w-full">
|
||||||
<div class="md:ml-12">
|
<div>
|
||||||
<h1 class="smooth-reveal card-text-header block lg:text-7xl">
|
<h1 class="smooth-reveal card-text-header block lg:text-7xl">
|
||||||
<Fragment set:html={title} />
|
<Fragment set:html={title} />
|
||||||
</h1>
|
</h1>
|
||||||
@@ -47,54 +36,22 @@ const images = await Promise.all(imagesData.map(async (img) => ({
|
|||||||
{secondaryBtn && <GoLinkSecondaryButton title={secondaryBtn} url={secondaryBtnURL} />}
|
{secondaryBtn && <GoLinkSecondaryButton title={secondaryBtn} url={secondaryBtnURL} />}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="smooth-reveal-fade md:block w-full hidden md:mr-12">
|
|
||||||
<div
|
<div class="smooth-reveal-fade md:block w-full hidden">
|
||||||
class="flex justify-center w-full top-12 md:ml-4 overflow-hidden no-js-fallback"
|
<div class="flex justify-center w-full top-12 md:ml-4 overflow-hidden">
|
||||||
id="hero-image-container"
|
{src && alt && (
|
||||||
>
|
<Image
|
||||||
{images.map((img, index) => (
|
src={src}
|
||||||
<div
|
alt={alt}
|
||||||
class="hero-image hidden justify-center w-full h-full"
|
class={`h-full w-105 scale-100 object-cover object-center ${roundedClasses}`}
|
||||||
data-index={index}
|
draggable="false"
|
||||||
>
|
loading="eager"
|
||||||
<Image
|
format="webp"
|
||||||
class="h-full w-105 scale-100 object-cover object-center"
|
quality="low"
|
||||||
src={img.src}
|
widths={[840]}
|
||||||
alt={img.image_alt}
|
inferSize={true}
|
||||||
draggable="false"
|
/>
|
||||||
loading="eager"
|
)}
|
||||||
format="webp"
|
|
||||||
widths={[840]}
|
|
||||||
inferSize={true}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
<style>
|
|
||||||
.no-js-fallback .hero-image:first-child {
|
|
||||||
display: flex !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<script is:inline>
|
|
||||||
document.getElementById('hero-image-container')?.classList.remove('no-js-fallback');
|
|
||||||
</script>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<script>
|
|
||||||
document.addEventListener('astro:page-load', () => {
|
|
||||||
const container = document.getElementById('hero-image-container');
|
|
||||||
if (container) {
|
|
||||||
const images = container.querySelectorAll('.hero-image');
|
|
||||||
images.forEach(img => {
|
|
||||||
img.classList.remove('flex');
|
|
||||||
img.classList.add('hidden');
|
|
||||||
});
|
|
||||||
if (images.length > 0) {
|
|
||||||
const randomIndex = Math.floor(Math.random() * images.length);
|
|
||||||
images[randomIndex].classList.remove('hidden');
|
|
||||||
images[randomIndex].classList.add('flex');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|||||||
@@ -1,11 +1,7 @@
|
|||||||
---
|
---
|
||||||
import { readSingleton } from '@directus/sdk';
|
|
||||||
|
|
||||||
import type { Post } from '@lib/directusTypes';
|
import type { Post } from '@lib/directusTypes';
|
||||||
|
|
||||||
import BlogCard from '@components/cards/BlogCard.astro';
|
import BlogCard from '@components/cards/BlogCard.astro';
|
||||||
import LargeLinkCard from '@components/cards/LargeLinkCard.astro';
|
|
||||||
import directus from '@lib/directus';
|
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
posts: Post[];
|
posts: Post[];
|
||||||
@@ -13,8 +9,6 @@ interface Props {
|
|||||||
subTitle?: string;
|
subTitle?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const global = await directus.request(readSingleton('site_global'));
|
|
||||||
|
|
||||||
const { posts, title, subTitle } = Astro.props;
|
const { posts, title, subTitle } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -29,18 +23,7 @@ const { posts, title, subTitle } = Astro.props;
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||||
{posts.map((b) =>
|
{posts.map((b) => <BlogCard post={b} />)}
|
||||||
<BlogCard post={b} />
|
</div>
|
||||||
)}
|
|
||||||
<div class="col-span-full">
|
|
||||||
<LargeLinkCard
|
|
||||||
title="All Posts"
|
|
||||||
subTitle="Catch up on everything I've written"
|
|
||||||
url="/all"
|
|
||||||
logoLight={global.all_logoLight}
|
|
||||||
logoDark={global.all_logoDark}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@@ -11,10 +11,25 @@ interface Props {
|
|||||||
const { posts } = Astro.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 ? (
|
{posts.map((post, index) => index % 2 === 0 ? (
|
||||||
<LargeBlogLeftCard post={post}/>
|
<LargeBlogLeftCard
|
||||||
|
title={post.title}
|
||||||
|
subTitle={post.description}
|
||||||
|
url={`/blog/${post.slug}`}
|
||||||
|
img={post.image}
|
||||||
|
imgAlt={post.image_alt}
|
||||||
|
/>
|
||||||
) : (
|
) : (
|
||||||
<LargeBlogRightCard post={post}/>
|
<LargeBlogRightCard
|
||||||
|
title={post.title}
|
||||||
|
subTitle={post.description}
|
||||||
|
url={`/blog/${post.slug}`}
|
||||||
|
single={!post.image_second}
|
||||||
|
imgOne={post.image}
|
||||||
|
imgOneAlt={post.image_alt}
|
||||||
|
imgTwo={post?.image_second}
|
||||||
|
imgTwoAlt={post?.image_second_alt}
|
||||||
|
/>
|
||||||
))}
|
))}
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@@ -20,19 +20,17 @@ const { forecastDays, error } = await getFiveDayForecast(latitude, longitude, ti
|
|||||||
</div>
|
</div>
|
||||||
{error ? (
|
{error ? (
|
||||||
<div class="card-base p-10 text-accent text-center">
|
<div class="card-base p-10 text-accent text-center">
|
||||||
Sorry, {error.toLowerCase}
|
{error}
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div class="flex flex-wrap justify-center gap-4 lg:gap-6">
|
<div class="flex flex-wrap justify-center gap-4 lg:gap-6">
|
||||||
{forecastDays.map((forecastDay, index) => (
|
{forecastDays.map((forecastDay) => (
|
||||||
<div class={index === 3 ? "hidden min-[800px]:block" : index >= 4 ? "hidden min-[1100px]:block" : ""}>
|
<WeatherCard
|
||||||
<WeatherCard
|
dayName={forecastDay.dayName}
|
||||||
dayName={forecastDay.dayName}
|
label={forecastDay.label}
|
||||||
label={forecastDay.label}
|
icon={forecastDay.icon}
|
||||||
icon={forecastDay.icon}
|
temp={forecastDay.temp}
|
||||||
temp={forecastDay.temp}
|
/>
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -1,81 +0,0 @@
|
|||||||
---
|
|
||||||
import getReadingTime from 'reading-time';
|
|
||||||
|
|
||||||
import type { Post } from '@lib/directusTypes';
|
|
||||||
|
|
||||||
import Logo from '@components/images/Logo.astro';
|
|
||||||
import { formatShortDate, formatDate } from '@support/time';
|
|
||||||
import { getDirectusImageURL } from '@/support/url';
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
post: Post;
|
|
||||||
enableCategoryLink?: boolean;
|
|
||||||
dateFormat?: 'short' | 'long';
|
|
||||||
}
|
|
||||||
|
|
||||||
const { post, enableCategoryLink = true, dateFormat = 'short' } = Astro.props;
|
|
||||||
|
|
||||||
const readingTime = getReadingTime(post.content || '');
|
|
||||||
---
|
|
||||||
|
|
||||||
<ol class="flex items-center justify-start card-text-description text-sm whitespace-nowrap gap-2 sm:gap-0 overflow-hidden">
|
|
||||||
{post.category && (
|
|
||||||
<li class="inline-flex items-center">
|
|
||||||
{enableCategoryLink ? (
|
|
||||||
<a
|
|
||||||
class="inline-flex items-center hover:card-hover-text-description overflow-hidden"
|
|
||||||
href={`/categories/${post.category.slug}`}
|
|
||||||
data-astro-prefetch
|
|
||||||
>
|
|
||||||
<div class="flex flex-row items-center shrink-0">
|
|
||||||
<div class="mr-2">
|
|
||||||
<Logo
|
|
||||||
srcLight={getDirectusImageURL(post.category.logoLight)}
|
|
||||||
srcDark={getDirectusImageURL(post.category.logoDark)}
|
|
||||||
alt={`Logo of ${post.category.title}`}
|
|
||||||
width={18}
|
|
||||||
height={18}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{post.category.title}
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
) : (
|
|
||||||
<div class="inline-flex items-center overflow-hidden">
|
|
||||||
<div class="flex flex-row items-center shrink-0">
|
|
||||||
<div class="mr-2">
|
|
||||||
<Logo
|
|
||||||
srcLight={getDirectusImageURL(post.category.logoLight)}
|
|
||||||
srcDark={getDirectusImageURL(post.category.logoDark)}
|
|
||||||
alt={`Logo of ${post.category.title}`}
|
|
||||||
width={18}
|
|
||||||
height={18}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{post.category.title}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</li>
|
|
||||||
)}
|
|
||||||
<li class="inline-flex items-center">
|
|
||||||
<span class="shrink-0 mx-2">
|
|
||||||
/
|
|
||||||
</span>
|
|
||||||
</li>
|
|
||||||
<li class="inline-flex items-center">
|
|
||||||
<span class="shrink-0 overflow-hidden">
|
|
||||||
{dateFormat === 'short' ? formatShortDate(post.published_date) : formatDate(post.published_date)}
|
|
||||||
</span>
|
|
||||||
</li>
|
|
||||||
<li class="inline-flex items-center">
|
|
||||||
<span class="shrink-0 mx-2">
|
|
||||||
/
|
|
||||||
</span>
|
|
||||||
</li>
|
|
||||||
<li class="inline-flex items-center">
|
|
||||||
<span class="shrink-0 overflow-hidden">
|
|
||||||
{readingTime.minutes.toPrecision(1)} minutes
|
|
||||||
</span>
|
|
||||||
</li>
|
|
||||||
</ol>
|
|
||||||
4
src/content/categories/books.md
Normal file
4
src/content/categories/books.md
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
---
|
||||||
|
title: 'Books 📖'
|
||||||
|
description: 'Books I have read or listened to'
|
||||||
|
---
|
||||||
4
src/content/categories/cloud.md
Normal file
4
src/content/categories/cloud.md
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
---
|
||||||
|
title: 'Cloud ☁️'
|
||||||
|
description: "Its just someone else's server"
|
||||||
|
---
|
||||||
4
src/content/categories/homelab.md
Normal file
4
src/content/categories/homelab.md
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
---
|
||||||
|
title: 'Homelab 🏠'
|
||||||
|
description: 'What happens when rack servers find a home'
|
||||||
|
---
|
||||||
4
src/content/categories/kubernetes.md
Normal file
4
src/content/categories/kubernetes.md
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
---
|
||||||
|
title: 'Kubernetes ☸️'
|
||||||
|
description: 'The container orchestration system'
|
||||||
|
---
|
||||||
4
src/content/categories/life.md
Normal file
4
src/content/categories/life.md
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
---
|
||||||
|
title: 'Life 🏃🏻'
|
||||||
|
description: 'Just random musings on everyday stuff'
|
||||||
|
---
|
||||||
4
src/content/categories/minnesota.md
Normal file
4
src/content/categories/minnesota.md
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
---
|
||||||
|
title: 'Minnesota 🌳'
|
||||||
|
description: 'Land of 10,000 Lakes'
|
||||||
|
---
|
||||||
4
src/content/categories/postgresql.md
Normal file
4
src/content/categories/postgresql.md
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
---
|
||||||
|
title: 'PostgreSQL'
|
||||||
|
description: 'PostgreSQL is an open-source relational database management system (RDBMS)'
|
||||||
|
---
|
||||||
4
src/content/categories/python.md
Normal file
4
src/content/categories/python.md
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
---
|
||||||
|
title: 'Python 🐍'
|
||||||
|
description: 'Generally my go to language'
|
||||||
|
---
|
||||||
4
src/content/categories/tool.md
Normal file
4
src/content/categories/tool.md
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
---
|
||||||
|
title: 'Tool 🪜'
|
||||||
|
description: 'Usually just the software kind'
|
||||||
|
---
|
||||||
4
src/content/categories/whatis.md
Normal file
4
src/content/categories/whatis.md
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
---
|
||||||
|
title: 'What Is?'
|
||||||
|
description: 'A series on discovery'
|
||||||
|
---
|
||||||
12
src/content/config.ts
Normal file
12
src/content/config.ts
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
import { defineCollection, z } from 'astro:content';
|
||||||
|
|
||||||
|
const categoryCollection = defineCollection({
|
||||||
|
type: 'content',
|
||||||
|
schema: () =>
|
||||||
|
z.object({
|
||||||
|
title: z.string(),
|
||||||
|
description: z.string(),
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
export const collections = { categories: categoryCollection };
|
||||||
BIN
src/images/autumn_bench.png
Normal file
BIN
src/images/autumn_bench.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 MiB |
BIN
src/images/autumn_mountain.png
Normal file
BIN
src/images/autumn_mountain.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 MiB |
BIN
src/images/autumn_tree.png
Normal file
BIN
src/images/autumn_tree.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.8 MiB |
BIN
src/images/cedar_tree.png
Normal file
BIN
src/images/cedar_tree.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.5 MiB |
BIN
src/images/portrait.avif
Normal file
BIN
src/images/portrait.avif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
@@ -68,89 +68,90 @@ const normalizeTitle = !title ? global.name : `${title} | ${global.name}`;
|
|||||||
/>
|
/>
|
||||||
</head>
|
</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 -->
|
<!-- Sliding backgrounds -->
|
||||||
<div class="bg"/>
|
<div class="bg"/>
|
||||||
<div class="bg bg2"/>
|
<div class="bg bg2"/>
|
||||||
<div class="bg bg3"/>
|
<div class="bg bg3"/>
|
||||||
|
|
||||||
<!-- Fixed header -->
|
<!-- Layout -->
|
||||||
<Header />
|
<div class="grow w-full max-w-(--breakpoint-2xl) px-4 sm:px-6 lg:px-8 py-20 mx-auto">
|
||||||
|
|
||||||
<!-- Main body -->
|
<Header />
|
||||||
<div id="reset-scroll" class="mask-container w-screen h-screen overflow-y-auto overflow-x-hidden">
|
|
||||||
<main>
|
|
||||||
|
|
||||||
<!-- Content -->
|
<main class="has-js scroll-fade-container min-h-screen">
|
||||||
<div class="grow w-full max-w-(--breakpoint-2xl) px-4 sm:px-6 lg:px-8 py-20 mx-auto">
|
<slot />
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<Footer />
|
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
const resetScroll = () => {
|
document.addEventListener('astro:page-load', () => {
|
||||||
const scrollContainer = document.getElementById('reset-scroll');
|
const onScroll = () => {
|
||||||
if (scrollContainer) {
|
document.documentElement.style.setProperty('--scroll-offset', `${window.scrollY}px`);
|
||||||
scrollContainer.scrollTop = 0;
|
document.documentElement.classList.add('has-js');
|
||||||
}
|
};
|
||||||
};
|
|
||||||
resetScroll();
|
window.removeEventListener('scroll', onScroll);
|
||||||
document.addEventListener('astro:after-swap', resetScroll);
|
window.addEventListener('scroll', onScroll, { passive: true });
|
||||||
|
|
||||||
|
onScroll();
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
/* Fade away content below header when scrolling */
|
/* Fade away content below header when scrolling */
|
||||||
.mask-container {
|
.has-js .scroll-fade-container {
|
||||||
-webkit-mask-image: linear-gradient(
|
-webkit-mask-image: linear-gradient(
|
||||||
to bottom,
|
to bottom,
|
||||||
transparent 0px,
|
transparent 0px,
|
||||||
transparent 90px,
|
transparent 16px,
|
||||||
black 140px,
|
black 80px,
|
||||||
black 100%
|
black 100%
|
||||||
);
|
);
|
||||||
|
|
||||||
mask-image: linear-gradient(
|
mask-image: linear-gradient(
|
||||||
to bottom,
|
to bottom,
|
||||||
transparent 0px,
|
transparent 0px,
|
||||||
transparent 90px,
|
transparent 16px,
|
||||||
black 140px,
|
black 80px,
|
||||||
black 100%
|
black 100%
|
||||||
);
|
);
|
||||||
|
|
||||||
-webkit-mask-size: 100vw 100vh;
|
-webkit-mask-size: 100vw 100vh;
|
||||||
-webkit-mask-repeat: no-repeat;
|
-webkit-mask-repeat: no-repeat;
|
||||||
|
|
||||||
|
-webkit-mask-position-y: var(--scroll-offset);
|
||||||
|
mask-position-y: var(--scroll-offset);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Background that creates the "glimmer" effect */
|
/* Background that creates the "glimmer" effect */
|
||||||
.bg {
|
.bg {
|
||||||
animation: slide 25s ease-in-out infinite alternate;
|
animation: slide 20s ease-in-out infinite alternate;
|
||||||
background-image: linear-gradient(-55deg, var(--bg-primary) 33.3%, var(--bg-secondary) 33.3%, var(--bg-secondary) 66.6%, var(--bg-tertiary) 66.6%);
|
background-image: linear-gradient(-60deg, var(--bg-primary) 33.3%, var(--bg-secondary) 33.3%, var(--bg-secondary) 66.6%, var(--bg-tertiary) 66.6%);
|
||||||
filter: blur(40px);
|
filter: blur(80px);
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: -70%;
|
left: -50%;
|
||||||
right: -70%;
|
right: -50%;
|
||||||
opacity: .5;
|
opacity: .5;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
--bg-primary: #e5e5e5;
|
--bg-primary: #e5e5e5;
|
||||||
--bg-secondary: #dce3eb;
|
--bg-secondary: #d9d9d9;
|
||||||
--bg-tertiary: #f4f6f8;
|
--bg-tertiary: #ededed;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.dark) .bg {
|
:global(.dark) .bg {
|
||||||
--bg-primary: #3b3836;
|
--bg-primary: #292524;
|
||||||
--bg-secondary: #332f2e;
|
--bg-secondary: #44403c;
|
||||||
--bg-tertiary: #44403c;
|
--bg-tertiary: #57534e;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg2 {
|
.bg2 {
|
||||||
@@ -159,15 +160,15 @@ const normalizeTitle = !title ? global.name : `${title} | ${global.name}`;
|
|||||||
}
|
}
|
||||||
|
|
||||||
.bg3 {
|
.bg3 {
|
||||||
animation-duration: 20s;
|
animation-duration: 25s;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes slide {
|
@keyframes slide {
|
||||||
0% {
|
0% {
|
||||||
transform: translateX(-30%);
|
transform:translateX(-25%);
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
transform: translateX(30%);
|
transform:translateX(25%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -4,8 +4,6 @@ import type {
|
|||||||
Global,
|
Global,
|
||||||
Weather,
|
Weather,
|
||||||
Post,
|
Post,
|
||||||
Category,
|
|
||||||
HeaderImage,
|
|
||||||
Application,
|
Application,
|
||||||
Experience,
|
Experience,
|
||||||
Education,
|
Education,
|
||||||
@@ -20,8 +18,6 @@ type Schema = {
|
|||||||
site_global: Global;
|
site_global: Global;
|
||||||
site_weather: Weather;
|
site_weather: Weather;
|
||||||
posts: Post[];
|
posts: Post[];
|
||||||
categories: Category[];
|
|
||||||
header_images: HeaderImage[];
|
|
||||||
site_applications: Application;
|
site_applications: Application;
|
||||||
site_experience: Experience;
|
site_experience: Experience;
|
||||||
site_education: Education;
|
site_education: Education;
|
||||||
|
|||||||
@@ -10,10 +10,16 @@ export type Global = {
|
|||||||
site_url: string;
|
site_url: string;
|
||||||
rybbit_site_id: string;
|
rybbit_site_id: string;
|
||||||
logo: string;
|
logo: string;
|
||||||
all_logoLight: string;
|
|
||||||
all_logoDark: string;
|
|
||||||
portrait: string;
|
portrait: string;
|
||||||
portrait_alt: string;
|
portrait_alt: string;
|
||||||
|
home_image: string;
|
||||||
|
home_image_alt: string;
|
||||||
|
blog_image: string;
|
||||||
|
blog_image_alt: string;
|
||||||
|
categories_image: string;
|
||||||
|
categories_image_alt: string;
|
||||||
|
applications_image: string;
|
||||||
|
applications_image_alt: string;
|
||||||
footer_image: string;
|
footer_image: string;
|
||||||
footer_image_alt: string;
|
footer_image_alt: string;
|
||||||
};
|
};
|
||||||
@@ -31,7 +37,7 @@ export type Post = {
|
|||||||
title: string;
|
title: string;
|
||||||
description: string;
|
description: string;
|
||||||
tags: string[];
|
tags: string[];
|
||||||
category: Category;
|
category: string;
|
||||||
selected: boolean;
|
selected: boolean;
|
||||||
published: boolean;
|
published: boolean;
|
||||||
content: string;
|
content: string;
|
||||||
@@ -43,20 +49,6 @@ export type Post = {
|
|||||||
updated_date: Date;
|
updated_date: Date;
|
||||||
};
|
};
|
||||||
|
|
||||||
export type Category = {
|
|
||||||
slug: string;
|
|
||||||
title: string;
|
|
||||||
description: string;
|
|
||||||
logoLight: string;
|
|
||||||
logoDark: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
export type HeaderImage = {
|
|
||||||
id: string;
|
|
||||||
image: string;
|
|
||||||
image_alt: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
export type Application = {
|
export type Application = {
|
||||||
id: string;
|
id: string;
|
||||||
name: string;
|
name: string;
|
||||||
|
|||||||
@@ -9,6 +9,8 @@ import SkillsSliderSection from '@components/sections/SkillsSliderSection.astro'
|
|||||||
import BaseLayout from '@layouts/BaseLayout.astro';
|
import BaseLayout from '@layouts/BaseLayout.astro';
|
||||||
import directus from '@lib/directus';
|
import directus from '@lib/directus';
|
||||||
|
|
||||||
|
import portraitImg from '@images/portrait.avif';
|
||||||
|
|
||||||
const global = await directus.request(readSingleton('site_global'));
|
const global = await directus.request(readSingleton('site_global'));
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -35,6 +37,9 @@ const global = await directus.request(readSingleton('site_global'));
|
|||||||
<HeroSection
|
<HeroSection
|
||||||
title="About Me"
|
title="About Me"
|
||||||
subTitle={global.about}
|
subTitle={global.about}
|
||||||
|
src={portraitImg}
|
||||||
|
alt={global.portrait_alt}
|
||||||
|
rounded={true}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<section class="max-w-7xl px-4 sm:px-6 lg:px-8 py-10 lg:py-14 mx-auto">
|
<section class="max-w-7xl px-4 sm:px-6 lg:px-8 py-10 lg:py-14 mx-auto">
|
||||||
|
|||||||
@@ -1,107 +0,0 @@
|
|||||||
---
|
|
||||||
import { readItems, readSingleton } from '@directus/sdk';
|
|
||||||
|
|
||||||
import HeaderSection from '@components/sections/HeaderSection.astro';
|
|
||||||
import BlogCard from '@components/cards/BlogCard.astro';
|
|
||||||
import BaseLayout from '@layouts/BaseLayout.astro';
|
|
||||||
import directus from '@lib/directus';
|
|
||||||
|
|
||||||
const global = await directus.request(readSingleton('site_global'));
|
|
||||||
const posts = await directus.request(
|
|
||||||
readItems('posts', {
|
|
||||||
filter: { published: { _eq: true } },
|
|
||||||
fields: ['*', { category: ['*'] }],
|
|
||||||
sort: ['-published_date'],
|
|
||||||
})
|
|
||||||
);
|
|
||||||
---
|
|
||||||
|
|
||||||
<BaseLayout
|
|
||||||
title="All Posts"
|
|
||||||
description="Browse all articles from every category."
|
|
||||||
structuredData={{
|
|
||||||
'@context': 'https://schema.org',
|
|
||||||
'@type': 'WebPage',
|
|
||||||
inLanguage: 'en-US',
|
|
||||||
'@id': Astro.url.href,
|
|
||||||
url: Astro.url.href,
|
|
||||||
name: `All Posts | ${global.name}`,
|
|
||||||
description: "Browse all articles from every category.",
|
|
||||||
isPartOf: {
|
|
||||||
url: `${global.site_url}`,
|
|
||||||
name: global.name,
|
|
||||||
description: global.about,
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
|
|
||||||
<HeaderSection
|
|
||||||
title="All Posts"
|
|
||||||
subTitle="Browse all posts from every category."
|
|
||||||
btnExists
|
|
||||||
btnTitle="To Categories"
|
|
||||||
btnURL="/categories"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<section class="max-w-340 2xl:max-w-full mb-10 px-4 sm:px-6 lg:px-8 py-8 mx-auto mt-10">
|
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
||||||
{posts.map((b) =>
|
|
||||||
<BlogCard post={b} />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
</BaseLayout>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// Add smooth reveal animations for content after loading
|
|
||||||
document.addEventListener('astro:page-load', () => {
|
|
||||||
const animateContent = () => {
|
|
||||||
// Animate group 1
|
|
||||||
const smoothReveal = document.querySelectorAll('.smooth-reveal');
|
|
||||||
smoothReveal.forEach((el, index) => {
|
|
||||||
setTimeout(
|
|
||||||
() => {
|
|
||||||
el.classList.add('animate-reveal');
|
|
||||||
},
|
|
||||||
50 + index * 100
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Animate group 2
|
|
||||||
const smoothReveal2 = document.querySelectorAll('.smooth-reveal-2');
|
|
||||||
smoothReveal2.forEach((el, index) => {
|
|
||||||
setTimeout(
|
|
||||||
() => {
|
|
||||||
el.classList.add('animate-reveal');
|
|
||||||
},
|
|
||||||
200 + index * 150
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Animate topic cards with staggered delay
|
|
||||||
const smoothRevealCards = document.querySelectorAll('.smooth-reveal-cards');
|
|
||||||
smoothRevealCards.forEach((el, index) => {
|
|
||||||
setTimeout(
|
|
||||||
() => {
|
|
||||||
el.classList.add('animate-reveal');
|
|
||||||
},
|
|
||||||
500 + index * 100
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Animate with just fade in with staggered delay
|
|
||||||
const smoothRevealFade = document.querySelectorAll('.smooth-reveal-fade');
|
|
||||||
smoothRevealFade.forEach((el, index) => {
|
|
||||||
setTimeout(
|
|
||||||
() => {
|
|
||||||
el.classList.add('animate-reveal-fade');
|
|
||||||
},
|
|
||||||
100 + index * 250
|
|
||||||
);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
animateContent();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
@@ -6,6 +6,8 @@ import ApplicationSection from '@components/sections/ApplicationSection.astro';
|
|||||||
import BaseLayout from '@layouts/BaseLayout.astro';
|
import BaseLayout from '@layouts/BaseLayout.astro';
|
||||||
import directus from '@lib/directus';
|
import directus from '@lib/directus';
|
||||||
|
|
||||||
|
import applicationImg from '@images/cedar_tree.png';
|
||||||
|
|
||||||
const global = await directus.request(readSingleton('site_global'));
|
const global = await directus.request(readSingleton('site_global'));
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -32,6 +34,8 @@ const global = await directus.request(readSingleton('site_global'));
|
|||||||
<HeroSection
|
<HeroSection
|
||||||
title="Applications"
|
title="Applications"
|
||||||
subTitle={global.about_applications}
|
subTitle={global.about_applications}
|
||||||
|
src={applicationImg}
|
||||||
|
alt={global.applications_image_alt}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<ApplicationSection className="smooth-reveal-2" />
|
<ApplicationSection className="smooth-reveal-2" />
|
||||||
|
|||||||
@@ -1,24 +1,22 @@
|
|||||||
---
|
---
|
||||||
|
import { type CollectionEntry, getCollection } from 'astro:content';
|
||||||
import { Image } from 'astro:assets';
|
import { Image } from 'astro:assets';
|
||||||
|
import getReadingTime from 'reading-time';
|
||||||
import { marked } from 'marked';
|
import { marked } from 'marked';
|
||||||
import markedShiki from 'marked-shiki';
|
import markedShiki from 'marked-shiki';
|
||||||
import { createHighlighter } from 'shiki';
|
import { createHighlighter } from 'shiki';
|
||||||
import { readItems, readSingleton } from '@directus/sdk';
|
import { readItems, readSingleton } from '@directus/sdk';
|
||||||
import 'photoswipe/style.css';
|
|
||||||
|
|
||||||
import SocialShareButton from '@components/buttons/SocialShareButton.astro';
|
import SocialShareButton from '@components/buttons/SocialShareButton.astro';
|
||||||
import PostMetadataSnippet from '@/components/snippets/PostMetadataSnippet.astro';
|
|
||||||
import BaseLayout from '@layouts/BaseLayout.astro';
|
import BaseLayout from '@layouts/BaseLayout.astro';
|
||||||
import directus from '@lib/directus';
|
import directus from '@lib/directus';
|
||||||
|
import { formatDate } from '@support/time';
|
||||||
import { getDirectusImageURL } from '@/support/url';
|
import { getDirectusImageURL } from '@/support/url';
|
||||||
|
|
||||||
const post = Astro.props;
|
const post = Astro.props;
|
||||||
|
|
||||||
export async function getStaticPaths() {
|
export async function getStaticPaths() {
|
||||||
const posts = await directus.request(readItems('posts', {
|
const posts = await directus.request(readItems('posts'));
|
||||||
fields: ['*', { category: ['*'] }],
|
|
||||||
}));
|
|
||||||
return posts.map((post) => ({
|
return posts.map((post) => ({
|
||||||
params: { slug: post.slug },
|
params: { slug: post.slug },
|
||||||
props: post,
|
props: post,
|
||||||
@@ -26,6 +24,11 @@ export async function getStaticPaths() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const global = await directus.request(readSingleton('site_global'));
|
const global = await directus.request(readSingleton('site_global'));
|
||||||
|
const category: CollectionEntry<'categories'> = (await getCollection('categories'))
|
||||||
|
.filter((c) => c.slug === post.category)
|
||||||
|
.pop() as CollectionEntry<'categories'>;
|
||||||
|
|
||||||
|
const readingTime = getReadingTime(post.content);
|
||||||
|
|
||||||
const highlighter = await createHighlighter({
|
const highlighter = await createHighlighter({
|
||||||
themes: ['github-light', 'github-dark'],
|
themes: ['github-light', 'github-dark'],
|
||||||
@@ -45,7 +48,7 @@ marked.use(markedShiki({
|
|||||||
}
|
}
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const content = marked.parse(post.content || '');
|
const content = marked.parse(post.content);
|
||||||
---
|
---
|
||||||
|
|
||||||
<BaseLayout
|
<BaseLayout
|
||||||
@@ -96,12 +99,33 @@ const content = marked.parse(post.content || '');
|
|||||||
<h2 class="card-text-header block">
|
<h2 class="card-text-header block">
|
||||||
{post.title}
|
{post.title}
|
||||||
</h2>
|
</h2>
|
||||||
<div class="mt-4 sm:mt-6">
|
<ol class="flex items-center justify-center sm:justify-start whitespace-nowrap gap-2 sm:gap-0 mt-6 sm:mt-4">
|
||||||
<PostMetadataSnippet
|
<li class="inline-flex items-center">
|
||||||
post={post}
|
<a
|
||||||
dateFormat='long'
|
class="inline-flex items-center text-secondary hover:text-secondary-hover text-sm transition-all duration-300"
|
||||||
/>
|
href=`/categories/${category.slug}`
|
||||||
</div>
|
data-astro-prefetch
|
||||||
|
>
|
||||||
|
{category?.data?.title}
|
||||||
|
</a>
|
||||||
|
<span class="shrink-0 text-secondary text-sm mx-2 sm:mx-4">
|
||||||
|
/
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<li class="inline-flex items-center">
|
||||||
|
<span class="shrink-0 text-secondary text-sm">
|
||||||
|
{formatDate(post.published_date)}
|
||||||
|
</span>
|
||||||
|
<span class="shrink-0 text-secondary text-sm mx-2 sm:mx-4">
|
||||||
|
/
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<li class="inline-flex items-center">
|
||||||
|
<span class="shrink-0 text-secondary text-sm">
|
||||||
|
{readingTime.minutes.toPrecision(1)} minutes to read
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
</div>
|
</div>
|
||||||
<div class="border-t border-divider mt-10 mb-10"/>
|
<div class="border-t border-divider mt-10 mb-10"/>
|
||||||
|
|
||||||
@@ -141,40 +165,6 @@ const content = marked.parse(post.content || '');
|
|||||||
</BaseLayout>
|
</BaseLayout>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import PhotoSwipeLightbox from 'photoswipe/lightbox';
|
|
||||||
const prose = document.querySelector('.prose');
|
|
||||||
if (prose) {
|
|
||||||
const images = prose.querySelectorAll('img');
|
|
||||||
images.forEach((img) => {
|
|
||||||
if (img.closest('a')) return;
|
|
||||||
const link = document.createElement('a');
|
|
||||||
link.href = img.src;
|
|
||||||
link.dataset.pswpSrc = img.src;
|
|
||||||
link.dataset.pswpWidth = img.naturalWidth.toString();
|
|
||||||
link.dataset.pswpHeight = img.naturalHeight.toString();
|
|
||||||
link.target = '_blank';
|
|
||||||
link.classList.add('pswp-link');
|
|
||||||
|
|
||||||
img.parentNode?.insertBefore(link, img);
|
|
||||||
link.appendChild(img);
|
|
||||||
|
|
||||||
if (!img.complete) {
|
|
||||||
img.onload = () => {
|
|
||||||
link.dataset.pswpWidth = img.naturalWidth.toString();
|
|
||||||
link.dataset.pswpHeight = img.naturalHeight.toString();
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const lightbox = new PhotoSwipeLightbox({
|
|
||||||
gallery: prose,
|
|
||||||
children: 'a.pswp-link',
|
|
||||||
pswpModule: () => import('photoswipe'),
|
|
||||||
});
|
|
||||||
|
|
||||||
lightbox.init();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add smooth reveal animations for content after loading
|
// Add smooth reveal animations for content after loading
|
||||||
document.addEventListener('astro:page-load', () => {
|
document.addEventListener('astro:page-load', () => {
|
||||||
const animateContent = () => {
|
const animateContent = () => {
|
||||||
|
|||||||
@@ -9,16 +9,18 @@ import RecentPostsSection from '@components/sections/RecentPostsSection.astro';
|
|||||||
import BaseLayout from '@layouts/BaseLayout.astro';
|
import BaseLayout from '@layouts/BaseLayout.astro';
|
||||||
import directus from '@lib/directus';
|
import directus from '@lib/directus';
|
||||||
|
|
||||||
|
import blogImg from '@images/autumn_tree.png';
|
||||||
|
|
||||||
const global = await directus.request(readSingleton('site_global'));
|
const global = await directus.request(readSingleton('site_global'));
|
||||||
const posts = await directus.request(
|
const posts = await directus.request(
|
||||||
readItems('posts', {
|
readItems('posts', {
|
||||||
filter: { published: { _eq: true } },
|
filter: { published: { _eq: true } },
|
||||||
fields: ['*', { category: ['*'] }],
|
fields: ['*'],
|
||||||
sort: ['-published_date'],
|
sort: ['-published_date'],
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
|
|
||||||
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(
|
const recentPosts: Post[] = posts.filter(
|
||||||
(p) => !selectedPosts.some((selected) => selected.slug === p.slug)
|
(p) => !selectedPosts.some((selected) => selected.slug === p.slug)
|
||||||
).slice(0, 9);
|
).slice(0, 9);
|
||||||
@@ -47,6 +49,8 @@ const recentPosts: Post[] = posts.filter(
|
|||||||
<HeroSection
|
<HeroSection
|
||||||
title="Blog"
|
title="Blog"
|
||||||
subTitle={global.about_blog}
|
subTitle={global.about_blog}
|
||||||
|
src={blogImg}
|
||||||
|
alt={global.blog_image_alt}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<SelectedPostsSection posts={selectedPosts} />
|
<SelectedPostsSection posts={selectedPosts} />
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
---
|
---
|
||||||
|
import { getCollection } from 'astro:content';
|
||||||
import { readItems, readSingleton } from '@directus/sdk';
|
import { readItems, readSingleton } from '@directus/sdk';
|
||||||
|
|
||||||
import type { Post } from '@lib/directusTypes';
|
import type { Post } from '@lib/directusTypes';
|
||||||
@@ -8,13 +9,13 @@ import BlogCard from '@components/cards/BlogCard.astro';
|
|||||||
import BaseLayout from '@layouts/BaseLayout.astro';
|
import BaseLayout from '@layouts/BaseLayout.astro';
|
||||||
import directus from '@lib/directus';
|
import directus from '@lib/directus';
|
||||||
|
|
||||||
const category = Astro.props;
|
const { category } = Astro.props;
|
||||||
|
|
||||||
export async function getStaticPaths() {
|
export async function getStaticPaths() {
|
||||||
const categories = await directus.request(readItems('categories'));
|
const categories = await getCollection('categories');
|
||||||
return categories.map((category) => ({
|
return categories.map((category) => ({
|
||||||
params: { slug: category.slug },
|
params: { slug: category.slug },
|
||||||
props: category,
|
props: { category },
|
||||||
}));
|
}));
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -22,7 +23,7 @@ const global = await directus.request(readSingleton('site_global'));
|
|||||||
const posts = await directus.request(
|
const posts = await directus.request(
|
||||||
readItems('posts', {
|
readItems('posts', {
|
||||||
filter: { published: { _eq: true } },
|
filter: { published: { _eq: true } },
|
||||||
fields: ['*', { category: ['*'] }],
|
fields: ['*'],
|
||||||
sort: ['-published_date'],
|
sort: ['-published_date'],
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
@@ -30,21 +31,21 @@ const posts = await directus.request(
|
|||||||
const categoriesPosts = posts
|
const categoriesPosts = posts
|
||||||
.sort((a: Post, b: Post) => b.published_date.valueOf() - a.published_date.valueOf())
|
.sort((a: Post, b: Post) => b.published_date.valueOf() - a.published_date.valueOf())
|
||||||
.filter((b) => {
|
.filter((b) => {
|
||||||
return b.category?.slug === category.slug;
|
return b.category === category.slug;
|
||||||
});
|
});
|
||||||
---
|
---
|
||||||
|
|
||||||
<BaseLayout
|
<BaseLayout
|
||||||
title={category.title}
|
title={category.data.title}
|
||||||
description={category.description}
|
description={category.data.description}
|
||||||
structuredData={{
|
structuredData={{
|
||||||
'@context': 'https://schema.org',
|
'@context': 'https://schema.org',
|
||||||
'@type': 'WebPage',
|
'@type': 'WebPage',
|
||||||
inLanguage: 'en-US',
|
inLanguage: 'en-US',
|
||||||
'@id': Astro.url.href,
|
'@id': Astro.url.href,
|
||||||
url: Astro.url.href,
|
url: Astro.url.href,
|
||||||
name: `${category.title} | ${global.name}`,
|
name: `${category.data.title} | ${global.name}`,
|
||||||
description: category.description,
|
description: category.data.description,
|
||||||
isPartOf: {
|
isPartOf: {
|
||||||
url: `${global.site_url}/categories`,
|
url: `${global.site_url}/categories`,
|
||||||
name: global.name,
|
name: global.name,
|
||||||
@@ -54,77 +55,19 @@ const categoriesPosts = posts
|
|||||||
>
|
>
|
||||||
|
|
||||||
<HeaderSection
|
<HeaderSection
|
||||||
title=`${category.title}`
|
title={category.data.title}
|
||||||
subTitle={category.description}
|
subTitle={category.data.description}
|
||||||
logoExists
|
|
||||||
logoLight={category.logoLight}
|
|
||||||
logoDark={category.logoDark}
|
|
||||||
btnExists
|
btnExists
|
||||||
btnTitle="Back to Categories"
|
btnTitle="Back to Categories"
|
||||||
btnURL="/categories"
|
btnURL="/categories"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<section class="max-w-340 2xl:max-w-full mb-10 px-4 sm:px-6 lg:px-8 py-8 mx-auto mt-10">
|
<section class="max-w-340 2xl:max-w-full mb-10 px-4 sm:px-6 lg:px-8 py-8 mx-auto mt-10">
|
||||||
<div class="columns-1 sm:columns-2 lg:columns-3 gap-6">
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
{categoriesPosts.map((b) =>
|
{categoriesPosts.map((b) =>
|
||||||
<div class="break-inside-avoid mb-6">
|
<BlogCard post={b} />
|
||||||
<BlogCard post={b} />
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
</BaseLayout>
|
</BaseLayout>
|
||||||
|
|
||||||
<script>
|
|
||||||
// Add smooth reveal animations for content after loading
|
|
||||||
document.addEventListener('astro:page-load', () => {
|
|
||||||
const animateContent = () => {
|
|
||||||
// Animate group 1
|
|
||||||
const smoothReveal = document.querySelectorAll('.smooth-reveal');
|
|
||||||
smoothReveal.forEach((el, index) => {
|
|
||||||
setTimeout(
|
|
||||||
() => {
|
|
||||||
el.classList.add('animate-reveal');
|
|
||||||
},
|
|
||||||
50 + index * 100
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Animate group 2
|
|
||||||
const smoothReveal2 = document.querySelectorAll('.smooth-reveal-2');
|
|
||||||
smoothReveal2.forEach((el, index) => {
|
|
||||||
setTimeout(
|
|
||||||
() => {
|
|
||||||
el.classList.add('animate-reveal');
|
|
||||||
},
|
|
||||||
200 + index * 150
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Animate topic cards with staggered delay
|
|
||||||
const smoothRevealCards = document.querySelectorAll('.smooth-reveal-cards');
|
|
||||||
smoothRevealCards.forEach((el, index) => {
|
|
||||||
setTimeout(
|
|
||||||
() => {
|
|
||||||
el.classList.add('animate-reveal');
|
|
||||||
},
|
|
||||||
500 + index * 100
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Animate with just fade in with staggered delay
|
|
||||||
const smoothRevealFade = document.querySelectorAll('.smooth-reveal-fade');
|
|
||||||
smoothRevealFade.forEach((el, index) => {
|
|
||||||
setTimeout(
|
|
||||||
() => {
|
|
||||||
el.classList.add('animate-reveal-fade');
|
|
||||||
},
|
|
||||||
100 + index * 250
|
|
||||||
);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
animateContent();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|||||||
@@ -6,6 +6,8 @@ import CategorySection from '@components/sections/CategorySection.astro';
|
|||||||
import BaseLayout from '@layouts/BaseLayout.astro';
|
import BaseLayout from '@layouts/BaseLayout.astro';
|
||||||
import directus from '@lib/directus';
|
import directus from '@lib/directus';
|
||||||
|
|
||||||
|
import categoryImg from '@images/autumn_bench.png';
|
||||||
|
|
||||||
const global = await directus.request(readSingleton('site_global'));
|
const global = await directus.request(readSingleton('site_global'));
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -32,6 +34,8 @@ const global = await directus.request(readSingleton('site_global'));
|
|||||||
<HeroSection
|
<HeroSection
|
||||||
title="Categories"
|
title="Categories"
|
||||||
subTitle={global.about_categories}
|
subTitle={global.about_categories}
|
||||||
|
src={categoryImg}
|
||||||
|
alt={global.categories_image_alt}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<CategorySection />
|
<CategorySection />
|
||||||
|
|||||||
@@ -11,12 +11,14 @@ import GiteaSection from '@components/sections/GiteaSection.astro';
|
|||||||
import BaseLayout from '@layouts/BaseLayout.astro';
|
import BaseLayout from '@layouts/BaseLayout.astro';
|
||||||
import directus from '@lib/directus';
|
import directus from '@lib/directus';
|
||||||
|
|
||||||
|
import homeImg from '@images/autumn_mountain.png';
|
||||||
|
|
||||||
const global = await directus.request(readSingleton('site_global'));
|
const global = await directus.request(readSingleton('site_global'));
|
||||||
const weather = await directus.request(readSingleton('site_weather'));
|
const weather = await directus.request(readSingleton('site_weather'));
|
||||||
const posts = await directus.request(
|
const posts = await directus.request(
|
||||||
readItems('posts', {
|
readItems('posts', {
|
||||||
filter: { published: { _eq: true } },
|
filter: { published: { _eq: true } },
|
||||||
fields: ['*', { category: ['*'] }],
|
fields: ['*'],
|
||||||
sort: ['-published_date'],
|
sort: ['-published_date'],
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
@@ -51,6 +53,8 @@ const recentPosts = posts
|
|||||||
subTitle={global.about_description}
|
subTitle={global.about_description}
|
||||||
primaryBtn="About Me"
|
primaryBtn="About Me"
|
||||||
primaryBtnURL="/about"
|
primaryBtnURL="/about"
|
||||||
|
src={homeImg}
|
||||||
|
alt={global.home_image_alt}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<FeatureSection />
|
<FeatureSection />
|
||||||
|
|||||||
@@ -4,8 +4,6 @@ import rss, { type RSSFeedItem } from '@astrojs/rss';
|
|||||||
import type { APIContext } from 'astro';
|
import type { APIContext } from 'astro';
|
||||||
import { transform, walk } from 'ultrahtml';
|
import { transform, walk } from 'ultrahtml';
|
||||||
import sanitize from 'ultrahtml/transformers/sanitize';
|
import sanitize from 'ultrahtml/transformers/sanitize';
|
||||||
import MarkdownIt from 'markdown-it';
|
|
||||||
|
|
||||||
import { readItems, readSingleton } from '@directus/sdk';
|
import { readItems, readSingleton } from '@directus/sdk';
|
||||||
|
|
||||||
import directus from '@lib/directus';
|
import directus from '@lib/directus';
|
||||||
@@ -14,8 +12,6 @@ const global = await directus.request(readSingleton('site_global'));
|
|||||||
|
|
||||||
export async function GET(context: APIContext) {
|
export async function GET(context: APIContext) {
|
||||||
let baseUrl = context.site?.href || global.site_url;
|
let baseUrl = context.site?.href || global.site_url;
|
||||||
const parser = new MarkdownIt();
|
|
||||||
|
|
||||||
if (baseUrl.at(-1) === '/') {
|
if (baseUrl.at(-1) === '/') {
|
||||||
baseUrl = baseUrl.slice(0, -1);
|
baseUrl = baseUrl.slice(0, -1);
|
||||||
}
|
}
|
||||||
@@ -30,7 +26,7 @@ export async function GET(context: APIContext) {
|
|||||||
|
|
||||||
const feedItems: RSSFeedItem[] = [];
|
const feedItems: RSSFeedItem[] = [];
|
||||||
for (const post of posts) {
|
for (const post of posts) {
|
||||||
const content = await transform(parser.render(post.content), [
|
const content = await transform(post.content.replace(/^<!DOCTYPE html>/, ''), [
|
||||||
async (node) => {
|
async (node) => {
|
||||||
await walk(node, (node) => {
|
await walk(node, (node) => {
|
||||||
if (node.name === 'a' && node.attributes.href?.startsWith('/')) {
|
if (node.name === 'a' && node.attributes.href?.startsWith('/')) {
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
@import 'tailwindcss';
|
@import 'tailwindcss';
|
||||||
|
@import 'preline/variants.css';
|
||||||
@import './utilities.css';
|
@import './utilities.css';
|
||||||
|
|
||||||
@plugin '@tailwindcss/typography';
|
@plugin '@tailwindcss/typography';
|
||||||
@@ -39,10 +40,10 @@
|
|||||||
|
|
||||||
/* Object colors */
|
/* Object colors */
|
||||||
--color-background: light-dark(var(--color-neutral-200), var(--color-stone-700));
|
--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-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 {
|
@layer base {
|
||||||
|
|||||||
@@ -76,7 +76,7 @@
|
|||||||
@utility card-hover-icon-scale {
|
@utility card-hover-icon-scale {
|
||||||
@apply transition-transform duration-300 will-change-transform
|
@apply transition-transform duration-300 will-change-transform
|
||||||
drop-shadow-md dark:drop-shadow-xl dark:drop-shadow-neutral-500/60
|
drop-shadow-md dark:drop-shadow-xl dark:drop-shadow-neutral-500/60
|
||||||
group-hover:scale-3d group-hover:scale-105
|
group-hover:scale-3d group-hover:scale-110
|
||||||
}
|
}
|
||||||
|
|
||||||
@utility card-text-header {
|
@utility card-text-header {
|
||||||
@@ -127,11 +127,6 @@
|
|||||||
@apply text-secondary
|
@apply text-secondary
|
||||||
}
|
}
|
||||||
|
|
||||||
@utility card-hover-text-description {
|
|
||||||
@apply transition-all duration-300
|
|
||||||
text-secondary-hover
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Misc */
|
/* Misc */
|
||||||
@utility nav-base {
|
@utility nav-base {
|
||||||
@apply border border-neutral-100 dark:border-stone-500/20
|
@apply border border-neutral-100 dark:border-stone-500/20
|
||||||
|
|||||||
21
src/support/paths.ts
Normal file
21
src/support/paths.ts
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
import { join } from 'node:path';
|
||||||
|
|
||||||
|
function resolveFilePath(path: string) {
|
||||||
|
if (path.startsWith('/')) {
|
||||||
|
return resolveFilePathPublic(path);
|
||||||
|
}
|
||||||
|
|
||||||
|
return resolveFilePathInternal(path);
|
||||||
|
}
|
||||||
|
|
||||||
|
function resolveFilePathPublic(path: string) {
|
||||||
|
return join(process.cwd(), path);
|
||||||
|
}
|
||||||
|
|
||||||
|
function resolveFilePathInternal(path: string) {
|
||||||
|
const normalizePath = path.startsWith('@') ? path.replace('@', '') : path;
|
||||||
|
|
||||||
|
return join(process.cwd(), 'src/', normalizePath);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { resolveFilePath, resolveFilePathPublic, resolveFilePathInternal };
|
||||||
@@ -39,11 +39,4 @@ function formatDate(date: Date): string {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
function formatShortDate(date: Date): string {
|
export { formatDate, timeago };
|
||||||
return new Date(date).toLocaleDateString('en-US', {
|
|
||||||
month: 'short',
|
|
||||||
day: 'numeric',
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
export { formatDate, formatShortDate, timeago };
|
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ const getSiteURL = () => {
|
|||||||
return 'https://www.alexlebens.dev';
|
return 'https://www.alexlebens.dev';
|
||||||
};
|
};
|
||||||
|
|
||||||
function getDirectusImageURL(image: string) {
|
async function getDirectusImageURL(image: string) {
|
||||||
return `${getDirectusURL()}/assets/${image}`;
|
return `${getDirectusURL()}/assets/${image}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user