Variable Linked component

is it possible to make linked components be different in each page…?
let’s say, if we can make it take a variable to change the contents…

I know it’s possible using javascript on browser runtime… but what I want to do is whether it can be done before boostrap export, rather than during browser runtime…

What type of content are you wanting to change? I have a site that I had to have a different background image in the header for each menu category. Worked around it with putting it on the “outer” component div and then the row/column components inside that one. Then I applied the Linked Component to that Lowest Row, just above that div.

Then I created CSS classes to cover each page for that outer div. Works pretty slick I must say, but took some time to work it out lol. Not sure if that helps you, but there are ways.

1 Like

The linked component feature is rather sacrosanct to BSS users (meaning we love it, how it works, and frankly, are loathe to change it.) The devs like how it works as well, so I wouldn’t get your hopes up that it will be modified in any way. One reason would be backwards compatibility, but another is that it’s really a very straightforward feature that’s meant to make having identical components throughout a website be a “no-brainer.”

*reply also for @printninja

as mentioned, what I want is possible using javascript during browser runtime… well, more or less using dom manipulation…

  1. technially, I can just add script tag using custom code inside the linked component, to detect current url, and conditionally edit it’s element…

what I really wanted is IF we can use “add custom option” but make it only be applied conditionally depends on the active page DURING the bss BUILD time…

as of WHY…
well, point 1. is not that hard to apply but the code is on the custom code parts of the bss, it is not gonna be minified… at ALL…

  1. custom shell/batch to call custom script… detect label that match specific pattern, then string replace the variable parts that based on the filename and conditions that I want to apply…

the 2. require more customization, but have have higher rewards since will eliminate browser runtime process to make it works…

  1. brute forcing it with iframe, that have linked script(which with this it can be minified) conditionally render things, based on the main window url…

the 3… is well, is never encouraged… because, you know iframe have overhead on the server, even though you can just uses good caching strategy, but still there’s headers and stuffs…

Still really don’t get what you’re driving at here. The purpose of the linked component feature is so you can easily have a single component in your design present on multiple pages, and be able to update ALL the pages instantly by editing the linked component on any page it exists.

It does exactly what it was designed to do perfectly.

(Also, who really cares if code is minified nowadays when everyone has 4G and broadband? To save a few kb of data and a few milliseconds of page load time?)

nb. on my phone here, sorry if there’s any misstype…

let’s say on the most standard site will have header/footer…

(assume header’s linked, simplified problem)
on /index.html, we’ll have basic(no modification)…
on the /home.html, nav “home” will change to “our base”

just as mentioned it’s viable during browser runtime, and not that hard…
my, main concern of minifying thing is not whether it will safes time during transfer… but the server load…
serving static javascript on html document using script tag means, every single request will go through standard http procedures to the server…
compared to adding it to js file you can have BSS minify it, and add caching strategy, and make client load from their browser cache(downside is it’s no longer inside linked component, so versioning it might need some work around)…²

the simplest explanation would be something like svelte component but strictly only for strings and nothing fancy like complex reactivity… just change some string based on the curent page url…

just to not make any missunderstanding I don’t get my hopes up on this…
the last time I put sugest something simpler, to change standard noneditable js(theme switcher) commenting method from “//” to self closing “/* */” goes straight to “we’ll think about it”

or you know…
based on ²… why don’t we make it possible to attach js reference to linked component and let bss handle the versioning…