From 2fdfa7a21a7b579e23be376b2984357f0092f147 Mon Sep 17 00:00:00 2001 From: Brian Powell Jr Date: Tue, 15 Oct 2024 07:55:03 -0400 Subject: [PATCH 1/7] start branch --- .vscode/settings.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index dc1a054c6c..75e3a44780 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -8,7 +8,7 @@ "vue" ], "editor.codeActionsOnSave": { - "source.fixAll.eslint": true + "source.fixAll.eslint": "explicit" }, "i18n-ally.localesPaths": [ "server/locales" From 8039f22340d6707af22ce82f11aeb8b1bb89c89f Mon Sep 17 00:00:00 2001 From: Brian Powell Jr Date: Tue, 15 Oct 2024 21:08:54 -0400 Subject: [PATCH 2/7] Feat: Added missing Asciidoc blockquotes to markdown editor --- client/components/editor/editor-asciidoc.vue | 9 ++-- client/components/editor/editor-markdown.vue | 10 ++++ client/themes/default/scss/app.scss | 54 +++++++++++++++++--- 3 files changed, 62 insertions(+), 11 deletions(-) diff --git a/client/components/editor/editor-asciidoc.vue b/client/components/editor/editor-asciidoc.vue index 296b2414b9..27f815a4f7 100644 --- a/client/components/editor/editor-asciidoc.vue +++ b/client/components/editor/editor-asciidoc.vue @@ -51,12 +51,12 @@ v-list-item(@click='insertBeforeEachLine({ content: `NOTE: `})') v-list-item-action v-icon(color='blue') mdi-alpha-n-box-outline - v-list-item-title {{'Note blockquote'}} + v-list-item-title {{'Note Blockquote'}} v-divider v-list-item(@click='insertBeforeEachLine({ content: `TIP: `})') v-list-item-action v-icon(color='success') mdi-alpha-t-box-outline - v-list-item-title {{'Tip blockquote'}} + v-list-item-title {{'Tip Blockquote'}} v-divider v-list-item(@click='insertBeforeEachLine({ content: `WARNING: `})') v-list-item-action @@ -66,11 +66,12 @@ v-list-item(@click='insertBeforeEachLine({ content: `CAUTION: `})') v-list-item-action v-icon(color='purple') mdi-alpha-c-box-outline - v-list-item-title {{'Caution blockquote'}} + v-list-item-title {{'Caution Blockquote'}} + v-divider v-list-item(@click='insertBeforeEachLine({ content: `IMPORTANT: `})') v-list-item-action v-icon(color='error') mdi-alpha-i-box-outline - v-list-item-title {{'Important blockquote'}} + v-list-item-title {{'Important Blockquote'}} v-divider template(v-if='$vuetify.breakpoint.mdAndUp') v-spacer diff --git a/client/components/editor/editor-markdown.vue b/client/components/editor/editor-markdown.vue index 4ca6e192c5..32071f87fc 100644 --- a/client/components/editor/editor-markdown.vue +++ b/client/components/editor/editor-markdown.vue @@ -63,11 +63,21 @@ v-icon(color='success') mdi-alpha-s-box-outline v-list-item-title {{$t('editor:markup.blockquoteSuccess')}} v-divider + v-list-item(@click='insertBeforeEachLine({ content: `> `, after: `{.is-tip}`})') + v-list-item-action + v-icon(color='success') mdi-alpha-t-box-outline + v-list-item-title {{'Tip Blockquote'}} + v-divider v-list-item(@click='insertBeforeEachLine({ content: `> `, after: `{.is-warning}`})') v-list-item-action v-icon(color='warning') mdi-alpha-w-box-outline v-list-item-title {{$t('editor:markup.blockquoteWarning')}} v-divider + v-list-item(@click='insertBeforeEachLine({ content: `> `, after: `{.is-caution}`})') + v-list-item-action + v-icon(color='purple') mdi-alpha-c-box-outline + v-list-item-title {{'Caution Blockquote'}} + v-divider v-list-item(@click='insertBeforeEachLine({ content: `> `, after: `{.is-danger}`})') v-list-item-action v-icon(color='error') mdi-alpha-e-box-outline diff --git a/client/themes/default/scss/app.scss b/client/themes/default/scss/app.scss index c01faf1245..8a36b8738a 100644 --- a/client/themes/default/scss/app.scss +++ b/client/themes/default/scss/app.scss @@ -242,9 +242,9 @@ } blockquote { - padding: 0 1rem 1rem 1rem; + padding: 0 1rem 0.8rem 1rem; background-color: mc('blue-grey', '50'); - border-left: 55px solid mc('blue-grey', '500'); + border-left: 52px solid mc('blue-grey', '500'); border-radius: .5rem; margin: 1rem 0; position: relative; @@ -255,12 +255,12 @@ &::before { display: inline-block; - font: normal normal normal 24px/1 "Material Design Icons", sans-serif; + font: normal normal normal 28px/1 "Material Design Icons", sans-serif; position: absolute; margin-top: -12px; top: 50%; - left: -38px; - color: rgba(255, 255, 255, .7); + left: -39px; + color: rgba(255, 255, 255, 0.85); content: "\F0757"; } @@ -354,6 +354,46 @@ border-color: mc('green', '500'); } } + &.is-tip { + background-color: mc('green', '50'); + border-color: mc('green', '300'); + color: mc('green', '900'); + + &::before { + content: "\F0335"; + } + + code:not([class^="language-"]) { + background-color: mc('green', '50'); + color: mc('green', '800'); + } + + @at-root .theme--dark & { + background-color: mc('green', '900'); + color: mc('green', '50'); + border-color: mc('green', '500'); + } + } + &.is-caution { + background-color: mc('purple', '50'); + border-color: mc('purple', '300'); + color: mc('purple', '900'); + + &::before { + content: "\f0238"; + } + + code:not([class^="language-"]) { + background-color: mc('purple', '50'); + color: mc('purple', '800'); + } + + @at-root .theme--dark & { + background-color: mc('purple', '900'); + color: mc('purple', '50'); + border-color: mc('purple', '500'); + } + } } // --------------------------------- @@ -378,7 +418,7 @@ &::before { display: inline-block; - font: normal normal normal 24px/1 "Material Design Icons", sans-serif !important; + font: normal normal normal 28px/1 "Material Design Icons", sans-serif !important; } } @@ -685,7 +725,7 @@ display:inline-block; vertical-align:top; padding-top:0; - + &:first-child { width: 100%; } From b201f3ac3674aa560914723a22feba2117fd7d09 Mon Sep 17 00:00:00 2001 From: Brian Powell Jr Date: Tue, 29 Oct 2024 01:08:44 -0400 Subject: [PATCH 3/7] Added styling for SUCCESS AsciiDoc admonition box. --- client/themes/default/scss/app.scss | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/client/themes/default/scss/app.scss b/client/themes/default/scss/app.scss index 8a36b8738a..04daca22ed 100644 --- a/client/themes/default/scss/app.scss +++ b/client/themes/default/scss/app.scss @@ -445,6 +445,24 @@ } } } + &.success { + td.icon { + background-color: mc('green', '300'); + color: mc('green', '50'); + &::before { + content: "\F0E1E"; + } + } + td.content { + color: darken(mc('green', '900'), 10%); + background-color: mc('green', '50'); + + @at-root .theme--dark & { + background-color: mc('green', '900'); + color: mc('green', '50'); + } + } + } &.tip { td.icon { background-color: mc('green', '300'); From 101dd11630560df37208e09cd4cda68e832c2332 Mon Sep 17 00:00:00 2001 From: Brian Powell Jr Date: Tue, 29 Oct 2024 23:36:45 -0400 Subject: [PATCH 4/7] Add SUCCESS blockquote option to adoc editor --- client/components/editor/editor-asciidoc.vue | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/client/components/editor/editor-asciidoc.vue b/client/components/editor/editor-asciidoc.vue index 27f815a4f7..b72fc2d8ab 100644 --- a/client/components/editor/editor-asciidoc.vue +++ b/client/components/editor/editor-asciidoc.vue @@ -53,6 +53,11 @@ v-icon(color='blue') mdi-alpha-n-box-outline v-list-item-title {{'Note Blockquote'}} v-divider + v-list-item(@click='insertBeforeEachLine({ content: `SUCCESS: `})') + v-list-item-action + v-icon(color='success') mdi-alpha-s-box-outline + v-list-item-title {{'Success Blockquote'}} + v-divider v-list-item(@click='insertBeforeEachLine({ content: `TIP: `})') v-list-item-action v-icon(color='success') mdi-alpha-t-box-outline From 155087ac6f5b00ae24468facf37bd7bb42b06385 Mon Sep 17 00:00:00 2001 From: Brian Powell Jr Date: Fri, 1 Nov 2024 01:48:37 -0400 Subject: [PATCH 5/7] Added basic asciidoc extension for [SUCCESS] block admonition. Need to fix corner radii not rendering --- client/components/editor/editor-asciidoc.vue | 5 ++++- client/modules/asciidoc-extended.js | 17 +++++++++++++++++ .../modules/rendering/asciidoc-core/renderer.js | 5 ++++- 3 files changed, 25 insertions(+), 2 deletions(-) create mode 100644 client/modules/asciidoc-extended.js diff --git a/client/components/editor/editor-asciidoc.vue b/client/components/editor/editor-asciidoc.vue index b72fc2d8ab..8c1d590851 100644 --- a/client/components/editor/editor-asciidoc.vue +++ b/client/components/editor/editor-asciidoc.vue @@ -163,6 +163,8 @@ import cmFold from './common/cmFold' // INIT // ======================================== const asciidoctor = require('asciidoctor')() +const registry = asciidoctor.Extensions.create() +require('../../modules/asciidoc-extended')(registry) const cheerio = require('cheerio') // Platform detection @@ -222,7 +224,8 @@ export default { attributes: { showtitle: true, icons: 'font' - } + }, + 'extension_registry': registry }) const $ = cheerio.load(html, { decodeEntities: true diff --git a/client/modules/asciidoc-extended.js b/client/modules/asciidoc-extended.js new file mode 100644 index 0000000000..2a2aa84d57 --- /dev/null +++ b/client/modules/asciidoc-extended.js @@ -0,0 +1,17 @@ +// Asciidoctor API Documentation for HTML5Converter: +// https://www.rubydoc.info/gems/asciidoctor/2.0.23/Asciidoctor/Converter/Html5Converter#convert_admonition-instance_method + +module.exports = function (registry) { + // Success Admonition block rendering + // [SUCCESS] + // + registry.block(function () { + var self = this + self.named('SUCCESS') + self.onContext('paragraph') + self.process(function (parent, reader) { + var lines = reader.getLines() + return self.createBlock(parent, 'admonition', lines, {name: 'success', textlabel: 'Success'}) + }) + }) +} diff --git a/server/modules/rendering/asciidoc-core/renderer.js b/server/modules/rendering/asciidoc-core/renderer.js index e37217d875..d5824c6f4c 100644 --- a/server/modules/rendering/asciidoc-core/renderer.js +++ b/server/modules/rendering/asciidoc-core/renderer.js @@ -1,4 +1,6 @@ const asciidoctor = require('asciidoctor')() +const registry = asciidoctor.Extensions.create() +require('../../../../client/modules/asciidoc-extended')(registry) const cheerio = require('cheerio') module.exports = { @@ -9,7 +11,8 @@ module.exports = { attributes: { showtitle: true, icons: 'font' - } + }, + 'extension_registry': registry }) const $ = cheerio.load(html, { From 378481e14fbe3509f80039470a908a1d943c4818 Mon Sep 17 00:00:00 2001 From: Brian Powell Jr Date: Sun, 3 Nov 2024 11:00:12 -0500 Subject: [PATCH 6/7] Changed SUCCESS blockquote adoc option to return a block as AsciiDoctor.js currently doesn't support inline extensions on paragraph content --- client/components/editor/editor-asciidoc.vue | 2 +- client/themes/default/scss/app.scss | 17 +++++++++++------ 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/client/components/editor/editor-asciidoc.vue b/client/components/editor/editor-asciidoc.vue index 8c1d590851..8a134c1068 100644 --- a/client/components/editor/editor-asciidoc.vue +++ b/client/components/editor/editor-asciidoc.vue @@ -53,7 +53,7 @@ v-icon(color='blue') mdi-alpha-n-box-outline v-list-item-title {{'Note Blockquote'}} v-divider - v-list-item(@click='insertBeforeEachLine({ content: `SUCCESS: `})') + v-list-item(@click='insertBeforeEachLine({ content: `[SUCCESS]\n`})') v-list-item-action v-icon(color='success') mdi-alpha-s-box-outline v-list-item-title {{'Success Blockquote'}} diff --git a/client/themes/default/scss/app.scss b/client/themes/default/scss/app.scss index 04daca22ed..e03acca261 100644 --- a/client/themes/default/scss/app.scss +++ b/client/themes/default/scss/app.scss @@ -445,14 +445,15 @@ } } } + &.success { - td.icon { - background-color: mc('green', '300'); - color: mc('green', '50'); - &::before { - content: "\F0E1E"; - } + td.icon { + background-color: mc('green', '300'); + color: mc('green', '50'); + &::before { + content: "\F0E1E"; } + } td.content { color: darken(mc('green', '900'), 10%); background-color: mc('green', '50'); @@ -463,6 +464,7 @@ } } } + &.tip { td.icon { background-color: mc('green', '300'); @@ -481,6 +483,7 @@ } } } + &.warning { background-color: transparent !important; @@ -501,6 +504,7 @@ } } } + &.caution { td.icon { background-color: mc('purple', '300'); @@ -519,6 +523,7 @@ } } } + &.important { td.icon { background-color: mc('red', '300'); From 32750e0dafb6a4beaadd9fc5c066b5ef047861b3 Mon Sep 17 00:00:00 2001 From: Brian Powell Jr Date: Sun, 3 Nov 2024 11:37:26 -0500 Subject: [PATCH 7/7] Fixed issue with admonition block backgroud color appearing in rounded corners. Updated rest of admonition block styles to explicitly set the background color to transparent Signed-off-by: Brian Powell Jr --- client/themes/default/scss/app.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/client/themes/default/scss/app.scss b/client/themes/default/scss/app.scss index e03acca261..2f503ea9e1 100644 --- a/client/themes/default/scss/app.scss +++ b/client/themes/default/scss/app.scss @@ -428,6 +428,8 @@ } &.note { + background-color: transparent !important; + td.icon { background-color: mc('blue', '300'); color: mc('blue', '50'); @@ -447,6 +449,8 @@ } &.success { + background-color: transparent !important; + td.icon { background-color: mc('green', '300'); color: mc('green', '50'); @@ -466,6 +470,7 @@ } &.tip { + background-color: transparent !important; td.icon { background-color: mc('green', '300'); color: mc('green', '50'); @@ -506,6 +511,8 @@ } &.caution { + background-color: transparent !important; + td.icon { background-color: mc('purple', '300'); color: mc('purple', '50'); @@ -525,6 +532,8 @@ } &.important { + background-color: transparent !important; + td.icon { background-color: mc('red', '300'); color: mc('red', '50');