Skip to content

Instantly share code, notes, and snippets.

Avatar
🦔
Hedgehog under a pile of leaves

Johann Schopplich johannschopplich

🦔
Hedgehog under a pile of leaves
View GitHub Profile
@johannschopplich
johannschopplich / response.ts
Created Nov 8, 2022
Composable to set response HTTP status code in Nuxt 3
View response.ts
/**
* Set HTTP status code of the response
*/
export function useStatusCode(code: number) {
if (process.client) return
const event = useNuxtApp().ssrContext?.event
if (event) event.res.statusCode = code
}
@johannschopplich
johannschopplich / spreadsheet.ts
Last active Oct 27, 2022
Fetch data from Google Sheets API in TypeScript
View spreadsheet.ts
export interface SpreadsheetValues {
majorDimension: "DIMENSION_UNSPECIFIED" | "ROWS" | "COLUMNS";
range: string;
values: string[][];
}
export async function getSpreadsheetValues(
id: string,
sheet: string
): Promise<Record<string, string>[]> {
@johannschopplich
johannschopplich / fiber.js
Created Sep 29, 2022
Kirby fiber backend state available under `window.panel`
View fiber.js
// i.e. $config.debug
window.panel.$config
// ltr, rtl
window.panel.$direction
// current language in a multi-language env
window.panel.$language
// array with all installed languages
window.panel.$languages
// registered: true/false
window.panel.$license
@johannschopplich
johannschopplich / app.vue
Created Sep 21, 2022
Use GSAP ScrollSmoother and ScrollTrigger with Nuxt 3
View app.vue
<script setup lang="ts">
import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import { ScrollSmoother } from 'gsap/ScrollSmoother'
const nuxtApp = useNuxtApp()
const router = useRouter()
// Initialize all GSAP plugins
if (process.client) {
@johannschopplich
johannschopplich / kql.ts
Last active Nov 15, 2022
Vue composable to fetch KQL queries
View kql.ts
import { $fetch } from "ohmyfetch";
import { objectHash } from "ohash";
import { resolveUnref } from "@vueuse/core";
import { useQuery } from "vue-unquery";
import type { MaybeComputedRef } from "@vueuse/core";
import type { TurboVueOptions } from "vue-unquery";
import type { KirbyQueryRequest, KirbyQueryResponse } from "kirby-fest";
let lastResponse: KirbyQueryResponse | undefined;
@johannschopplich
johannschopplich / gsap.ts
Created Sep 7, 2022
GSAP ScrollSmother/ScrollTrigger Composable for Nuxt 3
View gsap.ts
import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import { ScrollSmoother } from 'gsap/ScrollSmoother'
export function useGsapState() {
return useState('gsap.state', () => ({ isInitialized: false }))
}
export function useGsap() {
const state = useGsapState()
@johannschopplich
johannschopplich / fetch.ts
Last active Oct 20, 2022
Fetch data with typed response from Zog schema
View fetch.ts
// 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 / storage.ts
Last active Sep 5, 2022
IndexedDB storage wrapper for VueUse
View storage.ts
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 / kirby-ploi-deploy.sh
Created Nov 30, 2021
Kirby Ploi.io deploy script for all projects
View kirby-ploi-deploy.sh
cd {SITE_DIRECTORY}
# Create .env if not present
if [ ! -f .env ] && [ -f .env.production.example ]; then
cp .env.production.example .env
fi
# Pull changes
git pull origin main
View fiverr-fix.css
.gig-page .gig-gallery-component .gallery-thumbnails .thumbs-container .thumbnail {
width: 100px;
height: 100%;
margin-right: 5px;
}
.gig-page .gig-gallery-component .gallery-thumbnails .thumbs-container .thumbnail img {
height: 100%;
width: inherit;
}