feat: add navbar to support multi language #42

geoffreylgv · 2023-09-01T19:44:16Z

Description

This PR is a feature adding a sidebar for the multi-language version of the intro course.

What type of PR is this? (check all applicable)

Related Tickets & Documents

Closes #16

Mobile & Desktop Screenshots/Recordings

Added tests?

👍 yes
🙅 no, because they aren't needed
🙋 no, because I need help

Added to documentation?

[optional] Are there any post-deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

netlify · 2023-09-01T19:44:20Z

✅ Deploy Preview for sauced-intro ready!

Name	Link
🔨 Latest commit	`5148ad2`
🔍 Latest deploy log	https://app.netlify.com/sites/sauced-intro/deploys/64fb79e5218de7000862ab15
😎 Deploy Preview	https://deploy-preview-42--sauced-intro.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

antonio-pedro99

Nice job @geoffreylgv.
Apart from my specific comments, here is one of the reasons to not including French related translation in this PR.

This PR introduces the basic structure to support multiple language.
Once merged, to add a new idiom translation, I would just add the language in the _layouts/navbar.md and create a new folder under translations with the language short form, like pt-br for Brazilian Portuguese.

This is to avoid conflicts with #38 and #35.
And also, you can not add semi translated docs here. If this PR gets merged now, users will see that there's a French version, but they won't see because it is not available yet. :)

IMHO, the only change we need in this PR is:

* Languages
    * [:us: English](/)

The rest you can include in #38.

_layouts/navbar.md

translations/_layouts/navbar.md

translations/_layouts/sidebar.md

translations/fr/README.md

geoffreylgv · 2023-09-04T11:59:03Z

Nice job @geoffreylgv. Apart from my specific comments, here is one of the reasons to not including French related translation in this PR.

This PR introduces the basic structure to support multiple language.

Once merged, to add a new idiom translation, I would just add the language in the _layouts/navbar.md and create a new folder under translations with the language short form, like pt-br for Brazilian Portuguese.

This is to avoid conflicts with #38 and #35. And also, you can not add semi translated docs here. If this PR gets merged now, users will see that there's a French version, but they won't see because it is not available yet. :)

IMHO, the only change we need in this PR is:
* Languages
    * [:us: English](/)
The rest you can include in #38.

Hello @antonio-pedro99
I've removed french related contents to have a single temple for the navbar
This means in the translations/country-code/, we should have _layouts/sidebar.md and _layouts/navbar.md to have the navbar and sidebar in the specific language we are translating

antonio-pedro99

LGTM
Left a comment.

index.html

BekahHW · 2023-09-05T16:50:56Z

When I'm in dark mode, the text for the language gets lighter. I think this is a docsify thing, but let me know if there's a different setting we need to add.

Also, do you know why the dropdown with the language disappears if you don't comment out 

geoffreylgv · 2023-09-06T16:42:05Z

When I'm in dark mode, the text for the language gets lighter. I think this is a docsify thing, but let me know if there's a different setting we need to add.

Hi @BekahHW, for the dark/light mode on language dropdown, it's a docsify thing; let dig on settings that can help to have it also changeable.

Also, do you know why the dropdown with the language disappears if you don't comment out 

And for the CSS commented, hmm there is a way actually to have the centered navbar behavior

BekahHW · 2023-09-07T14:16:38Z

@geoffreylgv for the commented out portion, does that impact css elsewhere? I haven't tested it out, but before merging this in, I want to make sure that it's not impacting things I haven't seen

geoffreylgv · 2023-09-07T14:38:48Z

@geoffreylgv for the commented out portion, does that impact css elsewhere? I haven't tested it out, but before merging this in, I want to make sure that it's not impacting things I haven't seen

No it doesn't affect, @BekahHW
In the meantime I'll check the CSS and propose a minor change (maybe write one line or edit twoo in the custom style) if we should keep the CSS line not commented.

geoffreylgv · 2023-09-07T15:42:22Z

@geoffreylgv for the commented out portion, does that impact css elsewhere? I haven't tested it out, but before merging this in, I want to make sure that it's not impacting things I haven't seen

Hey @CBID2 @BekahHW @antonio-pedro99
I will kindly ask to check this behavior on your end

By editing the position property from unset to relative
~~position: unset !important;~~
position: relative !important;

Final app-nav style

.app-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative !important;
	margin-top: 16px !important;
	margin-right: unset !important;
}

Basically, this means to keep the <link rel="stylesheet" href="./styles/custom.css" /> uncommented in the html and to edit the custom.css file
The unset property tells to ignore any inherited position property on the app-nav who is static by default

CBID2 · 2023-09-08T19:03:43Z

@geoffreylgv for the commented out portion, does that impact css elsewhere? I haven't tested it out, but before merging this in, I want to make sure that it's not impacting things I haven't seen

Hey @CBID2 @BekahHW @antonio-pedro99 I will kindly ask to check this behavior on your end

By editing the position property from unset to relative ~~position: unset !important;~~ position: relative !important;

Final app-nav style
.app-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative !important;
	margin-top: 16px !important;
	margin-right: unset !important;
}
Basically, this means to keep the <link rel="stylesheet" href="./styles/custom.css" /> uncommented in the html and to edit the custom.css file The unset property tells to ignore any inherited position property on the app-nav who is static by default

Hey @geoffreylgv. I can't test it locally unless you grant me permission to push code to your PR. Invite me to your repo

geoffreylgv · 2023-09-08T19:44:33Z

@geoffreylgv for the commented out portion, does that impact css elsewhere? I haven't tested it out, but before merging this in, I want to make sure that it's not impacting things I haven't seen

