Skip to content

Instantly share code, notes, and snippets.

View gaurangrshah's full-sized avatar
💭
🚀

gshah2020 gaurangrshah

💭
🚀
View GitHub Profile
@gaurangrshah
gaurangrshah / git-cms.ts
Created December 15, 2020 03:32
git cms example
import { Octokit } from '@octokit/rest'
import { nanoid } from 'nanoid'
export interface GitHubCMSOptions {
owner: string;
repo: string;
token: string;
}
export interface Comment {
@gaurangrshah
gaurangrshah / next.config.js
Created December 10, 2020 16:00
#webpack #markdown #raw-loader
module.exports = {
webpack: function(config) {
config.module.rules.push({
test: /\.md$/,
use: 'raw-loader',
})
return config
},
}
@gaurangrshah
gaurangrshah / Image.tsx
Created December 5, 2020 18:37
Integrate NextJs `next/image` with Chakra-UI styling
import { chakra, ThemingProps, useStyleConfig } from '@chakra-ui/react'
import NextImage, { ImageProps as NextImageProps } from 'next/image'
import { ReactElement } from 'react'
/**
* ? Because NextJs typing is preventing auto-suggest for layout, width and height
* ? we declare the styles differently in this component and will manage the switch
* ? to NextJs typings when calling NextJs Image component
*/
type LayoutValue = 'fixed' | 'intrinsic' | 'responsive' | undefined
@gaurangrshah
gaurangrshah / seed.js
Created November 20, 2020 06:45
#db #utils #js #seed #data
function seed (length, schema) {
return new Array(length) //create a new array with length(num) of 'undefined' values
.fill(1) // convert 'undefined' values to the number 1
.map((_, i) => ({schema})) // map over the array length(num) of times and output an item based on schema
}
@gaurangrshah
gaurangrshah / json-viewer.js
Created November 17, 2020 20:27
#chakra-ui #json #data #handling #view #viewer
import React, { useState } from 'react';
import { Box, Button, Code } from '@chakra-ui/core';
const json = ({ data }) => {
const [open, setOpen] = useState(false);
React.useEffect(() => {
setOpen(data ? true : false);
}, [data]);
@gaurangrshah
gaurangrshah / button.js
Created November 4, 2020 06:37
#chakra-ui #components #config
const Button = {
baseStyle: {
default: {
border: "none",
variant: "solid",
colorScheme: "blue",
color: "white",
textAlign: "left",
pl: 2, // 0.5rem
_hover: {
@gaurangrshah
gaurangrshah / seo.js
Created November 4, 2020 05:47
#gatsby #component #seo
/**
* SEO component that queries for data with
* Gatsby's useStaticQuery React hook
*
* See: https://www.gatsbyjs.org/docs/use-static-query/
*/
import React from "react"
import Helmet from "react-helmet"
import useSiteMetadata from "../hooks/use-site-metadata"
@gaurangrshah
gaurangrshah / gatsby-config.js
Last active November 4, 2020 05:55
#gatsby #config #default #starter
module.exports = {
siteMetadata: {
title: `Gatsby Default Starter`,
tagline: `This is what we do!`,
description: `Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad amet ex et sed in. Nobis debitis earum ullam expedita harum?`,
siteUrl: `https://www.livewebsiteURL.com`,
author: `@thinkmechanic`,
language: `en`,
pages: [
{ label: "home", path: "/" },
import { useLayoutEffect } from "react"
export const useBodyScrolllock = toggle => {
useLayoutEffect(() => {
let originalStyle
let lockScroll = !toggle ? false : true
if (lockScroll) {
originalStyle = window.getComputedStyle(document.body).overflow
document.body.style.overflow = "hidden"
}
@gaurangrshah
gaurangrshah / use-sitemetadata.js
Created November 3, 2020 21:17
#gatsby #hooks
import { graphql, useStaticQuery } from "gatsby"
type Props = {
site: {
siteMetadata: {
title: string
tagline: string
description: string
language: string
siteUrl: string