Skip to content

Commit b663dde

Browse files
lovasoalovasoa
committed
official website code example display improvement
1 parent 9a52756 commit b663dde

File tree

4 files changed

+127
-23
lines changed

4 files changed

+127
-23
lines changed

‎CHANGELOG.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44

55
- Better error messages for Microsoft SQL Server. SQLPage now displays the line number of the error, which is especially useful for debugging long migration scripts.
66
- Many improvements in the official website and the documentation.
7-
Most notably, the documentation now has syntax highlighting on code blocks.
7+
- Most notably, the documentation now has syntax highlighting on code blocks (using [prism](https://prismjs.com/) with a custom theme made for tabler). This also illustrates the usage of external javascript and css libraries in SQLPage. See [the shell component documentation](https://sql.ophir.dev/documentation.sql?component=shell#component).
8+
- Better display of example queries in the documentation, with smart indentation that makes it easier to read.
89
- CLarify some ambiguous error messages:
910
- make it clearer whether the error comes from SQLPage or from the database
1011
- specific tokenization errors are now displayed as such

‎examples/official-site/documentation.sql‎

Lines changed: 26 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -99,25 +99,33 @@ select
9999
group_concat(
100100
'select ' || char(10) ||
101101
(
102-
with t as (select * from json_tree(top.value))
102+
with t as (select * from json_tree(top.value)),
103+
key_val as (select
104+
CASE t.type
105+
WHEN 'integer' THEN t.atom
106+
WHEN 'real' THEN t.atom
107+
WHEN 'true' THEN 'TRUE'
108+
WHEN 'false' THEN 'FALSE'
109+
WHEN 'null' THEN 'NULL'
110+
ELSE quote(t.value)
111+
END as key,
112+
CASE parent.fullkey
113+
WHEN '$' THEN t.key
114+
ELSE parent.key
115+
END as val
116+
from t inner join t parent on parent.id = t.parent
117+
where t.atom is not null
118+
),
119+
key_val_padding as (select
120+
key,
121+
val,
122+
1 + max(0, max(case when length(key) < 30 then length(key) else 0 end) over () - length(key)) as padding
123+
from key_val
124+
)
103125
select group_concat(
104-
' ' ||
105-
CASE t.type
106-
WHEN 'integer' THEN t.atom
107-
WHEN 'real' THEN t.atom
108-
WHEN 'true' THEN 'TRUE'
109-
WHEN 'false' THEN 'FALSE'
110-
WHEN 'null' THEN 'NULL'
111-
ELSE quote(t.value)
112-
END ||
113-
' as ' ||
114-
CASE parent.fullkey
115-
WHEN '$' THEN t.key
116-
ELSE parent.key
117-
END
118-
, ',' || char(10)
119-
) from t inner join t parent on parent.id = t.parent
120-
where t.atom is not null
126+
format(' %s%.*cas %s', key, padding, ' ', val),
127+
',' || char(10)
128+
) from key_val_padding
121129
) || ';',
122130
char(10)
123131
)

‎examples/official-site/prism-tabler-theme.css‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
.token.comment,
2+
.token.prolog,
3+
.token.doctype,
4+
.token.cdata {
5+
color: var(--tblr-gray-300);
6+
}
7+
8+
.token.punctuation {
9+
color: var(--tblr-gray-500);
10+
}
11+
12+
.namespace {
13+
opacity: .7;
14+
}
15+
16+
.token.property,
17+
.token.tag {
18+
color: #f92672;
19+
}
20+
21+
.token.number {
22+
color: #ea9999;
23+
}
24+
25+
.token.boolean {
26+
color: #ae81ff;
27+
}
28+
29+
.token.selector,
30+
.token.attr-name,
31+
.token.string {
32+
color: #97e1a3;
33+
}
34+
35+
.token.operator,
36+
.token.entity,
37+
.token.url,
38+
.language-css .token.string,
39+
.style .token.string {
40+
color: #f8f8f2;
41+
}
42+
43+
.token.atrule,
44+
.token.attr-value
45+
{
46+
color: #e6db74;
47+
}
48+
49+
50+
.token.keyword{
51+
color: #95d1ff;
52+
}
53+
54+
.token.regex,
55+
.token.important {
56+
color: var(--tblr-yellow);
57+
}
58+
59+
.token.important {
60+
font-weight: bold;
61+
}
62+
63+
.token.entity {
64+
cursor: help;
65+
}
66+
67+
.token {
68+
transition: .3s;
69+
}
70+
71+
code::selection, code ::selection {
72+
background: var(--tblr-yellow);
73+
color: var(--tblr-gray-900);
74+
border-radius: .1em;
75+
}
76+
77+
code .token.keyword::selection, code .token.punctuation::selection {
78+
color: var(--tblr-gray-800);
79+
}

‎examples/official-site/sqlpage/migrations/01_documentation.sql‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -333,7 +333,7 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
333333
-- top level
334334
('title', 'The name of the chart.', 'TEXT', TRUE, TRUE),
335335
('type', 'The type of chart: "line", "area", "bar", "column", "pie", "scatter", or "bubble".', 'TEXT', TRUE, FALSE),
336-
('time', 'Whether the x-axis represents time. If set to true, the values will be formatted as dates for the user.', 'BOOLEAN', TRUE, TRUE),
336+
('time', 'Whether the x-axis represents time. If set to true, the x values will be parsed and formatted as dates for the user.', 'BOOLEAN', TRUE, TRUE),
337337
('ymin', 'The minimal value for the y-axis.', 'NUMBER', TRUE, TRUE),
338338
('ymax', 'The maximum value for the y-axis.', 'NUMBER', TRUE, TRUE),
339339
('xtitle', 'Title of the x axis, displayed below it.', 'TEXT', TRUE, TRUE),
@@ -355,8 +355,24 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
355355
('series', 'If multiple series are represented and share the same y-axis, this parameter can be used to distinguish between them.', 'TEXT', FALSE, TRUE)
356356
) x;
357357
INSERT INTO example(component, description, properties) VALUES
358-
('chart', 'An area chart', json('[{"component":"chart", "title": "Quarterly Revenue", "type": "area", "color": "indigo"}, '||
359-
'{"x":"2022-Q1","y":15},{"x":"2022-Q2","y":46},{"x":"2022-Q3","y":23},{"x":"2023-Q1","y":70},{"x":"2023-Q2","y":35},{"x":"2023-Q3","y":106}]')),
358+
('chart', 'An area chart representing a time series, using the top-level property `time`.
359+
Ticks on the x axis are adjusted automatically, and ISO datetimes are parsed and displayed in a readable format.', json('[
360+
{
361+
"component": "chart",
362+
"title": "Quarterly Revenue",
363+
"type": "area",
364+
"color": "indigo",
365+
"marker": 5,
366+
"time": true
367+
},
368+
{"x":"2022-01-01T00:00:00Z","y":15},
369+
{"x":"2022-04-01T00:00:00Z","y":46},
370+
{"x":"2022-07-01T00:00:00Z","y":23},
371+
{"x":"2022-10-01T00:00:00Z","y":70},
372+
{"x":"2023-01-01T00:00:00Z","y":35},
373+
{"x":"2023-04-01T00:00:00Z","y":106},
374+
{"x":"2023-07-01T00:00:00Z","y":53}
375+
]')),
360376
('chart', 'A pie chart.', json('[{"component":"chart", "title": "Answers", "type": "pie", "labels": true}, '||
361377
'{"label": "Yes", "value": 65}, '||
362378
'{"label": "No", "value": 35}]')),
@@ -485,6 +501,6 @@ INSERT INTO example(component, description, properties) VALUES
485501
"icon": "book",
486502
"javascript": ["https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-core.min.js",
487503
"https://cdn.jsdelivr.net/npm/prismjs@1/plugins/autoloader/prism-autoloader.min.js"],
488-
"css": "https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism-okaidia.min.css",
504+
"css": "/prism-tabler-theme.css",
489505
"footer": "Official [SQLPage](https://sql.ophir.dev) documentation"
490506
}]'));

0 commit comments

Comments
 (0)