feat: Rework project structure

kiosion · Nov 4, 2023 · 8ed93a3 · 8ed93a3
1 parent 9c42b70
commit 8ed93a3
Show file tree

Hide file tree

Showing 17 changed files with 358 additions and 72 deletions.
diff --git a/elixir-api/lib/routes/api/v1/project.ex b/elixir-api/lib/routes/api/v1/project.ex
@@ -49,12 +49,10 @@ defmodule Router.Api.V1.Project do
           "body",
           "desc",
           "date",
-          "external",
-          "externalAuthor",
-          "externalLinks",
-          "externalUrl",
-          "image",
+          "images",
+          "links",
           "language",
+          "github",
           %{
             "tags[]" => [
               "_id",

diff --git a/elixir-api/lib/routes/api/v1/projects.ex b/elixir-api/lib/routes/api/v1/projects.ex
@@ -75,12 +75,10 @@ defmodule Router.Api.V1.Projects do
           "body",
           "desc",
           "date",
-          "external",
-          "externalAuthor",
-          "externalLinks",
-          "externalUrl",
-          "image",
+          "images",
+          "links",
           "language",
+          "github",
           %{
             "tags[]" => [
               "_id",

diff --git a/elixir-api/lib/routes/cdn.ex b/elixir-api/lib/routes/cdn.ex
@@ -50,6 +50,7 @@ defmodule Router.Cdn do
       with {:ok, %HTTPoison.Response{status_code: 200, body: body}} <-
              Hexerei.Env.get(:http_client, Hexerei.HTTP.DefaultClient).get(url) do
         conn
+        |> put_resp_header("Access-Control-Allow-Origin", "*")
         |> put_resp_content_type("image/#{url_parts.filetype}")
         |> send_resp(200, body)
       else

diff --git a/sanity-cms/schemas/project.ts b/sanity-cms/schemas/project.ts
@@ -7,48 +7,40 @@ export default {
   type: 'document',
   fields: [
     ...BaseDocument.filter((field) => field.name !== 'author'),
-    {
-      name: 'external',
-      title: 'External',
-      type: 'boolean',
-      description: 'Is this project hosted on an external site?',
-      initialValue: false,
-      validation: (Rule: Rule) => Rule.required()
-    },
-    {
-      name: 'externalUrl',
-      title: 'External URL',
-      type: 'url',
-      description: 'Link to external project'
-    },
     {
       name: 'author',
       title: 'Author',
       type: 'reference',
       to: { type: 'author' }
     },
     {
-      name: 'externalAuthor',
-      title: 'External Author',
-      type: 'string',
-      description: 'Name of external author, if applicable'
-    },
-    {
-      name: 'image',
-      title: 'Project Image',
-      type: 'image',
-      options: {
-        hotspot: true
-      }
+      name: 'images',
+      title: 'Project Images',
+      type: 'array',
+      of: [
+        {
+          type: 'image',
+          options: {
+            hotspot: true
+          }
+        }
+      ],
+      validation: (Rule: Rule) => Rule.max(4)
     },
     {
       name: 'language',
       title: 'Language',
       type: 'string',
-      description: 'Primary programming language used in project'
+      description: 'Primary language used in project'
+    },
+    {
+      name: 'github',
+      title: 'Github Link',
+      type: 'url',
+      description: 'Github repository link'
     },
     {
-      name: 'externalLinks',
+      name: 'links',
       title: 'External Links',
       type: 'array',
       of: [

diff --git a/sanity-cms/structure.ts b/sanity-cms/structure.ts
@@ -70,20 +70,20 @@ export const structure = (
             .title('Projects')
             .items([
               S.listItem()
-                .title('Writeups')
+                .title('Published')
                 .icon(BsFillFileTextFill)
                 .child(
                   S.documentTypeList('project')
-                    .title('Writeups')
-                    .filter('_type == "project" && !external')
+                    .title('Published')
+                    .filter('_type == "project" && !(_id in path("drafts.**"))')
                 ),
               S.listItem()
-                .title('External')
-                .icon(BiLinkExternal)
+                .title('Drafts')
+                .icon(BsFillFileEarmarkTextFill)
                 .child(
                   S.documentTypeList('project')
-                    .title('External')
-                    .filter('_type == "project" && external == true')
+                    .title('Drafts')
+                    .filter('_type == "project" && _id in path("drafts.**")')
                 ),
               S.divider(),
               S.listItem()

diff --git a/svelte-app/src/components/context-menu/menu.svelte b/svelte-app/src/components/context-menu/menu.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
   import { createEventDispatcher, setContext } from 'svelte';
   import { circIn, circOut } from 'svelte/easing';
-  import { blur } from 'svelte/transition';
+  import { fade } from 'svelte/transition';
 
+  import { BASE_ANIMATION_DURATION } from '$lib/consts';
   import { setState } from '$lib/helpers/menu';
 
-  import { key } from './menu';
+  import { key } from '$components/context-menu/menu';
 
   export let x: number;
   export let y: number;
@@ -56,8 +57,14 @@
 
 <div
   style="top: {y}px; left: {x}px"
-  in:blur={{ duration: 200, easing: circOut }}
-  out:blur={{ duration: 200, easing: circIn }}
+  in:fade={{
+    duration: BASE_ANIMATION_DURATION * 0.5,
+    easing: circOut
+  }}
+  out:fade={{
+    duration: BASE_ANIMATION_DURATION * 0.5,
+    easing: circIn
+  }}
   bind:this={menuElement}
 >
   <slot />

diff --git a/svelte-app/src/components/document/content/common/footer.svelte b/svelte-app/src/components/document/content/common/footer.svelte
@@ -3,14 +3,28 @@
   import { isMobile } from '$lib/helpers/responsive';
 
   import ArrowButton from '$components/controls/arrow-button.svelte';
+  import Divider from '$components/divider.svelte';
   import Icon from '$components/icon.svelte';
+  import Link from '$components/link.svelte';
 
   import type { PostDocument, ProjectDocument } from '$types';
 
   export let data: PostDocument | ProjectDocument,
     model: 'post' | 'project' = data._type;
 </script>
 
+{#if data._type === 'project' && data.github}
+  <div>
+    <h1 class="my-4 font-display text-2xl font-bold">{$t('Links')}</h1>
+    <span class="flex items-center justify-start gap-2 text-base">
+      <Icon icon="ExternalLink" class="mb-0.5" inline />
+      <Link href={data.github}>
+        {'github/' + data.github.split('github.com/')?.[1]}
+      </Link>
+    </span>
+  </div>
+  <Divider />
+{/if}
 <div>
   <ArrowButton
     class="w-full text-left"

diff --git a/svelte-app/src/components/document/content/common/header.svelte b/svelte-app/src/components/document/content/common/header.svelte
@@ -6,9 +6,12 @@
 
   import BulletPoint from '$components/bullet-point.svelte';
   import ArrowButton from '$components/controls/arrow-button.svelte';
+  import Divider from '$components/divider.svelte';
   import PostHeader from '$components/document/content/post/header.svelte';
   import ProjectHeader from '$components/document/content/project/header.svelte';
   import Icon from '$components/icon.svelte';
+  import Link from '$components/link.svelte';
+  import ImageCarousel from '$components/portable-text/image-carousel.svelte';
 
   import type { PostDocument, ProjectDocument, PTBlock } from '$types';
 
@@ -34,10 +37,19 @@
             <p class="cursor-default font-mono text-base">
               {date ? date : $t('Unknown date')}
             </p>
-            <BulletPoint />
-            <p class="cursor-default font-mono text-base">
-              {$t('{length} min read', { length: Math.floor(readingTime / 60) })}
-            </p>
+            {#if data._type === 'post'}
+              <BulletPoint />
+              <p class="cursor-default font-mono text-base">
+                {$t('{length} min read', { length: Math.floor(readingTime / 60) })}
+              </p>
+            {:else if data.github}
+              <BulletPoint />
+              <span class="font-mono text-base">
+                <Link href={data.github}>
+                  {'github/' + data.github.split('github.com/')?.[1]}
+                </Link>
+              </span>
+            {/if}
           </div>
           <ArrowButton
             class="focusOutline-sm -mb-1 flex-1 whitespace-nowrap rounded-sm text-right"
@@ -53,6 +65,25 @@
           </ArrowButton>
         </div>
       </svelte:fragment>
+      {#if data._type === 'project' && data.images?.length}
+        <Divider />
+        <ImageCarousel images={data.images} />
+      {/if}
+      {#if data._type === 'project' && data.tags?.length}
+        <Divider />
+        <div class="flex flex-row items-center justify-start gap-4">
+          <Icon icon="Label" class="ml-1" />
+          <div class="flex flex-row flex-wrap items-center justify-start gap-2">
+            {#each data.tags as tag}
+              <span
+                class="cursor-default rounded-sm border border-dark/60 px-1.5 py-0.5 font-mono text-sm transition-colors dark:border-light/60"
+              >
+                {tag.title}
+              </span>
+            {/each}
+          </div>
+        </div>
+      {/if}
     </svelte:component>
   </div>
 </div>

diff --git a/svelte-app/src/components/document/content/content.svelte b/svelte-app/src/components/document/content/content.svelte
@@ -5,20 +5,14 @@
   import EmptyContent from '$components/empty-content.svelte';
   import PortableText from '$components/portable-text/portable-text.svelte';
 
-  import type {
-    DocumentHeadings,
-    PostDocument,
-    ProjectDocument,
-    RouteFetch
-  } from '$types';
+  import type { PostDocument, ProjectDocument, RouteFetch } from '$types';
 
   export let data: PostDocument | ProjectDocument,
     model = data._type,
-    headings: DocumentHeadings[] | undefined,
     routeFetch: RouteFetch | undefined = undefined;
 </script>
 
-<Header {data} {headings} />
+<Header {data} />
 <Divider />
 <div>
   {#if data.body}

diff --git a/svelte-app/src/components/document/content/post/header.svelte b/svelte-app/src/components/document/content/post/header.svelte
@@ -1,4 +1,5 @@
 <div class="relative z-[1]">
   <slot name="title" />
   <slot name="meta" />
+  <slot />
 </div>
diff --git a/svelte-app/src/components/document/content/project/header.svelte b/svelte-app/src/components/document/content/project/header.svelte
@@ -1,5 +1,5 @@
 <div class="relative z-[1]">
   <slot name="title" />
   <slot name="meta" />
-  <slot name="desc" />
+  <slot />
 </div>
diff --git a/svelte-app/src/components/document/route.svelte b/svelte-app/src/components/document/route.svelte
@@ -69,5 +69,5 @@
 </svelte:head>
 
 <ContentWrapper>
-  <Content {data} {headings} {routeFetch} />
+  <Content {data} />
 </ContentWrapper>
diff --git a/svelte-app/src/components/icon.svelte b/svelte-app/src/components/icon.svelte
@@ -2,7 +2,10 @@
   import { t } from '$i18n';
   import icons from '$lib/icons';
 
-  export let icon: string,
+  import type { icons as iconsType } from '$lib/icons';
+
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  export let icon: keyof typeof iconsType | (string & {}),
     hovered = false,
     inline = false,
     width = 20,