Hey there,
I’m used to working with components in Next.js. I’ve created some snippets that handle basic things like toggling dark mode, among other functionalities. At first, I put the JavaScript right into these snippets.
But then I realized that this approach makes the JavaScript visible to everyone. Is there a way to prevent this? I do know that I can use external script files.
But I just really like the idea of having compact component packages I can reuse without needing both a PHP snippet and a separate JavaScript file.
<!-- Select the <p> element using its tag name -->
<p>hello world</p>
<!-- Script below is visible in 'view source' -->
<script>
var paragraph = document.querySelector('p');
if (paragraph) {
paragraph.textContent = 'hello kirby';
} else {
console.log('The <p> element was not found.');
}
</script>
JavaScript is always visible to everyone, where exactly is the problem? Of course, if you use a build process, you can make it basically unreadable…
What I mean is that when looking at the source of the html. the javascript used on snippets is visible mixed with the html markup.
I am fully aware that when people know the source they can access the javascript, but the output or code is not visible on the front end.
The following screenshot is from a dark-mode-toggle snippet, that uses javascript inside the snippet.
Never seen that. What sort of snippet is that, and where do you use it?
It happens on all snippets I have created, that used javascript. I use these snippets for example in my home.php template.
Here is a very simple example.
Stored in site/snippets/hello.php
<!-- Select the <p> element using its tag name -->
<p>hello world</p>
<script>
var paragraph = document.querySelector('p');
if (paragraph) {
paragraph.textContent = 'hello kirby';
} else {
console.log('The <p> element was not found.');
}
</script>
used in site/templates/home.php
as such: <?= snippet('hello') ?>
Doing so, reveals the actual script when I “view source” in the browser.
Few things to note:
I set debug to false, and work on localhost.
That’s because you echo the snippet. Must be
<?php snippet('hello') ?>
instead.
Thanks, wow I did not know that.
Thank you very much!
However doing <?php snippet('hello') ?>
does not prevent the script from showing up in the source.
That would be very weird…
It is very weird, I am trying to debug why this is happening, but I can not find anything.
Here is another screenshot.
Can you try it, please? I have started from the starter kit with no other alternations.
Code for snippet: site/snippets/hello.php
<!-- Select the <p> element using its tag name -->
<p>hello world</p>
<script>
var paragraph = document.querySelector('p');
if (paragraph) {
paragraph.textContent = 'hello kirby';
} else {
console.log('The <p> element was not found.');
}
</script>
implemented in home.php as: <?php snippet('hello') ?>
Doing so, and inspecting the source of the homepage displays the script as seen in the screenshot.
But it is no longer being printed on the frontend, right?
And yes, it should show up in the source of the page, of course.
It shows up in the source, in between my html as seen in my screenshots.
Javascript that is linked via /js/mycode.js does not show up between my html markup.
My intention is to create reusable packages / snippets that holds the code for those snippets, so I do not have to both store the php and javascript.
It apprears that kirby or php in general simply puts everything that is in the snippets.php file into the body of the html. Again, I come from a nextjs background, so I am new to how php works.
That’s true, but the JavaScript file is nonetheless accessible and can be read by anyone.
It’s the nature of the script tag to show up in the source, as I already mentioned above.
I would suggest maybe looking into using Kirby headless, and using Next.js for the front end. That way you can work they way you are used to.
There is an example here, and probably more if you google about. GitHub - kolchinanyajs/headless-kirby: Kirby Headless CMS & NextJS
Kirby KQL would be helpful to you probably GitHub - getkirby/kql: Kirby's Query Language API combines the flexibility of Kirby's data structures, the power of GraphQL and the simplicity of REST.
Thank you.
I chose Kirby for its straightforward, file-based CMS system. Many of my clients have basic requirements, and Kirby fits those needs perfectly, especially since I handle most of their updates and maintenance.
For my Next.js projects, I use Payload as the CMS.
I think I’ll store my snippets and components as snippets with the code included, then move the code to an external JavaScript file for production.
Thanks for all the insights and updates.
