Skip to content

Instantly share code, notes, and snippets.

View akoepcke's full-sized avatar

A. Koepcke akoepcke

13 followers · 5 following
View GitHub Profile
@akoepcke
akoepcke / tailwind.config.ts
Created July 17, 2023 16:49 — forked from jordienr/tailwind.config.ts
Tailwind SVG Grid Background
// Remember to install mini-svg-data-uri
// Follow me on twitter for memes @jordienr
import { type Config } from "tailwindcss";
const {
default: flattenColorPalette,
} = require("tailwindcss/lib/util/flattenColorPalette");
const svgToDataUri = require("mini-svg-data-uri");
export default {
@akoepcke
akoepcke / gist:b39b872496e25333f5aea8d4d7152435
Created June 15, 2023 09:26 — forked from JJediny/gist:a466eed62cee30ad45e2
Jekyll Liquid Cheatsheet

There are two types of markup in Liquid: Output and Tag.

  • Output markup (which may resolve to text) is surrounded by
{{ matched pairs of curly brackets (ie, braces) }}
  • Tag markup (which cannot resolve to text) is surrounded by
@akoepcke
akoepcke / next.config.js
Created April 23, 2023 13:31 — forked from mdubourg001/next.config.js
Next.js - Force the creation of an index.html file for every page
module.exports = {
// forcing the creation of an index.html for every page to allow
// providers serving pages without having to add .html to the url
exportPathMap: async function (defaultPathMap) {
const pathMap = {};
for (const [path, config] of Object.entries(defaultPathMap)) {
if (path === "/") {
pathMap[path] = config;
} else {
@akoepcke
akoepcke / A Tailwind CSS aspect-ratio Replacement Supporting Safari 14.md
Created March 30, 2023 09:27 — forked from olets/A Tailwind CSS aspect-ratio Replacement Supporting Safari 14.md
A Tailwind CSS aspect-ratio Replacement Supporting Safari 14
@akoepcke
akoepcke / placeholder-image.js
Created March 1, 2023 09:44 — forked from stowball/placeholder-image.js
Placeholder React Components
function PlaceholderImage({
height,
width,
...consumerProps
}) {
return (
<img
{...consumerProps}
alt=""
src={`https://via.placeholder.com/${width}x${height}`}
@akoepcke
akoepcke / gist:0a07c557493214b7e1e9ff2b62a13e09
Created May 11, 2021 10:57 — forked from MrDys/gist:3512455
Link directly to an open modal window in Bootstrap
/* If you've ever had the need to link directly to an open modal window with Bootstrap, here's a quick and easy way to do it:
Make sure your modal has an id:
<div class="modal" id="myModal" ... >
Then stick this bit of Javascript at at the end of your document:
*/
$(document).ready(function() {
@akoepcke
akoepcke / readDuration.php
Created May 7, 2021 19:07 — forked from owenvoke/readDuration.php
A string macro for the duration to read text.
<?php
// From Marcel Pociot's tweet
// See: https://twitter.com/marcelpociot/status/1389881758267625473
Str::macro('readDuration', function (... $text) {
$totalWords = str_word_count(implode(' ', $text));
$minutesToRead = round($totalWords / 200);
return (int) max(1, $minutesToRead);
@akoepcke
akoepcke / tailwind.config.js
Created April 17, 2021 21:39 — forked from samselikoff/tailwind.config.js
Firefox plugin for Tailwind CSS. Add styles that target Firefox browser only.
const plugin = require("tailwindcss/plugin");
module.exports = {
mode: "jit",
purge: {
content: ["./src/**/*.{js,ts,jsx,tsx,mdx,vue}"],
},
theme: { extend: {} },
variants: {},
plugins: [
@akoepcke
akoepcke / bigger-tailwindcss-spacing-scale.js
Created January 18, 2021 09:59 — forked from vivgui/bigger-tailwindcss-spacing-scale.js
Here's a bigger spacing scale for TailwindCSS.
spacing: {
"13": '3.25rem',
"15": '3.75rem',
"17": '4.25rem',
"18": '4.5rem',
"19": '4.75rem',
"76": "19rem",
"84": "21rem",
"88": "22rem",
"92": "23rem",
@akoepcke
akoepcke / App.js
Created January 4, 2021 15:58 — forked from daankauwenberg/App.js
A React cookie consent using hooks and context
import React from 'react';
import { CookieConsentProvider } from './CookieConsent'
import Page from './Page'
function App() {
return (
<CookieConsentProvider>
<div className="App">
<Page />
</div>