This project is a collection of cute VTuber style logos. All credits can be founded in src/data/credits.ts
. Thanks to their great works!
Currently, all logos are shown on https://vtuber-style-logos.vercel.app/.
/author/:author
)pnpm i
First, run the development server:
pnpm dev
P.S. Ensure your Node.js version is > v18.17.0. Consider using NVM for easy version management.
This PR shows a great example of the uploading process. You can follow what this PR did, or based on the following steps.
Here're 4 steps:
Upload your images in public/
folder. Usually, if you only have few logos to upload, you can directly choose the DownloadedLogos
folder and follow the structure. If you want some more, you can create your own folder, similar to this.
Add the credit. credits.ts
contains the information of each author. Note that you need to add the author name in the above Enum
, and also detailed information in the below CREDITS
object.
(optional) If you know how to code, and want to put some logos to a unique collection, you can create a new folder in src/data
. Otherwise, you don't need to do this step, and just create your file in /src/data/DownloadedLogos
Create a new brand file. You can follow any existing brand file as reference, and here're some optional attributes:
Enum
.Also don't forget to import this file to an index.ts
file for centralised management.
If you have many logos and want to upload in one click, then this method is helpful. There're 4 steps:
Create and upload your images to GitHub repository similar to KawaiiLogos. It's preferred to use the folder->image
structure since it can contained multiple logos in one brand file. If you only have one logo for each brand, you can only upload images. Also, you need to clone your repository to public as a submodule.
Add setting in setting.json
.
{
"githubRepoName": "CuteVtubingThing",
"downloadUrl": "https://raw.githubusercontent.com/murimurikyu/CuteVtubingThing/main/",
"author": "murimurikyu",
"imagesOnly": true
}
Note: If you have images as the first step mentions, you need to set imagesOnly
to true
.
run pnpm generate
in terminal, and you should find your logos have been generated.
import your index.ts
to brand.ts
.
Previously I choose the format that directly write down each file (i.e. vscode.ts
) for each brand instead of an automatically API to genrate images dynamically, because I want each logo can be maintained in a easier way. For example, some brand has aliases, such as vs code and k8s, using static files for managing can be a better way.
Besides, since this project's architecture is created only in few hours, there're indeed many aspect I didn't consider it well. For example, I give each logo an author attribute, because I thought one brand may have logos designed by different authors. However, soon I found out people prefer unique cards from different authors instead of a mixed card with so many buttons. There're some more details that can be improved, maybe in the future I would fix them.
pnpm generate
to generate data)Any PR is welcome!