Merge pull request #83 from Ladysnake/svelt-sprinkles

Convert Blabber's Dialogue Editor to Svelte
Ladysnake · Apr 7, 2024 · e85e9a5 · e85e9a5
2 parents bac8bd1 + a312629
commit e85e9a5
Show file tree

Hide file tree

Showing 154 changed files with 7,118 additions and 2,586 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -1,2 +1,12 @@
 [{*.js,*.mjs}]
 ij_javascript_spaces_within_object_literal_braces = true
+
+[*.ts]
+ij_typescript_spaces_within_object_literal_braces = true
+
+[*.html]
+indent_size = 2
+
+[*.svelte]
+indent_size = 2
+ij_typescript_spaces_within_object_literal_braces = true
diff --git a/.github/workflows/build_check.yml b/.github/workflows/build_check.yml
@@ -0,0 +1,34 @@
+name: Build Check
+
+on: [ push, pull_request ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          filter: tree:0
+      - name: Setup Ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          bundler-cache: true # runs 'bundle install' and caches installed gems automatically
+          cache-version: 0 # Increment this number if you need to re-download cached gems
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: latest
+          cache: "npm"
+          cache-dependency-path: svelte_sprinkles/package-lock.json
+      - name: Install node modules
+        run: npm --prefix svelte_sprinkles ci
+      - name: Setup Pages
+        id: pages
+        uses: actions/configure-pages@v5
+      - name: Build with Jekyll
+        # Outputs to the './_site' directory by default
+        run: bundle exec jekyll build --baseurl "${{ steps.pages.outputs.base_path }}"
+        env:
+          JEKYLL_ENV: production
diff --git a/.github/workflows/publish.yaml b/.github/workflows/publish.yaml
@@ -28,15 +28,26 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          filter: tree:0
       - name: Setup Ruby
-        uses: ruby/setup-ruby@55283cc23133118229fd3f97f9336ee23a179fcf # v1.146.0
+        uses: ruby/setup-ruby@v1
         with:
           bundler-cache: true # runs 'bundle install' and caches installed gems automatically
           cache-version: 0 # Increment this number if you need to re-download cached gems
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: latest
+          cache: "npm"
+          cache-dependency-path: svelte_sprinkles/package-lock.json
+      - name: Install node modules
+        run: npm --prefix svelte_sprinkles ci
       - name: Setup Pages
         id: pages
-        uses: actions/configure-pages@v3
+        uses: actions/configure-pages@v5
       - name: Build with Jekyll
         # Outputs to the './_site' directory by default
         run: bundle exec jekyll build --baseurl "${{ steps.pages.outputs.base_path }}"
@@ -56,4 +67,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v2
+        uses: actions/deploy-pages@v2
diff --git a/.gitignore b/.gitignore
@@ -6,6 +6,5 @@
 System Volume Information/
 #bootstrap.css
 node_modules/
-package-lock.json
 currentsetting.htm
 _site/
diff --git a/Gemfile b/Gemfile
@@ -10,6 +10,7 @@ gem "jekyll", "~> 4.2.0"
 
 # If you have any plugins, put them here!
 group :jekyll_plugins do
+    gem 'jekyll-redirect-from'
     gem 'jekyll-sitemap'
     gem 'jekyll-responsive-image'
 end

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -29,6 +29,8 @@ GEM
       rouge (~> 3.0)
       safe_yaml (~> 1.0)
       terminal-table (~> 2.0)
+    jekyll-redirect-from (0.16.0)
+      jekyll (>= 3.3, < 5.0)
     jekyll-responsive-image (1.6.0)
       jekyll (>= 2.0, < 5.0)
       rmagick (>= 2.0, < 5.0)
@@ -69,6 +71,7 @@ PLATFORMS
 
 DEPENDENCIES
   jekyll (~> 4.2.0)
+  jekyll-redirect-from
   jekyll-responsive-image
   jekyll-sitemap
   tzinfo-data

diff --git a/README.md b/README.md
@@ -17,7 +17,11 @@ To run the site locally, follow these steps:
 	> Fetching dependency metadata from https://rubygems.org/..
 	> Resolving dependencies...
 	```
-4. Start the site (from the root of this repository):
+4. Setup NPM in the [svelte_sprinkles](./svelte_sprinkles) directory:
+    ```bash
+    $ npm --prefix svelte_sprinkles install
+    ```
+5. Start the site (from the root of this repository):
 	```bash
 	$ bundle exec jekyll serve
 	> Configuration file: /Users/octocat/ladysnake.github.io/_config.yml
@@ -31,4 +35,17 @@ To run the site locally, follow these steps:
 	>    Server address: http://127.0.0.1:4000/
 	>  Server running... press ctrl-c to stop.
 	```
-5. Preview your copy of the site in your web browser at http://localhost:4000.
+6. Preview your copy of the site in your web browser at http://localhost:4000.
+
+## Dynamic Content
+
+### Build-time
+
+This website makes use of a number of [custom Jekyll plugins](./jekyll_plugins), most notably to
+dynamically generate crafting recipe widgets based on the JSON data available in our mod repositories.
+
+### Runtime
+
+Some pages like the Blabber dialogue editor use sprinkles of dynamic content in the form of [Svelte components](./svelte_sprinkles).
+These sprinkles are automatically built each time you run `jekyll build` or `jekyll serve`.
+When working on those sprinkles, one can open a separate terminal and use the `npm run watch` command in the `svelte_sprinkles` directory.
diff --git a/_config.yml b/_config.yml
@@ -5,6 +5,8 @@ markdown: kramdown
 sass:
     style: compressed
 exclude: []
+keep_files:
+    - scripts/sprinkles
 # note that the source attribute is hardcoded by github pages
 collections:
     mods:

diff --git a/jekyll_plugins/build_sprinkles.rb b/jekyll_plugins/build_sprinkles.rb
@@ -0,0 +1,15 @@
+require 'open3'
+
+Jekyll::Hooks.register :site, :after_init do
+  cmd = 'npm run build'
+  stdout, stderr, status = Open3.capture3(cmd, chdir: 'svelte_sprinkles')
+
+  if status.success?
+    puts "Successfully built Svelte sprinkles"
+  else
+    puts "Failed to build Svelte sprinkles"
+    puts "stdout: #{stdout}"
+    puts "stderr: #{stderr}"
+    raise "Svelte Sprinkles build failed"
+  end
+end
diff --git a/public/_data/requiem/wiki_index.yml b/public/_data/requiem/wiki_index.yml
@@ -49,6 +49,7 @@ current:
 removed:
   - title: Opus Daemonium
     icon: img/items/opus_daemonium.png
-    hover_icon: img/items/opus_daemonium_hover_0.png
+    hover_icon: img/items/opus_daemonium_hover_light.png
+    dark_mode_hover_icon: img/items/opus_daemonium_hover_dark.png
     pixel_art: true
     ref: opus_daemonium
diff --git a/public/_includes/cca_sidebar.md b/public/_includes/cca_sidebar.md
@@ -2,6 +2,7 @@
 {:.no_anchor}
 - [Installation (for developers)](/wiki/cardinal-components-api/dev-install)
 - [Installation (for users)](/wiki/cardinal-components-api/user-install)
+{:.toc-subgroup}
 
 ## Basics
 {:.no_anchor}
@@ -10,14 +11,17 @@
 - [Synchronizing components](/wiki/cardinal-components-api/synchronization)
 - [Ticking components](/wiki/cardinal-components-api/ticking)
 - [Migrating components (removing/renaming them)](/wiki/cardinal-components-api/migrating-components)
+{:.toc-subgroup}
 
 ### Upgrade Instructions
 {:.no_anchor}
 - [Upgrading from 5.x to 6.x](/wiki/cardinal-components-api/upgrade-instructions/CCA-6-changes)
+{:.toc-subgroup}
 
 ## Advanced
 {:.no_anchor}
 - [Making custom component providers](/wiki/cardinal-components-api/advanced/custom-component-providers)
+{:.toc-subgroup}
 
 ## Modules
 {:.no_anchor}
@@ -26,6 +30,7 @@
 {:.no_anchor}
 - [Base (core module)](/wiki/cardinal-components-api/modules/base)
 - [Utilities](/wiki/cardinal-components-api/modules/util)
+{:.toc-subgroup}
 
 ### Provider Modules
 {:.no_anchor}
@@ -35,4 +40,5 @@
 - [Saves (levels)](/wiki/cardinal-components-api/modules/level)
 - [Scoreboard and Teams](/wiki/cardinal-components-api/modules/scoreboard)
 - [Chunks](/wiki/cardinal-components-api/modules/chunk)
-- [Blocks](/wiki/cardinal-components-api/modules/block)
+- [Blocks](/wiki/cardinal-components-api/modules/block)
+{:.toc-subgroup}
diff --git a/public/_includes/extra/blabber_editor_link.liquid b/public/_includes/extra/blabber_editor_link.liquid
@@ -1,5 +1,8 @@
-<li>
-    <a class="toc-external-link" href="dialogue_generator">
-        <span>Dialogue Editor</span>
+<hr/>
+<li class="toc-item">
+    <a class="parlour-link toc-external-link" href="/tools/parlour">
+        <span>
+            <img alt="blabber logo" src="/img/blabber.png" width="400" height="400"/>Parlour (dialogue editor)
+        </span>
     </a>
 </li>
diff --git a/public/_includes/extra/chenille_gradle_link.liquid b/public/_includes/extra/chenille_gradle_link.liquid
@@ -1,4 +1,4 @@
-<li>
+<li class="toc-item">
     <a class="toc-external-link gradle-link" href="https://plugins.gradle.org/plugin/io.github.ladysnake.chenille" title="Gradle">
         <span>
             {% include svg/gradle-secondary.svg %} Gradle Repository

diff --git a/public/_includes/header.liquid b/public/_includes/header.liquid
@@ -1,13 +1,13 @@
-{% capture full_title %}{% if page.title %}{{page.title}} - {% endif %}Ladysnake 🐍{% endcapture %}
-{% if page.og.img %}{% assign og_img = page.og.img %}{% endif %}
-{% if page.og.img_alt %}{% assign og_img_alt = page.og.img_alt %}{% endif %}
-{% if page.og.desc %}{% assign meta_desc = page.og.desc %}{% elsif page.slug %}{% endif %}
+{%- capture full_title %}{% if page.title %}{{page.title}} - {% endif %}Ladysnake 🐍{% endcapture -%}
+{%- if page.og.img %}{% assign og_img = page.og.img %}{% endif -%}
+{%- if page.og.img_alt %}{% assign og_img_alt = page.og.img_alt %}{% endif -%}
+{%- if page.og.desc %}{% assign meta_desc = page.og.desc %}{% elsif page.slug %}{% endif -%}
 
-{% if layout.header_preprocessor %}{% include {{ layout.header_preprocessor }} %}{% endif %}
+{%- if layout.header_preprocessor %}{% include {{ layout.header_preprocessor }} %}{% endif -%}
 
-{% unless og_img %}{% assign og_img = "/img/colored-ladysnake-icon.png" %}{% endunless %}
-{% unless og_img_alt %}{% assign og_img_alt = "Ladysnake Logo" %}{% endunless %}
-{% unless meta_desc %}{% assign meta_desc = "Home of a small group of developers called Ladysnake" %}{% endunless %}
+{%- unless og_img %}{% assign og_img = "/img/colored-ladysnake-icon.png" %}{% endunless -%}
+{%- unless og_img_alt %}{% assign og_img_alt = "Ladysnake Logo" %}{% endunless -%}
+{%- unless meta_desc %}{% assign meta_desc = "Home of a small group of developers called Ladysnake" %}{% endunless -%}
 
 <head>
     <meta http-equiv="content-type" content="text/html">
@@ -31,6 +31,9 @@
     <!-- Syntax Highlighting -->
     <link id="syntax-stylesheet" rel="stylesheet" href="{{ site.baseurl }}/css/syntax-github.css">
     <link id="syntax-stylesheet" rel="stylesheet" href="{{ site.baseurl }}/css/syntax-monokai.css">
+    <!-- Dark Mode -->
+    <script src="/scripts/sprinkles/darkmode-toggle.js" type="module"></script>
+    <!-- Embed -->
     <meta property="og:title" content="{{ full_title }}" />
     <meta property="og:type" content="website" />
     <meta property="og:url" content="{{ site.url }}{{ site.baseurl }}" />

diff --git a/public/_includes/mod_links.liquid b/public/_includes/mod_links.liquid
@@ -1,6 +1,6 @@
-<ul role="group">
+<ul role="group" class="toc-list">
     {% if page.curse_project %}
-        <li>
+        <li class="toc-item">
             <a class="cf-link toc-external-link" href="https://www.curseforge.com/minecraft/mc-mods/{{ page.slug }}">
                 <span>
                     {% include svg/cf-logo.svg %} CurseForge Page
@@ -10,7 +10,7 @@
         </li>
     {% endif %}
     {% if page.modrinth %}
-        <li>
+        <li class="toc-item">
             <a class="mr-link toc-external-link" href="https://modrinth.com/mod/{{ page.slug }}">
                 <span>
                     {% include svg/modrinth-logo.svg %} Modrinth Page
@@ -19,7 +19,7 @@
             </a>
         </li>
     {% endif %}
-    <li>
+    <li class="toc-item">
         <a class="gh-link toc-external-link" href="https://github.com/Ladysnake/{{ page.slug }}">
             <span>
                 {% include svg/github-logo.svg %} GitHub Repository

diff --git a/public/_includes/page_listing.liquid b/public/_includes/page_listing.liquid
@@ -5,9 +5,15 @@
     {%- if page.svg_icon %}
         {% include svg/{{page.svg_icon}}.svg %}
     {%- else %}
-       <img alt="{{ page.ref | capitalize }} Icon" src="{{ page.icon }}" class="{% if page.pixel_art %} pixel-art{% endif %}" width="150px" height="150px">
+       <img alt="{{ page.ref | capitalize }} Icon" src="{{ page.icon }}" class="{% if page.pixel_art %}pixel-art{% endif %}" width="150px" height="150px">
+        {%- if page.dark_mode_icon %}
+        <img alt="{{ page.ref | capitalize }} Icon" src="{{ page.dark_mode_icon }}" class="dark-mode-alt{% if page.pixel_art %} pixel-art{% endif %}" aria-hidden="true" width="150px" height="150px" loading="lazy">
+        {%- endif %}
         {%- if page.hover_icon %}
-        <img alt="{{ page.ref | capitalize }} Icon" src="{{ page.hover_icon }}" class="hovered-alt{% if page.pixel_art %} pixel-art{% endif %}" aria-hidden="true" width="150px" height="150px" loading="lazy">
+        <img alt="{{ page.ref | capitalize }} Icon" src="{{ page.hover_icon }}" class="{%- if page.dark_mode_hover_icon %}light-mode-{% endif %}hovered-alt{% if page.pixel_art %} pixel-art{% endif %}" aria-hidden="true" width="150px" height="150px" loading="lazy">
+        {%- endif %}
+        {%- if page.dark_mode_hover_icon %}
+            <img alt="{{ page.ref | capitalize }} Icon" src="{{ page.dark_mode_hover_icon }}" class="dark-mode-hovered-alt{% if page.pixel_art %} pixel-art{% endif %}" aria-hidden="true" width="150px" height="150px" loading="lazy">
         {%- endif %}
     {%- endif %}
     </div>

diff --git a/public/_includes/scrolltop.liquid b/public/_includes/scrolltop.liquid
@@ -1,5 +1,5 @@
 {% comment %} Can't include the SVG directly because embedded SVG reacts very poorly to CSS scaling :( {% endcomment %}
-<button onclick="topFunction()" data-btn-state="hidden" id="scrolltop" title="Go to top">{% include svg/arrow-up.svg %}</button>
+<button onclick="topFunction()" data-btn-state="hidden" id="scrolltop" title="Go to top">{% include svg/octicon-arrow-up.svg %}</button>
 
 <script>
 (() => {

diff --git a/public/_includes/svg/arrow-up.svg b/public/_includes/svg/arrow-up.svg
diff --git a/public/img/darkmode_1.svg → public/_includes/svg/darkmode-disable.svg b/public/img/darkmode_1.svg → public/_includes/svg/darkmode-disable.svg
diff --git a/public/img/darkmode_0.svg → public/_includes/svg/darkmode-enable.svg b/public/img/darkmode_0.svg → public/_includes/svg/darkmode-enable.svg
diff --git a/public/_includes/svg/octicon-arrow-down.svg b/public/_includes/svg/octicon-arrow-down.svg
diff --git a/public/_includes/svg/octicon-arrow-up.svg b/public/_includes/svg/octicon-arrow-up.svg
diff --git a/public/_includes/svg/octicon-browser-24.svg b/public/_includes/svg/octicon-browser-24.svg
diff --git a/public/_includes/svg/octicon-code-square-24.svg b/public/_includes/svg/octicon-code-square-24.svg
diff --git a/public/_includes/svg/octicon-download-24.svg b/public/_includes/svg/octicon-download-24.svg
diff --git a/public/_includes/svg/octicon-gear-16.svg b/public/_includes/svg/octicon-gear-16.svg
diff --git a/public/_includes/svg/octicon-info-16.svg b/public/_includes/svg/octicon-info-16.svg
diff --git a/public/_includes/svg/octicon-pencil-16.svg b/public/_includes/svg/octicon-pencil-16.svg
diff --git a/public/_includes/svg/octicon-plus-16.svg b/public/_includes/svg/octicon-plus-16.svg
diff --git a/public/_includes/svg/octicon-trashcan-24.svg b/public/_includes/svg/octicon-trashcan-24.svg
diff --git a/public/_includes/svg/octicon-trashcan.svg b/public/_includes/svg/octicon-trashcan.svg