Crazy button demo from Scotch School course.
A Pen by Ekwuno Obinna on CodePen.
<CSSTransition | |
in={this.state.example} | |
timeout={500} | |
classNames='example' | |
unmountOnExit | |
> |
All the pieces of authentication are possible in Gatsby. Thanks to Auth0, setting it up doesn't have to be so cumbersome!
This setup comes straight from Auth0's official quick start for React.
The first step is installing the official Auth0 SDK for JavaScript from npm.
gatsby-image is a React component specially designed to work seamlessly with Gatsby’s GraphQL queries. It combines Gatsby’s native image processing capabilities with advanced image loading techniques to easily and completely optimize image loading for your sites. gatsby-image uses gatsby-plugin-sharp to power its image transformations.
Install necessary NPM packages
6:34:51 PM: Build ready to start | |
6:34:53 PM: build-image version: d84c79427e8f83c1ba17bcdd7b3fe38059376b68 | |
6:34:53 PM: build-image tag: v3.6.1 | |
6:34:53 PM: buildbot version: 3f7ff7bbf92b8c2ecf180659ea5b1472b472d308 | |
6:34:53 PM: Fetching cached dependencies | |
6:34:53 PM: Starting to download cache of 260.7MB | |
6:34:55 PM: Finished downloading cache in 1.798008079s | |
6:34:55 PM: Starting to extract cache | |
6:35:04 PM: Finished extracting cache in 9.117188517s | |
6:35:04 PM: Finished fetching cache in 11.013865637s |
import React from "react"; | |
import Layout from "../../components/layout"; | |
import { graphql } from "gatsby"; | |
import { MDXRenderer } from "gatsby-plugin-mdx"; | |
const BlogPosts = ({ data }) => { | |
return ( | |
<Layout> | |
<MDXRenderer>{data.mdx.body}</MDXRenderer> |
import React from "react"; | |
import Layout from "../../components/layout"; | |
import { graphql } from "gatsby"; | |
import { MDXRenderer } from "gatsby-plugin-mdx"; | |
import { GatsbyImage, getImage } from "gatsby-plugin-image"; | |
export const query = graphql` | |
query($slug: String) { | |
mdx(slug: { eq: $slug }) { | |
frontmatter { |
name: GitHub Actions Pages Publish | |
on: [push] | |
jobs: | |
pages-publish: | |
runs-on: ubuntu-latest | |
steps: | |
- name: Check out repository code | |
uses: actions/checkout@v3 | |
- name: Setup node v16 | |
uses: actions/setup-node@v3 |
const cookieName = "ab-test-homepage" | |
const newHomepagePathName = "/test" | |
const abtest = async ({ request, next, env }) => { | |
const url = new URL(request.url) | |
// if homepage | |
if (url.pathname === "/") { | |
// if cookie ab-test-hp=new | |
// if no cookie set, pass xy% of traffic and set a cookie value (current|new) |