StyleGen / custom_nodes /comfy_mtb /web /note_plus.constants.js
multimodalart's picture
Squashing commit
4450790 verified
raw
history blame
4.74 kB
// web/note_plus.constants.js
export const DEFAULT_CSS = ''
export const DEFAULT_HTML = `<p style='color:red;font-family:monospace'>
Note+
</p>`
export const DEFAULT_MD = '## Note+'
export const DEFAULT_MODE = 'markdown'
export const DEFAULT_THEME = 'one_dark'
export const DEMO_CONTENT = `
# @mtb/svelte-markdown.
## This is a subheader
[![embedded test](https://github.com/melMass/comfy_mtb/actions/workflows/test_embedded.yml/badge.svg)](https://github.com/melMass/comfy_mtb/actions/workflows/test_embedded.yml)
![home](https://repository-images.githubusercontent.com/649047066/a3eef9a7-20dd-4ef9-b839-884502d4e873)
<details>
<summary>More details about the inception of the project</summary>
\`\`\`js
class YesMan{
constructor(){
this.started = false
}
}
\`\`\`
</details>
This is a paragraph. If it goes over the maximum width it will not automatically wrap unless it reaches the max-w of \`prose\` check [styles](/styles) for more info.
This component is useful for building some tools on top. Or even just a static system using svelte at its core. My personal blog is fully powered by **@mtb/svelte-markdown**
| And this is | A table |
|-------------|---------|
| With two | columns |
We also support github callout:
> [!NOTE]
> Highlights information that users should take into account, even when skimming.
> [!TIP]
> Optional information to help a user be more successful.
> [!IMPORTANT]
> Crucial information necessary for users to succeed.
> [!WARNING]
> Critical content demanding immediate user attention due to potential risks.
> [!CAUTION]
> Negative potential consequences of an action.
`
export const THEMES = [
'ambiance',
'chaos',
'chrome',
'cloud9_day',
'cloud9_night',
'cloud9_night_low_color',
'cloud_editor',
'cloud_editor_dark',
'clouds',
'clouds_midnight',
'cobalt',
'crimson_editor',
'dawn',
'dracula',
'dreamweaver',
'eclipse',
'github',
'github_dark',
'gob',
'gruvbox',
'gruvbox_dark_hard',
'gruvbox_light_hard',
'idle_fingers',
'iplastic',
'katzenmilch',
'kr_theme',
'kuroir',
'merbivore',
'merbivore_soft',
'mono_industrial',
'monokai',
'nord_dark',
'one_dark',
'pastel_on_dark',
'solarized_dark',
'solarized_light',
'sqlserver',
'terminal',
'textmate',
'tomorrow',
'tomorrow_night',
'tomorrow_night_blue',
'tomorrow_night_bright',
'tomorrow_night_eighties',
'twilight',
'vibrant_ink',
'vscode',
]
export const CSS_RESET = `
* {
font-family: monospace;
line-height: 1.25em;
}
.shiki{
padding: 1em;
width: 100%;
}
.markdown-callout-title {
.octicon{
fill:white;
}
/* background: var(--current-color); */
color: var(--current-color);
font-weight: bold;
/* border-start-end-radius: var(--radius); */
/* border-start-start-radius: var(--radius); */
padding: 0.5em;
padding-inline-start: 1em;
}
.markdown-callout-content {
padding: 1em;
}
.markdown-callout {
--radius: 8px;
--current-color: purple;
/* border-start-end-radius: var(--radius); */
/* border-start-start-radius: var(--radius); */
border-left: 3px solid var(--current-color);
margin-bottom: 1em;
margin-top: 1em;
}
.markdown-callout-tip {
--text-color: whitesmoke;
--current-color: #50e3c2;
}
.markdown-callout-note {
--text-color: whitesmoke;
--current-color: #0070f3;
}
.markdown-callout-important {
--text-color: whitesmoke;
--current-color: #7928ca;
}
.markdown-callout-warning {
--current-color: #f5a623;
}
.markdown-callout-caution {
--current-color: #e60000;
}
.note-plus-preview {
display:flex;
flex-direction:column;
align-items: flex-start;
width:95%;
margin-left: 20px;
margin-top:20px;
/*background-color: rgba(255,0,0,0.5)!important;*/
}
/* allowed to be selected*/
h1, h2, h3, h4, h5, h6,a, p, ul, ol, dl, blockquote,details,summary {
pointer-events:auto;
user-select:text;
}
h1, h2, h3, h4, h5, h6 {
display:inline-block;
margin: 0;
padding: 0;
font-weight: normal;
}
p, ul, ol, dl, blockquote {
margin: 0.3em;
padding: 0;
}
ul, ol {
padding-left: 1em;
}
a {
color: inherit;
text-decoration: none;
pointer-events: all;
color: cyan;
}
img {
padding: 1em 0;
max-width: 100%;
}
iframe {
max-width: 100%;
height: auto;
border:none;
pointer-events:all;
}
blockquote {
border-left: 4px solid #ccc;
padding-left: 1em;
margin-left: 0;
font-style: italic;
}
pre, code {
font-family: monospace;
}
table {
border-collapse: collapse;
width: 100%;
border-bottom: 1px solid #000;
margin: 1em 0;
}
th, td {
border-left: 1px solid #000;
border-right: 1px solid #000;
padding: 8px;
text-align: left;
}
th {
border: 1px solid #000;
background-color: rgba(0,0,0,0.5);
}
input[type="checkbox"] {
margin-right: 10px;
}
`