[UwU] Unicorn Utterances Redesign

.eslintrc.cjs

@@ -1,6 +1,7 @@
 const tsRules = {
 	"@typescript-eslint/ban-types": "off",
 	"@typescript-eslint/no-empty-interface": "off",
+	"@typescript-eslint/no-unused-vars": "off",
 };
 
 module.exports = {
@@ -19,6 +20,7 @@ module.exports = {
 	rules: {
 		"no-unused-vars": "off",
 		"no-mixed-spaces-and-tabs": "off",
+		"no-useless-escape": "off",
 	},
 	overrides: [
 		{
@@ -33,7 +35,7 @@ module.exports = {
 			},
 		},
 		{
-			files: ["*.ts"],
+			files: ["*.ts", "*.tsx"],
 			parser: "@typescript-eslint/parser",
 			extends: ["plugin:@typescript-eslint/recommended"],
 			rules: {

.gitignore

@@ -18,5 +18,8 @@ pnpm-debug.log*
 # macOS-specific files
 .DS_Store
 .idea/
-.eslintcache
+.eslintcache
+.vercel
+.puppeteer
+
 .vercel

.prettierrc

@@ -1,5 +1,6 @@
 {
 	"useTabs": true,
+	"plugins": ["prettier-plugin-astro"],
 	"overrides": [
 		{
 			"files": ["**/*.astro"],

CONTRIBUTING.md

@@ -41,9 +41,9 @@ Here's an example of what your entry might look like:
   // "description" is a short bio that will be shown on your profile page
   "description": "Haskell programmer, fanfiction author, and an omniscient unicorn.",
 
-  // Social usernames can include "twitter", "github", "linkedIn",
-  // "twitch", and "dribbble", as well as a "website" that can be
-  // anything you want!
+  // Social usernames can include "twitter", "github", "gitlab",
+  // "linkedIn", "twitch", "dribbble", "mastodon", "threads", "youtube",
+  // and "cohost", as well as a "website" that can be anything you want!
   "socials": {
     "twitter": "UnicornUttrncs",
     "github": "unicorn-utterances",

README.es.md

@@ -18,7 +18,6 @@ Este repository actúa como la ubicación del código fuente para el [blog de Un
 
 <a href="https://www.thepolyglotdeveloper.com/" target="_blank" rel="noopener noreferrer sponsored"><img alt="The Polyglot Developer" src="https://unicorn-utterances.com/sponsors/the-polyglot-developer.svg" width="300"/></a>
 <a href="https://oceanbit.dev/" target="_blank" rel="noopener noreferrer sponsored"><img alt="OceanBit" src="https://unicorn-utterances.com/sponsors/oceanbit.svg" width="300"/></a>
-<a href="https://coderpad.io/" target="_blank" rel="noopener noreferrer sponsored"><img alt="CoderPad" src="https://unicorn-utterances.com/sponsors/coderpad.svg" width="300"/></a>
 
 [Reconocemos todos los patrocinios que compartimos abiertamente en GitHub](https://github.com/unicorn-utterances/unicorn-utterances/issues?q=is%3Aissue+label%3Adisclosure+is%3Aclosed)
 

README.md

@@ -18,7 +18,6 @@ This repository acts as the source code location for [the Unicorn Utterances blo
 
 <a href="https://www.thepolyglotdeveloper.com/" target="_blank" rel="noopener noreferrer sponsored"><img alt="The Polyglot Developer" src="https://unicorn-utterances.com/sponsors/the-polyglot-developer.svg" width="300"/></a>
 <a href="https://oceanbit.dev/" target="_blank" rel="noopener noreferrer sponsored"><img alt="OceanBit" src="https://unicorn-utterances.com/sponsors/oceanbit.svg" width="300"/></a>
-<a href="https://coderpad.io/" target="_blank" rel="noopener noreferrer sponsored"><img alt="CoderPad" src="https://unicorn-utterances.com/sponsors/coderpad.svg" width="300"/></a>
 
 [We disclose every sponsorship we share openly on GitHub](https://github.com/unicorn-utterances/unicorn-utterances/issues?q=is%3Aissue+label%3Adisclosure+is%3Aclosed)
 

__mocks__/data/mock-collection.ts

@@ -0,0 +1,33 @@
+import { MockUnicorn, MockUnicornTwo } from "./mock-unicorn";
+import { MockLicense } from "./mock-license";
+import { ExtendedCollectionInfo, ExtendedPostInfo } from "types/index";
+import { MockPost } from "./mock-post";
+
+export const MockCollection: ExtendedCollectionInfo = {
+	authors: [MockUnicorn.id],
+	authorsMeta: [MockUnicorn],
+	Content: () => null,
+	tags: [],
+	contentMeta: "",
+	licenseMeta: null,
+	publishedMeta: "October 10, 2010",
+	collectionSlug: null,
+	excerpt: "This would be an auto generated excerpt of the post in particular",
+	wordCount: 10000,
+	coverImgMeta: {
+		absoluteFSPath: "",
+		height: 0,
+		relativePath: "",
+		relativeServerPath: "",
+		width: 0,
+	},
+	locales: ["en"],
+	locale: "en",
+	posts: [MockPost],
+	slug: "this-collection-name-here",
+	title: "Collection title",
+	description: "This is a short description dunno why this would be this short",
+	coverImg: "img.png",
+	published: "10-10-2010T00:00:00.000Z",
+	buttons: [],
+};

__mocks__/data/mock-post.ts

@@ -1,8 +1,8 @@
 import { MockUnicorn, MockUnicornTwo } from "./mock-unicorn";
 import { MockLicense } from "./mock-license";
-import { PostInfo } from "types/PostInfo";
+import { ExtendedPostInfo } from "types/index";
 
-export const MockPost: PostInfo = {
+export const MockPost: ExtendedPostInfo = {
 	excerpt: "This would be an auto generated excerpt of the post in particular",
 	title: "Post title",
 	published: "10-10-2010T00:00:00.000Z",
@@ -14,19 +14,18 @@ export const MockPost: PostInfo = {
 	license: MockLicense.id,
 	licenseMeta: MockLicense,
 	locale: "en",
+	locales: ["en", "es"],
 	slug: "this-post-name-here",
 	headingsWithId: [],
 	wordCount: 10000,
 	contentMeta: "",
-	translations: {
-		en: "English",
-	},
 	Content: {} as never,
 	suggestedArticles: [] as never,
 	attached: [],
+	socialImg: "img.png",
 };
 
-export const MockMultiAuthorPost: PostInfo = {
+export const MockMultiAuthorPost: ExtendedPostInfo = {
 	excerpt:
 		"This would be a second auto generated excerpt of the post in particular",
 	title: "Another post title",
@@ -40,19 +39,18 @@ export const MockMultiAuthorPost: PostInfo = {
 	license: MockLicense.id,
 	licenseMeta: MockLicense,
 	locale: "en",
+	locales: ["en", "es"],
 	slug: "this-other-post-name-here",
 	headingsWithId: [],
 	wordCount: 100000,
 	contentMeta: "",
-	translations: {
-		en: "English",
-	},
 	Content: {} as never,
 	suggestedArticles: [] as never,
 	attached: [],
+	socialImg: "img.png",
 };
 
-export const MockMuliLanguagePost: PostInfo = {
+export const MockMuliLanguagePost: ExtendedPostInfo = {
 	excerpt:
 		"This would be a second auto generated excerpt of the post in particular",
 	title: "Another post title",
@@ -66,19 +64,18 @@ export const MockMuliLanguagePost: PostInfo = {
 	license: MockLicense.id,
 	licenseMeta: MockLicense,
 	locale: "en",
+	locales: ["en", "es"],
 	slug: "this-other-post-name-here",
 	headingsWithId: [],
 	wordCount: 100000,
 	contentMeta: "",
-	translations: {
-		es: "Español",
-	},
 	Content: {} as never,
 	suggestedArticles: [] as never,
 	attached: [],
+	socialImg: "img.png",
 };
 
-export const MockCanonicalPost: PostInfo = {
+export const MockCanonicalPost: ExtendedPostInfo = {
 	excerpt:
 		"This would be a second auto generated excerpt of the post in particular",
 	title: "Another post title",
@@ -93,14 +90,13 @@ export const MockCanonicalPost: PostInfo = {
 	license: MockLicense.id,
 	licenseMeta: MockLicense,
 	locale: "en",
+	locales: ["en", "es"],
 	slug: "this-other-post-name-here",
 	headingsWithId: [],
 	wordCount: 100000,
 	contentMeta: "",
-	translations: {
-		en: "English",
-	},
 	Content: {} as never,
 	suggestedArticles: [] as never,
 	attached: [],
+	socialImg: "img.png",
 };

__mocks__/data/mock-unicorn.ts

@@ -15,6 +15,7 @@ export const MockUnicorn: UnicornInfo = {
 		github: "ghusrname",
 		website: "example.com",
 	},
+	achievements: [],
 	pronouns: "they/them",
 	profileImg:
 		"https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png",
@@ -44,6 +45,7 @@ export const MockUnicornTwo: UnicornInfo = {
 		github: "ghusrname2",
 		website: "example.com/2",
 	},
+	achievements: [],
 	pronouns: "they/them",
 	profileImg:
 		"https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png",

__mocks__/imports/svg-comp-mock.ts

@@ -0,0 +1,6 @@
+export default {
+	src: "test.svg",
+	width: 24,
+	height: 24,
+	format: "svg",
+};

__mocks__/imports/svg-raw-mock.ts

@@ -0,0 +1 @@
+export default "<svg />";

__mocks__/jest.setup.js

@@ -3,7 +3,28 @@
 
 // Used for __tests__/testing-library.js
 // Learn more: https://github.com/testing-library/jest-dom
-require("@testing-library/jest-dom/extend-expect");
+require("whatwg-fetch");
+require("@testing-library/jest-dom/jest-globals");
+import "jest-location-mock";
+
+global.plausible = null;
+
+let history = [];
+
+window.history.pushState = (data, unused, url) => {
+	window.location.assign(url);
+	history.push(url);
+};
+
+window.history.replaceState = (data, unused, url) => {
+	window.location.assign(url);
+	history[history.length - 1] = url;
+};
+
+window.history.back = () => {
+	history.pop();
+	window.location.assign(history[history.length - 1]);
+};
 
 global.IntersectionObserver = class IntersectionObserver {
 	constructor() {}
@@ -20,3 +41,21 @@ global.IntersectionObserver = class IntersectionObserver {
 		return null;
 	}
 };
+
+global.React = require("preact");
+
+// https://github.com/jsdom/jsdom/issues/3294
+// eslint-disable-next-line no-undef
+HTMLDialogElement.prototype.show = jest.fn(function mock() {
+	this.open = true;
+});
+
+// eslint-disable-next-line no-undef
+HTMLDialogElement.prototype.showModal = jest.fn(function mock() {
+	this.open = true;
+});
+
+// eslint-disable-next-line no-undef
+HTMLDialogElement.prototype.close = jest.fn(function mock() {
+	this.open = false;
+});

api/search.ts

@@ -2,34 +2,67 @@ import type { VercelRequest, VercelResponse } from "@vercel/node";
 import Fuse from "fuse.js";
 import { createRequire } from "node:module";
 
-import type { PostInfo } from "types/PostInfo";
+import type { ExtendedPostInfo } from "types/index";
 
 const require = createRequire(import.meta.url);
 const searchIndex = require("./searchIndex.json");
-const index = Fuse.parseIndex(searchIndex.index);
+const postIndex = Fuse.parseIndex(searchIndex.postIndex);
+const collectionIndex = Fuse.parseIndex(searchIndex.collectionIndex);
 
 const posts = searchIndex.posts;
+const collections = searchIndex.collections;
 
-const fuse = new Fuse<PostInfo>(
+const postFuse = new Fuse<ExtendedPostInfo>(
 	posts,
 	{
 		threshold: 0.3,
 		ignoreLocation: true,
 		includeScore: true,
 		ignoreFieldNorm: true,
 	},
-	index
+	postIndex,
+);
+
+const collectionFuse = new Fuse(
+	collections,
+	{
+		threshold: 0.3,
+		ignoreLocation: true,
+		includeScore: true,
+		ignoreFieldNorm: true,
+	},
+	collectionIndex,
 );
 
 export default async (req: VercelRequest, res: VercelResponse) => {
 	// TODO: `pickdeep` only required fields
 	const searchStr = req?.query?.query as string;
-	const authorStr = req?.query?.authorId as string;
-	if (!searchStr) return [];
-	if (Array.isArray(searchStr)) return [];
-	let posts = fuse.search(searchStr).map((item) => item.item);
-	if (authorStr) {
-		posts = posts.filter((post) => post.authors.includes(authorStr));
+	if (!searchStr) {
+		res.send({
+			posts: [],
+			totalPosts: 0,
+			collections: [],
+			totalCollections: 0,
+		});
+		return;
+	}
+	if (searchStr === "*") {
+		res.send({
+			posts,
+			totalPosts: posts.length,
+			collections,
+			totalCollections: collections.length,
+		});
+		return;
 	}
-	res.send({ posts, totalPosts: posts.length });
+	const searchedPosts = postFuse.search(searchStr).map((item) => item.item);
+	const searchedCollections = collectionFuse
+		.search(searchStr)
+		.map((item) => item.item);
+	res.send({
+		posts: searchedPosts,
+		totalPosts: searchedPosts.length,
+		collections: searchedCollections,
+		totalCollections: searchedCollections.length,
+	});
 };