update: add documents

watasuke102 · Aug 30, 2024 · 86e81b7 · 86e81b7
1 parent f59a2bd
commit 86e81b7
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # Settlang
 
-Settlang is a statically-typed programming language that express mutability by whether variables have setter.
+Settlang is a statically typed programming language that expresses mutability by whether variables have setters.
 
 ## Let's try!
 

diff --git a/playground_front/index.html b/playground_front/index.html
@@ -3,12 +3,30 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="Settlang Playground" />
+    <meta property="og:url" content="https://watasuke102.github.io/settlang/" />
+    <meta
+      property="og:description"
+      content="A statically typed language that expresses mutability by whether variables have setters"
+    />
+    <meta
+      name="description"
+      content="A statically typed language that expresses mutability by whether variables have setters"
+    />
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:title" content="Settlang Playground" />
+    <meta name="twitter:url" content="https://watasuke102.github.io/settlang/" />
+    <meta
+      name="twitter:description"
+      content="A statically typed language that expresses mutability by whether variables have setters"
+    />
     <link rel="stylesheet" href="https://unpkg.com/@acab/[email protected]/index.css" />
     <title>Settlang Playground</title>
   </head>
   <body>
     <main id="app">
-      <div id="landing">
+      <section id="landing">
         <div id="playground">
           <div class="heading_and_button">
             <span class="heading">input</span>
@@ -52,8 +70,47 @@ <h2>output</h2>
         </div>
         <div id="langdesc">
           <h1>Settlang</h1>
+          <a
+            href="https://github.com/watasuke102/settlang"
+            target="_blank"
+            rel="nofollow noopener noreferrer"
+            id="gh-icon"
+          >
+            <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
+              />
+            </svg>
+          </a>
         </div>
-      </div>
+      </section>
+      <hr />
+      <section id="documents">
+        <h2>Documents</h2>
+        <p>
+          Settlang is a statically typed programming language that expresses mutability by whether
+          variables have setters.
+        </p>
+        <p>Basic grammar and concepts are follow. See examples for details!</p>
+        <h3>Type</h3>
+        <ul>
+          <li>i32 : 32-bit signed integer</li>
+          <li>i64 : 64-bit signed integer</li>
+          <li>string : surrounded by ", can be used as a first argument of 'print' / 'println'</li>
+        </ul>
+        <h3>Expression</h3>
+        <ul>
+          <li>arithmetric -> +, -, *, /, %</li>
+          <li>compare -> ==, !=, &lt;, &lt;=, &gt;=, &gt;</li>
+          <li>logical AND &&, logical OR ||</li>
+        </ul>
+        <h3>Variable</h3>
+        <pre><code>'let' varname ':' typename ('|' setter function name)? '=' expr</code></pre>
+        <p>
+          Setter is a funcion that returns new value of the variable. The return value type of
+          setter and variablue type must match.
+        </p>
+      </section>
     </main>
     <script type="module" src="/main.js"></script>
   </body>

diff --git a/playground_front/style.css b/playground_front/style.css
@@ -6,15 +6,37 @@ html {
   scrollbar-width: thin;
 }
 body {
-  font-family: 'Moralerspace Krypton NF', 'Monaspace Krypton', MyricaM, 'MyricaM M',
-    'Source Code Pro', 'Ubuntu Mono', 'Ubuntu Monospace', Consolas, monospace;
+  margin: 0;
   color: #abb2bf;
   background-color: #282c34;
 }
-
+body,
+code {
+  font-family: 'Moralerspace Krypton NF', 'Monaspace Krypton', MyricaM, 'MyricaM M',
+    'Source Code Pro', 'Ubuntu Mono', 'Ubuntu Monospace', Consolas, monospace;
+}
+pre {
+  padding: 0;
+  margin-block: 16px;
+  font-size: 0.9em;
+  max-width: 100%;
+  overflow-x: auto;
+  scrollbar-width: thin;
+}
+ul {
+  padding-left: 32px;
+  list-style-type: disc;
+}
+hr {
+  height: 2px;
+  background-color: #abb2bf;
+}
 h1 {
   text-align: center;
 }
+h3 {
+  margin-block: 12px;
+}
 button {
   border-radius: 2px;
   padding: 4px 16px;
@@ -26,22 +48,27 @@ textarea {
   padding: 4px;
   border-radius: 4px;
   border: 3px solid #abb2bf;
+  scrollbar-width: thin;
   /* Visual Studio like */
   color: #ccc;
   background-color: #1f1f1f;
 }
+svg {
+  width: 100%;
+  height: 100%;
+}
 
 #landing {
-  width: 100dvw;
+  width: 100%;
   height: 100dvh;
   display: grid;
   grid-template-rows: 1fr auto;
 }
 
 #playground {
-  padding: 8px 12px;
+  padding: 20px 20px;
   display: grid;
-  grid-template-rows: auto 1fr auto auto;
+  grid-template-rows: auto 1fr auto auto auto;
   gap: 12px;
 }
 .heading_and_button {
@@ -60,5 +87,20 @@ textarea {
 }
 
 #langdesc {
+  height: 40px;
   margin: 12px 8px;
+  margin-bottom: 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+#gh-icon {
+  fill: #abb2bf;
+  height: 100%;
+  aspect-ratio: 1 / 1;
+}
+
+#documents {
+  margin-top: 24px;
+  margin: 24px 12px;
 }