License & prepare to make public

hieyou1 · Jun 26, 2024 · af03606 · af03606
1 parent cb9df64
commit af03606
Show file tree

Hide file tree

Showing 11 changed files with 915 additions and 88 deletions.
diff --git a/CNAME b/CNAME
@@ -0,0 +1 @@
+startalk.mikeylab.com
diff --git a/LICENSE-GPL.txt b/LICENSE-GPL.txt
diff --git a/LICENSE.md b/LICENSE.md
@@ -0,0 +1,5 @@
+# License information
+
+- I do not have the right to re-license the STARTALK logo, and am only allowed to use it in association with STARTALK. Therefore, this logo will not be subject to the GPLv3.
+- Bootstrap version 5.3.3, which is included in the repository in order to keep everything on the same origin, is Copyright 2011-2024 The Bootstrap Authors, and is [licensed under MIT](https://github.com/twbs/bootstrap/blob/main/LICENSE). Copyright information has also been maintained in the headers of appropriate Bootstrap files.
+- The rest of the repository, including the showcase site, individual project information and project code, is [licensed under the GPLv3](https://github.com/hieyou1/startalk-showcase/blob/main/LICENSE-GPL.txt) via permission granted from each project's respective owner.
diff --git a/README.md b/README.md
@@ -0,0 +1,5 @@
+# startalk-showcase
+
+This project is meant to showcase what the STARTALK students at Marquette University's Summer 2024 Chinese STARTALK Program have learned in their computer courses. Over the course of the past three weeks and in addition to Chinese language instruction, these students have been exposed to various STEM concepts such as 3D Modeling using Blender, Web Design using HTML and CSS, and Text Analysis in English and Chinese using R.
+
+To see the projects, [click here](https://startalk.mikeylab.com)!
diff --git a/index.html b/index.html
@@ -11,7 +11,22 @@
 </head>
 
 <body>
-    <h1 id="title">STARTALK Project Showcase</h1>
+    <div id="header">
+        <h1 id="title">STARTALK Project Showcase</h1>
+        <div id="toggle-container">
+            <span>Show: </span>
+            <div id="toggle" class="btn-group" role="group">
+                <input type="radio" class="btn-check" name="toggle-state" id="toggle-all" autocomplete="off" checked disabled>
+                <label class="btn btn-outline-primary" for="toggle-all">All Projects</label>
+
+                <input type="radio" class="btn-check" name="toggle-state" id="toggle-web" autocomplete="off" disabled>
+                <label class="btn btn-outline-primary" for="toggle-web">Web Design</label>
+
+                <input type="radio" class="btn-check" name="toggle-state" id="toggle-data" autocomplete="off" disabled>
+                <label class="btn btn-outline-primary" for="toggle-data">Data Science</label>
+            </div>
+        </div>
+    </div>
     <div id="showcase-container">
         Loading...
     </div>

diff --git a/project.schema.json b/project.schema.json
@@ -0,0 +1,72 @@
+{
+    "$ref": "#/definitions/Project",
+    "$schema": "http://json-schema.org/draft-07/schema#",
+    "definitions": {
+        "Project": {
+            "additionalProperties": false,
+            "properties": {
+                "$schema": {
+                    "type": "string"
+                },
+                "projects": {
+                    "items": {
+                        "additionalProperties": false,
+                        "properties": {
+                            "author": {
+                                "additionalProperties": false,
+                                "properties": {
+                                    "english": {
+                                        "type": "string"
+                                    },
+                                    "hanzi": {
+                                        "type": "string"
+                                    },
+                                    "pinyin": {
+                                        "type": "string"
+                                    }
+                                },
+                                "required": [
+                                    "hanzi",
+                                    "pinyin",
+                                    "english"
+                                ],
+                                "type": "object"
+                            },
+                            "description": {
+                                "type": "string"
+                            },
+                            "picture": {
+                                "type": "string"
+                            },
+                            "title": {
+                                "type": "string"
+                            },
+                            "type": {
+                                "enum": [
+                                    "web",
+                                    "data"
+                                ],
+                                "type": "string"
+                            },
+                            "url": {
+                                "type": "string"
+                            }
+                        },
+                        "required": [
+                            "type",
+                            "title",
+                            "author",
+                            "url"
+                        ],
+                        "type": "object"
+                    },
+                    "type": "array"
+                }
+            },
+            "required": [
+                "projects"
+            ],
+            "type": "object"
+        }
+    }
+}
diff --git a/projects.json b/projects.json
diff --git a/script.js b/script.js
@@ -1,3 +1,6 @@
+const LOAD_TEST_PROJECTS = true;
+const DEFAULT_PICTURE = "startalk.png";
+
 const makeTooltip = (text, tooltip) => {
     let elem = document.createElement("span");
     elem.setAttribute("data-bs-toggle", "tooltip");
@@ -8,13 +11,13 @@ const makeTooltip = (text, tooltip) => {
 }
 
 window.onload = async () => {
-    let projects = await (await fetch("/projects.json")).json();
+    let { projects } = await (await fetch(LOAD_TEST_PROJECTS ? "/test/projects.json" : "/projects.json")).json();
     document.querySelector("#showcase-container").innerText = "";
     for (let i of projects) {
         let card = document.createElement("div");
-        card.classList.add("card", "project");
+        card.classList.add("card", "project", "project-" + i.type);
         let img = document.createElement("img");
-        img.src = i.picture;
+        img.src = i.picture ?? DEFAULT_PICTURE;
         img.classList.add("card-img-top");
         card.appendChild(img);
         let cardBody = document.createElement("div");
@@ -30,10 +33,12 @@ window.onload = async () => {
         subtitleEng.innerText = ` (${i.author.english})`;
         subtitle.appendChild(subtitleEng);
         cardBody.appendChild(subtitle);
-        let desc = document.createElement("p");
-        desc.classList.add("card-text");
-        desc.innerText = i.description;
-        cardBody.appendChild(desc);
+        if (i.description) {
+            let desc = document.createElement("p");
+            desc.classList.add("card-text");
+            desc.innerText = i.description;
+            cardBody.appendChild(desc);
+        }
         let open = document.createElement("a");
         open.classList.add("btn", "btn-primary");
         open.href = i.url;
@@ -43,4 +48,40 @@ window.onload = async () => {
         card.appendChild(cardBody);
         document.querySelector("#showcase-container").appendChild(card);
     }
+    document.querySelector("#toggle").onchange = () => {
+        let checked = "";
+
+        for (let i of document.querySelectorAll("[name=toggle-state]")) {
+            if (i.checked) {
+                checked = i.id;
+                break;
+            }
+        }
+
+        switch (checked) {
+            case "toggle-all": {
+                for (let i of document.getElementsByClassName("project-data")) i.hidden = false;
+                for (let i of document.getElementsByClassName("project-web")) i.hidden = false;
+                break;
+            }
+            case "toggle-data": {
+                for (let i of document.getElementsByClassName("project-data")) i.hidden = false;
+                for (let i of document.getElementsByClassName("project-web")) i.hidden = true;
+                break;
+            }
+            case "toggle-web": {
+                for (let i of document.getElementsByClassName("project-data")) i.hidden = true;
+                for (let i of document.getElementsByClassName("project-web")) i.hidden = false;
+                break;
+            }
+            default: {
+                console.log("Unrecognized checkbox:", checked);
+                break;
+            }
+        }
+    };
+    for (let i of document.querySelectorAll("[name=toggle-state]")) {
+        i.disabled = false;
+        console.log(i);
+    }
 };
diff --git a/startalk.png b/startalk.png
diff --git a/style.css b/style.css
@@ -3,11 +3,18 @@ body {
     width: 100%;
 }
 
-#title {
+#header {
     margin: 1rem;
     text-align: center;
 }
 
+#toggle-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    white-space: pre;
+}
+
 #showcase-container {
     margin: 2rem;
     display: flex;

diff --git a/test/projects.json b/test/projects.json
@@ -0,0 +1,86 @@
+{
+    "$schema": "../project.schema.json",
+    "projects": [
+        {
+            "picture": "https://avatars.githubusercontent.com/u/31020711?v=4",
+            "title": "DATA OF White Snake",
+            "description": "Bai She is a story of x, y, and z.",
+            "author": {
+                "hanzi": "李迈克",
+                "pinyin": "Li Mai Ke",
+                "english": "Mikey E"
+            },
+            "url": "https://html-10316539.codehs.me/index.html",
+            "type": "data"
+        },
+        {
+            "title": "WEB OF White Snake",
+            "author": {
+                "hanzi": "李迈克",
+                "pinyin": "Li Mai Ke",
+                "english": "Mikey E"
+            },
+            "url": "https://html-10316539.codehs.me/index.html",
+            "type": "web"
+        },
+        {
+            "picture": "https://avatars.githubusercontent.com/u/31020711?v=4",
+            "title": "WEB OF White Snake",
+            "author": {
+                "hanzi": "李迈克",
+                "pinyin": "Li Mai Ke",
+                "english": "Mikey E"
+            },
+            "url": "https://html-10316539.codehs.me/index.html",
+            "type": "web"
+        },
+        {
+            "picture": "https://avatars.githubusercontent.com/u/31020711?v=4",
+            "title": "WEB OF White Snake",
+            "description": "Bai She is a story of x, y, and z.",
+            "author": {
+                "hanzi": "李迈克",
+                "pinyin": "Li Mai Ke",
+                "english": "Mikey E"
+            },
+            "url": "https://html-10316539.codehs.me/index.html",
+            "type": "web"
+        },
+        {
+            "picture": "https://avatars.githubusercontent.com/u/31020711?v=4",
+            "title": "DATA OF White Snake",
+            "description": "Bai She is a story of x, y, and z.",
+            "author": {
+                "hanzi": "李迈克",
+                "pinyin": "Li Mai Ke",
+                "english": "Mikey E"
+            },
+            "url": "https://html-10316539.codehs.me/index.html",
+            "type": "data"
+        },
+        {
+            "picture": "https://avatars.githubusercontent.com/u/31020711?v=4",
+            "title": "DATA OF White Snake",
+            "description": "Bai She is a story of x, y, and z.",
+            "author": {
+                "hanzi": "李迈克",
+                "pinyin": "Li Mai Ke",
+                "english": "Mikey E"
+            },
+            "url": "https://html-10316539.codehs.me/index.html",
+            "type": "data"
+        },
+        {
+            "picture": "https://avatars.githubusercontent.com/u/31020711?v=4",
+            "title": "DATA OF White Snake",
+            "description": "Bai She is a story of x, y, and z.",
+            "author": {
+                "hanzi": "李迈克",
+                "pinyin": "Li Mai Ke",
+                "english": "Mikey E"
+            },
+            "url": "https://html-10316539.codehs.me/index.html",
+            "type": "data"
+        }
+    ]
+}