Refactoring and new language support

- Automatically generate language options
- Add support for Kotlin

Author: Lord-Turmoil

.babelrc

@@ -4,40 +4,49 @@
             "prismjs",
             {
                 "languages": [
+                    // Programming Languages
                     "c",
                     "cpp",
                     "csharp",
                     "go",
                     "java",
+                    "kotlin",
+                    "perl",
                     "python",
+                    "ruby",
                     "rust",
                     "swift",
-                    "perl",
-                    "ruby",
-                    "html",
+                    // Web Development
                     "css",
+                    "html",
                     "javascript",
-                    "typescript",
                     "php",
+                    "typescript",
+                    // Scripting Language
                     "bash",
-                    "powershell",
                     "batch",
                     "lua",
-                    "xml",
+                    "powershell",
+                    // Markup Language
                     "json",
-                    "yaml",
-                    "markdown",
                     "latex",
-                    "makefile",
+                    "markdown",
+                    "xml",
+                    "yaml",
+                    // Configuration Language
                     "cmake",
                     "docker",
+                    "makefile",
+                    // Database
                     "sql",
-                    "nasm",
+                    // Assembly Language
                     "llvm",
-                    "verilog",
+                    "nasm",
+                    // Others
                     "diff",
+                    "glsl",
                     "matlab",
-                    "glsl"
+                    "verilog"
                 ],
                 "plugins": [
                     "line-numbers",

.github/workflows/static.yml

@@ -33,18 +33,18 @@ jobs:
         run: |
           npm install
 
+      - name: Install Python
+        uses: actions/setup-python@v5
+        with:
+          python-version: "3.x"
+
       - name: Add Secret Files
         env:
           NOTIFICATION: ${{ secrets.NOTIFICATION }}
           STATISTICS: ${{ secrets.STATISTICS }}
           SUPPORT: ${{ secrets.SUPPORT }}
         run: |
           python scripts/pre_deploy.py
-
-      - name: Install Python
-        uses: actions/setup-python@v5
-        with:
-          python-version: "3.x"
           
       - name: Build Project
         run: |

README.md

@@ -4,9 +4,11 @@ Copyright © Tony's Studio 2023 - 2025
 
 ---
 
+[![Build](https://github.com/Lord-Turmoil/CodePaste/actions/workflows/static.yml/badge.svg?branch=main)](https://github.com/Lord-Turmoil/CodePaste/actions/workflows/static.yml)
+
 ## Description
 
-This tool provides you the ability to create highlighted code for Microsoft Office, mainly for Word and PowerPoint. You can use it to create a beautiful code block in your document or presentation.
+This tool provides you the ability to create highlighted code block for Microsoft Office, mainly for Word and PowerPoint. You can use it to create a beautiful code block in your document or presentation.
 
 ### Try it now!
 
@@ -17,38 +19,53 @@ This tool provides you the ability to create highlighted code for Microsoft Offi
 
 ## Development
 
-If you find Code Paste useful and want to host it on your website, this section will be useful.
-
-> **NOTICE:** I'm glad some of you have already hosted Code Paste on you own server, but forgot to remove the analytics scripts and my COS links. It's partly due to my bad project structure, so I refactored it to separate these configurations. Besides, **I would appreciate it if you mention my repository in your website**.🙏
-
-Feel free to contribute to this project. You can report bugs, suggest new features, or even submit a pull request. 😊
+If you find Code Paste useful and want to host it on your own, this section will be useful. By the way, feel free to contribute to this project. You can report bugs, suggest new features, or even submit a pull request. 😊
 
 ### Quick Start
 
-Code Paste is written in native HTML, CSS and JavaScript with npm and Webpack. Also with posthtml for the `<module>` tag. To start development, clone the repo first, then install required packages.
+Code Paste is written in native HTML, CSS and JavaScript. To start development, clone the repo first, then install required packages.
 
 ```bash
 npm install
-npm run init  # initialize placeholder
+npm run init    # initialize placeholder files
 ```
 
 Then, you can run the project. There are three options for this.
 
 ```bash
 npm run build  # build for production
-npm run dev    # build for development
-npm run watch  # build for development and watch for changes
+npm run dev    # build for development and watch for changes
 ```
 
 > To preview the project locally, I recommend using [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) plugin for Visual Studio Code. Just open `dist/index.html` after your local server is on.
 
+### Code Samples
+
+Code Paste provides sample code for each supported language. The supported languages are listed in `languages/lang.yml`, grouped by their categories. All the code samples are placed under `languages/samples/` directory. 
+
+> [!NOTE]
+>
+> The display order of the language options in the final webpage is exactly the same as that in `lang.yml`.
+
+Managing language options in HTML and JavaScript is tedious, so there is a script to automatically generate related code. You should run this command after modifying the language list or adding new samples. This will generate `src/js/samples.js` and `src/views/components/languages.html`.
+
+```bash
+npm run sample
+```
+
+To add a new language, first add it to `languages/lang.yml`. In the suitable category, add a new list item in the format of `key value`, where `key` is the language id of [Prism.js](https://prismjs.com/#supported-languages), and the `value` is the display name of the language in the select box. Then, create a new file `{key}.txt` under `languages/samples/` and write your sample code in it. Finally, add this language to `.babelrc` so that it can be correctly loaded.
+
+> [!WARNING]
+>
+> `npm run dev` will not watch for changes under `languages/` directory. So you have to manually update it.
+
 ### Customization
 
-Since I removed sensitive information from the project, you need to run `npm run init` to create placeholder files even if you don't need them. They are under `src/views/components/`, where you can find a `.gitignore` that ignores them.
+Since I removed sensitive information from the project, you need to run `npm run init` to create placeholder files even if you don't need them. These files are placed under `src/views/components/`.
 
 **Analytics**
 
-In file `statistics.html`, and place all your scripts into it. If you don't need them, just leave this file empty. The file should look like this.
+In file `statistics.html`, and place all your scripts into it. If you don't need them, just leave this file empty. Here is an example for this file.
 
 ```html
 <!-- Clarity -->
@@ -59,7 +76,7 @@ In file `statistics.html`, and place all your scripts into it. If you don't need
         y = l.getElementsByTagName(r)[0]; y.parentNode.insertBefore(t, y);
     })(window, document, "clarity", "script", "***key***");
 </script>
-<!-- Baidu Statistics -->
+<!-- Baidu Analytics -->
 <script>
     var _hmt = _hmt || [];
     (function () {

languages/lang.yml

@@ -0,0 +1,43 @@
+Programming Languages:
+  - c C
+  - cpp C++
+  - csharp C#
+  - go Go
+  - java Java
+  - kotlin Kotlin
+  - perl Perl
+  - python Python
+  - ruby Ruby
+  - rust Rust
+  - swift Swift
+Web Development:
+  - css CSS
+  - html HTML
+  - javascript JavaScript
+  - php PHP
+  - typescript TypeScript
+Scripting Language:
+  - bash Bash
+  - batch Batch
+  - lua Lua
+  - powershell PowerShell
+Markup Language:
+  - json JSON
+  - latex LaTeX
+  - markdown Markdown
+  - xml XML
+  - yaml YAML
+Configuration Language:
+  - cmake CMake
+  - docker Docker
+  - makefile Makefile
+Database:
+  - sql SQL
+Assembly Language:
+  - llvm LLVM
+  - nasm NASM
+Others:
+  - diff Diff
+  - glsl GLSL
+  - matlab MATLAB
+  - verilog Verilog

languages/samples/bash.txt

@@ -0,0 +1,10 @@
+#!/bin/bash
+
+name="John"
+age=30
+
+if [ $age -lt 18 ]; then
+    echo "$name is a minor."
+else
+    echo "$name is an adult."
+fi

languages/samples/batch.txt

@@ -0,0 +1,10 @@
+@echo off
+
+set name=John
+set age=30
+
+if %age% lss 18 (
+    echo %name% is a minor.
+) else (
+    echo %name% is an adult.
+)

languages/samples/c.txt

@@ -0,0 +1,12 @@
+#include <stdio.h>
+
+int main() {
+    int num = 10;
+    int* ptr = &num;
+
+    printf("The value of num is %d\n", num);
+    printf("The value of ptr is %p\n", ptr);
+    printf("The value that ptr points to is %d\n", *ptr);
+
+    return 0;
+}

languages/samples/cmake.txt

@@ -0,0 +1,14 @@
+cmake_minimum_required(VERSION 3.26)
+project(MIoC)
+
+set(CMAKE_CXX_STANDARD 11)
+
+# Add all source files
+file(GLOB_RECURSE SRC_LIST CONFIGURE_DEPENDS src/*.cpp)
+
+# Add final target.
+add_executable(${CMAKE_PROJECT_NAME} ${SRC_LIST})
+
+# dependency
+add_subdirectory(mioc)
+target_link_libraries(${CMAKE_PROJECT_NAME} PRIVATE mioc)

languages/samples/cpp.txt

@@ -0,0 +1,8 @@
+#include <iostream>
+
+int main() {
+    std::cout << "Hello, there!" << std::endl;
+    std::cout << "General Grievous!" << std::endl;
+
+    return 0;
+}

languages/samples/csharp.txt

@@ -0,0 +1,12 @@
+public class Startup
+{
+    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
+    {
+        app.UseRouting();
+        app.UseCors(CorsOptions.CorsPolicyName);
+        app.UseEndpoints(endpoints => {
+            endpoints.MapControllers();
+            endpoints.MapSwagger();
+        });
+    }
+}

languages/samples/css.txt

@@ -0,0 +1,10 @@
+.action-wrapper .action {
+    width: 50px;
+    height: 50px;
+    display: flex;
+    justify-content: center;
+    border-radius: 50%;
+    align-self: center;
+    cursor: pointer;
+    transition: 0.3s;
+}

languages/samples/diff.txt

@@ -0,0 +1,5 @@
+- Jedi Order
++ Sith Empire
+- Kamino
+- Alderaan
++ Mandalore

languages/samples/docker.txt

@@ -0,0 +1,11 @@
+# PatBoot Dockerfile
+
+FROM openjdk:17-jdk-slim
+
+ARG VERSION
+
+COPY target/PatBoot-${VERSION}.jar /application.jar
+
+EXPOSE 8080
+
+CMD ["java", "-jar", "/application.jar"]

languages/samples/glsl.txt

@@ -0,0 +1,15 @@
+#version 450 core
+
+layout(location = 0) out vec4 o_Color;
+
+struct VertexOutput
+{
+    vec4 Color;
+};
+
+layout (location = 0) in VertexOutput Input;
+
+void main()
+{
+    o_Color = Input.Color;
+}

languages/samples/go.txt

@@ -0,0 +1,12 @@
+package main
+
+import "fmt"
+
+func add(a int, b int) int {
+    return a + b
+}
+
+func main() {
+    sum := add(3, 4)
+    fmt.Println("Sum:", sum)
+}

languages/samples/html.txt

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>Hello, world!</title>
+    </head>
+    <body>
+        <h1>Hello, world!</h1>
+    </body>
+</html>

languages/samples/java.txt

@@ -0,0 +1,12 @@
+public class Main {
+    public static void main(String[] args) {
+        int a = 5;
+        int b = 10;
+        int sum = add(a, b);
+        System.out.println("Sum: " + sum);
+    }
+
+    public static int add(int a, int b) {
+        return a + b;
+    }
+}

languages/samples/javascript.txt

@@ -0,0 +1,7 @@
+function fibonacci(n) {
+    let a = 0, b = 1;
+    while (a < n) {
+        console.log(a);
+        [a, b] = [b, a + b];
+    }
+}

languages/samples/json.txt

@@ -0,0 +1,11 @@
+{
+    "name": "John Doe",
+    "age": 30,
+    "email": "[email protected]",
+    "address": {
+        "street": "123 Main St",
+        "city": "Anytown",
+        "state": "CA",
+        "zip": "12345"
+    }
+}