Skip to content

Commit 10b256e

Browse files
GaspardKiriraGaspardKirira
committed
feat: render SVG extension outputs in note cells
1 parent 6be9889 commit 10b256e

3 files changed

Lines changed: 99 additions & 24 deletions

File tree

‎assets/index.html‎

Lines changed: 68 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<link
1414
rel="icon"
1515
type="image/svg+xml"
16-
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='14' fill='%23f37726'/%3E%3Cpath d='M18 14h10l7 23 7-23h10L40 50H30L18 14z' fill='white'/%3E%3C/svg%3E"
16+
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none'%3E%3Ccircle cx='60' cy='60' r='58' fill='%23140b05'/%3E%3Ccircle cx='60' cy='60' r='57' stroke='%23f37726' stroke-opacity='.28' stroke-width='2'/%3E%3Cdefs%3E%3ClinearGradient id='left' x1='28' y1='24' x2='58' y2='96' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0%25' stop-color='%23ffe0c2'/%3E%3Cstop offset='55%25' stop-color='%23ff9a4d'/%3E%3Cstop offset='100%25' stop-color='%23f37726'/%3E%3C/linearGradient%3E%3ClinearGradient id='right' x1='92' y1='24' x2='62' y2='96' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0%25' stop-color='%23f37726'/%3E%3Cstop offset='100%25' stop-color='%23a94300'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='28,24 45,24 60,96 50,96' fill='url(%23left)'/%3E%3Cpolygon points='92,24 75,24 60,96 70,96' fill='url(%23right)'/%3E%3Cline x1='38' y1='50' x2='51' y2='96' stroke='%23ffd1ad' stroke-width='3' stroke-linecap='round' opacity='.65'/%3E%3C/svg%3E"
1717
/>
1818

1919
<script>
@@ -50,7 +50,73 @@
5050
<!-- ============ TOP APP BAR (global, minimal) ============ -->
5151
<header class="vn-AppBar">
5252
<div class="vn-AppBar__brand">
53-
<span class="vn-AppBar__logo" aria-hidden="true">V</span>
53+
<svg
54+
class="vn-AppBar__logo"
55+
viewBox="0 0 120 120"
56+
fill="none"
57+
xmlns="http://www.w3.org/2000/svg"
58+
aria-hidden="true"
59+
>
60+
<circle cx="60" cy="60" r="58" fill="#140b05" />
61+
62+
<circle
63+
cx="60"
64+
cy="60"
65+
r="57"
66+
stroke="#f37726"
67+
stroke-opacity="0.28"
68+
stroke-width="2"
69+
/>
70+
71+
<defs>
72+
<linearGradient
73+
id="appbar-logo-left"
74+
x1="28"
75+
y1="24"
76+
x2="58"
77+
y2="96"
78+
gradientUnits="userSpaceOnUse"
79+
>
80+
<stop offset="0%" stop-color="#ffe0c2" />
81+
<stop offset="55%" stop-color="#ff9a4d" />
82+
<stop offset="100%" stop-color="#f37726" />
83+
</linearGradient>
84+
85+
<linearGradient
86+
id="appbar-logo-right"
87+
x1="92"
88+
y1="24"
89+
x2="62"
90+
y2="96"
91+
gradientUnits="userSpaceOnUse"
92+
>
93+
<stop offset="0%" stop-color="#f37726" />
94+
<stop offset="100%" stop-color="#a94300" />
95+
</linearGradient>
96+
</defs>
97+
98+
<polygon
99+
points="28,24 45,24 60,96 50,96"
100+
fill="url(#appbar-logo-left)"
101+
/>
102+
103+
<polygon
104+
points="92,24 75,24 60,96 70,96"
105+
fill="url(#appbar-logo-right)"
106+
/>
107+
108+
<line
109+
x1="38"
110+
y1="50"
111+
x2="51"
112+
y2="96"
113+
stroke="#ffd1ad"
114+
stroke-width="3"
115+
stroke-linecap="round"
116+
opacity="0.65"
117+
/>
118+
</svg>
119+
54120
<span class="vn-AppBar__title">Vix Note</span>
55121
</div>
56122

