Skip to content

Instantly share code, notes, and snippets.

Avatar
🦔
Programming helps me face my generalized anxiety disorder.

Johann Schopplich johannschopplich

🦔
Programming helps me face my generalized anxiety disorder.
View GitHub Profile
@johannschopplich
johannschopplich / stroage.ts
Last active Aug 4, 2022
IndexedDB storage wrapper for VueUse
View stroage.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;
}
@johannschopplich
johannschopplich / queries.css
Last active Dec 16, 2020
Media queries for differentiating mouse and touch-based screens
View queries.css
@media (hover: none) and (pointer: coarse) {
/* Touchscreens */
}
@media (hover: none) and (pointer: fine) {
/* Stylus */
}
@media (hover: hover) and (pointer: coarse) {
/* Controllers */
}
@media (hover: hover) and (pointer: fine) {
@johannschopplich
johannschopplich / index.js
Last active Dec 3, 2020
Kirby 3.5 accordion block by @distantnative
View index.js
panel.plugin("distantnative/block-accordion", {
blocks: {
accordion: {
methods: {
addRow() {
this.content.rows.push({ summary: "", detail: "" });
this.update({ rows: this.content.rows });
},
removeRow(index) {
this.content.rows.splice(index, 1);
@johannschopplich
johannschopplich / useMapDb.js
Last active Nov 9, 2020
Reactive map which saves to JSON file when values are stored
View useMapDb.js
import { existsSync, readFileSync, writeFileSync } from 'fs'
const readDb = path => existsSync(path) ? JSON.parse(readFileSync(path)) : []
const writeDb = (path, value) => {
writeFileSync(path, JSON.stringify(value, null, 2))
}
class MapDb extends Map {
constructor (path) {
@johannschopplich
johannschopplich / Contract Killer 3.md
Created Oct 28, 2020 — forked from malarkey/Contract Killer 3.md
The latest version of my ‘killer contract’ for web designers and developers
View Contract Killer 3.md

Contract Killer

The popular open-source contract for web professionals by Stuff & Nonsense

  • Originally published: 23rd December 2008
  • Revised date: March 15th 2016
  • Original post

@johannschopplich
johannschopplich / preload.php
Last active Oct 22, 2020
Preload Kirby CMS for PHP 7.4 and above
View preload.php
<?php
// Link this script in `php.ini`:
// `opcache.preload=/path/to/project/preload.php`
//
// Thanks to Brent Roose for the preloading script
// @see https://stitcher.io/blog/preloading-in-php-74
require_once __DIR__ . '/vendor/autoload.php';
@johannschopplich
johannschopplich / create.sh
Created Jul 28, 2020
Create Ed25519 SSH Key
View create.sh
ssh-keygen -o -a 64 -t ed25519 -f ~/.ssh/id_ed25519 -C "john@example.com"
@johannschopplich
johannschopplich / kirby-vue3-starterkit.jhnn.dev-20200711T231402.html
Created Jul 12, 2020
Lighthouse report of kirby-vue3-starterkit.jhnn.dev
View kirby-vue3-starterkit.jhnn.dev-20200711T231402.html
<!--
@license
Copyright 2018 Google Inc. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0