display legacy file

index.html

@@ -38,6 +38,7 @@
         <div id="info-message-contents">
           <div id="info-message-contents-text"></div>
           <div id="info-message-contents-version"></div>
+          <div id="info-message-contents-legacy"></div>
           <h4 id="info-message-content-commits-headline">Last Commits</h4>
           <div id="info-message-contents-commits"></div>
         </div>

src/sketchObjects/Revealable.ts

@@ -23,6 +23,7 @@ export interface RevealableInterface {
   imageUrl?: string;
   version?: string;
   commits?: Commit[];
+  fileContents?: string;
 }
 
 enum RevealableStates {
@@ -44,6 +45,7 @@ export class Revealable {
   imageUrl: string;
   version: string;
   commits: Commit[];
+  fileContents: string;
 
   isHovered: boolean;
   isRevealed: boolean;
@@ -59,7 +61,17 @@ export class Revealable {
   pulseCountUp: boolean;
 
   constructor(
-    { type, name, path, contents, url, imageUrl, version, commits }: RevealableInterface,
+    {
+      type,
+      name,
+      path,
+      contents,
+      url,
+      imageUrl,
+      version,
+      commits,
+      fileContents,
+    }: RevealableInterface,
     area: Area
   ) {
     this.type = type;
@@ -69,6 +81,7 @@ export class Revealable {
     this.url = url;
     this.version = version;
     this.commits = commits;
+    this.fileContents = fileContents;
     this.imageUrl = imageUrl;
     this.area = area;
     this.currentSize = this.minSize;
@@ -182,6 +195,7 @@ export class Revealable {
         url: this.url,
         version: this.version,
         commits: this.commits,
+        fileContents: this.fileContents,
       });
     }
   }

src/ui/info.ts

@@ -16,6 +16,7 @@ export interface InfoMessageType {
   url?: string;
   commits?: Commit[];
   version?: string;
+  fileContents?: string;
 }
 
 export class InfoMessage {
@@ -32,13 +33,14 @@ export class InfoMessage {
   infoMessageCommitsHeadlineRef: HTMLElement;
   infoMessageCommitsRef: HTMLElement;
   infoMessageVersionRef: HTMLElement;
+  infoMessageLegacyRef: HTMLElement;
   backdrop: HTMLElement;
 
   constructor() {
     this.infoMessage = document.getElementById('info-message');
     this.infoMessageHeadline = document.getElementById('info-message-headline');
     this.infoMessageSubheadline = document.getElementById('info-message-subheadline');
-    this.infoMessageContents = document.getElementById('info-message-contents');
+    this.infoMessageContents = document.getElementById('info-message-contents-text');
     this.infoMessageClose = document.getElementById('info-message-close');
     this.infoMessageImgRef = document.getElementById('info-message-img') as HTMLImageElement;
     this.infoMessageLinkRef = document.getElementById('info-message-link') as HTMLAnchorElement;
@@ -47,6 +49,7 @@ export class InfoMessage {
       'info-message-content-commits-headline'
     );
     this.infoMessageVersionRef = document.getElementById('info-message-contents-version');
+    this.infoMessageLegacyRef = document.getElementById('info-message-contents-legacy');
     this.backdrop = document.getElementById('backdrop');
 
     this.backdrop.addEventListener('click', this.onBackdropClick);
@@ -96,6 +99,13 @@ export class InfoMessage {
           this.infoMessageVersionRef.style.display = 'none';
         }
 
+        if (this.type === RevealableTypes.LEGACY) {
+          this.infoMessageLegacyRef.style.display = 'block';
+          this.setLegacy(newMessage.fileContents);
+        } else {
+          this.infoMessageLegacyRef.style.display = 'none';
+        }
+
         store.setState({ infoMessageShown: true });
       }
     });
@@ -113,13 +123,20 @@ export class InfoMessage {
 
   private setContents(headline: string, innerHTML: string) {
     this.infoMessageHeadline.innerText = headline;
-    // this.infoMessageContents.innerHTML = innerHTML;
+    this.infoMessageContents.innerHTML = innerHTML;
   }
 
   private setVersion(version: string) {
     this.infoMessageVersionRef.innerHTML = `This package is installed at<br/><h3>${version}</h3>`;
   }
 
+  private setLegacy(fileContents: string) {
+    this.infoMessageLegacyRef.innerHTML = `
+    <p>Excerpt from the file:</p>
+    <pre>${fileContents}</pre>
+    `;
+  }
+
   private setCommits(commits: Commit[]) {
     const commitEls = commits.map(
       ({ message, url, time }) =>

styles.scss

@@ -240,6 +240,21 @@ textarea {
         margin: 1.5rem 0;
       }
 
+      #info-message-contents-legacy {
+        p {
+          margin: 0;
+          font-size: 14px;
+          color: #4e4e4e;
+          font-style: italic;
+        }
+        pre {
+          background-color: black;
+          color: white;
+          padding: 0.5rem;
+          border-radius: 10px;
+        }
+      }
+
       h4 {
         text-transform: uppercase;
         letter-spacing: 1px;