diff --git a/modules/gui/package.json b/modules/gui/package.json index 508694a..e861126 100644 --- a/modules/gui/package.json +++ b/modules/gui/package.json @@ -58,6 +58,7 @@ "fuse.js": "^6.6.2", "lodash": "^4.17.21", "lorem-ipsum": "^2.0.8", + "svelte-markdown": "^0.2.3", "svelte-watch-resize": "^1.0.3", "url-join": "^5.0.0" }, diff --git a/modules/gui/src/routes/packages/[slug]/+page.svelte b/modules/gui/src/routes/packages/[slug]/+page.svelte index 721080e..960ef24 100644 --- a/modules/gui/src/routes/packages/[slug]/+page.svelte +++ b/modules/gui/src/routes/packages/[slug]/+page.svelte @@ -14,6 +14,7 @@ import { getPackageBottles } from '@api'; import PackageDetail from '$components/PackageDetail/PackageDetail.svelte'; import PackageMetas from '@tea/ui/PackageMetas/PackageMetas.svelte'; + import Markdown from '@tea/ui/Markdown/Markdown.svelte'; /** @type {import('./$types').PageData} */ export let data; @@ -35,7 +36,7 @@ pkg = foundPackage; tabs.push({ label: 'details', - component: PackageDetail, + component: Markdown, props: { pkg } }); } diff --git a/modules/ui/package.json b/modules/ui/package.json index 87ebcbf..589e86e 100644 --- a/modules/ui/package.json +++ b/modules/ui/package.json @@ -53,6 +53,7 @@ "type": "module", "dependencies": { "@tailwindcss/line-clamp": "^0.4.2", + "svelte-markdown": "^0.2.3", "svelte-watch-resize": "^1.0.3" } } diff --git a/modules/ui/src/Markdown/Link.svelte b/modules/ui/src/Markdown/Link.svelte new file mode 100644 index 0000000..1a17382 --- /dev/null +++ b/modules/ui/src/Markdown/Link.svelte @@ -0,0 +1,8 @@ + + + diff --git a/modules/ui/src/Markdown/Markdown.svelte b/modules/ui/src/Markdown/Markdown.svelte new file mode 100644 index 0000000..1eb6895 --- /dev/null +++ b/modules/ui/src/Markdown/Markdown.svelte @@ -0,0 +1,19 @@ + + +
+ +
diff --git a/modules/ui/src/Markdown/sample.ts b/modules/ui/src/Markdown/sample.ts new file mode 100644 index 0000000..de9a910 --- /dev/null +++ b/modules/ui/src/Markdown/sample.ts @@ -0,0 +1,235 @@ +export const md = ` +# h1 Heading 8-) +## h2 Heading +### h3 Heading +#### h4 Heading +##### h5 Heading +###### h6 Heading + + +## Horizontal Rules + +___ + +--- + +*** + + +## Typographic replacements + +Enable typographer option to see result. + +(c) (C) (r) (R) (tm) (TM) (p) (P) +- + +test.. test... test..... test?..... test!.... + +!!!!!! ???? ,, -- --- + +"Smartypants, double quotes" and 'single quotes' + + +## Emphasis + +**This is bold text** + +__This is bold text__ + +*This is italic text* + +_This is italic text_ + +~~Strikethrough~~ + + +## Blockquotes + + +> Blockquotes can also be nested... +>> ...by using additional greater-than signs right next to each other... +> > > ...or with spaces between arrows. + + +## Lists + +Unordered + ++ Create a list by starting a line with \`+\`, \`-\`, or \`*\` ++ Sub-lists are made by indenting 2 spaces: + - Marker character change forces new list start: + * Ac tristique libero volutpat at + + Facilisis in pretium nisl aliquet + - Nulla volutpat aliquam velit ++ Very easy! + +Ordered + +1. Lorem ipsum dolor sit amet +2. Consectetur adipiscing elit +3. Integer molestie lorem at massa + + +1. You can use sequential numbers... +1. ...or keep all the numbers as \`1.\` + +Start numbering with offset: + +57. foo +1. bar + + +## Code + +Inline \`code\` + +Indented code + + // Some comments + line 1 of code + line 2 of code + line 3 of code + + +Block code "fences" + +\`\`\` +Sample text here... +\`\`\` + +Syntax highlighting + +\`\`\` js +var foo = function (bar) { + return bar++; +}; + +console.log(foo(5)); +\`\`\` + +## Tables + +| Option | Description | +| ------ | ----------- | +| data | path to data files to supply the data that will be passed into templates. | +| engine | engine to be used for processing templates. Handlebars is the default. | +| ext | extension to be used for dest files. | + +Right aligned columns + +| Option | Description | +| ------:| -----------:| +| data | path to data files to supply the data that will be passed into templates. | +| engine | engine to be used for processing templates. Handlebars is the default. | +| ext | extension to be used for dest files. | + + +## Links + +[link text](http://dev.nodeca.com) + +[link with title](http://nodeca.github.io/pica/demo/ "title text!") + +Autoconverted link https://github.com/nodeca/pica (enable linkify to see) + + +## Images + +![Minion](https://octodex.github.com/images/minion.png) +![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat") + +Like links, Images also have a footnote style syntax + +![Alt text][id] + +With a reference later in the document defining the URL location: + +[id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat" + + +## Plugins + +The killer feature of \`markdown-it\` is very effective support of +[syntax plugins](https://www.npmjs.org/browse/keyword/markdown-it-plugin). + + +### [Emojies](https://github.com/markdown-it/markdown-it-emoji) + +> Classic markup: :wink: :crush: :cry: :tear: :laughing: :yum: +> +> Shortcuts (emoticons): :-) :-( 8-) ;) + +see [how to change output](https://github.com/markdown-it/markdown-it-emoji#change-output) with twemoji. + + +### [Subscript](https://github.com/markdown-it/markdown-it-sub) / [Superscript](https://github.com/markdown-it/markdown-it-sup) + +- 19^th^ +- H~2~O + + +### [](https://github.com/markdown-it/markdown-it-ins) + +++Inserted text++ + + +### [](https://github.com/markdown-it/markdown-it-mark) + +==Marked text== + + +### [Footnotes](https://github.com/markdown-it/markdown-it-footnote) + +Footnote 1 link[^first]. + +Footnote 2 link[^second]. + +Inline footnote^[Text of inline footnote] definition. + +Duplicated footnote reference[^second]. + +[^first]: Footnote **can have markup** + + and multiple paragraphs. + +[^second]: Footnote text. + + +### [Definition lists](https://github.com/markdown-it/markdown-it-deflist) + +Term 1 + +: Definition 1 +with lazy continuation. + +Term 2 with *inline markup* + +: Definition 2 + + { some code, part of Definition 2 } + + Third paragraph of definition 2. + +_Compact style:_ + +Term 1 + ~ Definition 1 + +Term 2 + ~ Definition 2a + ~ Definition 2b + + +### [Abbreviations](https://github.com/markdown-it/markdown-it-abbr) + +This is HTML abbreviation example. + +It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on. + +*[HTML]: Hyper Text Markup Language + +### [Custom containers](https://github.com/markdown-it/markdown-it-container) + +::: warning +*here be dragons* +::: +`; diff --git a/modules/ui/src/Markdown/styles.css b/modules/ui/src/Markdown/styles.css new file mode 100644 index 0000000..bba0ea1 --- /dev/null +++ b/modules/ui/src/Markdown/styles.css @@ -0,0 +1,943 @@ +.markdown-body { + color-scheme: dark; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + margin: 0; + color: #c9d1d9; + background-color: #0d1117; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, + 'Apple Color Emoji', 'Segoe UI Emoji'; + font-size: 16px; + line-height: 1.5; + word-wrap: break-word; +} + +.markdown-body .octicon { + display: inline-block; + fill: currentColor; + vertical-align: text-bottom; +} + +.markdown-body h1:hover .anchor .octicon-link:before, +.markdown-body h2:hover .anchor .octicon-link:before, +.markdown-body h3:hover .anchor .octicon-link:before, +.markdown-body h4:hover .anchor .octicon-link:before, +.markdown-body h5:hover .anchor .octicon-link:before, +.markdown-body h6:hover .anchor .octicon-link:before { + width: 16px; + height: 16px; + content: ' '; + display: inline-block; + background-color: currentColor; + -webkit-mask-image: url("data:image/svg+xml,"); + mask-image: url("data:image/svg+xml,"); +} + +.markdown-body details, +.markdown-body figcaption, +.markdown-body figure { + display: block; +} + +.markdown-body summary { + display: list-item; +} + +.markdown-body [hidden] { + display: none !important; +} + +.markdown-body a { + background-color: transparent; + color: #58a6ff; + text-decoration: none; +} + +.markdown-body a:active, +.markdown-body a:hover { + outline-width: 0; +} + +.markdown-body abbr[title] { + border-bottom: none; + text-decoration: underline dotted; +} + +.markdown-body b, +.markdown-body strong { + font-weight: 600; +} + +.markdown-body dfn { + font-style: italic; +} + +.markdown-body h1 { + margin: 0.67em 0; + font-weight: 600; + padding-bottom: 0.3em; + font-size: 2em; + border-bottom: 1px solid #21262d; +} + +.markdown-body mark { + background-color: rgba(187, 128, 9, 0.15); + color: #c9d1d9; +} + +.markdown-body small { + font-size: 90%; +} + +.markdown-body sub, +.markdown-body sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +.markdown-body sub { + bottom: -0.25em; +} + +.markdown-body sup { + top: -0.5em; +} + +.markdown-body img { + border-style: none; + max-width: 100%; + box-sizing: content-box; + background-color: #0d1117; +} + +.markdown-body code, +.markdown-body kbd, +.markdown-body pre, +.markdown-body samp { + font-family: monospace, monospace; + font-size: 1em; +} + +.markdown-body figure { + margin: 1em 40px; +} + +.markdown-body hr { + box-sizing: content-box; + overflow: hidden; + background: transparent; + border-bottom: 1px solid #21262d; + height: 0.25em; + padding: 0; + margin: 24px 0; + background-color: #30363d; + border: 0; +} + +.markdown-body input { + font: inherit; + margin: 0; + overflow: visible; + font-family: inherit; + font-size: inherit; + line-height: inherit; +} + +.markdown-body [type='button'], +.markdown-body [type='reset'], +.markdown-body [type='submit'] { + -webkit-appearance: button; +} + +.markdown-body [type='button']::-moz-focus-inner, +.markdown-body [type='reset']::-moz-focus-inner, +.markdown-body [type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.markdown-body [type='button']:-moz-focusring, +.markdown-body [type='reset']:-moz-focusring, +.markdown-body [type='submit']:-moz-focusring { + outline: 1px dotted ButtonText; +} + +.markdown-body [type='checkbox'], +.markdown-body [type='radio'] { + box-sizing: border-box; + padding: 0; +} + +.markdown-body [type='number']::-webkit-inner-spin-button, +.markdown-body [type='number']::-webkit-outer-spin-button { + height: auto; +} + +.markdown-body [type='search'] { + -webkit-appearance: textfield; + outline-offset: -2px; +} + +.markdown-body [type='search']::-webkit-search-cancel-button, +.markdown-body [type='search']::-webkit-search-decoration { + -webkit-appearance: none; +} + +.markdown-body ::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; +} + +.markdown-body ::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; +} + +.markdown-body a:hover { + text-decoration: underline; +} + +.markdown-body hr::before { + display: table; + content: ''; +} + +.markdown-body hr::after { + display: table; + clear: both; + content: ''; +} + +.markdown-body table { + border-spacing: 0; + border-collapse: collapse; + display: block; + width: max-content; + max-width: 100%; + overflow: auto; +} + +.markdown-body td, +.markdown-body th { + padding: 0; +} + +.markdown-body details summary { + cursor: pointer; +} + +.markdown-body details:not([open]) > *:not(summary) { + display: none !important; +} + +.markdown-body kbd { + display: inline-block; + padding: 3px 5px; + font: 11px ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; + line-height: 10px; + color: #c9d1d9; + vertical-align: middle; + background-color: #161b22; + border: solid 1px rgba(110, 118, 129, 0.4); + border-bottom-color: rgba(110, 118, 129, 0.4); + border-radius: 6px; + box-shadow: inset 0 -1px 0 rgba(110, 118, 129, 0.4); +} + +.markdown-body h1, +.markdown-body h2, +.markdown-body h3, +.markdown-body h4, +.markdown-body h5, +.markdown-body h6 { + margin-top: 24px; + margin-bottom: 16px; + font-weight: 600; + line-height: 1.25; + color: #00ffd0; +} + +.markdown-body h2 { + font-weight: 600; + padding-bottom: 0.3em; + font-size: 1.5em; + border-bottom: 1px solid #21262d; +} + +.markdown-body h3 { + font-weight: 600; + font-size: 1.25em; +} + +.markdown-body h4 { + font-weight: 600; + font-size: 1em; +} + +.markdown-body h5 { + font-weight: 600; + font-size: 0.875em; +} + +.markdown-body h6 { + font-weight: 600; + font-size: 0.85em; + color: #8b949e; +} + +.markdown-body p { + margin-top: 0; + margin-bottom: 10px; +} + +.markdown-body blockquote { + margin: 0; + padding: 0 1em; + color: #8b949e; + border-left: 0.25em solid #30363d; +} + +.markdown-body ul, +.markdown-body ol { + margin-top: 0; + margin-bottom: 0; + padding-left: 2em; +} + +.markdown-body ol ol, +.markdown-body ul ol { + list-style-type: lower-roman; +} + +.markdown-body ul ul ol, +.markdown-body ul ol ol, +.markdown-body ol ul ol, +.markdown-body ol ol ol { + list-style-type: lower-alpha; +} + +.markdown-body dd { + margin-left: 0; +} + +.markdown-body tt, +.markdown-body code { + font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; + font-size: 12px; +} + +.markdown-body pre { + margin-top: 0; + margin-bottom: 0; + font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; + font-size: 12px; + word-wrap: normal; +} + +.markdown-body .octicon { + display: inline-block; + overflow: visible !important; + vertical-align: text-bottom; + fill: currentColor; +} + +.markdown-body ::placeholder { + color: #484f58; + opacity: 1; +} + +.markdown-body input::-webkit-outer-spin-button, +.markdown-body input::-webkit-inner-spin-button { + margin: 0; + -webkit-appearance: none; + appearance: none; +} + +.markdown-body .pl-c { + color: #8b949e; +} + +.markdown-body .pl-c1, +.markdown-body .pl-s .pl-v { + color: #79c0ff; +} + +.markdown-body .pl-e, +.markdown-body .pl-en { + color: #d2a8ff; +} + +.markdown-body .pl-smi, +.markdown-body .pl-s .pl-s1 { + color: #c9d1d9; +} + +.markdown-body .pl-ent { + color: #7ee787; +} + +.markdown-body .pl-k { + color: #ff7b72; +} + +.markdown-body .pl-s, +.markdown-body .pl-pds, +.markdown-body .pl-s .pl-pse .pl-s1, +.markdown-body .pl-sr, +.markdown-body .pl-sr .pl-cce, +.markdown-body .pl-sr .pl-sre, +.markdown-body .pl-sr .pl-sra { + color: #a5d6ff; +} + +.markdown-body .pl-v, +.markdown-body .pl-smw { + color: #ffa657; +} + +.markdown-body .pl-bu { + color: #f85149; +} + +.markdown-body .pl-ii { + color: #f0f6fc; + background-color: #8e1519; +} + +.markdown-body .pl-c2 { + color: #f0f6fc; + background-color: #b62324; +} + +.markdown-body .pl-sr .pl-cce { + font-weight: bold; + color: #7ee787; +} + +.markdown-body .pl-ml { + color: #f2cc60; +} + +.markdown-body .pl-mh, +.markdown-body .pl-mh .pl-en, +.markdown-body .pl-ms { + font-weight: bold; + color: #1f6feb; +} + +.markdown-body .pl-mi { + font-style: italic; + color: #c9d1d9; +} + +.markdown-body .pl-mb { + font-weight: bold; + color: #c9d1d9; +} + +.markdown-body .pl-md { + color: #ffdcd7; + background-color: #67060c; +} + +.markdown-body .pl-mi1 { + color: #aff5b4; + background-color: #033a16; +} + +.markdown-body .pl-mc { + color: #ffdfb6; + background-color: #5a1e02; +} + +.markdown-body .pl-mi2 { + color: #c9d1d9; + background-color: #1158c7; +} + +.markdown-body .pl-mdr { + font-weight: bold; + color: #d2a8ff; +} + +.markdown-body .pl-ba { + color: #8b949e; +} + +.markdown-body .pl-sg { + color: #484f58; +} + +.markdown-body .pl-corl { + text-decoration: underline; + color: #a5d6ff; +} + +.markdown-body [data-catalyst] { + display: block; +} + +.markdown-body g-emoji { + font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; + font-size: 1em; + font-style: normal !important; + font-weight: 400; + line-height: 1; + vertical-align: -0.075em; +} + +.markdown-body g-emoji img { + width: 1em; + height: 1em; +} + +.markdown-body::before { + display: table; + content: ''; +} + +.markdown-body::after { + display: table; + clear: both; + content: ''; +} + +.markdown-body > *:first-child { + margin-top: 0 !important; +} + +.markdown-body > *:last-child { + margin-bottom: 0 !important; +} + +.markdown-body a:not([href]) { + color: inherit; + text-decoration: none; +} + +.markdown-body .absent { + color: #f85149; +} + +.markdown-body .anchor { + float: left; + padding-right: 4px; + margin-left: -20px; + line-height: 1; +} + +.markdown-body .anchor:focus { + outline: none; +} + +.markdown-body p, +.markdown-body blockquote, +.markdown-body ul, +.markdown-body ol, +.markdown-body dl, +.markdown-body table, +.markdown-body pre, +.markdown-body details { + margin-top: 0; + margin-bottom: 16px; +} + +.markdown-body blockquote > :first-child { + margin-top: 0; +} + +.markdown-body blockquote > :last-child { + margin-bottom: 0; +} + +.markdown-body sup > a::before { + content: '['; +} + +.markdown-body sup > a::after { + content: ']'; +} + +.markdown-body h1 .octicon-link, +.markdown-body h2 .octicon-link, +.markdown-body h3 .octicon-link, +.markdown-body h4 .octicon-link, +.markdown-body h5 .octicon-link, +.markdown-body h6 .octicon-link { + color: #c9d1d9; + vertical-align: middle; + visibility: hidden; +} + +.markdown-body h1:hover .anchor, +.markdown-body h2:hover .anchor, +.markdown-body h3:hover .anchor, +.markdown-body h4:hover .anchor, +.markdown-body h5:hover .anchor, +.markdown-body h6:hover .anchor { + text-decoration: none; +} + +.markdown-body h1:hover .anchor .octicon-link, +.markdown-body h2:hover .anchor .octicon-link, +.markdown-body h3:hover .anchor .octicon-link, +.markdown-body h4:hover .anchor .octicon-link, +.markdown-body h5:hover .anchor .octicon-link, +.markdown-body h6:hover .anchor .octicon-link { + visibility: visible; +} + +.markdown-body h1 tt, +.markdown-body h1 code, +.markdown-body h2 tt, +.markdown-body h2 code, +.markdown-body h3 tt, +.markdown-body h3 code, +.markdown-body h4 tt, +.markdown-body h4 code, +.markdown-body h5 tt, +.markdown-body h5 code, +.markdown-body h6 tt, +.markdown-body h6 code { + padding: 0 0.2em; + font-size: inherit; +} + +.markdown-body ul.no-list, +.markdown-body ol.no-list { + padding: 0; + list-style-type: none; +} + +.markdown-body ol[type='1'] { + list-style-type: decimal; +} + +.markdown-body ol[type='a'] { + list-style-type: lower-alpha; +} + +.markdown-body ol[type='i'] { + list-style-type: lower-roman; +} + +.markdown-body div > ol:not([type]) { + list-style-type: decimal; +} + +.markdown-body ul ul, +.markdown-body ul ol, +.markdown-body ol ol, +.markdown-body ol ul { + margin-top: 0; + margin-bottom: 0; +} + +.markdown-body li > p { + margin-top: 16px; +} + +.markdown-body li + li { + margin-top: 0.25em; +} + +.markdown-body dl { + padding: 0; +} + +.markdown-body dl dt { + padding: 0; + margin-top: 16px; + font-size: 1em; + font-style: italic; + font-weight: 600; +} + +.markdown-body dl dd { + padding: 0 16px; + margin-bottom: 16px; +} + +.markdown-body table th { + font-weight: 600; +} + +.markdown-body table th, +.markdown-body table td { + padding: 6px 13px; + border: 1px solid #30363d; +} + +.markdown-body table tr { + background-color: #0d1117; + border-top: 1px solid #21262d; +} + +.markdown-body table tr:nth-child(2n) { + background-color: #161b22; +} + +.markdown-body table img { + background-color: transparent; +} + +.markdown-body img[align='right'] { + padding-left: 20px; +} + +.markdown-body img[align='left'] { + padding-right: 20px; +} + +.markdown-body .emoji { + max-width: none; + vertical-align: text-top; + background-color: transparent; +} + +.markdown-body span.frame { + display: block; + overflow: hidden; +} + +.markdown-body span.frame > span { + display: block; + float: left; + width: auto; + padding: 7px; + margin: 13px 0 0; + overflow: hidden; + border: 1px solid #30363d; +} + +.markdown-body span.frame span img { + display: block; + float: left; +} + +.markdown-body span.frame span span { + display: block; + padding: 5px 0 0; + clear: both; + color: #c9d1d9; +} + +.markdown-body span.align-center { + display: block; + overflow: hidden; + clear: both; +} + +.markdown-body span.align-center > span { + display: block; + margin: 13px auto 0; + overflow: hidden; + text-align: center; +} + +.markdown-body span.align-center span img { + margin: 0 auto; + text-align: center; +} + +.markdown-body span.align-right { + display: block; + overflow: hidden; + clear: both; +} + +.markdown-body span.align-right > span { + display: block; + margin: 13px 0 0; + overflow: hidden; + text-align: right; +} + +.markdown-body span.align-right span img { + margin: 0; + text-align: right; +} + +.markdown-body span.float-left { + display: block; + float: left; + margin-right: 13px; + overflow: hidden; +} + +.markdown-body span.float-left span { + margin: 13px 0 0; +} + +.markdown-body span.float-right { + display: block; + float: right; + margin-left: 13px; + overflow: hidden; +} + +.markdown-body span.float-right > span { + display: block; + margin: 13px auto 0; + overflow: hidden; + text-align: right; +} + +.markdown-body code, +.markdown-body tt { + padding: 0.2em 0.4em; + margin: 0; + font-size: 85%; + background-color: rgba(110, 118, 129, 0.4); + border-radius: 6px; +} + +.markdown-body code br, +.markdown-body tt br { + display: none; +} + +.markdown-body del code { + text-decoration: inherit; +} + +.markdown-body pre code { + font-size: 100%; +} + +.markdown-body pre > code { + padding: 0; + margin: 0; + word-break: normal; + white-space: pre; + background: transparent; + border: 0; +} + +.markdown-body .highlight { + margin-bottom: 16px; +} + +.markdown-body .highlight pre { + margin-bottom: 0; + word-break: normal; +} + +.markdown-body .highlight pre, +.markdown-body pre { + padding: 16px; + overflow: auto; + font-size: 85%; + line-height: 1.45; + background-color: #161b22; + border-radius: 6px; +} + +.markdown-body pre code, +.markdown-body pre tt { + display: inline; + max-width: auto; + padding: 0; + margin: 0; + overflow: visible; + line-height: inherit; + word-wrap: normal; + background-color: transparent; + border: 0; +} + +.markdown-body .csv-data td, +.markdown-body .csv-data th { + padding: 5px; + overflow: hidden; + font-size: 12px; + line-height: 1; + text-align: left; + white-space: nowrap; +} + +.markdown-body .csv-data .blob-num { + padding: 10px 8px 9px; + text-align: right; + background: #0d1117; + border: 0; +} + +.markdown-body .csv-data tr { + border-top: 0; +} + +.markdown-body .csv-data th { + font-weight: 600; + background: #161b22; + border-top: 0; +} + +.markdown-body .footnotes { + font-size: 12px; + color: #8b949e; + border-top: 1px solid #30363d; +} + +.markdown-body .footnotes ol { + padding-left: 16px; +} + +.markdown-body .footnotes li { + position: relative; +} + +.markdown-body .footnotes li:target::before { + position: absolute; + top: -8px; + right: -8px; + bottom: -8px; + left: -24px; + pointer-events: none; + content: ''; + border: 2px solid #1f6feb; + border-radius: 6px; +} + +.markdown-body .footnotes li:target { + color: #c9d1d9; +} + +.markdown-body .footnotes .data-footnote-backref g-emoji { + font-family: monospace; +} + +.markdown-body .task-list-item { + list-style-type: none; +} + +.markdown-body .task-list-item label { + font-weight: 400; +} + +.markdown-body .task-list-item.enabled label { + cursor: pointer; +} + +.markdown-body .task-list-item + .task-list-item { + margin-top: 3px; +} + +.markdown-body .task-list-item .handle { + display: none; +} + +.markdown-body .task-list-item-checkbox { + margin: 0 0.2em 0.25em -1.6em; + vertical-align: middle; +} + +.markdown-body .contains-task-list:dir(rtl) .task-list-item-checkbox { + margin: 0 -1.6em 0.25em 0.2em; +} + +.markdown-body ::-webkit-calendar-picker-indicator { + filter: invert(50%); +} diff --git a/modules/ui/src/types.ts b/modules/ui/src/types.ts index 8a52f40..8ef5332 100644 --- a/modules/ui/src/types.ts +++ b/modules/ui/src/types.ts @@ -55,7 +55,15 @@ export type Bottle = { export type Tab = { label: string; props?: { - [key: string]: any; + [key: string]: + | string + | Date + | number + | Record + | Array + | Array + | Array + | Array>; }; component: ComponentType; }; diff --git a/modules/ui/tailwind.config.cjs b/modules/ui/tailwind.config.cjs index 0a35a9a..ba43286 100644 --- a/modules/ui/tailwind.config.cjs +++ b/modules/ui/tailwind.config.cjs @@ -24,6 +24,16 @@ module.exports = { fontFamily: { sono: ['sono', 'sans-serif'], machina: ['pp-neue-machina', 'sans-serif'] + }, + typography: { + excerpt: { + css: { + p: { + fontFamily: 'font-machina', + fontSize: 'font-2xl' + } + } + } } } }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 08f03a0..4e659f5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -39,6 +39,7 @@ importers: prettier-plugin-tailwindcss: ^0.2.0 svelte: ^3.55.0 svelte-check: ^2.8.0 + svelte-markdown: ^0.2.3 svelte-preprocess: ^5.0.0 svelte-watch-resize: ^1.0.3 svelte2tsx: ^0.5.20 @@ -58,6 +59,7 @@ importers: fuse.js: 6.6.2 lodash: 4.17.21 lorem-ipsum: 2.0.8 + svelte-markdown: 0.2.3_svelte@3.55.0 svelte-watch-resize: 1.0.3 url-join: 5.0.0 devDependencies: @@ -119,6 +121,7 @@ importers: storybook: ^7.0.0-alpha.51 svelte: ^3.44.0 svelte-check: ^2.7.1 + svelte-markdown: ^0.2.3 svelte-preprocess: ^4.10.7 svelte-watch-resize: ^1.0.3 tailwindcss: ^3.2.4 @@ -127,6 +130,7 @@ importers: vite: ^4.0.0 dependencies: '@tailwindcss/line-clamp': 0.4.2_tailwindcss@3.2.4 + svelte-markdown: 0.2.3_svelte@3.55.0 svelte-watch-resize: 1.0.3 devDependencies: '@playwright/test': 1.25.0 @@ -3876,6 +3880,10 @@ packages: resolution: {integrity: sha512-kb9/98N6X8gyME9Cf7YaqIMvYGnBSWqEci6tiettE6iJWH1XdJz/PO8LB0GtLCG7x8dU3KWhZT+lA1a35127tA==} dev: true + /@types/marked/4.0.8: + resolution: {integrity: sha512-HVNzMT5QlWCOdeuBsgXP8EZzKUf0+AXzN+sLmjvaB3ZlLqO+e4u0uXrdw9ub69wBKFs+c6/pA4r9sy6cCDvImw==} + dev: false + /@types/mdast/3.0.10: resolution: {integrity: sha512-W864tg/Osz1+9f4lrGTZpCSO5/z4608eUp19tbozkq2HJK6i3z1kT0H9tlADXuYIb1YYOBByU4Jsqkk75q48qA==} dependencies: @@ -8063,6 +8071,12 @@ packages: react: '>= 0.14.0' dev: true + /marked/4.2.12: + resolution: {integrity: sha512-yr8hSKa3Fv4D3jdZmtMMPghgVt6TWbk86WQaWhDloQjRSQhMMYCAro7jP7VDJrjjdV8pxVxMssXS8B8Y5DZ5aw==} + engines: {node: '>= 12'} + hasBin: true + dev: false + /mdast-util-definitions/4.0.0: resolution: {integrity: sha512-k8AJ6aNnUkB7IE+5azR9h81O5EQ/cTDXtWdMq9Kk5KcEW/8ritU5CeLg/9HhOC++nALHBlaogJ5jz0Ybk3kPMQ==} dependencies: @@ -10250,6 +10264,16 @@ packages: svelte: 3.55.0 dev: true + /svelte-markdown/0.2.3_svelte@3.55.0: + resolution: {integrity: sha512-2h680NzTXnAD0CXhxe3GeHl6W+ayG4iKQRl+BIDRw+R0mUE0OiNxP1Vt8Rn+aWevB/LBiBIPCAwvL+0BkG057A==} + peerDependencies: + svelte: ^3.0.0 + dependencies: + '@types/marked': 4.0.8 + marked: 4.2.12 + svelte: 3.55.0 + dev: false + /svelte-preprocess/4.10.7_zcekeqe65pzp6xniqzzjqholqa: resolution: {integrity: sha512-sNPBnqYD6FnmdBrUmBCaqS00RyCsCpj2BG58A1JBswNF7b0OKviwxqVrOL/CKyJrLSClrSeqQv5BXNg2RUbPOw==} engines: {node: '>= 9.11.2'} @@ -10360,7 +10384,6 @@ packages: /svelte/3.55.0: resolution: {integrity: sha512-uGu2FVMlOuey4JoKHKrpZFkoYyj0VLjJdz47zX5+gVK5odxHM40RVhar9/iK2YFRVxvfg9FkhfVlR0sjeIrOiA==} engines: {node: '>= 8'} - dev: true /svelte2tsx/0.5.20_ozwewin3tvouwvcwd5wmlkxtki: resolution: {integrity: sha512-yNHmN/uoAnJ7d1XqVohiNA6TMFOxibHyEddUAHVt1PiLXtbwAJF3WaGYlg8QbOdoXzOVsVNCAlqRUIdULUm+OA==}