Merge pull request #1251 from kiosion/colour-redesign

Redesign site colour scheme

elixir-api/lib/routes/api/v1/tag.ex

@@ -35,18 +35,18 @@ defmodule Router.Api.V1.Tag do
         ])
         |> Query.project([
           "_id",
-          ["'objectID'", "_id"],
           "_rev",
           "_type",
           "title",
+          "views",
           "publishedAt",
           %{
             "tags[]" => [
               "_id",
               "title",
               "slug"
             ],
-            :follow => true
+            :join => "->"
           },
           "slug",
           "body",
@@ -74,17 +74,34 @@ defmodule Router.Api.V1.Tag do
         parsed_counts = Task.await(counts)
 
         {transformed_result, meta, code} =
-          transform_result_document(query, result, :tag, params, %{
-            "total" => parsed_counts["result"]["total"],
-            "count" => parsed_counts["result"]["count"],
-            "id" => id,
-            "type" => params["type"]
-          })
+          transform_result_document(
+            query,
+            result,
+            String.to_atom(params["type"] <> "s"),
+            params,
+            %{
+              "total" => parsed_counts["result"]["total"],
+              "count" => parsed_counts["result"]["count"]
+            }
+          )
+
+        # parsed_counts = Task.await(counts)
+
+        # {transformed_result, meta, code} =
+        #   transform_result_document(query, result, :tag, params, %{
+        #     "total" => parsed_counts["result"]["total"],
+        #     "count" => parsed_counts["result"]["count"],
+        #     "id" => id,
+        #     "type" => params["type"]
+        #   })
 
         update_meta_and_send_response(conn, code, transformed_result, meta, duration)
       end)
     else
       false ->
+        {:ok, params} = validate_query_params(conn, %{"type" => nil})
+        Logger.info("type param: #{inspect(params["type"])}")
+        Logger.info("ID: #{inspect(id)}")
         conn |> error_res(400, "Invalid request", [%{message: "Missing ID or invalid type"}])
 
       {:error, reason} ->

elixir-api/lib/routes/api/v1/tags.ex

@@ -28,8 +28,9 @@ defmodule Router.Api.V1.Tags do
         |> Query.project([
           "_id",
           "_rev",
-          ["'objectID'", "_id"],
           "_type",
+          "_createdAt",
+          "_updatedAt",
           "title",
           "slug"
         ])

svelte-app/src/components/about/timeline-item.svelte

@@ -18,10 +18,11 @@
   class:pb-4={!last}
 >
   <span
-    class="bullet block flex-shrink-0 rounded-full bg-accent-light/80 dark:bg-accent-dark/80"
-  ></span>
+    class="bullet block flex-shrink-0 rounded-xs text-orange-dark dark:text-orange-light"
+    >&rarr;</span
+  >
   <div class="content">
-    <h3 class="pb-2 pt-1 text-base font-bold text-dark transition-colors dark:text-white">
+    <h3 class="pb-1 pt-1 text-base font-bold text-dark transition-colors dark:text-white">
       {title}
     </h3>
     <p class="font-mono text-sm text-dark/80 transition-colors dark:text-light/80">
@@ -43,13 +44,14 @@
 
   $bulletTopMargin: 13px;
   $bulletSize: 6px;
-  $lineWidth: 2px;
+  $lineWidth: 1px;
   $lineGap: 14px;
 
   .bullet {
     margin-top: $bulletTopMargin;
     width: $bulletSize;
     height: $bulletSize;
+    line-height: $bulletSize;
   }
 
   .content {
@@ -60,18 +62,18 @@
     }
 
     &:before {
-      @apply absolute bg-dark/20;
+      @apply absolute border-l border-dashed border-neutral-200 transition-colors;
 
       $baseSpaceFromTop: $bulletTopMargin + $bulletSize;
 
       content: '';
       top: #{$bulletTopMargin + $bulletSize + $lineGap};
       bottom: #{0px + $lineGap - $bulletTopMargin};
-      left: #{$bulletSize * 2 + $lineWidth};
+      left: #{$bulletSize * 2};
       width: $lineWidth;
 
       @include dark {
-        @apply bg-white/20;
+        @apply border-neutral-400;
       }
     }
   }

svelte-app/src/components/about/timeline-section.svelte

@@ -15,7 +15,7 @@
 <section class="my-6" role="group" aria-labelledby="{id}-heading">
   <div class="pb-3">
     <h2
-      class="pb-2 text-xl font-bold text-dark transition-colors dark:text-white"
+      class="pb-1 text-xl font-bold text-dark transition-colors dark:text-white"
       id="{id}-heading"
     >
       {title}

svelte-app/src/components/code-block.svelte

@@ -7,9 +7,8 @@
 
   import { genericAsyncImport, getLangType } from '$components/code-block/imports';
   import Divider from '$components/divider.svelte';
-  import Icon from '$components/icon.svelte';
+  import Hoverable from '$components/hoverable.svelte';
   import Spinner from '$components/loading/spinner.svelte';
-  import Tooltip from '$components/tooltips/tooltip.svelte';
 
   import type { ResolvedComponentType } from '$components/code-block/imports';
   import type { LanguageType as _LanguageType } from 'svelte-highlight/languages';
