Skip to content

Instantly share code, notes, and snippets.

View crisu83's full-sized avatar
🎩
Coding

Christoffer Niska crisu83

🎩
Coding
View GitHub Profile
@crisu83
crisu83 / ci.yml
Last active April 8, 2021 08:15
CI workflow for GitHub Actions. Paste the contents in .github/workflows/ci.yml to enable it for your repository.
name: CI
on: [push]
jobs:
schema:
name: Schema
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@master
- name: Inspect Schema
@crisu83
crisu83 / draggable.ts
Last active January 7, 2021 10:14
Draggable plugin for Chart.js 3 written in TypeScript.
import {Chart as ChartJsChart, ChartOptions} from 'chart.js';
import {D3DragEvent, drag} from 'd3-drag';
import {select} from 'd3-selection';
type ChartElement = any;
type Chart = ChartJsChart & {options: ChartOptions & DraggableOptions};
type DragEvent = D3DragEvent<ChartElement, number, number>;
enum DragEventType {
Start = 'start',
@crisu83
crisu83 / 99-bottles.ts
Last active September 5, 2022 07:31
My solution for generating the lyrics for the song "99 bottles on the wall" written in TypeScript.
const capitalize = (word: string) => word[0].toUpperCase() + word.substr(1);
const pluralize = (word: string, amount: number) => {
if (amount > 1) return `${amount} ${word}s`;
if (amount === 1) return `${amount} ${word}`;
return `no more ${word}s`;
};
const countBottles = (amount: number) =>
`${pluralize("bottle", amount)} of beer`;
@crisu83
crisu83 / use-date-formatting.ts
Last active December 21, 2020 15:03
A custom date formatting hook for date-fns in next.js apps written in TypeScript.
import {
format,
formatDistance,
formatDistanceStrict,
formatRelative,
} from 'date-fns';
import {useRouter} from 'next/router';
import {useEffect, useState} from 'react';
const noop = () => {};
@crisu83
crisu83 / graphql.ts
Created December 8, 2020 18:58
GraphQL Next.js API route with `@graphql-tools` schema stitching
import {isProduction} from '@/utils';
import {Executor} from '@graphql-tools/delegate';
import {makeExecutableSchema} from '@graphql-tools/schema';
import {stitchSchemas} from '@graphql-tools/stitch';
import {introspectSchema, wrapSchema} from '@graphql-tools/wrap';
import {graphqlHTTP} from 'express-graphql';
import {GraphQLSchema, print} from 'graphql';
import fetch from 'isomorphic-unfetch';
import {NextApiRequest, NextApiResponse} from 'next';
import getConfig from 'next/config';
module.exports = {
extends: ['./node_modules/gts'],
overrides: [
{
extends: ['plugin:react/recommended', 'plugin:react-hooks/recommended'],
files: ['*.ts', '*.tsx'],
rules: {
'@typescript-eslint/no-explicit-any': 'off',
'react-hooks/exhaustive-deps': 'warn',
'react-hooks/rules-of-hooks': 'error',
@crisu83
crisu83 / generate-favicons.ts
Created December 8, 2020 09:31
Script for generating favicons from an image file.
// eslint-disable-next-line node/no-unpublished-import
import favicons from 'favicons';
import fs from 'fs';
const [, , source] = process.argv;
if (!source) {
throw new Error('You need to specify a `source`.');
}
@crisu83
crisu83 / pull-schema.ts
Last active December 8, 2020 09:28
Scripts for pulling and pushing schema to and from DGraph.
import {writeFileSync} from 'fs';
import fetch from 'isomorphic-unfetch';
const [, , schemaPath] = process.argv;
const dgraphUrl = process.env.DGRAPH_URL;
const dgraphToken = process.env.DGRAPH_TOKEN;
if (!dgraphUrl) {
throw new Error('You need to specify `DGRAPH_URL` in your environment.');
@crisu83
crisu83 / loader-example.tsx
Last active December 4, 2020 15:30
React loader implementation
import React from 'react';
export default function LoaderExample() {
comst {data, loading, error} = useMyQuery(); // Implementation specific
const {Loader, data: myData} = useLoader({
data,
errorMessage: error?.message,
isLoading: loading,
});
return (
@crisu83
crisu83 / modal-example.tsx
Last active December 10, 2020 11:54
React Portal implementation
import React from 'react';
import {Button} from '@/design-system';
import {useModal} from './modal';
export default function ModalExample() {
const {Modal, closePortal, openPortal} = useModal();
return (
<>
<Button onClick={openPortal}>Open modal</Button>
<Modal>