content/issue 33 guides pages

[thescientist13]

Related Issue

resolves #33

Summary of Changes

1. Created Guides landing page / route
2. Hosting content
3. Ecosystem content
4. Tutorials content
5. Side Nav component (static)
6. Table of Contents component (static)
7. Refreshed getting started repo - enhancement/getting started guide refresh greenwood-getting-started#88
8. Improved stories and testing

TODO

1. internal feedback review - content/issue 33 guides pages #94 (comment)
2. Getting Started guide w/ refresh
3. style side nav desktop background color
4. mobile menu popout treatment
   • animation w/ prefers reduced motion
   • flip dropdown carrot? (without JS?)
5. table of contents styling
   • active ToC highlighting - did rollover highlighting for now
   • and / or sticky or scrolling effect
6. Hosting content confirmations (find / need to create a demo repo example link)
   • Docker
   • Cloudflare
   • AWS
7. browser / device testing - content/issue 33 guides pages #94
8. Lighthouse audit - content/issue 33 guides pages #94 (comment)
9. final content review / link checks
10. final round of internal feedback

Nice to have / new issue

1. edit on github button - "Edit on GitHub" link for guides / docs pages #97
2. copy to clipboard component / behaviors (code blocks for copy vs code blocks for demonstration, npm vs pnpm vs yarn) - "Copy to Clipboard" feature for code snippets on docs / guides pages #96
3. create a .heading-box component
4. menu enhancements - side navigation and table of contents dropdown refactoring #98
   • consolidate / refactor behavior
   • rotate side nav and toc menus back up on close - animate mobile dropdown menu indicate back up on close #99
   • basic unit testing

Thoughts / Questions

1. Content Carryovers - we will not carry these over at this time
   • Firebase (would need an example)
   • Netlify CMS (would need an example)
2. sub menu / ToC interactions on mobile - let's give it a try!
   • make sticky on desktop too / scrolls with you?
3. how to handle side nav background color on large breakpoints, when content is centered

Upstreams

1. Cross-post to rfc/issue 1167 content as data greenwood#1266
   • stop having graph + toc handling from using shift
   • title not populating as active frontmatter?
2. how come first render attributes are undefined? (e.g. route guard in side-nav component) - top level attributes returning as undefined wcc#165
3. for the <app-heading-box> component, needed to patch in feature/WCC v0.15.0 and HTML Web Components greenwood#1284
4. Track Location headers changes in Website redesign, branding, and long term structure greenwood#978
   • /guides/cloudflare-workers-deployment/ -> /guides/hosting/cloudflare/
   • /guides/firebase/ -> 404
   • /guides/github-pages/ -> /guides/hosting/github/
   • /guides/netlify-deploy/ (netlify) -> /guides/hosting/netlify/
   • /guides/netlify-cms/ (netlify???) -> 404
   • /guides/now/ (vercel) -> /guides/hosting/vercel/
   • /guides/s3-cloudfront/ (AWS) -> /guides/hosting/aws/
   • /guides/theme-packs/ -> /guides/tutorials/theme-packs/
   • /getting-started/ -> /guides/getting-started/

[netlify]

✅ Deploy Preview for super-tapioca-5987ce ready!

Name	Link
🔨 Latest commit	f623292
🔍 Latest deploy log	https://app.netlify.com/sites/super-tapioca-5987ce/deploys/67004fc86f7cc700096dbc27
😎 Deploy Preview	https://deploy-preview-94--super-tapioca-5987ce.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.

[thescientist13]

Internal Feedback Notes

• a popover may be nice for the side nav (on mobile), but perhaps an accordion or drop down list for the table of contents?
• kind of looks nice without the gray side bar, but will try one anyway
• sticky ToC could be nice (at least on desktop) so worth playing around with it
• Folks seemed OK with passing on carrying over the Firebase and Netlify CMS docs, and I will review and confirm manual AWS and CloudFront guides

[thescientist13]

Browser Testing

In regards to browser compat, everything is looking good except for nesting, at least in my version of Safari (17.0) presumable, lots of styles are not quite right.

However looks good for everything, including Safari TP

Firefox

Safari TP

For nesting specifically, it looks like for Safari it's not supported <= 17.x, but that only has 1% of browser share
https://caniuse.com/?search=nesting

---

iOS

On iOS the popover dropdown color is not styled, so let me see if I can handle that, but not a big deal

[thescientist13]

For lighthouse, looks like the main thing is that I am not using Aria roles correctly

[thescientist13]

Final round of Internal feedback

ToC

tighten up the top / side drop shadows

Header

keep tweaking the header bottom border

Side Nav

let's bring the radius down a notch. (and maybe tweak the bg color?)

[thescientist13]

Made a few more tweaks based on internal design feedback and so I think this is a good first pass on this content and layout overall. We'll definitely get a good second pass at this when we the #31 anyway.

Excited to get this one in, thanks for all the feedback and good suggestions! 😮‍💨