Pass variables to includes/components?

xdega commented 3 months ago

I have been battling with this issue, and failing to find good documentation. Basically, I have the following block for a header and nav menu:

<header class="pb-8 font-viga">
    <h1>
        <span
            class="bg-gradient-to-r from-blue-400 to-green-300 text-transparent bg-clip-text inline-block text-5xl tracking-tighter">
            liamhockley</span><span class="text-4xl text-white">.me</span>
    </h1>
    <nav class="text-xl">
        <a href="/">blog</a>
        <a href="#">projects</a>
        <a href="#">about</a>
    </nav>
</header>

And it's in my main template like so:

<body class="px-3 bg-slate-700 text-white max-w-3xl mx-auto pt-3">
  {{ components.header() }}
  ...

I want to pass in a variable to this component, so that I can appropriately set an "active" CSS. Is this possible? How? If it's not possible, would this be a potential feature that could be added?

xdega commented 3 months ago

Also, just tried out the tool today, and really loving it so far. Just hoping I can find a way to not have to reproduce the nav for each template, just to highlight a particular nav item.

xdega commented 3 months ago

I just figured it out, but posting in case someone else has a similar problem. You can add the following to the top of your template:

<!--
title: liamhockley.me
origin_page: index <-- THIS
-->

Then in the include, you can simply call {{ origin_page }} to get that value.

Once again. Great project. I look forward to using this moving forward, and maybe even find some opportunities to help our where needed. 👍🏻

xdega commented 3 months ago

Gonna close this up, since it's not an outstanding issue.

Flutter-Bounty-Hunters / static_shock

Pass variables to includes/components? #163