pythonpizza · marcoacierno · May 9, 2019 · May 12, 2019 · May 12, 2019 · May 12, 2019
diff --git a/index.ejs b/index.ejs
diff --git a/index.html b/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>Python Pizza</title>
+        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=2" />
+        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=2" />
+        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=2" />
+        <link rel="manifest" href="/site.webmanifest" />
+        <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#ed4337" />
+        <meta name="msapplication-TileColor" content="#ed4337" />
+        <meta name="theme-color" content="#ed4337" />
+
+        <meta
+            name="description"
+            content="Python.pizza è un evento gratuito che ha lo scopo di portare le ultime tendenze Python organizzando talk con speakers provenienti da tutta Italia e di invogliare le persone a creare community locali per accelerare lo sviluppo tecnologico nel sud Italia."
+        />
+
+        <meta name="twitter:card" value="summary_large_image" />
+        <meta property="og:title" content="Python Pizza" />
+        <meta property="og:type" content="website" />
+        <meta property="og:url" content="https://python.pizza/" />
+        <meta property="og:image" content="https://python.pizza/social-image.jpg?v=2" />
+        <meta property="og:image:width" content="1640" />
+        <meta property="og:image:height" content="624" />
+        <meta
+            property="og:description"
+            content="Python.pizza è un evento gratuito che ha lo scopo di portare le ultime tendenze Python organizzando talk con speakers provenienti da tutta Italia e di invogliare le persone a creare community locali per accelerare lo sviluppo tecnologico nel sud Italia."
+        />
+    </head>
+
+    <body>
+        <noscript>
+            Attiva Javascript per visitare questo sito / You need to enable JavaScript to run this app.
+        </noscript>
+
+        <div id="app"></div>
+
+        <!-- Global site tag (gtag.js) - Google Analytics -->
+        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-123182070-1"></script>
+        <script type="text/javascript">
+            window.dataLayer = window.dataLayer || [];
+
+            function gtag() {
+                dataLayer.push(arguments);
+            }
+            gtag('js', new Date());
+            gtag('config', 'UA-123182070-1');
+        </script>
+    </body>
+</html>
diff --git a/package.json b/package.json
@@ -1,37 +1,42 @@
 {
     "name": "python.pizza",
-    "version": "2018",
+    "version": "2019",
     "main": "src/index.js",
     "license": "MIT",
     "scripts": {
-        "dev": "./node_modules/.bin/poi develop",
-        "build": "./node_modules/.bin/poi build"
+        "dev": "poi --serve",
+        "build": "poi --prod"
     },
     "devDependencies": {
-        "@poi/plugin-typescript": "10.2.0",
-        "@types/react": "16.3.18",
-        "@types/react-dom": "16.0.6",
-        "eslint": "^4.5.0",
-        "eslint-config-synacor": "^1.1.0",
+        "@poi/plugin-offline": "^10.0.1",
+        "@poi/plugin-pwa": "^12.0.3",
+        "@poi/plugin-typescript": "12.2.1",
+        "@types/react": "16.8.17",
+        "@types/react-dom": "16.8.4",
+        "eslint": "^5.16.0",
+        "eslint-config-synacor": "^3.0.4",
         "if-env": "^1.0.0",
-        "poi": "10.2.9",
-        "react-hot-loader": "4.3.3"
+        "poi": "12.6.8",
+        "react-hot-loader": "4.8.4"
     },
     "dependencies": {
-        "@types/classnames": "^2.2.6",
-        "@types/smoothscroll-polyfill": "0.3.0",
+        "@types/classnames": "^2.2.7",
+        "@types/smoothscroll-polyfill": "0.3.1",
+        "babel-preset-poi": "^10.0.2",
         "classnames": "^2.2.5",
-        "eslint-plugin-typescript": "0.12.0",
-        "postcss-custom-media": "6.0.0",
-        "postcss-nested": "3.0.0",
-        "prettier": "^1.6.0",
-        "raw-loader": "0.5.1",
-        "react": "16.4.1",
-        "react-dom": "16.4.1",
+        "eslint-plugin-typescript": "0.14.0",
+        "offline-plugin": "^5.0.7",
+        "postcss-custom-media": "7.0.8",
+        "postcss-nested": "4.1.2",
+        "prettier": "^1.17.0",
+        "raw-loader": "2.0.0",
+        "react": "16.8.6",
+        "react-dom": "16.8.6",
         "react-svg-inline": "2.1.1",
-        "smoothscroll-polyfill": "0.4.3",
-        "tslint": "5.10.0",
-        "typescript": "2.9.2",
-        "typescript-eslint-parser": "16.0.0"
+        "register-service-worker": "^1.6.2",
+        "smoothscroll-polyfill": "0.4.4",
+        "tslint": "5.16.0",
+        "typescript": "3.4.5",
+        "typescript-eslint-parser": "22.0.0"
     }
 }