@@ -79,38 +78,41 @@
 >
   {#if filename}
     <div
-      class="bg-dark/5 py-4 pl-14 font-mono text-sm transition-[background-color] dark:bg-light/5 print:bg-transparent"
+      class="bg-neutral-0 py-4 pl-14 font-mono text-sm transition-[background-color] dark:bg-neutral-800/5 print:bg-transparent"
       id="{id}-filename"
     >
       {filename}
     </div>
     <Divider margin="my-0"></Divider>
   {/if}
-  <Tooltip
-    text={copied !== undefined ? $t('Copied') : $t('Copy to clipboard')}
-    delay={200}
-    offset={[0, 2]}
-  >
+
+  <Hoverable let:hovered>
     <button
-      class="focus-outline-sm absolute right-0 z-[2] cursor-pointer rounded-sm pb-3 pl-3 pr-4 pt-4 text-dark/60 hover:text-dark/80 dark:text-light/60 dark:hover:text-light/80"
+      class="focus-outline-sm absolute right-0 z-[2] cursor-pointer rounded-xs pb-3 pl-3 pr-4 pt-4 font-mono text-xs text-dark/80 dark:text-light/80"
       class:top-1={!filename}
       class:top-12={filename}
       on:click={() => copy()}
       on:keydown={(e) => e.key === 'Enter' && copy()}
       aria-label={copied !== undefined ? $t('Copied') : $t('Copy to clipboard')}
       type="button"
     >
-      {#key copied}
-        <Icon name={copied !== undefined ? 'Check' : 'Copy'}></Icon>
-      {/key}
+      <span
+        class="-mx-2 -my-1.5 px-2 py-1.5"
+        class:bg-neutral-100={hovered}
+        class:text-dark={hovered}
+        class:dark:bg-neutral-500={hovered}
+        class:dark:text-light={hovered}
+      >
+        [{$t(copied !== undefined ? 'Copied' : 'Copy').toLowerCase()}]
+      </span>
     </button>
-  </Tooltip>
+  </Hoverable>
   <div
     class="focus-outline relative h-fit w-full overflow-hidden rounded-sm text-lg transition-[height,color]"
     bind:this={codeContainer}
   >
     <div
-      class="h-fit w-full min-w-full rounded-sm bg-dark/5 p-1 pl-10 transition-all dark:bg-light/5 print:bg-transparent"
+      class="h-fit w-full min-w-full rounded-sm bg-neutral-0 p-1 pl-10 transition-all dark:bg-neutral-100/5 print:bg-transparent"
       id="hljs-container"
       aria-hidden="true"
       bind:clientHeight={innerHeight}

svelte-app/src/components/controls/arrow-button.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
 
-  export let fullWidth = false,
+  import Hoverable from '$components/hoverable.svelte';
+
+  export let text: string,
+    placement: 'before' | 'after' = 'before',
+    dir: 'left' | 'right' | 'up' | 'down' = 'right',
     align: 'left' | 'right' = 'left';
 
   const dispatch = createEventDispatcher(),
@@ -15,21 +19,60 @@
     };
 </script>
 
-<svelte:element
-  this={self}
-  href={$$props.href || undefined}
-  class:w-full={fullWidth}
-  class:text-right={align === 'right'}
-  class:text-left={align === 'left'}
-  class="focus-outline font-code inline-block rounded-sm text-accent-light hover:text-dark focus-visible:text-dark dark:text-accent-dark dark:hover:text-light dark:focus-visible:text-light {$$props.class ??
-    ''}"
-  aria-label={$$props['aria-label'] || undefined}
-  role="button"
-  tabindex="0"
-  on:click={handleClick}
-  on:keydown={handleClick}
-  data-sveltekit-preload-code={$$props.preload ? 'hover' : 'off'}
-  data-sveltekit-preload-data={$$props.preload ? 'hover' : 'off'}
->
-  <slot />
-</svelte:element>
+<Hoverable let:hovered>
+  <svelte:element
+    this={self}
+    href={$$props.href || undefined}
+    class:text-right={align === 'right'}
+    class:text-left={align === 'left'}
+    class="focus-outline-sm -mx-2 -my-1 inline-block select-none whitespace-nowrap rounded-xs py-1 font-mono text-sm transition-colors hover:bg-neutral-100 hover:text-orange-light focus-visible:bg-neutral-100 focus-visible:text-orange-light dark:hover:bg-neutral-600 dark:focus-visible:bg-neutral-600 {$$props.class ??
+      ''}"
+    class:pr-2={placement === 'before'}
+    class:pl-3={placement === 'before'}
+    class:pr-3={placement === 'after'}
+    class:pl-2={placement === 'after'}
+    aria-label={$$props['aria-label'] || undefined}
+    role="button"
+    tabindex="0"
+    on:click={handleClick}
+    on:keydown={handleClick}
+    data-sveltekit-preload-code={$$props.preload ? 'hover' : 'off'}
+    data-sveltekit-preload-data={$$props.preload ? 'hover' : 'off'}
+  >
+    <div
+      class="flex items-center gap-2"
+      class:justify-start={align === 'left'}
+      class:justify-end={align === 'right'}
+    >
+      {#if placement === 'after'}
+        {#if $$slots.default}
+          <slot />
+        {:else}
+          {text}
+        {/if}
+      {/if}
+      <div
+        class="mt-px transition-transform"
+        class:-translate-x-1={hovered && dir === 'left'}
+        class:translate-x-1={hovered && dir === 'right'}
+      >
+        {#if dir === 'left'}
+          &larr;
+        {:else if dir === 'right'}
+          &rarr;
+        {:else if dir === 'up'}
+          &uarr;
+        {:else if dir === 'down'}
+          &darr;
+        {/if}
+      </div>
+      {#if placement === 'before'}
+        {#if $$slots.default}
+          <slot />
+        {:else}
+          {text}
+        {/if}
+      {/if}
+    </div>
+  </svelte:element>
+</Hoverable>