Add description to photos

.vscode/settings.json

@@ -9,6 +9,7 @@
     "froms",
     "leds",
     "mesmerising",
+    "mixins",
     "optimisations",
     "optimised",
     "organiser",

src/data/photos.ts

@@ -8,6 +8,17 @@ export const photosTimelineElement = {
   date: `2016 summer`,
   title: `Photos`,
   figure: new Image(photosWebP, photosJpeg, `a picture of the website`),
-  description: `A simple web page where you can view my photos.`,
+  description: `A simple webpage where you can view my photos.`,
+  more: [
+    `
+      Taking time to appreciate the world around us fills me with joy. That's why I like
+      to go on walks with a camera. I might not end up with great photos, nonetheless, I usually
+      end up with some inspiration regarding my current or next project.
+    `,
+    `
+      As for the webpage, a webpack script generates the site from the photos in a directory,
+      automatic resizing to multiple quality settings is also part of the pipeline.
+    `,
+  ],
   links: [new Open('https://photo.schmelczer.dev')],
 };

src/page/timeline/timeline-element/timeline-element.ts

@@ -11,41 +11,32 @@ export interface TimelineElementParameters {
   figure: Image | Video | Preview;
   title: string;
   description: string;
-  more?: Array<string>;
+  more: Array<string>;
   links: Array<PageElement>;
 }
 
 export class PageTimelineElement extends PageElement {
-  private isOpen: boolean;
+  private isOpen = false;
-  private more?: HTMLElement;
+  private more: HTMLElement;
-  private showMore: string;
-  private showLess: string;
 
   public constructor(
     timelineElement: TimelineElementParameters,
-    showMore: string,
+    private readonly showMore: string,
-    showLess: string
+    private readonly showLess: string
   ) {
-    const root = createElement(generate(timelineElement, showMore));
+    super(createElement(generate(timelineElement, showMore)));
-
+    const content = new PageContent(timelineElement.more);
-    if (timelineElement.more) {
+    this.children = [content];
-      const content = new PageContent(timelineElement.more);
+    this.isOpen = false;
-      super(root);
+    this.more = this.query('.more');
-      this.children = [content];
+    this.more.appendChild(content.htmlRoot);
-      this.isOpen = false;
+    addEventListener('resize', this.handleResize.bind(this));
-      this.more = this.query('.more');
-      this.more.appendChild(content.htmlRoot);
-      addEventListener('resize', this.handleResize.bind(this));
-
-      this.query('.info-button').addEventListener('click', this.toggleOpen.bind(this));
-    } else super(root);
 
+    this.query('.info-button').addEventListener('click', this.toggleOpen.bind(this));
     this.attachElementByReplacing('.figure', timelineElement.figure);
     this.query('.description').innerText = timelineElement.description;
     timelineElement.links.forEach(l => this.attachElementAsChildOf('.buttons', l));
 
-    this.showMore = showMore;
-    this.showLess = showLess;
     this.isOpen = false;
   }