This is an automated email from the ASF dual-hosted git repository.
zhangliang pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/shardingsphere.git
The following commit(s) were added to refs/heads/master by this push:
new c9cb2b17319 Adjust theme of railroad (#37626)
c9cb2b17319 is described below
commit c9cb2b17319ebb5670ffb8c963a8b1ead02cc8eb
Author: Liang Zhang <[email protected]>
AuthorDate: Sat Jan 3 20:29:43 2026 +0800
Adjust theme of railroad (#37626)
---
.../themes/hugo-theme-learn/static/css/railroad-diagrams.css | 5 ++++-
docs/document/themes/hugo-theme-learn/static/js/learn.js | 4 ++--
.../themes/hugo-theme-learn/static/js/railroad-diagrams.js | 10 ++++++----
3 files changed, 12 insertions(+), 7 deletions(-)
diff --git
a/docs/document/themes/hugo-theme-learn/static/css/railroad-diagrams.css
b/docs/document/themes/hugo-theme-learn/static/css/railroad-diagrams.css
index 85b5ebf565d..8e0454ff566 100644
--- a/docs/document/themes/hugo-theme-learn/static/css/railroad-diagrams.css
+++ b/docs/document/themes/hugo-theme-learn/static/css/railroad-diagrams.css
@@ -15,9 +15,12 @@ svg.railroad-diagram text {
}
/* Allow horizontal scrolling when diagrams are wide */
.railroad-diagrams {
+ overflow: visible;
+ background: transparent;
+}
+.railroad-diagrams .rr-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
- background: transparent;
}
svg.railroad-diagram text.diagram-text {
font-size: 12px;
diff --git a/docs/document/themes/hugo-theme-learn/static/js/learn.js
b/docs/document/themes/hugo-theme-learn/static/js/learn.js
index f84a2a8393b..c54ffa886bb 100644
--- a/docs/document/themes/hugo-theme-learn/static/js/learn.js
+++ b/docs/document/themes/hugo-theme-learn/static/js/learn.js
@@ -574,7 +574,7 @@ jQuery(document).ready(function() {
function renderRailroad(grammar) {
var defs = parseDefinitions(grammar);
- var htmlParts = ['<style>svg.railroad-diagram{background:#fff;}
.rr-title{font:bold 14px Verdana, sans-serif;margin:10px 0 4px;}</style>'];
+ var htmlParts =
['<style>svg.railroad-diagram{background:transparent;} .rr-title{font:bold 14px
Verdana, sans-serif;margin:10px 0 4px;}</style>'];
for (var i = 0; i < defs.length; i++) {
var def = defs[i];
try {
@@ -583,7 +583,7 @@ jQuery(document).ready(function() {
// Diagram takes items as varargs; call as a factory to
wrap arguments correctly
var diagram = Diagram(astToRailroad(ast));
htmlParts.push('<p class=\"rr-title\">' + def.name +
':</p>');
- htmlParts.push(diagram.toString());
+ htmlParts.push('<div class=\"rr-wrapper\">' +
diagram.toString() + '</div>');
} catch (e) {
htmlParts.push('<p class=\"rr-title\">' + def.name +
':</p><p>Railroad diagram unavailable.</p>');
}
diff --git
a/docs/document/themes/hugo-theme-learn/static/js/railroad-diagrams.js
b/docs/document/themes/hugo-theme-learn/static/js/railroad-diagrams.js
index 404b25c911e..a5f2bb6cb5d 100644
--- a/docs/document/themes/hugo-theme-learn/static/js/railroad-diagrams.js
+++ b/docs/document/themes/hugo-theme-learn/static/js/railroad-diagrams.js
@@ -380,7 +380,7 @@ At runtime, these constants can be found on the Diagram
class.
function Start(simpleType) {
if(!(this instanceof Start)) return new Start();
FakeSVG.call(this, 'path');
- this.width = 14;
+ this.width = 16;
this.up = 8;
this.down = 8;
this.simpleType = simpleType;
@@ -388,14 +388,15 @@ At runtime, these constants can be found on the Diagram
class.
subclassOf(Start, FakeSVG);
Start.prototype.format = function(x,y) {
this.attrs['stroke-linecap'] = 'round';
- this.attrs.d = 'M '+x+' '+y+' h '+this.width;
+ // small circle + short connector to the right
+ this.attrs.d = 'M '+(x+4)+' '+y+' a4 4 0 1 0 8 0 a4 4 0 1 0 -8
0 m 8 0 h 8';
return this;
}
function End(simpleType) {
if(!(this instanceof End)) return new End();
FakeSVG.call(this, 'path');
- this.width = 14;
+ this.width = 16;
this.up = 8;
this.down = 8;
this.simpleType = simpleType;
@@ -403,7 +404,8 @@ At runtime, these constants can be found on the Diagram
class.
subclassOf(End, FakeSVG);
End.prototype.format = function(x,y) {
this.attrs['stroke-linecap'] = 'round';
- this.attrs.d = 'M '+x+' '+y+' h '+this.width;
+ // short connector then small circle
+ this.attrs.d = 'M '+x+' '+y+' h 8 m 0 -4 a4 4 0 1 0 0 8 a4 4 0
1 0 0 -8';
return this;
}
