[Issue-3666] Add PWA to docusaurus #3693

Kevan-Y · 2022-10-07T01:51:33Z

Issue This PR Addresses

Fixes #3666

Type of Change

Bugfix: Change which fixes an issue
New Feature: Change which adds functionality
Documentation Update: Change which improves documentation
UI: Change which improves UI

Description

Add PWA to docusaurus

Steps to test the PR

Checkout branch
Run pnpm i
Run pnpm --filter @senecacdot/telescope-docs build && pnpm --filter @senecacdot/telescope-docs serve

Should able to see this button to use PWA

Checklist

Quality: This PR builds and passes our npm test and works locally
Tests: This PR includes thorough tests or an explanation of why it does not
Screenshots: This PR includes screenshots or GIFs of the changes made or an explanation of why it does not (if applicable)
Documentation: This PR includes updated/added documentation to user exposed functionality or configuration variables are added/changed or an explanation of why it does not(if applicable)

gitpod-io · 2022-10-07T01:51:41Z

RC-Lee · 2022-10-07T09:03:56Z

src/web/docusaurus/static/manifest.json

+  "theme_color": "#121D59",
+  "background_color": "#FFFFFF",


Do we want to make use of the theme colours defined here

telescope/src/web/docusaurus/src/css/custom.css

Line 10 in 232e0a9

--ifm-color-primary: #121d59;

telescope/src/web/docusaurus/src/css/custom.css

Line 28 in 232e0a9

--ifm-color-primary-lightest: #ffffff;

I think we can address this in another issue. I've tried setting "theme_color": "var(--ifm-color-primary)" but Chrome dev tools said it was invalid and automatically set the colour to white and I don't want to make this PR bigger than it already is.

I think it might be

"theme_color": var(--ifm-color-primary)

without the quotes around var()
but, I am quite weak at front-end so I'll let the front-end gurus decide what to do

That's what I initially thought, too, but apparently

"theme_color": var(--ifm-color-primary)

is not valid JSON... this can totally be someone else's issue ;D

I don't think you can use variable see https://web.dev/learn/pwa/web-app-manifest/#recommended-fields

humphd · 2022-10-07T13:30:00Z

TIL about pnpm --filter. Question: could we use this to improve what we do in pnpm dev here? cc @cindyledev

cindyorangis · 2022-10-07T16:53:16Z

TIL about pnpm --filter. Question: could we use this to improve what we do in pnpm dev here? cc @cindyledev

Wow, I didn't know pnpm --filter was a thing! It works for pnpm dev! I'll create a PR. Thank you based @Kevan-Y

cindyorangis

Works on my machine. Very cool.

RC-Lee · 2022-10-07T19:38:24Z

Running into this

PS C:\OSD\telescope> pnpm --filter @senecacdot/telescope-docs build

> @senecacdot/[email protected] build C:\OSD\telescope\src\web\docusaurus
> docusaurus build

