Upgraded Katex to v0.13.

Upgraded Mermaid to v8.9.
Removed StackEdit v4 support.
This commit is contained in:
Benoit Schweblin 2021-03-29 17:33:29 +01:00
parent 0f0c9bed6c
commit c8987a8e84
8 changed files with 646 additions and 1376 deletions

View File

@ -1,17 +1,6 @@
FROM benweet/stackedit-base
RUN mkdir -p /opt/stackedit/stackedit_v4
WORKDIR /opt/stackedit/stackedit_v4
ENV SERVE_V4 true
ENV V4_VERSION 4.3.22
RUN npm pack stackedit@$V4_VERSION \
&& tar xzf stackedit-*.tgz --strip 1 \
&& yarn \
&& yarn cache clean \
&& rm -rf ~/.cache/bower \
&& rm -rf ~/.local/share/bower
RUN mkdir -p /opt/stackedit
WORKDIR /opt/stackedit
COPY package*json /opt/stackedit/

View File

@ -11,7 +11,7 @@ const express = require('express');
const app = express();
require('./server')(app, process.env.SERVE_V4);
require('./server')(app);
const port = parseInt(process.env.PORT || 8080, 10);
const httpServer = http.createServer(app);

1069
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -39,7 +39,7 @@
"handlebars": "^4.0.10",
"indexeddbshim": "^3.6.2",
"js-yaml": "^3.11.0",
"katex": "^v0.10.2",
"katex": "^0.13.0",
"markdown-it": "^8.4.1",
"markdown-it-abbr": "^1.0.4",
"markdown-it-deflist": "^2.0.2",
@ -50,7 +50,7 @@
"markdown-it-pandoc-renderer": "1.1.3",
"markdown-it-sub": "^1.0.0",
"markdown-it-sup": "^1.0.0",
"mermaid": "^8.0.0-rc.8",
"mermaid": "^8.9.2",
"mousetrap": "^1.6.1",
"normalize-scss": "^7.0.1",
"prismjs": "^1.6.0",
@ -100,7 +100,7 @@
"jest": "^23.0.0",
"jest-raw-loader": "^1.0.1",
"jest-serializer-vue": "^0.3.0",
"node-sass": "^4.9.0",
"node-sass": "^4.0.0",
"npm-bump": "^0.0.23",
"offline-plugin": "^5.0.3",
"opn": "^4.0.2",

View File

