Merge pull request #1 from twhite96/upgrade-astro-paper
Upgrade Astro and Astro Paper to v5
This commit is contained in:
tiff
GitHub
commit
7e891cedb4
20
.gitignore
vendored
20
.gitignore
vendored
@ -1,6 +1,8 @@
|
||||
# build output
|
||||
dist/
|
||||
.output/
|
||||
|
||||
# generated types
|
||||
.astro/
|
||||
|
||||
# dependencies
|
||||
node_modules/
|
||||
@ -11,7 +13,6 @@ yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
|
||||
# environment variables
|
||||
.env
|
||||
.env.production
|
||||
@ -19,14 +20,9 @@ pnpm-debug.log*
|
||||
# macOS-specific files
|
||||
.DS_Store
|
||||
|
||||
# ignore .astro directory
|
||||
.astro
|
||||
# jetbrains setting folder
|
||||
.idea/
|
||||
|
||||
# yarn
|
||||
.yarn/*
|
||||
!.yarn/patches
|
||||
!.yarn/plugins
|
||||
!.yarn/releases
|
||||
!.yarn/sdks
|
||||
!.yarn/versions
|
||||
.pnp.*
|
||||
# pagefind
|
||||
|
||||
public/pagefind
|
||||
@ -7,7 +7,8 @@
|
||||
!/.github
|
||||
!tsconfig.json
|
||||
!astro.config.ts
|
||||
!.prettierrc.mjs
|
||||
!package.json
|
||||
!.prettierrc
|
||||
!eslint.config.mjs
|
||||
!eslint.config.js
|
||||
!README.md
|
||||
22
.prettierrc.mjs
Normal file
22
.prettierrc.mjs
Normal file
@ -0,0 +1,22 @@
|
||||
/** @type {import("prettier").Config} */
|
||||
export default {
|
||||
arrowParens: "avoid",
|
||||
semi: true,
|
||||
tabWidth: 2,
|
||||
printWidth: 80,
|
||||
singleQuote: false,
|
||||
jsxSingleQuote: false,
|
||||
trailingComma: "es5",
|
||||
bracketSpacing: true,
|
||||
endOfLine: "lf",
|
||||
plugins: ["prettier-plugin-astro", "prettier-plugin-tailwindcss"],
|
||||
tailwindStylesheet: "./src/styles/global.css",
|
||||
overrides: [
|
||||
{
|
||||
files: "*.astro",
|
||||
options: {
|
||||
parser: "astro",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
42
CHANGELOG.md
42
CHANGELOG.md
@ -2,6 +2,48 @@
|
||||
|
||||
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
||||
|
||||
## v5.0.0 (2025-03-08)
|
||||
|
||||
### Feat
|
||||
|
||||
- add pagefind for static search (#458)
|
||||
- update back button logic
|
||||
|
||||
### Fix
|
||||
|
||||
- ignore in eslint
|
||||
- update blog table padding
|
||||
- remove unused back url in the card url
|
||||
- show light/dark button according to site setting
|
||||
- add author url in Google JSON-LD conditionally
|
||||
|
||||
### Refactor
|
||||
|
||||
- remove react dependency for UI interactions (#457)
|
||||
- separate config and constants
|
||||
- update import alias in files
|
||||
- update blog directory to `src/data/blog`
|
||||
|
||||
|
||||
- upgrade to Tailwind CSS v4
|
||||
- update import alias to `@/*`
|
||||
- upgrade Astro to v5 and related packages
|
||||
|
||||
## v4.8.0 (2025-02-08)
|
||||
|
||||
### Feat
|
||||
|
||||
- add pencil icon before suggestion changes text (#405)
|
||||
|
||||
### Fix
|
||||
|
||||
- use tag name for display in tags page (#438)
|
||||
- exclude `/archives` from sitemap if it is disabled (#425)
|
||||
- add inline-block class to post title for improved view transition animation (#420)
|
||||
- sort archive posts by pubDatetime (#415)
|
||||
- focus search input on mount (#414)
|
||||
- replace twitter with x (#407)
|
||||
|
||||
## v4.7.0 (2024-10-15)
|
||||
|
||||
### Feat
|
||||
|
||||
15
Dockerfile
15
Dockerfile
@ -1,12 +1,17 @@
|
||||
# Base stage for building the static files
|
||||
FROM node:lts AS base
|
||||
WORKDIR /app
|
||||
COPY package*.json ./
|
||||
RUN npm install
|
||||
|
||||
# Install pnpm
|
||||
RUN corepack enable && corepack prepare pnpm@latest --activate
|
||||
|
||||
COPY package.json pnpm-lock.yaml ./
|
||||
RUN pnpm install --frozen-lockfile
|
||||
|
||||
COPY . .
|
||||
RUN npm run build
|
||||
RUN pnpm run build
|
||||
|
||||
# Runtime stage for serving the application
|
||||
FROM nginx:mainline-alpine-slim AS runtime
|
||||
COPY --from=base ./app/dist /usr/share/nginx/html
|
||||
EXPOSE 80
|
||||
COPY --from=base /app/dist /usr/share/nginx/html
|
||||
EXPOSE 80
|
||||
|
||||
76
README.md
76
README.md
@ -9,9 +9,7 @@
|
||||
|
||||
AstroPaper is a minimal, responsive, accessible and SEO-friendly Astro blog theme. This theme is designed and crafted based on [my personal blog](https://satnaing.dev/blog).
|
||||
|
||||
This theme follows best practices and provides accessibility out of the box. Light and dark mode are supported by default. Moreover, additional color schemes can also be configured.
|
||||
|
||||
This theme is self-documented \_ which means articles/posts in this theme can also be considered as documentations. Read [the blog posts](https://astro-paper.pages.dev/posts/) or check [the README Documentation Section](#-documentation) for more info.
|
||||
Read [the blog posts](https://astro-paper.pages.dev/posts/) or check [the README Documentation Section](#-documentation) for more info.
|
||||
|
||||
## 🔥 Features
|
||||
|
||||
@ -46,55 +44,52 @@ Inside of AstroPaper, you'll see the following folders and files:
|
||||
/
|
||||
├── public/
|
||||
│ ├── assets/
|
||||
│ │ └── logo.svg
|
||||
│ │ └── logo.png
|
||||
| ├── pagefind/ # auto-generated when build
|
||||
│ └── favicon.svg
|
||||
│ └── astropaper-og.jpg
|
||||
│ └── robots.txt
|
||||
│ └── favicon.svg
|
||||
│ └── toggle-theme.js
|
||||
├── src/
|
||||
│ ├── assets/
|
||||
│ │ └── socialIcons.ts
|
||||
│ │ └── icons/
|
||||
│ │ └── images/
|
||||
│ ├── components/
|
||||
│ ├── content/
|
||||
│ │ | blog/
|
||||
│ │ | └── some-blog-posts.md
|
||||
│ │ └── config.ts
|
||||
│ ├── data/
|
||||
│ │ └── blog/
|
||||
│ │ └── some-blog-posts.md
|
||||
│ ├── layouts/
|
||||
│ └── pages/
|
||||
│ └── styles/
|
||||
│ └── utils/
|
||||
│ └── config.ts
|
||||
│ └── types.ts
|
||||
└── package.json
|
||||
│ └── constants.ts
|
||||
│ └── content.config.ts
|
||||
└── astro.config.ts
|
||||
```
|
||||
|
||||
Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
|
||||
|
||||
Any static assets, like images, can be placed in the `public/` directory.
|
||||
|
||||
All blog posts are stored in `src/content/blog` directory.
|
||||
All blog posts are stored in `src/data/blog` directory.
|
||||
|
||||
## 📖 Documentation
|
||||
|
||||
Documentation can be read in two formats\_ _markdown_ & _blog post_.
|
||||
|
||||
- Configuration - [markdown](src/content/blog/how-to-configure-astropaper-theme.md) | [blog post](https://astro-paper.pages.dev/posts/how-to-configure-astropaper-theme/)
|
||||
- Add Posts - [markdown](src/content/blog/adding-new-post.md) | [blog post](https://astro-paper.pages.dev/posts/adding-new-posts-in-astropaper-theme/)
|
||||
- Customize Color Schemes - [markdown](src/content/blog/customizing-astropaper-theme-color-schemes.md) | [blog post](https://astro-paper.pages.dev/posts/customizing-astropaper-theme-color-schemes/)
|
||||
- Predefined Color Schemes - [markdown](src/content/blog/predefined-color-schemes.md) | [blog post](https://astro-paper.pages.dev/posts/predefined-color-schemes/)
|
||||
|
||||
> For AstroPaper v1, check out [this branch](https://github.com/satnaing/astro-paper/tree/astro-paper-v1) and this [live URL](https://astro-paper-v1.astro-paper.pages.dev/)
|
||||
- Configuration - [markdown](src/data/blog/how-to-configure-astropaper-theme.md) | [blog post](https://astro-paper.pages.dev/posts/how-to-configure-astropaper-theme/)
|
||||
- Add Posts - [markdown](src/data/blog/adding-new-post.md) | [blog post](https://astro-paper.pages.dev/posts/adding-new-posts-in-astropaper-theme/)
|
||||
- Customize Color Schemes - [markdown](src/data/blog/customizing-astropaper-theme-color-schemes.md) | [blog post](https://astro-paper.pages.dev/posts/customizing-astropaper-theme-color-schemes/)
|
||||
- Predefined Color Schemes - [markdown](src/data/blog/predefined-color-schemes.md) | [blog post](https://astro-paper.pages.dev/posts/predefined-color-schemes/)
|
||||
|
||||
## 💻 Tech Stack
|
||||
|
||||
**Main Framework** - [Astro](https://astro.build/)
|
||||
**Type Checking** - [TypeScript](https://www.typescriptlang.org/)
|
||||
**Component Framework** - [ReactJS](https://reactjs.org/)
|
||||
**Styling** - [TailwindCSS](https://tailwindcss.com/)
|
||||
**UI/UX** - [Figma Design File](https://www.figma.com/community/file/1356898632249991861)
|
||||
**Fuzzy Search** - [FuseJS](https://fusejs.io/)
|
||||
**Icons** - [Boxicons](https://boxicons.com/) | [Tablers](https://tabler-icons.io/)
|
||||
**Static Search** - [FuseJS](https://pagefind.app/)
|
||||
**Icons** - [Tablers](https://tabler-icons.io/)
|
||||
**Code Formatting** - [Prettier](https://prettier.io/)
|
||||
**Deployment** - [Cloudflare Pages](https://pages.cloudflare.com/)
|
||||
**Illustration in About Page** - [https://freesvgillustration.com](https://freesvgillustration.com/)
|
||||
@ -105,29 +100,24 @@ Documentation can be read in two formats\_ _markdown_ & _blog post_.
|
||||
You can start using this project locally by running the following command in your desired directory:
|
||||
|
||||
```bash
|
||||
# npm 6.x
|
||||
npm create astro@latest --template satnaing/astro-paper
|
||||
# pnpm
|
||||
pnpm create astro@latest --template satnaing/astro-paper
|
||||
|
||||
# npm 7+, extra double-dash is needed:
|
||||
# npm
|
||||
npm create astro@latest -- --template satnaing/astro-paper
|
||||
|
||||
# yarn
|
||||
yarn create astro --template satnaing/astro-paper
|
||||
|
||||
# pnpm
|
||||
pnpm dlx create-astro --template satnaing/astro-paper
|
||||
```
|
||||
|
||||
> **_Warning!_** If you're using `yarn 1`, you might need to [install `sharp`](https://sharp.pixelplumbing.com/install) as a dependency.
|
||||
|
||||
Then start the project by running the following commands:
|
||||
|
||||
```bash
|
||||
# install dependencies
|
||||
npm run install
|
||||
# install dependencies if you haven't done so in the previous step.
|
||||
pnpm install
|
||||
|
||||
# start running the project
|
||||
npm run dev
|
||||
pnpm run dev
|
||||
```
|
||||
|
||||
As an alternative approach, if you have Docker installed, you can use Docker to run this project locally. Here's how:
|
||||
@ -159,14 +149,14 @@ All commands are run from the root of the project, from a terminal:
|
||||
|
||||
| Command | Action |
|
||||
| :----------------------------------- | :------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `npm install` | Installs dependencies |
|
||||
| `npm run dev` | Starts local dev server at `localhost:4321` |
|
||||
| `npm run build` | Build your production site to `./dist/` |
|
||||
| `npm run preview` | Preview your build locally, before deploying |
|
||||
| `npm run format:check` | Check code format with Prettier |
|
||||
| `npm run format` | Format codes with Prettier |
|
||||
| `npm run sync` | Generates TypeScript types for all Astro modules. [Learn more](https://docs.astro.build/en/reference/cli-reference/#astro-sync). |
|
||||
| `npm run lint` | Lint with ESLint |
|
||||
| `pnpm install` | Installs dependencies |
|
||||
| `pnpm run dev` | Starts local dev server at `localhost:4321` |
|
||||
| `pnpm run build` | Build your production site to `./dist/` |
|
||||
| `pnpm run preview` | Preview your build locally, before deploying |
|
||||
| `pnpm run format:check` | Check code format with Prettier |
|
||||
| `pnpm run format` | Format codes with Prettier |
|
||||
| `pnpm run sync` | Generates TypeScript types for all Astro modules. [Learn more](https://docs.astro.build/en/reference/cli-reference/#astro-sync). |
|
||||
| `pnpm run lint` | Lint with ESLint |
|
||||
| `docker compose up -d` | Run AstroPaper on docker, You can access with the same hostname and port informed on `dev` command. |
|
||||
| `docker compose run app npm install` | You can run any command above into the docker container. |
|
||||
| `docker build -t astropaper .` | Build Docker image for AstroPaper. |
|
||||
@ -180,7 +170,7 @@ If you have any suggestions/feedback, you can contact me via [my email](mailto:c
|
||||
|
||||
## 📜 License
|
||||
|
||||
Licensed under the MIT License, Copyright © 2023
|
||||
Licensed under the MIT License, Copyright © 2025
|
||||
|
||||
---
|
||||
|
||||
|
||||
@ -1,44 +1,39 @@
|
||||
import { defineConfig } from "astro/config";
|
||||
import tailwind from "@astrojs/tailwind";
|
||||
import react from "@astrojs/react";
|
||||
import tailwindcss from "@tailwindcss/vite";
|
||||
import sitemap from "@astrojs/sitemap";
|
||||
import remarkToc from "remark-toc";
|
||||
import remarkCollapse from "remark-collapse";
|
||||
import sitemap from "@astrojs/sitemap";
|
||||
import { SITE } from "./src/config";
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
site: SITE.website,
|
||||
integrations: [
|
||||
tailwind({
|
||||
applyBaseStyles: false,
|
||||
sitemap({
|
||||
filter: page => SITE.showArchives || !page.endsWith("/archives"),
|
||||
}),
|
||||
react(),
|
||||
sitemap(),
|
||||
],
|
||||
markdown: {
|
||||
remarkPlugins: [
|
||||
remarkToc,
|
||||
[
|
||||
remarkCollapse,
|
||||
{
|
||||
test: "Table of contents",
|
||||
},
|
||||
],
|
||||
],
|
||||
remarkPlugins: [remarkToc, [remarkCollapse, { test: "Table of contents" }]],
|
||||
shikiConfig: {
|
||||
// For more themes, visit https://shiki.style/themes
|
||||
themes: { light: "catppuccin-latte", dark: "catppuccin-frappe" },
|
||||
themes: { light: "min-light", dark: "night-owl" },
|
||||
wrap: true,
|
||||
},
|
||||
},
|
||||
vite: {
|
||||
plugins: [tailwindcss()],
|
||||
optimizeDeps: {
|
||||
exclude: ["@resvg/resvg-js"],
|
||||
},
|
||||
},
|
||||
scopedStyleStrategy: "where",
|
||||
image: {
|
||||
// Used for all Markdown images; not configurable per-image
|
||||
// Used for all `<Image />` and `<Picture />` components unless overridden with a prop
|
||||
experimentalLayout: "responsive",
|
||||
},
|
||||
experimental: {
|
||||
contentLayer: true,
|
||||
svg: true,
|
||||
responsiveImages: true,
|
||||
},
|
||||
});
|
||||
|
||||
18
eslint.config.js
Normal file
18
eslint.config.js
Normal file
@ -0,0 +1,18 @@
|
||||
import eslintPluginAstro from "eslint-plugin-astro";
|
||||
import globals from "globals";
|
||||
import tseslint from "typescript-eslint";
|
||||
|
||||
export default [
|
||||
...tseslint.configs.recommended,
|
||||
...eslintPluginAstro.configs.recommended,
|
||||
{
|
||||
languageOptions: {
|
||||
globals: {
|
||||
...globals.browser,
|
||||
...globals.node,
|
||||
},
|
||||
},
|
||||
},
|
||||
{ rules: { "no-console": "error" } },
|
||||
{ ignores: ["dist/**", ".astro", "public/pagefind/**"] },
|
||||
];
|
||||
53
package.json
53
package.json
@ -1,49 +1,44 @@
|
||||
{
|
||||
"name": "astro-paper",
|
||||
"version": "4.7.0",
|
||||
"private": false,
|
||||
"type": "module",
|
||||
"version": "5.0.0",
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"start": "astro dev",
|
||||
"build": "astro build",
|
||||
"build": "astro check && astro build && pagefind --site dist && cp -r dist/pagefind public/",
|
||||
"preview": "astro preview",
|
||||
"sync": "astro sync",
|
||||
"astro": "astro",
|
||||
"format:check": "prettier --check . --plugin=prettier-plugin-astro",
|
||||
"format": "prettier --write . --plugin=prettier-plugin-astro",
|
||||
"format:check": "prettier --check .",
|
||||
"format": "prettier --write .",
|
||||
"lint": "eslint ."
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/check": "^0.9.3",
|
||||
"@astrojs/rss": "^4.0.7",
|
||||
"@astrojs/rss": "^4.0.11",
|
||||
"@astrojs/sitemap": "^3.2.1",
|
||||
"@resvg/resvg-js": "^2.6.2",
|
||||
"astro": "^4.16.18",
|
||||
"fuse.js": "^7.0.0",
|
||||
"@tailwindcss/vite": "^4.0.12",
|
||||
"astro": "^5.4.2",
|
||||
"lodash.kebabcase": "^4.1.1",
|
||||
"remark-collapse": "^0.1.2",
|
||||
"remark-toc": "^9.0.0",
|
||||
"satori": "^0.11.0",
|
||||
"tailwindcss": "^3.4.11",
|
||||
"typescript": "^5.5.3"
|
||||
"satori": "^0.12.1",
|
||||
"sharp": "^0.33.5",
|
||||
"tailwindcss": "^4.0.12"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/react": "^3.6.2",
|
||||
"@astrojs/sitemap": "^3.1.6",
|
||||
"@astrojs/tailwind": "^5.1.0",
|
||||
"@tailwindcss/typography": "^0.5.15",
|
||||
"@types/github-slugger": "^1.3.0",
|
||||
"@astrojs/check": "^0.9.4",
|
||||
"@pagefind/default-ui": "^1.3.0",
|
||||
"@tailwindcss/typography": "^0.5.16",
|
||||
"@types/lodash.kebabcase": "^4.1.9",
|
||||
"@types/react": "^18.3.6",
|
||||
"@typescript-eslint/parser": "^8.5.0",
|
||||
"astro-eslint-parser": "^1.0.3",
|
||||
"eslint": "^9.10.0",
|
||||
"eslint-plugin-astro": "^1.2.4",
|
||||
"globals": "^15.9.0",
|
||||
"prettier": "^3.3.3",
|
||||
"@typescript-eslint/parser": "^8.26.0",
|
||||
"eslint": "^9.22.0",
|
||||
"eslint-plugin-astro": "^1.3.1",
|
||||
"globals": "^16.0.0",
|
||||
"pagefind": "^1.3.0",
|
||||
"prettier": "^3.5.3",
|
||||
"prettier-plugin-astro": "^0.14.1",
|
||||
"prettier-plugin-tailwindcss": "^0.6.6",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"typescript-eslint": "^8.5.0"
|
||||
"prettier-plugin-tailwindcss": "^0.6.11",
|
||||
"typescript": "^5.8.2",
|
||||
"typescript-eslint": "^8.26.0"
|
||||
}
|
||||
}
|
||||
|
||||
5524
pnpm-lock.yaml
generated
Normal file
5524
pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
Before Width: | Height: | Size: 2.9 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 7.2 KiB |
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
1
src/assets/icons/IconArchive.svg
Normal file
1
src/assets/icons/IconArchive.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-archive"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 4m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" /><path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10" /><path d="M10 12l4 0" /></svg>
|
||||
|
After Width: | Height: | Size: 484 B |
1
src/assets/icons/IconArrowLeft.svg
Normal file
1
src/assets/icons/IconArrowLeft.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-left"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l14 0" /><path d="M5 12l6 6" /><path d="M5 12l6 -6" /></svg>
|
||||
|
After Width: | Height: | Size: 385 B |
1
src/assets/icons/IconArrowRight.svg
Normal file
1
src/assets/icons/IconArrowRight.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-right"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l14 0" /><path d="M13 18l6 -6" /><path d="M13 6l6 6" /></svg>
|
||||
|
After Width: | Height: | Size: 387 B |
3
src/assets/icons/IconBluesky.svg
Normal file
3
src/assets/icons/IconBluesky.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="568" height="501" viewBox="0 0 568 501" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M123.121 33.6637C188.241 82.5526 258.281 181.681 284 234.873C309.719 181.681 379.759 82.5526 444.879 33.6637C491.866 -1.61183 568 -28.9064 568 57.9464C568 75.2916 558.055 203.659 552.222 224.501C531.947 296.954 458.067 315.434 392.347 304.249C507.222 323.8 536.444 388.56 473.333 453.32C353.473 576.312 301.061 422.461 287.631 383.039C285.169 375.812 284.017 372.431 284 375.306C283.983 372.431 282.831 375.812 280.369 383.039C266.939 422.461 214.527 576.312 94.6667 453.32C31.5556 388.56 60.7778 323.8 175.653 304.249C109.933 315.434 36.0535 296.954 15.7778 224.501C9.94525 203.659 0 75.2916 0 57.9464C0 -28.9064 76.1345 -1.61183 123.121 33.6637Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 780 B |
1
src/assets/icons/IconBrandX.svg
Normal file
1
src/assets/icons/IconBrandX.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-brand-x"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 4l11.733 16h4.267l-11.733 -16z" /><path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772" /></svg>
|
||||
|
After Width: | Height: | Size: 415 B |
1
src/assets/icons/IconChevronLeft.svg
Normal file
1
src/assets/icons/IconChevronLeft.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 6l-6 6l6 6" /></svg>
|
||||
|
After Width: | Height: | Size: 346 B |
1
src/assets/icons/IconChevronRight.svg
Normal file
1
src/assets/icons/IconChevronRight.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 6l6 6l-6 6" /></svg>
|
||||
|
After Width: | Height: | Size: 346 B |
1
src/assets/icons/IconEdit.svg
Normal file
1
src/assets/icons/IconEdit.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-edit"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" /><path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" /><path d="M16 5l3 3" /></svg>
|
||||
|
After Width: | Height: | Size: 487 B |
1
src/assets/icons/IconFacebook.svg
Normal file
1
src/assets/icons/IconFacebook.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-brand-facebook"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3" /></svg>
|
||||
|
After Width: | Height: | Size: 406 B |
1
src/assets/icons/IconGitHub.svg
Normal file
1
src/assets/icons/IconGitHub.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-brand-github"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
|
||||
|
After Width: | Height: | Size: 624 B |
1
src/assets/icons/IconHash.svg
Normal file
1
src/assets/icons/IconHash.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-hash"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 9l14 0" /><path d="M5 15l14 0" /><path d="M11 4l-4 16" /><path d="M17 4l-4 16" /></svg>
|
||||
|
After Width: | Height: | Size: 404 B |
1
src/assets/icons/IconLinkedin.svg
Normal file
1
src/assets/icons/IconLinkedin.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-brand-linkedin"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 11v5" /><path d="M8 8v.01" /><path d="M12 16v-5" /><path d="M16 16v-3a2 2 0 1 0 -4 0" /><path d="M3 7a4 4 0 0 1 4 -4h10a4 4 0 0 1 4 4v10a4 4 0 0 1 -4 4h-10a4 4 0 0 1 -4 -4z" /></svg>
|
||||
|
After Width: | Height: | Size: 509 B |
1
src/assets/icons/IconMail.svg
Normal file
1
src/assets/icons/IconMail.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-mail"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z" /><path d="M3 7l9 6l9 -6" /></svg>
|
||||
|
After Width: | Height: | Size: 429 B |
1
src/assets/icons/IconMenuDeep.svg
Normal file
1
src/assets/icons/IconMenuDeep.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-menu-deep"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 6h16" /><path d="M7 12h13" /><path d="M10 18h10" /></svg>
|
||||
|
After Width: | Height: | Size: 379 B |
1
src/assets/icons/IconMoon.svg
Normal file
1
src/assets/icons/IconMoon.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-moon"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
|
||||
|
After Width: | Height: | Size: 402 B |
1
src/assets/icons/IconPinterest.svg
Normal file
1
src/assets/icons/IconPinterest.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-brand-pinterest"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 20l4 -9" /><path d="M10.7 14c.437 1.263 1.43 2 2.55 2c2.071 0 3.75 -1.554 3.75 -4a5 5 0 1 0 -9.7 1.7" /><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /></svg>
|
||||
|
After Width: | Height: | Size: 493 B |
1
src/assets/icons/IconRss.svg
Normal file
1
src/assets/icons/IconRss.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-rss"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M4 4a16 16 0 0 1 16 16" /><path d="M4 11a9 9 0 0 1 9 9" /></svg>
|
||||
|
After Width: | Height: | Size: 429 B |
1
src/assets/icons/IconSearch.svg
Normal file
1
src/assets/icons/IconSearch.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-search"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
|
||||
|
After Width: | Height: | Size: 393 B |
1
src/assets/icons/IconSun.svg
Normal file
1
src/assets/icons/IconSun.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-sun"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
|
||||
|
After Width: | Height: | Size: 466 B |
1
src/assets/icons/IconSunHigh.svg
Normal file
1
src/assets/icons/IconSunHigh.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-sun-high"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14.828 14.828a4 4 0 1 0 -5.656 -5.656a4 4 0 0 0 5.656 5.656z" /><path d="M6.343 17.657l-1.414 1.414" /><path d="M6.343 6.343l-1.414 -1.414" /><path d="M17.657 6.343l1.414 -1.414" /><path d="M17.657 17.657l1.414 1.414" /><path d="M4 12h-2" /><path d="M12 4v-2" /><path d="M20 12h2" /><path d="M12 20v2" /></svg>
|
||||
|
After Width: | Height: | Size: 629 B |
1
src/assets/icons/IconTelegram.svg
Normal file
1
src/assets/icons/IconTelegram.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-brand-telegram"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 10l-4 4l6 6l4 -16l-18 7l4 2l2 6l3 -4" /></svg>
|
||||
|
After Width: | Height: | Size: 374 B |
1
src/assets/icons/IconWhatsapp.svg
Normal file
1
src/assets/icons/IconWhatsapp.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-brand-whatsapp"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 21l1.65 -3.8a9 9 0 1 1 3.4 2.9l-5.05 .9" /><path d="M9 10a.5 .5 0 0 0 1 0v-1a.5 .5 0 0 0 -1 0v1a5 5 0 0 0 5 5h1a.5 .5 0 0 0 0 -1h-1a.5 .5 0 0 0 0 1" /></svg>
|
||||
|
After Width: | Height: | Size: 484 B |
1
src/assets/icons/IconX.svg
Normal file
1
src/assets/icons/IconX.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-x"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>
|
||||
|
After Width: | Height: | Size: 356 B |
BIN
src/assets/images/AstroPaper-v5.png
Normal file
BIN
src/assets/images/AstroPaper-v5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 174 KiB |
BIN
src/assets/images/kagi-small-web.png
Normal file
BIN
src/assets/images/kagi-small-web.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 412 KiB |
BIN
src/assets/images/rss-fresh-rss-reader.png
Normal file
BIN
src/assets/images/rss-fresh-rss-reader.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 718 KiB |
7
src/assets/logo.svg
Normal file
7
src/assets/logo.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 60 KiB |
@ -1,216 +0,0 @@
|
||||
const socialIcons = {
|
||||
Bluesky: `<svg
|
||||
xmlns="http://www.w3.org/2000/svg" stroke-linecap="round" stroke-linejoin="round" class="icon-tabler">
|
||||
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M6.335 5.144c-1.654 -1.199 -4.335 -2.127 -4.335 .826c0 .59 .35 4.953 .556 5.661c.713 2.463 3.13 2.75 5.444 2.369c-4.045 .665 -4.889 3.208 -2.667 5.41c1.03 1.018 1.913 1.59 2.667 1.59c2 0 3.134 -2.769 3.5 -3.5c.333 -.667 .5 -1.167 .5 -1.5c0 .333 .167 .833 .5 1.5c.366 .731 1.5 3.5 3.5 3.5c.754 0 1.637 -.571 2.667 -1.59c2.222 -2.203 1.378 -4.746 -2.667 -5.41c2.314 .38 4.73 .094 5.444 -2.369c.206 -.708 .556 -5.072 .556 -5.661c0 -2.953 -2.68 -2.025 -4.335 -.826c-2.293 1.662 -4.76 5.048 -5.665 6.856c-.905 -1.808 -3.372 -5.194 -5.665 -6.856z" /></svg>`,
|
||||
|
||||
Github: `<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon-tabler"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path
|
||||
d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"
|
||||
></path>
|
||||
</svg>`,
|
||||
Facebook: `<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon-tabler"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path
|
||||
d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3"
|
||||
></path>
|
||||
</svg>`,
|
||||
Instagram: `<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon-tabler"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<rect x="4" y="4" width="16" height="16" rx="4"></rect>
|
||||
<circle cx="12" cy="12" r="3"></circle>
|
||||
<line x1="16.5" y1="7.5" x2="16.5" y2="7.501"></line>
|
||||
</svg>`,
|
||||
LinkedIn: `<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon-tabler"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<rect x="4" y="4" width="16" height="16" rx="2"></rect>
|
||||
<line x1="8" y1="11" x2="8" y2="16"></line>
|
||||
<line x1="8" y1="8" x2="8" y2="8.01"></line>
|
||||
<line x1="12" y1="16" x2="12" y2="11"></line>
|
||||
<path d="M16 16v-3a2 2 0 0 0 -4 0"></path>
|
||||
</svg>`,
|
||||
Mail: `<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon-tabler"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<rect x="3" y="5" width="18" height="14" rx="2"></rect>
|
||||
<polyline points="3 7 12 13 21 7"></polyline>
|
||||
</svg>`,
|
||||
X: `<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon-tabler"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M4 4l11.733 16h4.267l-11.733 -16z" /><path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772" />
|
||||
</svg>`,
|
||||
Twitch: `<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon-tabler"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M21 2H3v16h5v4l4-4h5l4-4V2zm-10 9V7m5 4V7"></path>
|
||||
</svg>`,
|
||||
YouTube: `<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon-tabler"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"></path>
|
||||
<polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"></polygon>
|
||||
</svg>`,
|
||||
WhatsApp: `<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon-tabler"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M3 21l1.65 -3.8a9 9 0 1 1 3.4 2.9l-5.05 .9"></path>
|
||||
<path d="M9 10a0.5 .5 0 0 0 1 0v-1a0.5 .5 0 0 0 -1 0v1a5 5 0 0 0 5 5h1a0.5 .5 0 0 0 0 -1h-1a0.5 .5 0 0 0 0 1"></path>
|
||||
</svg>`,
|
||||
Snapchat: `<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon-tabler"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M16.882 7.842a4.882 4.882 0 0 0 -9.764 0c0 4.273 -.213 6.409 -4.118 8.118c2 .882 2 .882 3 3c3 0 4 2 6 2s3 -2 6 -2c1 -2.118 1 -2.118 3 -3c-3.906 -1.709 -4.118 -3.845 -4.118 -8.118zm-13.882 8.119c4 -2.118 4 -4.118 1 -7.118m17 7.118c-4 -2.118 -4 -4.118 -1 -7.118"></path>
|
||||
</svg>`,
|
||||
Pinterest: `<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon-tabler"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<line x1="8" y1="20" x2="12" y2="11"></line>
|
||||
<path d="M10.7 14c.437 1.263 1.43 2 2.55 2c2.071 0 3.75 -1.554 3.75 -4a5 5 0 1 0 -9.7 1.7"></path>
|
||||
<circle cx="12" cy="12" r="9"></circle>
|
||||
</svg>`,
|
||||
TikTok: `<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon-tabler"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M9 12a4 4 0 1 0 4 4v-12a5 5 0 0 0 5 5"></path>
|
||||
</svg>`,
|
||||
CodePen: `<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon-tabler"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M3 15l9 6l9 -6l-9 -6l-9 6"></path>
|
||||
<path d="M3 9l9 6l9 -6l-9 -6l-9 6"></path>
|
||||
<line x1="3" y1="9" x2="3" y2="15"></line>
|
||||
<line x1="21" y1="9" x2="21" y2="15"></line>
|
||||
<line x1="12" y1="3" x2="12" y2="9"></line>
|
||||
<line x1="12" y1="15" x2="12" y2="21"></line>
|
||||
</svg>`,
|
||||
Discord: `<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon-tabler"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<circle cx="9" cy="12" r="1"></circle>
|
||||
<circle cx="15" cy="12" r="1"></circle>
|
||||
<path d="M7.5 7.5c3.5 -1 5.5 -1 9 0"></path>
|
||||
<path d="M7 16.5c3.5 1 6.5 1 10 0"></path>
|
||||
<path d="M15.5 17c0 1 1.5 3 2 3c1.5 0 2.833 -1.667 3.5 -3c.667 -1.667 .5 -5.833 -1.5 -11.5c-1.457 -1.015 -3 -1.34 -4.5 -1.5l-1 2.5"></path>
|
||||
<path d="M8.5 17c0 1 -1.356 3 -1.832 3c-1.429 0 -2.698 -1.667 -3.333 -3c-.635 -1.667 -.476 -5.833 1.428 -11.5c1.388 -1.015 2.782 -1.34 4.237 -1.5l1 2.5"></path>
|
||||
</svg>`,
|
||||
GitLab: `<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon-tabler"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M21 14l-9 7l-9 -7l3 -11l3 7h6l3 -7z"></path>
|
||||
</svg>`,
|
||||
Reddit: `<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon-tabler"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M12 8c2.648 0 5.028 .826 6.675 2.14a2.5 2.5 0 0 1 2.326 4.36c0 3.59 -4.03 6.5 -9 6.5c-4.875 0 -8.845 -2.8 -9 -6.294l-1 -.206a2.5 2.5 0 0 1 2.326 -4.36c1.646 -1.313 4.026 -2.14 6.674 -2.14z"></path>
|
||||
<path d="M12 8l1 -5l6 1"></path>
|
||||
<circle cx="19" cy="4" r="1"></circle>
|
||||
<circle cx="9" cy="13" r=".5" fill="currentColor"></circle>
|
||||
<circle cx="15" cy="13" r=".5" fill="currentColor"></circle>
|
||||
<path d="M10 17c.667 .333 1.333 .5 2 .5s1.333 -.167 2 -.5"></path>
|
||||
</svg>`,
|
||||
Skype: `<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon-tabler"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M12 3a9 9 0 0 1 8.603 11.65a4.5 4.5 0 0 1 -5.953 5.953a9 9 0 0 1 -11.253 -11.253a4.5 4.5 0 0 1 5.953 -5.954a8.987 8.987 0 0 1 2.65 -.396z"></path>
|
||||
<path d="M8 14.5c.5 2 2.358 2.5 4 2.5c2.905 0 4 -1.187 4 -2.5c0 -1.503 -1.927 -2.5 -4 -2.5s-4 -.997 -4 -2.5c0 -1.313 1.095 -2.5 4 -2.5c1.642 0 3.5 .5 4 2.5"></path>
|
||||
</svg>`,
|
||||
Steam: `<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon-tabler"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M16.5 5a4.5 4.5 0 1 1 -.653 8.953l-4.347 3.009l0 .038a3 3 0 0 1 -2.824 2.995l-.176 .005a3 3 0 0 1 -2.94 -2.402l-2.56 -1.098v-3.5l3.51 1.755a2.989 2.989 0 0 1 2.834 -.635l2.727 -3.818a4.5 4.5 0 0 1 4.429 -5.302z"></path>
|
||||
<circle fill="currentColor" cx="16.5" cy="9.5" r="1"></circle>
|
||||
</svg>`,
|
||||
Telegram: `<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon-tabler"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M15 10l-4 4l6 6l4 -16l-18 7l4 2l2 6l3 -4"></path>
|
||||
</svg>`,
|
||||
Mastodon: `<svg class="icon-tabler" viewBox="-10 -5 1034 1034" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
|
||||
<path fill="currentColor"
|
||||
d="M499 112q-93 1 -166 11q-81 11 -128 33l-14 8q-16 10 -32 25q-22 21 -38 47q-21 33 -32 73q-14 47 -14 103v37q0 77 1 119q3 113 18 188q19 95 62 154q50 67 134 89q109 29 210 24q46 -3 88 -12q30 -7 55 -17l19 -8l-4 -75l-22 6q-28 6 -57 10q-41 6 -78 4q-53 -1 -80 -7
|
||||
q-43 -8 -67 -30q-29 -25 -35 -72q-2 -14 -2 -29l25 6q31 6 65 10q48 7 93 9q42 2 92 -2q32 -2 88 -9t107 -30q49 -23 81.5 -54.5t38.5 -63.5q9 -45 13 -109q4 -46 5 -97v-41q0 -56 -14 -103q-11 -40 -32 -73q-16 -26 -38 -47q-15 -15 -32 -25q-12 -8 -14 -8
|
||||
q-46 -22 -127 -33q-74 -10 -166 -11h-3zM367 267q73 0 109 56l24 39l24 -39q36 -56 109 -56q63 0 101 43t38 117v239h-95v-232q0 -74 -61 -74q-69 0 -69 88v127h-94v-127q0 -88 -69 -88q-61 0 -61 74v232h-95v-239q0 -74 38 -117t101 -43z" />
|
||||
</svg>`,
|
||||
};
|
||||
|
||||
export default socialIcons;
|
||||
37
src/components/BackButton.astro
Normal file
37
src/components/BackButton.astro
Normal file
@ -0,0 +1,37 @@
|
||||
---
|
||||
import IconChevronLeft from "@/assets/icons/IconChevronLeft.svg";
|
||||
import LinkButton from "./LinkButton.astro";
|
||||
import { SITE } from "@/config";
|
||||
---
|
||||
|
||||
{
|
||||
SITE.showBackButton && (
|
||||
<div class="mx-auto flex w-full max-w-3xl items-center justify-start px-2">
|
||||
<LinkButton
|
||||
id="back-button"
|
||||
href="/"
|
||||
class="focus-outline mt-8 mb-2 flex hover:text-foreground/75"
|
||||
>
|
||||
<IconChevronLeft class="inline-block size-6" />
|
||||
<span>Go back</span>
|
||||
</LinkButton>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
<script>
|
||||
/* Update Search Praam */
|
||||
function updateGoBackUrl() {
|
||||
const backButton: HTMLAnchorElement | null =
|
||||
document.querySelector("#back-button");
|
||||
|
||||
const backUrl = sessionStorage.getItem("backUrl");
|
||||
|
||||
if (backUrl && backButton) {
|
||||
backButton.href = backUrl;
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("astro:page-load", updateGoBackUrl);
|
||||
updateGoBackUrl();
|
||||
</script>
|
||||
@ -8,34 +8,35 @@ const breadcrumbList = currentUrlPath.split("/").slice(1);
|
||||
|
||||
// if breadcrumb is Home > Posts > 1 <etc>
|
||||
// replace Posts with Posts (page number)
|
||||
breadcrumbList[0] === "posts" &&
|
||||
if (breadcrumbList[0] === "posts") {
|
||||
breadcrumbList.splice(0, 2, `Posts (page ${breadcrumbList[1] || 1})`);
|
||||
}
|
||||
|
||||
// if breadcrumb is Home > Tags > [tag] > [page] <etc>
|
||||
// replace [tag] > [page] with [tag] (page number)
|
||||
breadcrumbList[0] === "tags" &&
|
||||
!isNaN(Number(breadcrumbList[2])) &&
|
||||
if (breadcrumbList[0] === "tags" && !isNaN(Number(breadcrumbList[2]))) {
|
||||
breadcrumbList.splice(
|
||||
1,
|
||||
3,
|
||||
`${breadcrumbList[1]} ${
|
||||
Number(breadcrumbList[2]) === 1 ? "" : "(page " + breadcrumbList[2] + ")"
|
||||
}`
|
||||
`${breadcrumbList[1]} ${Number(breadcrumbList[2]) === 1 ? "" : "(page " + breadcrumbList[2] + ")"}`
|
||||
);
|
||||
}
|
||||
---
|
||||
|
||||
<nav class="breadcrumb" aria-label="breadcrumb">
|
||||
<ul>
|
||||
<nav class="mx-auto mt-8 mb-1 w-full max-w-3xl px-4" aria-label="breadcrumb">
|
||||
<ul
|
||||
class="font-light [&>li]:inline [&>li:not(:last-child)>a]:hover:opacity-100"
|
||||
>
|
||||
<li>
|
||||
<a href="/">Home</a>
|
||||
<span aria-hidden="true">»</span>
|
||||
<a href="/" class="opacity-80">Home</a>
|
||||
<span aria-hidden="true" class="opacity-80">»</span>
|
||||
</li>
|
||||
{
|
||||
breadcrumbList.map((breadcrumb, index) =>
|
||||
index + 1 === breadcrumbList.length ? (
|
||||
<li>
|
||||
<span
|
||||
class={`${index > 0 ? "lowercase" : "capitalize"}`}
|
||||
class:list={["capitalize opacity-75", { lowercase: index > 0 }]}
|
||||
aria-current="page"
|
||||
>
|
||||
{/* make the last part lowercase in Home > Tags > some-tag */}
|
||||
@ -44,7 +45,9 @@ breadcrumbList[0] === "tags" &&
|
||||
</li>
|
||||
) : (
|
||||
<li>
|
||||
<a href={`/${breadcrumb}/`}>{breadcrumb}</a>
|
||||
<a href={`/${breadcrumb}/`} class="capitalize opacity-70">
|
||||
{breadcrumb}
|
||||
</a>
|
||||
<span aria-hidden="true">»</span>
|
||||
</li>
|
||||
)
|
||||
@ -52,21 +55,3 @@ breadcrumbList[0] === "tags" &&
|
||||
}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
.breadcrumb {
|
||||
@apply mx-auto mb-1 mt-8 w-full max-w-3xl px-4;
|
||||
}
|
||||
.breadcrumb ul li {
|
||||
@apply inline;
|
||||
}
|
||||
.breadcrumb ul li a {
|
||||
@apply capitalize opacity-70;
|
||||
}
|
||||
.breadcrumb ul li span {
|
||||
@apply opacity-70;
|
||||
}
|
||||
.breadcrumb ul li:not(:last-child) a {
|
||||
@apply hover:opacity-100;
|
||||
}
|
||||
</style>
|
||||
37
src/components/Card.astro
Normal file
37
src/components/Card.astro
Normal file
@ -0,0 +1,37 @@
|
||||
---
|
||||
import { slugifyStr } from "@/utils/slugify";
|
||||
import type { CollectionEntry } from "astro:content";
|
||||
import Datetime from "./Datetime.astro";
|
||||
|
||||
export interface Props {
|
||||
href?: string;
|
||||
frontmatter: CollectionEntry<"blog">["data"];
|
||||
secHeading?: boolean;
|
||||
}
|
||||
|
||||
const { href, frontmatter, secHeading = true } = Astro.props;
|
||||
|
||||
const { title, pubDatetime, modDatetime, description } = frontmatter;
|
||||
|
||||
const headerProps = {
|
||||
style: { viewTransitionName: slugifyStr(title) },
|
||||
class: "text-lg font-medium decoration-dashed hover:underline",
|
||||
};
|
||||
---
|
||||
|
||||
<li class="my-6">
|
||||
<a
|
||||
href={href}
|
||||
class="inline-block text-lg font-medium text-accent decoration-dashed underline-offset-4 focus-visible:no-underline focus-visible:underline-offset-0"
|
||||
>
|
||||
{
|
||||
secHeading ? (
|
||||
<h2 {...headerProps}>{title}</h2>
|
||||
) : (
|
||||
<h3 {...headerProps}>{title}</h3>
|
||||
)
|
||||
}
|
||||
</a>
|
||||
<Datetime pubDatetime={pubDatetime} modDatetime={modDatetime} />
|
||||
<p>{description}</p>
|
||||
</li>
|
||||
@ -1,35 +0,0 @@
|
||||
import { slugifyStr } from "@utils/slugify";
|
||||
import Datetime from "./Datetime";
|
||||
import type { CollectionEntry } from "astro:content";
|
||||
|
||||
export interface Props {
|
||||
href?: string;
|
||||
frontmatter: CollectionEntry<"blog">["data"];
|
||||
secHeading?: boolean;
|
||||
}
|
||||
|
||||
export default function Card({ href, frontmatter, secHeading = true }: Props) {
|
||||
const { title, pubDatetime, modDatetime, description } = frontmatter;
|
||||
|
||||
const headerProps = {
|
||||
style: { viewTransitionName: slugifyStr(title) },
|
||||
className: "text-lg font-medium decoration-dashed hover:underline",
|
||||
};
|
||||
|
||||
return (
|
||||
<li className="my-6">
|
||||
<a
|
||||
href={href}
|
||||
className="inline-block text-lg font-medium text-skin-accent decoration-dashed underline-offset-4 focus-visible:no-underline focus-visible:underline-offset-0"
|
||||
>
|
||||
{secHeading ? (
|
||||
<h2 {...headerProps}>{title}</h2>
|
||||
) : (
|
||||
<h3 {...headerProps}>{title}</h3>
|
||||
)}
|
||||
</a>
|
||||
<Datetime pubDatetime={pubDatetime} modDatetime={modDatetime} />
|
||||
<p>{description}</p>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
66
src/components/Datetime.astro
Normal file
66
src/components/Datetime.astro
Normal file
@ -0,0 +1,66 @@
|
||||
---
|
||||
import { LOCALE } from "@/constants";
|
||||
|
||||
export interface Props {
|
||||
pubDatetime: string | Date;
|
||||
modDatetime: string | Date | undefined | null;
|
||||
size?: "sm" | "lg";
|
||||
class?: string;
|
||||
}
|
||||
|
||||
const {
|
||||
pubDatetime,
|
||||
modDatetime,
|
||||
size = "sm",
|
||||
class: className = "",
|
||||
} = Astro.props;
|
||||
|
||||
/* ========== Formatted Datetime ========== */
|
||||
const myDatetime = new Date(
|
||||
modDatetime && modDatetime > pubDatetime ? modDatetime : pubDatetime
|
||||
);
|
||||
const date = myDatetime.toLocaleDateString(LOCALE.langTag, {
|
||||
year: "numeric",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
});
|
||||
|
||||
const time = myDatetime.toLocaleTimeString(LOCALE.langTag, {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
---
|
||||
|
||||
<div class={`flex items-end space-x-2 opacity-80 ${className}`.trim()}>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class={`${
|
||||
size === "sm" ? "scale-90" : "scale-100"
|
||||
} inline-block h-6 w-6 min-w-[1.375rem] fill-foreground`}
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M7 11h2v2H7zm0 4h2v2H7zm4-4h2v2h-2zm0 4h2v2h-2zm4-4h2v2h-2zm0 4h2v2h-2z"
|
||||
></path>
|
||||
<path
|
||||
d="M5 22h14c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2h-2V2h-2v2H9V2H7v2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2zM19 8l.001 12H5V8h14z"
|
||||
></path>
|
||||
</svg>
|
||||
{
|
||||
modDatetime && modDatetime > pubDatetime ? (
|
||||
<span
|
||||
class={`italic ${size === "sm" ? "text-sm" : "text-sm sm:text-base"}`}
|
||||
>
|
||||
Updated:
|
||||
</span>
|
||||
) : (
|
||||
<span class="sr-only">Published:</span>
|
||||
)
|
||||
}
|
||||
<span class={`italic ${size === "sm" ? "text-sm" : "text-sm sm:text-base"}`}>
|
||||
<time datetime={myDatetime.toISOString()}>{date}</time>
|
||||
<span aria-hidden="true"> | </span>
|
||||
<span class="sr-only"> at </span>
|
||||
<span class="text-nowrap">{time}</span>
|
||||
</span>
|
||||
</div>
|
||||
@ -1,120 +0,0 @@
|
||||
import { LOCALE, SITE } from "@config";
|
||||
import type { CollectionEntry } from "astro:content";
|
||||
|
||||
interface DatetimesProps {
|
||||
pubDatetime: string | Date;
|
||||
modDatetime: string | Date | undefined | null;
|
||||
}
|
||||
|
||||
interface EditPostProps {
|
||||
editPost?: CollectionEntry<"blog">["data"]["editPost"];
|
||||
postId?: CollectionEntry<"blog">["id"];
|
||||
}
|
||||
|
||||
interface Props extends DatetimesProps, EditPostProps {
|
||||
size?: "sm" | "lg";
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export default function Datetime({
|
||||
pubDatetime,
|
||||
modDatetime,
|
||||
size = "sm",
|
||||
className = "",
|
||||
editPost,
|
||||
postId,
|
||||
}: Props) {
|
||||
return (
|
||||
<div
|
||||
className={`flex items-center space-x-2 opacity-80 ${className}`.trim()}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={`${
|
||||
size === "sm" ? "scale-90" : "scale-100"
|
||||
} inline-block h-6 w-6 min-w-[1.375rem] fill-skin-base`}
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M7 11h2v2H7zm0 4h2v2H7zm4-4h2v2h-2zm0 4h2v2h-2zm4-4h2v2h-2zm0 4h2v2h-2z"></path>
|
||||
<path d="M5 22h14c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2h-2V2h-2v2H9V2H7v2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2zM19 8l.001 12H5V8h14z"></path>
|
||||
</svg>
|
||||
{modDatetime && modDatetime > pubDatetime ? (
|
||||
<span className={`italic ${size === "sm" ? "text-sm" : "text-base"}`}>
|
||||
Updated:
|
||||
</span>
|
||||
) : (
|
||||
<span className="sr-only">Published:</span>
|
||||
)}
|
||||
<span className={`italic ${size === "sm" ? "text-sm" : "text-base"}`}>
|
||||
<FormattedDatetime
|
||||
pubDatetime={pubDatetime}
|
||||
modDatetime={modDatetime}
|
||||
/>
|
||||
{size === "lg" && <EditPost editPost={editPost} postId={postId} />}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const FormattedDatetime = ({ pubDatetime, modDatetime }: DatetimesProps) => {
|
||||
const myDatetime = new Date(
|
||||
modDatetime && modDatetime > pubDatetime ? modDatetime : pubDatetime
|
||||
);
|
||||
|
||||
const date = myDatetime.toLocaleDateString(LOCALE.langTag, {
|
||||
year: "numeric",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
});
|
||||
|
||||
const time = myDatetime.toLocaleTimeString(LOCALE.langTag, {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<time dateTime={myDatetime.toISOString()}>{date}</time>
|
||||
<span aria-hidden="true"> | </span>
|
||||
<span className="sr-only"> at </span>
|
||||
<span className="text-nowrap">{time}</span>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const EditPost = ({ editPost, postId }: EditPostProps) => {
|
||||
let editPostUrl = editPost?.url ?? SITE?.editPost?.url ?? "";
|
||||
const showEditPost = !editPost?.disabled && editPostUrl.length > 0;
|
||||
const appendFilePath =
|
||||
editPost?.appendFilePath ?? SITE?.editPost?.appendFilePath ?? false;
|
||||
if (appendFilePath && postId) {
|
||||
editPostUrl += `/${postId}`;
|
||||
}
|
||||
const editPostText = editPost?.text ?? SITE?.editPost?.text ?? "Edit";
|
||||
|
||||
return (
|
||||
showEditPost && (
|
||||
<>
|
||||
<span aria-hidden="true"> | </span>
|
||||
<a
|
||||
className="space-x-1.5 hover:opacity-75"
|
||||
href={editPostUrl}
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="icon icon-tabler icons-tabler-outline icon-tabler-edit inline-block !scale-90 fill-skin-base"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" />
|
||||
<path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" />
|
||||
<path d="M16 5l3 3" />
|
||||
</svg>
|
||||
<span className="text-base italic">{editPostText}</span>
|
||||
</a>
|
||||
</>
|
||||
)
|
||||
);
|
||||
};
|
||||
41
src/components/EditPost.astro
Normal file
41
src/components/EditPost.astro
Normal file
@ -0,0 +1,41 @@
|
||||
---
|
||||
import type { CollectionEntry } from "astro:content";
|
||||
import IconEdit from "@/assets/icons/IconEdit.svg";
|
||||
import { SITE } from "@/config";
|
||||
|
||||
export interface Props {
|
||||
editPost?: CollectionEntry<"blog">["data"]["editPost"];
|
||||
postId?: CollectionEntry<"blog">["id"];
|
||||
class?: string;
|
||||
}
|
||||
|
||||
const { editPost, postId, class: className = "" } = Astro.props;
|
||||
|
||||
let editPostUrl = editPost?.url ?? SITE?.editPost?.url ?? "";
|
||||
const showEditPost = !editPost?.disabled && editPostUrl.length > 0;
|
||||
const appendFilePath =
|
||||
editPost?.appendFilePath ?? SITE?.editPost?.appendFilePath ?? false;
|
||||
if (appendFilePath && postId) {
|
||||
editPostUrl += `/${postId}`;
|
||||
}
|
||||
const editPostText = editPost?.text ?? SITE?.editPost?.text ?? "Edit";
|
||||
---
|
||||
|
||||
{
|
||||
showEditPost && (
|
||||
<div class:list={["opacity-80", className]}>
|
||||
<span aria-hidden="true" class="max-sm:hidden">
|
||||
|
|
||||
</span>
|
||||
<a
|
||||
class="space-x-1.5 hover:opacity-75"
|
||||
href={editPostUrl}
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<IconEdit class="inline-block size-6" />
|
||||
<span class="italic max-sm:text-sm sm:inline">{editPostText}</span>
|
||||
</a>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -11,35 +11,16 @@ export interface Props {
|
||||
const { noMarginTop = false } = Astro.props;
|
||||
---
|
||||
|
||||
<footer class={`${noMarginTop ? "" : "mt-auto"}`}>
|
||||
<footer class:list={["w-full", { "mt-auto": !noMarginTop }]}>
|
||||
<Hr noPadding />
|
||||
<div class="footer-wrapper">
|
||||
<div
|
||||
class="flex flex-col items-center justify-between py-6 sm:flex-row-reverse sm:py-4"
|
||||
>
|
||||
<Socials centered />
|
||||
<div class="copyright-wrapper">
|
||||
<div class="my-2 flex flex-col items-center whitespace-nowrap sm:flex-row">
|
||||
<span>Copyright © {currentYear}</span>
|
||||
<span class="separator"> | </span>
|
||||
<span class="hidden sm:inline"> | </span>
|
||||
<span>All rights reserved.</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
footer {
|
||||
@apply w-full;
|
||||
}
|
||||
.footer-wrapper {
|
||||
@apply flex flex-col items-center justify-between py-6 sm:flex-row-reverse sm:py-4;
|
||||
}
|
||||
.link-button {
|
||||
@apply my-1 p-2 hover:rotate-6;
|
||||
}
|
||||
.link-button svg {
|
||||
@apply scale-125;
|
||||
}
|
||||
.copyright-wrapper {
|
||||
@apply my-2 flex flex-col items-center whitespace-nowrap sm:flex-row;
|
||||
}
|
||||
.separator {
|
||||
@apply hidden sm:inline;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,145 +1,135 @@
|
||||
---
|
||||
import { LOGO_IMAGE, SITE } from "@config";
|
||||
import Hr from "./Hr.astro";
|
||||
import IconX from "@/assets/icons/IconX.svg";
|
||||
import IconMoon from "@/assets/icons/IconMoon.svg";
|
||||
import IconSearch from "@/assets/icons/IconSearch.svg";
|
||||
import IconArchive from "@/assets/icons/IconArchive.svg";
|
||||
import IconSunHigh from "@/assets/icons/IconSunHigh.svg";
|
||||
import IconMenuDeep from "@/assets/icons/IconMenuDeep.svg";
|
||||
import LinkButton from "./LinkButton.astro";
|
||||
import Logo from "@/assets/logo.svg";
|
||||
import { SITE } from "@/config";
|
||||
|
||||
export interface Props {
|
||||
activeNav?: "posts" | "archives" | "tags" | "about" | "search";
|
||||
}
|
||||
const { pathname } = Astro.url;
|
||||
|
||||
const { activeNav } = Astro.props;
|
||||
// Remove trailing slash from current pathname if exists
|
||||
const currentPath =
|
||||
pathname.endsWith("/") && pathname !== "/" ? pathname.slice(0, -1) : pathname;
|
||||
|
||||
const isActive = (path: string) => {
|
||||
const currentPathArray = currentPath.split("/").filter(p => p.trim());
|
||||
const pathArray = path.split("/").filter(p => p.trim());
|
||||
|
||||
return currentPath === path || currentPathArray[0] === pathArray[0];
|
||||
};
|
||||
---
|
||||
|
||||
<header>
|
||||
<a id="skip-to-content" href="#main-content">Skip to content</a>
|
||||
<div class="nav-container">
|
||||
<div class="top-nav-wrap">
|
||||
<a href="/" class="logo whitespace-nowrap">
|
||||
{
|
||||
LOGO_IMAGE.enable ? (
|
||||
<img
|
||||
src={`/assets/${LOGO_IMAGE.svg ? "logo.svg" : "logo.png"}`}
|
||||
alt={SITE.title}
|
||||
width={LOGO_IMAGE.width}
|
||||
height={LOGO_IMAGE.height}
|
||||
/>
|
||||
) : (
|
||||
SITE.title
|
||||
)
|
||||
}
|
||||
<a
|
||||
id="skip-to-content"
|
||||
href="#main-content"
|
||||
class="absolute -top-full left-16 z-50 bg-background px-3 py-2 text-accent backdrop-blur-lg transition-all focus:top-4"
|
||||
>
|
||||
Skip to content
|
||||
</a>
|
||||
<div
|
||||
id="nav-container"
|
||||
class="mx-auto flex max-w-3xl flex-col items-center justify-between sm:flex-row"
|
||||
>
|
||||
<div
|
||||
id="top-nav-wrap"
|
||||
class="relative flex w-full items-start justify-between bg-background p-4 sm:py-6"
|
||||
>
|
||||
<a
|
||||
href="/"
|
||||
class="absolute py-1 text-2xl leading-7 font-semibold whitespace-nowrap sm:static"
|
||||
>
|
||||
<Logo class="scale-75 dark:invert" />
|
||||
</a>
|
||||
<nav id="nav-menu">
|
||||
<nav
|
||||
id="nav-menu"
|
||||
class="flex w-full flex-col items-center sm:ml-2 sm:flex-row sm:justify-end sm:space-x-4 sm:py-0"
|
||||
>
|
||||
<button
|
||||
class="hamburger-menu focus-outline"
|
||||
id="menu-btn"
|
||||
class="focus-outline self-end p-2 sm:hidden"
|
||||
aria-label="Open Menu"
|
||||
aria-expanded="false"
|
||||
aria-controls="menu-items"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="menu-icon"
|
||||
>
|
||||
<line x1="7" y1="12" x2="21" y2="12" class="line"></line>
|
||||
<line x1="3" y1="6" x2="21" y2="6" class="line"></line>
|
||||
<line x1="12" y1="18" x2="21" y2="18" class="line"></line>
|
||||
<line x1="18" y1="6" x2="6" y2="18" class="close"></line>
|
||||
<line x1="6" y1="6" x2="18" y2="18" class="close"></line>
|
||||
</svg>
|
||||
<IconX id="close-icon" class="hidden" />
|
||||
<IconMenuDeep id="menu-icon" />
|
||||
</button>
|
||||
<ul id="menu-items" class="display-none sm:flex">
|
||||
<li>
|
||||
<a href="/posts/" class={activeNav === "posts" ? "active" : ""}>
|
||||
<ul
|
||||
id="menu-items"
|
||||
class:list={[
|
||||
"mt-4 grid w-44 grid-cols-2 place-content-center gap-2",
|
||||
"[&>li>a]:block [&>li>a]:px-4 [&>li>a]:py-3 [&>li>a]:text-center [&>li>a]:font-medium [&>li>a]:hover:text-accent sm:[&>li>a]:px-2 sm:[&>li>a]:py-1",
|
||||
"hidden",
|
||||
"sm:mt-0 sm:ml-0 sm:flex sm:w-auto sm:gap-x-5 sm:gap-y-0",
|
||||
]}
|
||||
>
|
||||
<li class="col-span-2">
|
||||
<a href="/posts" class:list={{ "active-nav": isActive("/posts") }}>
|
||||
Posts
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/tags/" class={activeNav === "tags" ? "active" : ""}>
|
||||
<li class="col-span-2">
|
||||
<a href="/tags" class:list={{ "active-nav": isActive("/tags") }}>
|
||||
Tags
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/about/" class={activeNav === "about" ? "active" : ""}>
|
||||
<li class="col-span-2">
|
||||
<a href="/about" class:list={{ "active-nav": isActive("/about") }}>
|
||||
About
|
||||
</a>
|
||||
</li>
|
||||
{
|
||||
SITE.showArchives && (
|
||||
<li>
|
||||
<li class="col-span-2">
|
||||
<LinkButton
|
||||
href="/archives/"
|
||||
className={`focus-outline flex justify-center p-3 sm:p-1`}
|
||||
href="/archives"
|
||||
class:list={[
|
||||
"focus-outline flex justify-center p-3 sm:p-1",
|
||||
{
|
||||
"active-nav [&>svg]:stroke-accent": isActive("/archives"),
|
||||
},
|
||||
]}
|
||||
ariaLabel="archives"
|
||||
title="Archives"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class:list={[
|
||||
"icon icon-tabler icons-tabler-outline !hidden sm:!inline-block",
|
||||
activeNav === "archives" && "!stroke-skin-accent",
|
||||
]}
|
||||
>
|
||||
<>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M3 4m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" />
|
||||
<path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10" />
|
||||
<path d="M10 12l4 0" />
|
||||
</>
|
||||
</svg>
|
||||
<span
|
||||
class:list={[
|
||||
"sm:sr-only",
|
||||
activeNav === "archives" && "active",
|
||||
]}
|
||||
>
|
||||
Archives
|
||||
</span>
|
||||
<IconArchive class="hidden sm:inline-block" />
|
||||
<span class="sm:sr-only">Archives</span>
|
||||
</LinkButton>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
<li>
|
||||
<li class="col-span-1 flex items-center justify-center">
|
||||
<LinkButton
|
||||
href="/search/"
|
||||
className={`focus-outline p-3 sm:p-1 ${
|
||||
activeNav === "search" ? "active" : ""
|
||||
} flex`}
|
||||
href="/search"
|
||||
class:list={[
|
||||
"focus-outline flex p-3 sm:p-1",
|
||||
{ "[&>svg]:stroke-accent": isActive("/search") },
|
||||
]}
|
||||
ariaLabel="search"
|
||||
title="Search"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="scale-125 sm:scale-100"
|
||||
><path
|
||||
d="M19.023 16.977a35.13 35.13 0 0 1-1.367-1.384c-.372-.378-.596-.653-.596-.653l-2.8-1.337A6.962 6.962 0 0 0 16 9c0-3.859-3.14-7-7-7S2 5.141 2 9s3.14 7 7 7c1.763 0 3.37-.66 4.603-1.739l1.337 2.8s.275.224.653.596c.387.363.896.854 1.384 1.367l1.358 1.392.604.646 2.121-2.121-.646-.604c-.379-.372-.885-.866-1.391-1.36zM9 14c-2.757 0-5-2.243-5-5s2.243-5 5-5 5 2.243 5 5-2.243 5-5 5z"
|
||||
></path>
|
||||
</svg>
|
||||
<IconSearch />
|
||||
<span class="sr-only">Search</span>
|
||||
</LinkButton>
|
||||
</li>
|
||||
{
|
||||
SITE.lightAndDarkMode && (
|
||||
<li>
|
||||
<li class="col-span-1 flex items-center justify-center">
|
||||
<button
|
||||
id="theme-btn"
|
||||
class="focus-outline"
|
||||
class="focus-outline relative size-12 p-4 sm:size-8 hover:[&>svg]:stroke-accent"
|
||||
title="Toggles light & dark"
|
||||
aria-label="auto"
|
||||
aria-live="polite"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" id="moon-svg">
|
||||
<path d="M20.742 13.045a8.088 8.088 0 0 1-2.077.271c-2.135 0-4.14-.83-5.646-2.336a8.025 8.025 0 0 1-2.064-7.723A1 1 0 0 0 9.73 2.034a10.014 10.014 0 0 0-4.489 2.582c-3.898 3.898-3.898 10.243 0 14.143a9.937 9.937 0 0 0 7.072 2.93 9.93 9.93 0 0 0 7.07-2.929 10.007 10.007 0 0 0 2.583-4.491 1.001 1.001 0 0 0-1.224-1.224zm-2.772 4.301a7.947 7.947 0 0 1-5.656 2.343 7.953 7.953 0 0 1-5.658-2.344c-3.118-3.119-3.118-8.195 0-11.314a7.923 7.923 0 0 1 2.06-1.483 10.027 10.027 0 0 0 2.89 7.848 9.972 9.972 0 0 0 7.848 2.891 8.036 8.036 0 0 1-1.484 2.059z" />
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" id="sun-svg">
|
||||
<path d="M6.993 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007S14.761 6.993 12 6.993 6.993 9.239 6.993 12zM12 8.993c1.658 0 3.007 1.349 3.007 3.007S13.658 15.007 12 15.007 8.993 13.658 8.993 12 10.342 8.993 12 8.993zM10.998 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2h-3zm17 0h3v2h-3zM4.219 18.363l2.12-2.122 1.415 1.414-2.12 2.122zM16.24 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.342 7.759 4.22 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z" />
|
||||
</svg>
|
||||
<IconMoon class="absolute top-[50%] left-[50%] -translate-[50%] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
|
||||
<IconSunHigh class="absolute top-[50%] left-[50%] -translate-[50%] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
|
||||
</button>
|
||||
</li>
|
||||
)
|
||||
@ -149,100 +139,26 @@ const { activeNav } = Astro.props;
|
||||
</div>
|
||||
</div>
|
||||
<Hr />
|
||||
<div style="display:none;">
|
||||
<a rel="me" href="https://hachyderm.io/@tiff">Mastodon</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
#skip-to-content {
|
||||
@apply absolute -top-full left-16 z-50 bg-skin-accent px-3 py-2 text-skin-inverted transition-all focus:top-4;
|
||||
}
|
||||
.nav-container {
|
||||
@apply mx-auto flex max-w-3xl flex-col items-center justify-between sm:flex-row;
|
||||
}
|
||||
.top-nav-wrap {
|
||||
@apply relative flex w-full items-start justify-between p-4 sm:items-center sm:py-8;
|
||||
}
|
||||
.logo {
|
||||
@apply absolute py-1 text-xl font-semibold sm:static sm:text-2xl;
|
||||
}
|
||||
.hamburger-menu {
|
||||
@apply self-end p-2 sm:hidden;
|
||||
}
|
||||
.hamburger-menu svg {
|
||||
@apply h-6 w-6 scale-125 fill-skin-base;
|
||||
}
|
||||
|
||||
nav {
|
||||
@apply flex w-full flex-col items-center sm:ml-2 sm:flex-row sm:justify-end sm:space-x-4 sm:py-0;
|
||||
}
|
||||
nav ul {
|
||||
@apply mt-4 grid w-44 grid-cols-2 grid-rows-4 gap-x-2 gap-y-2 sm:ml-0 sm:mt-0 sm:w-auto sm:gap-x-5 sm:gap-y-0;
|
||||
}
|
||||
nav ul li {
|
||||
@apply col-span-2 flex items-center justify-center;
|
||||
}
|
||||
nav ul li a {
|
||||
@apply w-full px-4 py-3 text-center font-medium hover:text-skin-accent sm:my-0 sm:px-2 sm:py-1;
|
||||
}
|
||||
nav ul li:nth-last-child(2) a {
|
||||
@apply w-auto;
|
||||
}
|
||||
nav ul li:nth-last-child(1),
|
||||
nav ul li:nth-last-child(2) {
|
||||
@apply col-span-1;
|
||||
}
|
||||
nav .active {
|
||||
@apply underline decoration-wavy decoration-2 underline-offset-4;
|
||||
}
|
||||
nav a.active svg {
|
||||
@apply fill-skin-accent;
|
||||
}
|
||||
|
||||
nav button {
|
||||
@apply p-1;
|
||||
}
|
||||
nav button svg {
|
||||
@apply h-6 w-6 fill-skin-base hover:fill-skin-accent;
|
||||
}
|
||||
#theme-btn {
|
||||
@apply p-3 sm:p-1;
|
||||
}
|
||||
#theme-btn svg {
|
||||
@apply scale-125 hover:rotate-12 sm:scale-100;
|
||||
}
|
||||
|
||||
.menu-icon line {
|
||||
@apply transition-opacity duration-75 ease-in-out;
|
||||
}
|
||||
.menu-icon .close {
|
||||
opacity: 0;
|
||||
}
|
||||
.menu-icon.is-active .line {
|
||||
@apply opacity-0;
|
||||
}
|
||||
.menu-icon.is-active .close {
|
||||
@apply opacity-100;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function toggleNav() {
|
||||
// Toggle menu
|
||||
const menuBtn = document.querySelector(".hamburger-menu");
|
||||
const menuIcon = document.querySelector(".menu-icon");
|
||||
const menuBtn = document.querySelector("#menu-btn");
|
||||
const menuItems = document.querySelector("#menu-items");
|
||||
const menuIcon = document.querySelector("#menu-icon");
|
||||
const closeIcon = document.querySelector("#close-icon");
|
||||
|
||||
menuBtn?.addEventListener("click", () => {
|
||||
const menuExpanded = menuBtn.getAttribute("aria-expanded") === "true";
|
||||
menuIcon?.classList.toggle("is-active");
|
||||
menuBtn.setAttribute("aria-expanded", menuExpanded ? "false" : "true");
|
||||
menuBtn.setAttribute(
|
||||
"aria-label",
|
||||
menuExpanded ? "Open Menu" : "Close Menu"
|
||||
);
|
||||
menuItems?.classList.toggle("display-none");
|
||||
if (!menuBtn || !menuItems || !menuIcon || !closeIcon) return;
|
||||
|
||||
menuBtn.addEventListener("click", () => {
|
||||
const openMenu = menuBtn.getAttribute("aria-expanded") === "true";
|
||||
|
||||
menuBtn.setAttribute("aria-expanded", openMenu ? "false" : "true");
|
||||
menuBtn.setAttribute("aria-label", openMenu ? "Open Menu" : "Close Menu");
|
||||
|
||||
menuItems.classList.toggle("hidden");
|
||||
menuIcon.classList.toggle("hidden");
|
||||
closeIcon.classList.toggle("hidden");
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -8,5 +8,5 @@ const { noPadding = false, ariaHidden = true } = Astro.props;
|
||||
---
|
||||
|
||||
<div class={`max-w-3xl mx-auto ${noPadding ? "px-0" : "px-4"}`}>
|
||||
<hr class="border-skin-line" aria-hidden={ariaHidden} />
|
||||
<hr class="border-border" aria-hidden={ariaHidden} />
|
||||
</div>
|
||||
|
||||
@ -1,15 +1,17 @@
|
||||
---
|
||||
export interface Props {
|
||||
id?: string;
|
||||
href: string;
|
||||
className?: string;
|
||||
class?: string;
|
||||
ariaLabel?: string;
|
||||
title?: string;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
const {
|
||||
id,
|
||||
href,
|
||||
className = "",
|
||||
class: className = "",
|
||||
ariaLabel,
|
||||
title,
|
||||
disabled = false,
|
||||
@ -19,6 +21,7 @@ const {
|
||||
{
|
||||
disabled ? (
|
||||
<span
|
||||
id={id}
|
||||
class:list={["group inline-block", className]}
|
||||
title={title}
|
||||
aria-disabled={disabled}
|
||||
@ -27,8 +30,9 @@ const {
|
||||
</span>
|
||||
) : (
|
||||
<a
|
||||
id={id}
|
||||
{href}
|
||||
class:list={["group inline-block hover:text-skin-accent", className]}
|
||||
class:list={["group inline-block hover:text-accent", className]}
|
||||
aria-label={ariaLabel}
|
||||
title={title}
|
||||
>
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
---
|
||||
import type { Page } from "astro";
|
||||
import LinkButton from "./LinkButton.astro";
|
||||
import type { CollectionEntry } from "astro:content";
|
||||
import IconArrowLeft from "@/assets/icons/IconArrowLeft.svg";
|
||||
import IconArrowRight from "@/assets/icons/IconArrowRight.svg";
|
||||
import LinkButton from "./LinkButton.astro";
|
||||
|
||||
export interface Props {
|
||||
page: Page<CollectionEntry<"blog">>;
|
||||
@ -12,48 +14,26 @@ const { page } = Astro.props;
|
||||
|
||||
{
|
||||
page.lastPage > 1 && (
|
||||
<nav class="pagination-wrapper" aria-label="Pagination">
|
||||
<nav class="mt-auto mb-8 flex justify-center" aria-label="Pagination">
|
||||
<LinkButton
|
||||
disabled={!page.url.prev}
|
||||
href={page.url.prev as string}
|
||||
className={`mr-4 select-none ${page.url.prev ? "" : "disabled"}`}
|
||||
class:list={["mr-4 select-none", { "opacity-50": !page.url.prev }]}
|
||||
ariaLabel="Previous"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class:list={[{ "disabled-svg": !page.url.prev }]}
|
||||
>
|
||||
<path d="M12.707 17.293 8.414 13H18v-2H8.414l4.293-4.293-1.414-1.414L4.586 12l6.707 6.707z" />
|
||||
</svg>
|
||||
<IconArrowLeft class="inline-block" />
|
||||
Prev
|
||||
</LinkButton>
|
||||
{page.currentPage} / {page.lastPage}
|
||||
<LinkButton
|
||||
disabled={!page.url.next}
|
||||
href={page.url.next as string}
|
||||
className={`mx-4 select-none ${page.url.next ? "" : "disabled"}`}
|
||||
class:list={["ml-4 select-none", { "opacity-50": !page.url.next }]}
|
||||
ariaLabel="Next"
|
||||
>
|
||||
Next
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class:list={[{ "disabled-svg": !page.url.next }]}
|
||||
>
|
||||
<path d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z" />
|
||||
</svg>
|
||||
<IconArrowRight class="inline-block" />
|
||||
</LinkButton>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
|
||||
<style>
|
||||
.pagination-wrapper {
|
||||
@apply mb-8 mt-auto flex justify-center;
|
||||
}
|
||||
.disabled {
|
||||
@apply pointer-events-none select-none opacity-50 hover:text-skin-base group-hover:fill-skin-base;
|
||||
}
|
||||
.disabled-svg {
|
||||
@apply group-hover:!fill-skin-base;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,120 +0,0 @@
|
||||
import Fuse from "fuse.js";
|
||||
import { useEffect, useRef, useState, useMemo, type FormEvent } from "react";
|
||||
import Card from "@components/Card";
|
||||
import type { CollectionEntry } from "astro:content";
|
||||
|
||||
export type SearchItem = {
|
||||
title: string;
|
||||
description: string;
|
||||
data: CollectionEntry<"blog">["data"];
|
||||
slug: string;
|
||||
};
|
||||
|
||||
interface Props {
|
||||
searchList: SearchItem[];
|
||||
}
|
||||
|
||||
interface SearchResult {
|
||||
item: SearchItem;
|
||||
refIndex: number;
|
||||
}
|
||||
|
||||
export default function SearchBar({ searchList }: Props) {
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const [inputVal, setInputVal] = useState("");
|
||||
const [searchResults, setSearchResults] = useState<SearchResult[] | null>(
|
||||
null
|
||||
);
|
||||
|
||||
const handleChange = (e: FormEvent<HTMLInputElement>) => {
|
||||
setInputVal(e.currentTarget.value);
|
||||
};
|
||||
|
||||
const fuse = useMemo(
|
||||
() =>
|
||||
new Fuse(searchList, {
|
||||
keys: ["title", "description"],
|
||||
includeMatches: true,
|
||||
minMatchCharLength: 2,
|
||||
threshold: 0.5,
|
||||
}),
|
||||
[searchList]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
// if URL has search query,
|
||||
// insert that search query in input field
|
||||
const searchUrl = new URLSearchParams(window.location.search);
|
||||
const searchStr = searchUrl.get("q");
|
||||
if (searchStr) setInputVal(searchStr);
|
||||
|
||||
// put focus cursor at the end of the string
|
||||
setTimeout(function () {
|
||||
inputRef.current!.selectionStart = inputRef.current!.selectionEnd =
|
||||
searchStr?.length || 0;
|
||||
}, 50);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
// Add search result only if
|
||||
// input value is more than one character
|
||||
const inputResult = inputVal.length > 1 ? fuse.search(inputVal) : [];
|
||||
setSearchResults(inputResult);
|
||||
|
||||
// Update search string in URL
|
||||
if (inputVal.length > 0) {
|
||||
const searchParams = new URLSearchParams(window.location.search);
|
||||
searchParams.set("q", inputVal);
|
||||
const newRelativePathQuery =
|
||||
window.location.pathname + "?" + searchParams.toString();
|
||||
history.replaceState(history.state, "", newRelativePathQuery);
|
||||
} else {
|
||||
history.replaceState(history.state, "", window.location.pathname);
|
||||
}
|
||||
}, [inputVal]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<label className="relative block">
|
||||
<span className="absolute inset-y-0 left-0 flex items-center pl-2 opacity-75">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="M19.023 16.977a35.13 35.13 0 0 1-1.367-1.384c-.372-.378-.596-.653-.596-.653l-2.8-1.337A6.962 6.962 0 0 0 16 9c0-3.859-3.14-7-7-7S2 5.141 2 9s3.14 7 7 7c1.763 0 3.37-.66 4.603-1.739l1.337 2.8s.275.224.653.596c.387.363.896.854 1.384 1.367l1.358 1.392.604.646 2.121-2.121-.646-.604c-.379-.372-.885-.866-1.391-1.36zM9 14c-2.757 0-5-2.243-5-5s2.243-5 5-5 5 2.243 5 5-2.243 5-5 5z"></path>
|
||||
</svg>
|
||||
<span className="sr-only">Search</span>
|
||||
</span>
|
||||
<input
|
||||
className="block w-full rounded border border-skin-fill/40 bg-skin-fill py-3 pl-10 pr-3 placeholder:italic focus:border-skin-accent focus:outline-none"
|
||||
placeholder="Search for anything..."
|
||||
type="text"
|
||||
name="search"
|
||||
value={inputVal}
|
||||
onChange={handleChange}
|
||||
autoComplete="off"
|
||||
// autoFocus
|
||||
ref={inputRef}
|
||||
/>
|
||||
</label>
|
||||
|
||||
{inputVal.length > 1 && (
|
||||
<div className="mt-8">
|
||||
Found {searchResults?.length}
|
||||
{searchResults?.length && searchResults?.length === 1
|
||||
? " result"
|
||||
: " results"}{" "}
|
||||
for '{inputVal}'
|
||||
</div>
|
||||
)}
|
||||
|
||||
<ul>
|
||||
{searchResults &&
|
||||
searchResults.map(({ item, refIndex }) => (
|
||||
<Card
|
||||
href={`/posts/${item.slug}/`}
|
||||
frontmatter={item.data}
|
||||
key={`${refIndex}-${item.slug}`}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,71 +1,26 @@
|
||||
---
|
||||
import { SHARE_LINKS } from "@/constants";
|
||||
import LinkButton from "./LinkButton.astro";
|
||||
import socialIcons from "@assets/socialIcons";
|
||||
|
||||
const URL = Astro.url;
|
||||
|
||||
const shareLinks = [
|
||||
{
|
||||
Bluesky: "Bluesky",
|
||||
href: "https://bsky.app/intent/compose?text=",
|
||||
linkTitle: `Share this post on Bluesky`,
|
||||
},
|
||||
{
|
||||
LinkedIn: "LinkedIn",
|
||||
href: "https://www.linkedin.com/sharing/share-offsite/?url=",
|
||||
linkTitle: `Share this post on LinkedIn`,
|
||||
},
|
||||
{
|
||||
name: "Facebook",
|
||||
href: "https://www.facebook.com/sharer.php?u=",
|
||||
linkTitle: `Share this post on Facebook`,
|
||||
},
|
||||
{
|
||||
name: "X",
|
||||
href: "https://x.com/intent/post?url=",
|
||||
linkTitle: `Share this post on X`,
|
||||
},
|
||||
{
|
||||
name: "Telegram",
|
||||
href: "https://t.me/share/url?url=",
|
||||
linkTitle: `Share this post via Telegram`,
|
||||
},
|
||||
{
|
||||
name: "Pinterest",
|
||||
href: "https://pinterest.com/pin/create/button/?url=",
|
||||
linkTitle: `Share this post on Pinterest`,
|
||||
},
|
||||
{
|
||||
name: "Mail",
|
||||
href: "mailto:?subject=See%20this%20post&body=",
|
||||
linkTitle: `Share this post via email`,
|
||||
},
|
||||
] as const;
|
||||
---
|
||||
|
||||
<div class={`social-icons`}>
|
||||
<div
|
||||
class="flex flex-col flex-wrap items-center justify-center gap-1 sm:items-start"
|
||||
>
|
||||
<span class="italic">Share this post on:</span>
|
||||
<div class="text-center">
|
||||
{
|
||||
shareLinks.map(social => (
|
||||
SHARE_LINKS.map(social => (
|
||||
<LinkButton
|
||||
href={`${social.href + URL}`}
|
||||
className="link-button"
|
||||
class="scale-90 p-2 hover:rotate-6 sm:p-1"
|
||||
title={social.linkTitle}
|
||||
>
|
||||
<Fragment set:html={socialIcons[social.name]} />
|
||||
<social.icon class="inline-block size-6 scale-125 fill-transparent stroke-current stroke-2 opacity-90 group-hover:fill-transparent sm:scale-110" />
|
||||
<span class="sr-only">{social.linkTitle}</span>
|
||||
</LinkButton>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.social-icons {
|
||||
@apply flex flex-col flex-wrap items-center justify-center gap-1 sm:items-start;
|
||||
}
|
||||
.link-button {
|
||||
@apply scale-90 p-2 hover:rotate-6 sm:p-1;
|
||||
}
|
||||
</style>
|
||||
|
||||
20
src/components/Socials.astro
Executable file → Normal file
20
src/components/Socials.astro
Executable file → Normal file
@ -1,7 +1,6 @@
|
||||
---
|
||||
import { SOCIALS } from "@config";
|
||||
import { SOCIALS } from "@/constants";
|
||||
import LinkButton from "./LinkButton.astro";
|
||||
import socialIcons from "@assets/socialIcons";
|
||||
|
||||
export interface Props {
|
||||
centered?: boolean;
|
||||
@ -10,26 +9,17 @@ export interface Props {
|
||||
const { centered = false } = Astro.props;
|
||||
---
|
||||
|
||||
<div class={`social-icons ${centered ? "flex" : ""}`}>
|
||||
<div class:list={["flex-wrap justify-center gap-1", { flex: centered }]}>
|
||||
{
|
||||
SOCIALS.filter(social => social.active).map(social => (
|
||||
SOCIALS.map(social => (
|
||||
<LinkButton
|
||||
href={social.href}
|
||||
className="link-button"
|
||||
class="p-2 hover:rotate-6 sm:p-1"
|
||||
title={social.linkTitle}
|
||||
>
|
||||
<Fragment set:html={socialIcons[social.name]} />
|
||||
<social.icon class="inline-block size-6 scale-125 fill-transparent stroke-current stroke-2 opacity-90 group-hover:fill-transparent sm:scale-110" />
|
||||
<span class="sr-only">{social.linkTitle}</span>
|
||||
</LinkButton>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.social-icons {
|
||||
@apply flex-wrap justify-center gap-1;
|
||||
}
|
||||
.link-button {
|
||||
@apply p-2 hover:rotate-6 sm:p-1;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,38 +1,36 @@
|
||||
---
|
||||
import IconHash from "@/assets/icons/IconHash.svg";
|
||||
|
||||
export interface Props {
|
||||
tag: string;
|
||||
tagName: string;
|
||||
size?: "sm" | "lg";
|
||||
}
|
||||
|
||||
const { tag, size = "sm" } = Astro.props;
|
||||
const { tag, tagName, size = "sm" } = Astro.props;
|
||||
---
|
||||
|
||||
<li
|
||||
class={`inline-block ${
|
||||
size === "sm" ? "my-1 underline-offset-4" : "my-3 mx-1 underline-offset-8"
|
||||
}`}
|
||||
class:list={[
|
||||
"group inline-block group-hover:cursor-pointer",
|
||||
size === "sm" ? "my-1 underline-offset-4" : "mx-1 my-3 underline-offset-8",
|
||||
]}
|
||||
>
|
||||
<a
|
||||
href={`/tags/${tag}/`}
|
||||
transition:name={tag}
|
||||
class={`${size === "sm" ? "text-sm" : "text-lg"} pr-2 group`}
|
||||
class:list={[
|
||||
"relative pr-2 text-lg underline decoration-dashed group-hover:-top-0.5 group-hover:text-accent focus-visible:p-1",
|
||||
{ "text-sm": size === "sm" },
|
||||
]}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class={`${size === "sm" ? " scale-75" : "scale-110"}`}
|
||||
><path
|
||||
d="M16.018 3.815 15.232 8h-4.966l.716-3.815-1.964-.37L8.232 8H4v2h3.857l-.751 4H3v2h3.731l-.714 3.805 1.965.369L8.766 16h4.966l-.714 3.805 1.965.369.783-4.174H20v-2h-3.859l.751-4H21V8h-3.733l.716-3.815-1.965-.37zM14.106 14H9.141l.751-4h4.966l-.752 4z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>{tag}</span>
|
||||
<IconHash
|
||||
class:list={[
|
||||
"inline-block opacity-80",
|
||||
{ "-mr-3.5 size-4": size === "sm" },
|
||||
{ "-mr-5 size-6": size === "lg" },
|
||||
]}
|
||||
/>
|
||||
<span>{tagName}</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<style>
|
||||
a {
|
||||
@apply relative underline decoration-dashed hover:-top-0.5 hover:text-skin-accent focus-visible:p-1;
|
||||
}
|
||||
a svg {
|
||||
@apply -mr-5 h-6 w-6 scale-95 text-skin-base opacity-80 group-hover:fill-skin-accent;
|
||||
}
|
||||
</style>
|
||||
|
||||
146
src/config.ts
146
src/config.ts
@ -1,6 +1,4 @@
|
||||
import type { Site, SocialObjects } from "./types";
|
||||
|
||||
export const SITE: Site = {
|
||||
export const SITE = {
|
||||
website: "https://tiff.engineer/", // replace this with your deployed domain
|
||||
author: "tiff w",
|
||||
profile: "https://about.tiff.engineer/",
|
||||
@ -12,150 +10,10 @@ export const SITE: Site = {
|
||||
postPerPage: 3,
|
||||
scheduledPostMargin: 15 * 60 * 1000, // 15 minutes
|
||||
showArchives: true,
|
||||
showBackButton: true, // show back button in post detail
|
||||
editPost: {
|
||||
url: "https://github.com/satnaing/astro-paper/edit/main/src/content/blog",
|
||||
text: "Suggest Changes",
|
||||
appendFilePath: true,
|
||||
},
|
||||
};
|
||||
|
||||
export const LOCALE = {
|
||||
lang: "en", // html lang code. Set this empty and default will be "en"
|
||||
langTag: ["en-EN"], // BCP 47 Language Tags. Set this empty [] to use the environment default
|
||||
} as const;
|
||||
|
||||
export const LOGO_IMAGE = {
|
||||
enable: false,
|
||||
svg: true,
|
||||
width: 216,
|
||||
height: 46,
|
||||
};
|
||||
|
||||
export const SOCIALS: SocialObjects = [
|
||||
{
|
||||
name: "Github",
|
||||
href: "https://github.com/twhite96",
|
||||
linkTitle: ` ${SITE.title} on Github`,
|
||||
active: true,
|
||||
},
|
||||
{
|
||||
name: "Facebook",
|
||||
href: "https://github.com/satnaing/astro-paper",
|
||||
linkTitle: `${SITE.title} on Facebook`,
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
name: "Instagram",
|
||||
href: "https://github.com/satnaing/astro-paper",
|
||||
linkTitle: `${SITE.title} on Instagram`,
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
name: "LinkedIn",
|
||||
href: "https://github.com/satnaing/astro-paper",
|
||||
linkTitle: `${SITE.title} on LinkedIn`,
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
name: "Mail",
|
||||
href: "mailto:yourmail@gmail.com",
|
||||
linkTitle: `Send an email to ${SITE.title}`,
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
name: "X",
|
||||
href: "https://github.com/satnaing/astro-paper",
|
||||
linkTitle: `${SITE.title} on X`,
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
name: "Twitch",
|
||||
href: "https://github.com/satnaing/astro-paper",
|
||||
linkTitle: `${SITE.title} on Twitch`,
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
name: "YouTube",
|
||||
href: "https://github.com/satnaing/astro-paper",
|
||||
linkTitle: `${SITE.title} on YouTube`,
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
name: "WhatsApp",
|
||||
href: "https://github.com/satnaing/astro-paper",
|
||||
linkTitle: `${SITE.title} on WhatsApp`,
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
name: "Snapchat",
|
||||
href: "https://github.com/satnaing/astro-paper",
|
||||
linkTitle: `${SITE.title} on Snapchat`,
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
name: "Pinterest",
|
||||
href: "https://github.com/satnaing/astro-paper",
|
||||
linkTitle: `${SITE.title} on Pinterest`,
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
name: "TikTok",
|
||||
href: "https://github.com/satnaing/astro-paper",
|
||||
linkTitle: `${SITE.title} on TikTok`,
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
name: "CodePen",
|
||||
href: "https://github.com/satnaing/astro-paper",
|
||||
linkTitle: `${SITE.title} on CodePen`,
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
name: "Discord",
|
||||
href: "https://github.com/satnaing/astro-paper",
|
||||
linkTitle: `${SITE.title} on Discord`,
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
name: "GitLab",
|
||||
href: "https://github.com/satnaing/astro-paper",
|
||||
linkTitle: `${SITE.title} on GitLab`,
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
name: "Reddit",
|
||||
href: "https://github.com/satnaing/astro-paper",
|
||||
linkTitle: `${SITE.title} on Reddit`,
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
name: "Skype",
|
||||
href: "https://github.com/satnaing/astro-paper",
|
||||
linkTitle: `${SITE.title} on Skype`,
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
name: "Steam",
|
||||
href: "https://github.com/satnaing/astro-paper",
|
||||
linkTitle: `${SITE.title} on Steam`,
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
name: "Telegram",
|
||||
href: "https://github.com/satnaing/astro-paper",
|
||||
linkTitle: `${SITE.title} on Telegram`,
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
name: "Mastodon",
|
||||
href: "https://hachyderm.io/@tiff",
|
||||
linkTitle: `${SITE.title} on Mastodon`,
|
||||
active: true,
|
||||
},
|
||||
{
|
||||
name: "Bluesky",
|
||||
href: "https://bsky.app/profile/tiff.engineer",
|
||||
linkTitle: `${SITE.title} on Bluesky`,
|
||||
active: true,
|
||||
},
|
||||
];
|
||||
|
||||
45
src/constants.ts
Normal file
45
src/constants.ts
Normal file
@ -0,0 +1,45 @@
|
||||
import IconMail from "@/assets/icons/IconMail.svg";
|
||||
import IconGitHub from "@/assets/icons/IconGitHub.svg";
|
||||
import IconBluesky from "@/assets/icons/IconBluesky.svg";
|
||||
import IconBrandX from "@/assets/icons/IconBrandX.svg";
|
||||
import IconLinkedin from "@/assets/icons/IconLinkedin.svg";
|
||||
import IconWhatsapp from "@/assets/icons/IconWhatsapp.svg";
|
||||
import IconFacebook from "@/assets/icons/IconFacebook.svg";
|
||||
import IconTelegram from "@/assets/icons/IconTelegram.svg";
|
||||
import IconPinterest from "@/assets/icons/IconPinterest.svg";
|
||||
import { SITE } from "@/config";
|
||||
|
||||
export const LOCALE = {
|
||||
lang: "en", // html lang code. Set this empty and default will be "en"
|
||||
langTag: ["en-EN"], // BCP 47 Language Tags. Set this empty [] to use the environment default
|
||||
} as const;
|
||||
|
||||
export const SOCIALS = [
|
||||
{
|
||||
name: "Github",
|
||||
href: "https://github.com/twhite96",
|
||||
linkTitle: ` ${SITE.title} on Github`,
|
||||
icon: IconGitHub,
|
||||
},
|
||||
{
|
||||
name: "Mail",
|
||||
href: "mailto:yourmail@gmail.com",
|
||||
linkTitle: `Send an email to ${SITE.title}`,
|
||||
icon: IconMail,
|
||||
},
|
||||
] as const;
|
||||
|
||||
export const SHARE_LINKS = [
|
||||
{
|
||||
name: "Mail",
|
||||
href: "mailto:?subject=See%20this%20post&body=",
|
||||
linkTitle: `Share this post via email`,
|
||||
icon: IconMail,
|
||||
},
|
||||
{
|
||||
name: "Bluesky",
|
||||
href: `https://bsky.app/intent/compose?{text}`,
|
||||
linkTitle: `Share this post on Bluesky`,
|
||||
icon: IconBluesky,
|
||||
},
|
||||
] as const;
|
||||
@ -1,10 +1,9 @@
|
||||
import { SITE } from "@config";
|
||||
import { glob } from "astro/loaders";
|
||||
import { defineCollection, z } from "astro:content";
|
||||
import { glob } from "astro/loaders";
|
||||
import { SITE } from "@/config";
|
||||
|
||||
const blog = defineCollection({
|
||||
type: "content_layer",
|
||||
loader: glob({ pattern: "**/*.md", base: "./src/content/blog" }),
|
||||
loader: glob({ pattern: "**/[^_]*.md", base: "./src/data/blog" }),
|
||||
schema: ({ image }) =>
|
||||
z.object({
|
||||
author: z.string().default(SITE.author),
|
||||
59
src/data/blog/i-hated-social-media.md
Normal file
59
src/data/blog/i-hated-social-media.md
Normal file
@ -0,0 +1,59 @@
|
||||
---
|
||||
title: I hated social media before it was cool
|
||||
description: I used to read blogs and BB Forums, but you probably never heard of them.
|
||||
pubDatetime: 2025-03-08
|
||||
tags:
|
||||
- thoughts
|
||||
---
|
||||
|
||||
One of the things I've noticed about myself as I've gotten older is that I don't enjoy social media. Hardly ever did. The last time I was excited on social media was on Twitter circa 2009-2013, and then from 2014-2016.
|
||||
|
||||
I had a Facebook account because that is how you networked as a broke writer trying to forge her way into the prestigious Iowa Writer's Workshop MFA program[^1].
|
||||
|
||||
I had a public account and was on my phone way more than I should have been. Facebook was decent enough back then with apps like NetworkedBlogs to grab feeds from your favorite writer's blogs. A lot of folks were on BlogTalkRadio Network talking about their work.
|
||||
|
||||
There was even a time when I was working out a bunch and was into watching The Biggest Loser and following fitness channels on YouTube and Clean Eating Facebook groups. It felt like I belonged somewhere. A neurodivergent nerd without money whose close friends didn't really give a shit about her interests nor did they understand them? It felt like I "found my tribe".
|
||||
|
||||
But around 2012, 2013 I noticed a shift in the way I interacted with it. I was on it too much, I was saying too much, and I was noticing some awful stuff being said by people I formerly respected and bought their work. I wanted to delete my account. I said it on my "Wall".
|
||||
|
||||
One of my favorite people there messaged me and told me to stay; not having a Facebook account was career suicide and I really needed to stay. And so, like an addict, I kept my account.
|
||||
|
||||
## Nothing changed
|
||||
|
||||
I kept opening the app. I kept getting swept up into arguments with people who would dig in even if they were shown new evidence. 2016 happened and I was disillusioned. I deactivated my account several times. But I would come back, thinking that while I culled my friends list, these people _were_ my friends and they actually really care about me.
|
||||
|
||||
But when I logged back in, most people hadn't even noticed I was gone. They didn't know until I said that I was back; they didn't know I left in the first place. It was eye-opening. What I thought were my friends were people who had their own lives and shit to do that my absence didn't register because at the end of the day, most of those people have never met me and don't really know me, despite the amount of oversharing I did there.
|
||||
|
||||
When the shit jumped off after That Car Guy bought That Social Media Site I deleted my Facebook account, I deleted my Twitter accounts, and I signed up for Fediverse accounts, securing my username for the future.
|
||||
|
||||
Initially I liked it; it was new and cool and people were pretty awesome. But no one really interacted there. On my two most active accounts only one is enjoyable to use when it isn't football season. I feel broken every time I open my personal Mastodon account.
|
||||
|
||||
I get hardly any traction on my Bluesky account where I would like it, and the people I follow who I used to follow on Twitter are the same people with the same perspectives but being in the fray there just isn't appealing to me. I hate seeing the world burn on a neverending firehose of timelines. I already have my mental health challenges and watching, and reading, all of this is doing a number on me. I can't do it.
|
||||
|
||||
## RSS, blogs, and FreeTube
|
||||
|
||||
|
||||
_RSS in Reeder Classic_
|
||||
|
||||
Fortunately RSS is still alive and kicking. I've found some pretty interesting blogs by using Kagi's version of what the oldheads used to [call](https://en.wikipedia.org/wiki/StumbleUpon) [StumbleUpon](https://web.archive.org/web/20090918020125/http://www.stumbleupon.com/) called [Kagi Small Web](https://kagi.com/smallweb/) where it will serve you up a random blog post and you can decide to "Appreciate" the post by visiting the website/blog.
|
||||
|
||||
|
||||
_Kagi Small Web landing page_
|
||||
|
||||
What a revelation to me and I am glad I found it. It is a bookmark in my browser that I click whenever I need something interesting to read. If the post is interesting or thought-provoking, I'll visit the site and look through it, and if I like what I'm reading I'll add it to my RSS reader of choice and check in daily.
|
||||
|
||||
[FreeTube](https://github.com/FreeTubeApp/FreeTube) is an app to scrape YouTube and it is such a powerful tool because of YouTube's RSS feeds and a proxy service I won't name here.
|
||||
|
||||
But I use FreeTube as a way to keep the channels I actually learn things from separate from the random sports and game clips I watch to fill time.
|
||||
|
||||
## What this means for my social media usage
|
||||
|
||||
A lot of people I've seen on the internet have completely removed themselves from social media entirely, keeping a small circle of people they care about and who care about them updated in a newsletter or private blog post. This makes sense and something I may look into.
|
||||
|
||||
I will be deleting most of my social accounts except for Reddit, YouTube, and a one or two Mastodon servers. That's where I am at the moment.
|
||||
|
||||
My brain is tired of rot and craves learning new things. I may be old but I am forever curious and wanting to tinker with things. I also miss reading books and working with my hands, as well as writing software.
|
||||
|
||||
I have IRL friends and family that _actually_ know me and who I am and so I don't need to perform on these social apps and I don't need to watch the world burn around me in real-time, in 4K.
|
||||
|
||||
[^1]: Little did I know, or understand, that you have to have money to get your MFA, that or at least _come_ from money. Trust fund babies get MFAs, not late 20 something poor people.
|
||||
@ -7,7 +7,7 @@ tags:
|
||||
- linux series
|
||||
---
|
||||
|
||||
<small><em>My messy desk working on setting up Fedora with Hyprland and Waybar</em></small>
|
||||
<small><em>My messy desk working on setting up Fedora with Hyprland and Waybar</em></small>
|
||||
|
||||
I've been living that motel life now for a couple months. While it is just a room, it is bigger, cleaner, and better for me all around.
|
||||
|
||||
@ -42,13 +42,13 @@ Learning _how_ Linux works takes a good amount of time and research. I only sugg
|
||||
### On the Dell
|
||||
|
||||
Fedora 41 Workstation with GNOME Desktop
|
||||
|
||||
|
||||
|
||||
### On Beelink NUC
|
||||
|
||||
Fedora 41 with KDE Plasma DE and Hyprland Tiling Window Manager.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Till next time
|
||||
|
||||
2
src/env.d.ts
vendored
2
src/env.d.ts
vendored
@ -1,2 +0,0 @@
|
||||
/// <reference path="../.astro/types.d.ts" />
|
||||
/// <reference types="astro/client" />
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
import { SITE } from "@config";
|
||||
import Breadcrumbs from "@components/Breadcrumbs.astro";
|
||||
import Footer from "@components/Footer.astro";
|
||||
import Header from "@components/Header.astro";
|
||||
import Header from "@/components/Header.astro";
|
||||
import Footer from "@/components/Footer.astro";
|
||||
import Breadcrumb from "@/components/Breadcrumb.astro";
|
||||
import Layout from "./Layout.astro";
|
||||
import { SITE } from "@/config";
|
||||
|
||||
export interface Props {
|
||||
frontmatter: {
|
||||
@ -16,8 +16,8 @@ const { frontmatter } = Astro.props;
|
||||
---
|
||||
|
||||
<Layout title={`${frontmatter.title} | ${SITE.title}`}>
|
||||
<Header activeNav="about" />
|
||||
<Breadcrumbs />
|
||||
<Header />
|
||||
<Breadcrumb />
|
||||
<main id="main-content">
|
||||
<section id="about" class="prose mb-28 max-w-3xl prose-img:border-0">
|
||||
<h1 class="text-2xl tracking-wider sm:text-3xl">{frontmatter.title}</h1>
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
---
|
||||
import { LOCALE, SITE } from "@config";
|
||||
import "@styles/base.css";
|
||||
import { ViewTransitions } from "astro:transitions";
|
||||
import { ClientRouter } from "astro:transitions";
|
||||
import { SITE } from "@/config";
|
||||
import { LOCALE } from "@/constants";
|
||||
import "@/styles/global.css";
|
||||
|
||||
const googleSiteVerification = import.meta.env.PUBLIC_GOOGLE_SITE_VERIFICATION;
|
||||
|
||||
@ -23,16 +24,13 @@ const {
|
||||
profile = SITE.profile,
|
||||
description = SITE.desc,
|
||||
ogImage = SITE.ogImage,
|
||||
canonicalURL = new URL(Astro.url.pathname, Astro.site).href,
|
||||
canonicalURL = new URL(Astro.url.pathname, Astro.url),
|
||||
pubDatetime,
|
||||
modDatetime,
|
||||
scrollSmooth = false,
|
||||
} = Astro.props;
|
||||
|
||||
const socialImageURL = new URL(
|
||||
ogImage ?? SITE.ogImage ?? "og.png",
|
||||
Astro.url.origin
|
||||
).href;
|
||||
const socialImageURL = new URL(ogImage ?? SITE.ogImage ?? "og.png", Astro.url);
|
||||
|
||||
const structuredData = {
|
||||
"@context": "https://schema.org",
|
||||
@ -45,7 +43,7 @@ const structuredData = {
|
||||
{
|
||||
"@type": "Person",
|
||||
name: `${author}`,
|
||||
url: `${profile}`,
|
||||
...(profile && { url: profile }),
|
||||
},
|
||||
],
|
||||
};
|
||||
@ -94,11 +92,6 @@ const structuredData = {
|
||||
)
|
||||
}
|
||||
|
||||
<!-- Goatcounter -->
|
||||
<script
|
||||
data-goatcounter="https://tiffeng.goatcounter.com/count"
|
||||
async
|
||||
src="//gc.zgo.at/count.js"></script>
|
||||
<!-- Twitter -->
|
||||
<meta property="twitter:card" content="summary_large_image" />
|
||||
<meta property="twitter:url" content={canonicalURL} />
|
||||
@ -109,22 +102,21 @@ const structuredData = {
|
||||
<!-- Google JSON-LD Structured data -->
|
||||
<script
|
||||
type="application/ld+json"
|
||||
is:inline
|
||||
set:html={JSON.stringify(structuredData)}
|
||||
/>
|
||||
|
||||
<!-- Google Font -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<!-- Enable RSS feed auto-discovery -->
|
||||
<!-- https://docs.astro.build/en/recipes/rss/#enabling-rss-feed-auto-discovery -->
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&display=swap"
|
||||
rel="preload"
|
||||
as="style"
|
||||
onload="this.onload=null; this.rel='stylesheet';"
|
||||
crossorigin
|
||||
rel="alternate"
|
||||
type="application/rss+xml"
|
||||
title={SITE.title}
|
||||
href={new URL("rss.xml", Astro.site)}
|
||||
/>
|
||||
|
||||
<meta name="theme-color" content="" />
|
||||
<meta name="fediverse:creator" content="@tiff@hachyderm.io" />
|
||||
|
||||
{
|
||||
// If PUBLIC_GOOGLE_SITE_VERIFICATION is set in the environment variable,
|
||||
// include google-site-verification tag in the heading
|
||||
@ -137,7 +129,7 @@ const structuredData = {
|
||||
)
|
||||
}
|
||||
|
||||
<ViewTransitions />
|
||||
<ClientRouter />
|
||||
|
||||
<script is:inline src="/toggle-theme.js" async></script>
|
||||
</head>
|
||||
@ -145,3 +137,12 @@ const structuredData = {
|
||||
<slot />
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
---
|
||||
import Breadcrumbs from "@components/Breadcrumbs.astro";
|
||||
import Breadcrumb from "@/components/Breadcrumb.astro";
|
||||
import { SITE } from "@/config";
|
||||
|
||||
interface StringTitleProp {
|
||||
pageTitle: string;
|
||||
@ -15,34 +16,39 @@ interface ArrayTitleProp {
|
||||
export type Props = StringTitleProp | ArrayTitleProp;
|
||||
|
||||
const { props } = Astro;
|
||||
|
||||
const backUrl = SITE.showBackButton ? Astro.url.pathname : "/";
|
||||
---
|
||||
|
||||
<Breadcrumbs />
|
||||
<main id="main-content">
|
||||
<Breadcrumb />
|
||||
<main
|
||||
data-backUrl={backUrl}
|
||||
id="main-content"
|
||||
class="mx-auto w-full max-w-3xl px-4 pb-4"
|
||||
>
|
||||
{
|
||||
"titleTransition" in props ? (
|
||||
<h1>
|
||||
<h1 class="text-2xl font-semibold sm:text-3xl">
|
||||
{props.pageTitle[0]}
|
||||
<span transition:name={props.titleTransition}>
|
||||
{props.pageTitle[1]}
|
||||
</span>
|
||||
</h1>
|
||||
) : (
|
||||
<h1>{props.pageTitle}</h1>
|
||||
<h1 class="text-2xl font-semibold sm:text-3xl">{props.pageTitle}</h1>
|
||||
)
|
||||
}
|
||||
<p>{props.pageDesc}</p>
|
||||
<p class="mt-2 mb-6 italic">{props.pageDesc}</p>
|
||||
<slot />
|
||||
</main>
|
||||
|
||||
<style>
|
||||
#main-content {
|
||||
@apply mx-auto w-full max-w-3xl px-4 pb-4;
|
||||
}
|
||||
#main-content h1 {
|
||||
@apply text-2xl font-semibold sm:text-3xl;
|
||||
}
|
||||
#main-content p {
|
||||
@apply mb-6 mt-2 italic;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
document.addEventListener("astro:page-load", () => {
|
||||
const mainContent: HTMLElement | null =
|
||||
document.querySelector("#main-content");
|
||||
const backUrl = mainContent?.dataset?.backurl;
|
||||
if (backUrl) {
|
||||
sessionStorage.setItem("backUrl", backUrl);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,13 +1,17 @@
|
||||
---
|
||||
import Layout from "@layouts/Layout.astro";
|
||||
import Header from "@components/Header.astro";
|
||||
import Footer from "@components/Footer.astro";
|
||||
import Tag from "@components/Tag.astro";
|
||||
import Datetime from "@components/Datetime";
|
||||
import type { CollectionEntry } from "astro:content";
|
||||
import { slugifyStr } from "@utils/slugify";
|
||||
import ShareLinks from "@components/ShareLinks.astro";
|
||||
import { SITE } from "@config";
|
||||
import { render, type CollectionEntry } from "astro:content";
|
||||
import Layout from "@/layouts/Layout.astro";
|
||||
import Header from "@/components/Header.astro";
|
||||
import Footer from "@/components/Footer.astro";
|
||||
import Tag from "@/components/Tag.astro";
|
||||
import Datetime from "@/components/Datetime.astro";
|
||||
import EditPost from "@/components/EditPost.astro";
|
||||
import ShareLinks from "@/components/ShareLinks.astro";
|
||||
import BackButton from "@/components/BackButton.astro";
|
||||
import { slugifyStr } from "@/utils/slugify";
|
||||
import IconChevronLeft from "@/assets/icons/IconChevronLeft.svg";
|
||||
import IconChevronRight from "@/assets/icons/IconChevronRight.svg";
|
||||
import { SITE } from "@/config";
|
||||
|
||||
export interface Props {
|
||||
post: CollectionEntry<"blog">;
|
||||
@ -28,11 +32,11 @@ const {
|
||||
editPost,
|
||||
} = post.data;
|
||||
|
||||
const { Content } = await post.render();
|
||||
const { Content } = await render(post);
|
||||
|
||||
const ogImageUrl = typeof ogImage === "string" ? ogImage : ogImage?.src;
|
||||
const ogUrl = new URL(
|
||||
ogImageUrl ?? `/posts/${slugifyStr(title)}.png`,
|
||||
ogImageUrl ?? `/posts/${slugifyStr(title)}/index.png`,
|
||||
Astro.url.origin
|
||||
).href;
|
||||
|
||||
@ -49,12 +53,12 @@ const layoutProps = {
|
||||
|
||||
/* ========== Prev/Next Posts ========== */
|
||||
|
||||
const allPosts = posts.map(({ data: { title }, slug }) => ({
|
||||
slug,
|
||||
const allPosts = posts.map(({ data: { title }, id }) => ({
|
||||
slug: id,
|
||||
title,
|
||||
}));
|
||||
|
||||
const currentPostIndex = allPosts.findIndex(a => a.slug === post.slug);
|
||||
const currentPostIndex = allPosts.findIndex(a => a.slug === post.id);
|
||||
|
||||
const prevPost = currentPostIndex !== 0 ? allPosts[currentPostIndex - 1] : null;
|
||||
const nextPost =
|
||||
@ -63,85 +67,70 @@ const nextPost =
|
||||
|
||||
<Layout {...layoutProps}>
|
||||
<Header />
|
||||
|
||||
<div class="mx-auto flex w-full max-w-3xl justify-start px-2">
|
||||
<button
|
||||
class="focus-outline mb-2 mt-8 flex hover:opacity-75"
|
||||
onclick="(() => (history.length === 1) ? window.location = '/' : history.back())()"
|
||||
<BackButton />
|
||||
<main
|
||||
id="main-content"
|
||||
class:list={[
|
||||
"mx-auto w-full max-w-3xl px-4 pb-12",
|
||||
{ "mt-8": !SITE.showBackButton },
|
||||
]}
|
||||
data-pagefind-body
|
||||
>
|
||||
<h1
|
||||
transition:name={slugifyStr(title)}
|
||||
class="inline-block text-2xl font-bold text-accent sm:text-3xl"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
><path
|
||||
d="M13.293 6.293 7.586 12l5.707 5.707 1.414-1.414L10.414 12l4.293-4.293z"
|
||||
></path>
|
||||
</svg><span>Go back</span>
|
||||
</button>
|
||||
</div>
|
||||
<main id="main-content">
|
||||
<h1 transition:name={slugifyStr(title)} class="post-title">{title}</h1>
|
||||
<Datetime
|
||||
pubDatetime={pubDatetime}
|
||||
modDatetime={modDatetime}
|
||||
size="lg"
|
||||
className="my-2"
|
||||
editPost={editPost}
|
||||
postId={post.id}
|
||||
/>
|
||||
<article id="article" class="prose mx-auto mt-8 max-w-3xl">
|
||||
{title}
|
||||
</h1>
|
||||
<div class="flex items-center gap-4">
|
||||
<Datetime
|
||||
pubDatetime={pubDatetime}
|
||||
modDatetime={modDatetime}
|
||||
size="lg"
|
||||
class="my-2"
|
||||
/>
|
||||
<EditPost class="max-sm:hidden" editPost={editPost} postId={post.id} />
|
||||
</div>
|
||||
<article id="article" class="mx-auto prose mt-8 max-w-3xl">
|
||||
<Content />
|
||||
</article>
|
||||
|
||||
<ul class="my-8">
|
||||
{tags.map(tag => <Tag tag={slugifyStr(tag)} />)}
|
||||
<hr class="my-8 border-dashed" />
|
||||
|
||||
<EditPost class="sm:hidden" editPost={editPost} postId={post.id} />
|
||||
|
||||
<ul class="mt-4 mb-8 sm:my-8">
|
||||
{tags.map(tag => <Tag tag={slugifyStr(tag)} tagName={tag} />)}
|
||||
</ul>
|
||||
|
||||
<div
|
||||
class="flex flex-col-reverse items-center justify-between gap-6 sm:flex-row-reverse sm:items-end sm:gap-4"
|
||||
class="flex flex-col items-center justify-between gap-6 sm:flex-row sm:items-end sm:gap-4"
|
||||
>
|
||||
<ShareLinks />
|
||||
|
||||
<button
|
||||
id="back-to-top"
|
||||
class="focus-outline whitespace-nowrap py-1 hover:opacity-75"
|
||||
class="focus-outline py-1 whitespace-nowrap hover:opacity-75"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="rotate-90">
|
||||
<path
|
||||
d="M13.293 6.293 7.586 12l5.707 5.707 1.414-1.414L10.414 12l4.293-4.293z"
|
||||
></path>
|
||||
</svg>
|
||||
<IconChevronLeft class="inline-block rotate-90" />
|
||||
<span>Back to Top</span>
|
||||
</button>
|
||||
|
||||
<ShareLinks />
|
||||
</div>
|
||||
|
||||
<hr class="my-6 border-dashed" />
|
||||
|
||||
<!-- Previous/Next Post Buttons -->
|
||||
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
|
||||
<div data-pagefind-ignore class="grid grid-cols-1 gap-6 sm:grid-cols-2">
|
||||
{
|
||||
prevPost && (
|
||||
<a
|
||||
href={`/posts/${prevPost.slug}`}
|
||||
class="flex w-full gap-1 hover:opacity-75"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left flex-none"
|
||||
>
|
||||
<>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M15 6l-6 6l6 6" />
|
||||
</>
|
||||
</svg>
|
||||
<IconChevronLeft class="inline-block flex-none" />
|
||||
<div>
|
||||
<span>Previous Post</span>
|
||||
<div class="text-sm text-skin-accent/85">{prevPost.title}</div>
|
||||
<div class="text-sm text-accent/85">{prevPost.title}</div>
|
||||
</div>
|
||||
</a>
|
||||
)
|
||||
@ -154,25 +143,9 @@ const nextPost =
|
||||
>
|
||||
<div>
|
||||
<span>Next Post</span>
|
||||
<div class="text-sm text-skin-accent/85">{nextPost.title}</div>
|
||||
<div class="text-sm text-accent/85">{nextPost.title}</div>
|
||||
</div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right flex-none"
|
||||
>
|
||||
<>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M9 6l6 6l-6 6" />
|
||||
</>
|
||||
</svg>
|
||||
<IconChevronRight class="inline-block flex-none" />
|
||||
</a>
|
||||
)
|
||||
}
|
||||
@ -181,15 +154,6 @@ const nextPost =
|
||||
<Footer />
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
main {
|
||||
@apply mx-auto w-full max-w-3xl px-4 pb-12;
|
||||
}
|
||||
.post-title {
|
||||
@apply text-2xl font-semibold text-skin-accent;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script is:inline data-astro-rerun>
|
||||
/** Create a progress indicator
|
||||
* at the top */
|
||||
@ -197,11 +161,11 @@ const nextPost =
|
||||
// Create the main container div
|
||||
const progressContainer = document.createElement("div");
|
||||
progressContainer.className =
|
||||
"progress-container fixed top-0 z-10 h-1 w-full bg-skin-fill";
|
||||
"progress-container fixed top-0 z-10 h-1 w-full bg-background";
|
||||
|
||||
// Create the progress bar div
|
||||
const progressBar = document.createElement("div");
|
||||
progressBar.className = "progress-bar h-1 w-0 bg-skin-accent";
|
||||
progressBar.className = "progress-bar h-1 w-0 bg-accent";
|
||||
progressBar.id = "myBar";
|
||||
|
||||
// Append the progress bar to the progress container
|
||||
@ -266,7 +230,7 @@ const nextPost =
|
||||
|
||||
const copyButton = document.createElement("button");
|
||||
copyButton.className =
|
||||
"copy-code absolute right-3 -top-3 rounded bg-skin-card px-2 py-1 text-xs leading-4 text-skin-base font-medium";
|
||||
"copy-code absolute right-3 -top-3 rounded bg-muted px-2 py-1 text-xs leading-4 text-foreground font-medium";
|
||||
copyButton.innerHTML = copyButtonLabel;
|
||||
codeBlock.setAttribute("tabindex", "0");
|
||||
codeBlock.appendChild(copyButton);
|
||||
|
||||
@ -1,34 +0,0 @@
|
||||
---
|
||||
import Layout from "@layouts/Layout.astro";
|
||||
import Main from "@layouts/Main.astro";
|
||||
import Header from "@components/Header.astro";
|
||||
import Footer from "@components/Footer.astro";
|
||||
import Pagination from "@components/Pagination.astro";
|
||||
import Card from "@components/Card";
|
||||
import { SITE } from "@config";
|
||||
import type { Page } from "astro";
|
||||
import type { CollectionEntry } from "astro:content";
|
||||
|
||||
export interface Props {
|
||||
page: Page<CollectionEntry<"blog">>;
|
||||
}
|
||||
|
||||
const { page } = Astro.props;
|
||||
---
|
||||
|
||||
<Layout title={`Posts | ${SITE.title}`}>
|
||||
<Header activeNav="posts" />
|
||||
<Main pageTitle="Posts" pageDesc="All the articles I've posted.">
|
||||
<ul>
|
||||
{
|
||||
page.data.map(({ data, slug }) => (
|
||||
<Card href={`/posts/${slug}/`} frontmatter={data} />
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</Main>
|
||||
|
||||
<Pagination {page} />
|
||||
|
||||
<Footer noMarginTop={page.lastPage > 1} />
|
||||
</Layout>
|
||||
@ -1,41 +0,0 @@
|
||||
---
|
||||
import Layout from "@layouts/Layout.astro";
|
||||
import Main from "@layouts/Main.astro";
|
||||
import Header from "@components/Header.astro";
|
||||
import Footer from "@components/Footer.astro";
|
||||
import Card from "@components/Card";
|
||||
import Pagination from "@components/Pagination.astro";
|
||||
import { SITE } from "@config";
|
||||
import type { Page } from "astro";
|
||||
import type { CollectionEntry } from "astro:content";
|
||||
|
||||
export interface Props {
|
||||
page: Page<CollectionEntry<"blog">>;
|
||||
tag: string;
|
||||
tagName: string;
|
||||
}
|
||||
|
||||
const { page, tag, tagName } = Astro.props;
|
||||
---
|
||||
|
||||
<Layout title={`Tag: ${tagName} | ${SITE.title}`}>
|
||||
<Header activeNav="tags" />
|
||||
<Main
|
||||
pageTitle={[`Tag:`, `${tagName}`]}
|
||||
titleTransition={tag}
|
||||
pageDesc={`All the articles with the tag "${tagName}".`}
|
||||
>
|
||||
<h1 slot="title" transition:name={tag}>{`Tag:${tag}`}</h1>
|
||||
<ul>
|
||||
{
|
||||
page.data.map(({ data, slug }) => (
|
||||
<Card href={`/posts/${slug}/`} frontmatter={data} />
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</Main>
|
||||
|
||||
<Pagination {page} />
|
||||
|
||||
<Footer noMarginTop={page.lastPage > 1} />
|
||||
</Layout>
|
||||
@ -1,22 +1,25 @@
|
||||
---
|
||||
import { SITE } from "@config";
|
||||
import Layout from "@layouts/Layout.astro";
|
||||
import Header from "@components/Header.astro";
|
||||
import Footer from "@components/Footer.astro";
|
||||
import LinkButton from "@components/LinkButton.astro";
|
||||
import Layout from "@/layouts/Layout.astro";
|
||||
import Header from "@/components/Header.astro";
|
||||
import Footer from "@/components/Footer.astro";
|
||||
import LinkButton from "@/components/LinkButton.astro";
|
||||
import { SITE } from "@/config";
|
||||
---
|
||||
|
||||
<Layout title={`404 Not Found | ${SITE.title}`}>
|
||||
<Header />
|
||||
|
||||
<main id="main-content">
|
||||
<div class="not-found-wrapper">
|
||||
<h1>404</h1>
|
||||
<main
|
||||
id="main-content"
|
||||
class="mx-auto flex max-w-3xl flex-1 items-center justify-center"
|
||||
>
|
||||
<div class="mb-14 flex flex-col items-center justify-center">
|
||||
<h1 class="text-9xl font-bold text-accent">404</h1>
|
||||
<span aria-hidden="true">¯\_(ツ)_/¯</span>
|
||||
<p>Page Not Found</p>
|
||||
<p class="mt-4 text-2xl sm:text-3xl">Page Not Found</p>
|
||||
<LinkButton
|
||||
href="/"
|
||||
className="my-6 text-lg underline decoration-dashed underline-offset-8"
|
||||
class="my-6 text-lg underline decoration-dashed underline-offset-8"
|
||||
>
|
||||
Go back home
|
||||
</LinkButton>
|
||||
@ -25,18 +28,3 @@ import LinkButton from "@components/LinkButton.astro";
|
||||
|
||||
<Footer />
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
#main-content {
|
||||
@apply mx-auto flex max-w-3xl flex-1 items-center justify-center;
|
||||
}
|
||||
.not-found-wrapper {
|
||||
@apply mb-14 flex flex-col items-center justify-center;
|
||||
}
|
||||
.not-found-wrapper h1 {
|
||||
@apply text-9xl font-bold text-skin-accent;
|
||||
}
|
||||
.not-found-wrapper p {
|
||||
@apply mt-4 text-2xl sm:text-3xl;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -17,4 +17,4 @@ I will only post here occasionally. What that will be will be dependent on the t
|
||||
|
||||
And that's also another reason I started this blog: I need a way to hold myself accountable. I aspire to build tools using the languages I learn. I've always half-assed the things I built, the scope too large, my experience not matching the attempts, and once I get part of the way there, there is some obstacle I feel doesn't warrant more time. I have hundreds of repos that are private that I've given up on.
|
||||
|
||||
The deal for me is this: start small. You don't have to [build a compiler in WebAssembly](https://healeycodes.com/a-custom-webassembly-compiler) to make something useful. _Just build, baby_.
|
||||
The deal for me is this: start small. You don't have to [build a compiler in WebAssembly](https://healeycodes.com/a-custom-webassembly-compiler) to make something useful. _Just build, baby_.y feedback via my [email](mailto:contact@satnaing.dev).
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
---
|
||||
import { getCollection } from "astro:content";
|
||||
import Card from "@components/Card";
|
||||
import Footer from "@components/Footer.astro";
|
||||
import Header from "@components/Header.astro";
|
||||
import { SITE } from "@config";
|
||||
import Layout from "@layouts/Layout.astro";
|
||||
import Main from "@layouts/Main.astro";
|
||||
import getPostsByGroupCondition from "@utils/getPostsByGroupCondition";
|
||||
import Main from "@/layouts/Main.astro";
|
||||
import Layout from "@/layouts/Layout.astro";
|
||||
import Header from "@/components/Header.astro";
|
||||
import Footer from "@/components/Footer.astro";
|
||||
import Card from "@/components/Card.astro";
|
||||
import getPostsByGroupCondition from "@/utils/getPostsByGroupCondition";
|
||||
import { SITE } from "@/config";
|
||||
|
||||
// Redirect to 404 page if `showArchives` config is false
|
||||
if (!SITE.showArchives) {
|
||||
@ -15,24 +15,24 @@ if (!SITE.showArchives) {
|
||||
|
||||
const posts = await getCollection("blog", ({ data }) => !data.draft);
|
||||
|
||||
const MonthMap: Record<string, string> = {
|
||||
"1": "January",
|
||||
"2": "February",
|
||||
"3": "March",
|
||||
"4": "April",
|
||||
"5": "May",
|
||||
"6": "June",
|
||||
"7": "July",
|
||||
"8": "August",
|
||||
"9": "September",
|
||||
"10": "October",
|
||||
"11": "November",
|
||||
"12": "December",
|
||||
};
|
||||
const months = [
|
||||
"January",
|
||||
"February",
|
||||
"March",
|
||||
"April",
|
||||
"May",
|
||||
"June",
|
||||
"July",
|
||||
"August",
|
||||
"September",
|
||||
"October",
|
||||
"November",
|
||||
"December",
|
||||
];
|
||||
---
|
||||
|
||||
<Layout title={`Archives | ${SITE.title}`}>
|
||||
<Header activeNav="archives" />
|
||||
<Header />
|
||||
<Main pageTitle="Archives" pageDesc="All the articles I've archived.">
|
||||
{
|
||||
Object.entries(
|
||||
@ -55,13 +55,23 @@ const MonthMap: Record<string, string> = {
|
||||
.map(([month, monthGroup]) => (
|
||||
<div class="flex flex-col sm:flex-row">
|
||||
<div class="mt-6 min-w-36 text-lg sm:my-6">
|
||||
<span class="font-bold">{MonthMap[month]}</span>
|
||||
<span class="font-bold">{months[Number(month) - 1]}</span>
|
||||
<sup class="text-xs">{monthGroup.length}</sup>
|
||||
</div>
|
||||
<ul>
|
||||
{monthGroup.map(({ data, slug }) => (
|
||||
<Card href={`/posts/${slug}`} frontmatter={data} />
|
||||
))}
|
||||
{monthGroup
|
||||
.sort(
|
||||
(a, b) =>
|
||||
Math.floor(
|
||||
new Date(b.data.pubDatetime).getTime() / 1000
|
||||
) -
|
||||
Math.floor(
|
||||
new Date(a.data.pubDatetime).getTime() / 1000
|
||||
)
|
||||
)
|
||||
.map(({ data, id }) => (
|
||||
<Card href={`/posts/${id}`} frontmatter={data} />
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
@ -69,6 +79,5 @@ const MonthMap: Record<string, string> = {
|
||||
))
|
||||
}
|
||||
</Main>
|
||||
|
||||
<Footer />
|
||||
</Layout>
|
||||
|
||||
@ -1,55 +1,53 @@
|
||||
---
|
||||
import { getCollection } from "astro:content";
|
||||
import Layout from "@layouts/Layout.astro";
|
||||
import Header from "@components/Header.astro";
|
||||
import Footer from "@components/Footer.astro";
|
||||
import LinkButton from "@components/LinkButton.astro";
|
||||
import Hr from "@components/Hr.astro";
|
||||
import Card from "@components/Card";
|
||||
import Socials from "@components/Socials.astro";
|
||||
import getSortedPosts from "@utils/getSortedPosts";
|
||||
import { SITE, SOCIALS } from "@config";
|
||||
import Layout from "@/layouts/Layout.astro";
|
||||
import Header from "@/components/Header.astro";
|
||||
import Footer from "@/components/Footer.astro";
|
||||
import Socials from "@/components/Socials.astro";
|
||||
import LinkButton from "@/components/LinkButton.astro";
|
||||
import Card from "@/components/Card.astro";
|
||||
import Hr from "@/components/Hr.astro";
|
||||
import getSortedPosts from "@/utils/getSortedPosts";
|
||||
import IconRss from "@/assets/icons/IconRss.svg";
|
||||
import IconArrowRight from "@/assets/icons/IconArrowRight.svg";
|
||||
import { SITE } from "@/config";
|
||||
import { SOCIALS } from "@/constants";
|
||||
|
||||
const posts = await getCollection("blog");
|
||||
|
||||
const sortedPosts = getSortedPosts(posts);
|
||||
const featuredPosts = sortedPosts.filter(({ data }) => data.featured);
|
||||
const recentPosts = sortedPosts.filter(({ data }) => !data.featured);
|
||||
|
||||
const socialCount = SOCIALS.filter(social => social.active).length;
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<Header />
|
||||
<main id="main-content">
|
||||
<section id="hero">
|
||||
<h1>tiff on software</h1>
|
||||
<main id="main-content" data-layout="index">
|
||||
<section id="hero" class="pt-8 pb-6">
|
||||
<h1 class="my-4 inline-block text-4xl font-bold sm:my-8 sm:text-5xl">
|
||||
tiff on software
|
||||
</h1>
|
||||
<a
|
||||
target="_blank"
|
||||
href="/rss.xml"
|
||||
class="rss-link"
|
||||
class="inline-block"
|
||||
aria-label="rss feed"
|
||||
title="RSS Feed"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="rss-icon"
|
||||
><path
|
||||
d="M19 20.001C19 11.729 12.271 5 4 5v2c7.168 0 13 5.832 13 13.001h2z"
|
||||
></path><path
|
||||
d="M12 20.001h2C14 14.486 9.514 10 4 10v2c4.411 0 8 3.589 8 8.001z"
|
||||
></path><circle cx="6" cy="18" r="2"></circle>
|
||||
</svg>
|
||||
<IconRss
|
||||
width={20}
|
||||
height={20}
|
||||
class="scale-125 stroke-accent stroke-3"
|
||||
/>
|
||||
<span class="sr-only">RSS Feed</span>
|
||||
</a>
|
||||
<div style="display:none;">
|
||||
<a rel="me" href="https://hachyderm.io/@tiff">Mastodon</a>
|
||||
</div>
|
||||
|
||||
<p>A software blog by tiff.</p>
|
||||
{
|
||||
// only display if at least one social link is enabled
|
||||
socialCount > 0 && (
|
||||
<div class="social-wrapper">
|
||||
<div class="social-links">Social Links:</div>
|
||||
SOCIALS.length > 0 && (
|
||||
<div class="mt-4 flex flex-col sm:flex-row sm:items-center">
|
||||
<div class="mr-2 mb-1 whitespace-nowrap sm:mb-0">Social Links:</div>
|
||||
<Socials />
|
||||
</div>
|
||||
)
|
||||
@ -61,12 +59,12 @@ const socialCount = SOCIALS.filter(social => social.active).length;
|
||||
{
|
||||
featuredPosts.length > 0 && (
|
||||
<>
|
||||
<section id="featured">
|
||||
<h2>Featured</h2>
|
||||
<section id="featured" class="pt-12 pb-6">
|
||||
<h2 class="text-2xl font-semibold tracking-wide">Featured</h2>
|
||||
<ul>
|
||||
{featuredPosts.map(({ data, slug }) => (
|
||||
{featuredPosts.map(({ data, id }) => (
|
||||
<Card
|
||||
href={`/posts/${slug}/`}
|
||||
href={`/posts/${id}/`}
|
||||
frontmatter={data}
|
||||
secHeading={false}
|
||||
/>
|
||||
@ -80,14 +78,14 @@ const socialCount = SOCIALS.filter(social => social.active).length;
|
||||
|
||||
{
|
||||
recentPosts.length > 0 && (
|
||||
<section id="recent-posts">
|
||||
<h2>Recent Posts</h2>
|
||||
<section id="recent-posts" class="pt-12 pb-6">
|
||||
<h2 class="text-2xl font-semibold tracking-wide">Recent Posts</h2>
|
||||
<ul>
|
||||
{recentPosts.map(
|
||||
({ data, slug }, index) =>
|
||||
({ data, id }, index) =>
|
||||
index < SITE.postPerIndex && (
|
||||
<Card
|
||||
href={`/posts/${slug}/`}
|
||||
href={`/posts/${id}/`}
|
||||
frontmatter={data}
|
||||
secHeading={false}
|
||||
/>
|
||||
@ -98,55 +96,22 @@ const socialCount = SOCIALS.filter(social => social.active).length;
|
||||
)
|
||||
}
|
||||
|
||||
<div class="all-posts-btn-wrapper">
|
||||
<div class="my-8 text-center">
|
||||
<LinkButton href="/posts/">
|
||||
All Posts
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
><path
|
||||
d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z"
|
||||
></path>
|
||||
</svg>
|
||||
<IconArrowRight class="inline-block" />
|
||||
</LinkButton>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
/* ===== Hero Section ===== */
|
||||
#hero {
|
||||
@apply pb-6 pt-8;
|
||||
}
|
||||
#hero h1 {
|
||||
@apply my-4 inline-block text-3xl font-bold sm:my-8 sm:text-5xl;
|
||||
}
|
||||
#hero .rss-link {
|
||||
@apply mb-6;
|
||||
}
|
||||
#hero .rss-icon {
|
||||
@apply mb-2 h-6 w-6 scale-110 fill-skin-accent sm:mb-3 sm:scale-125;
|
||||
}
|
||||
#hero p {
|
||||
@apply my-2;
|
||||
}
|
||||
.social-wrapper {
|
||||
@apply mt-4 flex flex-col sm:flex-row sm:items-center;
|
||||
}
|
||||
.social-links {
|
||||
@apply mb-1 mr-2 whitespace-nowrap sm:mb-0;
|
||||
}
|
||||
|
||||
/* ===== Featured & Recent Posts Sections ===== */
|
||||
#featured,
|
||||
#recent-posts {
|
||||
@apply pb-6 pt-12;
|
||||
}
|
||||
#featured h2,
|
||||
#recent-posts h2 {
|
||||
@apply text-2xl font-semibold tracking-wide;
|
||||
}
|
||||
.all-posts-btn-wrapper {
|
||||
@apply my-8 text-center;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
document.addEventListener("astro:page-load", () => {
|
||||
const indexLayout = (document.querySelector("#main-content") as HTMLElement)
|
||||
?.dataset?.layout;
|
||||
if (indexLayout) {
|
||||
sessionStorage.setItem("backUrl", "/");
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import type { APIRoute } from "astro";
|
||||
import { generateOgImageForSite } from "@utils/generateOgImages";
|
||||
import { generateOgImageForSite } from "@/utils/generateOgImages";
|
||||
|
||||
export const GET: APIRoute = async () =>
|
||||
new Response(await generateOgImageForSite(), {
|
||||
|
||||
@ -1,9 +1,14 @@
|
||||
---
|
||||
import { SITE } from "@config";
|
||||
import Posts from "@layouts/Posts.astro";
|
||||
import type { GetStaticPaths } from "astro";
|
||||
import { getCollection } from "astro:content";
|
||||
import getSortedPosts from "@utils/getSortedPosts";
|
||||
import Main from "@/layouts/Main.astro";
|
||||
import Layout from "@/layouts/Layout.astro";
|
||||
import Header from "@/components/Header.astro";
|
||||
import Footer from "@/components/Footer.astro";
|
||||
import Card from "@/components/Card.astro";
|
||||
import Pagination from "@/components/Pagination.astro";
|
||||
import getSortedPosts from "@/utils/getSortedPosts";
|
||||
import { SITE } from "@/config";
|
||||
|
||||
export const getStaticPaths = (async ({ paginate }) => {
|
||||
const posts = await getCollection("blog", ({ data }) => !data.draft);
|
||||
@ -13,4 +18,19 @@ export const getStaticPaths = (async ({ paginate }) => {
|
||||
const { page } = Astro.props;
|
||||
---
|
||||
|
||||
<Posts {page} />
|
||||
<Layout title={`Posts | ${SITE.title}`}>
|
||||
<Header />
|
||||
<Main pageTitle="Posts" pageDesc="All the articles I've posted.">
|
||||
<ul>
|
||||
{
|
||||
page.data.map(({ data, id }) => (
|
||||
<Card href={`/posts/${id}`} frontmatter={data} />
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</Main>
|
||||
|
||||
<Pagination {page} />
|
||||
|
||||
<Footer noMarginTop={page.lastPage > 1} />
|
||||
</Layout>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
import { type CollectionEntry, getCollection } from "astro:content";
|
||||
import PostDetails from "@layouts/PostDetails.astro";
|
||||
import getSortedPosts from "@utils/getSortedPosts";
|
||||
import PostDetails from "@/layouts/PostDetails.astro";
|
||||
import getSortedPosts from "@/utils/getSortedPosts";
|
||||
|
||||
export interface Props {
|
||||
post: CollectionEntry<"blog">;
|
||||
@ -11,7 +11,7 @@ export async function getStaticPaths() {
|
||||
const posts = await getCollection("blog", ({ data }) => !data.draft);
|
||||
|
||||
const postResult = posts.map(post => ({
|
||||
params: { slug: post.slug },
|
||||
params: { slug: post.id },
|
||||
props: { post },
|
||||
}));
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import type { APIRoute } from "astro";
|
||||
import { getCollection, type CollectionEntry } from "astro:content";
|
||||
import { generateOgImageForPost } from "@utils/generateOgImages";
|
||||
import { slugifyStr } from "@utils/slugify";
|
||||
import { generateOgImageForPost } from "@/utils/generateOgImages";
|
||||
import { slugifyStr } from "@/utils/slugify";
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const posts = await getCollection("blog").then(p =>
|
||||
|
||||
@ -1,17 +1,13 @@
|
||||
import type { APIRoute } from "astro";
|
||||
import { SITE } from "@config";
|
||||
|
||||
const robots = `
|
||||
User-agent: Googlebot
|
||||
Disallow: /nogooglebot/
|
||||
|
||||
const getRobotsTxt = (sitemapURL: URL) => `
|
||||
User-agent: *
|
||||
Allow: /
|
||||
|
||||
Sitemap: ${new URL("sitemap-index.xml", SITE.website).href}
|
||||
`.trim();
|
||||
Sitemap: ${sitemapURL.href}
|
||||
`;
|
||||
|
||||
export const GET: APIRoute = () =>
|
||||
new Response(robots, {
|
||||
headers: { "Content-Type": "text/plain" },
|
||||
});
|
||||
export const GET: APIRoute = ({ site }) => {
|
||||
const sitemapURL = new URL("sitemap-index.xml", site);
|
||||
return new Response(getRobotsTxt(sitemapURL));
|
||||
};
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import rss from "@astrojs/rss";
|
||||
import { getCollection } from "astro:content";
|
||||
import getSortedPosts from "@utils/getSortedPosts";
|
||||
import { SITE } from "@config";
|
||||
import getSortedPosts from "@/utils/getSortedPosts";
|
||||
import { SITE } from "@/config";
|
||||
|
||||
export async function GET() {
|
||||
const posts = await getCollection("blog");
|
||||
@ -10,8 +10,8 @@ export async function GET() {
|
||||
title: SITE.title,
|
||||
description: SITE.desc,
|
||||
site: SITE.website,
|
||||
items: sortedPosts.map(({ data, slug }) => ({
|
||||
link: `posts/${slug}/`,
|
||||
items: sortedPosts.map(({ data, id }) => ({
|
||||
link: `posts/${id}/`,
|
||||
title: data.title,
|
||||
description: data.description,
|
||||
pubDate: new Date(data.modDatetime ?? data.pubDatetime),
|
||||
|
||||
@ -1,30 +1,132 @@
|
||||
---
|
||||
import { getCollection } from "astro:content";
|
||||
import { SITE } from "@config";
|
||||
import Layout from "@layouts/Layout.astro";
|
||||
import Main from "@layouts/Main.astro";
|
||||
import Header from "@components/Header.astro";
|
||||
import Footer from "@components/Footer.astro";
|
||||
import SearchBar from "@components/Search";
|
||||
import getSortedPosts from "@utils/getSortedPosts";
|
||||
import "@pagefind/default-ui/css/ui.css";
|
||||
import Main from "@/layouts/Main.astro";
|
||||
import Layout from "@/layouts/Layout.astro";
|
||||
import Header from "@/components/Header.astro";
|
||||
import Footer from "@/components/Footer.astro";
|
||||
import { SITE } from "@/config";
|
||||
|
||||
// Retrieve all published articles
|
||||
const posts = await getCollection("blog", ({ data }) => !data.draft);
|
||||
const sortedPosts = getSortedPosts(posts);
|
||||
|
||||
// List of items to search in
|
||||
const searchList = sortedPosts.map(({ data, slug }) => ({
|
||||
title: data.title,
|
||||
description: data.description,
|
||||
data,
|
||||
slug,
|
||||
}));
|
||||
const backUrl = SITE.showBackButton ? `${Astro.url.pathname}` : "/";
|
||||
---
|
||||
|
||||
<Layout title={`Search | ${SITE.title}`}>
|
||||
<Header activeNav="search" />
|
||||
<Header />
|
||||
<Main pageTitle="Search" pageDesc="Search any article ...">
|
||||
<SearchBar client:load searchList={searchList} />
|
||||
<div id="pagefind-search" transition:persist data-backurl={backUrl}></div>
|
||||
</Main>
|
||||
<Footer />
|
||||
</Layout>
|
||||
|
||||
<script>
|
||||
function initSearch() {
|
||||
const pageFindSearch: HTMLElement | null =
|
||||
document.querySelector("#pagefind-search");
|
||||
|
||||
if (!pageFindSearch) return;
|
||||
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
|
||||
const onIdle = window.requestIdleCallback || (cb => setTimeout(cb, 1));
|
||||
|
||||
onIdle(async () => {
|
||||
// @ts-expect-error — Missing types for @pagefind/default-ui package.
|
||||
const { PagefindUI } = await import("@pagefind/default-ui");
|
||||
|
||||
// Display warning inn dev mode
|
||||
if (import.meta.env.DEV) {
|
||||
pageFindSearch.innerHTML = `
|
||||
<div class="bg-muted/75 rounded p-4 space-y-4 mb-4">
|
||||
<p><strong>DEV mode Warning! </strong>You need to build the project at least once to see the search results during development.</p>
|
||||
<code class="block bg-black text-white px-2 py-1 rounded">pnpm run build</code>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Init pagefind ui
|
||||
const search = new PagefindUI({
|
||||
element: "#pagefind-search",
|
||||
showSubResults: true,
|
||||
showImages: false,
|
||||
processTerm: function (term: string) {
|
||||
params.set("q", term); // Update the `q` parameter in the URL
|
||||
history.replaceState(history.state, "", "?" + params.toString()); // Push the new URL without reloading
|
||||
|
||||
const backUrl = pageFindSearch?.dataset?.backurl;
|
||||
sessionStorage.setItem("backUrl", backUrl + "?" + params.toString());
|
||||
|
||||
return term;
|
||||
},
|
||||
});
|
||||
|
||||
// If search param exists (eg: search?q=astro), trigger search
|
||||
const query = params.get("q");
|
||||
if (query) {
|
||||
search.triggerSearch(query);
|
||||
}
|
||||
|
||||
// Reset search param if search input is cleared
|
||||
const searchInput = document.querySelector(".pagefind-ui__search-input");
|
||||
const clearButton = document.querySelector(".pagefind-ui__search-clear");
|
||||
searchInput?.addEventListener("input", resetSearchParam);
|
||||
clearButton?.addEventListener("click", resetSearchParam);
|
||||
|
||||
function resetSearchParam(e: Event) {
|
||||
if ((e.target as HTMLInputElement)?.value.trim() === "") {
|
||||
history.replaceState(history.state, "", window.location.pathname);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener("astro:after-swap", initSearch);
|
||||
initSearch();
|
||||
</script>
|
||||
|
||||
<style is:global>
|
||||
#pagefind-search {
|
||||
--pagefind-ui-font: var(--font-mono);
|
||||
--pagefind-ui-text: var(--foreground);
|
||||
--pagefind-ui-background: var(--background);
|
||||
--pagefind-ui-border: var(--border);
|
||||
--pagefind-ui-primary: var(--accent);
|
||||
--pagefind-ui-tag: var(--background);
|
||||
--pagefind-ui-border-radius: 0.375rem;
|
||||
--pagefind-ui-border-width: 1px;
|
||||
--pagefind-ui-image-border-radius: 8px;
|
||||
--pagefind-ui-image-box-ratio: 3 / 2;
|
||||
|
||||
form::before {
|
||||
background-color: var(--foreground);
|
||||
}
|
||||
|
||||
input {
|
||||
font-weight: 400;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
input:focus-visible {
|
||||
outline: 1px solid var(--accent);
|
||||
}
|
||||
|
||||
.pagefind-ui__result-title a {
|
||||
color: var(--accent);
|
||||
outline-offset: 1px;
|
||||
outline-color: var(--accent);
|
||||
}
|
||||
|
||||
.pagefind-ui__result-title a:focus-visible,
|
||||
.pagefind-ui__search-clear:focus-visible {
|
||||
text-decoration-line: none;
|
||||
outline-width: 2px;
|
||||
outline-style: dashed;
|
||||
}
|
||||
|
||||
.pagefind-ui__result:last-of-type {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.pagefind-ui__result-nested .pagefind-ui__result-link:before {
|
||||
font-family: system-ui;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,10 +1,15 @@
|
||||
---
|
||||
import { getCollection } from "astro:content";
|
||||
import TagPosts from "@layouts/TagPosts.astro";
|
||||
import getUniqueTags from "@utils/getUniqueTags";
|
||||
import getPostsByTag from "@utils/getPostsByTag";
|
||||
import type { GetStaticPathsOptions } from "astro";
|
||||
import { SITE } from "@config";
|
||||
import Main from "@/layouts/Main.astro";
|
||||
import Layout from "@/layouts/Layout.astro";
|
||||
import Header from "@/components/Header.astro";
|
||||
import Footer from "@/components/Footer.astro";
|
||||
import Card from "@/components/Card.astro";
|
||||
import Pagination from "@/components/Pagination.astro";
|
||||
import getUniqueTags from "@/utils/getUniqueTags";
|
||||
import getPostsByTag from "@/utils/getPostsByTag";
|
||||
import { SITE } from "@/config";
|
||||
|
||||
export async function getStaticPaths({ paginate }: GetStaticPathsOptions) {
|
||||
const posts = await getCollection("blog");
|
||||
@ -26,4 +31,24 @@ const { tag } = params;
|
||||
const { page, tagName } = Astro.props;
|
||||
---
|
||||
|
||||
<TagPosts {page} {tag} {tagName} />
|
||||
<Layout title={`Tag: ${tagName} | ${SITE.title}`}>
|
||||
<Header />
|
||||
<Main
|
||||
pageTitle={[`Tag:`, `${tagName}`]}
|
||||
titleTransition={tag}
|
||||
pageDesc={`All the articles with the tag "${tagName}".`}
|
||||
>
|
||||
<h1 slot="title" transition:name={tag}>{`Tag:${tag}`}</h1>
|
||||
<ul>
|
||||
{
|
||||
page.data.map(({ data, id }) => (
|
||||
<Card href={`/posts/${id}`} frontmatter={data} />
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</Main>
|
||||
|
||||
<Pagination {page} />
|
||||
|
||||
<Footer noMarginTop={page.lastPage > 1} />
|
||||
</Layout>
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
---
|
||||
import { getCollection } from "astro:content";
|
||||
import Header from "@components/Header.astro";
|
||||
import Footer from "@components/Footer.astro";
|
||||
import Layout from "@layouts/Layout.astro";
|
||||
import Main from "@layouts/Main.astro";
|
||||
import Tag from "@components/Tag.astro";
|
||||
import getUniqueTags from "@utils/getUniqueTags";
|
||||
import { SITE } from "@config";
|
||||
import Main from "@/layouts/Main.astro";
|
||||
import Layout from "@/layouts/Layout.astro";
|
||||
import Tag from "@/components/Tag.astro";
|
||||
import Header from "@/components/Header.astro";
|
||||
import Footer from "@/components/Footer.astro";
|
||||
import getUniqueTags from "@/utils/getUniqueTags";
|
||||
import { SITE } from "@/config";
|
||||
|
||||
const posts = await getCollection("blog");
|
||||
|
||||
@ -14,10 +14,10 @@ let tags = getUniqueTags(posts);
|
||||
---
|
||||
|
||||
<Layout title={`Tags | ${SITE.title}`}>
|
||||
<Header activeNav="tags" />
|
||||
<Header />
|
||||
<Main pageTitle="Tags" pageDesc="All the tags used in posts.">
|
||||
<ul>
|
||||
{tags.map(({ tag }) => <Tag {tag} size="lg" />)}
|
||||
{tags.map(({ tag, tagName }) => <Tag {tag} {tagName} size="lg" />)}
|
||||
</ul>
|
||||
</Main>
|
||||
<Footer />
|
||||
|
||||
@ -1,151 +0,0 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root,
|
||||
html[data-theme="light"] {
|
||||
--color-fill: 238, 238, 238;
|
||||
--color-text-base: 53, 53, 56;
|
||||
--color-accent: 210, 104, 120;
|
||||
--color-card: 206, 213, 180;
|
||||
--color-card-muted: 187, 199, 137;
|
||||
--color-border: 124, 173, 255;
|
||||
}
|
||||
html[data-theme="dark"] {
|
||||
--color-fill: 53, 54, 64;
|
||||
--color-text-base: 233, 237, 241;
|
||||
--color-card: 75, 76, 89;
|
||||
--color-card-muted: 113, 85, 102;
|
||||
--color-border: 134, 67, 107;
|
||||
--color-accent: 210, 104, 120;
|
||||
}
|
||||
#sun-svg,
|
||||
html[data-theme="dark"] #moon-svg {
|
||||
display: none;
|
||||
}
|
||||
#moon-svg,
|
||||
html[data-theme="dark"] #sun-svg {
|
||||
display: block;
|
||||
}
|
||||
body {
|
||||
@apply flex min-h-[100svh] flex-col bg-skin-fill font-mono text-skin-base selection:bg-skin-accent/70 selection:text-skin-inverted;
|
||||
}
|
||||
section,
|
||||
footer {
|
||||
@apply mx-auto max-w-3xl px-4;
|
||||
}
|
||||
/* a {
|
||||
@apply outline-2 outline-offset-1 outline-skin-fill focus-visible:no-underline focus-visible:outline-dashed;
|
||||
} */
|
||||
svg {
|
||||
@apply inline-block h-6 w-6 fill-skin-base group-hover:fill-skin-accent;
|
||||
}
|
||||
svg.icon-tabler {
|
||||
@apply inline-block h-6 w-6 scale-125 fill-transparent stroke-current stroke-2 opacity-90 group-hover:fill-transparent sm:scale-110;
|
||||
}
|
||||
.prose {
|
||||
@apply prose-headings:!mb-3 prose-headings:!text-skin-base prose-h3:italic prose-p:!text-skin-base prose-a:!text-skin-base prose-a:!decoration-dashed prose-a:underline-offset-8 hover:prose-a:text-skin-accent prose-blockquote:!border-l-skin-accent/50 prose-blockquote:opacity-80 prose-figcaption:!text-skin-base prose-figcaption:opacity-70 prose-strong:!text-skin-base prose-code:rounded prose-code:bg-skin-card/75 prose-code:p-1 prose-code:before:!content-none prose-code:after:!content-none prose-ol:!text-skin-base prose-ul:overflow-x-clip prose-ul:!text-skin-base prose-li:marker:!text-skin-accent prose-table:text-skin-base prose-th:border prose-th:border-skin-line prose-td:border prose-td:border-skin-line prose-img:!my-2 prose-img:mx-auto prose-img:border-2 prose-img:border-skin-line prose-hr:!border-skin-line;
|
||||
}
|
||||
.prose a {
|
||||
@apply break-words hover:!text-skin-accent;
|
||||
}
|
||||
.prose thead th:first-child,
|
||||
tbody td:first-child,
|
||||
tfoot td:first-child {
|
||||
padding-left: 0.5714286em;
|
||||
}
|
||||
.prose h2#table-of-contents {
|
||||
@apply mb-2;
|
||||
}
|
||||
.prose details {
|
||||
@apply inline-block cursor-pointer select-none text-skin-base;
|
||||
}
|
||||
.prose summary {
|
||||
@apply focus-outline;
|
||||
}
|
||||
.prose h2#table-of-contents + p {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
/* ===== scrollbar ===== */
|
||||
html {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
/* width */
|
||||
::-webkit-scrollbar {
|
||||
@apply w-3;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
::-webkit-scrollbar-track {
|
||||
@apply bg-slate-100;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
::-webkit-scrollbar-thumb {
|
||||
@apply bg-slate-100;
|
||||
}
|
||||
|
||||
/* Handle on hover */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
@apply bg-slate-100;
|
||||
}
|
||||
|
||||
/* ===== Code Blocks & Syntax Highlighting ===== */
|
||||
pre:has(code) {
|
||||
@apply border border-gray-200;
|
||||
}
|
||||
code,
|
||||
blockquote {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.prose
|
||||
:is(
|
||||
:where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))
|
||||
) {
|
||||
border-radius: 0.25rem !important;
|
||||
color: #d26878 !important;
|
||||
background-color: #e8e8e8;
|
||||
padding: 0.25rem !important;
|
||||
}
|
||||
|
||||
.prose a {
|
||||
color: #d26878 !important;
|
||||
text-decoration: underline !important;
|
||||
text-decoration-style: solid !important;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.prose a:hover {
|
||||
text-color: #f2435d !important;
|
||||
}
|
||||
pre > code {
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
button.copy-code {
|
||||
@apply bg-slate-200;
|
||||
}
|
||||
|
||||
/* Apply Dark Theme (if multi-theme specified) */
|
||||
html[data-theme="dark"] pre:has(code),
|
||||
html[data-theme="dark"] pre:has(code) span {
|
||||
color: var(--shiki-dark) !important;
|
||||
background-color: var(--shiki-dark-bg) !important;
|
||||
font-style: var(--shiki-dark-font-style) !important;
|
||||
font-weight: var(--shiki-dark-font-weight) !important;
|
||||
text-decoration: var(--shiki-dark-text-decoration) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.display-none {
|
||||
@apply hidden;
|
||||
}
|
||||
.focus-outline {
|
||||
@apply outline-2 outline-offset-1 outline-skin-fill focus-visible:no-underline focus-visible:outline-dashed;
|
||||
}
|
||||
}
|
||||
64
src/styles/global.css
Normal file
64
src/styles/global.css
Normal file
@ -0,0 +1,64 @@
|
||||
@import "tailwindcss";
|
||||
@import "./typography.css";
|
||||
|
||||
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
|
||||
|
||||
:root,
|
||||
html[data-theme="light"] {
|
||||
--background: #EEE;
|
||||
--foreground: #282728;
|
||||
--accent: #D26878;
|
||||
--muted: #e6e6e6;
|
||||
--border: #ece9e9;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] {
|
||||
--background: #212737;
|
||||
--foreground: #eaedf3;
|
||||
--accent: #F43F5D;
|
||||
--muted: #353640;
|
||||
--border: #D26878;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-muted: var(--muted);
|
||||
--color-border: var(--border);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-accent/75;
|
||||
scrollbar-width: auto;
|
||||
scrollbar-color: var(--color-muted) transparent;
|
||||
}
|
||||
|
||||
html {
|
||||
@apply overflow-y-scroll scroll-smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply flex min-h-svh flex-col bg-background font-mono text-foreground selection:bg-accent/75 selection:text-background;
|
||||
}
|
||||
|
||||
a,
|
||||
button {
|
||||
@apply outline-offset-1 outline-accent focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-dashed;
|
||||
}
|
||||
|
||||
button:not(:disabled),
|
||||
[role="button"]:not(:disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
section,
|
||||
footer {
|
||||
@apply mx-auto max-w-3xl px-4;
|
||||
}
|
||||
}
|
||||
|
||||
.active-nav {
|
||||
@apply underline decoration-wavy decoration-2 underline-offset-4;
|
||||
}
|
||||
64
src/styles/typography.css
Normal file
64
src/styles/typography.css
Normal file
@ -0,0 +1,64 @@
|
||||
@plugin '@tailwindcss/typography';
|
||||
|
||||
@layer base {
|
||||
.prose {
|
||||
@apply prose-headings:!mb-3 prose-headings:!text-foreground prose-h3:italic prose-p:!text-foreground prose-a:!text-foreground prose-a:!decoration-dashed prose-a:underline-offset-8 hover:prose-a:text-accent prose-blockquote:!border-l-accent/50 prose-blockquote:opacity-80 prose-figcaption:!text-foreground prose-figcaption:opacity-70 prose-strong:!text-foreground prose-code:rounded prose-code:bg-muted/75 prose-code:p-1 prose-code:!text-foreground prose-code:before:!content-none prose-code:after:!content-none prose-ol:!text-foreground prose-ul:overflow-x-clip prose-ul:!text-foreground prose-li:marker:!text-accent prose-table:text-foreground prose-th:border prose-th:border-border prose-td:border prose-td:border-border prose-img:mx-auto prose-img:!my-2 prose-img:border-2 prose-img:border-border prose-hr:!border-border;
|
||||
}
|
||||
|
||||
.prose a {
|
||||
@apply break-words hover:!text-accent;
|
||||
}
|
||||
|
||||
.prose a {
|
||||
color: #d26878 !important;
|
||||
text-decoration: underline !important;
|
||||
text-decoration-style: solid !important;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.prose thead th:first-child,
|
||||
tbody td:first-child,
|
||||
tfoot td:first-child {
|
||||
padding-inline-start: 0.5714286em !important;
|
||||
}
|
||||
|
||||
.prose h2#table-of-contents {
|
||||
@apply mb-2;
|
||||
}
|
||||
|
||||
.prose details {
|
||||
@apply inline-block cursor-pointer text-foreground select-none;
|
||||
}
|
||||
|
||||
.prose summary {
|
||||
@apply focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-accent focus-visible:outline-dashed;
|
||||
}
|
||||
|
||||
.prose h2#table-of-contents+p {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
/* ===== Code Blocks & Syntax Highlighting ===== */
|
||||
pre:has(code) {
|
||||
@apply border border-border;
|
||||
}
|
||||
|
||||
code,
|
||||
blockquote {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
pre>code {
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
/* Apply Dark Theme (if multi-theme specified) */
|
||||
html[data-theme="dark"] pre:has(code),
|
||||
html[data-theme="dark"] pre:has(code) span {
|
||||
color: var(--shiki-dark) !important;
|
||||
background-color: var(--shiki-dark-bg) !important;
|
||||
font-style: var(--shiki-dark-font-style) !important;
|
||||
font-weight: var(--shiki-dark-font-weight) !important;
|
||||
text-decoration: var(--shiki-dark-text-decoration) !important;
|
||||
}
|
||||
}
|
||||
27
src/types.ts
27
src/types.ts
@ -1,27 +0,0 @@
|
||||
import type socialIcons from "@assets/socialIcons";
|
||||
|
||||
export type Site = {
|
||||
website: string;
|
||||
author: string;
|
||||
profile: string;
|
||||
desc: string;
|
||||
title: string;
|
||||
ogImage?: string;
|
||||
lightAndDarkMode: boolean;
|
||||
postPerIndex: number;
|
||||
postPerPage: number;
|
||||
scheduledPostMargin: number;
|
||||
showArchives?: boolean;
|
||||
editPost?: {
|
||||
url?: URL["href"];
|
||||
text?: string;
|
||||
appendFilePath?: boolean;
|
||||
};
|
||||
};
|
||||
|
||||
export type SocialObjects = {
|
||||
name: keyof typeof socialIcons;
|
||||
href: string;
|
||||
active: boolean;
|
||||
linkTitle: string;
|
||||
}[];
|
||||
@ -1,5 +1,5 @@
|
||||
import { slugifyStr } from "./slugify";
|
||||
import type { CollectionEntry } from "astro:content";
|
||||
import { slugifyStr } from "./slugify";
|
||||
import postFilter from "./postFilter";
|
||||
|
||||
interface Tag {
|
||||
|
||||
@ -1,12 +1,3 @@
|
||||
import type { FontStyle, FontWeight } from "satori";
|
||||
|
||||
export type FontOptions = {
|
||||
name: string;
|
||||
data: ArrayBuffer;
|
||||
weight: FontWeight | undefined;
|
||||
style: FontStyle | undefined;
|
||||
};
|
||||
|
||||
async function loadGoogleFont(
|
||||
font: string,
|
||||
text: string
|
||||
|
||||
229
src/utils/og-templates/post.js
Normal file
229
src/utils/og-templates/post.js
Normal file
@ -0,0 +1,229 @@
|
||||
import satori from "satori";
|
||||
// import { html } from "satori-html";
|
||||
import { SITE } from "@/config";
|
||||
import loadGoogleFonts from "../loadGoogleFont";
|
||||
|
||||
// const markup = html`<div
|
||||
// style={{
|
||||
// background: "#fefbfb",
|
||||
// width: "100%",
|
||||
// height: "100%",
|
||||
// display: "flex",
|
||||
// alignItems: "center",
|
||||
// justifyContent: "center",
|
||||
// }}
|
||||
// >
|
||||
// <div
|
||||
// style={{
|
||||
// position: "absolute",
|
||||
// top: "-1px",
|
||||
// right: "-1px",
|
||||
// border: "4px solid #000",
|
||||
// background: "#ecebeb",
|
||||
// opacity: "0.9",
|
||||
// borderRadius: "4px",
|
||||
// display: "flex",
|
||||
// justifyContent: "center",
|
||||
// margin: "2.5rem",
|
||||
// width: "88%",
|
||||
// height: "80%",
|
||||
// }}
|
||||
// />
|
||||
|
||||
// <div
|
||||
// style={{
|
||||
// border: "4px solid #000",
|
||||
// background: "#fefbfb",
|
||||
// borderRadius: "4px",
|
||||
// display: "flex",
|
||||
// justifyContent: "center",
|
||||
// margin: "2rem",
|
||||
// width: "88%",
|
||||
// height: "80%",
|
||||
// }}
|
||||
// >
|
||||
// <div
|
||||
// style={{
|
||||
// display: "flex",
|
||||
// flexDirection: "column",
|
||||
// justifyContent: "space-between",
|
||||
// margin: "20px",
|
||||
// width: "90%",
|
||||
// height: "90%",
|
||||
// }}
|
||||
// >
|
||||
// <p
|
||||
// style={{
|
||||
// fontSize: 72,
|
||||
// fontWeight: "bold",
|
||||
// maxHeight: "84%",
|
||||
// overflow: "hidden",
|
||||
// }}
|
||||
// >
|
||||
// {post.data.title}
|
||||
// </p>
|
||||
// <div
|
||||
// style={{
|
||||
// display: "flex",
|
||||
// justifyContent: "space-between",
|
||||
// width: "100%",
|
||||
// marginBottom: "8px",
|
||||
// fontSize: 28,
|
||||
// }}
|
||||
// >
|
||||
// <span>
|
||||
// by{" "}
|
||||
// <span
|
||||
// style={{
|
||||
// color: "transparent",
|
||||
// }}
|
||||
// >
|
||||
// "
|
||||
// </span>
|
||||
// <span style={{ overflow: "hidden", fontWeight: "bold" }}>
|
||||
// {post.data.author}
|
||||
// </span>
|
||||
// </span>
|
||||
|
||||
// <span style={{ overflow: "hidden", fontWeight: "bold" }}>
|
||||
// {SITE.title}
|
||||
// </span>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>`;
|
||||
|
||||
export default async post => {
|
||||
return satori(
|
||||
{
|
||||
type: "div",
|
||||
props: {
|
||||
style: {
|
||||
background: "#fefbfb",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: "div",
|
||||
props: {
|
||||
style: {
|
||||
position: "absolute",
|
||||
top: "-1px",
|
||||
right: "-1px",
|
||||
border: "4px solid #000",
|
||||
background: "#ecebeb",
|
||||
opacity: "0.9",
|
||||
borderRadius: "4px",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
margin: "2.5rem",
|
||||
width: "88%",
|
||||
height: "80%",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "div",
|
||||
props: {
|
||||
style: {
|
||||
border: "4px solid #000",
|
||||
background: "#fefbfb",
|
||||
borderRadius: "4px",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
margin: "2rem",
|
||||
width: "88%",
|
||||
height: "80%",
|
||||
},
|
||||
children: {
|
||||
type: "div",
|
||||
props: {
|
||||
style: {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
margin: "20px",
|
||||
width: "90%",
|
||||
height: "90%",
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: "p",
|
||||
props: {
|
||||
style: {
|
||||
fontSize: 72,
|
||||
fontWeight: "bold",
|
||||
maxHeight: "84%",
|
||||
overflow: "hidden",
|
||||
},
|
||||
children: post.data.title,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "div",
|
||||
props: {
|
||||
style: {
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
width: "100%",
|
||||
marginBottom: "8px",
|
||||
fontSize: 28,
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: "span",
|
||||
props: {
|
||||
children: [
|
||||
"by ",
|
||||
{
|
||||
type: "span",
|
||||
props: {
|
||||
style: { color: "transparent" },
|
||||
children: '"',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "span",
|
||||
props: {
|
||||
style: {
|
||||
overflow: "hidden",
|
||||
fontWeight: "bold",
|
||||
},
|
||||
children: post.data.author,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "span",
|
||||
props: {
|
||||
style: { overflow: "hidden", fontWeight: "bold" },
|
||||
children: SITE.title,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
width: 1200,
|
||||
height: 630,
|
||||
embedFont: true,
|
||||
fonts: await loadGoogleFonts(
|
||||
post.data.title + post.data.author + SITE.title + "by"
|
||||
),
|
||||
}
|
||||
);
|
||||
};
|
||||
@ -1,106 +0,0 @@
|
||||
import satori from "satori";
|
||||
import type { CollectionEntry } from "astro:content";
|
||||
import { SITE } from "@config";
|
||||
import loadGoogleFonts, { type FontOptions } from "../loadGoogleFont";
|
||||
|
||||
export default async (post: CollectionEntry<"blog">) => {
|
||||
return satori(
|
||||
<div
|
||||
style={{
|
||||
background: "#fefbfb",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "-1px",
|
||||
right: "-1px",
|
||||
border: "4px solid #000",
|
||||
background: "#ecebeb",
|
||||
opacity: "0.9",
|
||||
borderRadius: "4px",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
margin: "2.5rem",
|
||||
width: "88%",
|
||||
height: "80%",
|
||||
}}
|
||||
/>
|
||||
|
||||
<div
|
||||
style={{
|
||||
border: "4px solid #000",
|
||||
background: "#fefbfb",
|
||||
borderRadius: "4px",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
margin: "2rem",
|
||||
width: "88%",
|
||||
height: "80%",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
margin: "20px",
|
||||
width: "90%",
|
||||
height: "90%",
|
||||
}}
|
||||
>
|
||||
<p
|
||||
style={{
|
||||
fontSize: 72,
|
||||
fontWeight: "bold",
|
||||
maxHeight: "84%",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
{post.data.title}
|
||||
</p>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
width: "100%",
|
||||
marginBottom: "8px",
|
||||
fontSize: 28,
|
||||
}}
|
||||
>
|
||||
<span>
|
||||
by{" "}
|
||||
<span
|
||||
style={{
|
||||
color: "transparent",
|
||||
}}
|
||||
>
|
||||
"
|
||||
</span>
|
||||
<span style={{ overflow: "hidden", fontWeight: "bold" }}>
|
||||
{post.data.author}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span style={{ overflow: "hidden", fontWeight: "bold" }}>
|
||||
{SITE.title}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
{
|
||||
width: 1200,
|
||||
height: 630,
|
||||
embedFont: true,
|
||||
fonts: (await loadGoogleFonts(
|
||||
post.data.title + post.data.author + SITE.title + "by"
|
||||
)) as FontOptions[],
|
||||
}
|
||||
);
|
||||
};
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user