Skip to content

Instantly share code, notes, and snippets.

@JohnAlbin
JohnAlbin / _README.md
Last active Aug 22, 2022 — forked from clarkdave/createPages.ts
TypeScript + Gatsby config and node API
View _README.md

README

  1. When Gatsby starts up, it will read gatsby-config.js first.
  2. As you can see below, we use that file to require('ts-node').register() which registers a TypeScript evaluator that will be used when Gatsby reads all other API Javascript files. In other words, we only need to do this once in our entire codebase and not in other Gatsby files like gatsby-node.js.
  3. Our gatsby-config.js re-exports all the exported variables available in gatsby-config.ts.
@JohnAlbin
JohnAlbin / config.js
Last active May 6, 2022
Storybook navigation sorting
View config.js
// .storybook/config.js
import { addParameters, configure } from '@storybook/react';
import { storySort } from 'storybook-sort';
addParameters({
options: {
showRoots: true,
storySort: storySort({ order: ['Home', 'Pages', ['Projects', 'Community', 'Help'], 'Components']}),
},
@JohnAlbin
JohnAlbin / Example01.js
Last active Mar 29, 2019
CSS-in-JS API Approaches
View Example01.js
// MyComponent.js
import { apiFunc } from 'some-project';
const styles = {
base: {
color: '#fff',
':hover': {
backgroundColor: '#0074d9',
},
},
@JohnAlbin
JohnAlbin / SassMeister-input.scss
Created May 28, 2014
Generated by SassMeister.com.
View SassMeister-input.scss
// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// ----
.component,
%component {
content: 'component';
&--variant {
@JohnAlbin
JohnAlbin / _init.scss
Last active Dec 26, 2015
Handing IE8 and lower with Breakpoint + compass/support
View _init.scss
// Initialize the Sass variables and partials used in this project.
// Set the legacy IE support variables. We override the default values set by
// the compass/support partial, but let styles-ie8.scss override these values.
$legacy-support-for-ie6 : false !default;
$legacy-support-for-ie7 : false !default; // Note the use of !default.
$legacy-support-for-ie8 : false !default;
// Partials to be shared with all .scss files.
@JohnAlbin
JohnAlbin / SassMeister-input.scss
Created Sep 30, 2013
Sass & Compass, Chapter 3: Nested properties
View SassMeister-input.scss
hr {
height: 0;
border: none {
top: 1px solid black;
}
}
@JohnAlbin
JohnAlbin / SassMeister-output.css
Created Sep 17, 2013
Sass & Compass, Chapter 1: Variables
View SassMeister-output.css
a:link {
color: #93008e;
}
.comment {
margin-left: 2.5em;
}
blockquote {
margin: 1.5em 2.5em;
@JohnAlbin
JohnAlbin / SassMeister-input.scss
Created Sep 10, 2013
Sass & Compass, Chapter 1: Repetitive selectors
View SassMeister-input.scss
// Sass (v3.2.10)
// Compass (v0.13.alpha.4)
ul.side-nav li {
a:link,
a:visited {
color: #0000cc;
}
a:focus,
a:hover,
@JohnAlbin
JohnAlbin / SassMeister-input.scss
Created Sep 10, 2013
Sass & Compass, Chapter 1: Design inheritance
View SassMeister-input.scss
// Sass (v3.2.10)
// Compass (v0.13.alpha.4)
.button {
padding: 2px;
border: 1px solid #666;
border-radius: 5px;
color: #000;
background-color: #00adee;
}
@JohnAlbin
JohnAlbin / SassMeister-input.sass
Last active Dec 22, 2015
Sass & Compass, Chapter 1: The original .sass syntax
View SassMeister-input.sass
// Sass (v3.2.10)
// Compass (v0.13.alpha.4)
@import "compass"
/* Search form.
#search
border: 1px solid #666
.button