@ -10,7 +10,7 @@ const conf = require('./conf');
const resolvePath = pathToResolve => path.join(__dirname, '..', pathToResolve);
module.exports = (app, serveV4) => {
module.exports = (app) => {
if (process.env.NODE_ENV === 'production') {
// Enable CORS for fonts
app.all('*', (req, res, next) => {
@ -33,14 +33,6 @@ module.exports = (app, serveV4) => {
extended: false,
}), user.paypalIpn);
if (serveV4) {
/* eslint-disable global-require, import/no-unresolved */
app.post('/sshPublish', require('../stackedit_v4/app/ssh').publish);
app.post('/picasaImportImg', require('../stackedit_v4/app/picasa').importImg);
app.get('/downloadImport', require('../stackedit_v4/app/download').importPublic);
/* eslint-enable global-require, import/no-unresolved */
}
// Serve landing.html
app.get('/', (req, res) => res.sendFile(resolvePath('static/landing/index.html')));
// Serve sitemap.xml
@ -53,13 +45,6 @@ module.exports = (app, serveV4) => {
// Serve static resources
if (process.env.NODE_ENV === 'production') {
if (serveV4) {
// Serve editor.html in /viewer
app.get('/editor', (req, res) => res.sendFile(resolvePath('stackedit_v4/views/editor.html')));
// Serve viewer.html in /viewer
app.get('/viewer', (req, res) => res.sendFile(resolvePath('stackedit_v4/views/viewer.html')));
}
// Serve index.html in /app
app.get('/app', (req, res) => res.sendFile(resolvePath('dist/index.html')));
@ -74,12 +59,5 @@ module.exports = (app, serveV4) => {
}));
app.use(serveStatic(resolvePath('dist')));
if (serveV4) {
app.use(serveStatic(path.dirname(resolvePath('stackedit_v4/public/cache.manifest'))));
// Error 404
app.use((req, res) => res.status(404).sendFile(resolvePath('stackedit_v4/views/error_404.html')));
}
}
};

View File

@ -1,9 +1,4 @@
import mermaidUtils from 'mermaid/src/utils';
import flowRenderer from 'mermaid/src/diagrams/flowchart/flowRenderer';
import sequenceRenderer from 'mermaid/src/diagrams/sequence/sequenceRenderer';
import ganttRenderer from 'mermaid/src/diagrams/gantt/ganttRenderer';
import classRenderer from 'mermaid/src/diagrams/class/classRenderer';
import gitGraphRenderer from 'mermaid/src/diagrams/git/gitGraphRenderer';
import 'mermaid';
import extensionSvc from '../services/extensionSvc';
import utils from '../services/utils';
@ -11,6 +6,7 @@ const config = {
logLevel: 5,
startOnLoad: false,
arrowMarkerAbsolute: false,
theme: 'neutral',
flowchart: {
htmlLabels: true,
curve: 'linear',
@ -41,51 +37,27 @@ const config = {
numberSectionStyles: 4,
axisFormat: '%Y-%m-%d',
},
class: {},
git: {},
};
const containerElt = document.createElement('div');
containerElt.className = 'hidden-rendering-container';
document.body.appendChild(containerElt);
const render = (elt) => {
const svgId = `mermaid-svg-${utils.uid()}`;
const txt = elt.textContent;
containerElt.innerHTML = `<div class="mermaid"><svg xmlns="http://www.w3.org/2000/svg" id="${svgId}"><g></g></svg></div>`;
let init = () => {
window.mermaid.initialize(config);
init = () => {};
};
const render = (elt) => {
try {
const graphType = mermaidUtils.detectType(txt);
switch (graphType) {
case 'git':
config.flowchart.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
gitGraphRenderer.setConf(config.git);
gitGraphRenderer.draw(txt, svgId, false);
break;
case 'flowchart':
config.flowchart.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
flowRenderer.setConf(config.flowchart);
flowRenderer.draw(txt, svgId, false);
break;
case 'sequence':
config.sequence.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
sequenceRenderer.setConf(config.sequence);
sequenceRenderer.draw(txt, svgId);
break;
case 'gantt':
config.gantt.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
ganttRenderer.setConf(config.gantt);
ganttRenderer.draw(txt, svgId);
break;
case 'class':
config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
classRenderer.setConf(config.class);
classRenderer.draw(txt, svgId);
break;
default:
throw new Error('Invalid graph type.');
}
elt.parentNode.replaceChild(containerElt.firstChild, elt);
init();
const svgId = `mermaid-svg-${utils.uid()}`;
window.mermaid.mermaidAPI.render(svgId, elt.textContent, () => {
while (elt.firstChild) {
elt.removeChild(elt.lastChild);
}
elt.appendChild(containerElt.querySelector(`#${svgId}`));
}, containerElt);
} catch (e) {
console.error(e); // eslint-disable-line no-console
}

View File

@ -1,5 +1,4 @@
import 'katex/dist/katex.css';
import './fonts.scss';
import './prism.scss';
import './mermaid.scss';
import './base.scss';

View File

@ -1,849 +0,0 @@
/* stylelint-disable color-hex-case, color-hex-length, rule-empty-line-before, comment-empty-line-before, comment-whitespace-inside, comment-no-empty */
@import './variables';
// neutral for light theme
// dark for dark theme
.mermaid {
font-size: 16px;
svg {
color: rgba(0, 0, 0, 0.75);
width: 100%;
max-width: 100%;
.app--dark & {
color: rgba(255, 255, 255, 0.75);
}
* {
font-family: $font-family-main;
}
}
.mermaid .label {
color: #333;
}
.node rect,
.node circle,
.node ellipse,
.node polygon {
fill: #eee;
stroke: #999;
stroke-width: 1px;
}
.node.clickable {
cursor: pointer;
}
.arrowheadPath {
fill: #333333;
}
.edgePath .path {
stroke: #666;
stroke-width: 1.5px;
}
.edgeLabel {
background-color: white;
}
.cluster rect {
fill: #eaf2fb !important;
stroke: #26a !important;
stroke-width: 1px !important;
}
.cluster text {
fill: #333;
}
div.mermaidTooltip {
position: absolute;
text-align: center;
max-width: 200px;
padding: 2px;
font-family: 'trebuchet ms', verdana, arial;
font-size: 12px;
background: #eaf2fb;
border: 1px solid #26a;
border-radius: 2px;
pointer-events: none;
z-index: 100;
}
.actor {
stroke: #999;
fill: #eee;
}
text.actor {
fill: #333;
stroke: none;
}
.actor-line {
stroke: #666;
}
.messageLine0 {
stroke-width: 1.5;
stroke-dasharray: '2 2';
marker-end: 'url(#arrowhead)';
stroke: #333;
}
.messageLine1 {
stroke-width: 1.5;
stroke-dasharray: '2 2';
stroke: #333;
}
#arrowhead {
fill: #333;
}
#crosshead path {
fill: #333 !important;
stroke: #333 !important;
}
.messageText {
fill: #333;
stroke: none;
}
.labelBox {
stroke: #999;
fill: #eee;
}
.labelText {
fill: white;
stroke: none;
}
.loopText {
fill: white;
stroke: none;
}
.loopLine {
stroke-width: 2;
stroke-dasharray: '2 2';
marker-end: 'url(#arrowhead)';
stroke: #999;
}
.note {
stroke: #777700;
fill: #ffa;
}
.noteText {
fill: black;
stroke: none;
font-family: 'trebuchet ms', verdana, arial;
font-size: 14px;
}
/** Section styling */
.section {
stroke: none;
opacity: 0.2;
}
.section0 {
fill: #80b3e6;
}
.section2 {
fill: #80b3e6;
}
.section1,
.section3 {
fill: white;
opacity: 0.2;
}
.sectionTitle0 {
fill: #333;
}
.sectionTitle1 {
fill: #333;
}
.sectionTitle2 {
fill: #333;
}
.sectionTitle3 {
fill: #333;
}
.sectionTitle {
text-anchor: start;
font-size: 11px;
}
/* Grid and axis */
.grid .tick {
stroke: #e6e6e6;
opacity: 0.3;
shape-rendering: crispEdges;
}
.grid path {
stroke-width: 0;
}
/* Today line */
.today {
fill: none;
stroke: #d42;
stroke-width: 2px;
}
/* Task styling */
/* Default task */
.task {
stroke-width: 2;
}
.taskText {
text-anchor: middle;
font-size: 11px;
}
.taskTextOutsideRight {
fill: #333;
text-anchor: start;
font-size: 11px;
}
.taskTextOutsideLeft {
fill: #333;
text-anchor: end;
font-size: 11px;
}
/* Specific task settings for the sections*/
.taskText0,
.taskText1,
.taskText2,
.taskText3 {
fill: white;
}
.task0,
.task1,
.task2,
.task3 {
fill: #26a;
stroke: #1a4d80;
}
.taskTextOutside0,
.taskTextOutside2 {
fill: #333;
}
.taskTextOutside1,
.taskTextOutside3 {
fill: #333;
}
/* Active task */
.active0,
.active1,
.active2,
.active3 {
fill: #eee;
stroke: #1a4d80;
}
.activeText0,
.activeText1,
.activeText2,
.activeText3 {
fill: #333 !important;
}
/* Completed task */
.done0,
.done1,
.done2,
.done3 {
stroke: #666;
fill: #bbb;
stroke-width: 2;
}
.doneText0,
.doneText1,
.doneText2,
.doneText3 {
fill: #333 !important;
}
/* Tasks on the critical line */
.crit0,
.crit1,
.crit2,
.crit3 {
stroke: #b1361b;
fill: #d42;
stroke-width: 2;
}
.activeCrit0,
.activeCrit1,
.activeCrit2,
.activeCrit3 {
stroke: #b1361b;
fill: #eee;
stroke-width: 2;
}
.doneCrit0,
.doneCrit1,
.doneCrit2,
.doneCrit3 {
stroke: #b1361b;
fill: #bbb;
stroke-width: 2;
cursor: pointer;
shape-rendering: crispEdges;
}
.doneCritText0,
.doneCritText1,
.doneCritText2,
.doneCritText3 {
fill: #333 !important;
}
.activeCritText0,
.activeCritText1,
.activeCritText2,
.activeCritText3 {
fill: #333 !important;
}
.titleText {
text-anchor: middle;
font-size: 18px;
fill: #333;
}
g.classGroup text {
fill: #999;
stroke: none;
font-family: 'trebuchet ms', verdana, arial;
font-size: 10px;
}
g.classGroup rect {
fill: #eee;
stroke: #999;
}
g.classGroup line {
stroke: #999;
stroke-width: 1;
}
.classLabel .box {
stroke: none;
stroke-width: 0;
fill: #eee;
opacity: 0.5;
}
.classLabel .label {
fill: #999;
font-size: 10px;
}
.relation {
stroke: #999;
stroke-width: 1;
fill: none;
}
#compositionStart {
fill: #999;
stroke: #999;
stroke-width: 1;
}
#compositionEnd {
fill: #999;
stroke: #999;
stroke-width: 1;
}
#aggregationStart {
fill: #eee;
stroke: #999;
stroke-width: 1;
}
#aggregationEnd {
fill: #eee;
stroke: #999;
stroke-width: 1;
}
#dependencyStart {
fill: #999;
stroke: #999;
stroke-width: 1;
}
#dependencyEnd {
fill: #999;
stroke: #999;
stroke-width: 1;
}
#extensionStart {
fill: #999;
stroke: #999;
stroke-width: 1;
}
#extensionEnd {
fill: #999;
stroke: #999;
stroke-width: 1;
}
.commit-id,
.commit-msg,
.branch-label {
fill: lightgrey;
color: lightgrey;
}
}
.app--dark .mermaid {
/* Flowchart variables */
/* Sequence Diagram variables */
/* Gantt chart variables */
.label {
color: #323D47;
}
.node rect,
.node circle,
.node ellipse,
.node polygon {
fill: #BDD5EA;
stroke: purple;
stroke-width: 1px;
}
.node.clickable {
cursor: pointer;
}
.arrowheadPath {
fill: lightgrey;
}
.edgePath .path {
stroke: lightgrey;
stroke-width: 1.5px;
}
.edgeLabel {
background-color: #e8e8e8;
}
.cluster rect {
fill: #6D6D65 !important;
stroke: rgba(255, 255, 255, 0.25) !important;
stroke-width: 1px !important;
}
.cluster text {
fill: #F9FFFE;
}
div.mermaidTooltip {
position: absolute;
text-align: center;
max-width: 200px;
padding: 2px;
font-family: 'trebuchet ms', verdana, arial;
font-size: 12px;
background: #6D6D65;
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 2px;
pointer-events: none;
z-index: 100;
}
.actor {
stroke: #81B1DB;
fill: #BDD5EA;
}
text.actor {
fill: black;
stroke: none;
}
.actor-line {
stroke: lightgrey;
}
.messageLine0 {
stroke-width: 1.5;
stroke-dasharray: '2 2';
marker-end: 'url(#arrowhead)';
stroke: lightgrey;
}
.messageLine1 {
stroke-width: 1.5;
stroke-dasharray: '2 2';
stroke: lightgrey;
}
#arrowhead {
fill: lightgrey;
}
#crosshead path {
fill: lightgrey !important;
stroke: lightgrey !important;
}
.messageText {
fill: lightgrey;
stroke: none;
}
.labelBox {
stroke: #81B1DB;
fill: #BDD5EA;
}
.labelText {
fill: lightgrey;
stroke: none;
}
.loopText {
fill: lightgrey;
stroke: none;
}
.loopLine {
stroke-width: 2;
stroke-dasharray: '2 2';
marker-end: 'url(#arrowhead)';
stroke: #81B1DB;
}
.note {
stroke: rgba(255, 255, 255, 0.25);
fill: #fff5ad;
}
.noteText {
fill: black;
stroke: none;
font-family: 'trebuchet ms', verdana, arial;
font-size: 14px;
}
/** Section styling */
.section {
stroke: none;
opacity: 0.2;
}
.section0 {
fill: rgba(255, 255, 255, 0.3);
}
.section2 {
fill: #EAE8B9;
}
.section1,
.section3 {
fill: white;
opacity: 0.2;
}
.sectionTitle0 {
fill: #F9FFFE;
}
.sectionTitle1 {
fill: #F9FFFE;
}
.sectionTitle2 {
fill: #F9FFFE;
}
.sectionTitle3 {
fill: #F9FFFE;
}
.sectionTitle {
text-anchor: start;
font-size: 11px;
}
/* Grid and axis */
.grid .tick {
stroke: lightgrey;
opacity: 0.3;
shape-rendering: crispEdges;
}
.grid path {
stroke-width: 0;
}
/* Today line */
.today {
fill: none;
stroke: #DB5757;
stroke-width: 2px;
}
/* Task styling */
/* Default task */
.task {
stroke-width: 2;
}
.taskText {
text-anchor: middle;
font-size: 11px;
}
.taskTextOutsideRight {
fill: #323D47;
text-anchor: start;
font-size: 11px;
}
.taskTextOutsideLeft {
fill: #323D47;
text-anchor: end;
font-size: 11px;
}
/* Specific task settings for the sections*/
.taskText0,
.taskText1,
.taskText2,
.taskText3 {
fill: #323D47;
}
.task0,
.task1,
.task2,
.task3 {
fill: #BDD5EA;
stroke: rgba(255, 255, 255, 0.5);
}
.taskTextOutside0,
.taskTextOutside2 {
fill: lightgrey;
}
.taskTextOutside1,
.taskTextOutside3 {
fill: lightgrey;
}
/* Active task */
.active0,
.active1,
.active2,
.active3 {
fill: #81B1DB;
stroke: rgba(255, 255, 255, 0.5);
}
.activeText0,
.activeText1,
.activeText2,
.activeText3 {
fill: #323D47 !important;
}
/* Completed task */
.done0,
.done1,
.done2,
.done3 {
stroke: grey;
fill: lightgrey;
stroke-width: 2;
}
.doneText0,
.doneText1,
.doneText2,
.doneText3 {
fill: #323D47 !important;
}
/* Tasks on the critical line */
.crit0,
.crit1,
.crit2,
.crit3 {
stroke: #E83737;
fill: #E83737;
stroke-width: 2;
}
.activeCrit0,
.activeCrit1,
.activeCrit2,
.activeCrit3 {
stroke: #E83737;
fill: #81B1DB;
stroke-width: 2;
}
.doneCrit0,
.doneCrit1,
.doneCrit2,
.doneCrit3 {
stroke: #E83737;
fill: lightgrey;
stroke-width: 2;
cursor: pointer;
shape-rendering: crispEdges;
}
.doneCritText0,
.doneCritText1,
.doneCritText2,
.doneCritText3 {
fill: #323D47 !important;
}
.activeCritText0,
.activeCritText1,
.activeCritText2,
.activeCritText3 {
fill: #323D47 !important;
}
.titleText {
text-anchor: middle;
font-size: 18px;
fill: #323D47;
}
g.classGroup text {
fill: purple;
stroke: none;
font-family: 'trebuchet ms', verdana, arial;
font-size: 10px;
}
g.classGroup rect {
fill: #BDD5EA;
stroke: purple;
}
g.classGroup line {
stroke: purple;
stroke-width: 1;
}
.classLabel .box {
stroke: none;
stroke-width: 0;
fill: #BDD5EA;
opacity: 0.5;
}
.classLabel .label {
fill: purple;
font-size: 10px;
}
.relation {
stroke: purple;
stroke-width: 1;
fill: none;
}
#compositionStart {
fill: purple;
stroke: purple;
stroke-width: 1;
}
#compositionEnd {
fill: purple;
stroke: purple;
stroke-width: 1;
}
#aggregationStart {
fill: #BDD5EA;
stroke: purple;
stroke-width: 1;
}
#aggregationEnd {
fill: #BDD5EA;
stroke: purple;
stroke-width: 1;
}
#dependencyStart {
fill: purple;
stroke: purple;
stroke-width: 1;
}
#dependencyEnd {
fill: purple;
stroke: purple;
stroke-width: 1;
}
#extensionStart {
fill: purple;
stroke: purple;
stroke-width: 1;
}
#extensionEnd {
fill: purple;
stroke: purple;
stroke-width: 1;
}
.commit-id,
.commit-msg,
.branch-label {
fill: lightgrey;
color: lightgrey;
}
}