From 41d4665e4974a032c6236e3be60e7b49ab2c39b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Schmelczer=20Andr=C3=A1s?= <schmelczerandras@gmail.com>
Date: Thu, 2 Jan 2020 15:37:34 +0100
Subject: [PATCH] Add minor changes

---
 .idea/workspace.xml                                 | 13 +++++++++----
 package.json                                        |  9 ++++-----
 src/framework/helper.ts                             |  5 ++++-
 src/framework/page.ts                               |  5 ++++-
 src/index.html                                      |  2 +-
 src/model/content.ts                                |  4 ++--
 src/model/portfolio.ts                              |  4 ++--
 src/page/background/background.ts                   |  1 -
 src/page/footer/footer.scss                         |  2 +-
 .../timeline-element/timeline-element.html.ts       |  7 +------
 src/page/timeline/timeline.ts                       |  2 +-
 src/portfolio.ts                                    |  4 ++--
 src/styles.scss                                     |  2 ++
 webpack.config.js                                   |  6 ++++--
 14 files changed, 37 insertions(+), 29 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 3483d2c..106d824 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -5,12 +5,16 @@
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/framework/helper.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/helper.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/framework/page.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/page.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.html" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/page/about/about.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/about/about.scss" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/page/background/background.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/background.html.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/page/background/background.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/background.scss" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/model/content.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/model/content.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/model/portfolio.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/model/portfolio.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/page/background/background.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/background.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/page/background/blob.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/blob.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/page/footer/footer.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/footer/footer.scss" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.html.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/page/timeline/timeline.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/timeline/timeline.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/portfolio.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/portfolio.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/styles.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles.scss" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/webpack.config.js" beforeDir="false" afterPath="$PROJECT_DIR$/webpack.config.js" afterDir="false" />
     </list>
     <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
@@ -112,6 +116,7 @@
       <workItem from="1577639259221" duration="3798000" />
       <workItem from="1577662869335" duration="6536000" />
       <workItem from="1577702567470" duration="3227000" />
+      <workItem from="1577786195424" duration="4310000" />
     </task>
     <servers />
   </component>
diff --git a/package.json b/package.json
index b37d537..d52eb66 100644
--- a/package.json
+++ b/package.json
@@ -28,10 +28,7 @@
     }
   },
   "browserslist": [
-    "last 2 version",
-    "not dead",
-    "iOS >= 9",
-    "> 0.2%"
+    "defaults"
   ],
   "homepage": "https://github.com/schmelczerandras/timeline#readme",
   "devDependencies": {
@@ -39,6 +36,7 @@
     "clean-webpack-plugin": "^3.0.0",
     "css-loader": "^3.4.0",
     "file-loader": "^5.0.2",
+    "html-webpack-inline-source-plugin": "0.0.10",
     "html-webpack-plugin": "^3.2.0",
     "image-webpack-loader": "^6.0.0",
     "mini-css-extract-plugin": "^0.9.0",
@@ -57,6 +55,7 @@
     "typescript": "^3.7.3",
     "webpack": "^4.41.4",
     "webpack-cli": "^3.3.10",
-    "webpack-dev-server": "^3.10.1"
+    "webpack-dev-server": "^3.10.1",
+    "workbox-webpack-plugin": "^4.3.1"
   }
 }