diff --git a/poi.config.js b/poi.config.js
@@ -3,11 +3,29 @@ const path = require('path');
 const root = path.resolve(__dirname);
 
 module.exports = {
-    outDir: 'build/',
+    entry: 'src/index.js',
+    output: {
+        dir: 'build/',
+        clean: true,
+        html: {
+            template: './index.html',
+        },
+    },
     plugins: [
-        require('@poi/plugin-typescript')({
-            vue: false,
-        }),
+        {
+            resolve: '@poi/plugin-typescript',
+            options: {
+                vue: false,
+            },
+        },
+        {
+            resolve: '@poi/plugin-offline',
+            options: {},
+        },
+        {
+            resolve: '@poi/plugin-pwa',
+            options: {},
+        },
     ],
     configureWebpack(config, context) {
         config.resolve.extensions = [...config.resolve.extensions, '.tsx'];
@@ -21,6 +39,7 @@ module.exports = {
             }
 
             rule.use[0].loader = 'raw-loader';
+            rule.use[0].options = {};
         }
         return config;
     },

diff --git a/postcss.config.js b/postcss.config.js
@@ -2,12 +2,7 @@ module.exports = {
     plugins: {
         'postcss-nested': {},
         'postcss-custom-media': {
-            extensions: {
-                '--mobile': '(min-width: 480px)',
-                '--tablet': '(min-width: 769px)',
-                '--laptop': '(min-width: 1025px)',
-            },
-            appendExtensions: true,
+            importFrom: './src/Components/App/breakpoints.css',
         },
     },
-};
+};
diff --git a/src/Components/AlertBadge/index.css b/src/Components/AlertBadge/index.css
@@ -0,0 +1,22 @@
+.alert-badge {
+    position: fixed;
+    bottom: 2rem;
+    left: 2rem;
+
+    padding: 2.5rem 1.5rem;
+    font-size: 1.6rem;
+    z-index: 10;
+    border-radius: 0.4rem;
+
+    background: #202124;
+    color: var(--white);
+
+    transform: translateY(100%);
+    opacity: 0;
+    transition: transform .2s ease-in-out, opacity .2s ease-in-out;
+
+    &.visible {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
diff --git a/src/Components/AlertBadge/index.tsx b/src/Components/AlertBadge/index.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react';
+import * as cn from 'classnames';
+
+const { useEffect, useState } = React;
+
+import './index.css';
+
+type Props = {
+    message: string | null;
+};
+
+const AlertBadge: React.SFC<Props> = props => {
+    const [isVisible, setIsVisible] = useState(false);
+    const badger = () => {
+        if (!props.message) {
+            return;
+        }
+
+        setIsVisible(true);
+
+        setTimeout(() => {
+            setIsVisible(false);
+        }, 5000);
+    };
+    useEffect(badger, []);
+    useEffect(badger, [props.message]);
+
+    const classes = cn('alert-badge', { visible: isVisible });
+    return <div className={classes}>{props.message}</div>;
+};
+
+export default AlertBadge;
diff --git a/src/Components/App/breakpoints.css b/src/Components/App/breakpoints.css
@@ -0,0 +1,3 @@
+@custom-media --mobile (min-width: 480px);
+@custom-media --tablet (min-width: 769px);
+@custom-media --laptop (min-width: 1025px);
diff --git a/src/Components/App/index.tsx b/src/Components/App/index.tsx
@@ -1,32 +1,71 @@
 import * as React from 'react';
-
 import * as smoothscroll from 'smoothscroll-polyfill';
+import { register } from 'register-service-worker';
 
 import Home from '@/Components/Home';
 import Header from '@/Components/Header';
 import Footer from '@/Components/Footer';
+import AlertBadge from '@/Components/AlertBadge';
 
 import './reset.css';
 import './theme.css';
 import './typography.css';
 
 smoothscroll.polyfill();
 
-export default class App extends React.Component {
+type State = {
+    badgeMessage: string | null;
+};
+
+export default class App extends React.Component<{}, State> {
+    state = {
+        badgeMessage: null,
+    };
+
     componentWillMount() {
-        if ('serviceWorker' in navigator) {
-            navigator.serviceWorker.ready.then(registration => {
-                registration.unregister();
+        const showMessage = (message: string) => {
+            this.setState({
+                badgeMessage: message,
             });
-        }
+        };
+
+        register(`${process.env.PUBLIC_URL}service-worker.js`, {
+            ready(registration) {
+                console.log('Service worker is active.');
+            },
+            registered(registration) {
+                console.log('Service worker has been registered.');
+            },
+            cached(registration) {
+                showMessage('🎉 You can now visit the website while offline!');
+                console.log('Content has been cached for offline use.');
+            },
+            updatefound(registration) {
+                console.log('New content is downloading.');
+            },
+            updated(registration) {
+                showMessage('✨ Refresh the page to see the new changes!');
+                console.log('New content is available; please refresh.');
+            },
+            offline() {
+                showMessage('⌛️ No internet connection! The schedule might be out of date');
+                console.log('No internet connection found. App is running in offline mode.');
+            },
+            error(error) {
+                console.error('Error during service worker registration:', error);
+            },
+        });
     }
 
     render() {
+        const { badgeMessage } = this.state;
+
         return (
             <div>
                 <Header />
                 <Home />
                 <Footer />
+                <AlertBadge message={badgeMessage} />
             </div>
         );
     }

diff --git a/src/Components/Header/index.tsx b/src/Components/Header/index.tsx
@@ -27,7 +27,7 @@ export default class Header extends React.Component {
         return (
             <div className="header">
                 <Container size={Sizes.large}>
-                    <SVGInline className="header--logo" svg={require('Assets/logo.svg')} />
+                    <SVGInline className="header--logo" svg={require('Assets/logo.svg').default} />
                     <ul className="header--links">
                         <li>
                             <a onClick={this.onNavClick} href="#about" data-destination="about">

diff --git a/src/Components/Hero/index.tsx b/src/Components/Hero/index.tsx
@@ -11,11 +11,11 @@ export default class Hero extends React.Component {
                 <div className="hero--info">
                     <h1>Python Pizza</h1>
                     <h2>
-                        <a href="https://www.google.com/maps/place/Palazzo+delle+Arti+Napoli/@40.8368426,14.2346782,17z/data=!3m1!4b1!4m5!3m4!1s0x133b08ffaf19f077:0x29aeaac14bce93b2!8m2!3d40.8368426!4d14.2368669" target="_blank" rel="noopener noreferrer">
-                            Napoli @ PAN
+                        <a href="#" target="_blank" rel="noopener noreferrer">
+                            Napoli
                         </a>
                     </h2>
-                    <h2>15 Settembre 2018</h2>
+                    <h2>14 Settembre 2019</h2>
                 </div>
 
                 <Wave />