@codecademy/brand 4.0.0-alpha.fdfb3ba880.0 → 4.0.0

package/dist/AppHeader/Search/SearchWorker/src.js

@@ -1,158 +1,310 @@
-//#region src/AppHeader/Search/SearchWorker/src.ts
+/*
+ * A web worker to handle search-as-you-type and autocomplete
+ *
+ * This worker implements an algorithm for text matching that tests
+ * a query string against a set of titles, and gives a score to
+ * each character in a given title.
+ *
+ * e.g. matching query "abcde" to title "ab cde"
+ * "a" and "b" each get a score of 2, because each is part of the match "ab"
+ * "c", "d", and "e" each get a score of 3, because each is part of the match "cde"
+ *
+ * For autocomplete, a large list of titles is preloaded, and this
+ * scoring algorithm is used both to find the top 5 matches, and to
+ * determine which characters should be highlighted.
+ * (These titles have certain phrases like "Intro to" removed so that they
+ * better resemble something that a user would type.)
+ *
+ * For search-as-you-type, we rely on typesense to find matches,
+ * but we still use this algorithm for character highlighting.
+ */
+
 function getPortalOrigin() {
-	const { origin } = window.location;
-	if ([
-		"tengu",
-		"tayra",
-		"staging",
-		"www"
-	].some((s) => `https://${s}.codecademy.com` === origin)) return origin;
-	if (origin.includes(".dev-eks.codecademy.com")) return origin;
-	if (origin.includes("localhost")) return origin.replace(/:\d{4}/, ":3100");
-	return "https://staging.codecademy.com";
+  const {
+    origin
+  } = window.location;
+  const envs = ['tengu', 'tayra', 'staging', 'www'];
+
+  // for standard envs, use portal app in the same env
+  if (envs.some(s => `https://${s}.codecademy.com` === origin)) return origin;
+
+  // for PR envs (e.g. pr-40229-monolith.dev-eks.codecademy.com)
+  if (origin.includes('.dev-eks.codecademy.com')) return origin;
+
+  // for local, use local portal-app, replace if origin port is monolith or le
+  if (origin.includes('localhost')) return origin.replace(/:\d{4}/, ':3100');
+
+  // otherwise (e.g. in monolith pr env) use staging portal-app
+  return 'https://staging.codecademy.com';
 }
