Discover rodneylab/sveltekit-graphql-fetch Open Source project

Handy components for building sites in SvelteKit

269

sveltekit-components

Demo site for SvelteKit SEO showing how to set up meta tags in a SvelteKit blog site.

sveltekit-seo

Starter for a fast Astro blog using Markdown and a spot of Svelte

astro-blog-markdown

SvelteKit demo code for using vite-imagetools to add cached, responsive, Next-Gen images to a SvelteKit site with no cumulative layout shift.

sveltekit-image-plugin

WASM code for parsing Markdown into HTML with light output tweaking

parsedown

Code to accompany Astro articles.

astro

API using PostgREST to query and update supabase database.

narcissus

Use Apollo Client with SvelteKit to Query a GraphQL API: we use the GitHub API to query our repos and learn a bit of SvelteKit along the way.

sveltekit-graphql-github

Beautiful, easy SVG social icons in Svelte

svelte-social-icons

SvelteKit eCommerce site: how to build a fast, SEO friendly, static eCommerce site using Svelte, Snipcart and Directus.

svelte-ecommerce-site-start

SvelteKit Shiki syntax highlighting: use any VSCode colour theme to accessibly syntax highlight code on your SvelteKit app with line numbers.

sveltekit-shiki-code-highlighting

SvelteKit infinite scroll: see how you can use Svelte stores and a reactive function to implement an infinite scrolling Instagram feed.

sveltekit-instagram-infinite-scroll

SvelteKit S3 Multipart Upload: how you can upload large files, such as video to your S3 compatible storage provider using presigned URLs.

sveltekit-s3-multipart-upload

A markdown parser to output Astro markup

cmessless

Simple Svelte responsive image gallery: create a ribbon gallery, using Svelte dimension bindings to maintain the aspect ratio of all images.

sveltekit-simple-image-gallery

Open source favicon generation: create your favicon from scratch then optimise it for modern and legacy browsers using free apps in 2022.

open-source-favicon-generation

Shell

sveltekit-hcaptcha-form

SvelteKit hCaptcha contact form: see how you can scare bots away from your Svelte site using a privacy focussed captcha service.

SvelteKit JSON import: how you can use data provided from business apps and ther sources directly in your Svelte site, thanks to Vite.

sveltekit-json-import

Using vanilla-extract with SvelteKit: how you can make zero-runtime stylesheets with the new TypeScript friendly preprocessor in Svelte.

sveltekit-vanilla-extract

SvelteKit session cookies: accessing user-specific data in your SvelteKit app use session and HttpOnly cookies for added security.

sveltekit-session-cookies

Demo static Svelte site for narcissus backendless blog

narcissus-blog

GraphQL API demo using Fastify, Mercurius and Nexus

fastify-mercurius-nexus-graphql-api

Svelte Charts: how quickly and easily you can add customised charts to your SvelteKit, Astro or other Svelte apps with Chart.js.

svelte-chartjs

SvelteKit FAQ Page SEO: how you can use ❤️ Svelte's SEO friendliness to create a FAQ page with JSON-LD SchemaOrg SEO meta loved by Google.

sveltekit-faq-page-seo

A simple repo for analysis of online firewall block lists and combining them efficiently into a block list for use in a firewall

blocklists

Python

sveltekit-content-security-policy

SvelteKit Content Security Policy: how you can add CSP to reduce your Svelte site's cross-site scripting (XSS) attack surface.

Demo code for adding axe accessibility testing to SvelteKit using Playwright and pa11y

sveltekit-accessibility-testing

cistercian-clock

Demo code to show how to use the Intersection Observer API in Sveltekit to help track page views

sveltekit-intersection-observer

Demo showing how to add SVG icons from just about any library to your Svelte app using a single extra dependency

sveltekit-iconify

Handy components for building sites in SvelteKit

sveltekit-map-component

SvelteKit Session Storage: how you can improve UX by temporarily caching user form entries then repopulating fields on browser refreshes.

sveltekit-session-storage

Using Local Storage in SvelteKit: taking the example of setting a site theme, explore how to combine the Local Storage and Svelte Store APIs.

sveltekit-local-storage

Rodney Lab Git Hub profile

rodneylab

hcaptcha-serverless-rust-worker

Demo code for creating an hCaptcha verify endpoint using Cloudflare Workers written in Rust

Gatsby 3 MDX blog starter for an accessible, fast and secure blog site

gatsby-starter-climate

