kmelve

Em Dash Easter Egg

An easter egg for blogs using Sanity and Portable Text: every em dash (—) becomes clickable, revealing whether it was typed by a human or placed by AI.

Human-certified dashes show playful messages like "Certified organic em dash" or "Artisanal punctuation." Uncertified dashes (assumed AI) show messages like "Machine-generated punctuation" or "Algorithmically optimized dash."

How it works

The feature has four layers:

kmelve

// Schema: main body Portable Text with footnote annotation
// This shows how to register footnote as a mark annotation

import { BlockquoteIcon, LaunchIcon } from "@sanity/icons";
import { defineArrayMember, defineField, defineType } from "sanity";

export const bodyPortableText = defineType({
  name: "bodyPortableText",
  type: "array",
  title: "Content",

kmelve

Reusable Page Blocks in Sanity - Implementation Guide

A pattern for creating once, using everywhere: how to implement reusable content blocks in Sanity that can be shared across multiple pages.

---

Overview

This pattern allows content editors to create a page block (hero, CTA, feature section, etc.) once as a standalone document, then reference it from multiple pages. Changes to the reusable block automatically propagate everywhere it's used.

kmelve

import { toPlainText } from "@portabletext/react"
import { BlockEditor as DefaultBlockEditor } from "sanity"
import { handlePaste } from "~/studio/components/blockEditor/handlePaste"

const wordsPerMinute = 200

export default function BlockEditor(props: any, ref) {
  const value = props.value ?? []
  const plainText = toPlainText(value)
  const characterCount = plainText.length

kmelve

#!/bin/bash
# Assumes that you have the Netlify and jq CLI tools installed and that you are logged in.
# Only been tested on macOS and zsh
# Will change the build image for all sites in a Netlify account to the specified image
#
# Usage: sh ./netlify-build-image-bulk.sh

# This assumes that you have logged in with the CLI fairly recently and that you're on macOS
# For other systems: https://github.com/sindresorhus/env-paths#pathsconfig
NETLIFY_AUTH=$(cat ~/Library/Preferences/netlify/config.json|jq -r ".users[].auth.token")

kmelve

å
alle
andre
at
av
både
båe
bare
begge
ble

kmelve

import S from '@sanity/desk-tool/structure-builder'
import eachDayOfInterval from 'date-fns/eachDayOfInterval'
import startOfYear from 'date-fns/startOfYear'
import startOfDay from 'date-fns/startOfDay'
import endOfDay from 'date-fns/endOfDay'
let now = new Date()

export default () => S.listItem()
  .title('Entries by day this year')
  .child(

kmelve

import React, { useState } from "react"
import { TextInput, Stack } from "@sanity/ui"
import { set, unset } from "sanity"

interface LinkedInEmbed {
  _key: string
  _type: string
  postUrl: string
  height: number
}

kmelve

import React, { Component, Fragment } from 'react'
import { BlockEditor } from 'part:@sanity/form-builder'
import Switch from 'part:@sanity/components/toggles/switch'
import css from './BlockEditor.module.css'
import { handlePaste } from './handlePaste'

export default class CustomEditor extends Component {
  state = {
    customPaste: false
  }

kmelve

/**
 * CUSTOM SANITY STUDIO INPUT COMPONENT FOR FONT-AWESOME
 *
 * This is a proof of concept custom input component that loads the whole free library of font awesome icons and makes them
 * searchable in a downshift component. If they're selected the font name will be saved as a string on the document.
 *
 * Install dependencies in your studio folder with:
 * yarn add @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons downshift
 *
 * Use as a custom input component in your shcema: