feat(front): adds styles and video display to projects route and api' (…

…#997) Closes: #997
dgrebb · Nov 16, 2023 · df3ed2a · df3ed2a
1 parent 0bab766
commit df3ed2a
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 33 deletions.
diff --git a/front/src/lib/_utils/shape-shifters/shapeProjectData.js b/front/src/lib/_utils/shape-shifters/shapeProjectData.js
@@ -1,9 +1,19 @@
 async function shapeArtifactData(data) {
-  let shapenedArtifactData = {};
+  let shapenedArtifactData = {
+    websites: [],
+    videos: [],
+  };
   data.forEach((artifact) => {
     switch (artifact.__component) {
       case 'artifacts.websites':
-        shapenedArtifactData.websites = [...artifact.details];
+        shapenedArtifactData.websites.push(...artifact.details);
+        break;
+      case 'artifacts.videos':
+        shapenedArtifactData.videos.push({
+          videoFileURL: artifact.videoFileURL,
+          videoCaptionURL: artifact.videoCaptionURL,
+          details: artifact.details,
+        });
         break;
 
       default:

diff --git a/front/src/lib/components/cv/Project.svelte b/front/src/lib/components/cv/Project.svelte
@@ -1,4 +1,6 @@
 <script>
+  import SvelteMarkdown from 'svelte-markdown';
+
   export let content;
 
   let {
@@ -11,7 +13,7 @@
     summary,
     body,
     artifacts,
-    artifacts: { websites },
+    artifacts: { websites, videos },
     organizations: { data: organizations },
     industries: { data: industries },
     awards: { data: awards },
@@ -21,33 +23,84 @@
 
 <h1 class="collection-title">Projects</h1>
 
-<h1>{name}</h1>
-{#each skills as { attributes: { skill, slug: skillSlug } }}
-  <h2><a href="/cv/skill/{skillSlug}">{skill}</a></h2>
-{/each}
-
-{#if organizations}
-  <h2>Organizations</h2>
-  {#each organizations as { attributes: { name, slug: organizationSlug } }}
-    <h2><a href="/cv/organization/{organizationSlug}">{name}</a></h2>
-  {/each}
-{/if}
-
-{#if industries}
-  <h2>Industries</h2>
-  {#each industries as { attributes: { industry, slug: industrySlug } }}
-    <h2><a href="/cv/industry/{industrySlug}">{industry}</a></h2>
-  {/each}
-{/if}
-
-<!-- TODO: Similarly, each artifact type should have a component 
+<article class="project-article">
+  <section class="project-details">
+    <h1>{name}</h1>
+
+    {#if body}
+      <SvelteMarkdown source={body} />
+    {/if}
+  </section>
+  <section class="project-artifacts">
+    {#if Object.keys(artifacts).length}
+      <h2>Artifacts</h2>
+      {#if websites}
+        <h3>Websites</h3>
+        <ul class="website-artifacts-list">
+          {#each websites as { title, URL, URLTitle, description, credits }}
+            <li><a href={URL} target="_blank" title={URLTitle}>{title}</a></li>
+          {/each}
+        </ul>
+      {/if}
+      {#if videos}
+        <h3>Videos</h3>
+        {#each videos as { videoFileURL, videoCaptionURL, details: { title, URL, description, credits } }}
+          <h4>{title}</h4>
+          <div class="video-player">
+            <video controls class="project-video-player">
+              <source src={videoFileURL} type="video/mp4" />
+              <track
+                default
+                kind="captions"
+                type="text/vtt"
+                src={videoCaptionURL}
+                srclang="en"
+              />
+            </video>
+          </div>
+        {/each}
+      {/if}
+    {/if}
+  </section>
+</article>
+
+<aside class="project-aside">
+  <!-- TODO: Similarly, each artifact type should have a component 
   to match, which is dynamically selected by artifact type  -->
-{#if Object.keys(artifacts).length}
-  <h2>Artifacts</h2>
-  {#if websites}<h3>Websites</h3>{/if}
-  <ul class="website-artifacts-list">
-    {#each websites as { title, URL, description, credits }}
-      <li><a href={URL} target="_blank">{title}</a></li>
-    {/each}
-  </ul>
-{/if}
+  {#if organizations}
+    {#if skills}
+      <h1>Skills</h1>
+      <ul class="project-skills">
+        {#each skills as { attributes: { skill, slug: skillSlug } }}
+          <li><a href="/cv/skill/{skillSlug}">{skill}</a></li>
+        {/each}
+      </ul>
+    {/if}
+    <h1>Organizations</h1>
+    <ul class="project-organizations">
+      {#each organizations as { attributes: { name, slug: organizationSlug } }}
+        <li><a href="/cv/organization/{organizationSlug}">{name}</a></li>
+      {/each}
+    </ul>
+  {/if}
+
+  {#if industries}
+    <h1>Industries</h1>
+    <ul class="project-industries">
+      {#each industries as { attributes: { industry, slug: industrySlug } }}
+        <li><a href="/cv/industry/{industrySlug}">{industry}</a></li>
+      {/each}
+    </ul>
+  {/if}
+</aside>
+
+<style>
+  .project-article {
+    float: left;
+    width: 80%;
+  }
+  .project-aside {
+    float: right;
+    width: 20%;
+  }
+</style>
diff --git a/front/src/lib/styles/base/transitions.css b/front/src/lib/styles/base/transitions.css
@@ -87,5 +87,6 @@ body.ready.animating {
   .main .transition-container:last-of-type {
     height: 0;
     max-height: 0;
+    overflow: hidden;
   }
 }
diff --git a/front/src/lib/styles/global.css b/front/src/lib/styles/global.css
@@ -79,6 +79,7 @@ body {
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   background-color: var(--fg-clr);
   height: 0.5rem;
+  transform: translateZ(0);
 }
 
 #main {

diff --git a/front/src/routes/cv/[collection]/[slug]/+page.server.js b/front/src/routes/cv/[collection]/[slug]/+page.server.js
@@ -62,7 +62,7 @@ export async function load({ params: { collection, slug } }) {
       itemData = await shapePositionData(data);
       break;
     case 'project':
-      endpoint += `?populate[hero]=*&populate[seo]=*&populate[skills]=*&populate[organizations]=*&populate[projects]=*&populate[industries]=*&populate[awards]=*&populate[positions]=*&populate[artifacts][on][artifacts.websites][populate]=*&filters[slug][$eq]=${slug}`;
+      endpoint += `?populate[hero]=*&populate[seo]=*&populate[skills]=*&populate[organizations]=*&populate[projects]=*&populate[industries]=*&populate[awards]=*&populate[classification]=*&populate[positions]=*&populate[artifacts][on][artifacts.websites][populate]=*&populate[artifacts][on][artifacts.videos][populate]=*&filters[slug][$eq]=${slug}`;
       data = await requestContent(endpoint, collection);
       itemData = await shapeProjectData(data);
       break;