Skip to content

Instantly share code, notes, and snippets.

View KevinBatdorf's full-sized avatar
⚔️
I am undefined

Kevin Batdorf KevinBatdorf

⚔️
I am undefined
View GitHub Profile
@KevinBatdorf
KevinBatdorf / script.js
Last active February 13, 2024 12:59
Use special content value in Code Block Pro WordPress plugin based on language
const addDollarBash = () => Array.from(document.querySelectorAll("div[class*='code-block-pro']"))
// check if direct child has a span with text "Bash"
.filter((b) => b.querySelector(':scope > span')?.textContent === 'Bash')
// add language-bash class to the parent
.forEach((b) => b.classList.add('language-bash'));
document.addEventListener("DOMContentLoaded", addDollarBash);
@KevinBatdorf
KevinBatdorf / sse.js
Last active February 1, 2024 07:11
useStreaming hook and Server Sent Svents (SSE) basic parser
const parseEvent = (eventData) => {
const lines = eventData.split('\n');
const eventType = (
lines.find((line) => line.startsWith('event:')) || 'event:message'
)
.slice(6)
.trim();
const eventDataExtracted = lines
.filter((line) => line.startsWith('data:'))
.map((line) => line.slice(5).trim())
@KevinBatdorf
KevinBatdorf / code-block-pro-plugin.js
Created October 22, 2023 01:33
Code Block Pro plugin - Sidebar panels
import { registerPlugin } from '@wordpress/plugins';
import {
PanelBody,
BaseControl,
createSlotFill,
Button,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
// CodeBlockPro.Sidebar.Start
@KevinBatdorf
KevinBatdorf / add-tab-size-control.js
Last active July 23, 2023 01:38
Add a tab size adjust to Code Block Pro WordPress plugin
const handleTabSizeAdjustToggle = () => {
const blocks = Array.from(
document.querySelectorAll(
'.wp-block-kevinbatdorf-code-block-pro:not(.cbp-tab-size-loaded)',
),
);
blocks.forEach((block) => {
block.classList.add('cbp-tab-size-loaded');
const button = document.createElement('span');
button.setAttribute('role', 'button');
@KevinBatdorf
KevinBatdorf / copyscript.js
Last active April 16, 2023 14:28
Example adding custom copy button code block pro
const blocks = Array.from(
document.querySelectorAll('.wp-block-kevinbatdorf-code-block-pro'),
);
const copyText = 'Click anywhere to copy';
const copiedText = 'Copied!';
blocks &&
blocks.forEach((block) => {
if (!block.querySelector('span[data-code]')) return
block.insertAdjacentHTML(
'beforeend',
@KevinBatdorf
KevinBatdorf / word-wrap.css
Last active March 27, 2023 13:18
Word Wrap Example for Code Block Pro WordPress plugin (if line numbers enabled)
div.wp-block-kevinbatdorf-code-block-pro:not(.code-block-pro-editor) pre code {
overflow-wrap: break-word !important;
/* In some cases you may need the max() */
padding: 0 2rem 0 max(var(--cbp-line-number-width), 2rem) !important;
white-space: pre-wrap !important;
word-break: break-word !important;
}
div.wp-block-kevinbatdorf-code-block-pro:not(.code-block-pro-editor) pre code .line {
min-height: 1.625rem;
position: static !important;
#topicBar,
.time {
display: none;
}
.sender {
width: 6rem;
border-right: 1px solid #333;
background: transparent;
}
@KevinBatdorf
KevinBatdorf / router.php
Last active March 3, 2024 06:08
A simple router for WordPress REST API - Laravel-like
<?php
defined( 'ABSPATH' ) or die;
namespace Kevin;
class Router extends \WP_REST_Controller
{
protected static $instance = null;
public function getHandler($namespace, $endpoint, $callback) {
\register_rest_route(
@KevinBatdorf
KevinBatdorf / settings.php
Last active September 9, 2022 00:37
Zustand with WordPress Gutenberg apiFetch using TypeScript
<?php
defined('ABSPATH') or die;
add_action('admin_init', 'my_namespace_register_settings');
add_action('rest_api_init', 'my_namespace_register_settings');
function my_namespace_register_settings() {
register_setting('my_namespace_settings', 'my_namespace_settings', [
'type' => 'object',
'show_in_rest' => [
@KevinBatdorf
KevinBatdorf / make-mdn-great-again.js
Created July 16, 2022 02:46
Various tweaks to MDN to improve readability
// ==UserScript==
// @name MDN fixes
// @namespace kevinbatdorf
// @version 0.1
// @description Make MDN great again
// @author You
// @match https://developer.mozilla.org/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=mozilla.org
// @grant none
// ==/UserScript==