@mathstack/app-kit 1.1.2 → 2.0.3

package/{baseline-styles → src/lib/baseline-styles}/theming/_colors.scss

@@ -1,46 +1,46 @@
-$primary: (
-  0: #000000,
-  5: #000c38,
-  10: #001550,
-  15: #001e68,
-  20: #002780,
-  25: #003099,
-  30: #003ab3,
-  35: #0043ce,
-  40: #1550e1,
-  50: #3d6bfb,
-  60: #6889ff,
-  70: #90a7ff,
-  80: #b6c4ff,
-  90: #dce1ff,
-  95: #eff0ff,
-  98: #faf8ff,
-  99: #fefbff,
-  100: #ffffff,
-);
-
-$muted-primary: (
-  0: #000000,
-  5: #141821,
-  10: #20283c,
-  15: #2b3246,
-  20: #353c4f,
-  25: #404759,
-  30: #4c5263,
-  35: #575d6e,
-  40: #636878,
-  50: #7b7f8e,
-  60: #9397a4,
-  70: #adb0ba,
-  80: #c7cad1,
-  90: #e1e4e9,
-  95: #eff1f5,
-  98: #f9f9fb,
-  99: #fcfcfd,
-  100: #ffffff,
-);
-
-$colors: (
-  'primary': $primary,
-  'muted-primary': $muted-primary,
-);
+$primary: (
+  0: #000000,
+  5: #000c38,
+  10: #001550,
+  15: #001e68,
+  20: #002780,
+  25: #003099,
+  30: #003ab3,
+  35: #0043ce,
+  40: #1550e1,
+  50: #3d6bfb,
+  60: #6889ff,
+  70: #90a7ff,
+  80: #b6c4ff,
+  90: #dce1ff,
+  95: #eff0ff,
+  98: #faf8ff,
+  99: #fefbff,
+  100: #ffffff,
+);
+
+$muted-primary: (
+  0: #000000,
+  5: #141821,
+  10: #20283c,
+  15: #2b3246,
+  20: #353c4f,
+  25: #404759,
+  30: #4c5263,
+  35: #575d6e,
+  40: #636878,
+  50: #7b7f8e,
+  60: #9397a4,
+  70: #adb0ba,
+  80: #c7cad1,
+  90: #e1e4e9,
+  95: #eff1f5,
+  98: #f9f9fb,
+  99: #fcfcfd,
+  100: #ffffff,
+);
+
+$colors: (
+  'primary': $primary,
+  'muted-primary': $muted-primary,
+);

package/{baseline-styles → src/lib/baseline-styles}/theming/_index.scss

@@ -1,2 +1,2 @@
-@forward 'colors';
-@forward 'typography';
+@forward 'colors';
+@forward 'typography';

package/{baseline-styles → src/lib/baseline-styles}/theming/_typography.scss

@@ -1,32 +1,32 @@
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');
-
-// Fonts
-$font: (
-  'sans': (
-    'Noto Sans',
-    sans-serif,
-  ),
-  'serif': (
-    'Noto Serif',
-    serif,
-  ),
-  'mono': (
-    'Noto Sans Mono',
-    monospace,
-  ),
-  'weight': (
-    'light': 100,
-    'regular': 400,
-    'medium': 500,
-    'semibold': 600,
-    'bold': 700,
-  ),
-  'line-height': (
-    0: 1,
-    1: 1.125,
-    2: 1.25,
-    3: 1.5,
-    4: 1.75,
-    5: 2,
-  ),
-);
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');
+
+// Fonts
+$font: (
+  'sans': (
+    'Noto Sans',
+    sans-serif,
+  ),
+  'serif': (
+    'Noto Serif',
+    serif,
+  ),
+  'mono': (
+    'Noto Sans Mono',
+    monospace,
+  ),
+  'weight': (
+    'light': 100,
+    'regular': 400,
+    'medium': 500,
+    'semibold': 600,
+    'bold': 700,
+  ),
+  'line-height': (
+    0: 1,
+    1: 1.125,
+    2: 1.25,
+    3: 1.5,
+    4: 1.75,
+    5: 2,
+  ),
+);

