Skip to content

Instantly share code, notes, and snippets.

View tammyhart's full-sized avatar

Tammy Hart tammyhart

View GitHub Profile
@tammyhart
tammyhart / FilteredComponentAs.tsx
Last active November 3, 2024 22:10
FilteredComponentAs.tsx - Strapi and Styled-Components filter
import styled from "styled-components"
import type { KnownTarget } from "styled-components/dist/types"
import { type BlocksContent, BlocksRenderer } from "@strapi/blocks-react-renderer"
type FilterAs = {
filteredText: string
as?: KnownTarget
}
const filterAs = (text: string): FilterAs => {
@tammyhart
tammyhart / App.css
Last active November 3, 2024 22:05
useStickyRef.js - Add class when stuck
/* essential styles for hook to work */
header {
/*
this is set in the JS so the the primary behavior isn't dependant on the stylesheet
position: sticky;
top: -1px;
*/
}
/* styles for when header is stuck */
@tammyhart
tammyhart / page.tsx
Created September 5, 2024 20:43
Filter tokens in meta title
export async function generateMetadata({ searchParams }: ThoughtsProps): Promise<Metadata> {
const tagId = searchParams?.tag ?? null
const [tagData, indexData] = await Promise.all([
getStrapiData(`tags?${tagIdQuery(tagId)}`),
getStrapiData("thoughts-index?populate=*"),
])
let tagName = tagData?.data[0]?.name ?? null
tagName = tagName ? `on ${tagName}` : undefined
@tammyhart
tammyhart / Separator.tsx
Created August 28, 2024 01:43
A non-SVG solution to drawing a responsive line from top right to bottom left with circular markers on each end + calculate a gradient to fade from point a to b
import styled from "styled-components"
import { media, size } from "./utils"
enum Z {
Separator,
FauxLine,
FauxLineBlocker,
Marker,
}
type ConditionalWrap<T> = {
children: React.ReactNode
condition: boolean
Wrap: T
wrapProps?: T extends React.ComponentType<infer P> ? P : object
}
const ConditionalWrap = <T extends React.ElementType>({
children,
condition,
@tammyhart
tammyhart / Flex.tsx
Last active August 25, 2024 10:21
Flexible flex-box component
import { HTMLProps } from "react"
import styled from "styled-components"
import {
calcBasis,
mapGap,
mapJustify,
mapPadding,
media,
} from "./utils"
@tammyhart
tammyhart / Main.tsx
Last active August 23, 2024 03:53
Typed Component for <main>
import styled from "styled-components"
import type { Sizes } from "./styles"
import { mapGap, mapGrow, media, size } from "./utils"
const BIG = "big"
const NONE = "none"
const NORMAL = "normal"
const DEFAULT_SIZE = NORMAL
@tammyhart
tammyhart / Icon.js
Created July 20, 2017 04:15
SVG Icon React Component
import React from 'react';
class Icon extends React.Component {
render() {
const icons = {
menu: <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<line x1="3" y1="12" x2="21" y2="12"/>
<line x1="3" y1="6" x2="21" y2="6"/>
<line x1="3" y1="18" x2="21" y2="18"/>
</svg>,
@tammyhart
tammyhart / wordpress-events-filter-and-order.php
Last active January 18, 2016 21:34
A pre_get_posts action that will first skip past events, then order them by the date meta value ascending
/**
* Order Events by date and skip them completely if they are past
*/
function coh_event_post_order( $query ) {
// do not modify queries in the admin
if( is_admin() ) {
return $query;
}
@tammyhart
tammyhart / toggle.js
Created January 12, 2016 16:56
Use to toggle single items, or work in pairs to toggle between related items
var $toggle = $( '[data-toggle]' );
function toggleOpen(event) {
var $this = $( this ),
object = $this.data( 'toggle' ),
$object = $( '.' + object ), // the object we're toggling
rel = $this.attr( 'rel' ), // the name of any related toggles
$other = $toggle.filter( '[rel=' + rel + ']' ).not( $this ), // find another toggle with the same rel