Add downloads to case studies

codeandconspire · Oct 30, 2023 · 3765fb3 · 3765fb3
1 parent 9a9cb3a
commit 3765fb3
Show file tree

Hide file tree

Showing 5 changed files with 159 additions and 3 deletions.
diff --git a/src/lib/CaseStudy.svelte b/src/lib/CaseStudy.svelte
@@ -1,7 +1,8 @@
 <script>
-  import Text, { setOffset, asText } from '$lib/Text.svelte'
+  import { setOffset, asText } from '$lib/Text.svelte'
   import * as footnotes from '$lib/Footnotes.svelte'
   import Modules from '$lib/Modules.svelte'
+  import Details from '$lib/Details.svelte'
   import { resolve } from '$lib/sanity.js'
   import Dialog from '$lib/Dialog.svelte'
   import Image from '$lib/Image.svelte'
@@ -30,6 +31,32 @@
       </div>
     {/if}
     <Modules modules={data.case.modules} narrow />
+    {#if data.case.downloads?.length}
+      <div style="margin-top: -1px">
+        <Details small heading="Download as PDF">
+          <div class="downloads">
+            {#each data.case.downloads as download}
+              <a href={download.file.asset.url} download class="download">
+                {#if download.thumbnail}
+                  <Image
+                    class="thumbnail"
+                    alt={download.label}
+                    image={download.thumbnail}
+                    sizes="10rem"
+                    variants={[200, 400, 600]} />
+                {/if}
+                <Html class="description">
+                  <h4 class="h4 label">{download.label}</h4>
+                  {#if download.description}
+                    <p>{download.description}</p>
+                  {/if}
+                </Html>
+              </a>
+            {/each}
+          </div>
+        </Details>
+      </div>
+    {/if}
   </div>
 </Dialog>
 
@@ -59,4 +86,51 @@
     border-radius: var(--border-radius);
     margin: 0 0 var(--space-small);
   }
+
+  /* Downloads */
+
+  .downloads {
+    display: flex;
+    flex-direction: column;
+    gap: clamp(1rem, 5vw, 2rem);
+  }
+
+  .download {
+    display: flex;
+    gap: clamp(1rem, 5vw, 2rem);
+    align-items: flex-start;
+    transition: opacity 100ms ease-out;
+    margin-top: 1rem;
+  }
+
+  .download:active {
+    opacity: 0.7;
+    transition: none;
+  }
+
+  .download :global(.thumbnail) {
+    width: clamp(5rem, 10vw, 8rem);
+    height: auto;
+    user-select: none;
+    box-shadow: 0 0.3rem 1.25rem rgba(0, 0, 0, 0.08),
+      0 1px 0 0 rgba(0, 0, 0, 0.1);
+    flex: 0 0 auto;
+  }
+
+  .download :global(.label) {
+    text-wrap: balance;
+    max-width: 20em;
+    margin: 0 0 0.5em !important;
+  }
+
+  .download:hover :global(.label) {
+    text-decoration: underline;
+    text-decoration-thickness: 1.5px !important;
+  }
+
+  .download :global(.description) {
+    flex: 1 1 auto;
+    font-family: var(--sans-serif);
+    font-size: var(--framework-font-size);
+  }
 </style>
diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte
@@ -287,7 +287,7 @@
     transition: none;
   }
 
-  /** Chapters grid */
+  /* Chapters grid */
 
   .items {
     margin-top: clamp(2rem, 4vw, 3rem);
@@ -296,7 +296,7 @@
     grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
   }
 
-  /** Downloads */
+  /* Downloads */
 
   .downloads {
     display: flex;
@@ -339,5 +339,6 @@
 
   .download :global(.description) {
     flex: 1 1 auto;
+    font-family: var(--sans-serif);
   }
 </style>
diff --git a/src/routes/(app)/chapters/[chapter]/case/[case]/+page.server.js b/src/routes/(app)/chapters/[chapter]/case/[case]/+page.server.js
@@ -18,6 +18,15 @@ export async function load({ params, request, parent }) {
     client.fetch(
       `*[_type == "case" && slug.current == $slug][0]{
         ...,
+        downloads[]{
+          ...,
+          file{
+            asset->
+          },
+          thumbnail{
+            asset->
+          }
+        },
         image{
           ...,
           asset->

diff --git a/src/routes/(sanity)/studio/[...rest]/types/case.jsx b/src/routes/(sanity)/studio/[...rest]/types/case.jsx
@@ -1,4 +1,5 @@
 import { defineType } from 'sanity'
+import { DownloadIcon } from '@sanity/icons'
 
 export default defineType({
   name: 'case',
@@ -57,6 +58,41 @@ export default defineType({
         { type: 'footnotes' }
       ]
     },
+    {
+      name: 'downloads',
+      type: 'array',
+      title: 'Downloads',
+      group: 'main',
+      of: [
+        {
+          type: 'object',
+          title: 'Item',
+          icon: DownloadIcon,
+          fields: [
+            {
+              name: 'label',
+              type: 'string',
+              title: 'Label'
+            },
+            {
+              name: 'description',
+              type: 'text',
+              title: 'Description'
+            },
+            {
+              type: 'file',
+              name: 'file',
+              title: 'File'
+            },
+            {
+              type: 'image',
+              name: 'thumbnail',
+              title: 'Thumbnail'
+            }
+          ]
+        }
+      ]
+    },
     {
       name: 'featuredImage',
       title: 'Featured image',

diff --git a/src/routes/(sanity)/studio/[...rest]/types/chapter.jsx b/src/routes/(sanity)/studio/[...rest]/types/chapter.jsx
@@ -1,6 +1,7 @@
 import { defineType } from 'sanity'
 
 import Color from '../components/Color.jsx'
+import { DownloadIcon } from '@sanity/icons'
 
 export default defineType({
   name: 'chapter',
@@ -173,6 +174,41 @@ export default defineType({
         { type: 'footnotes' }
       ]
     },
+    {
+      name: 'downloads',
+      type: 'array',
+      title: 'Downloads',
+      group: 'main',
+      of: [
+        {
+          type: 'object',
+          title: 'Item',
+          icon: DownloadIcon,
+          fields: [
+            {
+              name: 'label',
+              type: 'string',
+              title: 'Label'
+            },
+            {
+              name: 'description',
+              type: 'text',
+              title: 'Description'
+            },
+            {
+              type: 'file',
+              name: 'file',
+              title: 'File'
+            },
+            {
+              type: 'image',
+              name: 'thumbnail',
+              title: 'Thumbnail'
+            }
+          ]
+        }
+      ]
+    },
     {
       name: 'featuredImage',
       title: 'Featured image',