Configuration for showing the "n" most recent messages about showmy.chat HOT 8 CLOSED

On Chance's Some Antics stream this week (timestamp 11m 37s), Chance briefly demonstrated a technique that I think could be a potential solution here — he sets a global variable equal to a stringified version of process.env:

<script
	dangerouslySetInnerHTML={{
		__html: `window.ENV = ${JSON.stringify(ENV)}`;
	}}
/>

I poked around, and it looks like Sean McPherson describes an Eleventy-ified version of this approach at https://www.seanmcp.com/articles/send-data-to-the-window-with-eleventy/

Using this and passing it the eleventy.serverless.query data object might be the cleanest approach, and it has my vote. Thoughts, @ajcwebdev?

from showmy.chat.

@ajcwebdev

The short answer is your shortcode use would look like

{% console-log-data eleventy.serverless.query %}

Eleventy supplies that eleventy object in the data cascade, so you'd access it like you would any other data property (i.e. accessing it top-level like eleventy, rather than as a property of some data object like data.eleventy.

from showmy.chat.

@ajcwebdev I know you've expressed interest in configuring the number of messages shown (and maybe in contributing to that feature?)

I'd love to know what you think about the above specs for that.

from showmy.chat.

Note to whomever picks up this issue: we can split this up into two pull requests if need be.

1. The logic for supporting the configuration query parameter
2. Adding configuration to the homepage URL builder

from showmy.chat.

Thanks for opening this issue Ben; this will be a great addition to an already awesome library.

I like the default of showing all messages. I think most users will want an infinite scroll style where it just fills up the entire space they've allotted for chat messages. Having a query parameter to configure that behavior sounds like a good solution.

from showmy.chat.

Potential solutions:

1. The page inspects the URL and grabs the query parameters. It looks at its own query parameters and parses through them. Problem is you don't want cross side scripting attacks.
2. Have the serverless template generate a bunch of meta tags that wouldn't appear on screen that can encode the information as attributes and then we use querySelector to get those elements and attributes.
3. Inline script so we have access to Eleventy templating. But that may cause syntax highlighting issues.

Option two seems like the best way forward right now.

from showmy.chat.

Yeah, that's a tiny amount of code. I like it!

from showmy.chat.

To get a feel for this approach I broke it down to the smallest possible steps I could think of to find a point where my understanding breaks down.

• Add shortcode to Eleventy config with script tag
• Expose shortcode on home page
• Console log data passed into shortcode
• Console log Eleventy serverless query

This happens when I get to the Eleventy serverless part, which makes sense since I've never used it before.

Add shortcode to Eleventy config with script tag

Create a shortcode called console-log-test inside .eleventy.js that returns a JavaScript <script> tag that console logs a hard coded string.

eleventyConfig.addShortcode("console-log-test", () => {
  return `<script>
    console.log('test')
  </script>`
})

Expose shortcode on home page

Include shortcode in index.html.

{% console-log-test %}

Console log data passed into shortcode

Stringify and console log data passed into shortcode.

eleventyConfig.addShortcode("console-log-data", data => {
  return `<script>
    console.log(${JSON.stringify(data)})
  </script>`
})

{% console-log-data "test-data" %}

Console log variable attached to window

Stringify data and set it to TEST_VARIABLE on the window.

eleventyConfig.addShortcode("console-log-window", data => {
  return `<script>
    window.TEST_VARIABLE = ${JSON.stringify(data)}
    console.log(TEST_VARIABLE)
  </script>`
})

{% console-log-window "window-variable-test" %}

Console log Eleventy serverless query

At this point I'm not sure how to access the eleventy.serverless.query object, and where that fits in between the shortcode definition in .eleventy.js, the shortcode itself, and the serverless function.

from showmy.chat.