add section for quick access to resources

rhysd · May 15, 2024 · f8e07e3 · f8e07e3
1 parent 44d144e
commit f8e07e3
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 15 deletions.
diff --git a/playground/index.html b/playground/index.html
@@ -44,23 +44,36 @@ <h2 class="subtitle">Static checker for GitHub Actions workflow files</h2>
 
     </nav>
     <main>
-      <div id="editor" class="split-pane"></div>
-      <div class="split-pane">
-        <div id="loading" class="notification sticky has-text-centered">Loading WebAssembly binary...</div>
-        <table id="lint-result" class="table sticky is-hoverable">
-          <tbody id="lint-result-body">
-          </tbody>
-        </table>
-        <div id="error-msg" class="notification sticky is-danger is-light">
+      <section id="linter">
+        <div id="editor" class="split-pane"></div>
+        <div class="split-pane">
+          <div id="loading" class="notification sticky has-text-centered">Loading WebAssembly binary...</div>
+          <table id="lint-result" class="table sticky is-hoverable">
+            <tbody id="lint-result-body"></tbody>
+          </table>
+          <div id="error-msg" class="notification sticky is-danger is-light"></div>
+          <div id="success-msg" class="notification sticky">Yay! No error was detected.</div>
         </div>
-        <div id="success-msg" class="notification sticky">Yay! No error was detected.</div>
-      </div>
+      </section>
+      <section id="resources" class="section">
+        <div class="container content">
+          <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/main/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>
+            </ul>
+          </p>
+        </div>
+      </section>
     </main>
     <footer class="footer">
-      <div class="content has-text-centered has-text-grey-light">
+      <div class="content is-small has-text-centered has-text-grey-light">
         <p>
-          <a class="has-text-primary-light" rel="noopener" href="https://github.com/rhysd/actionlint">actionlint</a> by <a class="has-text-primary-light" rel="noopener" href="https://github.com/rhysd">@rhysd</a>.
-          The source code and website content are licensed <a class="has-text-primary-light" rel="noopener" href="https://github.com/rhysd/actionlint/blob/main/LICENSE.txt">MIT</a>.
+          <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>.
         </p>
       </div>
     </footer>

diff --git a/playground/index.ts b/playground/index.ts
@@ -207,7 +207,7 @@ jobs:
             a.href = url;
             a.rel = 'noopener';
             a.textContent = url;
-            a.className = 'has-text-info-light is-underlined';
+            a.className = 'has-text-link-light is-underlined';
             a.addEventListener('click', e => e.stopPropagation());
             ret.push(a);
 

diff --git a/playground/style.css b/playground/style.css
@@ -17,13 +17,18 @@ body {
 }
 
 main {
+  display: flex;
+  flex-direction: column;
+}
+
+#linter {
   width: 100%;
   display: flex;
   flex-direction: row;
 }
 
 @media (width <= 1200px) {
-  main {
+  #linter {
     flex-direction: column;
   }
 }
@@ -85,6 +90,10 @@ main {
   margin-bottom: 0;
 }
 
+#res-icon {
+  margin-right: 0.3em;
+}
+
 .sticky {
   position: sticky;
   top: 0;