Skip to content

Instantly share code, notes, and snippets.

@j2is
j2is / config.js
Created Jul 18, 2021
Next Sanity Config
View config.js
export const config = {
dataset: process.env.NEXT_PUBLIC_SANITY_DATASET || "production",
projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
apiVersion: "2021-03-25",
/**
* Set useCdn to `false` if your application require the freshest possible
* data always (potentially slightly slower and a bit more expensive).
* Authenticated request (like preview) will always bypass the CDN
**/
useCdn: process.env.NODE_ENV === "production",
@j2is
j2is / sanity.js
Created Jul 18, 2021
Next Sanity Client
View sanity.js
// lib/sanity.js
import {
createImageUrlBuilder,
createPortableTextComponent,
createPreviewSubscriptionHook,
createCurrentUserHook,
} from "next-sanity";
import { config } from "./config";
@j2is
j2is / sanity.server.js
Created Jul 18, 2021
Next Sanity Server
View sanity.server.js
// lib/sanity.server.js
import { createClient } from "next-sanity";
import { config } from "./config";
// Set up the client for fetching data in the getProps page functions
export const sanityClient = createClient(config);
// Set up a preview client with serverless authentication for drafts
export const previewClient = createClient({
...config,
@j2is
j2is / index.js
Created Jul 18, 2021
Next Sanity Index
View index.js
// pages/index.js
import React from "react";
import { groq } from "next-sanity";
import { usePreviewSubscription, urlFor, PortableText } from "../lib/sanity";
import { getClient } from "../lib/sanity.server";
import { useRouter } from "next/router";
import ErrorPage from './ErrorPage';
import HomeComponent from '../components/HomeComponent';
@j2is
j2is / Immer
Created Jun 30, 2021
Immer state management
View Immer
import React, { useState, useMemo, useContext } from "react";
import immer from "immer";
export default function makeStore() {
// This is basically a factory for a new store instance
const loggerActive = false;
// Create a new context for this store instance
const context = React.createContext();
@j2is
j2is / Craft Add Items To Cart
Created Jun 29, 2021
How to add items to the cart, this example is headless but can be modified for a regular setup by also posting a CSRF token.
View Craft Add Items To Cart
import axios from "axios";
async function request(request) {
if (!request) {
return { data: undefined, error: "no request" };
}
const data = typeof FormData !== "undefined" ? new FormData() : {};
if (request.data) {
Object.entries(request.data).forEach(([key, value]) => {
View launch.json
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Next: Chrome",
View useSmoothScroll.js
import {
useRef, useCallback, useEffect, useState
} from 'react';
import smoothscroll from 'smoothscroll-polyfill';
smoothscroll.polyfill();
function useSmoothScroll() {
const scrollRafPending = useRef(false);
const scrollRafInstance = useRef(false);
@j2is
j2is / img.twig
Created Jan 22, 2019
Macro for responsive images
View img.twig
{###
# macros for responsive images
#
# https://straightupcraft.com/articles/responsive-images-with-twig-macros
# https://nystudio107.com/blog/creating-optimized-images-in-craft-cms
#
# usage simple: {{ macro_img.responsive(asset) }}
# usage extra: {{ macro_img.responsive(assetThumbnail, {alt: 'some thumb', class: ['thumb-class'], {style: 'thumb'}}) }}
#}