https://highercomve.github.io/components/site.js

1import { encodeJSON, get, getGist } from "../js/utils.js";
2import "./me-intro.js";
3import "./me-outro.js";
4import "./content-section.js";
5import "./time-line.js";
6import "./articles.js";
7
8window.addEventListener("WebComponentsReady", function () {
9	var Site = {
10		html_url: null,
11		content: {},
12		gist: {
13			get() {
14				return this.getAttribute("gist");
15			},
16		},
17		connectedCallback() {
18			getGist(this.gist, (response) => {
19				this.html_url = response.html_url;
20				this.content = JSON.parse(response.files["content.json"].content);
21				this.updateComponent();
22			});
23		},
24		render() {
25			var networks = encodeJSON(get(this, "content.networks", []));
26			var aboutMeContent = encodeJSON(
27				get(this, "content.about_me.content", []),
28			);
29			var aimsContent = encodeJSON(get(this, "content.aims.content", []));
30			var skills = encodeJSON(get(this, "content.skils.content", []));
31			var education = encodeJSON(get(this, "content.education.content", []));
32			var languages = encodeJSON(get(this, "content.languages.content", []));
33			var talks = encodeJSON(get(this, "content.talks.content", []));
34			return `
35        <section class="site">
36			<header>
37				<me-intro name="${get(this, "content.name")}" tagline="${get(this, "content.tagline")}" location="${get(this, "content.location")}" networks="${networks}"></me-intro>
38			</header>
39			<section class="resume">
40				<content-section title="${get(this, "content.about_me.title")}" wrapper="${get(this, "content.about_me.wrapper")}" content="${aboutMeContent}"></content-section>
41			</section>
42			<section class="aims">
43				<content-section title="${get(this, "content.aims.title")}" wrapper="${get(this, "content.aims.wrapper")}" content="${aimsContent}"></content-section>
44			</section>
45			<section class="cv-block skills">
46				<content-section title="Technical skills" wrapper="li" content="${skills}"></content-section>
47			</section>
48			<time-line gist="${this.gist}"></time-line>
49			<section class="cv-extras">
50				<section class="cv-block cv-card education">
51					<content-section title="Education" wrapper="p" content="${education}"></content-section>
52				</section>
53				<section class="cv-block cv-card languages">
54					<content-section title="Languages" wrapper="li" content="${languages}"></content-section>
55				</section>
56				<section class="cv-block cv-card talks">
57					<content-section title="Talks" wrapper="li" content="${talks}"></content-section>
58				</section>
59			</section>
60			<latest-articles></latest-articles>
61          	<me-outro name="${get(this, "content.name")}" url="${this.html_url}" ></me-outro>
62        </section>
63      `;
64		},
65	};
66
67	import("../components/component-builder.js").then(function () {
68		CreateComponent("web-site", Site);
69	});
70});