Added slide selection and fixed image overflow for small screen sizes

[ajmcquilkin]

Motivation

This PR was created to improve the professionalism of the documentation site.

Changes

Updated docs image slideshow buttons

Updated the docs/src/pages/slideshow.jsx component to support user-selecting specific images within the slideshow. Previously users had to wait until the slideshow cycled to re-view an image. Now users can simply click on the dot corresponding to their desired image and that image will show. Note that after clicking on a dot the image will still cycle after a given period of time (configured in the component).

These buttons can now be used to view specific images within the slideshow

Fixed small-screen docs image display

Currently images within the docs homepage (docs/src/pages/index.jsx) do not display properly on small screens. This was fixed using the object-fit CSS rule.

Broken small-screen images

Fixed small-screen images

Related

No related PRs. No required documentation updates.

Additional Comments

No additional comments.

[gitpod-io]

[vercel]

Someone is attempting to deploy a commit to a Personal Account owned by @kimlimjustin on Vercel.

@kimlimjustin first needs to authorize it.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/kimlimjustin/xplorer/BAxJM8TZx5wzkSqwAh9exNnsjNHa
✅ Preview: https://xplorer-git-fork-ajmcquilkin-broken-docs-images-kimlimjustin.vercel.app

[im-coder-lg]

Looks great!

[im-coder-lg]

We'll just wait for approves from @kimlimjustin / @stanleyowen.

[im-coder-lg]

Wait, I kinda noticed an error with the slideshow, In 1 minute, I will make the video and post it here. It's best if this error is fixed now.

[im-coder-lg]

2021-11-25.08-56-31.mp4

Bug 1. The brightness in Xplorer blinds the text
Bug(not really) 2. It's supposed to be Xplorer's docs or Documentation, not Xplorer the docs.

[im-coder-lg]

xplorer/docs/src/pages/index.jsx

Line 23 in 12626e4

Xplorer the docs -{'>'}

Just edit that to Xplorer's docs(kinda sounds unprofessional) or Documentation(professional).
Edit: From 12626e4

[im-coder-lg]

Slideshow code:

xplorer/docs/src/pages/slideshow.jsx

Lines 5 to 34 in 12626e4

	name: 'Windows (dark)',
	src: '/img/Xplorer_dark.png',
	alt: 'Xplorer dark on Windows',
	},
	{
	name: 'Garuda Linux (light+)',
	src: '/img/Xplorer_linux.png',
	alt: 'Xplorer light+ on Linux',
	},
	{
	name: 'macOS (dark)',
	src: '/img/Xplorer_mac_dark.png',
	alt: 'Xplorer dark on macOS',
	},
	{
	name: 'Windows (light)',
	src: '/img/Xplorer_light.png',
	alt: 'Xplorer light on Windows',
	},
	{
	name: 'Windows (dark+)',
	src: '/img/Xplorer_dark+.png',
	alt: 'Xplorer dark+ on Windows',
	},
	{
	name: 'macOS (light+)',
	src: '/img/Xplorer_mac_light.png',
	alt: 'Xplorer light+ on macOS',
	},
	];

So, we need to modify the CSS to make the text readable when it's in light mode and dark mode. Since it's JSX, it could be possible.

[kimlimjustin]

Sorry for late reply, I was in school and for the Xplore the docs, it's on purpose to write that, also for the brightness, I think opening another PR is better if anyone to fix it. Thanks anyways

[im-coder-lg]

Well, kinda looks better with Documentation since it's not on Forem, it's on the website, right? Everyone uses Documentation if they are linking it on their product's own site. Just a suggestion, I highly recommend a change. The brightness, I need to check the CSS.