@reuters-graphics/graphics-components 3.2.1 → 3.3.1

package/dist/components/BlogTOC/BlogTOC.svelte

@@ -0,0 +1,270 @@
+<script lang="ts">
+  import Block from '../Block/Block.svelte';
+  import TOCList from './TOCList.svelte';
+  import { apmonth } from 'journalize';
+  import { slugify } from '../../utils';
+  import { slide } from 'svelte/transition';
+  import Fa from 'svelte-fa';
+  import {
+    faCaretDown,
+    faAngleDoubleUp,
+    faAngleDoubleDown,
+  } from '@fortawesome/free-solid-svg-icons';
+
+  interface Post {
+    title: string;
+    slugTitle: string;
+    publishTime: string;
+  }
+
+  interface Props {
+    posts: Post[];
+    /** Base path prepended to post links, e.g. "/graphics". */
+    base: string;
+    /** The label for the table of contents toggle button. */
+    label?: string;
+    /** The maximum height of the table of contents list in pixels. */
+    maxHeight?: number;
+  }
+
+  let {
+    posts,
+    base = '',
+    label = 'Show all articles',
+    maxHeight = 300,
+  }: Props = $props();
+
+  let showContents = $state(false);
+  let scrollPos = $state(0);
+  let listHeight = $state(0);
+
+  const contents = $derived(
+    [...posts]
+      .sort(
+        (a, b) =>
+          new Date(a.publishTime).getTime() - new Date(b.publishTime).getTime()
+      )
+      .reduce(
+        (acc, post) => {
+          const d = new Date(post.publishTime);
+          const dateKey = `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
+          const existing = acc.find((entry) => entry.dateKey === dateKey);
+          const event = {
+            title: post.title,
+            titleLink: `${base}/#${slugify(post.slugTitle)}`,
+          };
+          if (existing) {
+            existing.events.push(event);
+          } else {
+            acc.push({
+              dateKey,
+              date: `${apmonth(d)} ${d.getDate()}`,
+              events: [event],
+            });
+          }
+          return acc;
+        },
+        [] as {
+          dateKey: string;
+          date: string;
+          events: { title: string; titleLink: string }[];
+        }[]
+      )
+      .map(({ dateKey: _dateKey, ...rest }) => rest)
+  );
+</script>
+
+{#if contents.length > 1}
+  <Block width="fluid" class="mt-4 mb-0">
+    <div class="toc-gutter">
+      <div class="table-of-contents" style="--mh: {maxHeight}px;">
+        <div class="flex w-full">
+          <button
+            onclick={() => {
+              showContents = !showContents;
+              scrollPos = 0;
+            }}
+          >
+            <div class="icon" class:expanded={showContents}>
+              <Fa icon={faCaretDown} size="lg" />
+            </div>
+            <div class="label text-xs leading-loose tracking-wide py-0.5">
+              {label}
+            </div>
+          </button>
+        </div>
+        <Block
+          width="normal"
+          class="my-0 ml-2 relative {showContents ? 'fpb-6' : ''}"
+        >
+          <div>
+            {#if showContents}
+              <div
+                class="content-container fmt-3"
+                transition:slide={{ axis: 'y', duration: 350 }}
+                onscroll={(e) => {
+                  scrollPos = e.currentTarget.scrollTop;
+                }}
+              >
+                <TOCList dates={contents} bind:listHeight />
+
+                {#if scrollPos > 10 && listHeight > maxHeight}
+                  <div class="scroll-icon up">
+                    <Fa icon={faAngleDoubleUp} />
+                  </div>
+                {/if}
+
+                {#if listHeight > maxHeight && scrollPos < 0.95 * (listHeight - maxHeight)}
+                  <div class="scroll-icon down">
+                    <Fa icon={faAngleDoubleDown} />
+                  </div>
+                {/if}
+              </div>
+            {/if}
+          </div></Block
+        >
+      </div>
+    </div>
+  </Block>
+{/if}
+
+<style>/* Generated from 
+https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
+*/
+/* Generated from 
+https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
+*/
+/* Scales by 1.125 */
+.toc-gutter {
+  padding: 5px 0 0;
+  margin-bottom: -40px;
+}
+
+.table-of-contents {
+  overflow: hidden;
+  max-width: var(--normal-column-width);
+  margin-left: auto;
+  margin-right: auto;
+}
+.table-of-contents > div {
+  display: flex;
+  justify-content: center;
+}
+
+.content-container {
+  max-height: var(--mh);
+  overflow-y: auto;
+  scroll-snap-type: y mandatory;
+}
+
+.scroll-icon {
+  position: absolute;
+  margin-left: -4px;
+  color: var(--theme-colour-text-secondary);
+  background-color: var(--theme-colour-background);
+  border-radius: 50%;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.scroll-icon.up {
+  top: 0px;
+  animation: fade_scroll_up 1.5s ease-in-out infinite;
+}
+.scroll-icon.down {
+  bottom: 30px;
+  animation: fade_scroll_down 1.5s ease-in-out infinite;
+}
+
+@keyframes fade_scroll_up {
+  0% {
+    transform: translate(0, 5px);
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    transform: translate(0, -10px);
+    opacity: 0;
+  }
+}
+@keyframes fade_scroll_down {
+  0% {
+    transform: translate(0, -10px);
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    transform: translate(0, 5px);
+    opacity: 0;
+  }
+}
+button {
+  border: 0;
+  background-color: transparent;
+  display: inline-flex;
+  font-family: var(--theme-font-family-hed);
+  font-weight: normal;
+  padding: 0 5px;
+  color: var(--theme-colour-accent);
+  font-size: var(--theme-font-size-sm);
+  align-items: center;
+  cursor: pointer;
+  border: 1px solid var(--tr-muted-grey);
+  border-radius: 50px;
+}
+button:hover {
+  border: 1px solid var(--theme-colour-text-secondary);
+  background-color: #efefef;
+}
+button:hover div.label {
+  color: var(--theme-colour-text-primary);
+}
+button:hover div.icon {
+  color: var(--theme-colour-text-secondary);
+}
+button div.icon {
+  z-index: 1;
+  font-size: var(--theme-font-size-sm);
+  line-height: 1.7;
+  width: 18px;
+  height: 24px;
+  margin-left: 6px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--tr-light-grey);
+  border-radius: 50%;
+  transition: transform 0.3s ease;
+}
+button div.icon.expanded {
+  transform: rotate(180deg);
+}
+button div.label {
+  color: var(--theme-colour-text-secondary);
+  display: inline-flex;
+  font-weight: 500;
+  padding-inline-start: clamp(1.13rem, 1.06rem + 0.31vw, 1.31rem);
+  padding-inline-end: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
+  margin-left: -15px;
+  position: relative;
+  border-top-right-radius: 20px;
+  border-bottom-right-radius: 20px;
+  font-style: italic;
+}
+button div.label:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.2;
+  border-top-right-radius: 20px;
+  border-bottom-right-radius: 20px;
+}</style>

package/dist/components/BlogTOC/BlogTOC.svelte.d.ts

@@ -0,0 +1,17 @@
+interface Post {
+    title: string;
+    slugTitle: string;
+    publishTime: string;
+}
+interface Props {
+    posts: Post[];
+    /** Base path prepended to post links, e.g. "/graphics". */
+    base: string;
+    /** The label for the table of contents toggle button. */
+    label?: string;
+    /** The maximum height of the table of contents list in pixels. */
+    maxHeight?: number;
+}
+declare const BlogToc: import("svelte").Component<Props, {}, "">;
+type BlogToc = ReturnType<typeof BlogToc>;
+export default BlogToc;

package/dist/components/BlogTOC/TOCList.svelte

@@ -0,0 +1,134 @@
+<script lang="ts">
+  import Block from '../Block/Block.svelte';
+
+  interface DateEvent {
+    title: string;
+    titleLink: string;
+  }
+
+  interface DateEntry {
+    date: string;
+    events: DateEvent[];
+  }
+
+  interface Props {
+    dates: DateEntry[];
+    /** Colour for the timeline bullet symbols and line. */
+    symbolColour?: string;
+    /** Colour for the date headings. */
+    dateColour?: string;
+    /** The height of the list, bindable for the parent to read. */
+    listHeight?: number;
+    id?: string;
+    class?: string;
+  }
+
+  let {
+    dates,
+    symbolColour = 'var(--theme-colour-brand-rules)',
+    dateColour = 'var(--theme-colour-accent, red)',
+    listHeight = $bindable(0),
+    id = '',
+    class: cls = '',
+  }: Props = $props();
+</script>
+
+<Block width="normal" {id} class="simple-timeline-container {cls}">
+  <div
+    bind:clientHeight={listHeight}
+    class="timeline"
+    style="--symbol-colour:{symbolColour};"
+  >
+    {#each dates as date}
+      <div class="date">
+        <svg class="absolute bg" height="25" width="20">
+          <circle
+            cx="10"
+            cy="12"
+            r="5"
+            stroke={symbolColour}
+            stroke-width="2"
+            fill="transparent"
+          ></circle>
+        </svg>
+        <div class="timeline-date" style:color={dateColour}>
+          {date.date}
+        </div>
+        {#each date.events as event}
+          <div class="event">
+            <a href={event.titleLink}>
+              <div class="title">{event.title}</div>
+            </a>
+          </div>
+        {/each}
+      </div>
+    {/each}
+  </div>
+</Block>
+
+<style>/* Generated from 
+https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
+*/
+/* Generated from 
+https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
+*/
+/* Scales by 1.125 */
+.timeline {
+  padding-left: 0.5rem;
+  padding-right: 0.875rem;
+}
+.timeline .date {
+  position: relative;
+  padding-top: 0.125rem;
+  padding-left: 1.25rem;
+  padding-bottom: 1rem;
+  scroll-snap-align: start;
+  border-left: 1px solid var(--symbol-colour);
+}
+.timeline .date:last-child {
+  border-left: 1px solid var(--theme-colour-background);
+  padding-block-end: 0;
+}
+.timeline .timeline-date {
+  font-family: var(--theme-font-family-note);
+  font-size: var(--theme-font-size-xxs);
+  text-transform: uppercase;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  margin-block-end: 0;
+}
+.timeline svg {
+  top: -1px;
+  left: -10.5px;
+}
+.timeline div.title {
+  color: var(--theme-colour-text-primary);
+  font-weight: 600;
+  font-family: var(--theme-font-family-subhed);
+  line-height: 1.15;
+  font-size: var(--theme-font-size-base);
+  margin-block-start: clamp(1.69rem, 1.58rem + 0.52vw, 2rem);
+  margin-block-end: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
+  font-size: var(--theme-font-size-base);
+  margin-block-start: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
+  margin-block-end: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
+  font-weight: 500;
+}
+.timeline div.event {
+  margin-bottom: 0.75rem;
+}
+.timeline div.event a {
+  text-decoration: none;
+}
+.timeline div.event a:hover {
+  text-decoration: underline;
+}
+.timeline div.event :global(p) {
+  margin-block-start: 0;
+  margin-block-end: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
+  font-family: var(--theme-font-family-note);
+  font-size: calc(0.9 * var(--theme-font-size-base));
+  color: var(--theme-colour-text-primary);
+  line-height: 1.3;
+  font-weight: 300;
+}</style>

package/dist/components/BlogTOC/TOCList.svelte.d.ts

@@ -0,0 +1,22 @@
+interface DateEvent {
+    title: string;
+    titleLink: string;
+}
+interface DateEntry {
+    date: string;
+    events: DateEvent[];
+}
+interface Props {
+    dates: DateEntry[];
+    /** Colour for the timeline bullet symbols and line. */
+    symbolColour?: string;
+    /** Colour for the date headings. */
+    dateColour?: string;
+    /** The height of the list, bindable for the parent to read. */
+    listHeight?: number;
+    id?: string;
+    class?: string;
+}
+declare const TocList: import("svelte").Component<Props, {}, "listHeight">;
+type TocList = ReturnType<typeof TocList>;
+export default TocList;

package/dist/components/Byline/Byline.svelte

@@ -13,7 +13,7 @@
     /**
      * Publish time as a datetime string.
      */
-    publishTime: string;
+    publishTime?: string;
     /**
      * Update time as a datetime string.
      */
@@ -52,7 +52,7 @@
 
   let {
     authors = [],
-    publishTime,
+    publishTime = '',
     updateTime,
     align = 'auto',
     id = '',

package/dist/components/Byline/Byline.svelte.d.ts

@@ -7,7 +7,7 @@ interface Props {
     /**
      * Publish time as a datetime string.
      */
-    publishTime: string;
+    publishTime?: string;
     /**
      * Update time as a datetime string.
      */