danog/sass-site
1
0
Fork 0
mirror of https://github.com/danog/sass-site.git synced 2025-01-22 13:51:46 +01:00
Code Issues Packages Projects Releases Wiki Activity

Initial pass at getting code styling close to existing

Browse Source
This commit is contained in:
James Stuckey Weber 2023-06-05 16:02:44 +00:00
parent 45ee2c4b03
commit 85d5abcd03
3 changed files with 69 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
source/assets/js/playground/editor-setup.ts
View File

@ -6,6 +6,8 @@ import {
completionKeymap, completionKeymap,
} from '@codemirror/autocomplete'; } from '@codemirror/autocomplete';
import { defaultKeymap, history, historyKeymap } from '@codemirror/commands'; import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
import { css as langCss } from '@codemirror/lang-css';
import { sass as langSass } from '@codemirror/lang-sass';
import { import {
bracketMatching, bracketMatching,
defaultHighlightStyle, defaultHighlightStyle,
@ -29,42 +31,54 @@ import {
rectangularSelection, rectangularSelection,
} from '@codemirror/view'; } from '@codemirror/view';
import { playgroundHighlightStyle, playgroundTheme } from './theme.js';
const editorSetup = (() => [ const editorSetup = (() => [
lineNumbers(), [
highlightActiveLineGutter(), lineNumbers(),
highlightSpecialChars(), highlightActiveLineGutter(),
history(), highlightSpecialChars(),
// foldGutter(), history(),
// drawSelection(), // foldGutter(),
dropCursor(), // drawSelection(),
// EditorState.allowMultipleSelections.of(true), dropCursor(),
indentOnInput(), // EditorState.allowMultipleSelections.of(true),
syntaxHighlighting(defaultHighlightStyle, { fallback: true }), indentOnInput(),
bracketMatching(), syntaxHighlighting(playgroundHighlightStyle),
closeBrackets(), syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
autocompletion(), bracketMatching(),
// rectangularSelection(), closeBrackets(),
// crosshairCursor(), autocompletion(),
highlightActiveLine(), // rectangularSelection(),
highlightSelectionMatches(), // crosshairCursor(),
keymap.of([ highlightActiveLine(),
...closeBracketsKeymap, highlightSelectionMatches(),
...defaultKeymap, keymap.of([
...searchKeymap, ...closeBracketsKeymap,
...historyKeymap, ...defaultKeymap,
...foldKeymap, ...searchKeymap,
...completionKeymap, ...historyKeymap,
...lintKeymap, ...foldKeymap,
]), ...completionKeymap,
...lintKeymap,
]),
],
langSass(),
playgroundTheme,
])(); ])();
const outputSetup = (() => [ const outputSetup = (() => [
lineNumbers(), [
highlightSpecialChars(), lineNumbers(),
// foldGutter(), highlightSpecialChars(),
syntaxHighlighting(defaultHighlightStyle, { fallback: true }), // foldGutter(),
highlightActiveLine(), syntaxHighlighting(playgroundHighlightStyle),
EditorState.readOnly.of(true), syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
highlightActiveLine(),
EditorState.readOnly.of(true),
],
langCss(),
playgroundTheme,
])(); ])();
export { editorSetup, outputSetup }; export { editorSetup, outputSetup };

9
source/assets/js/playground/playground.ts
View File

@ -1,18 +1,14 @@
import { sass as langSass } from '@codemirror/lang-sass';
import { Text } from '@codemirror/state'; import { Text } from '@codemirror/state';
import { EditorView } from 'codemirror'; import { EditorView } from 'codemirror';
import { compileString } from '../sass.default.js'; import { compileString } from '../sass.default.js';
import { editorSetup, outputSetup } from './editor-setup.js'; import { editorSetup, outputSetup } from './editor-setup.js';
import { playgroundTheme } from './theme.js';
function setupPlayground() { function setupPlayground() {
// eslint-disable-next-line @typescript-eslint/no-unsafe-call // eslint-disable-next-line @typescript-eslint/no-unsafe-call
const editor = new EditorView({ const editor = new EditorView({
extensions: [ extensions: [
editorSetup, ...editorSetup,
langSass(),
playgroundTheme,
EditorView.updateListener.of((v) => { EditorView.updateListener.of((v) => {
if (v.docChanged) { if (v.docChanged) {
updateCSS(); updateCSS();
@ -24,8 +20,7 @@ function setupPlayground() {
// Setup CSS view // Setup CSS view
const viewer = new EditorView({ const viewer = new EditorView({
// TODO: Confirm lang sass is good for CSS. extensions: [...outputSetup],
extensions: [outputSetup, langSass(), playgroundTheme],
parent: document.getElementById('css-view') || document.body, parent: document.getElementById('css-view') || document.body,
}); });

23
source/assets/js/playground/theme.ts
View File

@ -1,3 +1,5 @@
import { HighlightStyle } from '@codemirror/language';
import { tags } from '@lezer/highlight';
import { EditorView } from 'codemirror'; import { EditorView } from 'codemirror';
// TODO: Consider moving to vendor scss // TODO: Consider moving to vendor scss
@ -5,16 +7,33 @@ const playgroundTheme = EditorView.baseTheme({
'&': { '&': {
// TODO: Make dynamic // TODO: Make dynamic
height: '500px', height: '500px',
'font-size': 'var(--sl-font-size--small)', 'font-size': 'var(--sl-font-size--x-small)',
'background-color': 'var(--sl-color--code-background)', 'background-color': 'var(--sl-color--code-background)',
color: 'var(--sl-color--code-text)',
}, },
'.cm-gutters': { '.cm-gutters': {
'background-color': 'var(--sl-color--code-background)', 'background-color': 'var(--sl-color--code-background)',
'border-right': 'none', 'border-right': 'none',
}, },
'.cm-content': {
// Pull from _typography?
'font-family':
"'Source Code Pro', 'SF Mono', monaco, inconsolata, 'Fira Mono', 'Droid Sans Mono', monospace, monospace;",
},
'.cm-scroller': { '.cm-scroller': {
overflow: 'auto', overflow: 'auto',
}, },
}); });
export { playgroundTheme }; const playgroundHighlightStyle = HighlightStyle.define([
{
tag: [tags.special(tags.variableName), tags.tagName],
color: '#445588',
fontWeight: 'bold',
},
{ tag: tags.definitionKeyword, fontWeight: 'bold' },
{ tag: tags.comment, color: '#006666', fontStyle: 'italic' },
{ tag: tags.propertyName, color: '#990000' },
]);
export { playgroundTheme, playgroundHighlightStyle };