package/{lib/content-parsing/index.d.ts → src/lib/content-parsing/index.ts}

@@ -1,2 +1,2 @@
-export * from './markdown-parser';
-export * from './shiki-highlighter';
+export * from './markdown-parser';
+export * from './shiki-highlighter';

package/src/lib/content-parsing/markdown-parser.ts

@@ -0,0 +1,197 @@
+import { inject, Injectable } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import rehypeAutolinkHeadings from 'rehype-autolink-headings';
+import rehypeRaw from 'rehype-raw';
+import rehypeSlug from 'rehype-slug';
+import rehypeStringify from 'rehype-stringify';
+import remarkGfm from 'remark-gfm';
+import remarkParse from 'remark-parse';
+import remarkRehype from 'remark-rehype';
+import { forkJoin, from, map, mergeMap, Observable, of, switchMap } from 'rxjs';
+import { BundledLanguage } from 'shiki/langs';
+import { BundledTheme } from 'shiki/themes';
+import { HighlighterGeneric } from 'shiki/types.mjs';
+import { unified } from 'unified';
+import { deepMerge } from '../core/utilities/deep-merge';
+import { AdkShikiHighlighter, ShikiTheme } from './shiki-highlighter';
+
+export interface AdkParsedContentSection<Content = string> {
+  type: string;
+  content: Content;
+  html?: SafeHtml;
+  headers: { id: string; text: string; level: number }[];
+}
+
+export interface AdkMarkdownParsingOptions {
+  highlighter?: AdkShikiHighlighterOptions;
+  gfm?: boolean;
+  headingIds?: boolean;
+  headingFragmentLinks?: AdkHeadingFragmentLinkOptions;
+}
+
+export interface AdkShikiHighlighterOptions {
+  highlighter?: HighlighterGeneric<BundledLanguage, BundledTheme>;
+  theme?: ShikiTheme;
+  type?: 'html' | 'markdown';
+  ignoreUnknownLanguage?: boolean;
+}
+
+export interface AdkHeadingFragmentLinkOptions {
+  createLinks?: boolean;
+  behavior?: 'append' | 'prepend' | 'wrap' | 'before' | 'after';
+}
+
+const DEFAULT_HIGHLIGHTER_OPTIONS: AdkShikiHighlighterOptions = {
+  highlighter: undefined,
+  theme: ShikiTheme.GitHubLight,
+  type: 'markdown',
+  ignoreUnknownLanguage: true,
+};
+
+const DEFAULT_PARSING_OPTIONS: AdkMarkdownParsingOptions = {
+  gfm: true,
+  headingIds: true,
+  headingFragmentLinks: { createLinks: false },
+  highlighter: DEFAULT_HIGHLIGHTER_OPTIONS,
+};
+
+@Injectable()
+export class AdkMarkdownParser {
+  parser: typeof unified;
+
+  private sanitizer = inject(DomSanitizer);
+  private shikiHighlighter = inject(AdkShikiHighlighter);
+
+  constructor() {
+    this.parser = unified;
+  }
+
+  parse(
+    markdown: string,
+    options?: AdkMarkdownParsingOptions
+  ): Observable<AdkParsedContentSection[]> {
+    const mergedOptions = deepMerge(DEFAULT_PARSING_OPTIONS, options || {});
+
+    return of(mergedOptions).pipe(
+      mergeMap((_options) => {
+        if (_options.highlighter && !_options.highlighter.highlighter) {
+          return from(this.shikiHighlighter.getHighlighter()).pipe(
+            map((highlighter) => ({
+              ..._options,
+              highlighter: {
+                ..._options.highlighter,
+                highlighter,
+              },
+            }))
+          );
+        } else {
+          return of(_options);
+        }
+      }),
+      switchMap((_options) => {
+        const sections = this.getSections(markdown);
+        const parsedSections$ = sections.map((section) => {
+          return this.parseSection(section, _options);
+        });
+        return forkJoin(parsedSections$);
+      })
+    );
+  }
+
+  private getSections(markdown: string): AdkParsedContentSection[] {
+    const sections: AdkParsedContentSection[] = [];
+    let currentMarkdown = '';
+
+    const lines = markdown.split('\n');
+
+    for (const line of lines) {
+      currentMarkdown += line + '\n';
+    }
+
+    // Add any remaining markdown
+    if (currentMarkdown.trim()) {
+      sections.push({
+        type: 'markdown',
+        content: currentMarkdown,
+        html: undefined,
+        headers: this.getHeaders(currentMarkdown),
+      });
+    }
+
+    return sections;
+  }
+
+  private parseSection(
+    section: AdkParsedContentSection,
+    options: AdkMarkdownParsingOptions
+  ): Observable<AdkParsedContentSection> {
+    const parsedContent$ = from(
+      unified()
+        .use(remarkParse)
+        .use(options.gfm ? remarkGfm : undefined)
+        .use(
+          options.highlighter && options.highlighter.type === 'markdown'
+            ? this.shikiHighlighter.remarkHighlight
+            : undefined,
+          options.highlighter
+        )
+        .use(remarkRehype, { allowDangerousHtml: true })
+        .use(rehypeRaw)
+        .use(options.headingIds ? rehypeSlug : undefined)
+        .use(
+          options.headingFragmentLinks ? rehypeAutolinkHeadings : undefined,
+          { behavior: options.headingFragmentLinks?.behavior }
+        )
+        .use(rehypeStringify)
+        .process(section.content)
+        .then((file) => String(file))
+    );
+
+    return parsedContent$.pipe(
+      map((parsedContent) => {
+        const toReturn = {
+          ...section,
+          html: this.sanitizer.bypassSecurityTrustHtml(parsedContent),
+        };
+        return toReturn;
+      })
+    );
+  }
+
+  getHeaders(markdown: string): { id: string; text: string; level: number }[] {
+    const headerRegex =
+      /^(#{1,6})\s*(.+)$|<h([1-6])(?:\s+[^>]*)?>(.*?)<\/h[1-6]>/gm;
+    const headers: { id: string; text: string; level: number }[] = [];
+    let match;
+
+    while ((match = headerRegex.exec(markdown)) !== null) {
+      let level: number;
+      let text: string;
+
+      if (match[1]) {
+        // Markdown header, e.g., ## Heading
+        level = match[1].length;
+        text = match[2].trim();
+      } else {
+        // HTML header, e.g., <h2>Heading</h2>
+        level = parseInt(match[3], 10);
+        text = match[4].trim();
+      }
+
+      const id = text
+        .toLowerCase()
+        .replace(/\s+/g, '-')
+        .replace(/[^\w-]+/g, '');
+      headers.push({ id, text, level });
+    }
+    return headers;
+  }
+
+  parseComponent(content: string): { name: string; pathTo: string } {
+    const cleanedLine = content.trim().slice(2, -2).trim();
+    const [nameKV, pathToKV] = cleanedLine.split(',');
+    const name = nameKV.split(':')[1]?.trim();
+    const pathTo = pathToKV.split(':')[1]?.trim();
+    return { name, pathTo };
+  }
+}

package/src/lib/content-parsing/shiki-highlighter.ts

@@ -0,0 +1,219 @@
+import { Injectable } from '@angular/core';
+import { Root } from 'hast';
+import { fromParse5 } from 'hast-util-from-parse5';
+import { parse } from 'parse5';
+import { createHighlighter } from 'shiki/index.mjs';
+import { BundledLanguage } from 'shiki/langs';
+import { BundledTheme } from 'shiki/themes';
+import { HighlighterGeneric } from 'shiki/types.mjs';
+import { visit } from 'unist-util-visit';
+import { AdkShikiHighlighterOptions } from './markdown-parser';
+
+export const defaultHighlighterLangs = [
+  'json',
+  'ts',
+  'js',
+  'html',
+  'css',
+  'scss',
+  'yaml',
+  'angular-html',
+  'angular-ts',
+  'mermaid',
+  'bash',
+];
+
+export enum ShikiTheme {
+  Andromeeda = 'andromeeda',
+  AuroraX = 'aurora-x',
+  AyuDark = 'ayu-dark',
+  CatppuccinFrappe = 'catppuccin-frappe',
+  CatppuccinLatte = 'catppuccin-latte',
+  CatppuccinMacchiato = 'catppuccin-macchiato',
+  CatppuccinMocha = 'catppuccin-mocha',
+  DarkPlus = 'dark-plus',
+  DraculaTheme = 'dracula',
+  DraculaThemeSoft = 'dracula-soft',
+  EverforestDark = 'everforest-dark',
+  EverforestLight = 'everforest-light',
+  GitHubDark = 'github-dark',
+  GitHubDarkDefault = 'github-dark-default',
+  GitHubDarkDimmed = 'github-dark-dimmed',
+  GitHubDarkHighContrast = 'github-dark-high-contrast',
+  GitHubLight = 'github-light',
+  GitHubLightDefault = 'github-light-default',
+  GitHubLightHighContrast = 'github-light-high-contrast',
+  Houston = 'houston',
+  LaserWave = 'laserwave',
+  LightPlus = 'light-plus',
+  MaterialTheme = 'material-theme',
+  MaterialThemeDarker = 'material-theme-darker',
+  MaterialThemeLighter = 'material-theme-lighter',
+  MaterialThemeOcean = 'material-theme-ocean',
+  MaterialThemePalenight = 'material-theme-palenight',
+  MinDark = 'min-dark',
+  MinLight = 'min-light',
+  Monokai = 'monokai',
+  NightOwl = 'night-owl',
+  Nord = 'nord',
+  OneDarkPro = 'one-dark-pro',
+  OneLight = 'one-light',
+  Plastic = 'plastic',
+  Poimandres = 'poimandres',
+  Red = 'red',
+  RosePine = 'rose-pine',
+  RosePineDawn = 'rose-pine-dawn',
+  RosePineMoon = 'rose-pine-moon',
+  SlackDark = 'slack-dark',
+  SlackOchin = 'slack-ochin',
+  SnazzyLight = 'snazzy-light',
+  SolarizedDark = 'solarized-dark',
+  SolarizedLight = 'solarized-light',
+  Synthwave84 = 'synthwave-84',
+  TokyoNight = 'tokyo-night',
+  Vesper = 'vesper',
+  VitesseBlack = 'vitesse-black',
+  VitesseDark = 'vitesse-dark',
+  VitesseLight = 'vitesse-light',
+}
+
+const MISSING_HIGHLIGHTER = `Please provide a \`shiki\` highlighter instance via \`options\`.`;
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AdkShikiHighlighter {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  private highlighterPromise: Promise<
+    HighlighterGeneric<BundledLanguage, BundledTheme>
+  > | null = null;
+
+  /**
+   * Initialize the highlighter. This should only be called one in an application.
+   *
+   * @param themes an array of any Shiki themes you may want to use anywhere in the app. You can control which theme for your particular parsing by passing the theme name to the actual parsing function.
+   *
+   * @returns void
+   */
+  async initialize(
+    themes: ShikiTheme[],
+    langs: string[] = defaultHighlighterLangs
+  ): Promise<void> {
+    if (!this.highlighterPromise) {
+      this.highlighterPromise = createHighlighter({
+        langs,
+        themes: themes.length ? themes : [ShikiTheme.GitHubLight],
+      });
+    }
+    await this.highlighterPromise;
+  }
+
+  async getHighlighter(): Promise<
+    HighlighterGeneric<BundledLanguage, BundledTheme>
+  > {
+    if (!this.highlighterPromise) {
+      throw new Error(
+        'Highlighter is not initialized. Please call initialize() once in your application first.'
+      );
+    }
+    return this.highlighterPromise;
+  }
+
+  remarkHighlight(options: AdkShikiHighlighterOptions): (tree: Root) => void {
+    const highlighter = options.highlighter;
+    if (!options.highlighter) {
+      throw new Error(MISSING_HIGHLIGHTER);
+    }
+    const loadedLanguages = highlighter.getLoadedLanguages();
+    const ignoreUnknownLanguage =
+      options.ignoreUnknownLanguage === undefined
+        ? true
+        : options.ignoreUnknownLanguage;
+
+    const visitor = (node) => {
+      if (!loadedLanguages.includes(node.lang)) {
+        if (ignoreUnknownLanguage) {
+          node.lang = null;
+        } else {
+          return;
+        }
+      }
+
+      const highlighted = highlighter.codeToHtml(node.value, {
+        lang: node.lang,
+        theme: options.theme,
+      });
+
+      node.type = 'html';
+      node.value = highlighted;
+    };
+
+    const transformer = (tree: Root) => {
+      visit(tree, 'code', visitor);
+    };
+
+    return transformer;
+  }
+
+  rehypeHighlight(options: AdkShikiHighlighterOptions): (tree: Root) => void {
+    const highlighter = options.highlighter;
+    if (!options.highlighter) {
+      throw new Error(MISSING_HIGHLIGHTER);
+    }
+
+    const visitor = (node, _index, parent) => {
+      if (!parent || parent.tagName !== 'pre' || node.tagName !== 'code') {
+        return;
+      }
+
+      const [langClass] = node.properties.className;
+      const lang = langClass.replace('language-', '');
+
+      if (highlighter.getLoadedLanguages().includes(lang)) {
+        const code = node.children[0]?.value;
+        if (!code) {
+          return;
+        }
+        const highlighted = highlighter.codeToHtml(code, {
+          lang,
+          theme: options.theme,
+        });
+        const parsed = parse(highlighted);
+        const hastTree = fromParse5(parsed);
+
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const content = (hastTree as any).children[0].children[1].children[0]
+          .children[0];
+
+        content.properties.class = ['shiki', 'shiki-' + lang, langClass];
+
+        node.properties = content.properties;
+        node.children = content.children;
+      }
+    };
+
+    const transformer = (tree: Root) => {
+      visit(tree, 'element', visitor);
+    };
+
+    return transformer;
+  }
+
+  getLanguage(node): string {
+    const dataLanguage = node.properties.dataLanguage;
+
+    if (dataLanguage != null) {
+      return dataLanguage;
+    }
+
+    const className = node.properties.className || [];
+
+    for (const classListItem of className) {
+      if (classListItem.slice(0, 9) === 'language-') {
+        return classListItem.slice(9).toLowerCase();
+      }
+    }
+
+    return null;
+  }
+}

package/src/lib/core/scss/_colors.scss

@@ -0,0 +1,37 @@
+$primary-0: var(--hsi-adk-color-primary-0);
+$primary-5: var(--hsi-adk-color-primary-5);
+$primary-10: var(--hsi-adk-color-primary-10);
+$primary-15: var(--hsi-adk-color-primary-15);
+$primary-20: var(--hsi-adk-color-primary-20);
+$primary-25: var(--hsi-adk-color-primary-25);
+$primary-30: var(--hsi-adk-color-primary-30);
+$primary-35: var(--hsi-adk-color-primary-35);
+$primary-40: var(--hsi-adk-color-primary-40);
+$primary-50: var(--hsi-adk-color-primary-50);
+$primary-60: var(--hsi-adk-color-primary-60);
+$primary-70: var(--hsi-adk-color-primary-70);
+$primary-80: var(--hsi-adk-color-primary-80);
+$primary-90: var(--hsi-adk-color-primary-90);
+$primary-95: var(--hsi-adk-color-primary-95);
+$primary-98: var(--hsi-adk-color-primary-98);
+$primary-99: var(--hsi-adk-color-primary-99);
+$primary-100: var(--hsi-adk-color-primary-100);
+
+$muted-primary-0: var(--hsi-adk-color-muted-primary-0);
+$muted-primary-5: var(--hsi-adk-color-muted-primary-5);
+$muted-primary-10: var(--hsi-adk-color-muted-primary-10);
+$muted-primary-15: var(--hsi-adk-color-muted-primary-15);
+$muted-primary-20: var(--hsi-adk-color-muted-primary-20);
+$muted-primary-25: var(--hsi-adk-color-muted-primary-25);
+$muted-primary-30: var(--hsi-adk-color-muted-primary-30);
+$muted-primary-35: var(--hsi-adk-color-muted-primary-35);
+$muted-primary-40: var(--hsi-adk-color-muted-primary-40);
+$muted-primary-50: var(--hsi-adk-color-muted-primary-50);
+$muted-primary-60: var(--hsi-adk-color-muted-primary-60);
+$muted-primary-70: var(--hsi-adk-color-muted-primary-70);
+$muted-primary-80: var(--hsi-adk-color-muted-primary-80);
+$muted-primary-90: var(--hsi-adk-color-muted-primary-90);
+$muted-primary-95: var(--hsi-adk-color-muted-primary-95);
+$muted-primary-98: var(--hsi-adk-color-muted-primary-98);
+$muted-primary-99: var(--hsi-adk-color-muted-primary-99);
+$muted-primary-100: var(--hsi-adk-color-muted-primary-100);

package/src/lib/core/scss/_functions.scss

@@ -0,0 +1,4 @@
+@function grid($number) {
+  $grid: 0.25rem;
+  @return $number * $grid;
+}

package/src/lib/core/scss/_placeholders.scss

@@ -0,0 +1 @@
+@forward '../../baseline-styles/typography';

package/src/lib/core/scss/_vars.scss

@@ -0,0 +1,15 @@
+$font-sans: var(--hsi-adk-font-sans);
+$font-serif: var(--hsi-adk-font-serif);
+$font-mono: var(--hsi-adk-font-mono);
+$font-weight-light: var(--hsi-adk-font-weight-light);
+$font-weight-regular: var(--hsi-adk-font-weight-regular);
+$font-weight-medium: var(--hsi-adk-font-weight-medium);
+$font-weight-semibold: var(--hsi-adk-font-weight-semibold);
+$font-weight-bold: var(--hsi-adk-font-weight-bold);
+$font-weight-black: var(--hsi-adk-font-weight-black);
+$font-line-height-0: var(--hsi-adk-font-line-height-0);
+$font-line-height-1: var(--hsi-adk-font-line-height-1);
+$font-line-height-2: var(--hsi-adk-font-line-height-2);
+$font-line-height-3: var(--hsi-adk-font-line-height-3);
+$font-line-height-4: var(--hsi-adk-font-line-height-4);
+$font-line-height-5: var(--hsi-adk-font-line-height-5);

package/src/lib/core/testing/stubs/services/assets.resource.stub.ts

@@ -0,0 +1,3 @@
+export class AdkAssetsResourceStub {
+  getAsset = jasmine.createSpy('getAsset');
+}

package/src/lib/core/testing/stubs/services/main.service.stub.ts

@@ -0,0 +1,5 @@
+import { AdkAssetsResourceStub } from './assets.resource.stub';
+
+export class MainServiceStub {
+  assetsResourceStub = new AdkAssetsResourceStub();
+}

package/src/lib/core/utilities/deep-merge.spec.ts

@@ -0,0 +1,29 @@
+import { deepMerge } from './deep-merge';
+
+describe('deepMerge', () => {
+  it('should merge two objects without the source overwriting undefined properties on the target', () => {
+    const target = {
+      a: 1,
+      b: 2,
+      c: {
+        d: 3,
+        e: 4,
+      },
+    };
+    const source = {
+      b: 5,
+      c: {
+        e: 6,
+      },
+    };
+    const result = deepMerge(target, source as unknown);
+    expect(result).toEqual({
+      a: 1,
+      b: 5,
+      c: {
+        d: 3,
+        e: 6,
+      },
+    });
+  });
+});