[Doc site]: Add tab switcher shortcode #4861

Ekwuno · 2022-06-20T01:24:31Z

Since Workers introduced module syntax, we need a way to show the difference between service worker syntax and module syntax in our docs.

This PR, adds a shortcode that can be used within our current docs setup as we would an Aside for example.

You can test it at https://add-tab-switcher-shortcode-c.cloudflare-docs-7ou.pages.dev/pages/tutorials/forms/

Todo:

Fix responsiveness

cloudflare-workers-and-pages · 2022-06-20T01:26:14Z

Deploying with Cloudflare Pages

Latest commit:	`39eed6f`
Status:	✅ Deploy successful!
Preview URL:	https://8ac54c53.cloudflare-docs-7ou.pages.dev
Branch Preview URL:	https://add-tab-switcher-shortcode-c.cloudflare-docs-7ou.pages.dev

View logs

kodster28 · 2022-06-28T21:34:01Z

From a bit of testing, looks like only the final example (TS (SW)) allows you to use the scroll down functionality to see the entire snippet.

Ekwuno · 2022-06-29T00:07:58Z

From a bit of testing, looks like only the final example (TS (SW)) allows you to use the scroll down functionality to see the entire snippet.

Yea! Ignore this for now. It's a draft because I have to fix that bug. I have actually, but on a different branch.

kodster28 · 2022-06-29T13:06:42Z

One question.. can't quite grok it just from looking at the code.

Is the tab component generic enough to be used throughout the docs site? i.e., like for helping us group examples like this on this page into a two-tabbed Dashboard / API structure?

Ekwuno · 2022-06-29T14:04:24Z

examples like this

Yes, it is! You will write the Shortcode just as you would an Aside

Ekwuno · 2022-06-30T11:20:08Z

@kodster28 you can test it now

static/style.css

Co-authored-by: Gift Egwuenu <[email protected]>

jgentes · 2022-06-30T14:05:43Z

Looks like there's an odd hover effect that goes away if width: 25% is removed from .tab-label-wrapper:

kristianfreeman

quick bug I found. also, is there any sort of active tab CSS styling?

kristianfreeman · 2022-06-30T14:17:30Z

assets/events.ts

+    const tabs = wrappers[i].querySelectorAll(".tab");
+
+    // Set the first tab in a group to display
+    ((tabs[0] as HTMLElement) || null).style.display = "block";


This looks like it fails for me (Safari) about 50% of the time when I refresh the page, so that no active tab shows up.

Hmm, now the browser wars. Let me look into how to fix that for safari. I tested on Mozilla and chrome. There is an active tab styling.

I am not able to recreate this. I launched safari for the first time ever! and It works as expected.

Could this be some caching problem? I will look into it

@codewithkristian I have put up some changes. Can you check if this behaviour presets?

content/pages/tutorials/forms/index.md

…re/cloudflare-docs into add-tab-switcher-shortcode-comp

gitguardian · 2022-07-16T22:53:17Z

️✅ There are no secrets present in this pull request anymore.

If these secrets were true positive and are still valid, we highly recommend you to revoke them.
Once a secret has been leaked into a git repository, you should consider it compromised, even if it was deleted immediately.
Find here more information about risks.

^{_{🦉 GitGuardian detects secrets in your source code to help developers and security teams secure the modern development process. You are seeing this because you or someone else with access to this repository has authorized GitGuardian to scan your pull request.

Our GitHub checks need improvements? Share your feedbacks!}}

kristianfreeman

nice, this is looking a lot better!

two things i noticed

formatting of the tab headers is a little messed up on low-width/mobile displays

there appears to be a border or something at the bottom - i thought it was a scrollbar at first but i don't think it is

kristianfreeman · 2022-07-21T17:47:07Z

assets/events.ts

