search

oddbird / sassdoc-theme-herman

An Odd SassDoc theme.
http://oddbird.net/herman/
MIT License
117 stars 11 forks source link

Render colors in iframe with custom CSS #383

Closed dvdherron closed 2 years ago

dvdherron commented 2 years ago

Steps to test/reproduce

Show me

Provide screenshots/animated gifs/videos if necessary.

netlify[bot] commented 2 years ago

Deploy Preview for herman-staging ready!

Name Link
Latest commit 0433eb634c297e8506558941354f74db2ae1201d
Latest deploy log https://app.netlify.com/sites/herman-staging/deploys/632b1f9931e67f00084380db
Deploy Preview https://deploy-preview-383--herman-staging.netlify.app/demo_colors
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 settings.

dvdherron commented 2 years ago

Render colors in Herman in an iframe with custom CSS (like we do for sizes, ratios, icons, examples, fonts)

dvdherron commented 2 years ago

@jgerigmeyer I tried to follow how ratios and sizes are set up to show iframe previews and I think I have the iframe loading for colors.

I think what's left is to tweak the templates to get the iframe showing in the right place. In /templates/colors/base.njk should I be calling the color_palette macro in the <body>? And in preview.macros move the call to the show.item_section macro from the color_palette macro to a new colors macro that renders the iframe?

jgerigmeyer commented 2 years ago

I think what's left is to tweak the templates to get the iframe showing in the right place. In /templates/colors/base.njk should I be calling the color_palette macro in the <body>? And in preview.macros move the call to the show.item_section macro from the color_palette macro to a new colors macro that renders the iframe?

@dvdherron Yes, I think that's exactly right! This PR is looking great so far. You'll want the new colors/base.njk template to call the macro which actually renders the colors (e.g. color_palette), and show_previews should instead now render item_section with an iframe. You can probably continue following size/ratio as an example.

dvdherron commented 2 years ago

@jgerigmeyer I've reworked the templates the way you described above. There's one part I'm having trouble figuring out. in the preview, I keep getting the following error if I run the code as is:

  Template render error: (/home/dvdherron/OB/sassdoc-theme-herman/templates/colors/base.njk)
  Error: filter not found: colors

In preview, if I remove the colors filter on line 55 ({% set color = value|colors %}), the site runs, the iframe shows in the right place, but the two color-value code snippets don't show up.

bild

Any idea why that colors filter is not being found?

jgerigmeyer commented 2 years ago

Any idea why that colors filter is not being found?

@dvdherron That filter was being added after the @colors annotation was resolved -- I fixed that in https://github.com/oddbird/sassdoc-theme-herman/pull/383/commits/e0bef6ce70ccf36e5665f437b2193ffe06c8b116 by using a consistent nunjucks environment throughout.

dvdherron commented 2 years ago

Any idea why that colors filter is not being found?

@dvdherron That filter was being added after the @colors annotation was resolved -- I fixed that in e0bef6c by using a consistent nunjucks environment throughout.

Aha, I was thinking it had something to do with things not being called in the right order. Thanks for the fix 🙏🏽

dvdherron commented 2 years ago

@mirisuzanne @stacyk

I've added an example of a color preview using custom properties:

bild

The one thing I wasn't sure about is if I'm calling the colors-- mixin from the correct place. Is there a better place to generate the color custom properties than in /previews/color?

dvdherron commented 2 years ago

Thanks for the reviews and feedback everyone. And the good questions to chew on @stacyk. I think you have gathered your retreat notes and stored them in a safe place?

@jgerigmeyer I think this is ready to merge?