mirror of
https://github.com/harttle/liquidjs.git
synced 2026-09-19 14:30:38 -07:00
docs: revisit wording & style for liquidjs.com (#906)
* docs: polish theme, playground, and reference pages Improve readability of the docs site with updated light/dark tokens, shared code-block styling, and playground editors that follow system color scheme. Skip CookieHub on localhost, serve the browser bundle from theme source, and use backtick titles on filter/tag reference pages for consistent navigation. Co-authored-by: Cursor <[email protected]> * docs: highlight npx in bash blocks and polish English copy Use Prism insertBefore for CLI commands like npx, tighten tutorial and reference wording, and keep YAML titles free of backticks so sidebar and page headings stay correct. Co-authored-by: Cursor <[email protected]> * docs: restore lowercase filter and tag titles Titles should match actual filter/tag identifiers (e.g. abs, append), not capitalized English labels. Co-authored-by: Cursor <[email protected]> --------- Co-authored-by: Cursor <[email protected]>
This commit is contained in:
Yang Jun
@@ -63,6 +63,7 @@ a
|
||||
#content-wrap
|
||||
background: var(--color-content-bg)
|
||||
overflow: hidden
|
||||
box-shadow: var(--panel-shadow)
|
||||
|
||||
.video-container
|
||||
text-align: center
|
||||
|
||||
+1
-1
@@ -58,7 +58,7 @@ logo-size = 36px
|
||||
text-decoration: none
|
||||
line-height: logo-size
|
||||
white-space: nowrap
|
||||
opacity: 0.7
|
||||
opacity: 0.85
|
||||
transition: opacity 0.2s, color 0.2s
|
||||
display: inline-block
|
||||
padding: 0 12px
|
||||
|
||||
+29
-16
@@ -1,19 +1,6 @@
|
||||
// https://github.com/chriskempson/tomorrow-theme
|
||||
// Tomorrow Night Eighties
|
||||
:root {
|
||||
--highlight-background: #2d2d2d
|
||||
--highlight-current-line: #393939
|
||||
--highlight-selection: #515151
|
||||
--highlight-foreground: #cccccc
|
||||
--highlight-comment: #999999
|
||||
--highlight-red: #f2777a
|
||||
--highlight-orange: #f99157
|
||||
--highlight-yellow: #ffcc66
|
||||
--highlight-green: #99cc99
|
||||
--highlight-aqua: #66cccc
|
||||
--highlight-blue: #6699cc
|
||||
--highlight-purple: #cc99cc
|
||||
}
|
||||
// Light: GitHub-style; dark: Tomorrow Night Eighties (tuned for navy palette)
|
||||
// Palette tokens live in _variables.styl
|
||||
|
||||
pre, code
|
||||
font-family: font-mono
|
||||
@@ -23,14 +10,19 @@ pre, code
|
||||
|
||||
code
|
||||
padding: 0 5px
|
||||
border-radius: 4px
|
||||
|
||||
pre
|
||||
padding: 10px 15px
|
||||
line-height: 22px
|
||||
code-block-chrome()
|
||||
code
|
||||
border: none
|
||||
display: block
|
||||
padding: 0
|
||||
&.line-numbers
|
||||
white-space: pre
|
||||
overflow-x: auto
|
||||
|
||||
.highlight
|
||||
padding: 10px 15px
|
||||
@@ -38,6 +30,7 @@ pre
|
||||
background: var(--highlight-background)
|
||||
overflow: auto
|
||||
margin: 0
|
||||
code-block-chrome()
|
||||
table
|
||||
margin: 0 !important
|
||||
border: 0
|
||||
@@ -56,6 +49,9 @@ pre
|
||||
padding: 0
|
||||
background: none
|
||||
white-space: pre
|
||||
border: none
|
||||
box-shadow: none
|
||||
border-radius: 0
|
||||
.line
|
||||
height: 22px
|
||||
|
||||
@@ -107,4 +103,21 @@ pre
|
||||
color: var(--highlight-blue)
|
||||
.keyword
|
||||
.javascript .function
|
||||
color: var(--highlight-purple)
|
||||
color: var(--highlight-purple)
|
||||
// Prism bash: builtins (echo), external commands (npm), and cli-command (npx)
|
||||
code.language-bash
|
||||
.builtin,
|
||||
.class-name,
|
||||
.function,
|
||||
.cli-command
|
||||
color: var(--highlight-bash-command)
|
||||
.operator
|
||||
color: var(--highlight-purple)
|
||||
code.language-shell
|
||||
.builtin,
|
||||
.class-name,
|
||||
.function,
|
||||
.cli-command
|
||||
color: var(--highlight-bash-command)
|
||||
.operator
|
||||
color: var(--highlight-purple)
|
||||
|
||||
+31
-16
@@ -1,6 +1,6 @@
|
||||
note-tip = #0fff00
|
||||
note-info = hsl(200, 100%, 50%)
|
||||
note-warn = hsl(0, 100%, 50%)
|
||||
note-tip = #3fb950
|
||||
note-info = #58a6ff
|
||||
note-warn = #f85149
|
||||
|
||||
#content
|
||||
position: relative
|
||||
@@ -26,7 +26,7 @@ note-warn = hsl(0, 100%, 50%)
|
||||
#article-toc
|
||||
display: none
|
||||
width: sidebar-width
|
||||
opacity: 0.8
|
||||
opacity: 0.9
|
||||
@media mq-normal
|
||||
display: block
|
||||
|
||||
@@ -86,7 +86,7 @@ note-warn = hsl(0, 100%, 50%)
|
||||
.article-edit-link
|
||||
float: right
|
||||
text-decoration: none;
|
||||
color: #bbb
|
||||
color: var(--color-gray)
|
||||
font-size: 24px
|
||||
line-height: 36px
|
||||
transition: 0.2s
|
||||
@@ -111,21 +111,31 @@ note-warn = hsl(0, 100%, 50%)
|
||||
color: var(--color-default)
|
||||
@media print
|
||||
font-size: 12pt
|
||||
p, ol, ul, dl, table, blockquote, iframe, .highlight
|
||||
p, ol, ul, dl, table, blockquote, iframe, pre, .highlight
|
||||
margin: 1em 0
|
||||
pre + pre,
|
||||
.highlight + .highlight,
|
||||
pre + .highlight,
|
||||
.highlight + pre
|
||||
margin-top: 1em
|
||||
h1
|
||||
font-size: 2em
|
||||
h2
|
||||
font-size: 1.5em
|
||||
border-bottom: 1px solid var(--color-border)
|
||||
border-bottom: 1px solid var(--heading-border)
|
||||
padding-bottom: 10px
|
||||
margin-bottom: 15px
|
||||
margin-bottom: 0.75em
|
||||
h3
|
||||
font-size: 1.3em
|
||||
h1, h2, h3, h4, h5, h6
|
||||
line-height: 1em
|
||||
font-weight: bold
|
||||
margin: 1em 0
|
||||
margin-top: 1.75em
|
||||
margin-bottom: 0.625em
|
||||
blockquote + h1, blockquote + h2, blockquote + h3, blockquote + h4,
|
||||
.highlight + h1, .highlight + h2, .highlight + h3, .highlight + h4,
|
||||
pre + h1, pre + h2, pre + h3, pre + h4
|
||||
margin-top: 2.25em
|
||||
hr
|
||||
border-bottom: none;
|
||||
border-top: 1px dashed var(--color-border);
|
||||
@@ -138,6 +148,9 @@ note-warn = hsl(0, 100%, 50%)
|
||||
padding-left: 3px;
|
||||
vertical-align: super;
|
||||
zoom: .7
|
||||
:not(pre) > code
|
||||
background: var(--inline-code-bg)
|
||||
color: var(--inline-code-color)
|
||||
strong
|
||||
font-weight: bold
|
||||
em
|
||||
@@ -156,7 +169,7 @@ note-warn = hsl(0, 100%, 50%)
|
||||
li
|
||||
p
|
||||
margin: 0
|
||||
table, blockquote, iframe, .highlight
|
||||
table, blockquote, iframe, pre, .highlight
|
||||
margin: 1em 0
|
||||
img, video
|
||||
max-width: 100%
|
||||
@@ -165,8 +178,11 @@ note-warn = hsl(0, 100%, 50%)
|
||||
blockquote
|
||||
padding: 0 20px
|
||||
position: relative
|
||||
background: var(--blockquote-bg)
|
||||
border: 1px solid var(--color-border)
|
||||
border-left: 5px solid #ddd
|
||||
border-left: 4px solid #ddd
|
||||
border-radius: 6px
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06)
|
||||
footer
|
||||
margin: 1em 0
|
||||
font-style: italic
|
||||
@@ -176,15 +192,16 @@ note-warn = hsl(0, 100%, 50%)
|
||||
padding: 0 0.3em
|
||||
a
|
||||
color: color-grey
|
||||
@media (prefers-color-scheme: dark)
|
||||
border-color: var(--color-gray)
|
||||
.note
|
||||
&.tip
|
||||
border-left-color: note-tip
|
||||
background: var(--note-tip-bg)
|
||||
&.info
|
||||
border-left-color: note-info
|
||||
background: var(--note-info-bg)
|
||||
&.warn
|
||||
border-left-color: note-warn
|
||||
background: var(--note-warn-bg)
|
||||
.since
|
||||
margin-top: 0;
|
||||
font-style: italic;
|
||||
@@ -206,9 +223,7 @@ note-warn = hsl(0, 100%, 50%)
|
||||
padding: 5px 15px
|
||||
tr
|
||||
&:nth-child(2n)
|
||||
background: #eee
|
||||
@media (prefers-color-scheme: dark)
|
||||
background: var(--color-gray)
|
||||
background: var(--table-stripe-bg)
|
||||
|
||||
.article-footer
|
||||
margin: 60px 0 0
|
||||
|
||||
+72
-13
@@ -1,48 +1,107 @@
|
||||
#playground
|
||||
background: var(--color-content-bg)
|
||||
overflow: hidden
|
||||
box-shadow: var(--panel-shadow)
|
||||
|
||||
.wrapper
|
||||
margin-bottom: 40px
|
||||
|
||||
h1
|
||||
font-size: 36px
|
||||
font-weight: 300
|
||||
margin: 40px 0 24px
|
||||
margin-top: 40px
|
||||
margin-bottom: 24px
|
||||
color: var(--color-default)
|
||||
|
||||
h2
|
||||
font-size: 0.8125rem
|
||||
font-weight: 600
|
||||
text-transform: uppercase
|
||||
letter-spacing: 0.04em
|
||||
color: var(--color-gray)
|
||||
margin: 0
|
||||
|
||||
#editors
|
||||
display: grid
|
||||
overflow: hidden
|
||||
margin-bottom: 16px
|
||||
margin-bottom: 0
|
||||
height: 75vh
|
||||
grid-template-columns: auto auto
|
||||
grid-template-rows: 60% 40%
|
||||
min-height: 480px
|
||||
grid-template-columns: 1fr 1fr
|
||||
grid-template-rows: 3fr 2fr
|
||||
grid-gap: 16px
|
||||
align-items: stretch
|
||||
@media mq-mobile
|
||||
height: auto
|
||||
min-height: 0
|
||||
grid-template-columns: 1fr
|
||||
grid-template-rows: auto
|
||||
grid-gap: 20px
|
||||
|
||||
.area-tpl
|
||||
grid-row: 1
|
||||
grid-column: 1
|
||||
min-height: 0
|
||||
.area-data
|
||||
grid-row: 2
|
||||
grid-column: 1
|
||||
min-height: 0
|
||||
.area-output
|
||||
grid-column: 2
|
||||
grid-row: 1 / -1
|
||||
min-height: 0
|
||||
@media mq-mobile
|
||||
grid-row: auto
|
||||
grid-column: 1
|
||||
|
||||
.editor-wrapper
|
||||
display: flex
|
||||
gap: 8px
|
||||
flex-direction: column
|
||||
min-height: 0
|
||||
overflow: hidden
|
||||
.editor
|
||||
flex-grow: 1
|
||||
flex: 1 1 auto
|
||||
min-height: 0
|
||||
position: relative
|
||||
code-block-chrome()
|
||||
overflow: hidden
|
||||
@media mq-mobile
|
||||
min-height: 240px
|
||||
.ace_editor
|
||||
font-family: font-mono
|
||||
font-size: 14px
|
||||
line-height: 1.5
|
||||
border-radius: 6px
|
||||
.ace_scrollbar
|
||||
z-index: 2
|
||||
|
||||
.version
|
||||
font-size: 0.8125rem
|
||||
line-height: 1.5
|
||||
font-family: font-mono
|
||||
color: var(--color-gray)
|
||||
margin-top: 20px
|
||||
margin-bottom: 32px
|
||||
a
|
||||
color: inherit
|
||||
text-decoration: none
|
||||
&:hover
|
||||
color: var(--color-link)
|
||||
text-decoration: underline
|
||||
|
||||
.hide
|
||||
display: none
|
||||
|
||||
.loader
|
||||
width: 75px
|
||||
height: 75px
|
||||
width: 48px
|
||||
height: 48px
|
||||
margin: 150px auto 200px
|
||||
border-top: 5px solid #292929
|
||||
border-right: 5px solid #efefef
|
||||
border-bottom: 5px solid #efefef
|
||||
border-left: 5px solid #efefef
|
||||
border-radius: 100px
|
||||
animation: spin 1s infinite linear
|
||||
border: 3px solid var(--color-border)
|
||||
border-top-color: var(--color-link)
|
||||
border-radius: 50%
|
||||
animation: spin 0.8s infinite linear
|
||||
|
||||
@keyframes spin
|
||||
100%
|
||||
transform: rotate(360deg)
|
||||
|
||||
+1
-1
@@ -1,7 +1,6 @@
|
||||
#sidebar
|
||||
width: sidebar-width
|
||||
padding-bottom: 40px
|
||||
opacity: 0.8
|
||||
display: none
|
||||
@media mq-normal
|
||||
display: block
|
||||
@@ -26,6 +25,7 @@
|
||||
line-height: 1
|
||||
position: relative
|
||||
width: 100%
|
||||
transition: color 0.15s
|
||||
&.current
|
||||
color: var(--color-link)
|
||||
&:hover
|
||||
|
||||
+74
-20
@@ -4,38 +4,86 @@ vendor-prefixes = webkit moz ms official
|
||||
|
||||
// Colors
|
||||
:root {
|
||||
--color-default: #444
|
||||
--color-default-invert: #d1d2d4
|
||||
--color-gray: #999
|
||||
--color-border: #e3e3e3
|
||||
--color-navy: hsl(210, 25%, 12%)
|
||||
--color-default: #374151
|
||||
--color-default-invert: #e8eaed
|
||||
--color-gray: #6b7280
|
||||
--color-border: #e5e7eb
|
||||
--color-navy: hsl(218, 32%, 11%)
|
||||
--color-content-bg: #fff
|
||||
--color-navy-lighter: lighten(hsl(210, 25%, 12%), 10%)
|
||||
--color-link: #0e83cd
|
||||
--color-link-hover: lighten(#0e83cd, 10%)
|
||||
--color-navy-lighter: hsl(218, 28%, 16%)
|
||||
--color-link: #2563eb
|
||||
--color-link-hover: #1d4ed8
|
||||
--panel-shadow: 0 0 48px rgba(0, 0, 0, 0.18)
|
||||
--heading-border: var(--color-border)
|
||||
--code-border: #d0d7de
|
||||
--code-shadow: 0 1px 2px rgba(0, 0, 0, 0.04)
|
||||
--inline-code-bg: rgba(175, 184, 193, 0.2)
|
||||
--inline-code-color: var(--color-default)
|
||||
--blockquote-bg: transparent
|
||||
--note-tip-bg: rgba(63, 185, 80, 0.05)
|
||||
--note-info-bg: rgba(88, 166, 255, 0.05)
|
||||
--note-warn-bg: rgba(248, 81, 73, 0.05)
|
||||
--table-stripe-bg: #f3f4f6
|
||||
--highlight-background: #f6f8fa
|
||||
--highlight-current-line: #f0f3f6
|
||||
--highlight-selection: #b6d4fe
|
||||
--highlight-foreground: #24292f
|
||||
--highlight-comment: #6e7781
|
||||
--highlight-red: #cf222e
|
||||
--highlight-orange: #953800
|
||||
--highlight-bash-command: #c95100
|
||||
--highlight-yellow: #7d4e00
|
||||
--highlight-green: #116329
|
||||
--highlight-aqua: #0550ae
|
||||
--highlight-blue: #0550ae
|
||||
--highlight-purple: #8250df
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-default: #d1d2d4
|
||||
--color-default-invert: #444
|
||||
--color-gray: invert(#999)
|
||||
--color-border: #6a6a6a
|
||||
--color-default: #e6edf3
|
||||
--color-default-invert: #374151
|
||||
--color-gray: #9aa4b2
|
||||
--color-border: #3d444d
|
||||
--color-background: #fff
|
||||
--color-navy: hsl(210, 25%, 12%)
|
||||
--color-navy-lighter: lighten(hsl(210, 25%, 12%), 7%)
|
||||
--color-content-bg: #1c1c1c
|
||||
--color-link: #0e83cd
|
||||
--color-link-hover: lighten(#0e83cd, 10%)
|
||||
--color-navy: hsl(218, 32%, 9%)
|
||||
--color-navy-lighter: hsl(218, 28%, 15%)
|
||||
--color-content-bg: hsl(218, 28%, 13%)
|
||||
--color-link: #58a6ff
|
||||
--color-link-hover: #79b8ff
|
||||
--panel-shadow: 0 0 64px rgba(0, 0, 0, 0.35)
|
||||
--heading-border: rgba(255, 255, 255, 0.08)
|
||||
--code-border: rgba(255, 255, 255, 0.06)
|
||||
--code-shadow: 0 1px 3px rgba(0, 0, 0, 0.12)
|
||||
--inline-code-bg: var(--highlight-background)
|
||||
--inline-code-color: var(--highlight-foreground)
|
||||
--blockquote-bg: rgba(255, 255, 255, 0.03)
|
||||
--note-tip-bg: rgba(63, 185, 80, 0.07)
|
||||
--note-info-bg: rgba(88, 166, 255, 0.07)
|
||||
--note-warn-bg: rgba(248, 81, 73, 0.07)
|
||||
--table-stripe-bg: rgba(255, 255, 255, 0.04)
|
||||
--highlight-background: hsl(218, 24%, 15%)
|
||||
--highlight-current-line: hsl(218, 18%, 18%)
|
||||
--highlight-selection: hsl(218, 15%, 24%)
|
||||
--highlight-foreground: #e6edf3
|
||||
--highlight-comment: #8b949e
|
||||
--highlight-red: #ff7b72
|
||||
--highlight-orange: #ffa657
|
||||
--highlight-bash-command: var(--highlight-orange)
|
||||
--highlight-yellow: #e3b341
|
||||
--highlight-green: #7ee787
|
||||
--highlight-aqua: #79c0ff
|
||||
--highlight-blue: #79c0ff
|
||||
--highlight-purple: #d2a8ff
|
||||
}
|
||||
}
|
||||
|
||||
// Typography
|
||||
font-sans = "Helvetica Neue", Helvetica, Arial, sans-serif
|
||||
font-sans = -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif
|
||||
font-serif = Garamond, Georgia, "Times New Roman", serif
|
||||
font-mono = "Source Code Pro", Monaco, Menlo, Consolas, monospace
|
||||
font-mono = "Source Code Pro", ui-monospace, Monaco, Menlo, Consolas, monospace
|
||||
font-size = 16px
|
||||
line-height = 1.8em
|
||||
line-height = 1.75
|
||||
|
||||
// Layout
|
||||
max-width = 1800px
|
||||
@@ -48,3 +96,9 @@ mq-mobile = "screen and (max-width: 768px)"
|
||||
mq-normal = "screen and (min-width: 769px)"
|
||||
mq-small = "screen and (min-width: 992px)"
|
||||
mq-tablet = "screen and (min-width: 480px)"
|
||||
|
||||
// Shared code-block chrome (pre, .highlight, playground editors)
|
||||
code-block-chrome()
|
||||
border-radius: 6px
|
||||
border: 1px solid var(--code-border)
|
||||
box-shadow: var(--code-shadow)
|
||||
|
||||
Vendored
+32
-12
@@ -45,12 +45,18 @@
|
||||
memoryLimit: 1e5,
|
||||
renderLimit: 1e5
|
||||
});
|
||||
const colorScheme = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
const editor = createEditor('editorEl', 'liquid');
|
||||
const dataEditor = createEditor('dataEl', 'json');
|
||||
const preview = createEditor('previewEl', 'html');
|
||||
preview.setReadOnly(true);
|
||||
preview.renderer.setShowGutter(false);
|
||||
preview.renderer.setPadding(20);
|
||||
preview.renderer.setPadding(16);
|
||||
|
||||
const editors = [editor, dataEditor, preview];
|
||||
colorScheme.addEventListener('change', function() {
|
||||
editors.forEach(applyEditorTheme);
|
||||
});
|
||||
|
||||
const init = parseArgs(location.hash.slice(1));
|
||||
if (init) {
|
||||
@@ -67,20 +73,35 @@
|
||||
loader.classList.add('hide');
|
||||
loader.setAttribute('aria-busy', false);
|
||||
|
||||
const editors = document.querySelector('#editors');
|
||||
editors.classList.remove('hide');
|
||||
editors.setAttribute('aria-hide', false);
|
||||
const editorsEl = document.querySelector('#editors');
|
||||
editorsEl.classList.remove('hide');
|
||||
editorsEl.setAttribute('aria-hide', false);
|
||||
editors.forEach(function(ed) { ed.resize(); });
|
||||
}
|
||||
|
||||
function getEditorTheme() {
|
||||
return colorScheme.matches
|
||||
? 'ace/theme/tomorrow_night_eighties'
|
||||
: 'ace/theme/github';
|
||||
}
|
||||
|
||||
function applyEditorTheme(editor) {
|
||||
editor.setTheme(getEditorTheme());
|
||||
}
|
||||
|
||||
function createEditor(id, lang) {
|
||||
const editor = ace.edit(id);
|
||||
editor.setTheme('ace/theme/tomorrow_night');
|
||||
editor.getSession().setMode('ace/mode/' + lang);
|
||||
editor.getSession().setOptions({
|
||||
applyEditorTheme(editor);
|
||||
editor.setOptions({
|
||||
fontFamily: '"Source Code Pro", ui-monospace, Monaco, Menlo, Consolas, monospace',
|
||||
fontSize: '14px',
|
||||
showPrintMargin: false,
|
||||
tabSize: 2,
|
||||
useSoftTabs: true
|
||||
useSoftTabs: true,
|
||||
scrollPastEnd: 0.25
|
||||
});
|
||||
editor.renderer.setScrollMargin(15);
|
||||
editor.getSession().setMode('ace/mode/' + lang);
|
||||
editor.renderer.setScrollMargin(8, 8, 0, 0);
|
||||
return editor;
|
||||
}
|
||||
|
||||
@@ -119,9 +140,8 @@
|
||||
}
|
||||
|
||||
function updateVersion(version) {
|
||||
document.querySelector('.version').innerHTML = `
|
||||
liquidjs@<a target="_blank" href="https://www.npmjs.com/package/liquidjs/v/${version}">${version}</a>
|
||||
`
|
||||
document.querySelector('.version').innerHTML =
|
||||
'liquidjs@<a target="_blank" rel="noopener noreferrer" href="https://www.npmjs.com/package/liquidjs/v/' + version + '">' + version + '</a>';
|
||||
}
|
||||
}());
|
||||
|
||||
|
||||
Reference in New Issue
Block a user