Add favicon support

This commit is contained in:
Schmelczer András 2019-12-23 17:36:43 +01:00
parent dbb48fbde6
commit 29e1546eb2
27 changed files with 92 additions and 109 deletions

62
.idea/workspace.xml generated
View file

@ -2,33 +2,33 @@
<project version="4">
<component name="ChangeListManager">
<list default="true" id="8edc47ab-1265-4111-9771-536b24cc9310" name="Default Changelist" comment="">
<change afterPath="$PROJECT_DIR$/src/page/main/main.html.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/page/main/main.scss" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/page/main/main.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" 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.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/main/about/about.html.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/about/about.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/main/about/about.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/about/about.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/main/about/about.ts" 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/page/background/background.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/background.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/content/content.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/main/content/content.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/content/content.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/main/content/content.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/footer/footer.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/main/footer/footer.html.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/footer/footer.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/main/footer/footer.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/footer/footer.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/main/footer/footer.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/image-viewer/image-viewer.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/main/image-viewer/image-viewer.html.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/image-viewer/image-viewer.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/main/image-viewer/image-viewer.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/image-viewer/image-viewer.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/main/image-viewer/image-viewer.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/index.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/main/timeline/timeline-element/timeline-element.html.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/main/timeline/timeline-element/timeline-element.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/main/timeline/timeline-element/timeline-element.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/timeline/timeline.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/main/timeline/timeline.html.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/timeline/timeline.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/main/timeline/timeline.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/timeline/timeline.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/main/timeline/timeline.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/main/about/about.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/about/about.html.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/main/about/about.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/about/about.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/main/about/about.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/about/about.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/main/content/content.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/content/content.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/main/content/content.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/content/content.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/main/footer/footer.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/footer/footer.html.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/main/footer/footer.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/footer/footer.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/main/footer/footer.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/footer/footer.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/main/image-viewer/image-viewer.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/image-viewer/image-viewer.html.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/main/image-viewer/image-viewer.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/image-viewer/image-viewer.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/main/image-viewer/image-viewer.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/image-viewer/image-viewer.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/main/main.html.ts" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/main/main.scss" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/main/main.ts" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/main/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/main/timeline/timeline-element/timeline-element.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/main/timeline/timeline-element/timeline-element.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/main/timeline/timeline.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/timeline/timeline.html.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/main/timeline/timeline.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/timeline/timeline.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/main/timeline/timeline.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/timeline/timeline.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/static/favicon.ico" beforeDir="false" afterPath="$PROJECT_DIR$/src/static/no-change/favicon.ico" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/static/og-image.jpg" beforeDir="false" afterPath="$PROJECT_DIR$/src/static/no-change/og-image.jpg" 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" />
<option name="SHOW_DIALOG" value="false" />
@ -68,17 +68,17 @@
<property name="ts.external.directory.path" value="C:\Projects\portfolio\CompiledCV\node_modules\typescript\lib" />
</component>
<component name="RecentsManager">
<key name="MoveFile.RECENT_KEYS">
<recent name="C:\Projects\portfolio\CompiledCV\src\page\main" />
<recent name="C:\Projects\portfolio\CompiledCV\src\static\media" />
<recent name="C:\Projects\portfolio\CompiledCV\src\static" />
<recent name="C:\Projects\portfolio\CompiledCV\src\static\fonts" />
<recent name="C:\Projects\portfolio\CompiledCV\src\page\footer" />
</key>
<key name="CopyFile.RECENT_KEYS">
<recent name="C:\Projects\portfolio\CompiledCV\src\static\icons" />
<recent name="$PROJECT_DIR$" />
</key>
<key name="MoveFile.RECENT_KEYS">
<recent name="C:\Projects\portfolio\CompiledCV\src\static\no-change" />
<recent name="C:\Projects\portfolio\CompiledCV\src\page\timeline" />
<recent name="C:\Projects\portfolio\CompiledCV\src\page" />
<recent name="C:\Projects\portfolio\CompiledCV\src\page\main" />
<recent name="C:\Projects\portfolio\CompiledCV\src\static\media" />
</key>
</component>
<component name="RunDashboard">
<option name="ruleStates">

