言語のアイコンを追加してみた

Author: na-trium-144

app/pagesList.ts

@@ -90,6 +90,14 @@ export const pagesList = [
       { id: 12, title: "プロジェクトの分割とビルド" },
     ],
   },
+  {
+    id: "rust",
+    lang: "Rust",
+    description: "a",
+    pages: [
+      { id: 1, title: "Rustの世界へようこそ" },
+    ],
+  },
 ] as const;
 
 // ${lang_id}-${page_id} から言語名を取得

app/sidebar.tsx

@@ -14,6 +14,8 @@ import {
 } from "react";
 import { DynamicMarkdownSection } from "./[docs_id]/pageContent";
 import clsx from "clsx";
+import { LanguageIcon } from "./terminal/icons";
+import { RuntimeLang } from "./terminal/runtime";
 
 export interface ISidebarMdContext {
   loadedDocsId: string;
@@ -159,7 +161,13 @@ export function Sidebar() {
                 setDetailsOpen(newDetailsOpen);
               }}
             >
-              <summary>{group.lang}</summary>
+              <summary>
+                <LanguageIcon
+                  className="w-4 h-4"
+                  lang={group.id as RuntimeLang}
+                />
+                {group.lang}
+              </summary>
               <ul>
                 {group.pages.map((page) => (
                   <li key={page.id}>

app/terminal/icons.tsx

@@ -0,0 +1,121 @@
+import { RuntimeLang } from "./runtime";
+
+interface Props {
+  lang: RuntimeLang;
+  className?: string;
+}
+export function LanguageIcon(props: Props) {
+  switch (props.lang) {
+    case "cpp":
+      return (
+        <svg
+          className={props.className}
+          fill="currentColor"
+          viewBox="0 0 32 32"
+        >
+          <path d="M28.586 16.494h-0.987v0.987h-0.987v-0.987h-0.987v-0.987h0.987v-0.987h0.987v0.987h0.987zM24.885 16.494h-0.987v0.987h-0.987v-0.987h-0.987v-0.987h0.987v-0.987h0.987v0.987h0.987zM16 24.885c-4.907-0.001-8.884-3.978-8.884-8.885s3.978-8.885 8.885-8.885c3.27 0 6.128 1.767 7.67 4.398l0.023 0.042-3.844 2.224c-0.782-1.339-2.213-2.224-3.849-2.224-2.454 0-4.444 1.989-4.444 4.444s1.989 4.444 4.444 4.444c1.636 0 3.066-0.884 3.837-2.201l0.011-0.021 3.846 2.224c-1.57 2.669-4.426 4.434-7.694 4.44h-0.001zM28.989 8.502c-0.198-0.356-0.474-0.646-0.805-0.856l-0.010-0.006-11.017-6.361c-0.336-0.174-0.733-0.276-1.155-0.276s-0.819 0.102-1.169 0.282l0.014-0.007-11.019 6.361c-0.663 0.438-1.106 1.163-1.153 1.993l-0 0.007v12.721c0.048 0.837 0.491 1.561 1.144 1.994l0.010 0.006 11.017 6.361c0.336 0.173 0.734 0.275 1.155 0.275s0.819-0.102 1.169-0.281l-0.014 0.007 11.017-6.361c0.663-0.438 1.105-1.163 1.152-1.993l0-0.007v-12.721c-0.011-0.422-0.135-0.813-0.341-1.147l0.006 0.010z"></path>
+        </svg>
+      );
+    case "python":
+      return (
+        <svg
+          className={props.className}
+          fill="currentColor"
+          viewBox="0 0 512 512"
+          enableBackground="new 0 0 512 512"
+        >
+          <g id="5151e0c8492e5103c096af88a51ec286">
+            <path
+              display="inline"
+              d="M194.734,246.879h121.768c33.9,0,60.956-27.908,60.956-61.95V68.846c0-33.035-27.87-57.855-60.956-63.371
+    c-20.943-3.484-42.673-5.069-63.51-4.971c-20.845,0.097-40.74,1.874-58.258,4.971c-51.586,9.117-60.952,28.191-60.952,63.371
+    v46.463H255.69v15.486H133.782h-45.75c-35.434,0-66.459,21.295-76.158,61.808c-11.192,46.435-11.694,75.409,0,123.898
+    c8.666,36.088,29.359,61.807,64.79,61.807h41.917v-55.699C118.581,282.37,153.39,246.879,194.734,246.879z M187.063,84.333
+    c-12.636,0-22.877-10.355-22.877-23.161c0-12.849,10.241-23.3,22.877-23.3c12.594,0,22.873,10.451,22.873,23.3
+    C209.936,73.979,199.658,84.333,187.063,84.333z M499.37,192.603c-8.761-35.27-25.484-61.808-60.96-61.808h-45.75v54.134
+    c0,41.972-35.582,77.292-76.158,77.292H194.734c-33.349,0-60.952,28.547-60.952,61.954v116.079
+    c0,33.037,28.726,52.476,60.952,61.943c38.589,11.353,75.59,13.409,121.768,0c30.688-8.876,60.956-26.764,60.956-61.943v-46.461
+    H255.69v-15.486h121.768h60.952c35.431,0,48.638-24.715,60.96-61.807C512.092,278.314,511.549,241.589,499.37,192.603z
+     M324.178,424.766c12.64,0,22.873,10.356,22.873,23.156c0,12.85-10.233,23.305-22.873,23.305
+    c-12.595,0-22.877-10.455-22.877-23.305C301.301,435.122,311.583,424.766,324.178,424.766z"
+            ></path>
+          </g>
+        </svg>
+      );
+    case "ruby":
+      return (
+        <svg
+          className={props.className}
+          fill="currentColor"
+          viewBox="0 0 128 128"
+          /*xmlns:dc="http://purl.org/dc/elements/1.1/"
+          xmlns:cc="http://creativecommons.org/ns#"
+          xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+          xmlns:svg="http://www.w3.org/2000/svg"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"*/
+        >
+          {/*<title>Ruby Icon</title>
+          <desc>This is shape (source) for Clarity vector icon theme for gtk</desc>
+          <metadata>
+              <rdf:RDF>
+                  <cc:Work rdf:about="">
+                      <dc:title>Ruby Icon</dc:title>
+                      <dc:description>This is shape (source) for Clarity vector icon theme for gtk</dc:description>
+                      <dc:creator>
+                          <cc:Agent>
+                              <dc:title>Jakub Jankiewicz</dc:title>
+                          </cc:Agent>
+                      </dc:creator>
+                      <dc:rights>
+                          <cc:Agent>
+                              <dc:title>Jakub Jankiewicz</dc:title>
+                          </cc:Agent>
+                      </dc:rights>
+                      <dc:date>2010</dc:date>
+                      <dc:format>image/svg+xml</dc:format>
+                      <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+                      <cc:license rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
+                   </cc:Work>
+              </rdf:RDF>
+          </metadata>*/}
+          <path d="m 90.608806,12.836802 c 4.109158,0 7.629593,0.316929 11.044984,1.597702 10.27736,3.854008 13.27801,7.638242 12.85108,13.615199 -0.146,2.043936 -0.64281,5.247026 -1.45877,8.961023 L 80.953129,20.477985 c -0.934471,-3.219044 -2.206311,-5.628765 -4.932036,-7.363322 5.763493,0 10.478557,-0.277861 14.587713,-0.277861 z m -21.881569,2.848077 c 3.021551,-0.08185 5.526352,0.612095 7.363322,2.22289 7.347881,6.44319 0.670205,24.788433 -14.93504,40.915062 C 45.550274,74.949457 26.893688,82.771276 19.545805,76.328086 12.197925,69.8849 18.945064,51.539653 34.550309,35.413025 46.254243,23.318053 59.662584,15.930407 68.727237,15.684879 z m 45.986023,22.159431 -5.48776,72.52179 -63.838604,4.37631 17.157929,-8.05799 22.993014,-18.130441 17.852581,-22.298361 10.2114,-20.770125 z m -1.94503,0.555722 C 111.10451,45.34532 107.99577,54.095176 102.48737,62.22663 98.314226,68.386989 91.816298,75.789675 84.912652,82.718894 76.984758,90.676151 68.567407,98.0417 62.405895,102.37758 51.544011,110.02115 42.18104,114.65256 33.994587,115.1592 L 48.5823,76.883808 84.912652,82.718894 76.50735,48.958758 z M 14.127511,78.48151 c 0,0 0.352702,2.09962 3.751126,3.751126 L 33.299934,115.1592 c -0.269743,0.009 -0.496896,0 -0.764118,0 -8.538506,0 -15.429959,-2.09983 -17.991513,-10.21141 -2.561549,-8.11158 -0.416792,-26.46628 -0.416792,-26.46628 z" />
+        </svg>
+      );
+    case "javascript":
+      return (
+        <svg className={props.className} viewBox="0 0 24 24">
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M0 0H24V24H0V0ZM18.3467 20.1196C17.2343 20.1196 16.6053 19.5394 16.1219 18.7501L14.2891 19.8149C14.9512 21.123 16.3044 22.1211 18.3989 22.1211C20.5409 22.1211 22.136 21.0088 22.136 18.9783C22.136 17.0949 21.0541 16.2571 19.1379 15.4354L18.5741 15.1939C17.6065 14.7749 17.1874 14.501 17.1874 13.8244C17.1874 13.277 17.6061 12.8579 18.2667 12.8579C18.9143 12.8579 19.3314 13.131 19.7181 13.8244L21.4743 12.6968C20.7314 11.3901 19.7006 10.891 18.2667 10.891C16.2526 10.891 14.9638 12.1787 14.9638 13.8701C14.9638 15.7063 16.0449 16.5749 17.6724 17.2682L18.2362 17.5101C19.2648 17.96 19.8781 18.2339 19.8781 19.0072C19.8781 19.6526 19.2811 20.1196 18.3467 20.1196ZM9.60647 20.1055C8.83161 20.1055 8.50933 19.5741 8.15504 18.9455L6.31923 20.057C6.85104 21.1825 7.89676 22.117 9.70247 22.117C11.7009 22.117 13.0701 21.0541 13.0701 18.7189V11.0198H10.8149V18.6884C10.8149 19.8156 10.3474 20.1055 9.60647 20.1055Z"
+            fill="currentColor"
+          />
+        </svg>
+      );
+    case "typescript":
+      return (
+        <svg
+          className={props.className}
+          fill="currentColor"
+          viewBox="0 0 32 32"
+        >
+          <path d="M0 16v16h32v-32h-32zM25.786 14.724c0.813 0.203 1.432 0.568 2.005 1.156 0.292 0.312 0.729 0.885 0.766 1.026 0.010 0.042-1.38 0.974-2.224 1.495-0.031 0.021-0.156-0.109-0.292-0.313-0.411-0.599-0.844-0.859-1.505-0.906-0.969-0.063-1.594 0.443-1.589 1.292-0.005 0.208 0.042 0.417 0.135 0.599 0.214 0.443 0.615 0.708 1.854 1.245 2.292 0.984 3.271 1.635 3.88 2.557 0.682 1.031 0.833 2.677 0.375 3.906-0.51 1.328-1.771 2.234-3.542 2.531-0.547 0.099-1.849 0.083-2.438-0.026-1.286-0.229-2.505-0.865-3.255-1.698-0.297-0.323-0.87-1.172-0.833-1.229 0.016-0.021 0.146-0.104 0.292-0.188s0.682-0.396 1.188-0.688l0.922-0.536 0.193 0.286c0.271 0.411 0.859 0.974 1.214 1.161 1.021 0.542 2.422 0.464 3.115-0.156 0.281-0.234 0.438-0.594 0.417-0.958 0-0.37-0.047-0.536-0.24-0.813-0.25-0.354-0.755-0.656-2.198-1.281-1.651-0.714-2.365-1.151-3.010-1.854-0.406-0.464-0.708-1.010-0.88-1.599-0.12-0.453-0.151-1.589-0.057-2.042 0.339-1.599 1.547-2.708 3.281-3.036 0.563-0.109 1.875-0.068 2.427 0.068zM18.276 16.063l0.010 1.307h-4.167v11.839h-2.948v-11.839h-4.161v-1.281c0-0.714 0.016-1.307 0.036-1.323 0.016-0.021 2.547-0.031 5.62-0.026l5.594 0.016z" />
+        </svg>
+      );
+    case "rust":
+      return (
+        <svg
+          className={props.className}
+          fill="currentColor"
+          viewBox="0 0 32 32"
+        >
+          <path d="M31.584 15.615l-1.329-0.823c-0.009-0.131-0.020-0.261-0.036-0.385l1.141-1.063c0.244-0.235 0.161-0.647-0.152-0.765l-1.459-0.543c-0.036-0.129-0.072-0.255-0.113-0.38l0.905-1.26c0.204-0.276 0.043-0.661-0.296-0.719l-1.537-0.251c-0.057-0.115-0.12-0.229-0.181-0.344l0.645-1.416c0.068-0.145 0.052-0.312-0.036-0.443-0.089-0.131-0.24-0.208-0.396-0.203l-1.563 0.057c-0.079-0.105-0.161-0.204-0.245-0.303l0.36-1.516c0.077-0.333-0.219-0.629-0.552-0.552l-1.516 0.36c-0.099-0.084-0.197-0.167-0.303-0.245l0.057-1.563c0.016-0.339-0.339-0.577-0.645-0.432l-1.416 0.645c-0.115-0.061-0.229-0.124-0.349-0.181l-0.251-1.537c-0.057-0.333-0.443-0.495-0.719-0.296l-1.26 0.905c-0.125-0.041-0.251-0.077-0.375-0.113l-0.548-1.453c-0.119-0.319-0.531-0.401-0.76-0.157l-1.063 1.147c-0.129-0.016-0.26-0.032-0.391-0.041l-0.817-1.324c-0.177-0.291-0.599-0.291-0.776 0l-0.823 1.324c-0.131 0.009-0.26 0.025-0.385 0.041l-1.063-1.147c-0.235-0.244-0.645-0.167-0.765 0.157l-0.543 1.453c-0.129 0.036-0.249 0.077-0.38 0.113l-1.26-0.905c-0.276-0.199-0.661-0.037-0.719 0.296l-0.251 1.537c-0.115 0.057-0.228 0.12-0.343 0.181l-1.417-0.645c-0.312-0.14-0.661 0.093-0.645 0.432l0.052 1.563c-0.099 0.079-0.199 0.161-0.297 0.245l-1.52-0.36c-0.329-0.077-0.625 0.219-0.548 0.552l0.355 1.516c-0.084 0.099-0.161 0.197-0.245 0.303l-1.557-0.057c-0.343-0.011-0.572 0.339-0.432 0.645l0.647 1.416c-0.063 0.115-0.125 0.229-0.188 0.344l-1.536 0.251c-0.333 0.057-0.491 0.443-0.297 0.719l0.912 1.26c-0.043 0.131-0.079 0.251-0.115 0.38l-1.459 0.543c-0.317 0.119-0.396 0.531-0.151 0.765l1.14 1.063c-0.016 0.124-0.027 0.255-0.036 0.385l-1.328 0.823c-0.292 0.172-0.292 0.599 0 0.771l1.328 0.823c0.009 0.131 0.020 0.261 0.036 0.385l-1.14 1.068c-0.251 0.229-0.167 0.641 0.151 0.76l1.459 0.548c0.036 0.124 0.072 0.249 0.115 0.375l-0.912 1.26c-0.197 0.276-0.036 0.667 0.301 0.719l1.537 0.251c0.057 0.115 0.12 0.229 0.183 0.344l-0.647 1.416c-0.14 0.312 0.095 0.661 0.432 0.645l1.557-0.052c0.084 0.1 0.161 0.199 0.251 0.297l-0.36 1.521c-0.077 0.328 0.219 0.624 0.548 0.547l1.52-0.355c0.099 0.084 0.199 0.161 0.303 0.245l-0.057 1.557c-0.016 0.343 0.339 0.577 0.645 0.432l1.417-0.645c0.115 0.061 0.228 0.124 0.343 0.187l0.256 1.537c0.052 0.333 0.437 0.489 0.713 0.296l1.265-0.911c0.125 0.041 0.251 0.077 0.375 0.113l0.548 1.459c0.115 0.323 0.525 0.401 0.76 0.152l1.063-1.141c0.129 0.016 0.255 0.032 0.385 0.041l0.823 1.328c0.177 0.287 0.599 0.287 0.776 0l0.823-1.328c0.131-0.009 0.256-0.025 0.385-0.041l1.063 1.141c0.235 0.244 0.641 0.167 0.76-0.152l0.548-1.459c0.124-0.036 0.249-0.072 0.375-0.113l1.26 0.911c0.276 0.203 0.667 0.037 0.719-0.296l0.251-1.537c0.12-0.063 0.235-0.125 0.349-0.187l1.416 0.645c0.307 0.14 0.656-0.093 0.645-0.432l-0.057-1.557c0.105-0.084 0.204-0.161 0.297-0.245l1.521 0.355c0.328 0.077 0.624-0.219 0.552-0.547l-0.36-1.521c0.084-0.099 0.167-0.197 0.245-0.297l1.563 0.052c0.339 0.016 0.572-0.333 0.432-0.645l-0.645-1.416c0.061-0.115 0.124-0.229 0.181-0.344l1.537-0.251c0.333-0.057 0.495-0.443 0.296-0.719l-0.905-1.26 0.113-0.375 1.453-0.548c0.324-0.119 0.401-0.531 0.157-0.76l-1.141-1.068c0.011-0.124 0.027-0.255 0.036-0.385l1.329-0.823c0.291-0.172 0.291-0.599 0-0.771zM22.703 26.615c-1.224-0.26-0.833-2.099 0.396-1.839 0.505 0.109 0.828 0.609 0.719 1.12-0.109 0.505-0.609 0.828-1.115 0.719zM22.255 23.568c-0.463-0.099-0.921 0.197-1.015 0.661l-0.475 2.192c-1.453 0.661-3.068 1.032-4.765 1.032-1.683 0-3.344-0.365-4.864-1.073l-0.475-2.197c-0.099-0.464-0.552-0.761-1.016-0.656l-1.937 0.411c-0.364-0.369-0.697-0.765-1.005-1.183h9.443c0.105 0 0.177-0.015 0.177-0.115v-3.337c0-0.1-0.072-0.115-0.177-0.115h-2.765v-2.12h2.989c0.271 0 1.459 0.077 1.833 1.593 0.12 0.464 0.381 1.979 0.557 2.464 0.177 0.547 0.901 1.629 1.672 1.629h4.704c0.057 0 0.115-0.005 0.171-0.015-0.323 0.443-0.681 0.864-1.067 1.255zM9.197 26.573c-0.509 0.104-1.009-0.219-1.119-0.724-0.109-0.511 0.213-1.011 0.724-1.115 0.504-0.109 1.004 0.213 1.115 0.719 0.109 0.511-0.215 1.011-0.72 1.12zM5.615 12.047c0.229 0.48 0.021 1.052-0.464 1.271-0.484 0.213-1.052-0.015-1.255-0.505-0.459-1.124 1.192-1.859 1.719-0.765zM4.516 14.656l2.020-0.896c0.433-0.192 0.625-0.697 0.433-1.129l-0.417-0.943h1.641v7.38h-3.303c-0.407-1.432-0.536-2.932-0.375-4.412zM13.385 13.943v-2.177h3.896c0.203 0 1.421 0.235 1.421 1.147 0 0.76-0.937 1.031-1.703 1.031zM27.552 15.901c0 0.287-0.011 0.572-0.031 0.853h-1.188c-0.12 0-0.167 0.079-0.167 0.199v0.541c0 1.281-0.719 1.557-1.355 1.631-0.604 0.068-1.271-0.251-1.353-0.62-0.355-2-0.948-2.427-1.885-3.167 1.161-0.74 2.369-1.823 2.369-3.281 0-1.573-1.079-2.563-1.812-3.047-1.032-0.683-2.172-0.817-2.48-0.817h-12.255c1.692-1.896 3.964-3.177 6.459-3.652l1.448 1.521c0.323 0.339 0.869 0.353 1.208 0.025l1.615-1.547c3.339 0.625 6.229 2.683 7.911 5.631l-1.109 2.5c-0.187 0.432 0.005 0.937 0.437 1.131l2.131 0.947c0.036 0.381 0.052 0.761 0.052 1.152zM15.303 3.255c0.905-0.864 2.203 0.495 1.296 1.36-0.901 0.781-2.115-0.495-1.296-1.36zM26.287 12.093c0.208-0.473 0.76-0.687 1.235-0.479 0.771 0.339 0.744 1.437-0.037 1.74-0.787 0.301-1.541-0.495-1.197-1.261z" />
+        </svg>
+      );
+    default:
+      props.lang satisfies never;
+      console.warn("unknown lang for LanguageIcon:", props.lang);
+      return null;
+  }
+}