stepping-stone to background texture

[wolfspyre]

this is a functional stepping stone towards

• the contributor pages
• card layouts
• page backgrounds

it's not particularly useful as-is, but it demonstrates the functionality to allow for feedback

I've taken the svg 'hero patterns'¹ ( github upstream here²) that tailwind has been showcasing, and altered them a bit, shoehorning/massaging them to be programatically alterable.

then I created a partial³ which

• leveraging divinergbvals, identifies the primary/secondary color values relevant to the theme in use⁴ , )
• alters the fill/stroke properties of the pattern-svg in question⁵
• returns an image resource.⁶

its my intention to share this for the purposes of introducing it's functionality and implementation in case there's meritous opinion
on better ways to accomplish this (I'm sure there are. and I'd be open to discussing them!)

further work is going into this and ultimately I envision being able to declare a pattern (or more perhaps? ¯\_(ツ)_/¯ ) in frontmatter and leverage that for page background decoration, as well as decorating the optional-card-form presentation of that article on a list page (like a contributor's profile page showcasing their content)

you can take a look at it deployed here⁷... or the code change here⁸

Footnotes

1. https://heropatterns.com ↩

2. https://github.com/sschoger/hero-patterns ↩

3. https://gitlab.wolfspyre.io/wolfspyrelabs/hugo-kisso/wplshortcodes/-/blob/wpl_main/layouts/partials/util/pattern.html ↩

4. (the color/shade in use for fill/stroke is configurable per invocation. The altered svg assets are created with the rgbval assigned to stroke/fill as part of the filename, so its pretty unlikely that a pattern used would look differently than expected due to multiple invocations of it. ) ↩

5. It can ALSO adjust opacities and has some rudimentary ability to alter gradient definitions, but... that's not really a selling feature ;) ↩

6. This is also configurable. At the moment depending on invocation parameters it can return the content, or either a relpermalink or a permalink resource ↩

7. https://wolfspyrelabs.static.wolfspyre.io/hugo-kisso/wplshortcodes/snippits/wplshortcodes/hero-patterns/ ↩

8. https://gitlab.wolfspyre.io/wolfspyrelabs/hugo-kisso/wplshortcodes/-/commit/47d67498b05690f59f29e9c7587f65f3f7f2dd13 ↩

[wolfspyre]

As work continues on my efforts to make contributor-authored content a thing¹, I realized this needed to be robustified to automagically generate contrast-polarity-aware variants². This took a meander thru attempting to do this directly via tailwind, which was an utter trainwreck of disappointment.

it seems like svgs need to be inlined to be impacted by tailwind styling… and base64 encoded svgs really extend the page filesize pretty substantially..

and that doesn’t touch the duplication of content all over the place… it was really just not a direction i felt we’d be wanting to head longer term…

so… i came up with a wrapper which consumes declarations of stroke/fill/stop colors for either polarity (and also fill/stroke/stop opacity and stroke width)
and feeds them to the pattern manipulation partial and feeds back a dict of svgs which can be subsequently used as a bg-url[] declaration; facilitating a pattern of
bg-url[lightmodesvg] dark:bg-url[darkmodesvg]

you can see it deployed here:

https://wolfspyrelabs.static.wolfspyre.io/hugo-kisso/wplshortcodes/snippits/wplshortcodes/hero-patterns/

Footnotes

1. (which is coming along… starting to look pretty good imo.) ↩

2. (dark/light mode scoped svgs) ↩