Proof Of Concept

jorgebg · Dec 1, 2023 · 320b9ef · 320b9ef
1 parent 8bf444b
commit 320b9ef
Show file tree

Hide file tree

Showing 16 changed files with 1,172 additions and 200 deletions.
diff --git a/.github/workflows/github-pages.yml b/.github/workflows/github-pages.yml
@@ -0,0 +1,54 @@
+name: Deploy site to GitHub Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  build:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+
+    - name: Use Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: 18
+
+    - name: Build
+      run: |
+        npm install
+        npm run build
+
+    - name: Setup Pages
+      uses: actions/configure-pages@v3
+
+    - name: Upload artifact
+      uses: actions/upload-pages-artifact@v2
+      with:
+        # Upload dist repository
+        path: './dist'
+
+    - name: Deploy to GitHub Pages
+      id: deployment
+      uses: actions/deploy-pages@v2
diff --git a/README.md b/README.md
@@ -1,47 +1,4 @@
-# Svelte + TS + Vite
-
-This template should help get you started developing with Svelte and TypeScript in Vite.
-
-## Recommended IDE Setup
-
-[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
-
-## Need an official Svelte framework?
-
-Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
-
-## Technical considerations
-
-**Why use this over SvelteKit?**
-
-- It brings its own routing solution which might not be preferable for some users.
-- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
-
-This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.
-
-Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.
-
-**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
-
-Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information.
-
-**Why include `.vscode/extensions.json`?**
-
-Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.
-
-**Why enable `allowJs` in the TS template?**
-
-While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant.
-
-**Why is HMR not preserving my local component state?**
-
-HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr).
-
-If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
-
-```ts
-// store.ts
-// An extremely simple external store
-import { writable } from 'svelte/store'
-export default writable(0)
-```
+# Scratch Teacher Tools
+## Plagiarism
+A tool for detecting plagiarism in [Scratch projects](https://scratch.mit.edu/).
+Demo: https://jorgebg.com/scratch-teacher-tools/
diff --git a/examples/example_4.sb3 b/examples/example_4.sb3
diff --git a/index.html b/index.html
@@ -2,12 +2,65 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Scratch Teacher Tools</title>
+    <style>
+      main {
+        max-width: 600px;
+        margin: auto;
+        padding: 1em;
+      }
+      div p {
+        text-align: justify;
+      }
+    </style>
   </head>
   <body>
-    <div id="app"></div>
+    <main>
+      <h1>Scratch Plagiarism Checker</h1>
+      <div>
+        <p>
+          A tool for detecting plagiarism in
+          <a href="https://scratch.mit.edu/" target="_blank">Scratch projects</a
+          >.
+        </p>
+
+        <p>
+          Provide a folder or a ZIP file containing projects in the
+          <a
+            href="https://en.scratch-wiki.info/wiki/Scratch_File_Format"
+            target="_blank"
+            >Scratch File Format</a
+          >
+          (".sb3"). The tool will compare the
+          <a
+            href="https://en.scratch-wiki.info/wiki/Scratch_File_Format#Blocks"
+            target="_blank"
+            >blocks</a
+          >
+          and
+          <a
+            href="https://en.scratch-wiki.info/wiki/Scratch_File_Format#Targets"
+            target="_blank"
+            >targets</a
+          >
+          and give a score based on its similarity.
+        </p>
+        <p>
+          Try
+          <a id="example" href="/examples.zip"> uploading an example</a>.
+        </p>
+      </div>
+      <div id="app"></div>
+    </main>
     <script type="module" src="/src/main.ts"></script>
+    <script>
+      function example(e) {
+        e.preventDefault();
+        document.getElementById("fetch").click();
+      }
+      document.getElementById("example").addEventListener("click", example);
+    </script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^3.0.0",
     "@tsconfig/svelte": "^5.0.2",
+    "@types/deep-equal": "^1.0.4",
     "svelte": "^4.2.3",
     "svelte-check": "^3.6.0",
     "tslib": "^2.6.2",
@@ -21,6 +22,8 @@
   "dependencies": {
     "@turbowarp/types": "^0.0.12",
     "@types/wicg-file-system-access": "^2023.10.4",
-    "@zip.js/zip.js": "^2.7.31"
+    "@zip.js/zip.js": "^2.7.31",
+    "deep-equal": "^2.2.3",
+    "normalize.css": "^8.0.1"
   }
 }