i18n, redesign, admin panel

.eslintrc.js

@@ -0,0 +1,28 @@
+const globals = {
+  _testGlobals: 'readonly'
+}
+;`togglenavbar,
+searchUser,
+searchMaps,
+searchUsers,
+createState`.split(',').forEach(name => {
+    globals[name] = true
+  })
+module.exports = {
+  extends: [
+    'plugin:jquery/deprecated',
+    'plugin:vue/recommended',
+    'standard-with-typescript'
+  ],
+  parserOptions: {
+    project: './tsconfig.json'
+  },
+  plugins: [
+    'jquery'
+  ],
+  rules: {
+    // disable the rule for all files
+    '@typescript-eslint/explicit-function-return-type': 'off'
+  },
+  globals
+}

.gitignore

@@ -139,7 +139,19 @@ cython_debug/
 
 # Project specific
 config.py
-.vscode/
 .data/*
 !.data/backgrounds/.gitkeep
 !.data/banners/.gitkeep
+
+node_modules/
+package-lock.json
+yarn.lock
+
+.vscode/launch.json
+
+# js utils config
+config.js
+# compiled locales
+.locales
+
+.DS_Store

.vscode/extensions.json

@@ -0,0 +1,9 @@
+{
+    "recommendations": [
+        "samuelcolvin.jinjahtml",
+        "lokalise.i18n-ally",
+        "ms-python.vscode-pylance",
+        "ms-python.python",
+        "emeraldwalk.RunOnSave"
+    ]
+}

.vscode/i18n-ally-custom-framework.yml

@@ -0,0 +1,29 @@
+# .vscode/i18n-ally-custom-framework.yml
+
+# An array of strings which contain Language Ids defined by VS Code
+# You can check avaliable language ids here: https://code.visualstudio.com/docs/languages/overview#_language-id
+languageIds:
+  - html
+  - jinja-html
+  - python
+
+# An array of RegExes to find the key usage. **The key should be captured in the first match group**.
+# You should unescape RegEx strings in order to fit in the YAML file
+# To help with this, you can use https://www.freeformatter.com/json-escape.html
+usageMatchRegex:
+  # The following example shows how to detect `t("your.i18n.keys")`
+  # the `{key}` will be placed by a proper keypath matching regex,
+  # you can ignore it and use your own matching rules as well
+  - "[^\\w\\d]t\\('({key})'"
+  - "[^\\w\\d]t\\(\"({key})\""
+  - "[^\\w\\d]t\\(`({key})`"
+
+# An array of strings containing refactor templates.
+# The "$1" will be replaced by the keypath specified.
+# Optional: uncomment the following two lines to use
+
+refactorTemplates:
+  - t("$1")
+
+# If set to true, only enables this custom framework (will disable all built-in frameworks)
+monopoly: true

.vscode/settings.json

@@ -0,0 +1,64 @@
+{
+  "i18n-ally.namespace": true,
+  "i18n-ally.pathMatcher": "{namespaces}/{locale}.{ext}",
+  "i18n-ally.localesPaths": ["locales/default", "locales/ppy.sb"],
+  "i18n-ally.extract.keygenStyle": "kebab-case",
+  "i18n-ally.translate.engines": ["google"],
+  "i18n-ally.extract.keyMaxLength": 50,
+  "i18n-ally.extract.parsers.html": {
+    "attributes": [
+      "text",
+      "title",
+      "alt",
+      "placeholder",
+      "label",
+      "aria-label",
+      "content",
+      "empty-text",
+      "prev-text",
+      "next-text",
+      "confirmText",
+      "range-separator",
+      "start-placeholder",
+      "end-placeholder"
+    ],
+    "ignoredTags": ["script", "style"],
+    "vBind": true,
+    "inlineText": true
+  },
+  "i18n-ally.extract.autoDetect": true,
+  // Make sure that particular refactoring templates would be picked up be the bulk extraction depending on the context
+  "i18n-ally.refactor.templates": [
+    {
+      // affect scope (optional)
+      // see https://github.com/lokalise/i18n-ally/blob/master/src/core/types.ts#L156-L156
+      "source": "html-inline",
+      "templates": ["t('{key}'{args})", "t(\"{key}\"{args})"],
+      // accept globs, resolved to project root (optional)
+      "include": ["templates/**/*.html"]
+    },
+    {
+      "templates": ["t('{key}'{args})", "t(\"{key}\"{args})"],
+      "include": ["blueprints/**/*.py", "objects/**/*.py", "constants/**/*.py"]
+    }
+    // ...
+  ],
+  "i18n-ally.keystyle": "nested",
+  "emeraldwalk.runonsave": {
+    "commands": [
+      {
+        "match": ".(yml|yaml)$",
+        "cmd": "yarn i18n:build"
+      },
+      {
+        "match": ".html$",
+        "cmd": "yarn i18n:format:templates"
+      }
+    ]
+  },
+  "files.associations": {
+    "*.html": "jinja-html"
+  },
+  "python.formatting.provider": "black",
+  "githubPullRequests.ignoredPullRequestBranches": ["main"]
+}

