Editable JSON for global data

Question

Editable JSON for global data

notramo opened this issue 2 years ago · comments

Is it possible to edit a JSON using CMS, which contains data that should be available on every page? E.g. html.svelte contains a footer, with information about the company (phone, email, etc). It should be possible to change this from the CMS. It is displayed on every page, so it's not appropriate to put it in content/.
Is there an existing feature that can be used to accomplish this?

Jim Fisk · Answer 1 · Sat Nov 26 2022 03:02:17 GMT+0800 (China Standard Time)

You can create global content that's used on every page, but the downside is currently Plenti will create an endpoint to it until we resolve:

Allowing content that doesn't have a route: #214
Editing content that doesn't have a route: #215

For now though, if you're ok with having routes for your global content, you could:

Create a single content type for company info: plenti new type company_info --single
Add whatever JSON you want to the new content/company_info.json file that was created:

Example content/company_info.json

{
  "name": "ABC Corp",
  "phone": "555-555-5555",
  "email": "hi@abc.com"
}

Pull out the company info in a global template file (like layouts/global/html.svelte) using the magic allContent prop:

Example layouts/global/html.svelte

<script>
  export let content, layout, allContent, user, adminMenu;
  let companyInfo = allContent.filter(c => c.type === "company_info");
</script>

<html lang="en">
  <head>
    <title>{content.filename}</title>
  </head>
  <body>
    {#if user && $user.isAuthenticated}
      <svelte:component this={adminMenu} {user} bind:content />
    {/if}
    <main>
      <svelte:component this={layout} {...content.fields} />
      <footer>
       <div class="name">{companyInfo.fields.name}</div>
       <div class="phone">{companyInfo.fields.phone}</div>
       <div class="email">{companyInfo.fields.email}</div>
      </footer>
    </main>
  </body>
</html>

Then to edit the info, just go to the route that's automatically created for it (http://localhost:3000/company-info) and edit it like any other page
Optional: the page for the above route will be blank unless you add some markup to layouts/content/company_info.svelte

Note: Everything above is pseudo code that I haven't tested, so you might have to correct errors here and there. Just let me know if it gives you trouble!