Initial commit

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+.DS_Store
+dist

package.json

@@ -0,0 +1,49 @@
+{
+  "name": "wtf-webpack-starterkit",
+  "version": "1.0.1",
+  "description": "WTF Webpack starterkit",
+  "main": "index.js",
+  "private": true,
+  "scripts": {
+    "start": "webpack-dev-server --config webpack.dev.js --mode development",
+    "build": "webpack --config webpack.prod.js --mode production",
+    "publish": "npm run build && gh-pages -d dist",
+    "generate-icons": "npx pwa-asset-generator ./src/assets/img/logo.svg public/pwa -i ./src/pages/index.html -m ./public/manifest.json  --path-override pwa --type png -b \"#2D2241\""
+  },
+  "keywords": [
+    "Webpack",
+    "boilerplate"
+  ],
+  "author": "Maciek Korsan",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/core": "^7.10.1",
+    "@babel/preset-env": "^7.10.1",
+    "autoprefixer": "^9.8.0",
+    "babel-loader": "^8.1.0",
+    "clean-webpack-plugin": "^3.0.0",
+    "copy-webpack-plugin": "^6.0.1",
+    "core-js": "^3.6.5",
+    "css-loader": "^3.5.3",
+    "file-loader": "^6.0.0",
+    "gh-pages": "^2.2.0",
+    "html-loader": "^1.1.0",
+    "html-webpack-plugin": "^4.3.0",
+    "mini-css-extract-plugin": "^0.9.0",
+    "minimist": "^1.2.3",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "postcss-loader": "^3.0.0",
+    "sass": "^1.26.5",
+    "sass-loader": "^8.0.2",
+    "style-loader": "^1.2.1",
+    "terser-webpack-plugin": "^3.0.2",
+    "webpack": "4.43.0",
+    "webpack-cli": "3.3.11",
+    "webpack-dev-server": "3.11.0",
+    "webpack-merge": "4.2.2",
+    "websocket-extensions": "^0.1.4"
+  },
+  "dependencies": {
+    "normalize.css": "^8.0.1"
+  }
+}

postcss.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require("autoprefixer")],
+};

public/manifest.json

@@ -0,0 +1,24 @@
+{
+  "name": "WTF: PWA",
+  "short_name": "WTF: PWA",
+  "theme_color": "#2D2241",
+  "background_color": "#2D2241",
+  "display": "standalone",
+  "orientation": "portrait",
+  "scope": "/wtf-webpack-starter/",
+  "start_url": "/wtf-webpack-starter/",
+  "icons": [
+    {
+      "src": "pwa/manifest-icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "pwa/manifest-icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable any"
+    }
+  ]
+}

public/robots.txt

@@ -0,0 +1 @@
+User-agent: * Disallow: 

public/service-worker.js

@@ -0,0 +1,55 @@
+var VERSION = '24';
+
+this.addEventListener('install', function(e) {
+  e.waitUntil(caches.open(VERSION).then(cache => {
+    return cache.addAll([]);
+  }))
+});
+
+this.addEventListener('fetch', function(e) {
+  var tryInCachesFirst = caches.open(VERSION).then(cache => {
+    return cache.match(e.request).then(response => {
+      if (!response) {
+        return handleNoCacheMatch(e);
+      }
+      // Update cache record in the background
+      fetchFromNetworkAndCache(e);
+      // Reply with stale data
+      return response
+    });
+  });
+  e.respondWith(tryInCachesFirst);
+});
+
+this.addEventListener('activate', function(e) {
+  e.waitUntil(caches.keys().then(keys => {
+    return Promise.all(keys.map(key => {
+      if (key !== VERSION)
+        return caches.delete(key);
+    }));
+  }));
+});
+
+function fetchFromNetworkAndCache(e) {
+  // DevTools opening will trigger these o-i-c requests, which this SW can't handle.
+  // There's probaly more going on here, but I'd rather just ignore this problem. :)
+  // https://github.com/paulirish/caltrainschedule.io/issues/49
+  if (e.request.cache === 'only-if-cached' && e.request.mode !== 'same-origin') return;
+
+  return fetch(e.request).then(res => {
+    // foreign requests may be res.type === 'opaque' and missing a url
+    if (!res.url) return res;
+    // regardless, we don't want to cache other origin's assets
+    if (new URL(res.url).origin !== location.origin) return res;
+
+    return caches.open(VERSION).then(cache => {
+      // TODO: figure out if the content is new and therefore the page needs a reload.
+      cache.put(e.request, res.clone());
+      return res;
+    });
+  }).catch(err => console.error(e.request.url, err));
+}
+
+function handleNoCacheMatch(e) {
+  return fetchFromNetworkAndCache(e);
+}

