feat(core): migrate to astro from next.js

astro.config.ts

@@ -0,0 +1,112 @@
+import fs from "node:fs";
+import { rehypeHeadingIds } from "@astrojs/markdown-remark";
+import mdx from "@astrojs/mdx";
+import sitemap from "@astrojs/sitemap";
+import tailwind from "@tailwindcss/vite";
+import { defineConfig, envField } from "astro/config";
+import expressiveCode from "astro-expressive-code";
+import icon from "astro-icon";
+import robotsTxt from "astro-robots-txt";
+import webmanifest from "astro-webmanifest";
+import rehypeAutolinkHeadings from "rehype-autolink-headings";
+import rehypeExternalLinks from "rehype-external-links";
+import rehypeUnwrapImages from "rehype-unwrap-images";
+import remarkDirective from "remark-directive"; /* Handle ::: directives as nodes */
+import { remarkAdmonitions } from "./src/plugins/remark-admonitions";
+import { remarkGithubCard } from "./src/plugins/remark-github-card";
+import { remarkReadingTime } from "./src/plugins/remark-reading-time";
+import { expressiveCodeOptions, siteConfig } from "./src/site.config";
+
+// https://astro.build/config
+export default defineConfig({
+	site: siteConfig.url,
+	image: {
+		domains: ["webmention.io"],
+	},
+	integrations: [
+		expressiveCode(expressiveCodeOptions),
+		icon(),
+		sitemap(),
+		mdx(),
+		robotsTxt(),
+		webmanifest({
+			// See: https://github.com/alextim/astro-lib/blob/main/packages/astro-webmanifest/README.md
+			name: siteConfig.title,
+			description: siteConfig.description,
+			lang: siteConfig.lang,
+			icon: "public/icon.svg", // the source for generating favicon & icons
+			icons: [
+				{
+					src: "icons/apple-touch-icon.png", // used in src/components/BaseHead.astro L:26
+					sizes: "180x180",
+					type: "image/png",
+				},
+				{
+					src: "icons/icon-192.png",
+					sizes: "192x192",
+					type: "image/png",
+				},
+				{
+					src: "icons/icon-512.png",
+					sizes: "512x512",
+					type: "image/png",
+				},
+			],
+			start_url: "/",
+			background_color: "#1d1f21",
+			theme_color: "#2bbc8a",
+			display: "standalone",
+			config: {
+				insertFaviconLinks: false,
+				insertThemeColorMeta: false,
+				insertManifestLink: false,
+			},
+		}),
+	],
+	markdown: {
+		rehypePlugins: [
+			rehypeHeadingIds,
+			[rehypeAutolinkHeadings, { behavior: "wrap", properties: { className: ["not-prose"] } }],
+			[
+				rehypeExternalLinks,
+				{
+					rel: ["noreferrer", "noopener"],
+					target: "_blank",
+				},
+			],
+			rehypeUnwrapImages,
+		],
+		remarkPlugins: [remarkReadingTime, remarkDirective, remarkGithubCard, remarkAdmonitions],
+		remarkRehype: {
+			footnoteLabelProperties: {
+				className: [""],
+			},
+		},
+	},
+	vite: {
+		plugins: [tailwind(), rawFonts([".ttf", ".woff"])],
+	},
+	env: {
+		schema: {
+			WEBMENTION_API_KEY: envField.string({ context: "server", access: "secret", optional: true }),
+			WEBMENTION_URL: envField.string({ context: "client", access: "public", optional: true }),
+			WEBMENTION_PINGBACK: envField.string({ context: "client", access: "public", optional: true }),
+		},
+	},
+});
+
+function rawFonts(ext: string[]) {
+	return {
+		name: "vite-plugin-raw-fonts",
+		// @ts-expect-error:next-line
+		transform(_, id) {
+			if (ext.some((e) => id.endsWith(e))) {
+				const buffer = fs.readFileSync(id);
+				return {
+					code: `export default ${JSON.stringify(buffer)}`,
+					map: null,
+				};
+			}
+		},
+	};
+}

next.config.mjs

@@ -1,52 +0,0 @@
-import rehypePrism from '@mapbox/rehype-prism'
-import nextMDX from '@next/mdx'
-import remarkGfm from 'remark-gfm'
-
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'mdx'],
-  redirects: async () => {
-    return [
-      {
-        source: '/twitter',
-        destination: 'https://twitter.com/thisisprad',
-        permanent: true,
-      },
-      {
-        source: '/github',
-        destination: 'https://github.com/prnk28',
-        permanent: true,
-      },
-      {
-        source: '/linkedin',
-        destination: 'https://www.linkedin.com/in/pradn/',
-        permanent: true,
-      },
-      {
-        source: '/medium',
-        destination: 'https://medium.com/@prnk28',
-        permanent: true,
-      },
-      {
-        source: '/cal',
-        destination: 'https://cal.com/pradn',
-        permanent: true,
-      },
-      {
-        source: '/telegram',
-        destination: 'https://t.me/prnk28',
-        permanent: true,
-      }
-    ]
-  }
-}
-
-const withMDX = nextMDX({
-  extension: /\.mdx?$/,
-  options: {
-    remarkPlugins: [remarkGfm],
-    rehypePlugins: [rehypePrism],
-  },
-})
-
-export default withMDX(nextConfig)

