Giter Club home page Giter Club logo

pcsx2-net-www's Introduction

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

Navigate to your local git repository for the site and use the below to start the server.

To start the server you will need to be in your Github repository that contains the package.json.

yarn start # alternatively, you can use `npm run start`

Browse to http://localhost:8080/

Linux

TODO - but very similar just using your package manager of choice

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.

Builtin Component Documentation

See the following article

pcsx2-net-www's People

Contributors

dependabot[bot] avatar derekturtleroe avatar f0bes avatar github-actions[bot] avatar govanify avatar jordanthetoaster avatar joshg253 avatar kamfretoz avatar mrck1 avatar mrlinkwii avatar reddevilus avatar seapancake avatar skierpage avatar stenzek avatar tellowkrinkle avatar xtvaser avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

pcsx2-net-www's Issues

Use article numbering for blog articles

RedDevilus has suggested using article numbering and possibly adding the date into the URL (Dolphin does both of these).

image

Creating this issue on his behalf as this project is still private.

Better looking light/dark theme switching icon

Has already caused confusion, currently kinda ugly -- it needs some additional styling around it // likely use a toggle button of some sort. Cloudflare's is a nice clean reference to try to mimic.

Fix minor spelling/grammar mistakes

  • On homepage 'atleast ' should be 'at least'
  • On Downloads 'the releases type you are looking for' should be 'the release type you are looking for'
  • On Downloads 'under-go' should be 'undergo'
  • On Downloads 'this provides an at a glance view' should be 'this provides 'an at-a-glance view'
  • On Downloads 'bleeding edge should be 'bleeding-edge'
  • On Downloads 'Unless you require bleeding edge features or fixes for a particular game' should have a comma at the end

Move social media icons to the top menu

At present we have them at the bottom of the page in addition to being under the 'Links' menu. From a desktop experience perspective this makes no sense and we should simply move these icons to the top of the page as they'll scroll with the content.

From the mobile perspective there is more limited screen real estate however if we drop the 'PCSX2' in the top left we should have enough space for all the icons at the top which avoids the awkward user experience of expanding a menu that duplicates another section of the page.

I understand there might be reservations to removing the name however it's on the landing page and in the URL bar so I don't see this as being as much of an issue.

The links menu is even more awkward on menu as the top menu is a drop-down and links is a drop-down within a drop-down which is not great.

GDPR consent for cookies

this will be needed for advertisements, if the user rejects it, we serve non-personalized ads.

Searching by serial does not work in compatibility list

If you search for 'SLES-53481' you simply get all results when it should return title '10,000 Bullets'. Searching by CRC works along with searching by title. Searching for '53481' works though so unsure if this is a bug of designed to only accept on the numerical portion and not region+number.

Create a 404 Page

Looks like we may have some sort of 404 redirect going on? Locally you get a rough 404 response page that is not customized yet, in prod it redirects to the home page.

add privacy policy

we may need to add a section about how the backend api for releases has logs and anonymous (IP) usage telemetry as well.

Change the loading icon for the compatibility list display change

At present it uses pcsx2-logo.svg which is just a white silhouette, understand this might be a design choice however considering all other logos use the colored version (Footer and header) I'd prefer to change this to that version. Also makes it easier to identify when the display changes.

Very minor issue obviously, change is very simple change to use pcsx2-logo.webp.

Fallback download artifacts

There is an issue with the latest Linux artifacts (GitHub fault)

image

Perhaps a good idea to give an older artifact that is available as release?

It's uncommon to happen but a good idea in case something fails.

Add various PCSX2 tools/tool links back to site

One user mentioned the BIOS dumper is not on the site anymore. I think there was some discussion on the tools previously however it was a long while back.

Suggest we talk about what we want to host (e.g Our tools online?) and if we don't want to host to maybe add a menu for 3rd party tool tools.

more tagging and taxonomy support

right now there is two taxonomies - devblogs and progress reports

it would be nice to be able to filter by author, maybe add other relevant tags. But we most likely don't want a million tags to clutter up filtering.

related articles on article pages

If you are viewing the Q4 progress report, perhaps suggest the previous progress report or something? That's the general idea, im sure hugo has capabilities for this as well.

improve themeing on docs page

the docs use docsify in an iframe, so getting the theme matched up is a little tricky, but is appparently possible.

