Maxiviper117

Guide: Implementing CSRF Protection in SvelteKit

Cross-Site Request Forgery (CSRF) is a security vulnerability where an attacker tricks users into submitting unintended requests. This guide will show you how to implement CSRF protection in your SvelteKit app using a server hook.

---

Step 1: Configure SvelteKit to Allow Custom CSRF Handling

By default, SvelteKit has built-in CSRF protection that checks the request’s origin. Since we are implementing our own CSRF middleware, we must disable SvelteKit’s built-in CSRF origin check.

Open your svelte.config.ts (or svelte.config.js) and update it like this:

Maxiviper117

CSRF Token Setup Using Root Layout’s Server Load Function

This guide shows you how to generate a CSRF token once in your root layout so that every page automatically receives the token, reducing duplication and ensuring consistency across your SvelteKit app.

---

1. Generate and Store the CSRF Token in +layout.server.ts

Create (or update) your root layout server file (+layout.server.ts) to check for an existing CSRF token in cookies. If not present, generate a new token using Node’s crypto module and set it in a cookie:

Maxiviper117

/**
 * Defer animations for elements that are not initially in view.
 * It removes animation classes starting with "animate-" from elements that are not visible,
 * stores those classes, and re-applies them when the element scrolls into the viewport.
 */
export function deferAnimations() {
    // Helper to check if an element is in the viewport
    function isInViewport(el: HTMLElement): boolean {
        const rect = el.getBoundingClientRect();
        return rect.bottom > 0 && rect.top < window.innerHeight;

Maxiviper117

Caching External Images in Svelte using Service Workers

This guide explains how to cache external images used in <img> elements in a Svelte application using a service worker. This improves performance and enables offline availability of images.

---

1. Register the Service Worker in Svelte

In your main Svelte component (e.g., src/routes/+layout.svelte), register the service worker:

Maxiviper117

import { Component, type ReactNode } from "react";

interface ErrorBoundaryProps {
    children: ReactNode;
    fallback?: ReactNode;
    onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
    resetButtonText?: string;
    showResetButton?: boolean;
}

Maxiviper117

<?php

namespace App\Console\Commands;

use Illuminate\Console\Command;
use Illuminate\Support\Facades\Route;

class GenerateRoutesJs extends Command
{
    protected $signature = 'routes:generate-js';

Maxiviper117

{
    "github.copilot.chat.commitMessageGeneration.instructions": [
      {
          "text": "Generate commit messages following the Conventional Commits specification. Use the following structure strictly:\n\n<type>[optional scope]: <short description>\n\nOptional body: Include a detailed explanation of the change if necessary. Wrap text at 72 characters per line.\n\nOptional footer: Include metadata such as issue references or breaking changes. Use keywords like 'BREAKING CHANGE:' followed by an explanation, and reference issues with 'Closes #<issue_number>'.\n\nTypes must be one of the following:\n- feat: For introducing new features.\n- fix: For bug fixes.\n- docs: For documentation-only changes.\n- style: For changes that do not affect code functionality (e.g., formatting).\n- refactor: For code changes that neither fix a bug nor add a feature.\n- test: For adding or modifying tests.\n- chore: For non-code tasks such as updating dependencies.\n\nThe short description must be imperative (e.g., 'add featu

Maxiviper117

# ------------------------------------------------------------------------------
# FZF Configuration
# ------------------------------------------------------------------------------

# Source fzf's key bindings and completion (if installed via Homebrew or similar)
[ -f ~/.fzf.zsh ] && source ~/.fzf.zsh

# Adjust default FZF options (feel free to tweak)
export FZF_DEFAULT_OPTS="--height=70% --reverse --border"

Maxiviper117

import fs from "fs";
import chroma from "chroma-js";

// Define your custom colors
const colors = {
  primary: "#1E40AF", // Blue
  secondary: "#10B981", // Green
  tertiary: "#9333EA", // Purple
  accent: "#F59E0B", // Amber
};

Maxiviper117

import type { Config } from 'tailwindcss';
import plugin from 'tailwindcss/plugin';
import chroma from 'chroma-js';

const domainScale = [100, 200, 300, 400, 500, 600, 700, 800, 900];

function generateShadesInverted(baseColor, steps = 9) {
	const scale = chroma
		.scale(['white', baseColor, 'black'])