
Security News
vlt Launches "reproduce": A New Tool Challenging the Limits of Package Provenance
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
test-svelte-git-cms
Advanced tools
- It uses Github issues as a CMS - All issues and labels are only pulled once when your website is visited first time after being deployed. - Anytime you create or update a issue or label it get's synced using github webhook - All subsequent visits to you
Install the package in your sveltekit app
npm i -D svelte-git-cms
Create src/hooks.js
with following content
import { synced } from 'svelte-git-cms';
import { sync } from 'svelte-git-cms';
import { get } from 'svelte/store';
/** @type {import('@sveltejs/kit').Handle} */
export async function handle({ event, resolve }) {
if (!get(synced)) { await sync() }
const response = await resolve(event);
return response;
}
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';
/** @type {import('./$types').RequestHandler} */
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:
https://YOUR_PRODUCTION_DOMAIN/api/git-webhook
application/json
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';
/** @type {import('./$types').PageServerLoad} */
export async function load({ params }) {
return {
posts: get(posts),
labels: get(labels)
}
}
b) src/routes/+page.svelte
<script>
/** @type {import('./$types').PageServerData} */
export let data;
</script>
<ul>
{#each Object.keys(data.labels) as label}
<li>{label}</li>
{/each}
</ul>
{#if Object.keys(data.posts).length}
<ul>
{#each Object.entries(data.posts) as [slug, post]}
<li>
/{slug}
{post.title}
{post.body}
</li>
{/each}
</ul>
{:else}
No posts
{/if}
+page
will be instantly available on your webiste. (can be customized by setting env GITHUB_LABEL_PUBLISHED
)tags
property in the post
object. (label set in GITHUB_LABEL_PUBLISHED
won't be available in tags, as this label is used tpo determine which issue should appear as post on the website)+
example +Idea
, +Personal
etc, prefix will be removed when converted to post tags.+
prefix you can change it by setting environmanet variable GITHUB_LABEL_PREFIX
to any other character or leave it empty for no prefix.Here are some tips I use on my projects using svelte-git-cms
to improve the experience using some external lib which are not included in the package to keep at minimum and package size slow.
Add a Medium like reading time estimater
a) Install the library
npm i -D reading-time-estimator
b) Change the part a
of Step 4
above as following:
import { labels, posts } from 'svelte-git-cms';
import { get } from 'svelte/store';
import { readingTime } from 'reading-time-estimator'
/** @type {import('./$types').PageServerLoad} */
export async function load({ params }) {
let posts = get(posts)
Object.keys(posts).map(key => {
posts[key].readingTime = readingTime(posts[key].body).text
})
return {
posts,
labels: get(labels)
}
}
The idea of using github as CMS is inspired from swyxkit
FAQs
- It uses Github issues as a CMS - All issues and labels are only pulled once when your website is visited first time after being deployed. - Anytime you create or update a issue or label it get's synced using github webhook - All subsequent visits to you
We found that test-svelte-git-cms demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.