feat: vercel hosting for SSR (#61)

- **feat: API R2 assets**
  

- **blog: update WordPress post with R2Image component for all four
images**
  

- **fix: remove signed URL logging**
  

- **fix: replace all images in all blog posts with R2Image component**
  

- **fix: set image caption as alt text in R2Image component**
  

- **fix: placeholder alt text**
  

- **fix: R2Image formatting in one post, but need to figure out how to
handle this with prettier for all blog posts**
  

- **fix: install cloudflare adapter**
  

- **fix: address warnings in paths that use getStaticPaths()**
  

- **chore: upgrade**
  

- **debug: cssesc overrides, nodejs compatibility with cloudflare
workers platform**
  

- **debug: noExternal node:fs**
  

- **debug: noExternal node:fs**
  

- **debug: node:fs**
  

- **debug: node:fs**
  

- **debug: external node:fs**
  

- **debug: external node:fs**
  

- **debug: external node:path**
  

- **debug: all node apis from cloudflare**
  

- **debug: node:perf_hooks**
  

- **debug: node:module**

.gitignore

@@ -23,3 +23,4 @@ pnpm-debug.log*
 # jetbrains setting folder
 .idea/
 .aider*
+.vercel/

astro.config.mjs

@@ -1,15 +1,16 @@
 import mdx from '@astrojs/mdx';
+import partytown from '@astrojs/partytown';
 import sitemap from '@astrojs/sitemap';
 import tailwind from '@astrojs/tailwind';
 import { defineConfig } from 'astro/config';
 import { autoNewTabExternalLinks } from './src/autoNewTabExternalLinks';
 
-import partytown from '@astrojs/partytown';
+import vercel from '@astrojs/vercel/serverless';
 
 // https://astro.build/config
 export default defineConfig({
 	site: 'https://www.arun.blog',
-	output: 'server',
+	output: 'hybrid',
 	integrations: [mdx(), sitemap(), tailwind(), partytown()],
 	markdown: {
 		extendDefaultPlugins: true,
@@ -22,4 +23,5 @@ export default defineConfig({
 			],
 		],
 	},
+	adapter: vercel(),
 });

overrides/cssesc/index.cjs

@@ -0,0 +1,114 @@
+/*! https://mths.be/cssesc v3.0.0 by @mathias */
+'use strict';
+
+var object = {};
+var hasOwnProperty = object.hasOwnProperty;
+var merge = function merge(options, defaults) {
+	if (!options) {
+		return defaults;
+	}
+	var result = {};
+	for (var key in defaults) {
+		// `if (defaults.hasOwnProperty(key) { … }` is not needed here, since
+		// only recognized option names are used.
+		result[key] = hasOwnProperty.call(options, key) ? options[key] : defaults[key];
+	}
+	return result;
+};
+
+var regexAnySingleEscape = /[ -,\.\/:-@\[-\^`\{-~]/;
+var regexSingleEscape = /[ -,\.\/:-@\[\]\^`\{-~]/;
+var regexAlwaysEscape = /['"\\]/;
+var regexExcessiveSpaces = /(^|\\+)?(\\[A-F0-9]{1,6})\x20(?![a-fA-F0-9\x20])/g;
+
+// https://mathiasbynens.be/notes/css-escapes#css
+var cssesc = function cssesc(string, options) {
+	options = merge(options, cssesc.options);
+	if (options.quotes != 'single' && options.quotes != 'double') {
+		options.quotes = 'single';
+	}
+	var quote = options.quotes == 'double' ? '"' : "'";
+	var isIdentifier = options.isIdentifier;
+
+	var firstChar = string.charAt(0);
+	var output = '';
+	var counter = 0;
+	var length = string.length;
+	while (counter < length) {
+		var character = string.charAt(counter++);
+		var codePoint = character.charCodeAt();
+		var value = void 0;
+		// If it’s not a printable ASCII character…
+		if (codePoint < 0x20 || codePoint > 0x7e) {
+			if (codePoint >= 0xd800 && codePoint <= 0xdbff && counter < length) {
+				// It’s a high surrogate, and there is a next character.
+				var extra = string.charCodeAt(counter++);
+				if ((extra & 0xfc00) == 0xdc00) {
+					// next character is low surrogate
+					codePoint = ((codePoint & 0x3ff) << 10) + (extra & 0x3ff) + 0x10000;
+				} else {
+					// It’s an unmatched surrogate; only append this code unit, in case
+					// the next code unit is the high surrogate of a surrogate pair.
+					counter--;
+				}
+			}
+			value = '\\' + codePoint.toString(16).toUpperCase() + ' ';
+		} else {
+			if (options.escapeEverything) {
+				if (regexAnySingleEscape.test(character)) {
+					value = '\\' + character;
+				} else {
+					value = '\\' + codePoint.toString(16).toUpperCase() + ' ';
+				}
+			} else if (/[\t\n\f\r\x0B]/.test(character)) {
+				value = '\\' + codePoint.toString(16).toUpperCase() + ' ';
+			} else if (
+				character == '\\' ||
+				(!isIdentifier && ((character == '"' && quote == character) || (character == "'" && quote == character))) ||
+				(isIdentifier && regexSingleEscape.test(character))
+			) {
+				value = '\\' + character;
+			} else {
+				value = character;
+			}
+		}
+		output += value;
+	}
+
+	if (isIdentifier) {
+		if (/^-[-\d]/.test(output)) {
+			output = '\\-' + output.slice(1);
+		} else if (/\d/.test(firstChar)) {
+			output = '\\3' + firstChar + ' ' + output.slice(1);
+		}
+	}
+
+	// Remove spaces after `\HEX` escapes that are not followed by a hex digit,
+	// since they’re redundant. Note that this is only possible if the escape
+	// sequence isn’t preceded by an odd number of backslashes.
+	output = output.replace(regexExcessiveSpaces, function ($0, $1, $2) {
+		if ($1 && $1.length % 2) {
+			// It’s not safe to remove the space, so don’t.
+			return $0;
+		}
+		// Strip the space.
+		return ($1 || '') + $2;
+	});
+
+	if (!isIdentifier && options.wrap) {
+		return quote + output + quote;
+	}
+	return output;
+};
+
+// Expose default options (so they can be overridden globally).
+cssesc.options = {
+	escapeEverything: false,
+	isIdentifier: false,
+	quotes: 'single',
+	wrap: false,
+};
+
+cssesc.version = '3.0.0';
+
+module.exports = cssesc;

overrides/cssesc/index.mjs

@@ -0,0 +1,114 @@
+/*! https://mths.be/cssesc v3.0.0 by @mathias */
+'use strict';
+
+var object = {};
+var hasOwnProperty = object.hasOwnProperty;
+var merge = function merge(options, defaults) {
+	if (!options) {
+		return defaults;
+	}
+	var result = {};
+	for (var key in defaults) {
+		// `if (defaults.hasOwnProperty(key) { … }` is not needed here, since
+		// only recognized option names are used.
+		result[key] = hasOwnProperty.call(options, key) ? options[key] : defaults[key];
+	}
+	return result;
+};
+
+var regexAnySingleEscape = /[ -,\.\/:-@\[-\^`\{-~]/;
+var regexSingleEscape = /[ -,\.\/:-@\[\]\^`\{-~]/;
+var regexAlwaysEscape = /['"\\]/;
+var regexExcessiveSpaces = /(^|\\+)?(\\[A-F0-9]{1,6})\x20(?![a-fA-F0-9\x20])/g;
+
+// https://mathiasbynens.be/notes/css-escapes#css
+var cssesc = function cssesc(string, options) {
+	options = merge(options, cssesc.options);
+	if (options.quotes != 'single' && options.quotes != 'double') {
+		options.quotes = 'single';
+	}
+	var quote = options.quotes == 'double' ? '"' : "'";
+	var isIdentifier = options.isIdentifier;
+
+	var firstChar = string.charAt(0);
+	var output = '';
+	var counter = 0;
+	var length = string.length;
+	while (counter < length) {
+		var character = string.charAt(counter++);
+		var codePoint = character.charCodeAt();
+		var value = void 0;
+		// If it’s not a printable ASCII character…
+		if (codePoint < 0x20 || codePoint > 0x7e) {
+			if (codePoint >= 0xd800 && codePoint <= 0xdbff && counter < length) {
+				// It’s a high surrogate, and there is a next character.
+				var extra = string.charCodeAt(counter++);
+				if ((extra & 0xfc00) == 0xdc00) {
+					// next character is low surrogate
+					codePoint = ((codePoint & 0x3ff) << 10) + (extra & 0x3ff) + 0x10000;
+				} else {
+					// It’s an unmatched surrogate; only append this code unit, in case
+					// the next code unit is the high surrogate of a surrogate pair.
+					counter--;
+				}
+			}
+			value = '\\' + codePoint.toString(16).toUpperCase() + ' ';
+		} else {
+			if (options.escapeEverything) {
+				if (regexAnySingleEscape.test(character)) {
+					value = '\\' + character;
+				} else {
+					value = '\\' + codePoint.toString(16).toUpperCase() + ' ';
+				}
+			} else if (/[\t\n\f\r\x0B]/.test(character)) {
+				value = '\\' + codePoint.toString(16).toUpperCase() + ' ';
+			} else if (
+				character == '\\' ||
+				(!isIdentifier && ((character == '"' && quote == character) || (character == "'" && quote == character))) ||
+				(isIdentifier && regexSingleEscape.test(character))
+			) {
+				value = '\\' + character;
+			} else {
+				value = character;
+			}
+		}
+		output += value;
+	}
+
+	if (isIdentifier) {
+		if (/^-[-\d]/.test(output)) {
+			output = '\\-' + output.slice(1);
+		} else if (/\d/.test(firstChar)) {
+			output = '\\3' + firstChar + ' ' + output.slice(1);
+		}
+	}
+
+	// Remove spaces after `\HEX` escapes that are not followed by a hex digit,
+	// since they’re redundant. Note that this is only possible if the escape
+	// sequence isn’t preceded by an odd number of backslashes.
+	output = output.replace(regexExcessiveSpaces, function ($0, $1, $2) {
+		if ($1 && $1.length % 2) {
+			// It’s not safe to remove the space, so don’t.
+			return $0;
+		}
+		// Strip the space.
+		return ($1 || '') + $2;
+	});
+
+	if (!isIdentifier && options.wrap) {
+		return quote + output + quote;
+	}
+	return output;
+};
+
+// Expose default options (so they can be overridden globally).
+cssesc.options = {
+	escapeEverything: false,
+	isIdentifier: false,
+	quotes: 'single',
+	wrap: false,
+};
+
+cssesc.version = '3.0.0';
+
+export default cssesc;

overrides/cssesc/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "cssesc",
+  "version": "3.0.0",
+  "description": "A JavaScript library for escaping CSS strings and identifiers while generating the shortest possible ASCII-only output.",
+  "author": {
+    "name": "Mathias Bynens",
+    "url": "https://mathiasbynens.be/"
+  },
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.cjs"
+    }
+  }
+}

package.json

@@ -17,12 +17,14 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.9.2",
+    "@astrojs/cloudflare": "^11.0.4",
     "@astrojs/markdown-remark": "^5.2.0",
     "@astrojs/mdx": "^3.1.3",
     "@astrojs/partytown": "^2.1.1",
     "@astrojs/rss": "^4.0.7",
     "@astrojs/sitemap": "^3.1.6",
     "@astrojs/tailwind": "^5.1.0",
+    "@astrojs/vercel": "^7.8.0",
     "@aws-sdk/client-s3": "^3.637.0",
     "@aws-sdk/lib-storage": "^3.637.0",
     "@aws-sdk/s3-request-presigner": "^3.637.0",
@@ -41,7 +43,10 @@
     "@tailwindcss/typography": "^0.5.14",
     "prettier": "^3.3.3",
     "prettier-plugin-astro": "^0.14.1",
-    "tsx": "^4.17.0",
+    "tsx": "^4.18.0",
     "vite": "^5.4.1"
+  },
+  "resolutions": {
+    "cssesc": "./overrides/cssesc"
   }
 }

src/pages/[...slug].astro

@@ -9,6 +9,8 @@ import TableOfContent from '../components/widgets/TableOfContent.astro';
 import { slugify } from '../utils';
 import { loadEnv } from 'vite';
 
+export const prerender = true;
+
 const { GISCUS_REPO, GISCUS_REPO_ID, GISCUS_CATEGORY, GISCUS_CATEGORY_ID } = loadEnv(
 	process.env.NODE_ENV || 'production',
 	process.cwd(),

src/pages/api/signedUrl.ts

@@ -2,6 +2,8 @@ import { GetObjectCommand, S3Client } from '@aws-sdk/client-s3';
 import { getSignedUrl } from '@aws-sdk/s3-request-presigner';
 import type { APIRoute } from 'astro';
 
+export const prerender = false;
+
 const s3Client = new S3Client({
 	region: 'auto',
 	endpoint: `https://${import.meta.env.CLOUDFLARE_ACCOUNT_ID}.r2.cloudflarestorage.com`,

src/pages/tags/[tag]/index.astro

@@ -6,6 +6,8 @@ import { getTagBackgroundColor } from '@src/utils/tagColors';
 import type { CollectionEntry } from 'astro:content';
 import { getCollection } from 'astro:content';
 
+export const prerender = true;
+
 type BlogPost = CollectionEntry<'blog'>;
 
 export const getStaticPaths = async () => {

tsconfig.json

@@ -8,8 +8,8 @@
 		},
     "outDir": "dist",
     "resolveJsonModule": true,
-    "esModuleInterop": true,
-    "strict": true
+		"esModuleInterop": true,
+		"strict": true,
 	},
-  "exclude": ["public", "node_modules", "dist"]
+	"exclude": ["public", "node_modules", "dist"]
 }