View file

@ -1,3 +1,6 @@
import "./static/no-change/favicon.ico";
import "./static/no-change/og-image.jpg";
import "./styles.scss";
import { create } from "./page/index";

View file

@ -1,5 +1,5 @@
import { Header } from "../../../model/portfolio";
import { html } from "../../../model/misc";
import { Header } from "../../model/portfolio";
import { html } from "../../model/misc";
import "./about.scss";
export const generate = (

View file

@ -1,5 +1,5 @@
@import "../../../style/mixins";
@import "../../../style/vars";
@import "../../style/mixins";
@import "../../style/vars";
#about {
margin-top: $normal-margin;

View file

@ -1,7 +1,7 @@
import { PageContent } from "../content/content";
import { Header } from "../../../model/portfolio";
import { PageElement } from "../../../framework/page-element";
import { createElement } from "../../../framework/element-factory";
import { Header } from "../../model/portfolio";
import { PageElement } from "../../framework/page-element";
import { createElement } from "../../framework/element-factory";
import { generate } from "./about.html";

View file

@ -1,4 +1,4 @@
@import "../../../style/vars";
@import "../../style/vars";
.content {
margin-top: $small-margin;

View file

@ -1,7 +1,7 @@
import { Content, TypedContent } from "../../../model/content";
import { Content, TypedContent } from "../../model/content";
import "./content.scss";
import { PageElement } from "../../../framework/page-element";
import { createElement } from "../../../framework/element-factory";
import { PageElement } from "../../framework/page-element";
import { createElement } from "../../framework/element-factory";
export class PageContent extends PageElement {
private static isTyped(content): content is TypedContent {

View file

@ -1,5 +1,5 @@
import { Footer } from "../../../model/portfolio";
import { html } from "../../../model/misc";
import { Footer } from "../../model/portfolio";
import { html } from "../../model/misc";
import "./footer.scss";
export const generate = ({ email, cv }: Footer, cvName: string): html => `

View file

@ -1,5 +1,5 @@
@import "../../../style/mixins";
@import "../../../style/vars";
@import "../../style/mixins";
@import "../../style/vars";
footer {
@include card();

View file

@ -1,6 +1,6 @@
import { Footer } from "../../../model/portfolio";
import { PageElement } from "../../../framework/page-element";
import { createElement } from "../../../framework/element-factory";
import { Footer } from "../../model/portfolio";
import { PageElement } from "../../framework/page-element";
import { createElement } from "../../framework/element-factory";
import { generate } from "./footer.html";

View file

@ -1,5 +1,5 @@
import { html } from "../../../model/misc";
import cancel from "../../../static/icons/cancel.svg";
import { html } from "../../model/misc";
import cancel from "../../static/icons/cancel.svg";
import "./image-viewer.scss";
export const generate = (): html => `

View file

@ -1,5 +1,5 @@
@import "../../../style/vars";
@import "../../../style/mixins";
@import "../../style/vars";
@import "../../style/mixins";
.photo-viewer {
@include center-children();

View file

@ -1,5 +1,5 @@
import { createElement } from "../../../framework/element-factory";
import { PageElement } from "../../../framework/page-element";
import { createElement } from "../../framework/element-factory";
import { PageElement } from "../../framework/page-element";
import { generate } from "./image-viewer.html";

View file

@ -1,15 +1,21 @@
import { Portfolio } from "../model/portfolio";
import { PageElement } from "../framework/page-element";
import { PageBackground } from "./background/background";
import { PageMain } from "./main/main";
import { PageHeader } from "./about/about";
import { PageTimeline } from "./timeline/timeline";
import { PageFooter } from "./footer/footer";
import { PageImageViewer } from "./image-viewer/image-viewer";
export const create = (portfolio: Portfolio) => {
document.title = portfolio.header.name;
export const create = ({ config, header, timeline, footer }: Portfolio) => {
document.title = header.name;
const pageElements: Array<PageElement> = [
new PageBackground(0.1, 200, 140, 0.4, "#fff9e0aa", -15),
new PageBackground(0.15, 300, 80, 0.3, "#ffd6d6aa", -10),
new PageMain(portfolio)
new PageHeader(header, config.aPictureOf),
new PageTimeline(timeline, config.showMore, config.showLess),
new PageFooter(footer, config.cvName),
new PageImageViewer()
];
const root = document.body.querySelector("main");

View file

@ -1,6 +0,0 @@
import { html } from "../../model/misc";
import "./main.scss";
export const generate = (): html => `
<article id="main"></article>
`;

View file

@ -1,6 +0,0 @@
@import "../../style/vars";
article#main {
width: $body-width;
margin: auto;
}

View file

@ -1,25 +0,0 @@
import { PageElement } from "../../framework/page-element";
import { createElement } from "../../framework/element-factory";
import { generate } from "./main.html";
import { Portfolio } from "../../model/portfolio";
import { PageHeader } from "./about/about";
import { PageTimeline } from "./timeline/timeline";
import { PageFooter } from "./footer/footer";
import { PageImageViewer } from "./image-viewer/image-viewer";
export class PageMain extends PageElement {
constructor({ config, header, timeline, footer }: Portfolio) {
const root = createElement(generate());
const pageElements: Array<PageElement> = [
new PageHeader(header, config.aPictureOf),
new PageTimeline(timeline, config.showMore, config.showLess),
new PageFooter(footer, config.cvName),
new PageImageViewer()
];
root.append(...pageElements.map(e => e.getElement()));
super(pageElements);
this.setElement(root);
}
}

View file

@ -1,5 +1,5 @@
import { TimelineElement } from "../../../../model/portfolio";
import { html } from "../../../../model/misc";
import { TimelineElement } from "../../../model/portfolio";
import { html } from "../../../model/misc";
import "./timeline-element.scss";
export const generate = (

View file

@ -1,5 +1,5 @@
@import "../../../../style/mixins";
@import "../../../../style/vars";
@import "../../../style/mixins";
@import "../../../style/vars";
.timeline-element {
display: flex;

View file

@ -1,7 +1,7 @@
import { TimelineElement } from "../../../../model/portfolio";
import { TimelineElement } from "../../../model/portfolio";
import { PageContent } from "../../content/content";
import { PageElement } from "../../../../framework/page-element";
import { createElement } from "../../../../framework/element-factory";
import { PageElement } from "../../../framework/page-element";
import { createElement } from "../../../framework/element-factory";
import { generate } from "./timeline-element.html";
export class PageTimelineElement extends PageElement {

View file

@ -1,4 +1,4 @@
import { html } from "../../../model/misc";
import { html } from "../../model/misc";
import "./timeline.scss";
export const generate = (): html => `

View file

@ -1,4 +1,4 @@
@import "../../../style/vars";
@import "../../style/vars";
main#timeline {
margin-top: $normal-margin;

View file

@ -1,6 +1,6 @@
import { TimelineElement } from "../../../model/portfolio";
import { PageElement } from "../../../framework/page-element";
import { createElement } from "../../../framework/element-factory";
import { TimelineElement } from "../../model/portfolio";
import { PageElement } from "../../framework/page-element";
import { createElement } from "../../framework/element-factory";
import { PageTimelineElement } from "./timeline-element/timeline-element";
import { generate } from "./timeline.html";

View file

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 295 KiB

After

Width:  |  Height:  |  Size: 295 KiB

Before After
Before After

View file

@ -36,7 +36,8 @@ body {
perspective: 5px;
& > * {
margin-top: $normal-margin;
width: $body-width;
margin: $normal-margin auto 0 auto;
}
}

View file

@ -28,6 +28,16 @@ module.exports = {
}
}
},
{
test: /\.ico$/i,
use: {
loader: "file-loader",
query: {
outputPath: "/",
name: "[name].[ext]"
}
}
},
{
test: /\.scss$/i,
use: [