Takodachi
Wotaku

Appearance

Getting started ​

Local setup ​

Requirement ​

  1. VS Code
  2. GitHub Desktop
  3. Node JS
  4. Git

Cloning ​

  1. Download and install the first two tools as instructed.
  2. Open GitHub Desktop and log in using your GitHub account credentials.
  3. Clone the Wotaku Repository
    • Open Github Desktop and press Ctrl + Shift + o
    • Go to URL tab and paste https://github.com/wotakumoe/wotaku. Also set the location.
    • GitHub Desktop will clone the repository to your specified location.

Changing ​

  1. Open the Project in Visual Studio Code
    • Once the repository is cloned, you'll see options in GitHub Desktop's home screen.
    • Select Open in VS Code to open the project in Visual Studio Code.
  2. Make Changes and Save
    • Edit the files as needed.
    • Save your changes.
      • Modified files will be highlighted in yellow
      • New files will be in green
      • Removed files will be in red in Github Desktop
  3. Commit Changes Locally
    • Return to GitHub Desktop. The modified files will be listed on the left.
    • Add a descriptive summary for your changes in the Summary tab.
    • Click Commit to Main to stage and commit your changes locally.

README

  • Before pushing or editing your local repo, fetch the repo so that your local repo is updated and doesn't cause any conflict when pushing.
  • If you have multiple changes to commit, repeat this process for each set of changes before pushing them.
  1. After all your changes are committed, click Push to Origin to upload your changes to the GitHub repository.
  2. Done!

Running Localhost ​

  • Open wotaku in VS code
  • Then open terminal in VS code
  • Run npm i -g pnpm. This will install pnpm using npm.
  • After that, run pnpm i. It will download and update all the required shit
  • After everything is done, run pnpm run docs:dev. It will run local host after processing the files and building it. after a short while it will give a localhost url. example http://localhost:5173/
  • Open the localhost url in browser by clicking on it. and done.

Icon conventions ​

Wotaku fetches icons from Icones. All the added iconpacks are here.

Writing Rules ​

  • In-line -> :package name-icon name:
  • Inside button, page icon -> :i-package name-icon name:

Using Alias

Most used icons have been shortened using Alias. You can find them in sheet. They work in-line, not inside button. You have to use the traditional method.

Twitter emoji

Twitter emoji is the default iconpack for wotaku. For twemoji, you don't have to mention twemoji. just icon name.

Commands ​

JobCMD
Adding iconpackpnpm add -D @iconify-json/<packname>
Remove iconpackpnpm remove @iconify-json/<packname>

You have to add the iconpack manually in docs\.vitepress\configs\emoji.ts. Otherwise it wont work. Follow the already added ones as example.

Rules ​

  1. Follow the order of the tabs in sheet
  2. There will be no space between icons. Just at the beginning.
  3. Icons will be after main URL
  4. Then github/gitlab or similar source link button
  5. Then related buttons like Extensions, Alts, Proxies etc
  6. Unlike icons, there will be space between buttons (so that it is easy to click).
  7. If there is an icon for that button (example: GitHub), use icon. Otherwise normal button.
  8. Tooltip will always be at the end. Also with a space before it.

Example: Anisong Database Alt

Sample code here

Sheet ​

IconCodeDesc
:win:Windows
:and:Android
:app:iOS / iPadOS / macOS
:lin:Linux
:bsd:FreeBSD
:cmd:CLI / TUI
:ff:Firefox
:cr:Chromium
:web:Web