Skip to content

Instantly share code, notes, and snippets.


Stephanie Eckles 5t3ph

View GitHub Profile
5t3ph / gist:f87dad1fac5f6d920c1a
Last active Aug 29, 2015
WordPress WP_User_Query Transient Array Search
View gist:f87dad1fac5f6d920c1a
* WordPress WP_User_Query Transient Array Search
* Purpose: To search array of relevant user fields
* stored as an array in a transient
* Example Array:
* [userid] => array (
'0' => 'first_name',
5t3ph / cpt-search-results
Last active Aug 29, 2015
WordPress: Customize CPT Search Results
View cpt-search-results
* For use when you have a custom page to display a custom post type but also need the CPT pulled into search results.
* Includes functions hooked to filters to alter the title, permalink, and excerpt.
* Uses switch statements for easily extending to additional custom post types.
5t3ph / gatsby-custom-markdown-components.tsx
Last active Jan 4, 2019
Gatsby Custom Markdown Components - prevent wrapping with paragraph
View gatsby-custom-markdown-components.tsx
/* Review the following article for more info on getting started with custom components.
* @link
* Example here demonstrates detecting if a custom component is being used
* If so, do not wrap it with a paragraph tag and invalidate DOM nesting
import * as React from 'react';
import rehypeReact from 'rehype-react';
5t3ph / gatsby-fetch-permalink.tsx
Created Jan 7, 2019
Gatsby - Fetch permalink based on known slug
View gatsby-fetch-permalink.tsx
5t3ph / sass-static-package.json
Last active Mar 31, 2019
SASS compile|autoprefix|minimize and browser-sync server for static HTML
View sass-static-package.json
Project Structure:
- css/ (generated by node-sass)
- sass/
- - style.scss
- index.html
npm run develop - copies src files to dist/ and starts server with live reload
5t3ph / gatsby-useImgSrc-hook.tsx
Last active Mar 10, 2020
Gatsby useStaticQuery to create custom hook for returning an image src path
View gatsby-useImgSrc-hook.tsx
* Required plugins: gatsby-source-filesystem and gatsby-plugin-sharp
* Basic Hook Usage:
* import useImgSrc from '../utils/useImgSrc';
* const Image = ({src}) => {
* const imgSrc = useImgSrc(src);
5t3ph / gatsby-useLocation-hook-change-theme.js
Last active Apr 17, 2020
In Gatsby, leverage Reach Router's useLocation hook along with the query-string package to change user's selected theme, or expand to any values you need from the URL parameters, available on `` from the useLocation hook.
View gatsby-useLocation-hook-change-theme.js
import * as React from 'react';
import { useLocation } from '@reach/router';
import queryString from 'query-string';
const getSelectedTheme = (query) => {
const fallback = 'light';
if (query) {
const queriedTheme = queryString.parse(query);
View sass-theme-map-function.scss
$color-primary: purple;
$color-secondary: blue;
$color-support: green;
$theme-colors: (
primary: $color-primary,
secondary: $color-secondary,
support: $color-support
View _grid-item.scss
span {
border: 2px dashed currentcolor;
border-radius: 4px;
min-height: 15vh;
padding: 1rem;
color: #0178d4;
font-size: 3rem;
text-align: center;
display: flex;
justify-content: center;
View a11y-input.html
<legend>Full Name</legend>
<div class="form-field">
<label for="firstname">First Name</label>
<input type="text" id="firstname" />
<div class="form-field">
<label for="lastname">Last Name</label>
<input type="text" id="lastname" />
You can’t perform that action at this time.