Skip to content

Instantly share code, notes, and snippets.

View drenther's full-sized avatar
🏠
Working from home

Soumyajit Pathak drenther

🏠
Working from home
128 followers · 116 following
View GitHub Profile
@drenther
drenther / _app.js
Last active July 15, 2018 18:16
Custom App and Document Components
import React from 'react';
import App, { Container } from 'next/app';
import Header from '../components/Header';
import OfflineSupport from '../components/OfflineSupport';
class CustomApp extends App {
render() {
const { Component, pageProps } = this.props;
return (
@drenther
drenther / next.config.js
Last active July 15, 2018 18:17
next.config.js with webpack-pwa-manifest added
const withCSS = require('@zeit/next-css');
const NextWorkboxPlugin = require('next-workbox-webpack-plugin');
const WebpackPwaManifest = require('webpack-pwa-manifest');
const path = require('path');
module.exports = withCSS({
webpack(config, { isServer, buildId, dev }) {
const workboxOptions = {
clientsClaim: true,
@drenther
drenther / Header.js
Last active July 15, 2018 18:18
Header and Nav components
import React, { Component } from 'react';
import Router from 'next/router';
import Head from 'next/head';
import Nav from './Nav';
class Header extends Component {
state = { loading: false };
componentDidMount() {
@drenther
drenther / Image.js
Last active July 15, 2018 18:22
Movie, Image and Oops component
import React, { Fragment } from 'react';
import ProgressiveImage from 'react-progressive-image';
const Image = ({ src, alt, className }) => (
<ProgressiveImage
src={src}
placeholder="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="
>
{(currentSrc, loading) => (
<Fragment>
@drenther
drenther / server.js
Created July 15, 2018 18:28
Custom express server with ssr-caching
const { join } = require('path');
const express = require('express');
const next = require('next');
const cache = require('lru-cache'); // for using least-recently-used based caching
const PORT = 8000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();
@drenther
drenther / index.js
Last active July 17, 2018 17:28
route components under pages
import Head from 'next/head';
import Movie from '../components/Movie';
import Oops from '../components/Oops';
import { getUpcomingMovies } from '../utils/apiCalls';
const Home = ({ movies, error }) => (
<div className="home">
<Head>
@drenther
drenther / webpack.config.module.json
Created July 17, 2018 18:44
Final structure of the server side webpack config's module object
{
"rules": [
{
"test": {},
"include": [
"/path/to/project/next-pwa"
],
"exclude": {},
"use": {
"loader": "next-babel-loader",
@drenther
drenther / pageVisibilityUtils.js
Last active August 22, 2018 20:25
src/pageVisibilityUtils.js for react-page-visibility-example
export const pageVisibilityApi = () => {
let hidden, visibilityChange;
if (typeof document.hidden !== "undefined") {
// Opera 12.10 and Firefox 18 and later support
hidden = "hidden";
visibilityChange = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
@drenther
drenther / VisibilityManager.js
Created August 22, 2018 20:26
VisibilityManager.js for react-page-visibility-example
import { Component } from "react";
import { pageVisibilityApi } from "../pageVisibilityUtils";
const { hidden, visibilityChange } = pageVisibilityApi();
class VisibilityManager extends Component {
state = {
isVisible: true
};
@drenther
drenther / index.js
Last active August 22, 2018 20:26
index.js for Focus driven Video
import React from "react";
import ReactDOM from "react-dom";
import VisiblityManager from "./components/VisibilityManager";
import Video from "./components/Video";
const App = () => (
<VisiblityManager>
{isVisible => <Video active={isVisible} src="https://www.sample-videos.com/video/mp4/480/big_buck_bunny_480p_30mb.mp4" />}
</VisiblityManager>