Plenti dev FAQs - from Benjamin

[jamestagal]

Hi all,

I had a few questions about Plenti and web dev stuff that I wasn't clear on so I asked @jimafisk. I found his responses valuable and useful for helping me understand some concepts and features of Plenti. (I am someone who is very new to web development and Plenti). I'd like to share my questions/queries here and Jim's replies below each.

Hope others will find this post useful as well. Thanks Jim.

1. When and why should I use @html in the markup? I have only used it in arrays I think but I don’t use it in other html tags, why?

This is a Svelte concept that lets you render the actual markup stored in the variable instead of printing the whole thing as a string. Commonly used in WYSIWYG fields since the HTML gets stored in JSON.

2. If I use Javascript files on a Plenti project what is the best way to implement - import statement for them to work? I have noticed that only when reloading a page which gets a trailing backslash does the Javascript work properly!

Using an ESM import should work, but would be happy to look together!

3. This leads to if I do import any external libraries is there a correct method to do it to work in a Plenti project?

Plenti definitely isn't great at this. I would like to remove NPM entirely from the project, that way when folks want to build in external libs, they would bring their own npm/rollup/babel/etc workflow with them and it would be something that we wouldn't have to support in the project itself. The JS infrastructure is to non-standardized and frustrating for me to want to deal with to be honest.

4. When using "baseurl": "/inspiredfencing/" why does the nav items load without a trailing backslash such as http://localhost:3000/inspiredfencing/about but when I reload the page the trailing backslash gets appended? Such as /about/ Why? And what should it be?

This is because the static html actually lives at "/about/index.html" so that's what gets loaded from the server, then when the client (JS) app loads in the browser, it takes over routing and allows you to do "pretty" URLs without the trailing slash. I went back and forth on forcing these one way or the other but seemed like it caused issues in certain cases. I do believe that Google dislikes that there isn't a canonical link for these pages (potential duplicate content issue), so I should think through a long-term solution for this.

5. When should I use “Pages” folders to organise content (.json) and when should I use other content folders such as Blog? I am often asking myself ..is there a hard and fast rule? Show example from Weddings by Josie (swapping components in Steps)

This is a matter of preference, but we can discuss on the call. The "pages" content type has no special significance whatsoever, it's just a name I often use for generic webpages and I usually make it component-based so editors can play with a variety of layouts

6. What does the "entrypoint_js": ":fingerprint" do? Is it setting up the login and replacing the need to add a login.svelte file?

This generates a hash (string with a bunch of random characters) that is used to reference the actual JS app files. The reason we do a different string for each build/deployment is it breaks the cache for these assets so visitors see the most recent version of these files if someone makes changes. The browser basically tries to make visiting the site as efficient as possible by storing already fetched JS files for you, however, without this hash it doesn't know if they were changed and can serve you up an old "stale" file.

7. Saving changes in the CMS and concurrent builds: I wondered if an author was editing and saving changes frequently how would this affect the CI/CD build process? Would it be better to only save changes after a few minutes after a build has finished?

Should be fine! This is somewhat dependent on the CI/CD setup of your host repo. With Gitea it has auto-cancellation so only the most recent commit is built, which is good from an efficiency standpoint. The changes are from the previous saves are in your repo code, so that final build should incorporate everything that was recently saved. The caveat is if the person saves, then does a hard refresh before the change is deployed and then saves the same form again - it would look like they wanted to revert their content back to its previous state.

8. Is there any need to minify my css and javascript in the build process ? Or can this be done afterwards? I think from memory there was an option in Cloudflare to do this for you.

Plenti does this automatically for you. If you don't want it minified (often used for debugging purposes when developing locally), you can pass the "--minify=false" flag.

9. How does loading="lazy" in <img> tags work? Is this approach enough? I was looking at https://madewithsvelte.com/svelte-lazy and https://svelte-lazy-loader.sawyer.codes/?ref=madewithsvelte.com

That's a standard HTML attribute that just tells the browser not to only load the image once it's needed to increase performance: https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading

10. What is the correct way (file path) to link to different media from global.css? (Media/Static folders) and is there a no need to use the word “static” in the path ?

The static folder is available directly off your webroot or baseurl if you're using one. The media folder lives off the "/media" path (although I could see this being a problem for some sites, we should probably namespace this better). Use static for things critical to the theme that editors shouldn't be able to touch, and use media for assets that you want editors to be able to change.

11. Understand Meta tags in projects…in head.svelte and in json files. Should I use them in every JSON file to describe the page to better define content for SEO?

Yeah having metadata for each individual page is your best bet for optimized SEO, it's just more work for the content editor. You can auto-generate this from existing fields if you'd like, but people really into SEO will probably want to set this to something specific themselves.

[jimafisk]

Thanks for posting this @jamestagal! Hope it helps folks with similar questions!