Merge

.idea/workspace.xml

@@ -15,9 +15,6 @@
     <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
     <option name="LAST_RESOLUTION" value="IGNORE" />
   </component>
-  <component name="FavoritesManager">
-    <favorites_list name="CompiledCV" />
-  </component>
   <component name="FileTemplateManagerImpl">
     <option name="RECENT_TEMPLATES">
       <list>

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"
   }
 }

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);

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>

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";

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 {

src/page/background/background.ts

@@ -33,7 +33,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);
     }

src/page/footer/footer.scss

@@ -43,7 +43,7 @@ footer#page-footer {
 
     h6 {
       @include insignificant-font();
-      opacity: 0.6;
+      opacity: 0.75;
     }
   }
 }

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>
 `;

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);
   }

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

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%;

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"