Aniverse UI

Aniverse official site

Aniverse is an open source database for hebrew anime translations.

Main Technologies

• Nuxt.js

  Nuxt is a progressive framework based on Vue.js to create modern web applications.
  Check out Nuxt.js docs.

• Tailwind CSS

  Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.
  Check out Tailwind CSS docs.

Build Setup

Installation

Install dependencies:

$ npm ci

Or install and update dependencies (update package-lock):

$ npm install

Launch development server

Serve with hot reload at localhost:3000

$ npm run dev

See Browser Debugging

Test and lint

Run tests:

$ npm run test

Find lint problems:

$ npm run lint

Build and launch production

Build and launch production static server (current):

$ npm run generate
$ npm run start

Or build and launch production SSR server:

$ npm run build
$ npm run start

Development Tools

VSCode extensions

VS Code prompts a user to install the recommended extensions when the workspace is opened for the first time. The user can also review the list with the Extensions: Show Recommended Extensions command.

Required:

• Vetur
• ESLint
• stylelint
• Debugger for Chrome

Recommended:

• Jest
• Vue Peek
• Tailwind CSS IntelliSense
• TabNine
• Auto Rename Tag
• Markdown Preview Github Styling
• npm
• GitLens
• vscode-icons
• Todo Tree

Browser extensions

• Vue.js devtools for chrome

Debugging

Browser Debugging:

For simple debugging just run npm run dev to serve the site with hot reloading at localhost:3000, and open the site in any browser.

• Best for live HTML editing. Edit the code and watch the browser window change.
• You can use the browser devtools, like CSS Editor, Breakpoints and Network Analysis.

It's recommended to use Vue.js devtools for chrome when in chrome.

VSCode Debugging:

To directly debug from VSCode with all its capabilities:
In VSCode, select Launch Nuxt Server/Client in the debugger drop-down menu, and start debugging by clicking on the green arrow or pressing F5.

If your server is already running (by npm run dev somewhere), you can start faster only the client debugger by selecting Launch client: chrome in the drop-down menu.

• VSCode is probably better for JavaScript debugging.
• VSCode is a great way to debug the build process or the Server-Side Rendering.
• Also has hot reloading.

VSCode Debugging requires the Debugger for Chrome extension.

Contributing

TODO...

Branches

• master: The main branch. All development code is merged into master in sometime.
• prod: Everything pushed to prod updates the real production site.
• preprod: Everything pushed to preprod updates the real pre-production site.

Tip: To be sure the latest commit to prod or preprod has updated the site, open the site in the browser and open the DevTools Console. You will see a logged message: LAST_COMMIT_SHA: <sha>.
Just compare the <sha> to the latest commit in the prod/preprod branch.

FAQ

• How to add custom font?
• How to add icons?