Comments (8)
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.
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.
- The logic for supporting the configuration query parameter
- 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:
- 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.
- 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.
- 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.
Related Issues (20)
- Improve `showCommands` experience in URL builder HOT 1
- [feature request] Add badge to names HOT 8
- Allow themes to style `/announce` messages HOT 1
- [Docs] Homepage should explain what this is and how to use it more clearly
- Bug: long links are causing scrollbars on the default theme HOT 2
- Document available css custom properties available for developers HOT 1
- [feature request]: Hotdog based theme HOT 1
- Allow config for buffering messages
- Create progress bar for fundraisers HOT 3
- [feature request] Elevated message flag? HOT 1
- Automatic dependency updates HOT 1
- Document all stylehooks a theme can use
- Allow users to bring their own styles HOT 7
- Let users customize themes with URL-encoded styles HOT 3
- Create a guide for integrating with OBS
- Provide textual descriptions for themes in the HTML for accessibility HOT 3
- Testing Discord webhook; please disregard. HOT 2
- [Lint] Disable `no-descending-specificity` Stylelint rule HOT 1
- show latest messages causes lockup
- Remove deletion delay when themes don't animate/transition outgoing messages HOT 11
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from showmy.chat.