feat: Add search as a shortcode

[Gr3q]

Again, I'm not sure if it's particularly useful, but I opened it because maybe it's desired. I wish I could make the shortcode more convenient. It can be closed if it's not needed.

Maybe this is not even the best way to do this, I'm not sure.

Changes:

• flexsearch and search element must be unique to work properly, so added name as a required parameter
• Made keybinding optional so it can be controlled in case you want multiple search elements on the same page
• added not-prose to some search elements to prevent .content styling them over incorrectly
• Due to the first change each element can be styled individually with search-(wrapper|input|results)-X
• Made search optionally scoped by passing in a baseUrl

Known issues:

• name is required, but it could be generated (not random!)
• Search result styling was made for the navbar, so it's wrong everywhere else (hx-max-w-[min(calc(100vw-2rem),calc(100%+20rem))]), the +20rem is the problem, so currently manual adjustment is needed in custom.css.

[netlify]

✅ Deploy Preview for hugo-hextra ready!

Name	Link
🔨 Latest commit	3b95f44
🔍 Latest deploy log	https://app.netlify.com/sites/hugo-hextra/deploys/678e69dfd13daa00085ecb82
😎 Deploy Preview	https://deploy-preview-534--hugo-hextra.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 configuration.

[imfing]

thanks! I think this is very nice to have, which helps address #380 more easily

[Gr3q]

I take recommendations on how to deal with the search-results width and position correctly.

My own solution was to set it's width to 100%, it doesn't extend over on either side, but for smaller search bars it will be to small. Plus if you want it to extend and it's on the left side the absolute positioning needs to be adjusted as well.

I'm not sure I can handle extending and positioning without Javasript.

[Gr3q]

In the end I set the width of the results to 100%, without JS I'm not sure I can make it dynamic enough, only more opinionated. unique styling classes are exposed for each shortcode to make styling them easier, although I could expose a "class" parameter too.

Please see the documentation to decide if the exposed interface is good enough, although it feels like it's worth differentiating between the shortcode and the elements in the navbar even more.