deploy from 2f01274

rhysd · Jun 9, 2024 · 679e024 · 679e024
1 parent c4171c3
commit 679e024
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 27 deletions.
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="dark">
+<html lang="en" >
   <head>
     <title>actionlint playground</title>
     <meta charset="utf-8"/>
@@ -60,20 +60,20 @@ <h2 class="subtitle">Static checker for GitHub Actions workflow files</h2>
           <h2><i id="res-icon" class="devicon-githubactions-plain"></i>Resources</h2>
           <p>
             <ul>
-              <li><a class="has-text-link-light" target="_blank" rel="noopener" href="https://github.com/rhysd/actionlint/blob/v1.7.1/docs/checks.md">Checks by actionlint</a></li>
-              <li><a class="has-text-link-light" target="_blank" rel="noopener" href="https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions">Workflow syntax for GitHub Actions</a></li>
-              <li><a class="has-text-link-light" target="_blank" rel="noopener" href="https://docs.github.com/en/actions/learn-github-actions/contexts">Available contexts in workflow</a></li>
-              <li><a class="has-text-link-light" target="_blank" rel="noopener" href="https://docs.github.com/en/actions/security-guides/security-hardening-for-github-actions">Security hardening for GitHub Actions</a></li>
+              <li><a class="has-text-link-my-light" target="_blank" rel="noopener" href="https://github.com/rhysd/actionlint/blob/v1.7.1/docs/checks.md">Checks by actionlint</a></li>
+              <li><a class="has-text-link-my-light" target="_blank" rel="noopener" href="https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions">Workflow syntax for GitHub Actions</a></li>
+              <li><a class="has-text-link-my-light" target="_blank" rel="noopener" href="https://docs.github.com/en/actions/learn-github-actions/contexts">Available contexts in workflow</a></li>
+              <li><a class="has-text-link-my-light" target="_blank" rel="noopener" href="https://docs.github.com/en/actions/security-guides/security-hardening-for-github-actions">Security hardening for GitHub Actions</a></li>
             </ul>
           </p>
         </div>
       </section>
     </main>
     <footer class="footer">
-      <div class="content is-small has-text-centered has-text-grey-light">
+      <div class="content is-small has-text-centered has-text-grey">
         <p>
-          <a class="has-text-link-light" rel="noopener" href="https://github.com/rhysd/actionlint">actionlint</a> by <a class="has-text-link-light" rel="noopener" href="https://github.com/rhysd">@rhysd</a>.
-          The source code and website content are licensed <a class="has-text-link-light" rel="noopener" href="https://github.com/rhysd/actionlint/blob/main/LICENSE.txt">MIT</a>.
+          <a class="has-text-link-my-light" rel="noopener" href="https://github.com/rhysd/actionlint">actionlint</a> by <a class="has-text-link-my-light" rel="noopener" href="https://github.com/rhysd">@rhysd</a>.
+          The source code and website content are licensed <a class="has-text-link-my-light" rel="noopener" href="https://github.com/rhysd/actionlint/blob/main/LICENSE.txt">MIT</a>.
         </p>
       </div>
     </footer>

diff --git a/index.js b/index.js
diff --git a/index.js.map b/index.js.map
diff --git a/index.ts b/index.ts
@@ -19,6 +19,11 @@
     const checkUrlInput = getElementById('check-url-input') as HTMLInputElement;
     const permalinkButton = getElementById('permalink-btn');
     const invalidInputMessage = getElementById('invalid-input');
+    const preferDark = window.matchMedia('(prefers-color-scheme: dark)');
+
+    function colorTheme(isDark: boolean): 'material-darker' | 'default' {
+        return isDark ? 'material-darker' : 'default';
+    }
 
     async function getRemoteSource(url: string): Promise<string> {
         function getUrlToFetch(u: string): string {
@@ -104,7 +109,7 @@ jobs:
 
     const editorConfig: CodeMirror.EditorConfiguration = {
         mode: 'yaml',
-        theme: 'material-darker',
+        theme: colorTheme(preferDark.matches),
         lineNumbers: true,
         lineWrapping: true,
         autofocus: true,
@@ -207,7 +212,7 @@ jobs:
             a.href = url;
             a.rel = 'noopener';
             a.textContent = url;
-            a.className = 'has-text-link-light is-underlined';
+            a.className = 'has-text-link-my-light is-underlined';
             a.addEventListener('click', e => e.stopPropagation());
             ret.push(a);
 
@@ -306,6 +311,10 @@ jobs:
         window.location.hash = b64;
     });
 
+    preferDark.addListener(event => {
+        editor.setOption('theme', colorTheme(event.matches));
+    });
+
     const go = new Go();
 
     let result;

diff --git a/main.wasm b/main.wasm
diff --git a/style.css b/style.css
@@ -27,12 +27,6 @@ main {
   flex-direction: row;
 }
 
-@media (width <= 1200px) {
-  #linter {
-    flex-direction: column;
-  }
-}
-
 #version {
   margin-left: 1em;
 }
@@ -61,12 +55,6 @@ main {
   flex-direction: column;
 }
 
-@media (width <= 1200px) {
-  .split-pane {
-    width: 100%;
-  }
-}
-
 #error-msg,
 #success-msg {
   display: none;
@@ -83,7 +71,7 @@ main {
 }
 
 #lint-result {
-  --bulma-table-background-color: #222;
+  --bulma-table-background-color: #efeff8;
 
   border-radius: 8px;
   cursor: pointer;
@@ -102,3 +90,24 @@ main {
 footer {
   margin-top: 32px;
 }
+
+@media (width <= 1200px) {
+  #linter {
+    flex-direction: column;
+  }
+
+  .split-pane {
+    width: 100%;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  #lint-result {
+    --bulma-table-background-color: #222;
+  }
+
+  /* Similar to `.has-text-link-light`, but use a light color only in dark mode */
+  .has-text-link-my-light {
+    --bulma-color-l: var(--bulma-link-light-l);
+  }
+}
diff --git a/usage.html b/usage.html