Skip to content

Commit 1a8a08d

Browse files
jkheliljkhelil
committed
Fix front-matter display, syntax highlighting, and dark mode polish
- Unwrap comment-wrapped front matter (<!-- --- ... --- -->) in tracked content files so Hugo/Hextra parses them correctly. Synced directories (gitignored) are handled by the already-fixed sync.py FM_WRAPPER change. - Update readfile shortcode to strip front matter before rendering, preventing YAML from leaking into included pages. - Switch syntax highlighting from inline styles to CSS classes (noClasses: false) and add dual-theme Chroma stylesheet — Manni for light mode, Dracula for dark mode. - Fix pageinfo and alert shortcodes with dark mode CSS support. - Override hero-button shortcode to support primary/alt button variants with proper dark mode styling. - Override theme-toggle partial to remove "System" option, keeping only Light and Dark. Made-with: Cursor
1 parent a85c010 commit 1a8a08d

21 files changed

Lines changed: 737 additions & 418 deletions

‎assets/css/chroma.css‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
/* Generated using: hugo gen chromastyles --style=manni */
2+
3+
/* Background */ .bg { background-color:#f0f3f3; }
4+
/* PreWrapper */ .chroma { background-color:#f0f3f3;-webkit-text-size-adjust:none; }
5+
/* Error */ .chroma .err { color:#a00;background-color:#faa }
6+
/* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit }
7+
/* LineTableTD */ .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; }
8+
/* LineTable */ .chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; }
9+
/* LineHighlight */ .chroma .hl { background-color:#d8dada }
10+
/* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f }
11+
/* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f }
12+
/* Line */ .chroma .line { display:flex; }
13+
/* Keyword */ .chroma .k { color:#069;font-weight:bold }
14+
/* KeywordConstant */ .chroma .kc { color:#069;font-weight:bold }
15+
/* KeywordDeclaration */ .chroma .kd { color:#069;font-weight:bold }
16+
/* KeywordNamespace */ .chroma .kn { color:#069;font-weight:bold }
17+
/* KeywordPseudo */ .chroma .kp { color:#069 }
18+
/* KeywordReserved */ .chroma .kr { color:#069;font-weight:bold }
19+
/* KeywordType */ .chroma .kt { color:#078;font-weight:bold }
20+
/* NameAttribute */ .chroma .na { color:#309 }
21+
/* NameClass */ .chroma .nc { color:#0a8;font-weight:bold }
22+
/* NameConstant */ .chroma .no { color:#360 }
23+
/* NameDecorator */ .chroma .nd { color:#99f }
24+
/* NameEntity */ .chroma .ni { color:#999;font-weight:bold }
25+
/* NameException */ .chroma .ne { color:#c00;font-weight:bold }
26+
/* NameLabel */ .chroma .nl { color:#99f }
27+
/* NameNamespace */ .chroma .nn { color:#0cf;font-weight:bold }
28+
/* NameTag */ .chroma .nt { color:#309;font-weight:bold }
29+
/* NameBuiltin */ .chroma .nb { color:#366 }
30+
/* NameBuiltinPseudo */ .chroma .bp { color:#366 }
31+
/* NameVariable */ .chroma .nv { color:#033 }
32+
/* NameVariableClass */ .chroma .vc { color:#033 }
33+
/* NameVariableGlobal */ .chroma .vg { color:#033 }
34+
/* NameVariableInstance */ .chroma .vi { color:#033 }
35+
/* NameVariableMagic */ .chroma .vm { color:#033 }
36+
/* NameFunction */ .chroma .nf { color:#c0f }
37+
/* NameFunctionMagic */ .chroma .fm { color:#c0f }
38+
/* LiteralString */ .chroma .s { color:#c30 }
39+
/* LiteralStringAffix */ .chroma .sa { color:#c30 }
40+
/* LiteralStringBacktick */ .chroma .sb { color:#c30 }
41+
/* LiteralStringChar */ .chroma .sc { color:#c30 }
42+
/* LiteralStringDelimiter */ .chroma .dl { color:#c30 }
43+
/* LiteralStringDoc */ .chroma .sd { color:#c30;font-style:italic }
44+
/* LiteralStringDouble */ .chroma .s2 { color:#c30 }
45+
/* LiteralStringEscape */ .chroma .se { color:#c30;font-weight:bold }
46+
/* LiteralStringHeredoc */ .chroma .sh { color:#c30 }
47+
/* LiteralStringInterpol */ .chroma .si { color:#a00 }
48+
/* LiteralStringOther */ .chroma .sx { color:#c30 }
49+
/* LiteralStringRegex */ .chroma .sr { color:#3aa }
50+
/* LiteralStringSingle */ .chroma .s1 { color:#c30 }
51+
/* LiteralStringSymbol */ .chroma .ss { color:#fc3 }
52+
/* LiteralNumber */ .chroma .m { color:#f60 }
53+
/* LiteralNumberBin */ .chroma .mb { color:#f60 }
54+
/* LiteralNumberFloat */ .chroma .mf { color:#f60 }
55+
/* LiteralNumberHex */ .chroma .mh { color:#f60 }
56+
/* LiteralNumberInteger */ .chroma .mi { color:#f60 }
57+
/* LiteralNumberIntegerLong */ .chroma .il { color:#f60 }
58+
/* LiteralNumberOct */ .chroma .mo { color:#f60 }
59+
/* Operator */ .chroma .o { color:#555 }
60+
/* OperatorWord */ .chroma .ow { color:#000;font-weight:bold }
61+
/* Comment */ .chroma .c { color:#09f;font-style:italic }
62+
/* CommentHashbang */ .chroma .ch { color:#09f;font-style:italic }
63+
/* CommentMultiline */ .chroma .cm { color:#09f;font-style:italic }
64+
/* CommentSingle */ .chroma .c1 { color:#09f;font-style:italic }
65+
/* CommentSpecial */ .chroma .cs { color:#09f;font-weight:bold;font-style:italic }
66+
/* CommentPreproc */ .chroma .cp { color:#099 }
67+
/* CommentPreprocFile */ .chroma .cpf { color:#099 }
68+
/* GenericDeleted */ .chroma .gd { background-color:#fcc }
69+
/* GenericEmph */ .chroma .ge { font-style:italic }
70+
/* GenericError */ .chroma .gr { color:#f00 }
71+
/* GenericHeading */ .chroma .gh { color:#030;font-weight:bold }
72+
/* GenericInserted */ .chroma .gi { background-color:#cfc }
73+
/* GenericOutput */ .chroma .go { color:#aaa }
74+
/* GenericPrompt */ .chroma .gp { color:#009;font-weight:bold }
75+
/* GenericStrong */ .chroma .gs { font-weight:bold }
76+
/* GenericSubheading */ .chroma .gu { color:#030;font-weight:bold }
77+
/* GenericTraceback */ .chroma .gt { color:#9c6 }
78+
/* GenericUnderline */ .chroma .gl { text-decoration:underline }
79+
/* TextWhitespace */ .chroma .w { color:#bbb }
80+
81+
/* ---------- Dark mode: Dracula ---------- */
82+
/* Generated using: hugo gen chromastyles --style=dracula */
83+
84+
:root.dark .bg { color:#f8f8f2;background-color:#282a36; }
85+
:root.dark .chroma { color:#f8f8f2;background-color:#282a36;-webkit-text-size-adjust:none; }
86+
:root.dark .chroma .lnlinks { outline:none;text-decoration:none;color:inherit }
87+
:root.dark .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; }
88+
:root.dark .chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; }
89+
:root.dark .chroma .hl { background-color:#3d3f4a }
90+
:root.dark .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f }
91+
:root.dark .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f }
92+
:root.dark .chroma .line { display:flex; }
93+
:root.dark .chroma .k { color:#ff79c6 }
94+
:root.dark .chroma .kc { color:#ff79c6 }
95+
:root.dark .chroma .kd { color:#8be9fd;font-style:italic }
96+
:root.dark .chroma .kn { color:#ff79c6 }
97+
:root.dark .chroma .kp { color:#ff79c6 }
98+
:root.dark .chroma .kr { color:#ff79c6 }
99+
:root.dark .chroma .kt { color:#8be9fd }
100+
:root.dark .chroma .na { color:#50fa7b }
101+
:root.dark .chroma .nc { color:#50fa7b }
102+
:root.dark .chroma .nl { color:#8be9fd;font-style:italic }
103+
:root.dark .chroma .nt { color:#ff79c6 }
104+
:root.dark .chroma .nb { color:#8be9fd;font-style:italic }
105+
:root.dark .chroma .bp { font-style:italic }
106+
:root.dark .chroma .nv { color:#8be9fd;font-style:italic }
107+
:root.dark .chroma .vc { color:#8be9fd;font-style:italic }
108+
:root.dark .chroma .vg { color:#8be9fd;font-style:italic }
109+
:root.dark .chroma .vi { color:#8be9fd;font-style:italic }
110+
:root.dark .chroma .vm { color:#8be9fd;font-style:italic }
111+
:root.dark .chroma .nf { color:#50fa7b }
112+
:root.dark .chroma .fm { color:#50fa7b }
113+
:root.dark .chroma .s { color:#f1fa8c }
114+
:root.dark .chroma .sa { color:#f1fa8c }
115+
:root.dark .chroma .sb { color:#f1fa8c }
116+
:root.dark .chroma .sc { color:#f1fa8c }
117+
:root.dark .chroma .dl { color:#f1fa8c }
118+
:root.dark .chroma .sd { color:#f1fa8c }
119+
:root.dark .chroma .s2 { color:#f1fa8c }
120+
:root.dark .chroma .se { color:#f1fa8c }
121+
:root.dark .chroma .sh { color:#f1fa8c }
122+
:root.dark .chroma .si { color:#f1fa8c }
123+
:root.dark .chroma .sx { color:#f1fa8c }
124+
:root.dark .chroma .sr { color:#f1fa8c }
125+
:root.dark .chroma .s1 { color:#f1fa8c }
126+
:root.dark .chroma .ss { color:#f1fa8c }
127+
:root.dark .chroma .m { color:#bd93f9 }
128+
:root.dark .chroma .mb { color:#bd93f9 }
129+
:root.dark .chroma .mf { color:#bd93f9 }
130+
:root.dark .chroma .mh { color:#bd93f9 }
131+
:root.dark .chroma .mi { color:#bd93f9 }
132+
:root.dark .chroma .il { color:#bd93f9 }
133+
:root.dark .chroma .mo { color:#bd93f9 }
134+
:root.dark .chroma .o { color:#ff79c6 }
135+
:root.dark .chroma .ow { color:#ff79c6 }
136+
:root.dark .chroma .c { color:#6272a4 }
137+
:root.dark .chroma .ch { color:#6272a4 }
138+
:root.dark .chroma .cm { color:#6272a4 }
139+
:root.dark .chroma .c1 { color:#6272a4 }
140+
:root.dark .chroma .cs { color:#6272a4 }
141+
:root.dark .chroma .cp { color:#ff79c6 }
142+
:root.dark .chroma .cpf { color:#ff79c6 }
143+
:root.dark .chroma .gd { color:#f55 }
144+
:root.dark .chroma .ge { text-decoration:underline }
145+
:root.dark .chroma .gh { font-weight:bold }
146+
:root.dark .chroma .gi { color:#50fa7b;font-weight:bold }
147+
:root.dark .chroma .go { color:#44475a }
148+
:root.dark .chroma .gu { font-weight:bold }
149+
:root.dark .chroma .gl { text-decoration:underline }
150+

‎assets/css/custom.css‎

Lines changed: 111 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,63 @@
2323
background: #1e293b;
2424
color: #e2e8f0;
2525
}
26-
:root.dark pre {
26+
:root.dark pre:not(.chroma) {
2727
background: #0f172a !important;
2828
}
29-
:root.dark pre code {
29+
:root.dark pre:not(.chroma) code {
3030
color: #e2e8f0;
3131
}
3232

33+
/* ---------- Hero buttons ---------- */
34+
.hextra-hero-btn-primary,
35+
.hextra-hero-btn-alt {
36+
display: inline-block;
37+
font-weight: 500;
38+
cursor: pointer;
39+
padding: 0.75rem 1.75rem;
40+
border-radius: 9999px;
41+
text-align: center;
42+
text-decoration: none !important;
43+
font-size: 1rem;
44+
transition: all 0.2s ease-in;
45+
}
46+
.hextra-hero-btn-primary {
47+
background: #00109F;
48+
color: #fff !important;
49+
border: 2px solid #00109F;
50+
}
51+
.hextra-hero-btn-primary:hover {
52+
background: #1a2fbf;
53+
border-color: #1a2fbf;
54+
}
55+
:root.dark .hextra-hero-btn-primary {
56+
background: #6366f1;
57+
border-color: #6366f1;
58+
color: #fff !important;
59+
}
60+
:root.dark .hextra-hero-btn-primary:hover {
61+
background: #818cf8;
62+
border-color: #818cf8;
63+
}
64+
.hextra-hero-btn-alt {
65+
background: transparent;
66+
color: #00109F !important;
67+
border: 2px solid #cbd5e1;
68+
}
69+
.hextra-hero-btn-alt:hover {
70+
border-color: #00109F;
71+
background: #f0f4ff;
72+
}
73+
:root.dark .hextra-hero-btn-alt {
74+
color: #e2e8f0 !important;
75+
border-color: #475569;
76+
}
77+
:root.dark .hextra-hero-btn-alt:hover {
78+
border-color: #818cf8;
79+
background: rgba(99,102,241,0.1);
80+
color: #a5b4fc !important;
81+
}
82+
3383
/* Center all hero content on home page */
3484
main#content > .hx\:flex {
3585
align-items: center !important;
@@ -255,6 +305,65 @@ nav a img {
255305
color: #93b4ff;
256306
}
257307

308+
/* ---------- Pageinfo & Alert shortcodes ---------- */
309+
.hextra-pageinfo {
310+
padding: 1rem 1.5rem;
311+
border-left: 4px solid var(--primary-color, #00109F);
312+
background: #f0f4ff;
313+
border-radius: 0 0.25rem 0.25rem 0;
314+
margin: 1rem 0;
315+
color: #1e293b;
316+
}
317+
:root.dark .hextra-pageinfo {
318+
background: #1e293b;
319+
border-left-color: #6366f1;
320+
color: #e2e8f0;
321+
}
322+
:root.dark .hextra-pageinfo a {
323+
color: #93b4ff;
324+
}
325+
326+
.hextra-alert {
327+
padding: 1rem 1.5rem;
328+
border-left: 4px solid #00109F;
329+
background: #f0f4ff;
330+
border-radius: 0 0.25rem 0.25rem 0;
331+
margin: 1rem 0;
332+
color: #1e293b;
333+
}
334+
.hextra-alert--warning {
335+
border-left-color: #e6a700;
336+
background: #fff8e1;
337+
}
338+
.hextra-alert--danger {
339+
border-left-color: #d32f2f;
340+
background: #ffeef0;
341+
}
342+
.hextra-alert--success {
343+
border-left-color: #2e7d32;
344+
background: #e8f5e9;
345+
}
346+
:root.dark .hextra-alert {
347+
background: #1e293b;
348+
border-left-color: #6366f1;
349+
color: #e2e8f0;
350+
}
351+
:root.dark .hextra-alert--warning {
352+
background: #2a2000;
353+
border-left-color: #facc15;
354+
}
355+
:root.dark .hextra-alert--danger {
356+
background: #2a0a0e;
357+
border-left-color: #f87171;
358+
}
359+
:root.dark .hextra-alert--success {
360+
background: #0a2a10;
361+
border-left-color: #4ade80;
362+
}
363+
:root.dark .hextra-alert a {
364+
color: #93b4ff;
365+
}
366+
258367
/* Vertical scrolling for large code samples */
259368
pre {
260369
max-height: 25em;

‎config.yaml‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,6 @@ defaultContentLanguageInSubdir: false
1010
enableMissingTranslationPlaceholders: true
1111
disableKinds:
1212
- taxonomy
13-
pygmentsCodeFences: true
14-
pygmentsUseClasses: false
15-
pygmentsUseClassic: false
16-
pygmentsStyle: manni
1713
enableEmoji: true
1814
ignoreFiles:
1915
- vendor/.*
@@ -26,6 +22,8 @@ markup:
2622
goldmark:
2723
renderer:
2824
unsafe: true
25+
highlight:
26+
noClasses: false
2927
imaging:
3028
resampleFilter: CatmullRom
3129
quality: 75
@@ -69,7 +67,7 @@ params:
6967
displayPoweredBy: false
7068

7169
theme:
72-
default: system
70+
default: light
7371
displayToggle: false
7472

7573
page:

‎content/en/docs/Concepts/concept-model.md‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
<!--
21
---
32
title: "Concept model"
43
linkTitle: "Concept model"
@@ -7,7 +6,6 @@ description: >
76
87
Basic Tekton components and data model
98
---
10-
-->
119

1210
## Steps, Tasks, and Pipelines
1311

‎content/en/docs/Concepts/overview.md‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
<!--
21
---
32
title: "Overview"
43
linkTitle: "Overview"
@@ -7,7 +6,6 @@ description: >
76
87
Components, benefits and caveats, common usage.
98
---
10-
-->
119

1210

1311

‎content/en/docs/Concepts/supply-chain-security.md‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
1-
<!--
21
---
32
title: "Supply Chain Security"
43
linkTitle: "Supply Chain Security"
54
weight: 3
65
description: >
76
Overview of Supply Chain Security
87
---
9-
-->
108

119
Given the increasing complexity of the CI/CD space, with projects that often
1210
have dozens or even hundreds of dependencies, the supply chain has become a

‎content/en/docs/Contribute/blog-guidelines.md‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
1-
<!--
21
---
32
title: "Create a blog post"
43
linkTitle: "Create a blog post"
54
weight: 6
65
description: >
76
Contributions to the Tekton blog are welcome!
87
---
9-
-->
108

119
If you have an interesting, fun, or practical idea that you want to share with the
1210
world, you can write a blog post about it!

‎content/en/docs/Contribute/code-contributions.md‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
1-
<!--
21
---
32
title: "Contribute Code"
43
linkTitle: "Contribute Code"
54
weight: 1
65
description: >
76
How to contribute code to Tekton projects
87
---
9-
-->
108

119
If you would like to contribute code to Tekton, we'd love your help!
1210
Tekton is an open source project and we welcome contributions from everyone.

0 commit comments

Comments
 (0)