Skip to content

Instantly share code, notes, and snippets.

Avatar
:electron:
Force be with you.

Melih Yumak hadnazzar

:electron:
Force be with you.
View GitHub Profile
@hadnazzar
hadnazzar / index.tsx
Created Aug 12, 2020
Nextjs typescript layout index page
View index.tsx
import Link from 'next/link'
import Layout from '../components/Layout'
const IndexPage = () => (
<Layout title="Home | Next.js + TypeScript Example">
<h1>Hello Next.js 👋</h1>
<p>
<Link href="/about">
<a>About</a>
</Link>
@hadnazzar
hadnazzar / Layout.tsx
Created Aug 12, 2020
next layout component with Typescript
View Layout.tsx
import React, { ReactNode } from 'react'
import Link from 'next/link'
import Head from 'next/head'
type Props = {
children?: ReactNode
title?: string
}
const Layout = ({ children, title = 'This is the default title' }: Props) => (
@hadnazzar
hadnazzar / tsconfig.json
Created Aug 12, 2020
nextjs tsconfig.json
View tsconfig.json
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
View social-media-cards.html
<head>
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@flickr" />
<meta name="twitter:title" content="Small Island Developing States Photo Submission" />
<meta name="twitter:description" content="View the album on Flickr." />
<meta name="twitter:image" content="https://farm6.staticflickr.com/5510/14338202952_93595258ff_z.jpg" />
<meta property="og:url" content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" />
<meta property="og:type" content="article" />
<meta property="og:title" content="When Great Minds Don't Think Alike" />
View scatter.js
import React from 'react';
import {Scatter} from 'react-chartjs-2';
const data = {
labels: ['Scatter'],
datasets: [
{
label: 'My First dataset',
fill: false,
backgroundColor: 'rgba(75,192,192,0.4)',
View radar.js
import React from 'react';
import {Radar} from 'react-chartjs-2';
const data = {
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
datasets: [
{
label: 'My First dataset',
backgroundColor: 'rgba(179,181,198,0.2)',
borderColor: 'rgba(179,181,198,1)',
View polar.js
import React from 'react';
import {Polar} from 'react-chartjs-2';
const data = {
datasets: [{
data: [
11,
16,
7,
3,
View pie.js
import React from 'react';
import {Line, Pie} from 'react-chartjs-2';
const data = {
labels: [
'Red',
'Blue',
'Yellow'
],
datasets: [{
View line.js
import React from 'react';
import {Line} from 'react-chartjs-2';
const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
fill: false,
lineTension: 0.1,
View horizontalBar.js
import React from 'react';
import {HorizontalBar} from 'react-chartjs-2';
const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
datasets: [
{
label: 'Dataset',
backgroundColor: 'rgba(255,99,132,0.2)',
borderColor: 'rgb(11,227,210)',