Setup
In order to add the Plenti CMS to your site you need to use 2 magic variables (
<script>
export let content, user;
</script>
<html lang="en">
<head></head>
<body>
{#if user && $user.isAuthenticated}
<svelte:component this={$user.menu} bind:content {user} />
{/if}
<main>
<svelte:component this={layout} {...content.fields} {user} />
</main>
</body>
</html>
<button on:click|preventDefault={$user.login()}>
Login
</button>
{
"cms": {
"repo": "https://gitlab.com/my-org/my-repo",
"redirect_url": "https://my-site.com",
"app_id": "put oauth id here",
"branch": "main"
}
}
content
and user
) that are provided to you by Plenti.You have a great deal of flexibility in how to implement these on your site. Commonly you will add the admin menu to your entrypoint file (likely
layouts/global/html.svelte
) in a manner similar to this:export let content, user;
</script>
<html lang="en">
<head></head>
<body>
{#if user && $user.isAuthenticated}
<svelte:component this={$user.menu} bind:content {user} />
{/if}
<main>
<svelte:component this={layout} {...content.fields} {user} />
</main>
</body>
</html>
Then on whatever page or popup you want to use to display the login, you can simply use
$user.login()
like this example:Login
</button>
For logout, there's a link provided to you by default in the admin menu, but you can implement your own workflow using
<button on:click|preventDefault={$user.logout()}>
Logout
</button>
$user.logout()
like this:Logout
</button>
The information above is enough to get you up and running locally. If you make changes through the admin interface, it will update your JSON locally, which you can then commit or discard with Git.
Remote / Deployed CMS
If you want to use the CMS on a deployed website, or hand it off to clients who don't use Git, you can configure a remote repository in your sitewide
plenti.json
configuration file:"cms": {
"repo": "https://gitlab.com/my-org/my-repo",
"redirect_url": "https://my-site.com",
"app_id": "put oauth id here",
"branch": "main"
}
}