Skip to content

Commit

Permalink
feat(examples): update markdown parser demo & readme
Browse files Browse the repository at this point in the history
  • Loading branch information
@postspectacular
postspectacular committed Mar 6, 2023
1 parent 7bd4edb commit 80e3422
Show file tree
Hide file tree
Showing 2 changed files with 75 additions and 18 deletions.
33 changes: 21 additions & 12 deletions examples/markdown/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ Nested blockquotes are supported and can contain links, images and inline
formatting, but not other block elements (e.g. lists):

> Nesting is supported:
>> "To understand recursion, one must first understand recursion."
>> "To understand recursion, one must **first** understand recursion."
>> — Stephen Hawking
>
> Images in blockquotes are ok too:\
Expand Down Expand Up @@ -78,8 +78,8 @@ For example, here is a [link to this section](#custom-header-id) (using ID

### Images

**Alt text for images is required**. `title` attributes (e.g. for tooltips) can
be given in quotes after the image URL. For example:
**Alt text for images is required**. Optional `title` attribute (e.g. for hover
tooltip or caption) can be given in quotes after the image URL. For example:

```markdown
![alt text](url "title text")
Expand All @@ -96,6 +96,15 @@ The following link formats are supported:
4. `[[page name]]` - Wiki-style page reference, non-standard Markdown
5. `[[page name|label]]` - like 4., but with added link label

### Lists

- Ordered and unordered lists are supported
- Fully nestable
- Ordered lists start with a `1.` (digit or letter followed by a dot) prefix
- Unordered lists **must** use a `-` line prefix
- [ ] TODO list items
- [x] ...are supported as well

### Blocklevel metadata

Arbitrary metadata can be assigned to any blocklevel element:
Expand Down Expand Up @@ -127,16 +136,16 @@ Just checkout that metadata...

### Tables

| Cells in... | header are treated separately |
|:------------------|:-----------------------------------------------------------------------------------------------|
| Column alignments | :white_check_mark: supported (ignored in this demo though) |
| Inline formats | :white_check_mark: _supported and **nestable**_ |
| Images | ![C-SCAPE](https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/cellular/hero.png) |
| Links | :white_check_mark: [supported](#links) |
| Cells in... | header are treated separately |
|:-----------------:|------------------------------------------------------------------------------------------------|
| Column alignments | :white_check_mark: supported |
| Inline formats | :white_check_mark: _supported and **nestable**_ |
| Images | ![C-SCAPE](https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/cellular/hero.png) |
| Links | :white_check_mark: [supported](#links) |
| | |
| Unsupported | :x: no linebreaks |
| | :x: no lists |
| | :x: no blockquotes |
| Unsupported | :x: linebreaks |
| | :x: lists |
| | :x: blockquotes |

## Onwards!

Expand Down
60 changes: 54 additions & 6 deletions examples/markdown/src/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import type { IObjectOf } from "@thi.ng/api";
import { timedResult } from "@thi.ng/bench";
import { parse, TagTransforms } from "@thi.ng/hiccup-markdown";
import { parse, TagTransforms, TransformCtx } from "@thi.ng/hiccup-markdown";
import { reactive, Stream } from "@thi.ng/rstream";
import { map } from "@thi.ng/transducers";
import { updateDOM } from "@thi.ng/transducers-hdom";
Expand Down Expand Up @@ -56,20 +56,61 @@ const CUSTOM_TAGS: Partial<TagTransforms> = {
},
...body,
],
ol: (ctx, items, meta) => [
"ol",
{ type: /^[0-9]+$/.test(items[0][1].__index) ? "1" : "a" },
...items,
],
olitem: (ctx, attribs, index, body) =>
attribs.__todo
? [
"li",
{ __index: index },
["input", { type: "checkbox", checked: attribs.__done }],
" ",
...body,
]
: ["li", { __index: index }, ...body],
ulitem: (ctx, attribs, body) =>
attribs.__todo
? [
"li",
{},
["input", { type: "checkbox", checked: attribs.__done }],
" ",
...body,
]
: ["li", {}, ...body],
strike: (ctx, body) => ["del.bg-washed-red", ...body],
table: (ctx, align, head, rows) => [
table: (ctx, head, rows) => [
"table.w-100.collapse.ba.b--black-10",
{ "data-align": ctx.align.toString() },
["thead", {}, head],
["tbody", {}, ...rows],
],
tableRow: (ctx, id, cells) => [
tableRow: (ctx, cells) => [
`tr.striped--near-white.ba.b--black-10`,
...cells,
],
tableCell: (ctx, body) => ["td.pa2", {}, ...body],
tableHead: (ctx, body) => ["th.pa2.bg-black.white.tl", {}, ...body],
tableCell: (ctx, body) => [
"td.pa2",
{
class: colAlign(ctx),
},
...body,
],
tableHead: (ctx, body) => [
"th.pa2.bg-black.white",
{ class: colAlign(ctx) },
...body,
],
};

const colAlign = (ctx: TransformCtx) =>
({ default: "tl", left: "tl", center: "tc", right: "tr" }[
ctx.align[ctx.column]
]);

// UI root component
const app =
(input: Stream<string>) =>
Expand Down Expand Up @@ -121,7 +162,14 @@ src.transform(
],
];
} catch (e) {
return ["div.bg-dark-red.white", {}, (<Error>e).message];
return [
[
"div.bg-dark-red.white.pa2.f7",
{},
["h3", {}, "Parser error"],
(<Error>e).message,
],
];
}
}),
})),
Expand Down

0 comments on commit 80e3422

Please sign in to comment.