README.md

@@ -1,17 +1,22 @@
 Table of Contents
 ==================
+
 - [Table of Contents](#table-of-contents)
   - [What is guweb?](#what-is-guweb)
   - [Requirements](#requirements)
   - [Setup](#setup)
+  - [Prepare Locales](#prepare-locales)
+    - [requirements](#requirements-1)
+    - [prepare](#prepare)
+    - [how to](#how-to)
   - [Directory Structure](#directory-structure)
   - [The team](#the-team)
   - [The End](#the-end)
 
 What is guweb?
 ------
 
-guweb is the front-facing appearance of the osu! server protocol, [gulag](https://github.com/cmyui/gulag)!
+guweb is the front-facing appearance of the osu! server protocol, [bancho.py](https://github.com/cmyui/bancho.py)!
 Using native async/await syntax written on top of [Quart](https://github.com/pgjones/quart) and
 [cmyui's multipurpose library](https://github.com/cmyui/cmyui_pkg), guweb achieves flexability, cleanliness,
 and efficiency not seen in other frontend implementations - all while maintaining the simplicity of Python.
@@ -22,6 +27,7 @@ Requirements
 - Some know-how with Linux (tested on Ubuntu 18.04), Python, and general-programming knowledge.
 - MySQL
 - NGINX
+- NodeJS
 
 Setup
 ------
@@ -41,8 +47,13 @@ wget https://bootstrap.pypa.io/get-pip.py
 python3.9 get-pip.py && rm get-pip.py
 
 # Install MySQL and NGINX.
+
 sudo apt install mysql-server nginx
 
+
+# Install Nodejs and npm or yarn
+# see https://nodejs.org/en/download/ .
+
 # Clone guweb from GitHub.
 git clone https://github.com/varkaria/guweb.git
 cd guweb
@@ -53,20 +64,51 @@ git submodule init && git submodule update
 # Install requirements from pip.
 python3.9 -m pip install -r ext/requirements.txt
 
+
 # Add and configure guweb's NGINX config to your nginx/sites-enabled.
 sudo ln -r -s ext/nginx.conf /etc/nginx/sites-enabled/guweb.conf
 sudo nano ext/nginx.conf
 sudo nginx -s reload
 
+
 # Configure guweb.
 cp ext/config.sample.py config.py
 nano config.py
 
+# Configure locales
+cp config.sample.js config.js
+# edit the copied file to meet yor needs
+
+
+# build locales
+npm run i18n:build 
+# or use yarn
+yarn i18n:c
+
 # Run guweb (on port 8000).
 python3.9 main.py # Run directly to access debug features for development!
 hypercorn main.py # Please run guweb with hypercorn when in production! It will improve performance drastically by disabling all of the debug features a developer would need!
 ```
 
+Prepare Locales
+------
+
+### requirements
+
+- VSCode (recommend)
+- VSCode plugin: i18n-ally (recommend)
+- Node
+
+### prepare
+
+`npm install -D`
+
+### how to
+
+- open any html files with i18n-ally plugin enabled.
+- translate keys
+- run `npm run i18n:build` to generate files for python-i18n
+
 Directory Structure
 ------
 
@@ -76,16 +118,18 @@ Directory Structure
     ├── ext          # External files from guweb's primary operation.
     ├── objects      # Code for representing privileges, global objects, and more.
     ├── static       # Code or content that is not modified or processed by guweb itself.
+    ├── locales      # translations
     ├── templates    # HTML that contains content that is rendered after the page has loaded.
         ├── admin    # Templated content for the admin panel (/admin).
         ├── settings # Templated content for settings (/settings).
         └ ...         # Templated content for all of guweb (/).
 
-
 The team
 ------
+
 - [Yoru](https://github.com/Yo-ru) | Backend, Grammar Checking [Deprecated]
 - [Varkaria](https://github.com/Varkaria) | Frontend, Backend?
+- [ppysb-Team](https://github.com/ppy-sb) | i18n, Maintainer
 
 The End
 ------