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

content/issue 33 guides pages #94

Merged
merged 50 commits into from
Oct 4, 2024
Merged

Conversation

thescientist13
Copy link
Member

@thescientist13 thescientist13 commented Sep 18, 2024

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

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/

@thescientist13 thescientist13 added docs Greenwood specific content like docs and guides enhancement New feature or request question Further information is requested needs upstream Notes that this item exposes an issue with a dependency (usually Greenwood) labels Sep 18, 2024
@thescientist13 thescientist13 self-assigned this Sep 18, 2024
Copy link

netlify bot commented Sep 18, 2024

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...

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 thescientist13 changed the title content/issue 33 guides content content/issue 33 guides pages Sep 18, 2024
@thescientist13
Copy link
Member Author

thescientist13 commented Sep 19, 2024

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
Copy link
Member Author

thescientist13 commented Sep 30, 2024

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.
Screenshot 2024-09-23 at 2 39 32 PM

However looks good for everything, including Safari TP

Firefox

Screenshot 2024-09-30 at 1 25 00 PM
Screenshot 2024-09-30 at 1 26 22 PM

Safari TP

Screenshot 2024-09-30 at 1 27 37 PM

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
Screenshot 2024-09-30 at 1 09 48 PM
Screenshot 2024-09-30 at 1 27 10 PM


iOS

On iOS the popover dropdown color is not styled, so let me see if I can handle that, but not a big deal
Screenshot 2024-09-30 at 13 28 14

@thescientist13
Copy link
Member Author

For lighthouse, looks like the main thing is that I am not using Aria roles correctly
Screenshot 2024-09-30 at 1 32 00 PM

@thescientist13
Copy link
Member Author

thescientist13 commented Oct 2, 2024

Final round of Internal feedback

ToC

tighten up the top / side drop shadows
Screenshot 2024-10-02 at 7 48 03 PM

Header

keep tweaking the header bottom border
Screenshot 2024-10-02 at 7 54 36 PM

Side Nav

let's bring the radius down a notch. (and maybe tweak the bg color?)
Screenshot 2024-10-02 at 7 58 37 PM

Copy link
Member Author

@thescientist13 thescientist13 left a comment

Choose a reason for hiding this comment

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

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! 😮‍💨

@thescientist13 thescientist13 merged commit 1740069 into main Oct 4, 2024
5 checks passed
@thescientist13 thescientist13 deleted the content/issue-33-guides-content branch October 4, 2024 20:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
docs Greenwood specific content like docs and guides enhancement New feature or request needs upstream Notes that this item exposes an issue with a dependency (usually Greenwood) question Further information is requested
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Guides Page
1 participant