c94b94afd5
* styling: fix text centering for blogs An update changed the behaviour of when authors have their icon and to the right text should be aligned to the center * styling: more horizontal gap needed * styling: fix to be more center on vertical axis * styling: slightly move text a bit lower * styling: make it more center-aligned vertically * styling: prettier plugin with selection format * styling: yarn prettier -w src/css/custom.css Normal prettier doesn't work, so run it locally via docusaurus: C:\Users\Red>cd C:\Users\Red\Documents\GitHub\pcsx2-net-www C:\Users\Red\Documents\GitHub\pcsx2-net-www>yarn prettier -w src/css/custom.css yarn run v1.22.22 warning ..\..\..\package.json: No license field $ C:\Users\Red\Documents\GitHub\pcsx2-net-www\node_modules\.bin\prettier -w src/css/custom.css src/css/custom.css 92ms Done in 0.41s. * styling: Center-fix
PCSX2 Website
The main PCSX2 website is a statically generated website, leveraging Docusaurus.
Setup
Windows
Setup Scoop as per instructions at https://scoop.sh/.
Open Powershell and install the following.
scoop install git nodejs
npm install --global yarn
To start the server you will need to be in your Github repository that contains the package.json. Use this command to start the server:
yarn start # alternatively, you can use `npm run start`
Browse to http://localhost:8080/
Linux
You need to install NodeJS using your package manager, here are a few examples:
Ubuntu:
sudo apt-get install nodejs
Fedora:
sudo dnf install nodejs
Arch Linux:
sudo pacman -Syu nodejs
Now you can install yarn via NPM (Make sure you have installed NodeJS first):
npm install --global yarn
To start the server you will need to be in your Github repository that contains the package.json. Use this command to start the server:
yarn start # alternatively, you can use `npm run start`
Browse to http://localhost:8080/
Developing
- The docusaurus documentation is very useful and has plenty of examples https://docusaurus.io/docs
- Docusaurus uses React and JSX, seek out related resources for those if editing the frontend code
Making a new Article
Run the following to setup the boilerplate for a new article:
yarn new-article
The article will go into /blog/<year>/<title>
You should add an image to serve as a preview and title card respectively (if appropriate) by using the image: and titleImage: frontmatter field, for example:
---
title: ...
---
image: ./img/my-cool-thumbnail.webp
titleImage: ./img/my-cool-thumbnail.webp
---
titleImage assets currently needs to be stored in the static folder.
No image path, whether in the frontMatter or in the article, should contain spaces.
Caveats if Migrating a Legacy Article
- When running the command above, you should provide an alias that matches the relative URL from the old website. This will prevent legacy links from becoming dead. See existing articles that have been migrated for an example.