‎assets/note.css‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -271,15 +271,11 @@ input {
271271
padding: 0 12px 0 4px;
272272
}
273273
.vn-AppBar__logo {
274-
display: grid;
275-
place-items: center;
276-
width: 19px;
277-
height: 19px;
278-
border-radius: 5px;
279-
background: var(--vn-brand1);
280-
color: #fff;
281-
font-weight: 800;
282-
font-size: 11px;
274+
display: block;
275+
width: 22px;
276+
height: 22px;
277+
object-fit: contain;
278+
flex: 0 0 auto;
283279
}
284280
.vn-AppBar__title {
285281
font-weight: 650;
@@ -1742,18 +1738,22 @@ input {
17421738
word-break: break-word;
17431739
}
17441740
.vn-Output--svg {
1745-
padding: 8px 10px 12px;
1746-
overflow: auto;
1741+
width: 100%;
1742+
padding: 0;
1743+
overflow-x: auto;
1744+
border: 1px solid var(--vn-border1);
1745+
border-radius: 10px;
1746+
background: #0f1215;
17471747
}
17481748

17491749
.vn-Output__svg {
17501750
display: block;
1751-
width: 420px;
1751+
width: 560px;
17521752
max-width: 100%;
17531753
height: auto;
1754-
border: 1px solid var(--vn-border1);
1754+
border: 0;
17551755
border-radius: 10px;
1756-
background: #0f1215;
1756+
background: transparent;
17571757
}
17581758
.vn-Output--stdout {
17591759
color: var(--vn-content1);

‎assets/note.js‎

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -161,22 +161,31 @@
161161
};
162162

163163
const VIX_LOGO_SVG = `<svg viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
164-
<circle cx="60" cy="60" r="58" fill="#07110c"/>
165-
<circle cx="60" cy="60" r="57" stroke="#22c55e" stroke-opacity="0.22" stroke-width="2"/>
164+
<circle cx="60" cy="60" r="58" fill="#140b05"/>
165+
<circle cx="60" cy="60" r="57" stroke="#f37726" stroke-opacity="0.28" stroke-width="2"/>
166166
<defs>
167167
<linearGradient id="left" x1="28" y1="24" x2="58" y2="96" gradientUnits="userSpaceOnUse">
168-
<stop offset="0%" stop-color="#d4fcd4"/>
169-
<stop offset="55%" stop-color="#4ade80"/>
170-
<stop offset="100%" stop-color="#22c55e"/>
168+
<stop offset="0%" stop-color="#ffe0c2"/>
169+
<stop offset="55%" stop-color="#ff9a4d"/>
170+
<stop offset="100%" stop-color="#f37726"/>
171171
</linearGradient>
172172
<linearGradient id="right" x1="92" y1="24" x2="62" y2="96" gradientUnits="userSpaceOnUse">
173-
<stop offset="0%" stop-color="#22c55e"/>
174-
<stop offset="100%" stop-color="#15803d"/>
173+
<stop offset="0%" stop-color="#f37726"/>
174+
<stop offset="100%" stop-color="#a94300"/>
175175
</linearGradient>
176176
</defs>
177177
<polygon points="28,24 45,24 60,96 50,96" fill="url(#left)"/>
178178
<polygon points="92,24 75,24 60,96 70,96" fill="url(#right)"/>
179-
<line x1="38" y1="50" x2="51" y2="96" stroke="#bbf7d0" stroke-width="3" stroke-linecap="round" opacity="0.65"/>
179+
<line
180+
x1="38"
181+
y1="50"
182+
x2="51"
183+
y2="96"
184+
stroke="#ffd1ad"
185+
stroke-width="3"
186+
stroke-linecap="round"
187+
opacity="0.65"
188+
/>
180189
</svg>`;
181190

182191
function svgToDataUri(svg) {

0 commit comments

Comments
 (0)