postcss.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}

tailwind.config.ts

@@ -1,28 +1,93 @@
-import typographyPlugin from '@tailwindcss/typography'
+import type { Config } from "tailwindcss";
-import { type Config } from 'tailwindcss'
-
-import typographyStyles from './typography'
 
 export default {
-  content: ['./src/**/*.{js,jsx,ts,tsx}'],
+	plugins: [require("@tailwindcss/typography")],
-  darkMode: 'class',
+	theme: {
-  plugins: [typographyPlugin],
+		extend: {
-  theme: {
+			typography: () => ({
-    fontSize: {
+				DEFAULT: {
-      xs: ['0.8125rem', { lineHeight: '1.5rem' }],
+					css: {
-      sm: ['0.875rem', { lineHeight: '1.5rem' }],
+						a: {
-      base: ['1rem', { lineHeight: '1.75rem' }],
+							textUnderlineOffset: "2px",
-      lg: ['1.125rem', { lineHeight: '1.75rem' }],
+							"&:hover": {
-      xl: ['1.25rem', { lineHeight: '2rem' }],
+								"@media (hover: hover)": {
-      '2xl': ['1.5rem', { lineHeight: '2rem' }],
+									textDecorationColor: "var(--color-link)",
-      '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
+									textDecorationThickness: "2px",
-      '4xl': ['2rem', { lineHeight: '2.5rem' }],
+								},
-      '5xl': ['3rem', { lineHeight: '3.5rem' }],
+							},
-      '6xl': ['3.75rem', { lineHeight: '1' }],
+						},
-      '7xl': ['4.5rem', { lineHeight: '1' }],
+						blockquote: {
-      '8xl': ['6rem', { lineHeight: '1' }],
+							borderLeftWidth: "0",
-      '9xl': ['8rem', { lineHeight: '1' }],
+						},
-    },
+						code: {
-    typography: typographyStyles,
+							border: "1px dotted #666",
-  },
+							borderRadius: "2px",
-} satisfies Config
+						},
+						kbd: {
+							"&:where([data-theme='dark'], [data-theme='dark'] *)": {
+								background: "var(--color-global-text)",
+							},
+						},
+						hr: {
+							borderTopStyle: "dashed",
+						},
+						strong: {
+							fontWeight: "700",
+						},
+						sup: {
+							marginInlineStart: "calc(var(--spacing) * 0.5)",
+							a: {
+								"&:after": {
+									content: "']'",
+								},
+								"&:before": {
+									content: "'['",
+								},
+								"&:hover": {
+									"@media (hover: hover)": {
+										color: "var(--color-link)",
+									},
+								},
+							},
+						},
+						/* Table */
+						"tbody tr": {
+							borderBottomWidth: "none",
+						},
+						tfoot: {
+							borderTop: "1px dashed #666",
+						},
+						thead: {
+							borderBottomWidth: "none",
+						},
+						"thead th": {
+							borderBottom: "1px dashed #666",
+							fontWeight: "700",
+						},
+						'th[align="center"], td[align="center"]': {
+							"text-align": "center",
+						},
+						'th[align="right"], td[align="right"]': {
+							"text-align": "right",
+						},
+						'th[align="left"], td[align="left"]': {
+							"text-align": "left",
+						},
+						".expressive-code, .admonition, .github-card": {
+							marginTop: "calc(var(--spacing)*4)",
+							marginBottom: "calc(var(--spacing)*4)",
+						},
+					},
+				},
+				sm: {
+					css: {
+						code: {
+							fontSize: "var(--text-sm)",
+							fontWeight: "400",
+						},
+					},
+				},
+			}),
+		},
+	},
+} satisfies Config;

tsconfig.json

@@ -1,28 +1,11 @@
 {
-  "compilerOptions": {
+	"extends": "astro/tsconfigs/strictest",
-    "target": "es6",
+	"compilerOptions": {
-    "lib": ["dom", "dom.iterable", "esnext"],
+		"baseUrl": ".",
-    "allowJs": true,
+		"paths": {
-    "skipLibCheck": true,
+			"@/*": ["src/*"]
-    "strict": true,
+		}
-    "forceConsistentCasingInFileNames": true,
+	},
-    "noEmit": true,
+	"include": [".astro/types.d.ts", "**/*"],
-    "esModuleInterop": true,
+	"exclude": ["node_modules", "**/node_modules/*", ".vscode", "dist"]
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
 }