Skip to content

Instantly share code, notes, and snippets.

@treckstar
treckstar / ContentfulLoader.tsx
Last active April 6, 2023 18:32
Class based next/image loader for Contentful
import React from "react";
import { Image, ImageProps } from "next/image";
import { createClient } from "contentful";
type ContentfulImage = {
fields: {
file: {
url: string;
details: {
image: {
@treckstar
treckstar / ImageLoader.tsx
Created April 6, 2023 18:37
Class based Image loader
import React from "react";
import { Image, ImageProps } from "next/image";
type ImageLoaderProps = Omit<ImageProps, "src"> & {
src: string;
};
class ImageLoader extends React.Component<ImageLoaderProps> {
public loader({ src, width, quality }: ImageLoaderProps): string {
return `${src}?w=${width}&q=${quality || 75}`;
@treckstar
treckstar / ActiveState.tsx
Created April 10, 2023 19:17
Set active class using state & withRouter in TypeScript class based components
import React from 'react';
import { withRouter, Router } from 'next/router';
interface IndexProps {
router: Router;
}
interface IndexState {
activeLink: string;
}
@treckstar
treckstar / UniformSitemap.js
Created April 11, 2023 19:20
Sitemap.xml Generator using next-sitemap, uniformdev, & contentful
// Import required packages and functions
const fs = require('fs');
const { SitemapStream, streamToPromise } = require('sitemap');
const { createGzip } = require('zlib');
const { getSiteMapUrls } = require('@uniformdev/next-jss/server');
// Set up Uniform and Contentful credentials
const UNIFORM_API_KEY = process.env.UNIFORM_API_KEY;
const CONTENTFUL_SPACE_ID = process.env.CONTENTFUL_SPACE_ID;
const CONTENTFUL_ACCESS_TOKEN = process.env.CONTENTFUL_ACCESS_TOKEN;
@treckstar
treckstar / [[...slug]].tsx
Created May 11, 2023 18:59
Next.js TypeScript Localization Proof of Concept for `output: 'export'` builds
import { GetStaticPaths, GetStaticProps } from 'next';
type Locale = 'en-US' | 'es' | 'hm';
type PageData = {
// Define the properties you need for your page data
title: string;
content: string;
};
@treckstar
treckstar / schema.json
Last active May 18, 2023 16:34
Oh My Posh Theme
{
"$schema": "http://json-schema.org/draft-07/schema",
"$id": "https://gist.githubusercontent.com/treckstar/175547806360c7f2c81cc961ad8037f1/raw/treckstar.omp.json",
"type": "object",
"title": "The Oh My Posh theme definition",
"description": "https://ohmyposh.dev/docs/configuration/overview",
"definitions": {
"color": {
"anyOf": [
{