From 9c4f97413b7fb124f3ede5d3266854f3b0901903 Mon Sep 17 00:00:00 2001 From: doup Date: Wed, 11 Dec 2024 00:27:43 +0100 Subject: [PATCH 01/10] Add `wgsl` syntax highlighting --- config.toml | 3 + syntaxes/WGSL.sublime-syntax | 216 +++++++++++++++++++++++++++++++++++ 2 files changed, 219 insertions(+) create mode 100644 syntaxes/WGSL.sublime-syntax diff --git a/config.toml b/config.toml index ffa40f5cc9..e9f631900b 100644 --- a/config.toml +++ b/config.toml @@ -26,5 +26,8 @@ taxonomies = [ highlight_code = true highlight_theme = "css" +# Load extra syntaxes (e.g. WGSL) for syntax highlighting +extra_syntaxes_and_themes = ["syntaxes"] + [extra] # Put all your custom variables here diff --git a/syntaxes/WGSL.sublime-syntax b/syntaxes/WGSL.sublime-syntax new file mode 100644 index 0000000000..784b0360f8 --- /dev/null +++ b/syntaxes/WGSL.sublime-syntax @@ -0,0 +1,216 @@ +%YAML 1.2 +--- +# FROM: https://github.com/relrelb/sublime-wgsl +# http://www.sublimetext.com/docs/syntax.html +name: WGSL +file_extensions: [wgsl] +scope: source.wgsl +contexts: + main: + - include: line_comments + - include: block_comments + - include: constants + - include: keywords + - include: attributes + - include: functions + - include: function_calls + - include: types + - include: variables + - include: punctuation + attributes: + # attribute declaration + - match: "(@)([A-Za-z_]+)" + scope: meta.attribute.wgsl + captures: + 1: keyword.operator.attribute.at + 2: entity.name.attribute.wgsl + block_comments: + # empty block comments + - match: /\*\*/ + scope: comment.block.wgsl + # block documentation comments + - match: /\*\* + push: + - meta_scope: comment.block.documentation.wgsl + - match: \*/ + pop: true + - include: block_comments + # block comments + - match: /\*(?!\*) + push: + - meta_scope: comment.block.wgsl + - match: \*/ + pop: true + - include: block_comments + constants: + # boolean constant + - match: \b(true|false)\b + scope: constant.language.boolean.wgsl + # decimal float literal + - match: '(\b(0|[1-9][0-9]*)[fh]\b|([0-9]*\.[0-9]+|[0-9]+\.[0-9]*)([eE][+-]?[0-9]+)?[fh]?|[0-9]+[eE][+-]?[0-9]+[fh]?)' + scope: constant.numeric.float.wgsl + # decimal int literal + - match: '\b(0|[1-9][0-9]*)[iu]?\b' + scope: constant.numeric.decimal.wgsl + # hexadecimal int literal + - match: '\b0[xX][0-9a-fA-F]+[iu]?\b' + scope: constant.numeric.decimal.wgsl + function_calls: + # function/method calls + - match: '([A-Za-z0-9_]+)(\()' + captures: + 1: entity.name.function.wgsl + 2: punctuation.brackets.round.wgsl + push: + - meta_scope: meta.function.call.wgsl + - match: \) + captures: + 0: punctuation.brackets.round.wgsl + pop: true + - include: line_comments + - include: block_comments + - include: constants + - include: keywords + - include: attributes + - include: function_calls + - include: types + - include: variables + - include: punctuation + functions: + # function definition + - match: '\b(fn)\s+([A-Za-z0-9_]+)((\()|(<))' + captures: + 1: keyword.other.fn.wgsl + 2: entity.name.function.wgsl + 4: punctuation.brackets.round.wgsl + push: + - meta_scope: meta.function.definition.wgsl + - match: '\{' + captures: + 0: punctuation.brackets.curly.wgsl + pop: true + - include: line_comments + - include: block_comments + - include: constants + - include: keywords + - include: attributes + - include: function_calls + - include: types + - include: variables + - include: punctuation + keywords: + # other keywords + - match: \b(bitcast|block|break|case|continue|continuing|default|discard|else|elseif|enable|fallthrough|for|function|if|loop|override|private|read|read_write|return|storage|switch|uniform|while|workgroup|write)\b + scope: keyword.control.wgsl + # reserved keywords + - match: \b(asm|const|do|enum|handle|mat|premerge|regardless|typedef|unless|using|vec|void)\b + scope: keyword.control.wgsl + # storage keywords + - match: \b(let|var)\b + scope: keyword.other.wgsl storage.type.wgsl + # type keyword + - match: \b(type)\b + scope: keyword.declaration.type.wgsl storage.type.wgsl + # enum keyword + - match: \b(enum)\b + scope: keyword.declaration.enum.wgsl storage.type.wgsl + # struct keyword + - match: \b(struct)\b + scope: keyword.declaration.struct.wgsl storage.type.wgsl + # fn + - match: \bfn\b + scope: keyword.other.fn.wgsl + # logical operators + - match: (\^|\||\|\||&&|<<|>>|!)(?!=) + scope: keyword.operator.logical.wgsl + # logical AND, borrow references + - match: "&(?![&=])" + scope: keyword.operator.borrow.and.wgsl + # assignment operators + - match: (\+=|-=|\*=|/=|%=|\^=|&=|\|=|<<=|>>=) + scope: keyword.operator.assignment.wgsl + # single equal + - match: "(?])=(?!=|>)" + scope: keyword.operator.assignment.equal.wgsl + # comparison operators + - match: (=(=)?(?!>)|!=|<=|(?=) + scope: keyword.operator.comparison.wgsl + # math operators + - match: '(([+%]|(\*(?!\w)))(?!=))|(-(?!>))|(/(?!/))' + scope: keyword.operator.math.wgsl + # dot access + - match: \.(?!\.) + scope: keyword.operator.access.dot.wgsl + # dashrocket, skinny arrow + - match: "->" + scope: keyword.operator.arrow.skinny.wgsl + line_comments: + # single line comment + - match: \s*//.* + scope: comment.line.double-slash.wgsl + punctuation: + # comma + - match: "," + scope: punctuation.comma.wgsl + # curly braces + - match: "[{}]" + scope: punctuation.brackets.curly.wgsl + # parentheses, round brackets + - match: "[()]" + scope: punctuation.brackets.round.wgsl + # semicolon + - match: ; + scope: punctuation.semi.wgsl + # square brackets + - match: '[\[\]]' + scope: punctuation.brackets.square.wgsl + # angle brackets + - match: "(?]" + scope: punctuation.brackets.angle.wgsl + types: + # scalar types + - match: \b(bool|i32|u32|f16|f32)\b + scope: storage.type.wgsl + # reserved scalar types + - match: \b(i64|u64|f64)\b + scope: storage.type.wgsl + # vector type aliasses + - match: \b(vec2i|vec3i|vec4i|vec2u|vec3u|vec4u|vec2f|vec3f|vec4f|vec2h|vec3h|vec4h)\b + scope: storage.type.wgsl + # matrix type aliasses + - match: \b(mat2x2f|mat2x3f|mat2x4f|mat3x2f|mat3x3f|mat3x4f|mat4x2f|mat4x3f|mat4x4f|mat2x2h|mat2x3h|mat2x4h|mat3x2h|mat3x3h|mat3x4h|mat4x2h|mat4x3h|mat4x4h)\b + scope: storage.type.wgsl + # vector/matrix types + - match: '\b(vec[2-4]|mat[2-4]x[2-4])\b' + scope: storage.type.wgsl + # atomic types + - match: \b(atomic)\b + scope: storage.type.wgsl + # array types + - match: \b(array)\b + scope: storage.type.wgsl + # sampled texture types + - match: \b(texture_1d|texture_2d|texture_2d_array|texture_3d|texture_cube|texture_cube_array)\b + scope: storage.type.wgsl + # multisampled texture types + - match: \b(texture_multisampled_2d|texture_depth_multisampled_2d)\b + scope: storage.type.wgsl + # external sampled texture types + - match: \b(texture_external)\b + scope: storage.type.wgsl + # storage texture types + - match: \b(texture_storage_1d|texture_storage_2d|texture_storage_2d_array|texture_storage_3d)\b + scope: storage.type.wgsl + # depth texture types + - match: \b(texture_depth_2d|texture_depth_2d_array|texture_depth_cube|texture_depth_cube_array)\b + scope: storage.type.wgsl + # sampler type + - match: \b(sampler|sampler_comparison)\b + scope: storage.type.wgsl + # custom type + - match: '\b([A-Z][A-Za-z0-9]*)\b' + scope: entity.name.type.wgsl + variables: + # variables + - match: '\b(? Date: Wed, 11 Dec 2024 00:27:59 +0100 Subject: [PATCH 02/10] Add "tabs" BEM component --- sass/components/_tabs.scss | 65 ++++++++++++++++++++++++++++++++++++++ sass/site.scss | 1 + 2 files changed, 66 insertions(+) create mode 100644 sass/components/_tabs.scss diff --git a/sass/components/_tabs.scss b/sass/components/_tabs.scss new file mode 100644 index 0000000000..a67e64488e --- /dev/null +++ b/sass/components/_tabs.scss @@ -0,0 +1,65 @@ +.tabs { + $h-padding: 16px; + + display: flex; + flex-wrap: wrap; + + &__radio { + position: absolute; + opacity: 0; + } + + &__label { + width: 100%; + cursor: pointer; + text-align: center; + text-wrap: nowrap; + padding: 12px $h-padding; + position: relative; + border-radius: 8px; + + &:hover { + background-color: rgba(#fff, 0.05); + } + + &:active { + background-color: rgba(#fff, 0.1); + } + + &:after { + content: ""; + display: block; + height: 2px; + border-radius: 2px; + background-color: transparent; + position: absolute; + bottom: 0px; + left: $h-padding; + right: $h-padding; + transition: background-color $duration; + } + } + + &__panel { + display: none; + width: 100%; + } +} + +.tabs__radio:checked + .tabs__label:after { + background-color: $link-color; +} + +.tabs__radio:checked + .tabs__label + .tabs__panel { + display: block; +} + +@media #{$bp-tablet-portrait-up} { + .tabs__panel { + order: 99; + } + + .tabs__label { + width: min-content; + } +} diff --git a/sass/site.scss b/sass/site.scss index 1aa47aa9b8..53265a36a0 100644 --- a/sass/site.scss +++ b/sass/site.scss @@ -49,6 +49,7 @@ @import "components/pr-list"; @import "components/sponsors"; @import "components/syntax-theme"; +@import "components/tabs"; @import "components/tree-menu"; @import "components/asset-card"; @import "components/image_compare"; From dceda53cf88798a1d213c14e972228afc08717ea Mon Sep 17 00:00:00 2001 From: doup Date: Wed, 11 Dec 2024 00:28:19 +0100 Subject: [PATCH 03/10] Add tabs for the code in examples --- sass/components/_example.scss | 4 ++++ templates/layouts/example.html | 35 ++++++++++++++++++++-------------- 2 files changed, 25 insertions(+), 14 deletions(-) diff --git a/sass/components/_example.scss b/sass/components/_example.scss index 5f31eb3bd8..43da8d6ad0 100644 --- a/sass/components/_example.scss +++ b/sass/components/_example.scss @@ -47,4 +47,8 @@ grid-area: github; text-align: right; } + + &__code-tabs { + margin-top: 16px; + } } diff --git a/templates/layouts/example.html b/templates/layouts/example.html index 0b8b860020..27d011ae97 100644 --- a/templates/layouts/example.html +++ b/templates/layouts/example.html @@ -26,23 +26,30 @@

{{ category.title }} / {{ page.title }}

-
+
{% set filename = page.extra.code_path | split(pat="/") | last %} - {{ filename }}: + + +
+
+ {% set code = load_data(path=page.extra.code_path) %} + {% set code_md = "```rust" ~ newline ~ code ~ "```" %} + {{ code_md | markdown(inline=true) | safe }} +
+
- {% set code = load_data(path=page.extra.code_path) %} - {% set code_md = "```rust" ~ newline ~ code ~ "```" %} - {{ code_md | markdown(inline=true) | safe }} + {% for shader in page.extra.shader_code_paths %} + + +
+
+ {% set code = load_data(path="static/assets/examples/" ~ shader) %} + {% set code_md = "```wgsl" ~ newline ~ code ~ "```" %} + {{ code_md | markdown(inline=true) | safe }} +
+
+ {% endfor %}
- {% for shader in page.extra.shader_code_paths %} -
- {{ shader }}: - - {% set code = load_data(path="static/assets/examples/" ~ shader) %} - {% set code_md = "```rust" ~ newline ~ code ~ "```" %} - {{ code_md | markdown(inline=true) | safe }} -
- {% endfor %}