abedzantout

import React, {useEffect, useState} from 'react';
import {NextPage} from 'next';
import {useRouter} from 'next/router'

import {ContentfulService} from '../core/contentful';

import {BlogPost} from '../interfaces/post';

import Layout from '../shared/components/layout';
import Card from '../shared/components/card';

abedzantout

// next.config.js

const withCSS = require('@zeit/next-css');

module.exports = withCSS({});

abedzantout

const path = require('path');
const Dotenv = require('dotenv-webpack');

const next_config = {
  webpack: config => {
    config.plugins = config.plugins || [];

    config.plugins = [
      ...config.plugins,
      // Read the .env file

abedzantout

import App from 'next/app';
import React from 'react';
import Router from 'next/router';

import {trackPageView} from '../core/gtag';

Router.events.on('routeChangeComplete', url => trackPageView(url));

class MyApp extends App {
    render() {

abedzantout

import React, { Fragment } from 'react';
import Document, { Head, Main, NextScript } from 'next/document';

import { GA_TRACKING_ID } from '../core/gtag';

type Props = {
    isProduction: boolean,
}
export default class extends Document<Props> {
    static async getInitialProps(ctx) {

abedzantout

// Add your GA tracking id here
export const GA_TRACKING_ID = '';

const isProduction = process.env.NODE_ENV.toLowerCase() === 'production';

// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
export const trackPageView = url => {
  if (isProduction) {
    // @ts-ignore
    window.gtag('config', GA_TRACKING_ID, {

abedzantout

.paginator {
    display: flex;
    justify-content: center;
    align-content: center;
}

.paginator__page-number {
    padding: 0.5rem 1rem;
    margin: auto 0.5rem;

abedzantout

import React, {FunctionComponent, Fragment, useState, useEffect} from 'react';
import './styles.css';

type Props = {
    skip?: number;
    range: number[];
    handlePaginationChange: Function;
}
const PaginatorComponent: FunctionComponent<Props> = ({skip, range, handlePaginationChange}) => {
    skip = !!skip ? skip : 0;

abedzantout

// next.config.js

const withCSS = require('@zeit/next-css');
const path = require('path');
const Dotenv = require('dotenv-webpack');
const { generateAllArticles } = require('./utils/helpers');

const next_config = {
  webpack: config => {
    config.plugins = config.plugins || [];

abedzantout

.card {
    display: flex;
    flex-direction: column;

    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #e5e5e5;

    overflow: hidden;