Ideally when changing the theme on the main website, it should reflect there. This is simple on pageload, but needs some more handling for changing at run-time, imo I would just reload the iframe.

what kind of blank DVD disc? DVD[-+]R[W] [DL] {4,8,16x}?

https://pcsx2.net/guides/basic-setup/ says "Burn the ISO to a DVD" to insert in your PS2.

But there seem to be at least 7 kinds of blank DVDs: DVD-R, DVD+R DVD-RW, DVD+RW, DVD+R DL, DVD-RW, and DVD+RW, and then the different 4X, 8X, 16X speeds. Which ones work with a PlayStation 2? Which is best? If I buy a faster DVD-R and burn at a slower speed, is that as good as using "slower" DVD media?

The Internet coughs up many conflicting answers (showing that many people have this question over the decades), e.g. "Also 8X DVD-R will probably work best for you. Do not use DVD+RW or DVD-RW, they will not work on most PS2's", but then someone else wrote "stick with DVD+R... taiyo yuden dvd-r or +r depending which one your ps2 plays nicer with", but Taiyo Yuden is not available.

Thanks!

Move social buttons from bottom of page into top menu

Something I meant to raise before however I think it's weird we have 2 sets of links, if we could move them to the top of the page we can use them next to the text.

We also need to change the icons to color otherwise we're violating the branding guidelines. Added benefit of making the page a bit more colorful and the social links more obvious in comparison to our internal pages. Having said that I looked a bit deeper and most of them don't like resizing which we'll have to do.

On mobile I'd suggest we do the same thing and just add the colored icons next to the menu item.

Youtube - https://kstatic.googleusercontent.com/files/10450be01c1b184ffd2f49ede02f92c666f53fdf1b1cb6fa479f5e9d41cceb905e928c7be4f5593ff9edd0213a6cb096792e66ae17270b01e2cb909ee23a2955
Github - https://github-media-downloads.s3.amazonaws.com/GitHub-Mark.zip
Discord - https://discord.com/assets/2d20a45d79110dc5bf947137e9d99b66.svg
Twitter - https://about.twitter.com/content/dam/about-twitter/en/brand-toolkit/downloads/twitter-logo-01282021.zip

Also we can add our internal tools as well to make it consistent maybe.

Mediawiki - https://commons.wikimedia.org/wiki/Category:MediaWiki_logo_(2020)
Mybb - See below

Add more useful information to the compatibility page

For us, 99% of games are playable -- the compatibility page is pretty redundant.

What would be better is if there was a compatibility api, like we have a release API that can show things like:

  • known issues (links to github issues)
    • previously solved issues (and what version solved them)
  • rough hardware requirements maybe
  • number of reports, how popular the games are, etc

migrate the rest of the legacy articles

i did all of the 2021 progress reports, we'll want to slowly migrate legacy articles that we want. They are created with aliases so old links will not become dead.

Development switch left enabled

13xforever mentioned that you can add ?dev=true to the site to stop the animation. Trivial issue however raising it here in case it has any implications. Relevant code.

`let guiEnabled = params.get('dev') == "true";

var gui;
if (guiEnabled) {
gui = new dat.GUI({ autoPlace: false });
gui.domElement.id = 'splash-screen-gui';
}`

Link compatability pages to forum/wiki

At present they don't link anywhere, links are within data.json, some of the forum links will be blank even when there are forum threads for them which is a known issue. Setting as a blocker as this a feature on the current site and is a major part of the compatibility list.

Add a CI workflow

  • cypress-io for testing functionality
  • some sort of linter for checking things like image formats (we are preferring webp)

Remove duplicated page buttons on homepage

When you land on the homepage you are presented with 2 sets of buttons, those in the top menu and those in front of the PS2 background image, neither are a fixed menu as such they both scroll off screen.

I would suggest we remove the buttons from the background and maybe style them in the top menu instead (Although this maybe more difficult on mobile with space constraints.

Fix the top menu to scroll with the page

By not doing this we remove the ability to a user to navigate to another page without scrolling to the top of the page, this is a significantly worse user experience.

On mobile this prevents being able to open the drop-down menu to navigate elsewhere as this resides in the top bar as well.

Add a Back to top button

Sticky back to top button like a small arrow pointing up will be pretty useful on all pages, i think it's a very nice addition

add translations

Atleast for things like the menus and such, hugo has good support for this kind of thing -- but we could even extend it to the articles themselves if desired.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.