Using Jolt with Flecs & Dear ImGui 👀 to add game physics introspection to a raylib game, with pause and stepping for dev tools debugging 🐜.

raylib-flecs-imgui-introspection

CMake

decisive

front end for site admin

Get Started with Astro and Redis Tutorial Starter Code

upstash-astro

Svelte login form example 📝 signup and login forms for your Svelte app with password strength meter 🔐 and strong password auto generation.

svelte-login-form

Jolt Physics raylib ⚡️ trying Jolt C++ game development physics library with raylib in a 3D hello world 🎱 bouncing sphere example.

jolt-raylib-hello-world

CMake

deno

Code to accompany Deno & Deno Fresh articles.

svelte-each

Using Svelte each blocks: how to loop on array-like objects in Svelte + simplify your code using const & style directives and destructuring.

SvelteKit form example 📝 code to get a contact form working with SvelteKit actions, and 10 tips to avoid common pitfalls 🍀

sveltekit-form-example

CSS

gatsby-cloud-functions-recaptcha

Example site showing how Gatsby Cloud Functions can be used with an accessible reCAPTCHA.

Using raylib with Dear ImGui: how you can use Dear ImGui to create an immediate mode 🐜 debugging interface for your CMake raylib game 🎮

raylib-imgui

CMake

stylelint-sveltekit

Stylelint for SvelteKit: keep you Svelte code consistent and make sure your CSS and SCSS code follows your team's style guide to the letter!

Upstash for Redis and the Performance API: measuring performance gains with Web APIs to deploy the database optimally in your Deno app.

upstash-redis-deno-perf

Svelte share buttons: adding social share buttons to your Svelte app for mobiles and Safari using the native Web Share API with fallbacks.

sveltekit-share-buttons

SvelteKit CSS only :hover image slider

sveltekit-css-hover-image-slider

Godot Rust 2D Platform game

knights-to-see-you

SvelteKit FIDO U2F login: how you can add multi factor authentication (MFA) to the front end of your Svelte app for added login security.

sveltekit-fido-u2f-login

SvelteKit Fontaine ✍🏽 how to eliminate or reduce font swap cumulative layout shift working with custom, self-hosted fonts in ❤️ SvelteKit.

sveltekit-fontaine

CSS

sveltekit-graphql-client

SvelteKit demo for running ApolloClient

Fast JS Search on Gatsby: Roll Your Own Site Search: Demo site

gatsby-site-search

SvelteKit CSS stylelint: how you can lint vanilla CSS within your Svelte source files using stylelint accessibility and best practice rules.

sveltekit-lint-css

Demo site showing how to use Netlify functions with SvelteKit

sveltekit-netlify-functions

Back end app using Fastify and Mercurius to create a GraphQL API. Uses PostgreSQL db with Prisma.

moment

A demo site to show how the Fauna data API can be used with Gatsby Cloud Functions.

gatsby-functions-fauna

Astro Server-side Rendering: getting started with Astro SSR building a productivity search app with Vitest and Edge geolocation data

astro-server-side-rendering

Astro

rainbow

Rainbow — Accessibility Contrast Tool for Text on Images

SvelteKit demo code for responsive lazy loading iframes.

sveltekit-lazyload-iframe

Markdown writing CLI tool

markwrite

SvelteKit TypeScript vanilla-extract starter: create a markdown blog site with responsive, Next-Gen images, PWA and vanilla-extract styles.

sveltekit-typescript-vanilla-extract-starter

Cloudflare Rust Worker which listens for mux video upload events

mux-webhook-worker

Code to accompany Serverless Rust articles.

serverless-rust

Arkanoid clone built in C++ with Raylib and flecs

arkanoid-clone

C++

sveltekit-s3-compatible-storage

SvelteKit S3 compatible storage: how you can upload files to your cloud storage provider from your Svelte app using presigned URLs.

Macroquad egui DevTools: adding a visual 🐞 debugging user interface for developers to Rust Macroquad game using ⚡️ egui.

learn-web-gpu

C++

macroquad-egui

SvelteKit Ably: introduction to using Svelte with Ably and building a real-time ♟️ game or instant 💬 chat with serverless WebSockets.

sveltekit-ably-realtime-game

Rust dungeon crawler game using Bevy ECS

dungeoncrawl

SvelteKit tooling: we look at 7 tools you can add to streamline your Svelte continuous integration (CI) and development processes.

sveltekit-tooling

Gatsby 100 Days of Code 2021

rodneylab-100-days-of-gatsby