+export function activeTab() {
+  var header = document.getElementById("tab-active");
+  var tabs = header.getElementsByClassName("tab-label");
+  console.log(tabs)


kristianfreeman · 2022-07-21T17:47:13Z

assets/events.ts

+        for (let i = 0; i < labels.length; i++)
+          labels[i].addEventListener("click", $tab);
+      } else {
+        console.log({ wrappers, tabs, labels });


…to add-tab-switcher-shortcode-comp

kristianfreeman

Extra spacing at the end of the header row - should have some CSS or something to target the last tab selector and make it full-width to fill the rest of the space.
Order is weird - should probably be JS SW/ESM, then TS SW/ESM.
Can we add some more spacing between the icons and language label?

Cherry

Would it be possible to get a title on the JS/TS SVGs too? Otherwise to a screen-reader, each pair of 2 tabs look identical:

Ekwuno · 2022-07-25T16:23:00Z

Extra spacing at the end of the header row - should have some CSS or something to target the last tab selector and make it full-width to fill the rest of the space.

Order is weird - should probably be JS SW/ESM, then TS SW/ESM.

Can we add some more spacing between the icons and language label?

Are you viewing this on safari? The extra spacing is added by the browser. It doesn't happen on chrome or firefox; I am a bit confused about how to address it.
The order is based on the shortcode used for this test. In useage, if you called JS SW/ESM, then TS SW/ESM it will follow that order. I could add some order to the CSS, but I don’t want that to be hard coded order so that in usage, if it doesn’t follow that order screenreaders aren’t confused. Something like this will solve it. Let me know your thoughts?

ul {
  display: flex;
  flex-direction: column;
}
ul li:first-child {
  order: 1;
}
ul li:nth-child(2) {
  order: 2;
}
ul li:nth-child(3) {
  order: 3;
}
ul li:nth-child(4) {
  order: 4;
}

More space between the icons makes the text roll over, which looks a bit weird to me. I tried to make the text eligible and the icon noticeable, so the text right now is in a good spot IMO.

Ekwuno · 2022-07-25T16:55:48Z

Would it be possible to get a title on the JS/TS SVGs too? Otherwise to a screen-reader, each pair of 2 tabs look identical:

Thanks for pointing this out @Cherry 🙌🏾

kristianfreeman · 2022-07-25T17:29:05Z

Extra spacing at the end of the header row - should have some CSS or something to target the last tab selector and make it full-width to fill the rest of the space.

Order is weird - should probably be JS SW/ESM, then TS SW/ESM.

Can we add some more spacing between the icons and language label?

Are you viewing this on safari? The extra spacing is added by the browser. It doesn't happen on chrome or firefox; I am a bit confused about how to address it.

The order is based on the shortcode used for this test. In useage, if you called JS SW/ESM, then TS SW/ESM it will follow that order. I could add some order to the CSS, but I don’t want that to be hard coded order so that in usage, if it doesn’t follow that order screenreaders aren’t confused. Something like this will solve it. Let me know your thoughts?
ul {
  display: flex;
  flex-direction: column;
}
ul li:first-child {
  order: 1;
}
ul li:nth-child(2) {
  order: 2;
}
ul li:nth-child(3) {
  order: 3;
}
ul li:nth-child(4) {
  order: 4;
}
More space between the icons makes the text roll over, which looks a bit weird to me. I tried to make the text eligible and the icon noticeable, so the text right now is in a good spot IMO.

#1/#3 - that's fine with me, disregard. For #2 if it's based on how we actually write the syntax that's great, I don't think we should add a hardcoded order. Can we fix the order here just so it merges in correctly? It's confusing as written right now.

+1 from me once we land that ^ change

Ekwuno · 2022-07-25T17:39:53Z

Oh, I see what you mean! So I added the shortcode to the HTML form tutorial so that we see how it is displayed. After all the reviews, I will delete it from that tutorial because it's not needed there.

{{<tabs labels="js/sw | js/esm | ts/sw | ts/esm">}} manages the order so that's sorted.

kristianfreeman · 2022-07-25T19:08:17Z

sounds good. can we remove it then and i'll +1

WalshyDev · 2022-07-25T20:57:22Z

Some future feature requests (Not needed for MVP but worth noting):

Add selection into query string so we can share pages in TS+ESM for example
Save your selection into localStorage and switch to that tab when you visit the page (so you will always see TS+ESM for example)

Cherry

Thanks for pointing this out @Cherry 🙌🏾

Sorry for being overly picky, but now it's resulting in duplicate text for the tabs to a screen reader:

layouts/shortcodes/tabs.html

Co-authored-by: James Ross <[email protected]>

Ekwuno · 2022-07-25T22:42:31Z

Some future feature requests (Not needed for MVP but worth noting):

Add selection into query string so we can share pages in TS+ESM for example

Save your selection into localStorage and switch to that tab when you visit the page (so you will always see TS+ESM for example)

We have a follow-up ticket for 2.

Ekwuno added 2 commits June 15, 2022 14:13

Create shortcode for code switcher with initial slides

4d7ae6e

add tab switcher

36c3f89

github-actions bot requested a review from deadlypants1973 June 20, 2022 01:24

update code sample

a9de758

Ekwuno removed the request for review from deadlypants1973 June 21, 2022 06:14

update components

7e7112e

Ekwuno added 2 commits June 30, 2022 13:25

update components and fix scrolling issue

84186ac

update tabs component to remove SVG

463c1b5

Ekwuno marked this pull request as ready for review June 30, 2022 10:44

update tags

9183356

Ekwuno requested review from WalshyDev, jkup and kristianfreeman June 30, 2022 11:15

lauragift21 reviewed Jun 30, 2022

View reviewed changes

static/style.css Show resolved Hide resolved

Update static/style.css

3b1ce31

Co-authored-by: Gift Egwuenu <[email protected]>

kristianfreeman reviewed Jun 30, 2022

View reviewed changes

Ekwuno requested review from kristianfreeman and lauragift21 June 30, 2022 14:50

Ekwuno added 5 commits June 30, 2022 16:00

fix hover issue

dcf8f65

Merge branch 'add-tab-switcher-shortcode-comp' of github.com:cloudfla…

517bd54

…re/cloudflare-docs into add-tab-switcher-shortcode-comp

update

080476e

format tabs component

da0d467

Fix responsiveness for tab labels

1330221

Ekwuno added 3 commits July 15, 2022 01:47

add defult block with no js

8b460fa

switch default value to

6385f82

remove outline from tab-headers

b7e6d9f

Ekwuno requested a review from kristianfreeman July 15, 2022 14:25

remove padding in media query

1e6b01a

kristianfreeman reviewed Jul 21, 2022

View reviewed changes

Ekwuno and others added 4 commits July 22, 2022 11:58

Merge branch 'production' of github.com:cloudflare/cloudflare-docs in…

6d6d733

…to add-tab-switcher-shortcode-comp

add responsiveness for smaller screens.

8f199c7

Merge branch 'production' of github.com:cloudflare/cloudflare-docs in…

2c7db74

…to add-tab-switcher-shortcode-comp

fix condlict

ded0bfd

Ekwuno requested a review from kristianfreeman July 25, 2022 11:24

make svg clickable

598739d

kristianfreeman reviewed Jul 25, 2022

View reviewed changes

Cherry reviewed Jul 25, 2022

View reviewed changes

add titles to SVG

6d8a82c

Ekwuno requested a review from kristianfreeman July 25, 2022 17:07

remove shortcode from tutorial

6af99de

kristianfreeman approved these changes Jul 25, 2022

View reviewed changes

Cherry reviewed Jul 25, 2022

View reviewed changes

layouts/shortcodes/tabs.html Outdated Show resolved Hide resolved

layouts/shortcodes/tabs.html Outdated Show resolved Hide resolved

layouts/shortcodes/tabs.html Outdated Show resolved Hide resolved

layouts/shortcodes/tabs.html Outdated Show resolved Hide resolved

Apply suggestions from code review

39eed6f

Co-authored-by: James Ross <[email protected]>

Ekwuno merged commit 686cf1c into production Jul 27, 2022

Ekwuno deleted the add-tab-switcher-shortcode-comp branch July 27, 2022 15:49

[Doc site]: Add tab switcher shortcode #4861

[Doc site]: Add tab switcher shortcode #4861

Uh oh!

Conversation

Ekwuno commented Jun 20, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cloudflare-workers-and-pages bot commented Jun 20, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying with Cloudflare Pages

Uh oh!

kodster28 commented Jun 28, 2022

Uh oh!

Ekwuno commented Jun 29, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kodster28 commented Jun 29, 2022

Uh oh!

Ekwuno commented Jun 29, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Ekwuno commented Jun 30, 2022

Uh oh!

Uh oh!

jgentes commented Jun 30, 2022

Uh oh!

kristianfreeman left a comment

Choose a reason for hiding this comment

Uh oh!

kristianfreeman Jun 30, 2022

Choose a reason for hiding this comment

Uh oh!

Ekwuno Jun 30, 2022

Choose a reason for hiding this comment

Uh oh!

Ekwuno Jun 30, 2022

Choose a reason for hiding this comment

Uh oh!

Ekwuno Jul 7, 2022

Choose a reason for hiding this comment

Uh oh!

Uh oh!

gitguardian bot commented Jul 16, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

️✅ There are no secrets present in this pull request anymore.

Uh oh!

kristianfreeman left a comment

Choose a reason for hiding this comment

Uh oh!

kristianfreeman Jul 21, 2022

Choose a reason for hiding this comment

Uh oh!

kristianfreeman Jul 21, 2022

Choose a reason for hiding this comment

Uh oh!

kristianfreeman left a comment

Choose a reason for hiding this comment

Uh oh!

Cherry left a comment

Choose a reason for hiding this comment

Uh oh!

Ekwuno commented Jul 25, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Ekwuno commented Jul 25, 2022

Uh oh!

kristianfreeman commented Jul 25, 2022

Uh oh!

Ekwuno commented Jul 25, 2022

Uh oh!

kristianfreeman commented Jul 25, 2022

Uh oh!

WalshyDev commented Jul 25, 2022

Uh oh!

Cherry left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Ekwuno commented Jun 20, 2022 •

edited

Loading

cloudflare-workers-and-pages bot commented Jun 20, 2022 •

edited

Loading

Ekwuno commented Jun 29, 2022 •

edited

Loading

Ekwuno commented Jun 29, 2022 •

edited

Loading

gitguardian bot commented Jul 16, 2022 •

edited

Loading

Ekwuno commented Jul 25, 2022 •

edited

Loading