build(front): refactors video, position, and project fields (#1005)

dgrebb · Nov 18, 2023 · 7634b0d · 7634b0d
1 parent dd16d00
commit 7634b0d
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 19 deletions.
diff --git a/...ore-store.plugin_content_manager_configuration_content_types##api##position.position.json b/...ore-store.plugin_content_manager_configuration_content_types##api##position.position.json
@@ -264,6 +264,20 @@
           "sortable": false
         }
       },
+      "title": {
+        "edit": {
+          "label": "title",
+          "description": "",
+          "placeholder": "",
+          "visible": true,
+          "editable": true
+        },
+        "list": {
+          "label": "title",
+          "searchable": true,
+          "sortable": true
+        }
+      },
       "createdAt": {
         "edit": {
           "label": "createdAt",
@@ -336,6 +350,10 @@
           }
         ],
         [
+          {
+            "name": "title",
+            "size": 4
+          },
           {
             "name": "startDate",
             "size": 4

diff --git a/back/src/api/position/content-types/position/schema.json b/back/src/api/position/content-types/position/schema.json
@@ -19,6 +19,9 @@
       "type": "uid",
       "targetField": "name"
     },
+    "title": {
+      "type": "string"
+    },
     "startDate": {
       "type": "date"
     },
@@ -32,9 +35,7 @@
       "type": "media",
       "multiple": false,
       "required": false,
-      "allowedTypes": [
-        "images"
-      ]
+      "allowedTypes": ["images"]
     },
     "organizations": {
       "type": "relation",

diff --git a/back/src/components/artifacts/artifact-details.json b/back/src/components/artifacts/artifact-details.json
@@ -8,7 +8,8 @@
   "options": {},
   "attributes": {
     "title": {
-      "type": "string"
+      "type": "string",
+      "required": true
     },
     "files": {
       "type": "media",

diff --git a/front/src/lib/_utils/shape-shifters/shapeProjectData.js b/front/src/lib/_utils/shape-shifters/shapeProjectData.js
@@ -11,7 +11,7 @@ async function shapeArtifactData(data) {
       case 'artifacts.videos':
         shapenedArtifactData.videos.push({
           videoFile: artifact.videoFile.data.attributes.url,
-          videoCaptions: artifact.videoCaptions.data.attributes.url,
+          videoCaptions: artifact.videoCaptions?.data?.attributes?.url || null,
           details: artifact.details,
         });
         break;
@@ -28,6 +28,7 @@ export async function shapeProjectData(data) {
   let project,
     seo,
     name,
+    title,
     hero,
     startDate,
     endDate,
@@ -43,6 +44,7 @@ export async function shapeProjectData(data) {
   project = {
     seo,
     name,
+    title,
     hero,
     startDate,
     endDate,

diff --git a/front/src/lib/components/cv/Position.svelte b/front/src/lib/components/cv/Position.svelte
@@ -3,6 +3,7 @@
   let {
     name,
     slug,
+    title,
     summary,
     body,
     startDate,
@@ -17,6 +18,7 @@
 <h1 class="collection-title">Roles</h1>
 
 <h1>{name}</h1>
+{#if title}<h2>{title}</h2>{/if}
 {#each skills as { attributes: { name, slug: skillSlug } }}
   <h2><a href="/cv/skill/{skillSlug}">{name}</a></h2>
 {/each}

diff --git a/front/src/lib/components/cv/Project.svelte b/front/src/lib/components/cv/Project.svelte
@@ -47,19 +47,23 @@
         {#each videos as { videoFile, videoCaptions, details: { title, URL, description, credits } }}
           <h4>{title}</h4>
           <div class="video-player">
+            <!-- svelte-ignore a11y-media-has-caption -->
+            <!--TODO: Remove ignore-rule -->
             <video
               crossorigin="anonymous"
               controls
               class="project-video-player"
             >
               <source src={videoFile} type="video/mp4" />
-              <track
-                default
-                kind="captions"
-                type="text/vtt"
-                src={videoCaptions}
-                srclang="en"
-              />
+              {#if videoCaptions}
+                <track
+                  default
+                  kind="captions"
+                  type="text/vtt"
+                  src={videoCaptions}
+                  srclang="en"
+                />
+              {/if}
             </video>
           </div>
         {/each}

diff --git a/front/src/routes/cv/+page.server.js b/front/src/routes/cv/+page.server.js
@@ -27,7 +27,7 @@ function structurePositions(data) {
 
 export async function load({ params: { pathname } }) {
   var cv, positionsData;
-  let seo, hero, name, intro;
+  let seo, hero, title, intro;
 
   try {
     cv = await api(endpoint);
@@ -47,11 +47,11 @@ export async function load({ params: { pathname } }) {
 
   ({
     seo,
-    content: { hero, name, introduction: intro },
+    content: { hero, title, introduction: intro },
   } = cv);
 
   const page = {
-    name,
+    title,
     intro,
     hero: hero?.data?.attributes || false,
   };
@@ -61,7 +61,7 @@ export async function load({ params: { pathname } }) {
   var pageMeta = {
     ...seo,
     type: 'website',
-    metaTitle: seo?.metaTitle || name,
+    metaTitle: seo?.metaTitle || title,
   };
 
   /**

diff --git a/front/src/routes/cv/+page.svelte b/front/src/routes/cv/+page.svelte
@@ -7,14 +7,14 @@
   export let data;
 
   const { pathname, page, positions, pageMeta } = data;
-  const { name, hero, intro } = page;
+  const { title, hero, intro } = page;
 </script>
 
 <PageTransition transitionKey={pathname}>
   <section class="cv meat">
     <Flourish />
     <a id="main">Main Content</a>
-    <h1>{name}</h1>
+    <h1>{title}</h1>
     {#if hero}
       <img src={hero.url} alt={hero.alternativeText} />
     {/if}
@@ -23,9 +23,10 @@
         {intro}
       </div>
     {/if}
-    {#each positions as { name, slug, startDate, endDate, summary, awards, industries, organizations, projects, skills }, i}
+    {#each positions as { name, slug, title, startDate, endDate, summary, awards, industries, organizations, projects, skills }, i}
       <div class="position-timeline-item">
         <h1><a href="/cv/position/{slug}">{name}</a></h1>
+        {#if title}<h2>{title}</h2>{/if}
         <date class="position-timeline-date"
           >{#if endDate}{startDate}{:else}Current{/if}</date
         >