Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update getting started screenshots #294

Merged
merged 4 commits into from
Oct 19, 2023

Conversation

szczys
Copy link
Collaborator

@szczys szczys commented Oct 16, 2023

No description provided.

@github-actions
Copy link

github-actions bot commented Oct 16, 2023

Visit the preview URL for this PR (updated for commit 7c50e4a):

https://golioth-docs-dev--pr294-szczys-update-gettin-4n52qmv9.web.app

(expires Tue, 24 Oct 2023 16:07:44 GMT)

🔥 via Firebase Hosting GitHub Action 🌎

Sign: f53b02bdc98ce6f5593931ec4c339aa96bac84df

@szczys
Copy link
Collaborator Author

szczys commented Oct 16, 2023

As reported by @dylanswartz, the side-by-side images work if you run locally, but when you build for production the source path is not rendering correctly:

<img loading="lazy" src="[object Object]" alt="Golioth console without a project" class="img_ev3q">

This commit adds a FlexImage component that can be used to place images
side-by-side in two or three columns. An incomplete update to the user
onboarding docs is included as a demonstration of the new syntax, however the
rest of the page will be updated in a future commit.

Signed-off-by: Mike Szczys <mike@golioth.io>
* Update images for new branch
* Instruct user to launch wizard after registration

Signed-off-by: Mike Szczys <mike@golioth.io>
Update device creation screenshots to reflect new brand.

Signed-off-by: Mike Szczys <mike@golioth.io>
Update device authorization screenshots to reflect new brand.

Signed-off-by: Mike Szczys <mike@golioth.io>
@szczys szczys force-pushed the szczys/update-getting-started-screenshots branch from a2d9c1f to 7c50e4a Compare October 17, 2023 15:55
@szczys
Copy link
Collaborator Author

szczys commented Oct 17, 2023

As reported by @dylanswartz, the side-by-side images work if you run locally, but when you build for production the source path is not rendering correctly:

<img loading="lazy" src="[object Object]" alt="Golioth console without a project" class="img_ev3q">

This was caused by the ideal-images plugin. It's off by default in development but on in production. That's why images worked locally, but not after CI ran. With this plugin you cannot use the tag but must instead use a custom tag. Here's a working snippet of one of these commits:

import Image from '@theme/IdealImage';
import FlexImage from '@site/src/components/FlexImage';
import GoliothConsoleOnboarding from '../assets/console-onboarding.jpg';
import GoliothConsoleEmpty from '../assets/console-click-quickstart.jpg';
import GoliothConsoleQuickstart from '../assets/console-quickstart-lets-go.jpg';

<FlexImage column_count="3">
  <Image img={GoliothConsoleOnboarding} alt="Golioth console without a project"/>
  <Image img={GoliothConsoleEmpty} alt="Golioth console without a project"/>
  <Image img={GoliothConsoleQuickstart} alt="Golioth console quickstart launch screen"/>
</FlexImage>

Copy link
Contributor

@ChrisGammell ChrisGammell left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@ChrisGammell ChrisGammell merged commit 0cab1cf into main Oct 19, 2023
@szczys szczys deleted the szczys/update-getting-started-screenshots branch May 29, 2024 21:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants