Skip to content

Commit 90791ed

Browse files
wxtimwxtim
committed
wip
1 parent 45d5229 commit 90791ed

File tree

4 files changed

+579
-42
lines changed

4 files changed

+579
-42
lines changed

‎package.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,12 +39,16 @@
3939
"graphql-tag": "2.12.6",
4040
"lodash-es": "4.17.21",
4141
"mitt": "3.0.1",
42+
"myst-parser": "^1.5.12",
43+
"myst-theme": "^0.0.0",
44+
"myst-to-html": "^1.5.12",
4245
"mystjs": "^0.0.15",
4346
"nprogress": "1.0.0-1",
4447
"preact": "10.26.5",
4548
"simple-icons": "2.19.0",
4649
"subscriptions-transport-ws": "0.11.0",
4750
"svg-pan-zoom": "3.6.2",
51+
"unified": "^11.0.5",
4852
"vue": "3.5.13",
4953
"vue-i18n": "11.1.3",
5054
"vue-router": "4.5.0",

‎src/components/Markdown.vue

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,17 @@
2424
</template>
2525

2626
<script>
27-
import { MyST } from 'mystjs'
28-
29-
const md = new MyST()
27+
import { mystParser } from 'myst-parser'
28+
import { State, transform, mystToHast, formatHtml } from 'myst-to-html'
29+
import rehypeStringify from 'rehype-stringify'
30+
import { unified } from 'unified'
31+
32+
const pipe = unified()
33+
.use(mystParser)
34+
.use(transform, new State())
35+
.use(mystToHast)
36+
.use(formatHtml)
37+
.use(rehypeStringify)
3038
3139
export default {
3240
name: 'Markdown',
@@ -40,7 +48,7 @@ export default {
4048
4149
computed: {
4250
html () {
43-
return md.render(this.markdown)
51+
return pipe.processSync(this.markdown).value
4452
}
4553
}
4654
}

‎src/styles/cylc/_markdown.scss

Lines changed: 179 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,180 @@
1-
/**
2-
* Copyright (C) NIWA & British Crown (Met Office) & Contributors.
3-
*
4-
* This program is free software: you can redistribute it and/or modify
5-
* it under the terms of the GNU General Public License as published by
6-
* the Free Software Foundation, either version 3 of the License, or
7-
* (at your option) any later version.
8-
*
9-
* This program is distributed in the hope that it will be useful,
10-
* but WITHOUT ANY WARRANTY; without even the implied warranty of
11-
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12-
* GNU General Public License for more details.
13-
*
14-
* You should have received a copy of the GNU General Public License
15-
* along with this program. If not, see <http://www.gnu.org/licenses/>.
16-
*/
17-
18-
.markdown {
19-
p, ul, ol {
20-
&:not(:last-child) {
21-
margin-bottom: 0.8em;
22-
}
23-
}
24-
ul, ol {
25-
padding-left: 24px;
26-
}
27-
.v-theme--light & code {
28-
background-color: rgba(0, 0, 0, 0.05);
29-
}
30-
.v-theme--dark & code {
31-
background-color: rgba(255, 255, 255, 0.1);
32-
}
1+
// This is code taken from jupyter-book/mystmd project
2+
// https://github.com/jupyter-book/mystmd/blob/01efd316754aee61f0e95fb5b1c5c9b35a23c5b9/packages/myst-parser/myst.css
3+
// and modified to fit the needs of the Cylc project.
4+
// The original license is as follows:
5+
6+
// The MIT License (MIT)
7+
8+
// Copyright (c) 2024 Project Jupyter
9+
10+
// Permission is hereby granted, free of charge, to any person obtaining a copy
11+
// of this software and associated documentation files (the "Software"), to deal
12+
// in the Software without restriction, including without limitation the rights
13+
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
14+
// copies of the Software, and to permit persons to whom the Software is
15+
// furnished to do so, subject to the following conditions:
16+
17+
// The above copyright notice and this permission notice shall be included in all
18+
// copies or substantial portions of the Software.
19+
20+
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
21+
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
22+
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
23+
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
24+
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
25+
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
26+
// SOFTWARE.
27+
28+
aside.admonition {
29+
width: 95%;
30+
margin: 1.5625em auto;
31+
padding: 0 0.6rem 0.8rem !important;
32+
overflow: hidden;
33+
page-break-inside: avoid;
34+
border-left: 0.2rem solid #007bff;
35+
border-radius: 0.1rem;
36+
box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.05), 0 0 0.05rem rgba(0, 0, 0, 0.1);
37+
}
38+
39+
aside.admonition > p.admonition-title {
40+
position: relative;
41+
margin: 0 -0.6rem !important;
42+
/* Changed the final from 2rem, without icon */
43+
padding: 0.4rem 0.6rem 0.4rem 1rem;
44+
font-weight: 700;
45+
background-color: #e7f2fa;
46+
}
47+
48+
aside.admonition.attention {
49+
border-left-color: #fd7e14;
50+
}
51+
aside.admonition.attention > header {
52+
background-color: #ffedcc;
53+
}
54+
aside.admonition.caution {
55+
border-left-color: #fd7e14;
56+
}
57+
aside.admonition.caution > header {
58+
background-color: #ffedcc;
59+
}
60+
aside.admonition.warning {
61+
border-left-color: #dc3545;
62+
}
63+
aside.admonition.warning > header {
64+
background-color: #fdf3f2;
65+
}
66+
aside.admonition.danger {
67+
border-left-color: #dc3545;
68+
}
69+
aside.admonition.danger > header {
70+
background-color: #fdf3f2;
71+
}
72+
aside.admonition.error {
73+
border-left-color: #dc3545;
74+
}
75+
aside.admonition.error > header {
76+
background-color: #fdf3f2;
77+
}
78+
aside.admonition.hint {
79+
border-left-color: #ffc107;
80+
}
81+
aside.admonition.hint > header {
82+
background-color: #fff6dd;
83+
}
84+
aside.admonition.important {
85+
border-left-color: #007bff;
86+
}
87+
aside.admonition.important > header {
88+
background-color: #e7f2fa;
89+
}
90+
aside.admonition.note {
91+
border-left-color: #007bff;
92+
}
93+
aside.admonition.note > header {
94+
background-color: #e7f2fa;
95+
}
96+
aside.admonition.tip {
97+
border-left-color: #ffc107;
98+
}
99+
aside.admonition.tip > header {
100+
background-color: #fff6dd;
101+
}
102+
103+
aside.admonition > p {
104+
padding: 0 1.4rem;
105+
}
106+
107+
abbr {
108+
text-decoration: none;
109+
border-bottom: 1px solid #ddd;
110+
cursor: help;
111+
}
112+
113+
a {
114+
color: #0071bc;
115+
text-decoration: none;
116+
}
117+
118+
a:hover {
119+
text-decoration: underline;
120+
}
121+
122+
code {
123+
font-size: 95%;
124+
font-family: monospace;
125+
color: #e83e8c;
126+
word-wrap: break-word;
127+
}
128+
129+
pre {
130+
width: calc(100% - 20px - 3em);
131+
padding: 10px;
132+
background-color: #fafafa;
133+
color: #222;
134+
line-height: 1.2em;
135+
border: 1px solid #c9c9c9;
136+
margin: 1.5em 0;
137+
box-shadow: 1px 1px 1px #d8d8d8;
138+
}
139+
pre > code {
140+
font-size: 87.5%;
141+
font-family: monospace;
142+
color: #222;
143+
}
144+
145+
hr {
146+
width: 80%;
147+
margin: 20px auto;
148+
}
149+
150+
blockquote {
151+
color: rgb(90, 90, 90);
152+
padding: 0.1rem 1rem;
153+
border-left: 0.2rem solid #aaa;
154+
}
155+
156+
figure {
157+
text-align: center;
158+
}
159+
160+
figure > figcaption {
161+
color: rgb(90, 90, 90);
162+
font-size: 90%;
163+
}
164+
165+
figure > figcaption .caption-number {
166+
font-weight: 700;
167+
padding-right: 5px;
168+
}
169+
170+
.math .MathJax {
171+
outline: none;
172+
}
173+
div.math.numbered {
174+
width: calc(100% - 50px);
175+
margin: 0 auto;
176+
}
177+
div.math.numbered:before {
178+
content: '(' attr(number) ')';
179+
float: right;
33180
}

0 commit comments

Comments
 (0)