kairos-parser

The shared kernel of the kairos platform. One package, consumed by both apps (the student frontend kairos and the back office DigitalSkills-UI — always at the same version), shipping:

1. The parser — turns our markdown custom tags into HTML, so the same content renders identically everywhere.
2. The design tokens — the brand & faculty color palettes, single source of truth for colors.
3. The parser-output styles — the compiled CSS that styles the HTML the parser emits.

The parser

parseCustomTags(str: string, codeColor?: string): string

Parses a string containing our custom markdown tags and replaces them with the matching HTML structures — e.g. '<p>!!! information' becomes a div structure with an information icon and a content area. codeColor is the referential's color name ('math', 'psychology', …): it tints the emitted icons and tables through the palette classes (bg-<codeColor>-600).

import { parseCustomTags } from 'kairos-parser';

const htmlContent = parseCustomTags(markdownContent, referentialCodeColor);

getToolbarConfig(mode: ToolbarMode, saveCallback?, linkCallback?)

The EasyMDE toolbar configuration: mode (the ToolbarMode enum — READ, COURSE, …) drives which buttons appear, saveCallback saves the editor content, linkCallback opens the internal-link selector.

import * as EasyMDE from 'easymde';
import { getToolbarConfig, ToolbarMode } from 'kairos-parser';

const editor = new EasyMDE({
  element: this.textarea.nativeElement,
  previewRender: (text) => parseCustomTags(text, this.referentialCodeColor),
  toolbar: getToolbarConfig(
    ToolbarMode.COURSE,
    () => this.saveRecord(),
    () => this.openLinkSelector(),
  ),
});

The styles

Parser-output CSS

Add the compiled CSS to the styles array of angular.json:

"styles": [
  "node_modules/kairos-parser/css/main.css",
  "src/styles/styles.scss"
]

(Alternative: @import 'kairos-parser/css/main.css'; at the top of the global styles.scss.) css/main.css travels with the parser version that generates the matching HTML — never restyle the parser output inside an app.

Design tokens

One scss module gives everything:

@use 'kairos-parser/scss/tokens' as t;

$primary: t.$kairos-600;           // compile-time values — derive, never copy hexes
:root { @include t.palette-vars; } // the same palette as CSS custom properties

Apps must derive their semantic variables from the palette ($primary: t.$kairos-600) instead of copying hex values; components can then consume var(--kairos-600) at runtime once palette-vars is included on :root.

Releasing

npm run release            # bump + CHANGELOG + tag vX.Y.Z (commit-and-tag-version, local only)
npm run release:publish    # push --follow-tags + npm publish

npm publish always runs a full fresh build first (prepublishOnly hook) — publishing stale or missing dist//css/ artifacts is not possible (scss/ is tracked source, nothing to build). Then bump the version in both consumer apps.

Local development

The demo

demo/ is an Angular app that builds the library sources live (its tsconfig maps kairos-parser to ../src, its sass load paths cover ../scss and ../src/styles) — edit the library, the demo reloads, no build or publish needed:

cd demo && npm start

Against a real app (yalc)

# package side — rebuild + push into linked apps on every save:
npm run watch:yalc

# app side (kairos or DigitalSkills-UI):
npx yalc add kairos-parser        # wires the local copy into node_modules
#   …develop; if a change does not show up, restart the app's dev server
#   (Angular pre-bundles node_modules; `ng cache clean` for stubborn cases)
npx yalc remove kairos-parser && yarn install   # back to the npm version

⚠️ While linked, the app's package.json points at file:.yalc/… — never commit in that state.

Scripts

| Script | Role | |---|---| | build | clean + compile the css (build:css, with --load-path=scss) + compile the TypeScript (build:ts) | | clean | remove dist/ and css/ (the build artifacts — scss/ is source) | | prepublishOnly | runs build automatically before any npm publish | | release / release:publish | see Releasing above | | yalc / watch:yalc | see Against a real app above |