Takodachi
Wotaku

Appearance

Getting started ​

Local ​

Installing prerequisites ​

  1. Git
  2. Node JS
  3. pnpm

Open powershell and run this:

bash
# Download and install Chocolatey:
powershell -c "irm https://community.chocolatey.org/install.ps1|iex"

# Download and install Git:
choco install git

# Verify Git version:
git -v

# Download and install Node.js:
choco install nodejs

# Verify the Node.js version:
node -v

# Download and install pnpm:
corepack enable pnpm

# Verify pnpm version:
pnpm -v

Deployment

If you want to learn how to deploy the website online, read the official vitepress docs.

Icon ​

Wotaku fetches icons using Iconfiy. To get the icon names, visit Iconify or Icones. All the added iconpacks are here.

Writing Rules ​

SectionStyle
In-line:package name-icon name:
Button:i-package name-icon name:
Typescript<span class="i-package-name:icon-name"></span>
Index.mdSVG Code

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.

icon name section
icon name section

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.

URL entry convention
URL entry convention

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.

Adding tooltips

To learn, how to add tooltips, click here.

Sheet ​

IconCodeDesc
:s:Favorite
:e:Extension(s)
:prx:Proxies
:ero:Focuses on NSFW content
:acc:Needs Account
:help:Help / Docs
:more:Related resources

Tooltip ​

Tooltip is used to give extra information. The information should be precise. No need of stating something obvious. Tooltip has two components. The key will be beside the URL in the markdown file and key data will be in docs\.vitepress\configs\markdown\index.ts. The key is case-sensitive.

ts
// Single line

key: { content: "markdown" }

// Single line with other variables

key2: {
   title: "key2",
   icon: "i-material-symbols-info-i",
   content: "content"
   }

// Multi line with other variables

multiline: {
   title: "multiline",
   icon: "i-material-symbols-info-i",
   content: `This is **markdown** with
 - A bullet point
 - Another bullet point`
   }

There is also

inline tooltips
. For this, you don't have to put them in index file.

md
^[inline tooltips](just like this)

Front matter ​

Moved

Check the front matter description here.