diff --git a/src/framework/helper.ts b/src/framework/helper.ts
index 194d701..d9664d8 100644
--- a/src/framework/helper.ts
+++ b/src/framework/helper.ts
@@ -92,4 +92,7 @@ export const range = ({
 export const last = <T>(list: Array<T>): T =>
   list.length > 0 ? list[list.length - 1] : undefined;
 
-export const isChrome = (): boolean => !!navigator.appVersion.match(/chrome/i);
+export const isChrome = (): boolean =>
+  !!navigator.appVersion.match(/chrome/i) &&
+  // @ts-ignore
+  window.webkitRequestFileSystem !== undefined;
diff --git a/src/framework/page.ts b/src/framework/page.ts
index f70a3ca..0ac18bb 100644
--- a/src/framework/page.ts
+++ b/src/framework/page.ts
@@ -16,7 +16,10 @@ export class Page extends PageElement {
       );
     }
 
-    rootElement.append(...children.map(e => e.getElement()).filter(e => e));
+    children
+      .map(e => e.getElement())
+      .filter(e => e)
+      .forEach(e => rootElement.appendChild(e));
 
     if (isRootPage) {
       this.broadcastEvent({ type: PageEventType.onLoad }, this);
diff --git a/src/index.html b/src/index.html
index 163a888..c746dca 100644
--- a/src/index.html
+++ b/src/index.html
@@ -11,7 +11,7 @@
         <meta property="og:image" content="https://schmelczer.dev/og-image.jpg">
 
         <meta name="description" content="You can view my projects on a timeline.">
-        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
         <meta name="theme-color" content="#AA4465" />
 
         <title>Portfolio - András Schmelczer</title>
diff --git a/src/model/content.ts b/src/model/content.ts
index eca9afd..a1fd3bb 100644
--- a/src/model/content.ts
+++ b/src/model/content.ts
@@ -1,10 +1,10 @@
 import { ResponsiveImage, url } from "./misc";
 
-interface Anchor {
+export type Anchor = {
   type: "a";
   href: url;
   text: string;
-}
+};
 
 export type Video = {
   type: "video";
diff --git a/src/model/portfolio.ts b/src/model/portfolio.ts
index 1b93c3a..4705d83 100644
--- a/src/model/portfolio.ts
+++ b/src/model/portfolio.ts
@@ -1,5 +1,5 @@
 import { url } from "./misc";
-import { Content, Image, Video } from "./content";
+import { Anchor, Content, Image, Video } from "./content";
 
 export interface Portfolio {
   config: Config;
@@ -25,7 +25,7 @@ export interface TimelineElement {
   figure: Image | Video;
   description: string;
   more?: Content;
-  link?: url;
+  link?: Anchor;
 }
 
 export interface Footer {
diff --git a/src/page/background/background.ts b/src/page/background/background.ts
index 4b7ce6c..1184424 100644
--- a/src/page/background/background.ts
+++ b/src/page/background/background.ts
@@ -32,7 +32,6 @@ export class PageBackground extends PageElement {
   protected handleEvent(event: PageEvent, parent: PageElement) {
     if (event.type === PageEventType.onLoad) {
       this.bindListeners(parent);
-      this.resize(parent);
     } else if (event.type === PageEventType.onBodyDimensionsChanged) {
       this.resize(parent, event.data?.deltaHeight);
     }
diff --git a/src/page/footer/footer.scss b/src/page/footer/footer.scss
index 5db0fc4..109ff63 100644
--- a/src/page/footer/footer.scss
+++ b/src/page/footer/footer.scss
@@ -43,7 +43,7 @@ footer#page-footer {
 
     h6 {
       @include insignificant-font();
-      opacity: 0.6;
+      opacity: 0.75;
     }
   }
 }
diff --git a/src/page/timeline/timeline-element/timeline-element.html.ts b/src/page/timeline/timeline-element/timeline-element.html.ts
index 688a737..6bbb223 100644
--- a/src/page/timeline/timeline-element/timeline-element.html.ts
+++ b/src/page/timeline/timeline-element/timeline-element.html.ts
@@ -28,12 +28,7 @@ export const generate = (
                 `
                 : ""
             }
-            ${
-              link
-                ? `
-                <a href="${link}" target="_blank">${link}</a>`
-                : ""
-            }
+            ${link ? PageContent.parseTypedContent(link) : ""}
         </div>
     </section>
 `;
diff --git a/src/page/timeline/timeline.ts b/src/page/timeline/timeline.ts
index 82123b2..1b9594d 100644
--- a/src/page/timeline/timeline.ts
+++ b/src/page/timeline/timeline.ts
@@ -14,7 +14,7 @@ export class PageTimeline extends PageElement {
     const elements = timeline.map(
       e => new PageTimelineElement(e, showMore, showLess)
     );
-    root.append(...elements.map(e => e.getElement()));
+    elements.map(e => e.getElement()).forEach(e => root.appendChild(e));
     super(elements);
     this.setElement(root);
   }
diff --git a/src/portfolio.ts b/src/portfolio.ts
index 421d733..0a9b419 100644
--- a/src/portfolio.ts
+++ b/src/portfolio.ts
@@ -177,7 +177,7 @@ export const portfolio: Portfolio = {
         alt: `a picture of the website`
       },
       description: `A simple web page where you can view my photos.`,
-      link: `schmelczer.dev/photos`
+      link: { type: `a`, href: `photos`, text: `schmelczer.dev/photos` }
     },
     {
       date: `2016 spring`,
@@ -203,7 +203,7 @@ export const portfolio: Portfolio = {
   footer: {
     title: `Learn more`,
     cv,
-    email: `andras@schmelczer.dev`,
+    email: `schmelczerandras@gmail.com`,
     cvName: `Curriculum vitae`,
     lastEditName: `Last modified on `,
     lastEdit: new Date(2019, 11, 29) // months are 0 indexed
diff --git a/src/styles.scss b/src/styles.scss
index 93ac0fc..fc20af0 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -27,6 +27,8 @@ html {
 body {
   @include main-font();
   height: 100%;
+  padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px)
+    env(safe-area-inset-bottom, 20px) env(safe-area-inset-left, 20px);
 
   & > main {
     height: 100%;
diff --git a/webpack.config.js b/webpack.config.js
index 39563cc..e98696f 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -4,6 +4,7 @@ const { CleanWebpackPlugin } = require("clean-webpack-plugin");
 const TerserJSPlugin = require("terser-webpack-plugin");
 const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const HtmlWebpackInlineSourcePlugin = require("html-webpack-inline-source-plugin");
 
 const isProduction = process.env.NODE_ENV === "production";
 
@@ -20,11 +21,12 @@ module.exports = {
   plugins: [
     new CleanWebpackPlugin(),
     new HtmlWebpackPlugin({
-      hash: true,
       xhtml: true,
       minify: true,
-      template: "./src/index.html"
+      template: "./src/index.html",
+      inlineSource: ".(js|css)$"
     }),
+    new HtmlWebpackInlineSourcePlugin(),
     new MiniCssExtractPlugin({
       filename: "[name].[contenthash].css",
       chunkFilename: "[id].[contenthash].css"