Skip to content

Instantly share code, notes, and snippets.


Christoffer Niska crisu83

View GitHub Profile
crisu83 / ci.yml
Last active Apr 8, 2021
CI workflow for GitHub Actions. Paste the contents in .github/workflows/ci.yml to enable it for your repository.
View ci.yml
name: CI
on: [push]
name: Schema
runs-on: ubuntu-latest
- name: Checkout
uses: actions/checkout@master
- name: Inspect Schema
crisu83 / draggable.ts
Last active Jan 7, 2021
Draggable plugin for Chart.js 3 written in TypeScript.
View draggable.ts
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 / 99-bottles.ts
Last active Jan 3, 2021
My solution for generating the lyrics for the song "99 bottles on the wall" written in TypeScript.
View 99-bottles.ts
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 / use-date-formatting.ts
Last active Dec 21, 2020
A custom date formatting hook for date-fns in next.js apps written in TypeScript.
View use-date-formatting.ts
import {
} from 'date-fns';
import {useRouter} from 'next/router';
import {useEffect, useState} from 'react';
const noop = () => {};
crisu83 / graphql.ts
Created Dec 8, 2020
GraphQL Next.js API route with `@graphql-tools` schema stitching
View graphql.ts
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';
View .eslintrc.js
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 / generate-favicons.ts
Created Dec 8, 2020
Script for generating favicons from an image file.
View generate-favicons.ts
// 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 / pull-schema.ts
Last active Dec 8, 2020
Scripts for pulling and pushing schema to and from DGraph.
View pull-schema.ts
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 / loader-example.tsx
Last active Dec 4, 2020
React loader implementation
View loader-example.tsx
import React from 'react';
export default function LoaderExample() {
comst {data, loading, error} = useMyQuery(); // Implementation specific
const {Loader, data: myData} = useLoader({
errorMessage: error?.message,
isLoading: loading,
return (
crisu83 / modal-example.tsx
Last active Dec 10, 2020
React Portal implementation
View modal-example.tsx
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>