Hey @CBID2 @BekahHW @antonio-pedro99 I will kindly ask to check this behavior on your end
By editing the position property from unset to relative ~~position: unset !important;~~ position: relative !important;
Final app-nav style
.app-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative !important;
	margin-top: 16px !important;
	margin-right: unset !important;
}
Basically, this means to keep the <link rel="stylesheet" href="./styles/custom.css" /> uncommented in the html and to edit the custom.css file The unset property tells to ignore any inherited position property on the app-nav who is static by default
Hey @geoffreylgv. I can't test it locally unless you grant me permission to push code to your PR. Invite me to your repo

Ok @CBID2 done! Check your mail

CBID2 · 2023-09-08T19:51:10Z

@geoffreylgv for the commented out portion, does that impact css elsewhere? I haven't tested it out, but before merging this in, I want to make sure that it's not impacting things I haven't seen

Hey @CBID2 @BekahHW @antonio-pedro99 I will kindly ask to check this behavior on your end
By editing the position property from unset to relative ~~position: unset !important;~~ position: relative !important;
Final app-nav style
.app-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative !important;
	margin-top: 16px !important;
	margin-right: unset !important;
}
Basically, this means to keep the <link rel="stylesheet" href="./styles/custom.css" /> uncommented in the html and to edit the custom.css file The unset property tells to ignore any inherited position property on the app-nav who is static by default
Hey @geoffreylgv. I can't test it locally unless you grant me permission to push code to your PR. Invite me to your repo
Ok @CBID2 done! Check your mail

Thanks @geoffreylgv. I pushed the code. The text does come out light in dark mode, but once I hover over the language name, it darkens a bit. As far as other parts @BekahHW, they're ok.

testing-navbar.mov

BekahHW · 2023-09-08T21:07:20Z

lgtm!

antonio-pedro99 · 2023-09-08T21:08:25Z

Well done @geoffreylgv

CBID2 · 2023-09-08T21:09:20Z

Woohoo! We did @geoffreylgv and @antonio-pedro99! Now onto PR #38 @BekahHW!

geoffreylgv · 2023-09-08T21:58:05Z

Well done @geoffreylgv
Woohoo! We did @geoffreylgv and @antonio-pedro99! Now onto PR #38 @BekahHW!

Thank you all, we did it😃

feat: add navbar to support multi language

9f966e8

feat: final correction on the sidebar

146bcdc

This was referenced Sep 1, 2023

Feature: Translate the course to other language #16

Closed

feat: add french translation #38

Merged

antonio-pedro99 suggested changes Sep 2, 2023

View reviewed changes

_layouts/navbar.md Outdated Show resolved Hide resolved

translations/_layouts/navbar.md Outdated Show resolved Hide resolved

translations/_layouts/sidebar.md Outdated Show resolved Hide resolved

translations/fr/README.md Outdated Show resolved Hide resolved

feat: updating navbar for multi-langue

f90a309

antonio-pedro99 approved these changes Sep 4, 2023

View reviewed changes

index.html Show resolved Hide resolved

CBID2 assigned geoffreylgv Sep 6, 2023

CBID2 added the 💡 feature label Sep 6, 2023

fix: revise CSS property

5148ad2

BekahHW merged commit 38f26f8 into open-sauced:main Sep 8, 2023
4 checks passed

CBID2 deleted the feat-adding-navbar branch September 8, 2023 21:08

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add navbar to support multi language #42

feat: add navbar to support multi language #42

geoffreylgv commented Sep 1, 2023

netlify bot commented Sep 1, 2023 •

edited

Loading

antonio-pedro99 left a comment •

edited

Loading

geoffreylgv commented Sep 4, 2023

antonio-pedro99 left a comment •

edited

Loading

BekahHW commented Sep 5, 2023

geoffreylgv commented Sep 6, 2023

BekahHW commented Sep 7, 2023

geoffreylgv commented Sep 7, 2023

geoffreylgv commented Sep 7, 2023

CBID2 commented Sep 8, 2023 •

edited

Loading

geoffreylgv commented Sep 8, 2023

CBID2 commented Sep 8, 2023 •

edited

Loading

BekahHW commented Sep 8, 2023

antonio-pedro99 commented Sep 8, 2023

CBID2 commented Sep 8, 2023

geoffreylgv commented Sep 8, 2023

feat: add navbar to support multi language #42

feat: add navbar to support multi language #42

Conversation

geoffreylgv commented Sep 1, 2023

Description

What type of PR is this? (check all applicable)

Related Tickets & Documents

Mobile & Desktop Screenshots/Recordings

Added tests?

Added to documentation?

[optional] Are there any post-deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

netlify bot commented Sep 1, 2023 • edited Loading

✅ Deploy Preview for sauced-intro ready!

antonio-pedro99 left a comment • edited Loading

Choose a reason for hiding this comment

geoffreylgv commented Sep 4, 2023

antonio-pedro99 left a comment • edited Loading

Choose a reason for hiding this comment

BekahHW commented Sep 5, 2023

geoffreylgv commented Sep 6, 2023

BekahHW commented Sep 7, 2023

geoffreylgv commented Sep 7, 2023

geoffreylgv commented Sep 7, 2023

CBID2 commented Sep 8, 2023 • edited Loading

geoffreylgv commented Sep 8, 2023

CBID2 commented Sep 8, 2023 • edited Loading

BekahHW commented Sep 8, 2023

antonio-pedro99 commented Sep 8, 2023

CBID2 commented Sep 8, 2023

geoffreylgv commented Sep 8, 2023

netlify bot commented Sep 1, 2023 •

edited

Loading

antonio-pedro99 left a comment •

edited

Loading

antonio-pedro99 left a comment •

edited

Loading

CBID2 commented Sep 8, 2023 •

edited

Loading

CBID2 commented Sep 8, 2023 •

edited

Loading