chore: Improve Community Projects page

donmckenna commented 1 year ago

DX-33

Community projects page simplified, and individual projects broken up into individual pages. Data files and component references refactored, centralized, and broken up into more specific and manageable data files.

https://user-images.githubusercontent.com/22125230/221792463-6c1943ff-8757-4dd5-a227-d3b54b8b882b.mov

Some auto-generated heading anchor ids:

SvelteKit

Tech Educator's Toolkit

re:tune

StackBlitz Codeflow

Instead of manually writing attribution names / links / etc, we now have a central, strictly-typed people object which we can import into components to extend other <___Link /> type components.

https://user-images.githubusercontent.com/22125230/224846022-3a6ec9a5-56f7-439d-8484-fecd320c2181.mov

The attribution component can accept multiple people in an array, and will position itself closer to the link component if one is found directly before itself.

Additional "icon link" helper components. Components accommodate minimal content, or full title, body, img content, depending on their inputs.

Added Quote helper component which uses the same people object as attributions, etc.

Added styles for Twitter "embeds"

When selecting "Embed Tweet" on a tweet, it doesn't actually embed anything external. It just gives you raw html of the desired tweet.
"Embed" look more like a tweet than a basic blockquote now. User simply needs to copy and paste the embed code Twitter gives you directly.
The only caveat is Twitter includes a <script> tag with the "embed" code, which just needs to be removed.

Refreshed Feedback component styles and UX.

Elements no longer disappear when the state changes
Buttons are more subtle in size and color.
Feedback heading text and "Edit this page" share text size and relative spacing.
Persistent, active states for each button when selected.
Disabled states and functionality when an opposing selection is active.
"Cancel" button to reset state and prevent accidental changes to the Yes/No selection.
Moved the gtag event from Yes/No button click, to the submit event.
- If a user makes a mistake, cancels, changes their selection, we probably don't need to capture those events.
- So we can leave the "make a selection" functionality to the frontend and leave the meaningful event for when the form is actually submitted / committed to.
"Fixed" the broken autofocus of the textarea when a selection is made.

New:

https://user-images.githubusercontent.com/22125230/225166505-549b2c7d-cbdb-4d23-a594-5671864d1736.mov

Old:

https://user-images.githubusercontent.com/22125230/225166494-9ff07dca-b3e0-4097-9545-282084a1ee37.mov

Old	New

stackblitz[bot] commented 1 year ago

Run & review this pull request in StackBlitz Codeflow.

netlify[bot] commented 1 year ago

Deploy Preview for webcontainer-docs ready!

Name	Link
Latest commit	cbe225a186aa22c54de2b872ae2c6cab1ddff1cb
Latest deploy log	https://app.netlify.com/sites/webcontainer-docs/deploys/641350d04df7bc00089b416c
Deploy Preview	https://deploy-preview-21--webcontainer-docs.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 settings.

stackblitz / webcontainer-docs