Skip to content

Instantly share code, notes, and snippets.

View johannschopplich's full-sized avatar

Johann Schopplich johannschopplich

View GitHub Profile
@johannschopplich
johannschopplich / storage.ts
Last active June 27, 2024 15:27
IndexedDB storage wrapper for VueUse
import { useStorageAsync } from "@vueuse/core";
import { get, set, del } from "idb-keyval";
export const STORAGE_KEY_PREFIX = "app.session.";
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function useIdbStorage<T = any>(key: string, initialValue: T) {
return useStorageAsync(`${STORAGE_KEY_PREFIX}${key}`, initialValue, {
async getItem(key: string) {
return (await get<string>(key)) ?? null;
@johannschopplich
johannschopplich / fetch.ts
Last active October 20, 2022 06:50
Fetch data with typed response from Zog schema
// Create a schema for a post
const Post = z.object({
slug: z.string(),
content: z.string(),
});
// Create a schema for a post collection
const Posts = z.array(Post);
// Fetch a post by slug with the correct typed response
@johannschopplich
johannschopplich / AppIcon.vue
Created February 24, 2023 13:41
Auto-import icons from `assets` in Nuxt
<template>
<span
v-if="icon"
:class="[
'children-[svg]:h-full children-[svg]:w-full',
defaultStyles && 'inline-block h-[1em] w-[1em] align-middle',
]"
v-html="icon"
/>
</template>
@johannschopplich
johannschopplich / better-scroller.client.ts
Created June 7, 2023 17:19
Nuxt plugin for `vue-router-better-scroller` with with Suspense route resolution
import { createRouterScroller } from 'vue-router-better-scroller'
interface ScrollPositionCoordinates {
behavior?: ScrollOptions['behavior']
left?: number
top?: number
}
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(
@johannschopplich
johannschopplich / storage.ts
Created October 30, 2023 11:05
Capacitor Preferences binding for VueUse `useStorageAsync`
import { Preferences } from "@capacitor/preferences";
import type {
MaybeRefOrGetter,
RemovableRef,
StorageLikeAsync,
UseStorageAsyncOptions,
} from "@vueuse/core";
const capacitorPreferenceStorage: StorageLikeAsync = {
async getItem(key: string): Promise<string | null> {
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Patrick Marsceill, software designer</title>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/favicon-32x32.png"
@johannschopplich
johannschopplich / blueprint.yaml
Created April 19, 2024 05:43 — forked from lukaskleinschmidt/blueprint.yaml
Kirby 4 query pages from a searchengine for the pages field
fields:
articles:
type: pages
query: kirby.collection('articles')
@johannschopplich
johannschopplich / backup-env.mjs
Created April 24, 2024 07:53
Backup all your .env files while keeping the directory structure of the source directory
import process from "node:process";
import fsp from "node:fs/promises";
import path from "node:path";
import fg from "fast-glob";
async function copyEnvFiles(sourceDir, backupDir) {
try {
const envFiles = await fg(["**/.env"], {
cwd: sourceDir,
ignore: ["**/node_modules/**"],
@johannschopplich
johannschopplich / proxy.ts
Created August 30, 2024 08:19
unenv `createMock`, but optimized
const fn = function () {}
function createMock(name: string, overrides: Record<any, any> = {}): any {
fn.prototype.name = name
const props: Record<any, any> = {}
return new Proxy(fn, {
get(_target, prop) {
if (prop === 'caller') {
return null
}
@johannschopplich
johannschopplich / prompts.ts
Last active November 23, 2024 21:48
bolt.new System Prompt
// https://github.com/stackblitz/bolt.new/blob/main/app/lib/.server/llm/prompts.ts
import { MODIFICATIONS_TAG_NAME, WORK_DIR } from '~/utils/constants';
import { allowedHTMLElements } from '~/utils/markdown';
import { stripIndents } from '~/utils/stripIndent';
export const getSystemPrompt = (cwd: string = WORK_DIR) => `
You are Bolt, an expert AI assistant and exceptional senior software developer with vast knowledge across multiple programming languages, frameworks, and best practices.
<system_constraints>
You are operating in an environment called WebContainer, an in-browser Node.js runtime that emulates a Linux system to some degree. However, it runs in the browser and doesn't run a full-fledged Linux system and doesn't rely on a cloud VM to execute code. All code is executed in the browser. It does come with a shell that emulates zsh. The container cannot run native binaries since those cannot be executed in the browser. That means it can only execute code that is native to a browser including JS, Web