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

feature/issue 96 enhanced copy to clipboard with PNPM docs #120

Draft
wants to merge 25 commits into
base: main
Choose a base branch
from

Conversation

thescientist13
Copy link
Member

@thescientist13 thescientist13 commented Oct 26, 2024

Related Issue

resolves #96

Summary of Changes

  1. Created a CtC Block component with support for two variants
    • runners - For npm, yarn, and pnpm based code samples
    • snippet - For any other sort of code sample, e.g. HTML, CSS, JS, etc
  2. Renamed old "CTC" component to be called Copy to Clipboard Button

TODO

  1. getting a Stylelint error in GitHub, but not locally? 🤔 - rebase fixed it
  2. this snippet formatting is looking borked on production builds both on the page and the copy paste output?
  3. logos are missing on mobile
  4. get internal feedback
  5. fix copy icon positioning for runners
  6. add Storybook examples
  7. needs upstream patches PR - chore/upgrade greenwood v0.30.0 alpha.7 #107
  8. validate snippet output / formatting (trim output?)
  9. apply to all docs / guides content - wait for Docs Page #31
  10. call out hosting patterns where applicable, e.g. public-hoist-pattern[]=@lit-labs/* and wc-compiler for PNPM users
  11. technically the $ should be white in the output for runners variant
  12. naming / align with home page button copy icon
  13. Align with current release PRs - https://github.com/ProjectEvergreen/www.greenwoodjs.dev/pulls?q=is%3Apr+is%3Aopen+label%3Arelease%2Fv0.31.0
  14. browser / responsiveness testing
  15. (nice to have / new issue) better pnpm SVG positioning
  16. (nice to have) try and hide initial content
  17. (nice to have) add test cases
  18. Pull in enhancement/upgrade Greenwood v0.31.0 #146 w/ escaped HTML entities in markdown content are not being honored when prerendering Light DOM HTML greenwood#1375

Upstreams

  1. How to handle parse5 escaped HTML entities parsing - escaped HTML entities in markdown content are not being honored when prerendering Light DOM HTML greenwood#1375

Thoughts / Questions

  1. Not sure if we will need a generic shell commands option?
  2. Could we use <details> + <summary>, or maybe popover for this? Perhaps align with Progressively Enhanced Capabilities content #81 ?

@thescientist13 thescientist13 added docs Greenwood specific content like docs and guides enhancement New feature or request question Further information is requested labels Oct 26, 2024
@thescientist13 thescientist13 self-assigned this Oct 26, 2024
Copy link

netlify bot commented Oct 26, 2024

Deploy Preview for super-tapioca-5987ce ready!

Name Link
🔨 Latest commit 66647f3
🔍 Latest deploy log https://app.netlify.com/sites/super-tapioca-5987ce/deploys/678019c87086b1000838533a
😎 Deploy Preview https://deploy-preview-120--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 force-pushed the feature/issue-96-copy-clipboard branch from 755280a to 9bed337 Compare October 26, 2024 23:40
@thescientist13 thescientist13 changed the title feature/issue 96 copy clipboard feature/issue 96 copy to clipboard Oct 31, 2024
@thescientist13 thescientist13 force-pushed the feature/issue-96-copy-clipboard branch from 9bed337 to 1ab52a9 Compare November 1, 2024 22:10
@thescientist13 thescientist13 changed the title feature/issue 96 copy to clipboard feature/issue 96 enhanced copy to clipboard Nov 1, 2024
@thescientist13 thescientist13 force-pushed the feature/issue-96-copy-clipboard branch from 442f2c8 to 485c9ed Compare December 29, 2024 17:46
@thescientist13 thescientist13 changed the title feature/issue 96 enhanced copy to clipboard feature/issue 96 enhanced copy to clipboard with PNPM support Jan 3, 2025
@thescientist13 thescientist13 changed the title feature/issue 96 enhanced copy to clipboard with PNPM support feature/issue 96 enhanced copy to clipboard with PNPM docs Jan 3, 2025
@thescientist13
Copy link
Member Author

thescientist13 commented Jan 5, 2025

Seems like some snippets are getting mangled during prerendering when used with the ctc-block component and / or are otherwise not having their HTML escaped 😞

develop
Screenshot 2025-01-05 at 1 50 23 PM

build
Screenshot 2025-01-05 at 1 50 12 PM
Screenshot 2025-01-05 at 2 10 45 PM

Currently impacting these examples, which I had to leave as normal markdown code fences

  1. https://greenwoodjs.dev/docs/pages/api-routes/#hypermedia (API handler example)
  2. https://greenwoodjs.dev/docs/pages/server-rendering (#web-server-components, #Body

Seems like a minimal reproduction

<app-ctc-block variant="snippet" heading="src/pages/users.js">

  ```js
  // eslint-disable-next-line no-unused-vars
  export async function getBody(compilation, page, request) {
    const users = await fetch("http://www.example.com/api/users").then((resp) => resp.json());
    const timestamp = new Date().getTime();

  
    return `
      <body>
        <h1>Hello from the server rendered users page! 👋</h1>
      </body>
    `;
  }
  ```

</app-ctc-block>

Escaping makes it work, but shows the \ in the output

<app-ctc-block variant="snippet" heading="src/pages/users.js">

  ```js
  // eslint-disable-next-line no-unused-vars
  export async function getBody(compilation, page, request) {
    const users = await fetch("http://www.example.com/api/users").then((resp) => resp.json());
    const timestamp = new Date().getTime();

  
    return \`
      <body>
        <h1>Hello from the server rendered users page! 👋</h1>
      </body>
    \`;
  }
  ```

</app-ctc-block>

Screenshot 2025-01-05 at 2 25 37 PM


Also, for some reason on the SSR page, the styles / images are all busted too? 😱
Screenshot 2025-01-05 at 1 54 56 PM
Screenshot 2025-01-05 at 1 55 26 PM

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 release/v0.31.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

"Copy to Clipboard" feature for code snippets on docs / guides pages
1 participant