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

package/dist/AppHeader/Search/SearchTrackingProvider/index.d.ts

@@ -0,0 +1,17 @@
+import React, { ReactNode } from 'react';
+interface OnSearchAsYouTypeParamsType {
+    query: string;
+    searchId: string;
+    resultsCount: number;
+    queryLoadTime: number;
+}
+interface SearchTrackingContextType {
+    onSearchAsYouTypeParams: OnSearchAsYouTypeParamsType | null;
+    setOnSearchAsYouTypeParams: (params: OnSearchAsYouTypeParamsType | null) => void;
+}
+export declare const SearchTrackingContext: React.Context<SearchTrackingContextType>;
+export declare const SearchTrackingProvider: React.FC<{
+    children: ReactNode;
+}>;
+export declare const useSearchTrackingContext: () => SearchTrackingContextType;
+export {};

package/dist/AppHeader/Search/SearchTrackingProvider/index.js

@@ -0,0 +1,25 @@
+import noop from 'lodash/noop';
+import React, { createContext, useContext, useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const SearchTrackingContext = /*#__PURE__*/createContext({
+  onSearchAsYouTypeParams: null,
+  setOnSearchAsYouTypeParams: noop
+});
+export const SearchTrackingProvider = ({
+  children
+}) => {
+  const [onSearchAsYouTypeParams, setOnSearchAsYouTypeParams] = useState({
+    query: '',
+    searchId: '',
+    resultsCount: 0,
+    queryLoadTime: 0
+  });
+  return /*#__PURE__*/_jsx(SearchTrackingContext.Provider, {
+    value: {
+      onSearchAsYouTypeParams,
+      setOnSearchAsYouTypeParams
+    },
+    children: children
+  });
+};
+export const useSearchTrackingContext = () => useContext(SearchTrackingContext);

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

@@ -0,0 +1,18 @@
+type Resolver<T> = (value: T) => void;
+declare class SplitPromise<T> {
+    promise: Promise<T>;
+    resolver: Resolver<T>;
+    constructor();
+}
+export declare class PromiseLookup<Types> {
+    private args;
+    constructor(args: {
+        onKeyInit: (namespace: keyof Types, key: string) => void;
+    });
+    namespaces: Map<keyof Types, Map<string, SplitPromise<unknown>>>;
+    private getNamespace;
+    private getSplitPromise;
+    get<N extends keyof Types>(namespace: N, key: string): Promise<Types[N]>;
+    resolve<N extends keyof Types>(namespace: N, key: string, value: Types[N]): void;
+}
+export {};

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

@@ -0,0 +1,35 @@
+class SplitPromise {
+  constructor() {
+    this.promise = new Promise(r => this.resolver = r);
+  }
+}
+export class PromiseLookup {
+  constructor(args) {
+    this.args = args;
+  }
+  namespaces = new Map();
+  getNamespace(namespace) {
+    let ns = this.namespaces.get(namespace);
+    if (!ns) {
+      ns = new Map();
+      this.namespaces.set(namespace, ns);
+    }
+    return ns;
+  }
+  getSplitPromise(namespace, key) {
+    const ns = this.getNamespace(namespace);
+    let splitPromise = ns.get(key);
+    if (!splitPromise) {
+      splitPromise = new SplitPromise();
+      ns.set(key, splitPromise);
+      this.args.onKeyInit(namespace, key);
+    }
+    return splitPromise;
+  }
+  get(namespace, key) {
+    return this.getSplitPromise(namespace, key).promise;
+  }
+  resolve(namespace, key, value) {
+    this.getSplitPromise(namespace, key).resolver(value);
+  }
+}

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

@@ -0,0 +1,5 @@
+export declare const searchWorker: {
+    init(): void;
+    autocomplete(query: string): Promise<import("./types").AutocompleteSuggestion[]>;
+    searchAsYouType(query: string): Promise<import("./types").SearchAsYouTypeResults>;
+};

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

@@ -0,0 +1,24 @@
+import { SearchAction } from './types';
+let workerPromise;
+const initErr = 'Search worker not initialized';
+export const searchWorker = {
+  init() {
+    if (!workerPromise) {
+      workerPromise = (async () => {
+        // lazy load worker
+        const {
+          createSearchWorker
+        } = await import('./worker');
+        return createSearchWorker();
+      })();
+    }
+  },
+  async autocomplete(query) {
+    if (!workerPromise) throw new Error(initErr);
+    return (await workerPromise)(SearchAction.Autocomplete, query);
+  },
+  async searchAsYouType(query) {
+    if (!workerPromise) throw new Error(initErr);
+    return (await workerPromise)(SearchAction.SearchAsYouType, query);
+  }
+};

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

@@ -0,0 +1 @@
+export declare function serializeSearchWorkerSrc(): string;

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

@@ -0,0 +1,310 @@
+/*
+ * 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;
+  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';
+}
+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();
+    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;
+
+    // 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

@@ -0,0 +1,37 @@
+export type HighlightSegment = {
+    value: string;
+    highlight: boolean;
+};
+export type AutocompleteSuggestion = {
+    title: string;
+    segments: HighlightSegment[];
+};
+interface SearchResults {
+    query: string;
+    queryLoadTime: number;
+    searchId: string;
+    resultsCount: number;
+}
+interface BaseTopData {
+    type: string;
+    title: string;
+    slug: string;
+}
+export interface SearchAsYouTypeResults extends SearchResults {
+    top: (BaseTopData & {
+        contentId?: string;
+        segments: HighlightSegment[];
+        urlPath: string;
+        key: string;
+    })[];
+}
+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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,31 @@
+import { PromiseLookup } from './PromiseLookup';
+import { serializeSearchWorkerSrc } from './src';
+const mockWorker = () => ({
+  onmessage: () => null,
+  postMessage: () => null
+});
+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

@@ -0,0 +1,23 @@
+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"
+}
+export declare const popularContent: ({
+    title: string;
+    href: string;
+    type: ContentType;
+    slug: string;
+    contentId: string;
+} | {
+    title: string;
+    href: string;
+    type: ContentType;
+    slug: string;
+    contentId?: undefined;
+})[];
+export declare const ALLOWED_HOSTS: string[];

package/dist/AppHeader/Search/consts.js

@@ -0,0 +1,40 @@
+export const searchPlaceholder = 'What are you learning today?';
+export const popularSearchTerms = ['Artificial Intelligence', 'Data Science', 'Python', 'Web Development', 'HTML', 'Java'];
+export let ContentType = /*#__PURE__*/function (ContentType) {
+  ContentType["COURSE"] = "Course";
+  ContentType["SKILLPATH"] = "Skill Path";
+  ContentType["CAREERPATH"] = "Career Path";
+  ContentType["ARTICLE"] = "Article";
+  ContentType["DOC"] = "Doc";
+  return ContentType;
+}({});
+export const popularContent = [{
+  title: 'Learn Python 3',
+  href: '/learn/learn-python-3',
+  type: ContentType.COURSE,
+  slug: 'learn-python-3',
+  contentId: '6c152bd262967f8c941c9707ed636bda'
+}, {
+  title: 'Business Intelligence Data Analyst',
+  href: '/learn/paths/bi-data-analyst',
+  type: ContentType.CAREERPATH,
+  slug: 'bi-data-analyst',
+  contentId: 'd03c7391224540ef8f850f8807a2b72a'
+}, {
+  title: 'Code Foundations',
+  href: '/learn/paths/code-foundations',
+  type: ContentType.SKILLPATH,
+  slug: 'code-foundations',
+  contentId: '5b55e668646caa552f8e4d1d'
+}, {
+  title: 'What is Programming?',
+  href: '/article/what-is-programming',
+  type: ContentType.ARTICLE,
+  slug: 'what-is-programming'
+}, {
+  title: 'HTML | Elements',
+  href: '/resources/docs/html',
+  type: ContentType.DOC,
+  slug: 'html/concepts/elements'
+}];
+export const ALLOWED_HOSTS = ['skillsoft.com', 'percipio.com', 'localhost', 'codecademy.com', 'squads-dev.com'];

package/dist/AppHeader/Search/hooks/useUrlChangeDetection.d.ts

@@ -0,0 +1,5 @@
+export interface UrlChangeDetectionOptions {
+    onUrlChange: () => void;
+    getCurrentUrl?: () => string;
+}
+export declare const useUrlChangeDetection: ({ onUrlChange, getCurrentUrl, }: UrlChangeDetectionOptions) => void;

package/dist/AppHeader/Search/hooks/useUrlChangeDetection.js

@@ -0,0 +1,14 @@
+import { useEffect, useRef } from 'react';
+export const useUrlChangeDetection = ({
+  onUrlChange,
+  getCurrentUrl = () => window.location?.href
+}) => {
+  const currentUrl = getCurrentUrl();
+  const prevUrlRef = useRef(currentUrl);
+  useEffect(() => {
+    if (prevUrlRef.current !== currentUrl) {
+      onUrlChange();
+      prevUrlRef.current = currentUrl;
+    }
+  }, [currentUrl, onUrlChange]);
+};

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

@@ -0,0 +1,5 @@
+/**
+ * fork of @mono/util-url/src/safelyRedirect.ts, since
+ * the build script doesn't resolve @mono dependencies
+ */
+export declare function safelyRedirect(url: string): void;

package/dist/AppHeader/Search/safelyRedirect.js

@@ -0,0 +1,49 @@
+/**
+ * fork of @mono/util-url/src/safelyRedirect.ts, since
+ * the build script doesn't resolve @mono dependencies
+ */
+
+import { ALLOWED_HOSTS } from './consts';
+export function safelyRedirect(url) {
+  try {
+    const sanitizedURL = sanitizeURL(url);
+    if (isRelativeUrl(sanitizedURL) || hasAllowedHost(sanitizedURL)) {
+      window.location.assign(sanitizedURL);
+    } else {
+      throw new Error(`Invalid redirect url: ${sanitizedURL}`);
+    }
+  } catch (error) {}
+}
+function hasAllowedHost(url) {
+  const parsedUrl = new URL(url);
+  const {
+    hostname
+  } = parsedUrl;
+  return ALLOWED_HOSTS.some(host =>
+  // Exact match or exact subdomain match (e.g. sub.codecademy.com)
+  hostname === host || hostname.endsWith(`.${host}`));
+}
+
+// when a url is relative, the URL constructor will throw a TypeError;
+function isRelativeUrl(url) {
+  try {
+    const parsedUrl = new URL(url);
+    return parsedUrl === undefined;
+  } catch (error) {
+    return true;
+  }
+}
+
+// supports already encoded urls by decoding and re-encoding.
+// params are handled separately to allow for the encoding of / characters
+function sanitizeURL(url) {
+  const [path, params] = url.split('?', 2);
+  const sanitizedPath = encodeURI(decodeURI(path));
+  if (!params) return sanitizedPath;
+  const urlParams = new URLSearchParams(params);
+  urlParams.forEach((value, key) => {
+    const decoded = decodeURIComponent(value);
+    urlParams.set(key, decoded);
+  });
+  return `${sanitizedPath}?${urlParams.toString()}`;
+}