16 |
17 |
29 | )
30 | }
31 |
--------------------------------------------------------------------------------
/src/components/notion-blocks/embeds/TikTokEmbed.astro:
--------------------------------------------------------------------------------
1 | ---
2 | export interface Props {
3 | url: URL;
4 | caption: string | undefined;
5 | }
6 |
7 | const { url, caption } = Astro.props;
8 | const user = url.pathname.split("/")[1];
9 | const videoId = url.pathname.split("/")[3];
10 | //NOTE partytown does not seem to work with tiktok embed script
11 | ---
12 |
13 | 17 |
Webmentions for this post
18 |
19 |
22 | 23 | Responses powered by{" "} 24 | 25 | Webmentions 26 | 27 |
28 |
14 |
25 |
26 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/src/components/notion-blocks/annotations/Code.astro:
--------------------------------------------------------------------------------
1 | ---
2 | /* @jsxImportSource astro */
3 | import type { RichText } from "@/lib/interfaces.ts";
4 |
5 | export interface Props {
6 | richText: RichText;
7 | }
8 |
9 | const { richText } = Astro.props;
10 |
11 | const colorAnnotation = richText.Annotation.Color;
12 | const isDefaultColor =
13 | !colorAnnotation ||
14 | ["default", "default_background", "default-background"].includes(colorAnnotation);
15 | const isBackgroundColor = !isDefaultColor && colorAnnotation.includes("_background");
16 | const isTextColor = !isDefaultColor && !colorAnnotation.includes("_background");
17 | ---
18 |
19 | {
20 | richText.Annotation.Code ? (
21 | 15 |24 |16 | {user} 22 | 23 |
28 |
30 | ) : (
31 |
24 |
26 |
29 |
30 | )
31 | }
32 |
--------------------------------------------------------------------------------
/src/components/notion-blocks/embeds/astro-tweet/src/api/types/entities.ts:
--------------------------------------------------------------------------------
1 | export type Indices = [number, number];
2 |
3 | export interface HashtagEntity {
4 | indices: Indices;
5 | text: string;
6 | }
7 |
8 | export interface UserMentionEntity {
9 | id_str: string;
10 | indices: Indices;
11 | name: string;
12 | screen_name: string;
13 | }
14 |
15 | export interface MediaEntity {
16 | display_url: string;
17 | expanded_url: string;
18 | indices: Indices;
19 | url: string;
20 | }
21 |
22 | export interface UrlEntity {
23 | display_url: string;
24 | expanded_url: string;
25 | indices: Indices;
26 | url: string;
27 | }
28 |
29 | export interface SymbolEntity {
30 | indices: Indices;
31 | text: string;
32 | }
33 |
34 | export interface TweetEntities {
35 | hashtags: HashtagEntity[];
36 | urls: UrlEntity[];
37 | user_mentions: UserMentionEntity[];
38 | symbols: SymbolEntity[];
39 | media?: MediaEntity[];
40 | }
41 |
--------------------------------------------------------------------------------
/src/components/notion-blocks/embeds/astro-tweet/src/twitter-theme/tweet-replies.module.css:
--------------------------------------------------------------------------------
1 | .replies {
2 | padding: 0.25rem 0;
3 | }
4 | .link {
5 | text-decoration: none;
6 | color: var(--tweet-color-blue-secondary);
7 | display: flex;
8 | align-items: center;
9 | justify-content: center;
10 | min-width: 32px;
11 | min-height: 32px;
12 | user-select: none;
13 | outline-style: none;
14 | transition-property: background-color;
15 | transition-duration: 0.2s;
16 | padding: 0 1rem;
17 | border: var(--tweet-border);
18 | border-radius: 9999px;
19 | }
20 | .link:hover {
21 | background-color: var(--tweet-color-blue-secondary-hover);
22 | }
23 | .text {
24 | font-weight: var(--tweet-replies-font-weight);
25 | font-size: var(--tweet-replies-font-size);
26 | line-height: var(--tweet-replies-line-height);
27 | overflow-wrap: break-word;
28 | white-space: nowrap;
29 | text-overflow: ellipsis;
30 | overflow: hidden;
31 | }
32 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "astro/tsconfigs/strictest",
3 | "compilerOptions": {
4 | "baseUrl": ".",
5 | "verbatimModuleSyntax": true,
6 | "lib": ["DOM", "ES2021"],
7 | "paths": {
8 | "@/styles": ["src/styles/global.css"],
9 | "@/*": ["src/*"],
10 | "@/assets/*": ["src/assets/*"],
11 | "@/components/*": ["src/components/*"],
12 | "@/layouts/*": ["src/layouts/*"],
13 | "@/utils": ["src/utils/index.ts"],
14 | "@/utils/*": ["src/utils/*.ts"],
15 | "@/stores/*": ["src/stores/*"],
16 | "@/types": ["src/types.ts"],
17 | "@/lib/notion/*": ["src/lib/notion/*"],
18 | "@/lib/*": ["src/lib/*"],
19 | "@/siteInfo": ["src/site.config.ts"],
20 | "custom-components/*": ["src/components/custom-components/*"],
21 | "@custom-components/*": ["src/components/custom-components/*"]
22 | }
23 | },
24 | "include": ["src", "*.ts"],
25 | "exclude": ["node_modules", "**/node_modules/*", ".vscode", "dist"]
26 | }
27 |
--------------------------------------------------------------------------------
/src/components/notion-blocks/embeds/EmbedGeneric.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import { ENABLE_LIGHTBOX } from "@/constants";
3 | import Icon from "@/components/ui/Icon.astro";
4 | export interface Props {
5 | url: URL;
6 | caption: string | undefined;
7 | }
8 |
9 | const { url, caption } = Astro.props;
10 | ---
11 |
12 |
13 | {/* Icon for triggering lightbox, positioned at the bottom right corner */}
14 | {
15 | ENABLE_LIGHTBOX && (
16 |
22 |
23 |
24 | )
25 | }
26 |
32 |
33 |
--------------------------------------------------------------------------------
/src/components/notion-blocks/embeds/astro-bluesky/media-container.astro:
--------------------------------------------------------------------------------
1 | ---
2 | interface Props {
3 | aspectRatio?: { width: number; height: number } | undefined;
4 | onClick?: (() => void) | undefined;
5 | className?: string | undefined;
6 | }
7 |
8 | const { aspectRatio, onClick, className = "" } = Astro.props;
9 | ---
10 |
11 |
18 |
20 |
21 |
37 |
--------------------------------------------------------------------------------
/src/components/notion-blocks/embeds/NAudio.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import * as interfaces from "@/lib/interfaces.ts";
3 | import Caption from "@/components/notion-blocks/Caption.astro";
4 | import { filePath } from "@/lib/blog-helpers";
5 |
6 | export interface Props {
7 | block: interfaces.Block;
8 | setId?: boolean;
9 | }
10 |
11 | const { block, setId = true } = Astro.props;
12 |
13 | let url: URL | null = null;
14 | let audioUrl = "";
15 | if (block.NAudio.External) {
16 | audioUrl = block.NAudio.External?.Url;
17 | url = new URL(block.NAudio.External?.Url);
18 | } else if (block.NAudio.File) {
19 | audioUrl = filePath(new URL(block.NAudio.File.Url));
20 | }
21 | ---
22 |
23 |
24 | {
25 | audioUrl && (
26 |
29 | )
30 | }
31 |
33 |
--------------------------------------------------------------------------------
/src/components/popover/TagDescPopover.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import Icon from "@/components/ui/Icon.astro";
3 |
4 | interface Props {
5 | description: string;
6 | }
7 |
8 | const { description } = Astro.props;
9 | const id = "info-popover-" + Math.random().toString(16).slice(2);
10 | ---
11 |
12 |
17 |
18 | Show description
19 |
20 |
21 |
22 |
28 |
30 |
31 |
--------------------------------------------------------------------------------
/src/components/notion-blocks/embeds/astro-tweet/src/TweetContent.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import { getTweet } from "./api";
3 | import EmbeddedTweet from "./twitter-theme/EmbeddedTweet.astro";
4 | import TweetNotFound from "./twitter-theme/TweetNotFound.astro";
5 | import type { TwitterComponents } from "./twitter-theme/types";
6 | interface Props {
7 | id: string;
8 | components?: TwitterComponents;
9 | fetchOptions?: RequestInit;
10 | onError?: ((error: any) => any) | undefined;
11 | }
12 |
13 | let TWEET_TOMBSTONE = "TweetTombstone";
14 |
15 | const { id, components, fetchOptions, onError } = Astro.props;
16 | let error;
17 | const tweet = id
18 | ? await getTweet(id, fetchOptions).catch((err) => {
19 | if (onError) {
20 | error = onError(err);
21 | } else {
22 | console.error(err);
23 | error = err;
24 | }
25 | })
26 | : undefined;
27 | ---
28 |
29 | {
30 | tweet && tweet.__typename != TWEET_TOMBSTONE ? (
31 | {description}
29 |
29 |
30 |
31 |
35 | ) : (
36 |
32 |
34 |
12 | {
13 | tweet.entities.map((item, i) => {
14 | switch (item.type) {
15 | case "hashtag":
16 | case "mention":
17 | case "url":
18 | case "symbol":
19 | return
36 |
38 | ) : null
39 | }
40 |
--------------------------------------------------------------------------------
/src/components/listing-layout/Paginator.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import type { PaginationLink } from "@/types";
3 | import Icon from "@/components/ui/Icon.astro";
4 |
5 | interface Props {
6 | prevUrl?: PaginationLink;
7 | nextUrl?: PaginationLink;
8 | }
9 |
10 | const { prevUrl, nextUrl } = Astro.props;
11 | ---
12 |
13 | {
14 | (prevUrl || nextUrl) && (
15 |
31 | )
32 | }
33 |
--------------------------------------------------------------------------------
/src/components/notion-blocks/embeds/astro-tweet/src/twitter-theme/tweet-media.module.css:
--------------------------------------------------------------------------------
1 | .root {
2 | margin-top: 0.75rem;
3 | overflow: hidden;
4 | position: relative;
5 | }
6 | .rounded {
7 | border: var(--tweet-border);
8 | border-radius: 12px;
9 | }
10 | .mediaWrapper {
11 | display: grid;
12 | grid-auto-rows: 1fr;
13 | gap: 2px;
14 | height: 100%;
15 | width: 100%;
16 | }
17 | .grid2Columns {
18 | grid-template-columns: repeat(2, 1fr);
19 | }
20 | .grid3 > a:first-child {
21 | grid-row: span 2;
22 | }
23 | .grid2x2 {
24 | grid-template-rows: repeat(2, 1fr);
25 | }
26 | .mediaContainer {
27 | position: relative;
28 | height: 100%;
29 | width: 100%;
30 | display: flex;
31 | align-items: center;
32 | justify-content: center;
33 | }
34 | .mediaLink {
35 | text-decoration: none;
36 | outline-style: none;
37 | }
38 | .skeleton {
39 | padding-bottom: 56.25%;
40 | width: 100%;
41 | display: block;
42 | }
43 | .image {
44 | position: absolute;
45 | top: 0px;
46 | left: 0px;
47 | bottom: 0px;
48 | height: 100%;
49 | width: 100%;
50 | margin: 0;
51 | object-fit: cover;
52 | object-position: center;
53 | }
54 |
--------------------------------------------------------------------------------
/src/utils/shiki-highlighter.ts:
--------------------------------------------------------------------------------
1 | import type { ShikiHighlighter, ShikiHighlighterHighlightOptions } from "@astrojs/markdown-remark";
2 | import { createShikiHighlighter } from "@astrojs/markdown-remark";
3 |
4 | const DEFAULT_THEME = "github-dark-dimmed";
5 |
6 | let highlighterPromise: Promise
13 |
30 |
--------------------------------------------------------------------------------
/src/components/notion-blocks/embeds/astro-tweet/src/twitter-theme/quoted-tweet/QuotedTweetHeader.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import AvatarImg from "../AvatarImg.astro";
3 | import styles from "./quoted-tweet-header.module.css";
4 | import type { EnrichedQuotedTweet } from "../../utils.js";
5 | import VerifiedBadge from "../VerifiedBadge.astro";
6 |
7 | interface Props {
8 | tweet: EnrichedQuotedTweet;
9 | }
10 | const { user } = Astro.props.tweet;
11 | const { tweet } = Astro.props;
12 | ---
13 |
14 |
15 |
16 |
32 |
--------------------------------------------------------------------------------
/src/components/ui/Icon.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import type { HTMLAttributes } from "astro/types";
3 | import { getTextToSVGPath } from "@/utils/style-helpers";
4 |
5 | interface Props extends HTMLAttributes<"svg"> {
6 | name: string;
7 | pathProps?: HTMLAttributes<"path">;
8 | }
9 |
10 | const { name, pathProps, fill, viewBox, ...svgProps } = Astro.props;
11 |
12 | const path = getTextToSVGPath(name);
13 |
14 | // Prepare path props
15 | const finalPathProps: HTMLAttributes<"path"> = {
16 | d: path,
17 | ...pathProps,
18 | fill: fill || pathProps?.fill || "currentColor",
19 | };
20 |
21 | // Prepare SVG props
22 | const finalSvgProps: HTMLAttributes<"svg"> = {
23 | ...svgProps,
24 | viewBox: viewBox || "0 0 24 24",
25 | };
26 |
27 | // Convert aria-hidden string to boolean if it exists
28 | if (typeof finalSvgProps["aria-hidden"] === "string") {
29 | finalSvgProps["aria-hidden"] =
30 | finalSvgProps["aria-hidden"] === "true"
31 | ? true
32 | : finalSvgProps["aria-hidden"] === "false"
33 | ? false
34 | : undefined;
35 | }
36 | ---
37 |
38 | {
39 | path && (
40 |
43 | )
44 | }
45 |
--------------------------------------------------------------------------------
/src/site.config.ts:
--------------------------------------------------------------------------------
1 | import { getDataSource } from "@/lib/notion/client";
2 | import type { SiteConfig } from "@/types";
3 | import { AUTHOR, WEBMENTION_LINK, HOME_PAGE_SLUG } from "@/constants";
4 |
5 | const tl = "",
6 | ds = "",
7 | path = "/",
8 | oim = "";
9 | const database = await getDataSource();
10 |
11 | const siteTitle = tl ? `${tl} - ${database.Title}` : database.Title;
12 | const siteDescription = ds ? ds : database.Description;
13 |
14 | export const siteInfo: SiteConfig = {
15 | title: siteTitle,
16 | description: siteDescription,
17 | author: AUTHOR,
18 | lang: "en",
19 | homePageSlug: HOME_PAGE_SLUG,
20 | // Meta property, found in src/components/BaseHead.astro L:42
21 | ogLocale: "en",
22 | // Date.prototype.toLocaleDateString() parameters, found in src/utils/date.ts.
23 | date: {
24 | locale: "en",
25 | options: {
26 | day: "numeric",
27 | month: "short",
28 | year: "numeric",
29 | },
30 | },
31 | webmentions: {
32 | link: WEBMENTION_LINK,
33 | // link: "https://webmention.io/astro-cactus.chriswilliams.dev/webmention",
34 | // site: "https://astro-cactus.chriswilliams.dev/",
35 | },
36 | logo: database.Icon || null,
37 | };
38 |
--------------------------------------------------------------------------------
/src/components/notion-blocks/embeds/GoogleMapsEmbed.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import Icon from "@/components/ui/Icon.astro";
3 | import { ENABLE_LIGHTBOX } from "@/constants";
4 | export interface Props {
5 | url: URL;
6 | caption: string | undefined;
7 | }
8 |
9 | const { url, caption } = Astro.props;
10 | ---
11 |
12 |
19 |
21 |
22 |
31 |
13 |
14 | {
15 | ENABLE_LIGHTBOX && (
16 |
21 |
22 |
23 | )
24 | }
25 |
26 |
34 |
35 |
36 |
41 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2023 Nerdy Momo Cat
4 | Copyright (c) 2023 Hiroki Toyokawa
5 | Copyright (c) 2022 Chris Williams
6 |
7 | Permission is hereby granted, free of charge, to any person obtaining a copy
8 | of this software and associated documentation files (the "Software"), to deal
9 | in the Software without restriction, including without limitation the rights
10 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
11 | copies of the Software, and to permit persons to whom the Software is
12 | furnished to do so, subject to the following conditions:
13 |
14 | The above copyright notice and this permission notice shall be included in all
15 | copies or substantial portions of the Software.
16 |
17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
18 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
19 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
20 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
21 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
22 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
23 | SOFTWARE.
24 |
--------------------------------------------------------------------------------
/src/integrations/custom-icon-downloader.ts:
--------------------------------------------------------------------------------
1 | import type { AstroIntegration } from "astro";
2 | import type { FileObject } from "@/lib/interfaces";
3 | import { getDataSource, downloadFile } from "../lib/notion/client";
4 |
5 | export default (): AstroIntegration => ({
6 | name: "custom-icon-downloader",
7 | hooks: {
8 | "astro:build:start": async () => {
9 | const database = await getDataSource();
10 | const icon = database.Icon as FileObject;
11 | let url!: URL;
12 | try {
13 | url = new URL(icon.Url);
14 | } catch (err) {
15 | console.log("Invalid Icon image URL");
16 | return Promise.resolve();
17 | }
18 |
19 | // if (!database.Icon || database.Icon.Type !== 'file' || (database.LastUpdatedTimeStamp < LAST_BUILD_TIME && !fs.existsSync(generateFilePath(url)))) {
20 | if (!database.Icon || database.Icon.Type !== "file") {
21 | return Promise.resolve();
22 | }
23 |
24 | // Download to BOTH locations:
25 | // 1. src/assets/notion for Astro image optimization (header)
26 | // 2. public/notion for OG image generation
27 | await downloadFile(url, true, true); // to src/assets/notion
28 | await downloadFile(url, false, true); // to public/notion
29 | },
30 | },
31 | });
32 |
--------------------------------------------------------------------------------
/src/pages/collections/index.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import PageLayout from "@/layouts/Base.astro";
3 | import { getNavLink } from "@/lib/blog-helpers";
4 | import { getCollectionsWDesc, slugify } from "@/utils";
5 |
6 | const meta = {
7 | title: "All Collections",
8 | description: "A list of all the collections for my posts",
9 | ogImage: "/og-image/collectionsindex---index.png",
10 | };
11 |
12 | const collections = await getCollectionsWDesc();
13 | ---
14 |
15 | Collections
17 |-
18 | {
19 | collections.map(({ name, description }) => (
20 |
-
21 | 22 | 29 | {name} 30 | 31 |32 | {description && description.trim() !== "" && ( 33 |34 |36 | )} 37 |
{description}
35 |
38 | ))
39 | }
40 |
27 |40 | -------------------------------------------------------------------------------- /src/components/notion-blocks/embeds/astro-bluesky/avatar.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import type { AppBskyActorDefs } from "@atproto/api"; 3 | 4 | type Props = { 5 | user: AppBskyActorDefs.ProfileViewBasic; 6 | link?: boolean | undefined; 7 | size?: "small" | "medium" | undefined; 8 | }; 9 | 10 | const { user, link, size = "medium" } = Astro.props; 11 | 12 | const src = user.avatar; 13 | --- 14 | 15 | { 16 | link ? ( 17 | 23 | {src &&28 | { 29 | block.Quote.RichTexts.map((richText: interfaces.RichText) => ( 30 |39 |31 | )) 32 | } 33 | { 34 | block.Quote.Children && renderChildren && ( 35 | 36 | ) 37 | } 38 |
27 | {src && 
}
28 |
29 | )
30 | }
31 |
55 |
--------------------------------------------------------------------------------
/src/integrations/public-notion-copier.ts:
--------------------------------------------------------------------------------
1 | import fs from "node:fs";
2 | import path from "path";
3 | import { fileURLToPath } from "url";
4 | import type { AstroIntegration } from "astro";
5 | import { BUILD_FOLDER_PATHS } from "../constants";
6 |
7 | const copyFiles = (src: string, dest: string) => {
8 | const entries = fs.readdirSync(src, { withFileTypes: true });
9 | if (!fs.existsSync(dest)) {
10 | fs.mkdirSync(dest, { recursive: true });
11 | }
12 |
13 | for (const entry of entries) {
14 | const srcPath = path.join(src, entry.name);
15 | const destPath = path.join(dest, entry.name);
16 |
17 | if (entry.isDirectory()) {
18 | copyFiles(srcPath, destPath);
19 | } else {
20 | if (!fs.existsSync(destPath)) {
21 | fs.copyFileSync(srcPath, destPath);
22 | }
23 | }
24 | }
25 | };
26 |
27 | export default (): AstroIntegration => ({
28 | name: "public-notion-copier",
29 | hooks: {
30 | "astro:build:done": async ({ dir }) => {
31 | const dirPath = fileURLToPath(dir);
32 | const outDir = path.join(dirPath, "notion");
33 | if (!fs.existsSync(outDir)) {
34 | fs.mkdirSync(outDir, { recursive: true });
35 | }
36 |
37 | copyFiles(BUILD_FOLDER_PATHS["publicNotion"], outDir);
38 | console.log("Finished copying notion files to root!");
39 | },
40 | },
41 | });
42 |
--------------------------------------------------------------------------------
/src/components/notion-blocks/MentionCustomEmoji.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import { Image } from "astro:assets";
3 | import type { Mention } from "@/lib/interfaces.ts";
4 | import { filePath, getNotionImage, getImageComponentFormat } from "@/lib/blog-helpers.ts";
5 | import { file } from "astro/loaders";
6 |
7 | export interface Props {
8 | mention: Mention;
9 | }
10 |
11 | const { mention } = Astro.props;
12 |
13 | if (!mention.CustomEmoji) {
14 | return null;
15 | }
16 |
17 | const { Name, Url } = mention.CustomEmoji;
18 |
19 | if (!Url) {
20 | return null;
21 | }
22 |
23 | const downloadedEmoji = await getNotionImage(new URL(Url));
24 | const externalEmojiPath = downloadedEmoji ? null : filePath(new URL(Url));
25 | ---
26 |
27 | {
28 | downloadedEmoji ? (
29 |
18 | {current_headings.map((heading) => {
19 | let indentClass = "";
20 | if (heading.depth === 2) {
21 | indentClass = "pl-6";
22 | } else if (heading.depth === 3) {
23 | indentClass = "pl-12";
24 | }
25 |
26 | return (
27 |
42 | {heading.text}
43 |
44 | );
45 | })}
46 |
47 | )
48 | }
49 |
--------------------------------------------------------------------------------
/src/components/notion-blocks/Paragraph.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import * as interfaces from "@/lib/interfaces.ts";
3 | import { getNotionColorToTailwindColor } from "@/utils/style-helpers";
4 | import RichText from "@/components/notion-blocks/RichText.astro";
5 | import NotionBlocks from "@/components/NotionBlocks.astro";
6 |
7 | export interface Props {
8 | block: interfaces.Block;
9 | renderChildren?: boolean;
10 | setId?: boolean;
11 | }
12 |
13 | const { block, renderChildren = true, setId = true } = Astro.props;
14 |
15 | const hasChildren = block.Paragraph.Children && block.Paragraph.Children.length > 0;
16 | const Tag = hasChildren && renderChildren ? "div" : "p";
17 | ---
18 |
19 | } 36 | { 37 | hasChildren && renderChildren && ( 38 |
39 |
45 | )
46 | }
47 |
15 | 
20 |
21 |
20 | Tags
20 |
21 | {
22 | allTags.map((tag) => (
23 |
46 |
24 |
31 |
37 | {tag.name}
38 | {tag.count}
39 |
40 |
41 | {tag.description &&
43 | ))
44 | }
45 |
21 |
49 | )
50 | }
51 |
--------------------------------------------------------------------------------
/src/components/notion-blocks/embeds/astro-tweet/src/api/types/media.ts:
--------------------------------------------------------------------------------
1 | import type { Indices } from "./entities.js";
2 |
3 | export type RGB = {
4 | red: number;
5 | green: number;
6 | blue: number;
7 | };
8 |
9 | export type Rect = {
10 | x: number;
11 | y: number;
12 | w: number;
13 | h: number;
14 | };
15 |
16 | export type Size = {
17 | h: number;
18 | w: number;
19 | resize: string;
20 | };
21 |
22 | export interface VideoInfo {
23 | aspect_ratio: [number, number];
24 | variants: {
25 | bitrate?: number;
26 | content_type: "video/mp4" | "application/x-mpegURL";
27 | url: string;
28 | }[];
29 | }
30 |
31 | interface MediaBase {
32 | display_url: string;
33 | expanded_url: string;
34 | ext_media_availability: {
35 | status: string;
36 | };
37 | ext_media_color: {
38 | palette: {
39 | percentage: number;
40 | rgb: RGB;
41 | }[];
42 | };
43 | indices: Indices;
44 | media_url_https: string;
45 | original_info: {
46 | height: number;
47 | width: number;
48 | focus_rects: Rect[];
49 | };
50 | sizes: {
51 | large: Size;
52 | medium: Size;
53 | small: Size;
54 | thumb: Size;
55 | };
56 | url: string;
57 | }
58 |
59 | export interface MediaPhoto extends MediaBase {
60 | type: "photo";
61 | ext_alt_text?: string;
62 | }
63 |
64 | export interface MediaAnimatedGif extends MediaBase {
65 | type: "animated_gif";
66 | video_info: VideoInfo;
67 | }
68 |
69 | export interface MediaVideo extends MediaBase {
70 | type: "video";
71 | video_info: VideoInfo;
72 | }
73 |
74 | export type MediaDetails = MediaPhoto | MediaAnimatedGif | MediaVideo;
75 |
--------------------------------------------------------------------------------
/src/components/auto-added-sections/TOCHeading.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import type { TocItem } from "@/utils";
3 |
4 | interface Props {
5 | heading: TocItem;
6 | visualOnly?: boolean;
7 | }
8 |
9 | const {
10 | heading: { slug, text, depth, subheadings },
11 | visualOnly = false,
12 | } = Astro.props;
13 |
14 | const getVisualStyles = (depth: number) => {
15 | const baseStyle = "h-[2px] rounded-full transition-colors duration-200";
16 | const styles = {
17 | 1: "w-4 bg-accent/25",
18 | 2: "mt-2 ml-1 w-[12px] bg-accent/25",
19 | 3: "mt-2 ml-2 w-2 bg-accent/25",
20 | };
21 | return `${styles[depth] || ""} ${baseStyle}`.trim();
22 | };
23 | ---
24 |
25 | {
26 | visualOnly ? (
27 | 22 | {likes.length} 23 | {likes.length > 1 ? " People" : " Person"} liked this 24 |
25 | {!!likesToShow.length && ( 26 |-
27 | {likesToShow.map((like) => (
28 |
-
29 |
36 |
43 | 44 |
45 | ))}
46 |
28 |
29 | {!!subheadings.length && (
30 |
37 | ) : (
38 |
31 | {subheadings.map((subheading) => (
32 |
35 | )}
36 | -
50 | {subheadings.map((subheading) => (
51 |
-
17 | {
18 | block.ListItems.filter((b: interfaces.Block) => b.Type === "bulleted_list_item").map(
19 | (b: interfaces.Block) => (
20 |
-
37 | {b.BulletedListItem.RichTexts.map((richText: interfaces.RichText) => (
38 |
39 | ))} 40 | {b.HasChildren && renderChildren && ( 41 | 46 | )} 47 |
48 | ),
49 | )
50 | }
51 |
13 |
23 |
24 |
77 |
--------------------------------------------------------------------------------
/src/layouts/Base.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import type { SiteMeta } from "@/types";
3 | import BaseHead from "@/components/layout/BaseHead.astro";
4 | import Header from "@/components/layout/Header.astro";
5 | import Footer from "@/components/layout/Footer.astro";
6 | import SkipLink from "@/components/ui/SkipLink.astro";
7 | import { siteInfo } from "@/siteInfo";
8 | import { BIBTEX_CITATIONS_ENABLED, CITATIONS, ENABLE_LIGHTBOX } from "@/constants";
9 | import { adjustedFootnotesConfig } from "@/lib/notion/client";
10 | interface Props {
11 | meta: SiteMeta;
12 | }
13 | const {
14 | meta: {
15 | title = siteInfo.title,
16 | description = siteInfo.description,
17 | ogImage,
18 | articleDate,
19 | author,
20 | },
21 | } = Astro.props;
22 | ---
23 |
24 |
25 |
26 |
14 | {
15 | images.map((image) => (
16 |
22 |
17 | 
18 |
19 | ))
20 | }
21 |
24 | {
25 | url && (
26 |
60 |
--------------------------------------------------------------------------------
/src/lib/external-content/external-html-content.ts:
--------------------------------------------------------------------------------
1 | import fs from "node:fs";
2 | import path from "node:path";
3 | import type { Post } from "@/lib/interfaces";
4 | import type { Heading } from "@/types";
5 | import { EXTERNAL_CONTENT_PATHS } from "@/constants";
6 | import { transformExternalHtml } from "./external-html-utils";
7 | import {
8 | loadExternalRenderCache,
9 | readExternalFolderVersion,
10 | extractHeadingsFromHtml,
11 | } from "./external-render-cache";
12 |
13 | type HtmlRenderResult = {
14 | html: string;
15 | headings: Heading[];
16 | };
17 |
18 | export function renderExternalHtml(post: Post): HtmlRenderResult {
19 | const descriptor = post.ExternalContent;
20 | if (!descriptor || descriptor.type !== "html") {
21 | return { html: "", headings: [] };
22 | }
23 |
24 | const version = readExternalFolderVersion(descriptor);
25 | const cached = loadExternalRenderCache(descriptor, version);
26 | if (cached) {
27 | const headings =
28 | cached.meta.headings && cached.meta.headings.length
29 | ? cached.meta.headings
30 | : extractHeadingsFromHtml(cached.html);
31 | return { html: cached.html, headings };
32 | }
33 |
34 | const entryDir = path.join(EXTERNAL_CONTENT_PATHS.externalPosts, descriptor.folderName);
35 | const entryPath = path.join(entryDir, "index.html");
36 | if (!fs.existsSync(entryPath)) {
37 | console.warn(
38 | `[external-content] Missing index.html for external post "${post.Slug}" at ${entryPath}`,
39 | );
40 | return { html: "", headings: [] };
41 | }
42 |
43 | let fileContents = "";
44 | try {
45 | fileContents = fs.readFileSync(entryPath, "utf-8");
46 | } catch (error) {
47 | console.warn(
48 | `[external-content] Failed to read HTML file for "${post.Slug}" (${entryPath})`,
49 | error,
50 | );
51 | return { html: "", headings: [] };
52 | }
53 |
54 | return transformExternalHtml(fileContents, descriptor);
55 | }
56 |
--------------------------------------------------------------------------------
/src/components/notion-blocks/embeds/astro-tweet/src/twitter-theme/tweet-media-video.module.css:
--------------------------------------------------------------------------------
1 | .anchor {
2 | display: flex;
3 | align-items: center;
4 | color: white;
5 | padding: 0 1rem;
6 | border: 1px solid transparent;
7 | border-radius: 9999px;
8 | font-weight: 700;
9 | transition: background-color 0.2s;
10 | cursor: pointer;
11 | user-select: none;
12 | outline-style: none;
13 | text-decoration: none;
14 | text-overflow: ellipsis;
15 | white-space: nowrap;
16 | }
17 | .videoButton {
18 | position: relative;
19 | height: 67px;
20 | width: 67px;
21 | display: flex;
22 | align-items: center;
23 | justify-content: center;
24 | background-color: var(--tweet-color-blue-primary);
25 | transition-property: background-color;
26 | transition-duration: 0.2s;
27 | border: 4px solid #fff;
28 | border-radius: 9999px;
29 | cursor: pointer;
30 | }
31 | .videoButton:hover,
32 | .videoButton:focus-visible {
33 | background-color: var(--tweet-color-blue-primary-hover);
34 | }
35 | .videoButtonIcon {
36 | margin-left: 3px;
37 | width: calc(50% + 4px);
38 | height: calc(50% + 4px);
39 | max-width: 100%;
40 | color: #fff;
41 | fill: currentColor;
42 | user-select: none;
43 | }
44 | .watchOnTwitter {
45 | position: absolute;
46 | top: 12px;
47 | right: 8px;
48 | }
49 | .watchOnTwitter > a {
50 | min-width: 2rem;
51 | min-height: 2rem;
52 | font-size: 0.875rem;
53 | line-height: 1rem;
54 | backdrop-filter: blur(4px);
55 | background-color: rgba(15, 20, 25, 0.75);
56 | }
57 | .watchOnTwitter > a:hover {
58 | background-color: rgba(39, 44, 48, 0.75);
59 | }
60 | .viewReplies {
61 | position: relative;
62 | min-height: 2rem;
63 | background-color: var(--tweet-color-blue-primary);
64 | border-color: var(--tweet-color-blue-primary);
65 | font-size: 0.9375rem;
66 | line-height: 1.25rem;
67 | }
68 | .viewReplies:hover {
69 | background-color: var(--tweet-color-blue-primary-hover);
70 | }
71 |
--------------------------------------------------------------------------------
/src/components/popover/NPagePopover.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import Icon from "@/components/ui/Icon.astro";
3 |
4 | interface Props {
5 | excerpt?: string;
6 | linkedTo: string;
7 | popoverSpanText: string;
8 | popoverTitle: string;
9 | postId: string;
10 | linkText?: string;
11 | }
12 | const {
13 | excerpt = "",
14 | linkedTo,
15 | popoverSpanText,
16 | popoverTitle,
17 | postId,
18 | linkText = "Read more",
19 | } = Astro.props;
20 | let id = "id" + Math.random().toString(16).slice(2) + "---" + postId;
21 | ---
22 |
23 |
24 |
32 | {popoverSpanText ? popoverSpanText :
27 | {block.File.Caption && block.File.Caption.length > 0 && block.File.Caption[0].Text.Content
28 | ? block.File.Caption[0].Text.Content
29 | : filename}
30 | {" "}
31 |
32 |
37 |
38 | Download{" "}
39 |
40 |
41 |
42 | {/* Conditional Preview for PDFs */}
43 | {filename.endsWith(".pdf") && ENABLE_LIGHTBOX && (
44 |
54 | )}
55 |
56 |
57 | )
58 | }
59 |
20 |
58 |
--------------------------------------------------------------------------------
/src/pages/rss.xml.ts:
--------------------------------------------------------------------------------
1 | import rss from "@astrojs/rss";
2 | import { getAllPosts, getDataSource } from "@/lib/notion/client";
3 | import { resolvePostHref } from "@/lib/blog-helpers";
4 | import { HIDE_UNDERSCORE_SLUGS_IN_LISTS, AUTHOR } from "@/constants";
5 | import { getNavLink } from "@/lib/blog-helpers";
6 |
7 | /**
8 | * Get author string for a post.
9 | * Uses Authors array if available, falls back to site's AUTHOR constant.
10 | */
11 | function getPostAuthor(post: { Authors?: { name: string }[] }): string {
12 | if (post.Authors && post.Authors.length > 0) {
13 | return post.Authors.map((a) => a.name).join(", ");
14 | }
15 | return AUTHOR;
16 | }
17 |
18 | export const GET = async () => {
19 | const [posts, database] = await Promise.all([getAllPosts(), getDataSource()]);
20 |
21 | // Filter posts if HIDE_UNDERSCORE_SLUGS_IN_LISTS is true
22 | const filteredPosts = HIDE_UNDERSCORE_SLUGS_IN_LISTS
23 | ? posts.filter((post) => !post.Slug.startsWith("_"))
24 | : posts;
25 |
26 | // Get site-level author (fallback)
27 | const siteAuthor = AUTHOR;
28 |
29 | return rss({
30 | stylesheet: getNavLink("/rss-styles.xsl"),
31 | title: database.Title,
32 | description: database.Description,
33 | site: import.meta.env.SITE,
34 | customData: `${siteAuthor ? `-
21 | {
22 | block.ListItems.filter((b: interfaces.Block) => b.Type === "numbered_list_item").map(
23 | (b: interfaces.Block) => (
24 |
-
41 | {b.NumberedListItem.RichTexts.map((richText: interfaces.RichText) => (
42 |
43 | ))} 44 | {b.HasChildren && renderChildren && ( 45 | 51 | )} 52 |
53 | ),
54 | )
55 | }
56 |
22 |
23 |
45 |
55 | ) : (
56 |
23 |
24 |
39 | {block.Heading1.RichTexts.map((richText: interfaces.RichText) => (
40 |
43 |
44 |
45 |
46 | {block.Heading1.Children && renderChildren && (
47 |
54 |
57 | {block.Heading1.RichTexts.map((richText: interfaces.RichText) => (
58 |
61 | )
62 | }
63 |
--------------------------------------------------------------------------------
/src/components/notion-blocks/Heading3.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import * as interfaces from "@/lib/interfaces.ts";
3 | import { buildHeadingId } from "@/lib/blog-helpers.ts";
4 | import RichText from "@/components/notion-blocks/RichText.astro";
5 | import NotionBlocks from "@/components/NotionBlocks.astro";
6 | import Icon from "@/components/ui/Icon.astro";
7 | export interface Props {
8 | block: interfaces.Block;
9 | renderChildren?: boolean; // Make this optional
10 | setId?: boolean;
11 | }
12 |
13 | const { block, renderChildren = true, setId = true } = Astro.props;
14 |
15 | const id = buildHeadingId(block.Heading3);
16 | ---
17 |
18 | {
19 | block.Heading3.IsToggleable ? (
20 |
21 |
22 |
44 |
54 | ) : (
55 |
22 |
23 |
38 | {block.Heading3.RichTexts.map((richText: interfaces.RichText) => (
39 |
42 |
43 |
44 |
45 | {block.Heading3.Children && renderChildren && (
46 |
53 |
56 | {block.Heading3.RichTexts.map((richText: interfaces.RichText) => (
57 |
60 | )
61 | }
62 |
--------------------------------------------------------------------------------
/src/lib/external-content/remark-external-mdx-assets.ts:
--------------------------------------------------------------------------------
1 | import path from "node:path";
2 | import { visit } from "unist-util-visit";
3 | import type { Root } from "mdast";
4 | import { isRelativePath, toPublicUrl } from "./external-content-utils";
5 |
6 | type MdxJsxNode = {
7 | type: "mdxJsxFlowElement" | "mdxJsxTextElement";
8 | attributes?: { type: string; name?: string; value?: unknown }[];
9 | };
10 |
11 | function getFolderName(filePath: string | undefined): string | null {
12 | if (!filePath) return null;
13 | const normalized = filePath.replace(/\\/g, "/");
14 | const match = normalized.match(/\/src\/external-posts\/([^/]+)\/index\.mdx$/);
15 | return match?.[1] || null;
16 | }
17 |
18 | function rewriteIfRelative(value: unknown, folderName: string): unknown {
19 | if (typeof value !== "string") return value;
20 | if (!isRelativePath(value)) return value;
21 | return toPublicUrl(value, { type: "mdx", sourceId: "external", folderName });
22 | }
23 |
24 | function rewriteAttributes(node: MdxJsxNode, folderName: string) {
25 | if (!Array.isArray(node.attributes)) return;
26 | for (const attr of node.attributes) {
27 | if (attr?.type !== "mdxJsxAttribute") continue;
28 | if (!attr.name || typeof attr.value === "object") continue;
29 | if (!["src", "href", "poster", "data-src", "dataSrc"].includes(attr.name)) continue;
30 | attr.value = rewriteIfRelative(attr.value, folderName);
31 | }
32 | }
33 |
34 | export default function remarkExternalMdxAssets() {
35 | return (tree: Root, file: any) => {
36 | const folderName = getFolderName(file?.path);
37 | if (!folderName) return;
38 |
39 | const rewrite = (value: unknown) => rewriteIfRelative(value, folderName);
40 |
41 | visit(tree, ["image", "link", "definition"], (node: any) => {
42 | if (node && node.url) {
43 | node.url = rewrite(node.url);
44 | }
45 | });
46 |
47 | visit(
48 | tree,
49 | (node: any): node is MdxJsxNode =>
50 | node?.type === "mdxJsxFlowElement" || node?.type === "mdxJsxTextElement",
51 | (node) => rewriteAttributes(node, folderName),
52 | );
53 | };
54 | }
55 |
--------------------------------------------------------------------------------
/src/components/notion-blocks/Heading2.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import * as interfaces from "@/lib/interfaces.ts";
3 | import { buildHeadingId } from "@/lib/blog-helpers.ts";
4 | import RichText from "@/components/notion-blocks/RichText.astro";
5 | import NotionBlocks from "@/components/NotionBlocks.astro";
6 | import Icon from "@/components/ui/Icon.astro";
7 |
8 | export interface Props {
9 | block: interfaces.Block;
10 | renderChildren?: boolean; // Make this optional
11 | setId?: boolean;
12 | }
13 |
14 | const { block, renderChildren = true, setId = true } = Astro.props;
15 |
16 | const id = buildHeadingId(block.Heading2);
17 | ---
18 |
19 | {
20 | block.Heading2.IsToggleable ? (
21 |
22 |
23 |
45 |
55 | ) : (
56 |
23 |
24 |
39 | {block.Heading2.RichTexts.map((richText: interfaces.RichText) => (
40 |
43 |
44 |
45 |
46 | {block.Heading2.Children && renderChildren && (
47 |
54 |
57 | {block.Heading2.RichTexts.map((richText: interfaces.RichText) => (
58 |
61 | )
62 | }
63 |
--------------------------------------------------------------------------------
/src/integrations/external-render-cacheer.ts:
--------------------------------------------------------------------------------
1 | import type { AstroIntegration } from "astro";
2 | import fs from "fs/promises";
3 | import path from "path";
4 | import { parseDocument } from "htmlparser2";
5 | import { DomUtils } from "htmlparser2";
6 | import { getAllPosts } from "../lib/notion/client";
7 | import { EXTERNAL_CONTENT_PATHS } from "../constants";
8 | import {
9 | extractHeadingsFromHtml,
10 | readExternalFolderVersion,
11 | saveExternalRenderCache,
12 | } from "../lib/external-content/external-render-cache";
13 |
14 | const externalRenderCacher = (): AstroIntegration => {
15 | return {
16 | name: "external-render-cacher",
17 | hooks: {
18 | "astro:build:done": async () => {
19 | const distDir = "dist";
20 | const posts = await getAllPosts();
21 | const externalPosts = posts.filter((p) => p.IsExternal && p.ExternalContent);
22 |
23 | for (const post of externalPosts) {
24 | const descriptor = post.ExternalContent;
25 | if (!descriptor) continue;
26 |
27 | const filePath = path.join(distDir, "posts", post.Slug, "index.html");
28 | try {
29 | const htmlContent = await fs.readFile(filePath, "utf-8");
30 | const document = parseDocument(htmlContent);
31 | const postBody = DomUtils.findOne(
32 | (elem) =>
33 | elem.type === "tag" &&
34 | elem.name === "div" &&
35 | !!elem.attribs?.class &&
36 | elem.attribs.class.split(" ").includes("post-body"),
37 | document.children,
38 | true,
39 | );
40 | if (!postBody) continue;
41 |
42 | const extractedHtml = DomUtils.getInnerHTML(postBody);
43 | const headings = extractHeadingsFromHtml(extractedHtml);
44 | const version = readExternalFolderVersion(descriptor) || new Date().toISOString();
45 | saveExternalRenderCache(descriptor, version, extractedHtml, headings);
46 | } catch (error) {
47 | console.warn(
48 | `[external-content] Failed to cache rendered HTML for ${post.Slug}:`,
49 | error,
50 | );
51 | }
52 | }
53 | },
54 | },
55 | };
56 | };
57 |
58 | export default externalRenderCacher;
59 |
--------------------------------------------------------------------------------
/src/utils/index.ts:
--------------------------------------------------------------------------------
1 | import { getAllPages, getDataSource } from "@/lib/notion/client";
2 |
3 | import { MENU_PAGES_COLLECTION, HOME_PAGE_SLUG } from "@/constants";
4 | import { slugify } from "@/utils/slugify";
5 | import { getNavLink } from "@/lib/blog-helpers";
6 | export { getFormattedDate, getFormattedDateWithTime, areDifferentDates } from "@/utils/date";
7 | export { generateToc, buildHeadings } from "@/utils/generateToc";
8 | export type { TocItem } from "@/utils/generateToc";
9 | export { getWebmentionsForUrl } from "@/utils/webmentions";
10 | export { slugify } from "@/utils/slugify";
11 | export {
12 | numberToAlphabet,
13 | getSymbolForLinkedContent,
14 | LINKED_CONTENT_SYMBOLS,
15 | } from "@/utils/numbering";
16 |
17 | export async function getCollections() {
18 | const { propertiesRaw } = await getDataSource();
19 |
20 | return propertiesRaw.Collection.select!.options.map(({ name }) => name).filter(
21 | (name) => name !== MENU_PAGES_COLLECTION,
22 | );
23 | }
24 |
25 | export async function getCollectionsWDesc() {
26 | const { propertiesRaw } = await getDataSource();
27 |
28 | return propertiesRaw.Collection.select!.options.filter(
29 | ({ name }) => name !== MENU_PAGES_COLLECTION,
30 | ).map(({ name, description }) => ({ name, description }));
31 | }
32 |
33 | export async function getMenu(): Promise<
34 | { title: string; path: string; children?: { title: string; path: string }[] }[]
35 | > {
36 | const pages = await getAllPages();
37 | const collections = await getCollections();
38 | const collectionLinks = collections.map((name) => ({
39 | title: name,
40 | path: getNavLink("/collections/" + slugify(name)),
41 | }));
42 |
43 | const pageLinks = pages
44 | .map((page) => ({
45 | ...page,
46 | // Assign rank -1 to homePageSlug and 99 to pages with no rank
47 | Rank:
48 | page.Slug === HOME_PAGE_SLUG
49 | ? -1
50 | : page.Rank === undefined || page.Rank === null
51 | ? 99
52 | : page.Rank,
53 | }))
54 | .sort((a, b) => a.Rank - b.Rank)
55 | .map((page) => ({
56 | title: page.Title,
57 | path: getNavLink(page.Slug === HOME_PAGE_SLUG ? "/" : "/" + page.Slug),
58 | }));
59 |
60 | return [...pageLinks, ...collectionLinks];
61 | }
62 |
--------------------------------------------------------------------------------
/src/types.ts:
--------------------------------------------------------------------------------
1 | import type { FileObject, Emoji } from "@/lib/interfaces";
2 |
3 | export type SocialLink = {
4 | name: string;
5 | friendlyName: string;
6 | link: string;
7 | isWebmention?: boolean;
8 | };
9 |
10 | export type SiteConfig = {
11 | author: string;
12 | title: string;
13 | description: string;
14 | lang: string;
15 | ogLocale: string;
16 | date: {
17 | locale: string | string[] | undefined;
18 | options: Intl.DateTimeFormatOptions;
19 | };
20 | homePageSlug: string;
21 | webmentions?: {
22 | link: string;
23 | pingback?: string;
24 | };
25 | logo?: FileObject | Emoji | null;
26 | };
27 |
28 | export type PaginationLink = {
29 | url: string;
30 | text?: string;
31 | srLabel?: string;
32 | };
33 |
34 | export type SiteMeta = {
35 | title: string;
36 | description?: string;
37 | ogImage?: string | undefined;
38 | articleDate?: string | undefined;
39 | author?: string | undefined;
40 | };
41 |
42 | /** Webmentions */
43 | export type WebmentionsFeed = {
44 | type: string;
45 | name: string;
46 | children: WebmentionsChildren[];
47 | };
48 |
49 | export type WebmentionsCache = {
50 | lastFetched: string | null;
51 | children: WebmentionsChildren[];
52 | };
53 |
54 | export type WebmentionsChildren = {
55 | type: string;
56 | author: Author | null;
57 | url: string;
58 | published?: string | null;
59 | "wm-received": string;
60 | "wm-id": number;
61 | "wm-source": string;
62 | "wm-target": string;
63 | "wm-protocol": string;
64 | syndication?: string[] | null;
65 | content?: Content | null;
66 | "mention-of": string;
67 | "wm-property": string;
68 | "wm-private": boolean;
69 | rels?: Rels | null;
70 | name?: string | null;
71 | photo?: string[] | null;
72 | summary?: Summary | null;
73 | };
74 |
75 | export type Author = {
76 | type: string;
77 | name: string;
78 | photo: string;
79 | url: string;
80 | };
81 |
82 | export type Content = {
83 | "content-type": string;
84 | value: string;
85 | html: string;
86 | text: string;
87 | };
88 |
89 | export type Rels = {
90 | canonical: string;
91 | };
92 |
93 | export type Summary = {
94 | "content-type": string;
95 | value: string;
96 | };
97 | //ADDED
98 | export type Heading = { text: string; slug: string; depth: number };
99 |
--------------------------------------------------------------------------------
/src/components/auto-added-sections/interlinked-content/LinksToThisPage.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import type { Block, Post } from "@/lib/interfaces";
3 | import NBlocksPopover from "@/components/popover/NBlocksPopover.astro";
4 | import { getInterlinkedContentLink } from "@/lib/blog-helpers";
5 |
6 | import { getSymbolForLinkedContent } from "@/utils";
7 |
8 | interface Props {
9 | post: Post;
10 | allInterlinkedContentToPage: { entryId: string; block: Block }[];
11 | }
12 | const { post, allInterlinkedContentToPage } = Astro.props;
13 | const groupedInterlinkedContent = allInterlinkedContentToPage
14 | ? allInterlinkedContentToPage.reduce((acc, { entryId, block }) => {
15 | acc[entryId] = acc[entryId] || [];
16 | acc[entryId].push(block);
17 | return acc;
18 | }, {})
19 | : null;
20 |
21 | const entryIdLinksEntry = {};
22 | const blockIdLinks = {};
23 |
24 | if (groupedInterlinkedContent) {
25 | for (const entryId of Object.keys(groupedInterlinkedContent)) {
26 | entryIdLinksEntry[entryId] = await getInterlinkedContentLink(post.PageId, entryId);
27 | for (const block of groupedInterlinkedContent[entryId]) {
28 | const result = await getInterlinkedContentLink(post.PageId, entryId, block);
29 | blockIdLinks[block.Id] = result[0];
30 | }
31 | }
32 | }
33 | ---
34 |
35 | {
36 | groupedInterlinkedContent && Object.keys(groupedInterlinkedContent).length > 0 && (
37 | <>
38 |
39 | Pages That Mention This Page
40 | {Object.entries(groupedInterlinkedContent).map(([entryId, blocks]) => (
41 |
61 |
42 |
59 | ))}
60 |
43 |
44 | {entryIdLinksEntry[entryId][1].Title}
45 |
46 | {" at "}
47 |
48 | {blocks.map((block, index) => (
49 |
58 | 62 | 63 | ) 64 | } 65 | -------------------------------------------------------------------------------- /src/components/notion-blocks/embeds/astro-tweet/src/api/get-tweet.ts: -------------------------------------------------------------------------------- 1 | import type { Tweet } from "./types/index.js"; 2 | 3 | const SYNDICATION_URL = "https://cdn.syndication.twimg.com"; 4 | 5 | export class TwitterApiError extends Error { 6 | status: number; 7 | data: any; 8 | 9 | constructor({ message, status, data }: { message: string; status: number; data: any }) { 10 | super(message); 11 | this.name = "TwitterApiError"; 12 | this.status = status; 13 | this.data = data; 14 | } 15 | } 16 | 17 | const TWEET_ID = /^[0-9]+$/; 18 | 19 | function getToken(id: string) { 20 | return ((Number(id) / 1e15) * Math.PI).toString(6 ** 2).replace(/(0+|\.)/g, ""); 21 | } 22 | 23 | /** 24 | * Fetches a tweet from the Twitter syndication API. 25 | */ 26 | export async function getTweet(id: string, fetchOptions?: RequestInit): Promise
33 |
36 | );
37 | } else if (AppBskyEmbedExternal.isView(embed)) {
38 | return
17 |
27 |
28 |
29 |
84 |
--------------------------------------------------------------------------------
/src/components/auto-added-sections/FootnotesSection.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import type { Footnote } from "@/lib/interfaces";
3 | import { numberToAlphabet } from "@/utils";
4 | import NBlocksPopover from "@/components/popover/NBlocksPopover.astro";
5 | import FootnoteContent from "@/components/notion-blocks/FootnoteContent.astro";
6 | import { adjustedFootnotesConfig } from "@/lib/notion/client";
7 |
8 | export interface Props {
9 | footnotes: Footnote[];
10 | }
11 |
12 | const { footnotes } = Astro.props;
13 |
14 | // Remove duplicates based on Marker (in case same footnote appears multiple times)
15 | const uniqueFootnotes = Array.from(new Map(footnotes.map((fn) => [fn.Marker, fn])).values());
16 |
17 | // Sort by Index (sequential numbering) if available, otherwise by Marker
18 | uniqueFootnotes.sort((a, b) => {
19 | if (a.Index && b.Index) {
20 | return a.Index - b.Index;
21 | }
22 | return a.Marker.localeCompare(b.Marker);
23 | });
24 |
25 | // Check if start-of-child-blocks is enabled (no spacing needed for block-type footnotes)
26 | const isStartOfChildBlocks =
27 | adjustedFootnotesConfig?.["in-page-footnotes-settings"]?.source?.["start-of-child-blocks"] ===
28 | true;
29 | ---
30 |
31 | {
32 | uniqueFootnotes.length > 0 && (
33 | {domain}
18 | { 19 | !compact && ( 20 | <> 21 |{title}
22 |{description}
23 | 24 | ) 25 | } 26 |35 |
36 | Footnotes 37 |
38 |-
39 | {uniqueFootnotes.map((footnote) => (
40 |
-
41 | {footnote.SourceBlock ? (
42 |
49 | ) : ( 50 | 51 | [{numberToAlphabet(footnote.Index) || footnote.Marker}] 52 | 53 | )} 54 | 55 |57 |56 |
58 | ))}
59 |
19 |
20 |
64 |
--------------------------------------------------------------------------------
/src/components/listing-layout/PostPreview.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import type { HTMLTag } from "astro/types";
3 | import FormattedDate from "@/components/ui/FormattedDate.astro";
4 | import AuthorByline from "@/components/layout/AuthorByline.astro";
5 | import type { Post } from "@/lib/interfaces";
6 | import { getNotionColorToTailwindColor } from "@/utils/style-helpers";
7 | import { getNavLink, resolvePostHref, isExternalPost } from "@/lib/blog-helpers";
8 | import { MENU_PAGES_COLLECTION } from "@/constants";
9 | import Icon from "@/components/ui/Icon.astro";
10 | import { slugify } from "@/utils";
11 |
12 | interface Props {
13 | post: Post;
14 | as?: HTMLTag;
15 | withDesc?: boolean;
16 | }
17 |
18 | const { post, as: Tag = "div", withDesc = false } = Astro.props;
19 | const postLink = resolvePostHref(post);
20 | const external = isExternalPost(post);
21 | ---
22 |
23 |
23 | 
24 |
25 |
26 |
27 |
28 |
29 |
48 |
55 |
62 |
63 | {post.Excerpt}} 46 | {post.Authors !== undefined &&
50 |
56 | {post.Tags.map((tag, i) => (
57 | <>
58 |
63 | {tag.name}
64 | {" "}
65 |
66 | ))}
67 |
68 | )
69 | }
70 |
--------------------------------------------------------------------------------
/src/pages/authors/index.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import PageLayout from "@/layouts/Base.astro";
3 | import { getNavLink } from "@/lib/blog-helpers";
4 | import { getAllAuthorsWithCounts, shouldShowAuthors } from "@/lib/notion/client";
5 | import { getNotionColorToTailwindColor } from "@/utils/style-helpers";
6 | import { slugify } from "@/utils";
7 | import { AUTHORS_CONFIG } from "@/constants";
8 | import { siteInfo } from "@/site.config";
9 |
10 | // Check if we should show authors
11 | const showAuthors = await shouldShowAuthors();
12 | if (!showAuthors || !AUTHORS_CONFIG.enableAuthorPages) {
13 | // Return 404 if authors are disabled or only default authors exist
14 | return Astro.redirect("/404");
15 | }
16 |
17 | const allAuthors = await getAllAuthorsWithCounts();
18 |
19 | const meta = {
20 | title: "All Authors",
21 | description: "View all authors who have contributed to our content",
22 | ogImage: "/og-image/authorsindex---index.png",
23 | };
24 | ---
25 |
26 | Authors
28 |
29 | {
30 | allAuthors.map((author) => {
31 | // Use default photo ONLY if author name matches the site's author
32 | const isSiteAuthor = author.name === siteInfo.author;
33 | const authorPhoto =
34 | author.photo || (isSiteAuthor ? AUTHORS_CONFIG.siteAuthorPhoto : undefined);
35 | return (
36 |
63 | );
64 | })
65 | }
66 |
67 |
33 | {
34 | videoUrl &&
35 | (url ? (
36 | isThisYoutubeURL ? (
37 |
67 |
--------------------------------------------------------------------------------
/src/components/notion-blocks/embeds/astro-tweet/src/api/types/tweet.ts:
--------------------------------------------------------------------------------
1 | import type { TweetEditControl } from "./edit.js";
2 | import type { Indices, TweetEntities } from "./entities.js";
3 | import type { MediaDetails } from "./media.js";
4 | import type { TweetPhoto } from "./photo.js";
5 | import type { TweetUser } from "./user.js";
6 | import type { TweetVideo } from "./video.js";
7 |
8 | /**
9 | * Base tweet information shared by a tweet, a parent tweet and a quoted tweet.
10 | */
11 | export interface TweetBase {
12 | /**
13 | * Language code of the tweet. E.g "en", "es".
14 | */
15 | lang: string;
16 | /**
17 | * Creation date of the tweet in the format ISO 8601.
18 | */
19 | created_at: string;
20 | /**
21 | * Text range of the tweet text.
22 | */
23 | display_text_range: Indices;
24 | /**
25 | * All the entities that are part of the tweet. Like hashtags, mentions, urls, etc.
26 | */
27 | entities: TweetEntities;
28 | /**
29 | * The unique identifier of the tweet.
30 | */
31 | id_str: string;
32 | /**
33 | * The tweet text, including the raw text from the entities.
34 | */
35 | text: string;
36 | /**
37 | * Information about the user who posted the tweet.
38 | */
39 | user: TweetUser;
40 | /**
41 | * Edit information about the tweet.
42 | */
43 | edit_control: TweetEditControl;
44 | isEdited: boolean;
45 | isStaleEdit: boolean;
46 | }
47 |
48 | /**
49 | * A tweet as returned by the the Twitter syndication API.
50 | */
51 | export interface Tweet extends TweetBase {
52 | __typename: "Tweet";
53 | favorite_count: number;
54 | mediaDetails?: MediaDetails[];
55 | photos?: TweetPhoto[];
56 | video?: TweetVideo;
57 | conversation_count: number;
58 | news_action_type: "conversation";
59 | quoted_tweet?: QuotedTweet;
60 | in_reply_to_screen_name?: string;
61 | in_reply_to_status_id_str?: string;
62 | in_reply_to_user_id_str?: string;
63 | parent?: TweetParent;
64 | possibly_sensitive?: boolean;
65 | }
66 |
67 | /**
68 | * The parent tweet of a tweet reply.
69 | */
70 | export interface TweetParent extends TweetBase {
71 | reply_count: number;
72 | retweet_count: number;
73 | favorite_count: number;
74 | }
75 |
76 | /**
77 | * A tweet quoted by another tweet.
78 | */
79 | export interface QuotedTweet extends TweetBase {
80 | reply_count: number;
81 | retweet_count: number;
82 | favorite_count: number;
83 | mediaDetails?: MediaDetails[];
84 | self_thread: {
85 | id_str: string;
86 | };
87 | }
88 |
--------------------------------------------------------------------------------
/src/components/notion-blocks/embeds/astro-tweet/src/twitter-theme/tweet-header.module.css:
--------------------------------------------------------------------------------
1 | .header {
2 | display: flex;
3 | padding-bottom: 0.75rem;
4 | line-height: var(--tweet-header-line-height);
5 | font-size: var(--tweet-header-font-size);
6 | white-space: nowrap;
7 | overflow-wrap: break-word;
8 | overflow: hidden;
9 | }
10 |
11 | .avatar {
12 | position: relative;
13 | height: 32px;
14 | width: 32px;
15 | }
16 | .avatarOverflow {
17 | height: 100%;
18 | width: 100%;
19 | position: absolute;
20 | overflow: hidden;
21 | border-radius: 9999px;
22 | }
23 | .avatarSquare {
24 | border-radius: 4px;
25 | }
26 | .avatarShadow {
27 | height: 100%;
28 | width: 100%;
29 | transition-property: background-color;
30 | transition-duration: 0.2s;
31 | box-shadow: rgb(0 0 0 / 3%) 0px 0px 2px inset;
32 | }
33 | .avatarShadow:hover {
34 | background-color: rgba(26, 26, 26, 0.15);
35 | }
36 |
37 | .author {
38 | max-width: calc(100% - 84px);
39 | display: flex;
40 | flex-direction: column;
41 | justify-content: center;
42 | margin: 0 0.5rem;
43 | }
44 | .authorLink {
45 | text-decoration: none;
46 | color: inherit;
47 | display: flex;
48 | align-items: center;
49 | }
50 | .authorLink:hover {
51 | text-decoration-line: underline;
52 | }
53 | .authorVerified {
54 | display: inline-flex;
55 | }
56 | .authorLinkText {
57 | font-weight: bold;
58 | text-overflow: ellipsis;
59 | overflow: hidden;
60 | white-space: normal;
61 | overflow-wrap: anywhere;
62 | word-break: normal;
63 | }
64 |
65 | .authorMeta {
66 | display: flex;
67 | }
68 | .authorFollow {
69 | display: flex;
70 | }
71 | .username {
72 | color: var(--tweet-font-color-secondary);
73 | text-decoration: none;
74 | text-overflow: ellipsis;
75 | word-break: normal;
76 | white-space: normal;
77 | overflow-wrap: anywhere;
78 | }
79 | .follow {
80 | color: var(--tweet-color-blue-secondary);
81 | text-decoration: none;
82 | font-weight: 400;
83 | font-size: x-small;
84 | }
85 | .follow:hover {
86 | text-decoration-line: underline;
87 | }
88 | .separator {
89 | padding: 0 0.25rem;
90 | }
91 |
92 | .brand {
93 | margin-inline-start: auto;
94 | }
95 | @media (max-width: 400px) {
96 | .brand {
97 | display: none;
98 | }
99 | }
100 |
101 | .twitterIcon {
102 | width: 16px;
103 | height: 16px;
104 | color: var(--tweet-twitter-icon-color);
105 | fill: currentColor;
106 | user-select: none;
107 | }
108 |
--------------------------------------------------------------------------------
/src/components/auto-added-sections/interlinked-content/MediaLinksInThisPage.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import type { Block, Post, InterlinkedContentInPage } from "@/lib/interfaces";
3 | import NBlocksPopover from "@/components/popover/NBlocksPopover.astro";
4 | import { getInterlinkedContentLink } from "@/lib/blog-helpers";
5 |
6 | import { getSymbolForLinkedContent } from "@/utils";
7 |
8 | interface Props {
9 | post: Post;
10 | filteredInterlinkedContentInPage: InterlinkedContentInPage[];
11 | }
12 | const { post, filteredInterlinkedContentInPage } = Astro.props;
13 |
14 | const groupedInterlinkedContent: { [key: string]: { block: Block; dml: string }[] } =
15 | filteredInterlinkedContentInPage.reduce((acc, ref) => {
16 | // Group by direct_nonmedia_link and collect Block objects
17 | if (ref.direct_media_link) {
18 | // const key = ref.direct_media_link;
19 | let key = null;
20 | key = ref.block.Video
21 | ? "Videos"
22 | : ref.block.NImage
23 | ? "Images"
24 | : ref.block.NAudio
25 | ? "Audio"
26 | : "Files";
27 | acc[key] = acc[key] || [];
28 | acc[key].push({ block: ref.block, dml: ref.direct_media_link });
29 | }
30 | return acc;
31 | }, {});
32 |
33 | const blockIdLinks = {};
34 | if (groupedInterlinkedContent) {
35 | for (const dmltype of Object.keys(groupedInterlinkedContent)) {
36 | for (const blockdml of groupedInterlinkedContent[dmltype]) {
37 | const result = await getInterlinkedContentLink(post.PageId, undefined, blockdml.block, true);
38 | blockIdLinks[blockdml.block.Id] = result[0];
39 | }
40 | }
41 | }
42 |
43 | // console.log(groupedInterlinkedContent);
44 | ---
45 |
46 | {
47 | groupedInterlinkedContent && Object.keys(groupedInterlinkedContent).length > 0 && (
48 | <>
49 |
50 | Media & Files On This Page
51 | {Object.entries(groupedInterlinkedContent).map(([dmltype, blockdmls]) => (
52 |
70 |
53 |
68 | ))}
69 |
54 | {dmltype} {" at "}
55 | {blockdmls.map((blockdml, index) => (
56 | <>
57 |
67 | 71 | 72 | ) 73 | } 74 | -------------------------------------------------------------------------------- /src/components/notion-blocks/embeds/astro-tweet/src/twitter-theme/TweetMedia.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { getMediaUrl } from "../utils.js"; 3 | import type { EnrichedTweet, EnrichedQuotedTweet } from "../utils.js"; 4 | import type { MediaDetails } from "../api/index"; 5 | import type { TwitterComponents } from "./types.js"; 6 | import MediaImg from "./MediaImg.astro"; 7 | import styles from "./tweet-media.module.css"; 8 | import TweetMediaVideo from "./TweetMediaVideo.astro"; 9 | import { getFirstImage } from "@/lib/blog-helpers"; 10 | 11 | const getSkeletonStyle = (media: MediaDetails, itemCount: number) => { 12 | let paddingBottom = 56.25; // default of 16x9 13 | 14 | // if we only have 1 item, show at original ratio 15 | if (itemCount === 1) 16 | paddingBottom = (100 / media.original_info.width) * media.original_info.height; 17 | 18 | // if we have 2 items, double the default to be 16x9 total 19 | if (itemCount === 2) paddingBottom = paddingBottom * 2; 20 | 21 | return { 22 | width: media.type === "photo" ? undefined : "unset", 23 | paddingBottom: `${paddingBottom}%`, 24 | }; 25 | }; 26 | interface Props { 27 | tweet: EnrichedTweet | EnrichedQuotedTweet; 28 | components?: TwitterComponents; 29 | quoted?: boolean; 30 | } 31 | const { tweet, components, quoted } = Astro.props; 32 | const length = tweet.mediaDetails?.length ?? 0; 33 | const Img = components?.MediaImg ?? MediaImg; 34 | --- 35 | 36 |
37 |
70 |
--------------------------------------------------------------------------------
/src/pages/sitemap.xml.ts:
--------------------------------------------------------------------------------
1 | import { getAllPosts, getAllPages } from "@/lib/notion/client";
2 | import { resolvePostHref, getPostLink } from "@/lib/blog-helpers";
3 | import { HIDE_UNDERSCORE_SLUGS_IN_LISTS } from "@/constants";
4 | import { getCollections } from "@/utils";
5 | import { slugify } from "@/utils";
6 |
7 | export const GET = async () => {
8 | const [posts, pages] = await Promise.all([getAllPosts(), getAllPages()]);
9 |
10 | // Filter posts and pages
11 | const filterEntries = (entries) => {
12 | const filtered = HIDE_UNDERSCORE_SLUGS_IN_LISTS
13 | ? entries.filter((entry) => !entry.Slug.startsWith("_"))
14 | : entries;
15 | return filtered.filter((entry) => !entry.IsExternal || !!entry.ExternalContent);
16 | };
17 |
18 | const filteredPosts = filterEntries(posts);
19 | const filteredPages = filterEntries(pages);
20 | const collections = await getCollections();
21 |
22 | // Generate sitemap entries for posts and pages
23 | const generateEntries = (entries, isPage) =>
24 | entries
25 | .map((entry) => {
26 | const url = new URL(
27 | resolvePostHref(entry, { forceIsRoot: isPage }),
28 | import.meta.env.SITE,
29 | ).toString();
30 | return ` 1 ? ` ${styles.grid2Columns}` : ""}${length === 3 ? ` ${styles.grid3}` : ""}${length > 4 ? ` ${styles.grid2x2}` : ""}`}
39 | >
40 | {
41 | tweet.mediaDetails?.map((media: any) => (
42 |
43 | {media.type === "photo" ? (
44 |
50 |
51 | 
58 |
59 | ) : (
60 |
66 | ))
67 | }
68 |
69 |
61 |
62 |
64 | )}
65 |
27 |
79 | )
80 | }
81 |
--------------------------------------------------------------------------------
/src/lib/notion/request-params.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable prettier/prettier */
2 | export interface QueryDatabase {
3 | database_id: string;
4 | filter?: PropertyFilterObject | CompoundFilterObject;
5 | sorts?: PropertyValueSortObject[];
6 | page_size?: number;
7 | start_cursor?: string;
8 | }
9 |
10 | export interface RetrieveDatabase {
11 | database_id: string;
12 | }
13 |
14 | export interface RetrieveBlock {
15 | block_id: string;
16 | }
17 |
18 | export interface RetrieveBlockChildren {
19 | block_id: string;
20 | page_size?: number;
21 | start_cursor?: string;
22 | }
23 |
24 | export interface PropertyFilterObject {
25 | property: string;
26 |
27 | checkbox?: CheckboxFilterCondition;
28 | select?: SelectFilterCondition;
29 | multi_select?: MultiSelectFilterCondition;
30 | relation?: RelationFilterCondition;
31 | rich_text?: RichTextFilterCondition;
32 | formula?: FormulaFilterCondition;
33 |
34 | date?: DateFilterCondition;
35 | created_time?: DateFilterCondition;
36 | last_edited_time?: DateFilterCondition;
37 | }
38 |
39 | export interface CompoundFilterObject {
40 | and?: PropertyFilterObject[] | CompoundFilterObject[];
41 | or?: PropertyFilterObject[] | CompoundFilterObject[];
42 | }
43 |
44 | export interface FormulaFilterCondition {
45 | checkbox?: CheckboxFilterCondition;
46 | date?: DateFilterCondition;
47 | string?: RichTextFilterCondition;
48 | }
49 |
50 | export interface RichTextFilterCondition {
51 | contains?: string;
52 | does_not_contain?: string;
53 | does_not_equal?: string;
54 | ends_with?: string;
55 | equals?: string;
56 | is_not_empty?: boolean;
57 | is_empty?: boolean;
58 | starts_with?: string;
59 | }
60 |
61 | export interface CheckboxFilterCondition {
62 | equals?: boolean;
63 | does_not_equal?: boolean;
64 | }
65 | export interface SelectFilterCondition {
66 | equals?: string;
67 | does_not_equal?: string;
68 | is_empty?: boolean;
69 | is_not_empty?: boolean;
70 | }
71 |
72 | export interface MultiSelectFilterCondition {
73 | contains?: string;
74 | does_not_contain?: string;
75 | is_empty?: boolean;
76 | is_not_empty?: boolean;
77 | }
78 |
79 | export interface RelationFilterCondition {
80 | contains?: string;
81 | does_not_contain?: string;
82 | is_empty?: boolean;
83 | is_not_empty?: boolean;
84 | }
85 |
86 | export interface DateFilterCondition {
87 | equals?: string;
88 | before?: string;
89 | after?: string;
90 | on_or_before?: string;
91 | is_empty?: boolean;
92 | is_not_empty?: boolean;
93 | on_or_after?: string;
94 | }
95 |
96 | export interface PropertyValueSortObject {
97 | property?: string;
98 | timestamp?: string;
99 | direction: string;
100 | }
101 |
--------------------------------------------------------------------------------
/src/components/notion-blocks/ToDo.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import * as interfaces from "@/lib/interfaces.ts";
3 | import { getNotionColorToTailwindColor } from "@/utils/style-helpers";
4 | import RichText from "@/components/notion-blocks/RichText.astro";
5 | import NotionBlocks from "@/components/NotionBlocks.astro";
6 | import Icon from "@/components/ui/Icon.astro";
7 |
8 | export interface Props {
9 | block: interfaces.Block;
10 | renderChildren?: boolean; // Make this optional
11 | setId?: boolean;
12 | }
13 |
14 | const { block, renderChildren = true, setId = true } = Astro.props;
15 | ---
16 |
17 | 28 | {comments.length} Mention{comments.length > 1 ? "s" : ""} 29 |
30 |-
31 | {comments.map((mention) => (
32 |
-
33 | {mention.author?.photo && mention.author.photo !== "" ? (
34 | mention.author.url && mention.author.url !== "" ? (
35 |
42 |
49 | 50 | ) : ( 51 | 58 | ) 59 | ) : null} 60 | 61 |75 |62 |73 |{mention.author?.name}
63 | 70 |71 | 72 | {mention.content?.text}
74 |
76 | ))}
77 |
18 | {
19 | block.ListItems.filter((b: interfaces.Block) => b.Type === "to_do").map(
20 | (b: interfaces.Block, index) => (
21 |
77 |
--------------------------------------------------------------------------------
/src/components/notion-blocks/embeds/astro-tweet/src/twitter-theme/TweetActions.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import { formatNumber } from "../utils.js";
3 | import type { EnrichedTweet } from "../utils.js";
4 | import styles from "./tweet-actions.module.css";
5 |
6 | interface Props {
7 | tweet: EnrichedTweet;
8 | }
9 |
10 | const { tweet } = Astro.props;
11 | const favoriteCount = formatNumber(tweet.favorite_count);
12 | ---
13 |
14 |
22 |
73 | ),
74 | )
75 | }
76 |
35 | {/* Flex container for the checkbox and text */}
36 |
62 | {b.HasChildren && renderChildren && (
63 |
37 | {/* Padding for the checkbox */}
38 |
39 |
47 |
48 | {/* Container for text, taking up the rest of the space */}
49 | {b.ToDo.RichTexts.map((richText: interfaces.RichText) => {
50 | if (b.ToDo.Checked) {
51 | return (
52 |
53 | {/* Block element for the text */}
54 |
61 |
64 | {/* Margin for spacing between the to-do and its children */}
65 |
71 | )}
72 |
15 |
22 |
77 |
--------------------------------------------------------------------------------
/src/lib/vite-external-content-plugins.ts:
--------------------------------------------------------------------------------
1 | import fs from "node:fs";
2 | import path from "node:path";
3 |
4 | function ensureBlankLineAfterImports(source: string): string {
5 | const lines = source.split(/\r?\n/);
6 | let idx = 0;
7 | let sawImport = false;
8 |
9 | while (idx < lines.length) {
10 | const trimmed = lines[idx].trim();
11 | if (!trimmed) {
12 | if (!sawImport) {
13 | idx += 1;
14 | continue;
15 | }
16 | break;
17 | }
18 | if (/^(import|export)\s/.test(trimmed)) {
19 | sawImport = true;
20 | idx += 1;
21 | continue;
22 | }
23 | break;
24 | }
25 |
26 | if (!sawImport) return source;
27 | if (idx >= lines.length) return source;
28 | if (lines[idx].trim() === "") return source;
29 |
30 | lines.splice(idx, 0, "");
31 | return lines.join("\n");
32 | }
33 |
34 | export function externalContentVitePlugins() {
35 | return [
36 | {
37 | name: "external-custom-components-fallback",
38 | enforce: "pre",
39 | load(id: string) {
40 | const target = `${path.sep}src${path.sep}components${path.sep}custom-components${path.sep}`;
41 | if (!id.includes(target)) return null;
42 | if (fs.existsSync(id)) return null;
43 | if (!/\.(astro|jsx|tsx|js|ts)$/.test(id)) return null;
44 | return `---\nconst { children, ...props } = Astro.props;\n---\n
23 |
30 |
31 | {favoriteCount}
32 |
33 |
40 |
41 |
48 |
49 | Reply
50 |
51 | {
52 | tweet.conversation_count !== 0 && (
53 |
60 |
61 |
66 |
67 |
68 | {tweet.conversation_count === 1
69 | ? `${formatNumber(tweet.conversation_count)} reply`
70 | : `${formatNumber(tweet.conversation_count)} replies`}
71 |
72 |
73 | )
74 | }
75 |
76 | \n
\n`;
45 | },
46 | },
47 | {
48 | name: "external-mdx-prep",
49 | enforce: "pre",
50 | transform(code: string, id: string) {
51 | if (
52 | !id.endsWith(".mdx") ||
53 | !id.includes(`${path.sep}src${path.sep}external-posts${path.sep}`)
54 | ) {
55 | return null;
56 | }
57 | const adjusted = ensureBlankLineAfterImports(code);
58 | return adjusted === code ? null : adjusted;
59 | },
60 | },
61 | {
62 | name: "custom-components-asset-rewrite",
63 | enforce: "pre",
64 | transform(code: string, id: string) {
65 | if (!id.endsWith(".astro")) return null;
66 | const parts = id.split(path.sep);
67 | const idx = parts.lastIndexOf("custom-components");
68 | if (idx === -1) return null;
69 |
70 | const relPath = parts.slice(idx + 1, -1); // folders inside custom-components
71 | const rewriteAsset = (raw: string) => {
72 | if (!raw.startsWith(".")) return raw;
73 | const abs = path.posix.normalize(
74 | path.posix.join("/custom-components", relPath.join("/"), raw),
75 | );
76 | return abs;
77 | };
78 |
79 | let mutated = code;
80 | const attrRegex = /(src|href|poster|data-src|data-href)\s*=\s*["'](\.{1,2}\/[^"']+)["']/g;
81 | mutated = mutated.replace(attrRegex, (_m, attr, url) => `${attr}="${rewriteAsset(url)}"`);
82 | return mutated === code ? null : mutated;
83 | },
84 | },
85 | ];
86 | }
87 |
--------------------------------------------------------------------------------
/src/components/notion-blocks/embeds/astro-tweet/src/twitter-theme/tweet-actions.module.css:
--------------------------------------------------------------------------------
1 | .actions {
2 | display: flex;
3 | align-items: center;
4 | color: var(--tweet-font-color-secondary);
5 | padding-top: 0.25rem;
6 | margin-top: 0.25rem;
7 | border-top: var(--tweet-border);
8 | overflow-wrap: break-word;
9 | white-space: nowrap;
10 | text-overflow: ellipsis;
11 | }
12 |
13 | .like,
14 | .reply,
15 | .copy,
16 | .read {
17 | text-decoration: none;
18 | color: inherit;
19 | display: flex;
20 | align-items: center;
21 | margin-right: 1.25rem;
22 | }
23 | .like:hover,
24 | .reply:hover,
25 | .copy:hover,
26 | .read:hover {
27 | background-color: rgba(0, 0, 0, 0);
28 | }
29 | .like:hover > .likeIconWrapper {
30 | background-color: var(--tweet-color-red-primary-hover);
31 | }
32 | .like:hover > .likeCount {
33 | color: var(--tweet-color-red-primary);
34 | text-decoration-line: underline;
35 | }
36 | .likeIconWrapper,
37 | .replyIconWrapper,
38 | .copyIconWrapper,
39 | .readIconWrapper {
40 | width: var(--tweet-actions-icon-wrapper-size);
41 | height: var(--tweet-actions-icon-wrapper-size);
42 | display: flex;
43 | justify-content: center;
44 | align-items: center;
45 | margin-left: -0.25rem;
46 | border-radius: 9999px;
47 | }
48 | .likeIcon,
49 | .replyIcon,
50 | .copyIcon,
51 | .readIcon {
52 | height: var(--tweet-actions-icon-size);
53 | fill: currentColor;
54 | user-select: none;
55 | }
56 | .likeIcon {
57 | color: var(--tweet-color-red-primary);
58 | }
59 | .likeCount,
60 | .replyText,
61 | .copyText,
62 | .readText {
63 | font-size: var(--tweet-actions-font-size);
64 | font-weight: var(--tweet-actions-font-weight);
65 | line-height: var(--tweet-actions-line-height);
66 | margin-left: 0.25rem;
67 | }
68 |
69 | .reply:hover > .replyIconWrapper {
70 | background-color: var(--tweet-color-blue-secondary-hover);
71 | }
72 | .reply:hover > .replyText {
73 | color: var(--tweet-color-blue-secondary);
74 | text-decoration-line: underline;
75 | }
76 | .replyIcon {
77 | color: var(--tweet-color-blue-primary);
78 | }
79 |
80 | .read:hover > .readIconWrapper {
81 | background-color: var(--tweet-color-green-primary-hover);
82 | }
83 | .read:hover > .readText {
84 | color: var(--tweet-color-green-primary);
85 | text-decoration-line: underline;
86 | }
87 | .readIcon {
88 | color: var(--tweet-color-green-primary);
89 | }
90 |
91 | .copy {
92 | font: inherit;
93 | background: none;
94 | border: none;
95 | cursor: pointer;
96 | }
97 | .copy:hover > .copyIconWrapper {
98 | background-color: var(--tweet-color-green-primary-hover);
99 | }
100 | .copy:hover .copyIcon {
101 | color: var(--tweet-color-green-primary);
102 | }
103 | .copy:hover > .copyText {
104 | color: var(--tweet-color-green-primary);
105 | text-decoration-line: underline;
106 | }
107 |
--------------------------------------------------------------------------------
/src/lib/external-content/external-html-utils.ts:
--------------------------------------------------------------------------------
1 | import { parseDocument, DomUtils } from "htmlparser2";
2 | import type { Document, Element } from "domhandler";
3 | import type { ExternalContentDescriptor } from "@/lib/interfaces";
4 | import type { Heading } from "@/types";
5 | import { isRelativePath, toPublicUrl, extractHeadingsFromDocument } from "./external-content-utils";
6 |
7 | export type HtmlTransformResult = {
8 | html: string;
9 | headings: Heading[];
10 | };
11 |
12 | export { isRelativePath, toPublicUrl };
13 |
14 | const ASSET_ATTRS: Record
33 |
34 |
45 |
51 |
61 | ) : (
62 |
34 |
45 |
46 | {block.Toggle.RichTexts.map((richText: interfaces.RichText) => (
47 |
51 |
52 | {block.Toggle.Children && renderChildren && (
53 |
60 |
63 |
81 | )
82 | }
83 |
84 |
96 |
--------------------------------------------------------------------------------
/src/components/notion-blocks/embeds/astro-bluesky/quote-embed.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import { AppBskyEmbedRecord, AppBskyFeedPost } from "@atproto/api";
3 | import Embed from "./embed.astro";
4 | import { atUriToPostUri, viewRecordToEmbed } from "./utils";
5 | import Avatar from "./avatar.astro";
6 |
7 | interface Props {
8 | embed: AppBskyEmbedRecord.View;
9 | }
10 |
11 | const { embed } = Astro.props;
12 | ---
13 |
14 | {
15 | AppBskyEmbedRecord.isViewRecord(embed.record) && AppBskyFeedPost.isRecord(embed.record.value) ? (
16 |
64 |
75 |
76 | {block.Toggle.RichTexts.map((richText: interfaces.RichText) => (
77 |
80 |
17 |
23 |
30 |
31 |
37 |
45 | ) : null
46 | }
47 |
48 |
101 |
--------------------------------------------------------------------------------
/.github/workflows/recover-cache.yml:
--------------------------------------------------------------------------------
1 | name: Recover Cache
2 |
3 | on:
4 | workflow_dispatch:
5 | inputs:
6 | cache_key:
7 | description: "The exact key or prefix of the cache to recover"
8 | required: true
9 |
10 | jobs:
11 | recover:
12 | runs-on: ubuntu-latest
13 | steps:
14 | - name: Checkout repository
15 | uses: actions/checkout@v4
16 |
17 | - name: List all caches
18 | run: |
19 | gh cache list
20 | env:
21 | GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
22 |
23 | - name: Determine path to recover
24 | id: determine_path
25 | run: |
26 | if [[ "${{ github.event.inputs.cache_key }}" == *"constants-config"* ]]; then
27 | # Check if user specified .json5 or .json explicitly in the cache key
28 | if [[ "${{ github.event.inputs.cache_key }}" == *".json5"* ]]; then
29 | echo "path=constants-config.json5" >> $GITHUB_OUTPUT
30 | elif [[ "${{ github.event.inputs.cache_key }}" == *".json"* ]]; then
31 | echo "path=constants-config.json" >> $GITHUB_OUTPUT
32 | else
33 | # No explicit format in key - prefer .json5 if it exists, otherwise .json
34 | if [ -f "constants-config.json5" ]; then
35 | echo "path=constants-config.json5" >> $GITHUB_OUTPUT
36 | else
37 | echo "path=constants-config.json" >> $GITHUB_OUTPUT
38 | fi
39 | fi
40 | elif [[ "${{ github.event.inputs.cache_key }}" == *"tmp-webtrotion"* ]]; then
41 | echo "path=tmp" >> $GITHUB_OUTPUT
42 | elif [[ "${{ github.event.inputs.cache_key }}" == *"public-webtrotion"* ]]; then
43 | echo "path=public" >> $GITHUB_OUTPUT
44 | elif [[ "${{ github.event.inputs.cache_key }}" == *"modules"* ]]; then
45 | echo "path=node_modules" >> $GITHUB_OUTPUT
46 | elif [[ "${{ github.event.inputs.cache_key }}" == *"old-package-json-cache"* ]]; then
47 | echo "path=old_package.json" >> $GITHUB_OUTPUT
48 | else
49 | echo "::error::Could not determine path to recover from cache key. Please check the cache key."
50 | exit 1
51 | fi
52 |
53 | - name: Restore Cache
54 | id: cache-restore
55 | uses: actions/cache/restore@v4
56 | with:
57 | path: ./${{ steps.determine_path.outputs.path }}
58 | key: ${{ github.event.inputs.cache_key }}
59 | restore-keys: |
60 | ${{ github.event.inputs.cache_key }}
61 |
62 | - name: List restored files
63 | run: ls -lR ./${{ steps.determine_path.outputs.path }}
64 |
65 | - name: Upload Artifact
66 | uses: actions/upload-artifact@v4
67 | with:
68 | name: recovered-${{ github.event.inputs.cache_key }}
69 | path: ./${{ steps.determine_path.outputs.path }}
70 |
--------------------------------------------------------------------------------
/src/components/notion-blocks/embeds/astro-bluesky/card.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import { AppBskyActorDefs } from "@atproto/api";
3 | import Avatar from "./avatar.astro";
4 |
5 | interface Props {
6 | href: string;
7 | image?:
8 | | {
9 | src: string;
10 | alt?: string;
11 | }
12 | | undefined;
13 | avatarUser: AppBskyActorDefs.ProfileViewBasic;
14 | title: string;
15 | subtitle: string;
16 | description?: string | undefined;
17 | }
18 |
19 | const { href, image, avatarUser, title, subtitle, description } = Astro.props;
20 | ---
21 |
22 |
23 | {image && {embed.record.value.text}
38 | 39 | 44 |
25 |
34 |
35 |
36 |
104 |
--------------------------------------------------------------------------------
/src/components/auto-added-sections/BibliographySection.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import type { Citation } from "@/lib/interfaces";
3 | import { getSymbolForLinkedContent } from "@/utils";
4 | import { BIBLIOGRAPHY_STYLE } from "@/constants";
5 | import NBlocksPopover from "@/components/popover/NBlocksPopover.astro";
6 |
7 | export interface Props {
8 | citations: Citation[];
9 | }
10 |
11 | const { citations } = Astro.props;
12 |
13 | // Bibliography should already be sorted by prepareBibliography()
14 | // IEEE: By Index (first appearance order)
15 | // APA: Alphabetically by Authors
16 | ---
17 |
18 | {
19 | citations.length > 0 && (
20 |
26 |
32 | {description &&
28 |
31 | {title}
29 |{subtitle}
30 |{description}
} 33 |22 |
23 | Bibliography 24 |
25 | {/* IEEE: numbered list (1, 2, 3...) | APA: no markers (plain entries) */} 26 |-
32 | {citations.map((citation) => (
33 |
-
34 | {/* Back to citation button (hidden by default, shown via script) - positioned in left margin */}
35 |
55 |
56 | 57 | {/* Formatted bibliography entry */} 58 | {citation.Url ? ( 59 | 65 | 66 | 67 | ) : ( 68 | 69 | )} 70 | 71 | {/* Backlinks with symbols using NBlocksPopover */} 72 | {citation.SourceBlocks && citation.SourceBlocks.length > 0 && ( 73 | 74 | at{" "} 75 | {citation.SourceBlocks.map((block, index) => ( 76 |87 |
83 | ))} 84 | 85 | )} 86 |
88 | ))}
89 |
22 | {content.RichTexts.map((rt) => (
23 |
26 | )
27 | }
28 | {
29 | content.Type === "blocks" && content.Blocks && (
30 |
36 | {content.RichTexts.map((rt) => (
37 |
92 | )
93 | }
94 |
--------------------------------------------------------------------------------
/src/integrations/google-woff2-provider.mjs:
--------------------------------------------------------------------------------
1 | import { providers } from "unifont";
2 |
3 | const googleOriginal = providers.google;
4 |
5 | const urlLooksLike = (value, extension) => {
6 | if (!value) return false;
7 | if (value instanceof URL) {
8 | return value.pathname.toLowerCase().endsWith(extension);
9 | }
10 | if (typeof value === "string") {
11 | // Strip query/hash so `.woff?x=y` still matches.
12 | const cleaned = value.split("#")[0].split("?")[0].toLowerCase();
13 | return cleaned.endsWith(extension);
14 | }
15 | return false;
16 | };
17 |
18 | const sourceIsWoff = (source) => {
19 | if (!source) return false;
20 | if (typeof source === "string" || source instanceof URL) return urlLooksLike(source, ".woff");
21 | // Ignore local/font-name entries.
22 | if (typeof source === "object" && "name" in source) return false;
23 | if (typeof source === "object") {
24 | if (source.format === "woff") return true;
25 | return urlLooksLike(source.url, ".woff");
26 | }
27 | return false;
28 | };
29 |
30 | const sourceIsWoff2 = (source) => {
31 | if (!source) return false;
32 | if (typeof source === "string" || source instanceof URL) return urlLooksLike(source, ".woff2");
33 | // Ignore local/font-name entries.
34 | if (typeof source === "object" && "name" in source) return false;
35 | if (typeof source === "object") {
36 | if (source.format === "woff2") return true;
37 | return urlLooksLike(source.url, ".woff2");
38 | }
39 | return false;
40 | };
41 |
42 | export const provider = (options) => {
43 | const googleProviderInstance = googleOriginal(options);
44 |
45 | return async (ctx) => {
46 | const initializedProvider = await googleProviderInstance(ctx);
47 | if (!initializedProvider) return undefined;
48 |
49 | const originalResolveFont = initializedProvider.resolveFont;
50 |
51 | initializedProvider.resolveFont = async (family, opts) => {
52 | const result = await originalResolveFont(family, opts);
53 | if (!result || !result.fonts) return result;
54 |
55 | // Unifont's Google provider fetches multiple "priorities" (modern + legacy UAs).
56 | // If the result contains ANY woff2 sources, we treat woff as legacy fallback and
57 | // drop it entirely (including separate woff-only font-face entries).
58 | const anyWoff2 = result.fonts.some(
59 | (font) => Array.isArray(font.src) && font.src.some(sourceIsWoff2),
60 | );
61 |
62 | if (anyWoff2) {
63 | result.fonts = result.fonts
64 | .map((font) => ({
65 | ...font,
66 | src: (font.src || []).filter((s) => !sourceIsWoff(s)),
67 | }))
68 | // Keep only font-face entries that still have a usable source.
69 | // (For Google fonts this means woff2; local() sources are also OK.)
70 | .filter(
71 | (font) =>
72 | Array.isArray(font.src) &&
73 | font.src.length > 0 &&
74 | (font.src.some(sourceIsWoff2) ||
75 | font.src.some((s) => typeof s === "object" && s && "name" in s)),
76 | );
77 | } else {
78 | // No woff2 anywhere: do not remove woff (it's the only usable format).
79 | // Leave `result.fonts` untouched.
80 | }
81 | return result;
82 | };
83 |
84 | return initializedProvider;
85 | };
86 | };
87 |
--------------------------------------------------------------------------------
41 | {content.CommentAttachments.map((attachment) => {
42 | const fileObject: FileObject = {
43 | Type: "file",
44 | Url: attachment.Url,
45 | ExpiryTime: attachment.ExpiryTime,
46 | };
47 |
48 | let syntheticBlock: BlockType;
49 |
50 | switch (attachment.Category) {
51 | case "image":
52 | syntheticBlock = {
53 | Type: "image",
54 | Id: "",
55 | HasChildren: false,
56 | NImage: { Type: "file", Caption: [], File: fileObject },
57 | LastUpdatedTimeStamp: new Date(),
58 | };
59 | return
90 | )}
91 |