[ERROR] Minimum Node.js version not met :(
[INFO] You are using Node.js v16.13.0, Requirement: Node.js >=16.14.
C:\OSD\telescope\src\web\docusaurus:
 ERR_PNPM_RECURSIVE_RUN_FIRST_FAIL  @senecacdot/[email protected] build: `docusaurus build`
Exit status 1

Kevan-Y · 2022-10-07T19:43:32Z

Running into this

PS C:\OSD\telescope> pnpm --filter @senecacdot/telescope-docs build

> @senecacdot/[email protected] build C:\OSD\telescope\src\web\docusaurus
> docusaurus build

[ERROR] Minimum Node.js version not met :(
[INFO] You are using Node.js v16.13.0, Requirement: Node.js >=16.14.
C:\OSD\telescope\src\web\docusaurus:
 ERR_PNPM_RECURSIVE_RUN_FIRST_FAIL  @senecacdot/[email protected] build: `docusaurus build`
Exit status 1

What is your node version?

RC-Lee · 2022-10-07T19:48:17Z

Running into this

PS C:\OSD\telescope> pnpm --filter @senecacdot/telescope-docs build

> @senecacdot/[email protected] build C:\OSD\telescope\src\web\docusaurus
> docusaurus build

[ERROR] Minimum Node.js version not met :(
[INFO] You are using Node.js v16.13.0, Requirement: Node.js >=16.14.
C:\OSD\telescope\src\web\docusaurus:
 ERR_PNPM_RECURSIVE_RUN_FIRST_FAIL  @senecacdot/[email protected] build: `docusaurus build`
Exit status 1

What is your node version?

Right now I'm trying to build the containers in docker to see if it works.
But think its worth noting to see how it might clash with our node version in package.json

telescope/package.json

Line 86 in 3f7f5e4

"node": ">=14.0.0",

RC-Lee · 2022-10-07T19:52:41Z

I'm a little confused with PWA and what it does.
Is there a place I'm supposed to toggle it on?

Kevan-Y · 2022-10-07T19:58:59Z

Is there a place I'm supposed to toggle it on?

It suppose to have but running on dev mode it won't be shown

RC-Lee · 2022-10-07T20:09:09Z

Is there a place I'm supposed to toggle it on?

It suppose to have but running on dev mode it won't be shown

You might want some more experienced (with docusaurus and front-end) reviewers to review this, since this is out of my comfort zone.
I can go the easy way and update my node version, but once again I don't know how that might conflict with our package.json

telescope/package.json

Line 86 in 3f7f5e4

"node": ">=14.0.0",

And since its hidden in dev mode, I can't see if its working through docker containers locally

Kevan-Y · 2022-10-07T20:10:02Z

@RC-Lee I believe your browser is running under Firefox. Use a Chromium-based browser

Note: Currently, only the Chromium-based browsers such as Chrome, Edge, and Samsung Internet require the service worker. If developing your app using Firefox, be aware that you will need a service worker to be compatible with Chromium-based browsers.
see https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Installable_PWAs#requirements

Kevan-Y · 2022-10-07T20:25:38Z

@humphd @cindyledev @RC-Lee Wondering if it would be good to have a button to install app, so it would be more accessible for people that doesn't know what is PWA.

humphd · 2022-10-08T13:17:35Z

Having a link to do it makes sense I think, yes.

Kevan-Y · 2022-10-08T13:51:52Z

@humphd Added

Kevan-Y · 2022-10-12T02:09:12Z

@cindyledev Just need a re-approval, then I will squash those commit and merge

humphd · 2022-10-12T13:44:42Z

Why are we merging master into this branch?

Kevan-Y · 2022-10-12T13:51:59Z

Why are we merging master into this branch?

So I could use Squash and the merge button from GitHub.

I needed to make sure my branch have the most updated master commit.

humphd · 2022-10-12T14:01:18Z

I don't care how you want to do it so long as we don't end-up with master merged into topic branches. Ideally you'd squash on your own and merge that.

Kevan-Y · 2022-10-12T14:17:34Z

I don't care how you want to do it so long as we don't end-up with master merged into topic branches. Ideally you'd squash on your own and merge that.

Alright, I rebased/Squash manually

cindyorangis

Pretty slick, if I do say so myself

Kevan-Y added hacktoberfest-accepted area: docusaurus Anything related to Docusaurus labels Oct 7, 2022

Kevan-Y self-assigned this Oct 7, 2022

vercel bot deployed to Preview October 7, 2022 01:52 View deployment

RC-Lee reviewed Oct 7, 2022

View reviewed changes

cindyorangis mentioned this pull request Oct 7, 2022

#3671 update pnpm dev script in root with pnpm --filter #3695

Merged

8 tasks

cindyorangis previously approved these changes Oct 7, 2022

View reviewed changes

Kevan-Y requested a review from RC-Lee October 7, 2022 19:27

Kevan-Y dismissed cindyorangis’s stale review via 9b26a88 October 7, 2022 19:32

Kevan-Y force-pushed the issue-3666 branch from eabf45a to 9b26a88 Compare October 7, 2022 19:32

vercel bot deployed to Preview October 7, 2022 19:33 View deployment

RC-Lee removed their request for review October 7, 2022 20:15

vercel bot deployed to Preview October 8, 2022 13:52 View deployment

humphd previously approved these changes Oct 11, 2022

View reviewed changes

Kevan-Y requested a review from cindyorangis October 12, 2022 02:07

vercel bot deployed to Preview October 12, 2022 02:08 View deployment

Add PWA

65abf82

Kevan-Y dismissed humphd’s stale review via 65abf82 October 12, 2022 14:16

Kevan-Y force-pushed the issue-3666 branch from f0bcce4 to 65abf82 Compare October 12, 2022 14:16

Kevan-Y requested a review from humphd October 12, 2022 14:17

vercel bot deployed to Preview October 12, 2022 14:17 View deployment

cindyorangis approved these changes Oct 12, 2022

View reviewed changes

Kevan-Y merged commit 4e8648f into Seneca-CDOT:master Oct 12, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Issue-3666] Add PWA to docusaurus #3693

[Issue-3666] Add PWA to docusaurus #3693

Kevan-Y commented Oct 7, 2022 •

edited

Loading

gitpod-io bot commented Oct 7, 2022

RC-Lee Oct 7, 2022

cindyorangis Oct 7, 2022 •

edited

Loading

RC-Lee Oct 7, 2022

cindyorangis Oct 7, 2022

Kevan-Y Oct 7, 2022 •

edited

Loading

humphd commented Oct 7, 2022

cindyorangis commented Oct 7, 2022

cindyorangis left a comment

RC-Lee commented Oct 7, 2022

Kevan-Y commented Oct 7, 2022

RC-Lee commented Oct 7, 2022

RC-Lee commented Oct 7, 2022

Kevan-Y commented Oct 7, 2022

RC-Lee commented Oct 7, 2022

Kevan-Y commented Oct 7, 2022 •

edited

Loading

Kevan-Y commented Oct 7, 2022

humphd commented Oct 8, 2022

Kevan-Y commented Oct 8, 2022

Kevan-Y commented Oct 12, 2022

humphd commented Oct 12, 2022

Kevan-Y commented Oct 12, 2022

humphd commented Oct 12, 2022

Kevan-Y commented Oct 12, 2022

cindyorangis left a comment

[Issue-3666] Add PWA to docusaurus #3693

[Issue-3666] Add PWA to docusaurus #3693

Conversation

Kevan-Y commented Oct 7, 2022 • edited Loading

Issue This PR Addresses

Type of Change

Description

Steps to test the PR

Checklist

gitpod-io bot commented Oct 7, 2022

RC-Lee Oct 7, 2022

Choose a reason for hiding this comment

cindyorangis Oct 7, 2022 • edited Loading

Choose a reason for hiding this comment

RC-Lee Oct 7, 2022

Choose a reason for hiding this comment

cindyorangis Oct 7, 2022

Choose a reason for hiding this comment

Kevan-Y Oct 7, 2022 • edited Loading

Choose a reason for hiding this comment

humphd commented Oct 7, 2022

cindyorangis commented Oct 7, 2022

cindyorangis left a comment

Choose a reason for hiding this comment

RC-Lee commented Oct 7, 2022

Kevan-Y commented Oct 7, 2022

RC-Lee commented Oct 7, 2022

RC-Lee commented Oct 7, 2022

Kevan-Y commented Oct 7, 2022

RC-Lee commented Oct 7, 2022

Kevan-Y commented Oct 7, 2022 • edited Loading

Kevan-Y commented Oct 7, 2022

humphd commented Oct 8, 2022

Kevan-Y commented Oct 8, 2022

Kevan-Y commented Oct 12, 2022

humphd commented Oct 12, 2022

Kevan-Y commented Oct 12, 2022

humphd commented Oct 12, 2022

Kevan-Y commented Oct 12, 2022

cindyorangis left a comment

Choose a reason for hiding this comment

Kevan-Y commented Oct 7, 2022 •

edited

Loading

cindyorangis Oct 7, 2022 •

edited

Loading

Kevan-Y Oct 7, 2022 •

edited

Loading

Kevan-Y commented Oct 7, 2022 •

edited

Loading