-function serializeSearchWorkerSrc() {
-	const BASE_URL = `${getPortalOrigin()}/api/portal/search`;
-	const fnAsStr = worker.toString().trim();
-	return fnAsStr.slice(fnAsStr.indexOf("{") + 1, -1).replaceAll("  ", "").replaceAll("{BASE_URL}", BASE_URL).replaceAll("{SEARCH}", window.location.search);
+export function serializeSearchWorkerSrc() {
+  const BASE_URL = `${getPortalOrigin()}/api/portal/search`;
+  const fnAsStr = worker.toString().trim();
+
+  // in a prod build, webpack will handle removing comments
+
+  return fnAsStr.slice(fnAsStr.indexOf('{') + 1, -1) // remove wrapping function, which may have been renamed by minification
+  .replaceAll('  ', '') // remove indentation
+  .replaceAll('{BASE_URL}', BASE_URL) // interpolate base url
+  .replaceAll('{SEARCH}', window.location.search); // interpolate search query
 }
+
+/*
+ * This function contains the code that is serialized to run in the worker. It
+ * can't reference anything outside of itself (except types). Data is passed to
+ * the worker via onmessage and passed back to the main thread via postMessage.
+ */
 function worker() {
-	const preloadTitlesPromise = fetch("{BASE_URL}/autocomplete-preload{SEARCH}").then((f) => f.json()).then((rawTitles) => rawTitles.map(preparseTitle));
-	function preparseTitle({ value, popularity }) {
-		const lower = value.toLowerCase();
-		return {
-			title: value,
-			lower,
-			words: getWordSet(lower),
-			popularity
-		};
-	}
-	function preparseQuery(query) {
-		return {
-			query,
-			words: getWordSet(query)
-		};
-	}
-	const wordSplitters = /[ :-]/g;
-	function getWordSet(str) {
-		const words = str.split(wordSplitters).map((w) => w.trim()).filter(Boolean);
-		return new Set(words);
-	}
-	const handlers = {
-		autocomplete: autocompleteHandler,
-		"search-as-you-type": searchAsYouTypeHandler
-	};
-	onmessage = ({ data }) => {
-		const { query, action } = data;
-		const handler = handlers[action];
-		if (handler) handler(preparseQuery(query));
-	};
-	function getScoredTitle(q, t) {
-		const charScores = getCharScores(q, t);
-		const score = getTotalScore(q, t, charScores);
-		return {
-			title: t.title,
-			charScores,
-			score
-		};
-	}
-	const maxResults = 5;
-	function autocompleteHandler(q) {
-		preloadTitlesPromise.then((titles) => {
-			const topAutocompleteTitles = titles.map((t) => getScoredTitle(q, t)).filter((x) => x.score > 0).sort((a, b) => a.score > b.score ? -1 : 1).slice(0, maxResults).map((t) => ({
-				title: t.title,
-				segments: getHighlightSegments(t.title, t.charScores)
-			}));
-			postMessage({
-				query: q.query,
-				result: topAutocompleteTitles,
-				action: "autocomplete"
-			});
-		});
-	}
-	function searchAsYouTypeHandler(q) {
-		fetch("{BASE_URL}/search-as-you-type{SEARCH}", {
-			body: JSON.stringify({
-				query: q.query,
-				max: maxResults
-			}),
-			method: "POST"
-		}).then((f) => f.json()).then((searchAsYouTypeResults) => {
-			for (let i = 0; i < searchAsYouTypeResults.top.length; i++) {
-				const entry = searchAsYouTypeResults.top[i];
-				const charScores = getCharScores(q, preparseTitle({
-					value: entry.title,
-					popularity: 0
-				}));
-				entry.segments = getHighlightSegments(entry.title, charScores);
-				entry.key = q.query + ":" + entry.title;
-			}
-			postMessage({
-				query: q.query,
-				result: searchAsYouTypeResults,
-				action: "search-as-you-type"
-			});
-		});
-	}
-	const popularityStrength = .04;
-	function getTotalScore(q, t, charScores) {
-		let fromChars = 0;
-		for (let i = 0; i < charScores.length; i++) fromChars += charScores[i];
-		const fromPopularity = (t.popularity || 0) * popularityStrength;
-		let bonus = 0;
-		q.words.forEach((qw) => {
-			if (t.words.has(qw)) bonus += 100;
-		});
-		if (t.lower.startsWith(q.query)) bonus += 200;
-		else if (t.lower.startsWith(q.query.slice(0, 3))) bonus += 100;
-		if (t.lower === q.query) bonus += 100;
-		if (fromChars > 1 && Math.abs(t.lower.length - q.query.length) <= 3) bonus += 100;
-		return fromChars + (fromChars > 1 ? fromPopularity : 0) + bonus;
-	}
-	function getHighlightSegments(title, charScores) {
-		let currentSegment = null;
-		const segments = [];
-		const shouldHighlight = (i) => charScores[i] > 0;
-		const isDifferentFromPrev = (i) => shouldHighlight(i - 1) !== shouldHighlight(i);
-		for (let i = 0; i < title.length; i++) {
-			if (i === 0 || isDifferentFromPrev(i)) {
-				currentSegment = {
-					value: "",
-					highlight: shouldHighlight(i)
-				};
-				segments.push(currentSegment);
-			}
-			currentSegment.value += title[i];
-		}
-		return segments;
-	}
-	function getCharScores(q, t) {
-		const cmcsForTitleChars = Array(t.lower.length).fill(0).map(() => []);
-		for (let shift = 1 - q.query.length; shift < t.lower.length; shift++) {
-			let cmc = null;
-			const startOverlap = Math.max(shift, 0);
-			const endOverlap = Math.min(q.query.length + shift, t.lower.length);
-			for (let i = startOverlap; i < endOverlap; i++) if (q.query[i - shift] === t.lower[i] && t.lower[i] !== " ") {
-				if (!cmc) cmc = { value: "" };
-				cmc.value += q.query[i - shift];
-				cmcsForTitleChars[i].push(cmc);
-			} else if (cmc) cmc = null;
-		}
-		const avgQueryWordLength = q.query.length / q.words.size;
-		const minMatchLength = Math.ceil(avgQueryWordLength ** .65);
-		const charScores = [];
-		for (let i = 0; i < cmcsForTitleChars.length; i++) {
-			const cmcs = cmcsForTitleChars[i];
-			let score = 0;
-			for (let j = 0; j < cmcs.length; j++) {
-				const cmc = cmcs[j];
-				if (cmc.value.length >= minMatchLength || q.words.has(cmc.value)) score += cmc.value.length;
-			}
-			charScores.push(score);
-		}
-		return charScores;
-	}
-}
+  const preloadTitlesPromise = fetch('{BASE_URL}/autocomplete-preload{SEARCH}').then(f => f.json()).then(rawTitles => rawTitles.map(preparseTitle));
+  function preparseTitle({
+    value,
+    popularity
+  }) {
+    const lower = value.toLowerCase();
+    const words = getWordSet(lower);
+    return {
+      title: value,
+      lower,
+      words,
+      popularity
+    };
+  }
+  function preparseQuery(query) {
+    const words = getWordSet(query);
+    return {
+      query,
+      words
+    };
+  }
+  const wordSplitters = /[ :-]/g;
+  function getWordSet(str) {
+    const words = str.split(wordSplitters).map(w => w.trim()).filter(Boolean);
+    return new Set(words);
+  }
+  const handlers = {
+    autocomplete: autocompleteHandler,
+    'search-as-you-type': searchAsYouTypeHandler
+  };
+  onmessage = ({
+    data
+  }) => {
+    const {
+      query,
+      action
+    } = data;
+    const handler = handlers[action];
+    if (handler) {
+      handler(preparseQuery(query));
+    }
+  };
+  function getScoredTitle(q, t) {
+    const charScores = getCharScores(q, t);
+    const score = getTotalScore(q, t, charScores);
+    return {
+      title: t.title,
+      charScores,
+      score
+    };
+  }
+  const maxResults = 5;
+  function autocompleteHandler(q) {
+    preloadTitlesPromise.then(titles => {
+      const scoredTitles = titles.map(t => getScoredTitle(q, t));
+      const topAutocompleteTitles = scoredTitles.filter(x => x.score > 0).sort((a, b) => a.score > b.score ? -1 : 1).slice(0, maxResults).map(t => ({
+        title: t.title,
+        segments: getHighlightSegments(t.title, t.charScores)
+      }));
+      postMessage({
+        query: q.query,
+        result: topAutocompleteTitles,
+        action: 'autocomplete'
+      });
+    });
+  }
+  function searchAsYouTypeHandler(q) {
+    fetch('{BASE_URL}/search-as-you-type{SEARCH}', {
+      body: JSON.stringify({
+        query: q.query,
+        max: maxResults
+      }),
+      method: 'POST'
+    }).then(f => f.json()).then(searchAsYouTypeResults => {
+      for (let i = 0; i < searchAsYouTypeResults.top.length; i++) {
+        const entry = searchAsYouTypeResults.top[i];
+        const t = preparseTitle({
+          value: entry.title,
+          popularity: 0
+        });
+        const charScores = getCharScores(q, t);
+        entry.segments = getHighlightSegments(entry.title, charScores);
+        entry.key = q.query + ':' + entry.title;
+      }
+      postMessage({
+        query: q.query,
+        result: searchAsYouTypeResults,
+        action: 'search-as-you-type'
+      });
+    });
+  }
+
+  /*
+   * For the search "alge", .04 is just low enough so that "Linear algebra"
+   * (which matches on 4 letters) comes in above "Data structures and algorithms"
+   * (which only matches on 3 letters, but has a high popularity score).
+   */
+  const popularityStrength = 0.04;
+
+  // Total used in sorting to find autocomplet top 5
+  // Bonus scores are includes in certain cases
+  function getTotalScore(q, t, charScores) {
+    let fromChars = 0;
+    for (let i = 0; i < charScores.length; i++) {
+      fromChars += charScores[i];
+    }
+    const fromPopularity = (t.popularity || 0) * popularityStrength;
+    let bonus = 0;
+    // for each complete word present in both the title and query
+    q.words.forEach(qw => {
+      if (t.words.has(qw)) {
+        bonus += 100;
+      }
+    });
+
+    // if the title starts with the query
+    if (t.lower.startsWith(q.query)) {
+      bonus += 200;
+    } else if (t.lower.startsWith(q.query.slice(0, 3))) {
+      // or at least the first 3 chars
+      bonus += 100;
+    }
+
+    // if the title is an exact match with the query
+    if (t.lower === q.query) {
+      bonus += 100;
+    }
+
+    // if there are some matching chars and the title is within 3 chars length of the query
+    if (fromChars > 1 && Math.abs(t.lower.length - q.query.length) <= 3) {
+      bonus += 100;
+    }
+    return fromChars + (fromChars > 1 ? fromPopularity : 0) + bonus;
+  }
+
+  // returns { value: string, highlight: boolean }[]
+  function getHighlightSegments(title, charScores) {
+    let currentSegment = null;
+    const segments = [];
+    const shouldHighlight = i => charScores[i] > 0;
+    const isDifferentFromPrev = i => shouldHighlight(i - 1) !== shouldHighlight(i);
+    for (let i = 0; i < title.length; i++) {
+      if (i === 0 || isDifferentFromPrev(i)) {
+        // If this char should be highlighted, but the prev one should not
+        // or vice versa, start a new segment.
+        currentSegment = {
+          value: '',
+          highlight: shouldHighlight(i)
+        };
+        segments.push(currentSegment);
+      }
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      currentSegment.value += title[i];
+    }
+    return segments;
+  }
+
+  // Used by autocomplete, both for finding top 5, and for highlighting
+  // Used by search-as-you-type, only for highlighting
+  // Returns number[], where each number is the match score for a char in the title
+  function getCharScores(q, t) {
+    /*
+     * Prefill the array for each char in the title.
+     * For each char, we keep an array of the consecutive matches the char is a part of.
+     */
+    const cmcsForTitleChars = Array(t.lower.length).fill(0).map(() => []);
+
+    /*
+     * Overlay the query onto the title to see which chars match.
+     * Shift to align at different positions.
+     * e.g.
+     *   shift: 0
+     *   query: python3 learn
+     *   title: learn python 3
+     *   (no matches)
+     *
+     *   shift: 6
+     *   query:       python3 learn
+     *   title: learn python 3
+     *   (the word "python" matches)
+     *
+     *   shift: 7
+     *   query:        python3 learn
+     *   title: learn python 3
+     *   ("3" matches)
+     *
+     *   shift: -8
+     *   query: python3 learn
+     *   title:         learn python 3
+     *   ("learn" matches)
+     */
+    for (let shift = 1 - q.query.length; shift < t.lower.length; shift++) {
+      // for each shift position
+
+      let cmc = null;
+      const startOverlap = Math.max(shift, 0);
+      const endOverlap = Math.min(q.query.length + shift, t.lower.length);
+
+      // i is the index of a char in the title
+      for (let i = startOverlap; i < endOverlap; i++) {
+        // for each char position in the potentially overlapping area
+
+        // if char at this position matches (and isn't a space)
+        if (q.query[i - shift] === t.lower[i] && t.lower[i] !== ' ') {
+          if (!cmc) {
+            // start a new cmc if needed
+            cmc = {
+              value: ''
+            };
+          }
+
+          /*
+           * Append this char to the current cmc.
+           * We use an object with {value} so that we can modify by reference,
+           * since we want to modify the cmc, not only for this char, but also
+           * for any previous chars that this cmc was pushed to, since those
+           * chars are part of this same consecutive match.
+           */
+          cmc.value += q.query[i - shift];
+
+          // include this cmc for this char
+          cmcsForTitleChars[i].push(cmc);
+        } else if (cmc) {
+          // set to null so that the next match starts a new cmc
+          cmc = null;
+        }
+      }
+    }
+    const avgQueryWordLength = q.query.length / q.words.size;
 
-//#endregion
-export { serializeSearchWorkerSrc };
+    // If avgQueryWordLength is 1-3, we want to the min match to be about that same size.
+    // If avgQueryWordLength is longer, we want min match to be longer...but not too long.
+    // e.g. For avgQueryWordLength of 9, min should be 5
+    // The misspelling "regresion" should still match "regression", but not "encryption",
+    // "authentication" or other words ending in "ion"
+    const minMatchLength = Math.ceil(avgQueryWordLength ** 0.65);
+    const charScores = [];
+    for (let i = 0; i < cmcsForTitleChars.length; i++) {
+      const cmcs = cmcsForTitleChars[i];
+      let score = 0;
+      for (let j = 0; j < cmcs.length; j++) {
+        const cmc = cmcs[j];
+        // if the string of consecutive matching chars meets the minMatchLength
+        // or if it's a standalone word in the query (e.g "C")
+        if (cmc.value.length >= minMatchLength || q.words.has(cmc.value)) {
+          score += cmc.value.length;
+        }
+      }
+      charScores.push(score);
+    }
+    return charScores;
+  }
+}

package/dist/AppHeader/Search/SearchWorker/types.d.ts

@@ -1,30 +1,37 @@
-//#region src/AppHeader/Search/SearchWorker/types.d.ts
-type HighlightSegment = {
-  value: string;
-  highlight: boolean;
+export type HighlightSegment = {
+    value: string;
+    highlight: boolean;
 };
-type AutocompleteSuggestion = {
-  title: string;
-  segments: HighlightSegment[];
+export type AutocompleteSuggestion = {
+    title: string;
+    segments: HighlightSegment[];
 };
 interface SearchResults {
-  query: string;
-  queryLoadTime: number;
-  searchId: string;
-  resultsCount: number;
+    query: string;
+    queryLoadTime: number;
+    searchId: string;
+    resultsCount: number;
 }
 interface BaseTopData {
-  type: string;
-  title: string;
-  slug: string;
+    type: string;
+    title: string;
+    slug: string;
 }
-interface SearchAsYouTypeResults extends SearchResults {
-  top: (BaseTopData & {
-    contentId?: string;
-    segments: HighlightSegment[];
-    urlPath: string;
-    key: string;
-  })[];
+export interface SearchAsYouTypeResults extends SearchResults {
+    top: (BaseTopData & {
+        contentId?: string;
+        segments: HighlightSegment[];
+        urlPath: string;
+        key: string;
+    })[];
 }
-//#endregion
-export { AutocompleteSuggestion, SearchAsYouTypeResults };
+export declare enum SearchAction {
+    Autocomplete = "autocomplete",
+    SearchAsYouType = "search-as-you-type"
+}
+export type SearchResultTypes = {
+    [SearchAction.Autocomplete]: AutocompleteSuggestion[];
+    [SearchAction.SearchAsYouType]: SearchAsYouTypeResults;
+};
+export type SearchWorker = <A extends SearchAction>(action: A, query: string) => Promise<SearchResultTypes[A]>;
+export {};

package/dist/AppHeader/Search/SearchWorker/types.js

@@ -1,9 +1,5 @@
-//#region src/AppHeader/Search/SearchWorker/types.ts
-let SearchAction = /* @__PURE__ */ function(SearchAction$1) {
-	SearchAction$1["Autocomplete"] = "autocomplete";
-	SearchAction$1["SearchAsYouType"] = "search-as-you-type";
-	return SearchAction$1;
-}({});
-
-//#endregion
-export { SearchAction };
+export let SearchAction = /*#__PURE__*/function (SearchAction) {
+  SearchAction["Autocomplete"] = "autocomplete";
+  SearchAction["SearchAsYouType"] = "search-as-you-type";
+  return SearchAction;
+}({});

package/dist/AppHeader/Search/SearchWorker/worker.d.ts

@@ -0,0 +1,2 @@
+import type { SearchWorker } from './types';
+export declare function createSearchWorker(): SearchWorker;

package/dist/AppHeader/Search/SearchWorker/worker.js

@@ -1,26 +1,31 @@
-import { PromiseLookup } from "./PromiseLookup.js";
-import { serializeSearchWorkerSrc } from "./src.js";
-
-//#region src/AppHeader/Search/SearchWorker/worker.ts
+import { PromiseLookup } from './PromiseLookup';
+import { serializeSearchWorkerSrc } from './src';
 const mockWorker = () => ({
-	onmessage: () => null,
-	postMessage: () => null
+  onmessage: () => null,
+  postMessage: () => null
 });
-function createSearchWorker() {
-	const src = serializeSearchWorkerSrc();
-	const blob = new Blob([src], { type: "text/javascript" });
-	const dataUrl = URL.createObjectURL?.(blob);
-	const w = typeof Worker === "undefined" ? mockWorker() : new Worker(dataUrl);
-	const results = new PromiseLookup({ onKeyInit: (action, query) => w.postMessage({
-		action,
-		query
-	}) });
-	w.onmessage = ({ data }) => {
-		const { query, result, action } = data;
-		results.resolve(action, query, result);
-	};
-	return (action, query) => results.get(action, query);
-}
-
-//#endregion
-export { createSearchWorker };
+export function createSearchWorker() {
+  const src = serializeSearchWorkerSrc();
+  const blob = new Blob([src], {
+    type: 'text/javascript'
+  });
+  const dataUrl = URL.createObjectURL?.(blob);
+  const w = typeof Worker === 'undefined' ? mockWorker() : new Worker(dataUrl);
+  const results = new PromiseLookup({
+    onKeyInit: (action, query) => w.postMessage({
+      action,
+      query
+    })
+  });
+  w.onmessage = ({
+    data
+  }) => {
+    const {
+      query,
+      result,
+      action
+    } = data;
+    results.resolve(action, query, result);
+  };
+  return (action, query) => results.get(action, query);
+}

package/dist/AppHeader/Search/consts.d.ts

@@ -1,26 +1,23 @@
-//#region src/AppHeader/Search/consts.d.ts
-declare const searchPlaceholder = "What are you learning today?";
-declare const popularSearchTerms: string[];
-declare enum ContentType {
-  COURSE = "Course",
-  SKILLPATH = "Skill Path",
-  CAREERPATH = "Career Path",
-  ARTICLE = "Article",
-  DOC = "Doc",
+export declare const searchPlaceholder = "What are you learning today?";
+export declare const popularSearchTerms: string[];
+export declare enum ContentType {
+    COURSE = "Course",
+    SKILLPATH = "Skill Path",
+    CAREERPATH = "Career Path",
+    ARTICLE = "Article",
+    DOC = "Doc"
 }
-declare const popularContent: ({
-  title: string;
-  href: string;
-  type: ContentType;
-  slug: string;
-  contentId: string;
+export declare const popularContent: ({
+    title: string;
+    href: string;
+    type: ContentType;
+    slug: string;
+    contentId: string;
 } | {
-  title: string;
-  href: string;
-  type: ContentType;
-  slug: string;
-  contentId?: undefined;
+    title: string;
+    href: string;
+    type: ContentType;
+    slug: string;
+    contentId?: undefined;
 })[];
-declare const ALLOWED_HOSTS: string[];
-//#endregion
-export { ALLOWED_HOSTS, ContentType, popularContent, popularSearchTerms, searchPlaceholder };
+export declare const ALLOWED_HOSTS: string[];