readme.md

@@ -0,0 +1,18 @@
+![cover](https://cotenfrontend.pl/img/cover.png)
+
+# WTF Webpack Starter Kit 
+
+Simple toolkit for your static websites development.
+
+## How to use it?
+
+Click on `Use this template` button to generate a new repository based on this starter kit. After that clone it to your computer, go to the project directory in console and type `npm install`.
+
+## Available scripts
+
+`npm run start` - runs development mode
+
+`npm run build` - runs build process for production
+
+`npm run publish` - runs build process and publish the page using `gh-pages` branch
+

src/js/another.js

@@ -0,0 +1 @@
+console.log('hello another');

src/js/index.js

@@ -0,0 +1,9 @@
+import '../scss/main.scss';
+
+// uncomment the lines below to enable PWA
+// import {registerSW} from './pwa.js';
+// registerSW();
+
+/* place your code below */
+
+console.log('HELLO 🚀')

src/js/pwa.js

@@ -0,0 +1,12 @@
+export const registerSW = () => {
+    if ('serviceWorker' in navigator) {
+    window.addEventListener('load', function() {
+    navigator.serviceWorker.register('service-worker.js')
+    .then(function(registration) {
+        console.log('ServiceWorker registration successful with scope: ', registration.scope);
+        }, function(err) {
+        console.log('ServiceWorker registration failed: ', err);
+        });
+    });
+}
+}

src/pages/another.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>WTF Webpack starterkit</title>
+</head>
+<body>
+    <div class="hello"></div>
+    <h1>hello world</h1>
+</body>
+</html>

src/pages/index.html

@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>WTF: Webpack starter kit</title>
+    <meta name="description" content="Your project description" />
+    <!-- Title -->
+    <meta property="og:title" content="" />
+    <!-- OPTIONAL description. 2-4 sentences. -->
+    <meta property="og:description" content="" />
+    <!-- full url with http(s) ie. https://maciejkorsan.github.io/my-repo/ -->
+    <meta property="og:url" content="" />
+    <!-- full url to the image with http(s) ie. https://maciejkorsan.github.io/my-repo/assets/img/fb.png. Facebook suggests at least 1200 x 630. -->
+    <meta
+      property="og:image"
+      content="https://maciejkorsan.com/wtf-gulp-starter/assets/img/cover.png"
+    />
+
+    <!-- uncomment the line below to enable PWA  -->
+    <!-- <link rel="manifest" href="manifest.json" /> -->
+
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="pwa/apple-icon-180.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="167x167"
+      href="pwa/apple-icon-167.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="152x152"
+      href="pwa/apple-icon-152.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="120x120"
+      href="pwa/apple-icon-120.png"
+    />
+
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+
+    <link
+      rel="apple-touch-startup-image"
+      href="pwa/apple-splash-2048-2732.png"
+      media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="pwa/apple-splash-2732-2048.png"
+      media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="pwa/apple-splash-1668-2388.png"
+      media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="pwa/apple-splash-2388-1668.png"
+      media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="pwa/apple-splash-1668-2224.png"
+      media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="pwa/apple-splash-2224-1668.png"
+      media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="pwa/apple-splash-1536-2048.png"
+      media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="pwa/apple-splash-2048-1536.png"
+      media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="pwa/apple-splash-1242-2688.png"
+      media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="pwa/apple-splash-2688-1242.png"
+      media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="pwa/apple-splash-1125-2436.png"
+      media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="pwa/apple-splash-2436-1125.png"
+      media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="pwa/apple-splash-828-1792.png"
+      media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="pwa/apple-splash-1792-828.png"
+      media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="pwa/apple-splash-1242-2208.png"
+      media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="pwa/apple-splash-2208-1242.png"
+      media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="pwa/apple-splash-750-1334.png"
+      media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="pwa/apple-splash-1334-750.png"
+      media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="pwa/apple-splash-640-1136.png"
+      media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="pwa/apple-splash-1136-640.png"
+      media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+    />
+  </head>
+  <body>
+    <div class="hello">
+      <img class="hello__logo" src="../assets/img/logo.svg" alt="WTF " />
+      <span class="hello__circles"></span>
+    </div>
+  </body>
+</html>

src/scss/_variables.scss

@@ -0,0 +1 @@
+$wtf: #2D2241;

src/scss/main.scss

@@ -0,0 +1,13 @@
+@import "~normalize.css";
+
+@import "_variables";
+@import "modules/hello.scss";
+
+body {
+  background: $wtf;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+}