-
Install the package in your sveltekit app
npm i -D svelte-git-cms
-
Create src/hooks.js
with following content
import { githubSync } from 'svelte-git-cms'
export async function handle({ event, resolve }) {
await githubSync({
github_repo: 'ak4zh/svelte-git-cms',
github_token: process.env.GITHUB_TOKEN
})
const response = await resolve(event);
return response;
}
-
githubSync
params
- github_repo: your github repo
{username}/{repo-name}
- label_prefix: labels with this prefix will be used as post tags (default value
+
) - label_published: all issue with this label will appear on webiste (default value
+page
) - allowed_authors: comma separtated usernames (default value repo owner) can be set to
*
to allow all authors - slug_suffix_issue_number if enabled slug will end with
-{issue-number}
to ensure unique slug - github_token provide it else you will hit github api limits
-
Notes
- If you do not like the
+
prefix you can change it by set it to any other character or leave it empty for no prefix. In that case all labels will be used as tags.
-
Create an webhook route for github, so github can inform your app when issues or labels change.
a) Create webhook endpoint src/routes/api/git/webhook/+server.js
import { handleWebhook } from 'svelte-git-cms';
export async function POST({ request }) {
return handleWebhook(request)
}
b) Go to your github repo Settings > Webhooks > Add webhook
and create a new webhook with following config:
- Payload URL
https://YOUR_PRODUCTION_DOMAIN/api/git/webhook
- Content type
application/json
- Events Select
Issues
and Labels
-
Create +page.server.js
in the route you want to show the posts / labels.
a) src/routes/+page.server.js
import { labels, posts } from 'svelte-git-cms';
import { get } from 'svelte/store';
export async function load({ params }) {
return {
posts: get(posts),
labels: get(labels)
}
}
b) src/routes/+page.svelte
<script>
export let data;
</script>
{JSON.stringify(data)}