Skip to content

Instantly share code, notes, and snippets.

View kenakingkong's full-sized avatar
🦎

Makena Kong kenakingkong

🦎
View GitHub Profile
import React from 'react';
import { StaticQuery, graphql } from "gatsby"
import { CardWrapper } from 'react-swipeable-cards';
import {MyCard, MyEndCard} from './mycard'
const Stack = () => (
<StaticQuery
query={graphql`
query MediumFeedQuery {
allMediumFeed {
@kenakingkong
kenakingkong / stack.js
Last active November 25, 2020 23:03
@src/components/stack.js
//@src/components/stack.js
import React from 'react';
import { StaticQuery, graphql } from "gatsby"
import { CardWrapper } from 'react-swipeable-cards';
import {MyCard, MyEndCard} from './mycard'
const Stack = () => (
<StaticQuery
query={graphql`
@kenakingkong
kenakingkong / icons.js
Last active November 27, 2020 23:17
@src/components/icons.js
//src/components/icons.js
import React from "react"
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import {faMedium, faTwitter} from '@fortawesome/free-brands-svg-icons'
import {faEnvelope} from '@fortawesome/free-solid-svg-icons'
export const IconMedium = <FontAwesomeIcon icon={faMedium} size="1x" />
export const IconTwitter = <FontAwesomeIcon icon={faTwitter} size="1x" />
export const IconEnvelope = <FontAwesomeIcon icon={faEnvelope} size="1x" />
{
"dependencies": {
"@artsy/fresnel": "^1.3.0",
"@fortawesome/fontawesome-svg-core": "^1.2.32",
"@fortawesome/free-brands-svg-icons": "^5.15.1",
"@fortawesome/free-solid-svg-icons": "^5.15.1",
"@fortawesome/react-fontawesome": "^0.1.12",
"gatsby": "^2.27.0",
"gatsby-medium-rss-feed": "^1.0.2",
"gatsby-plugin-fontawesome-css": "^1.0.0",
module.exports = {
siteMetadata : {},
plugins: [
`gatsby-plugin-react-helmet`,
`gatsby-plugin-fontawesome-css`,
`gatsby-plugin-sass`,
{
resolve: 'gatsby-plugin-web-font-loader',
options: {
google: {
@kenakingkong
kenakingkong / layout.js
Created November 25, 2020 23:07
excerpt from src/components/layout.js
// excerpt from src/components/layout.js
import { Media } from "../media"
...
<main>
{/* Tablet/Desktop */}
<Media greaterThan="sm">
<div className="my-container">
<BoxImage />
// src/media.js
import { createMedia } from "@artsy/fresnel"
const QueryBreakpoints = createMedia({
breakpoints: {
xs: 0,
sm: 768,
md: 1000,
lg: 1200,
import * as React from "react"
import { MediaContextProvider } from "./src/media"
export const wrapRootElement = ({ element }) => (
<MediaContextProvider>{element}</MediaContextProvider>
)
//excerpt from gatsby-config.js
...
plugins = [
{
resolve: `gatsby-plugin-s3`,
options: {
bucketName: '<bucket-name>',
region: '<bucket-region>'
},
}
//excerpt from gatsby-config.js
...
plugins = [
{
resolve: 'gatsby-medium-rss-feed',
options: {
nodeType: 'sourceNodes',
name: 'MediumFeed',
userName: 'ThomKaar'
}