move all contents to collections

dwightjack · Jun 30, 2023 · 3c39bca · 3c39bca
1 parent 108020e
commit 3c39bca
Show file tree

Hide file tree

Showing 33 changed files with 541 additions and 661 deletions.
diff --git a/scripts/json-to-md.mjs b/scripts/json-to-md.mjs
diff --git a/src/components/Card.astro b/src/components/Card.astro
@@ -1,7 +1,5 @@
 ---
-import Cluster from './Cluster.astro';
 import DateTime from './DateTime.astro';
-import ExternalAnchor from './ExternalAnchor.astro';
 export interface Props {
   id: string;
   titleLabel?: string;
@@ -11,27 +9,7 @@ export interface Props {
   meta?: Record<string, string>[];
 }
 
-const { id, titleLabel, href, title = '', data = {}, meta = [] } = Astro.props;
-
-function isDate(heading: string) {
-  return heading === 'to' || heading === 'from' || heading === 'date';
-}
-
-function metaTitle(meta: Record<string, string>) {
-  switch (meta.type) {
-    case 'video':
-      return `Watch video for: ${title}`;
-
-    case 'slides':
-      return `Slides for: ${title}`;
-
-    case 'award':
-      return `${meta.label || 'Award'} details for ${title}`;
-
-    default:
-      return '';
-  }
-}
+const { id, titleLabel, href, title = '', data = {} } = Astro.props;
 ---
 
 <article class="c-card">
@@ -58,8 +36,7 @@ function metaTitle(meta: Record<string, string>) {
             <div data-row={heading}>
               <dt>.{heading}:</dt>
               <dd>
-                {(isDate(heading) && typeof value === 'string') ||
-                value instanceof Date ? (
+                {value instanceof Date ? (
                   <DateTime datetime={value} />
                 ) : (
                   <Fragment set:html={value} />
@@ -70,23 +47,7 @@ function metaTitle(meta: Record<string, string>) {
       )
     }
   </dl>
-  {
-    meta.length > 0 && (
-      <Cluster as="footer" space={1}>
-        {meta.map((meta) => (
-          <ExternalAnchor
-            variant="cursor"
-            href={meta.link}
-            icon={meta.icon || meta.type}
-            title={title && metaTitle(meta)}
-          >
-            {meta.label || meta.type}
-            {meta.type === 'video' && meta.lang && ` (${meta.lang})`}
-          </ExternalAnchor>
-        ))}
-      </Cluster>
-    )
-  }
+  <slot name="footer" />
 </article>
 <style>
   .c-card {

diff --git a/src/components/ExternalAnchor.astro b/src/components/ExternalAnchor.astro
diff --git a/src/components/MediaLink.astro b/src/components/MediaLink.astro
@@ -0,0 +1,77 @@
+---
+import Icon from './Icon.astro';
+import type { HTMLAttributes } from 'astro/types';
+
+export interface Props extends HTMLAttributes<'a'> {
+  type: 'video' | 'slides' | 'award';
+  icon?: string;
+}
+
+const { icon, type, ...attrs } = Astro.props;
+---
+
+<a
+  target="_blank"
+  rel="noopener noreferrer external"
+  class="c-media-link"
+  {...attrs}
+>
+  <Icon name={icon || type} size={1.2} />
+  <span class="c-media-link__label"
+    ><slot />
+    <span class="u-visuallyhidden">(Opens in another tab)</span>
+  </span>
+</a>
+<style>
+  .c-media-link {
+    display: flex;
+    column-gap: 0.2em;
+    color: currentcolor;
+    text-decoration: none;
+  }
+
+  .c-media-link > *:not(.c-media-link__label) {
+    flex-shrink: 0;
+  }
+
+  .c-media-link__label {
+    flex-grow: 1;
+
+    &::before {
+      content: '';
+      display: inline-block;
+      inline-size: 0.5em;
+      margin-inline-end: 0.1em;
+      transform: translateY(0.1em);
+      border-block-end: 2px solid currentcolor;
+    }
+  }
+
+  @media (--pointer-mouse) {
+    .c-media-link:hover .c-media-link__label::before {
+      animation-name: blinking-cursor;
+      animation-duration: 0.7s;
+      animation-timing-function: ease-out;
+      animation-iteration-count: infinite;
+      color: var(--navigation-color-foreground-hover);
+    }
+  }
+
+  @keyframes blinking-cursor {
+    0% {
+      opacity: 1;
+    }
+
+    30% {
+      opacity: 0;
+    }
+
+    50% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+</style>
diff --git a/src/content/config.ts b/src/content/config.ts
@@ -20,7 +20,64 @@ const educationCollection = defineCollection({
   }),
 });
 
+const skillCollection = defineCollection({
+  type: 'data',
+  schema: z.object({
+    label: z.string(),
+    icon: z.string(),
+    data: z.array(
+      z.object({
+        id: z.string(),
+        label: z.string(),
+        icon: z.string(),
+      }),
+    ),
+  }),
+});
+
+const talkCollection = defineCollection({
+  type: 'data',
+  schema: z.object({
+    title: z.string(),
+    date: z.date(),
+    conf: z.string(),
+    href: z.string().url(),
+    media: z.array(
+      z.object({
+        icon: z.string().optional(),
+        type: z.enum(['video', 'slides', 'award'] as const),
+        lang: z.string().optional(),
+        href: z.string().url(),
+      }),
+    ),
+  }),
+});
+
+const workCollection = defineCollection({
+  type: 'data',
+  schema: z.object({
+    project: z.string(),
+    date: z.date(),
+    stack: z.array(z.string()),
+    tasks: z.array(z.string()),
+    href: z.string().url(),
+    media: z
+      .array(
+        z.object({
+          icon: z.string().optional(),
+          type: z.enum(['video', 'slides', 'award'] as const),
+          href: z.string().url(),
+          label: z.string().optional(),
+        }),
+      )
+      .optional(),
+  }),
+});
+
 export const collections = {
   jobs: jobCollection,
   education: educationCollection,
+  skills: skillCollection,
+  talks: talkCollection,
+  works: workCollection,
 };
diff --git a/src/content/skills/best_practices.yaml b/src/content/skills/best_practices.yaml
@@ -0,0 +1,18 @@
+label: Best Practices
+icon: heart
+data:
+- id: progressive
+  label: Progressive Enhancement
+  icon: mdi:escalator-up
+- id: atomic
+  label: Atomic Design
+  icon: "@atomic"
+- id: a11y
+  label: Accessibility
+  icon: mdi:wheelchair-accessibility
+- id: responsive
+  label: Responsive Design
+  icon: mdi:responsive
+- id: ds
+  label: Design Systems
+  icon: mdi:layers-triple
diff --git a/src/content/skills/build_tools.yaml b/src/content/skills/build_tools.yaml
@@ -0,0 +1,21 @@
+label: Build Tools
+icon: terminal
+data:
+- id: vite
+  label: Vite
+  icon: logos:vitejs
+- id: webpack
+  label: webpack
+  icon: logos:webpack
+- id: rollup
+  label: Rollup
+  icon: logos:rollupjs
+- id: esbuild
+  label: esbuild
+  icon: logos:esbuild
+- id: turborepo
+  label: Turborepo
+  icon: logos:turborepo-icon
+- id: gulp
+  label: gulp
+  icon: logos:gulp
diff --git a/src/content/skills/dx.yaml b/src/content/skills/dx.yaml
@@ -0,0 +1,24 @@
+label: Developer Experience
+icon: tools
+data:
+- id: jest
+  label: Jest
+  icon: logos:jest
+- id: Cypress
+  label: Cypress
+  icon: "@cypress"
+- id: vitest
+  label: Vitest
+  icon: "@vitest"
+- id: chai
+  label: Mocha + Chai
+  icon: logos:chai
+- id: eslint
+  label: eslint
+  icon: logos:eslint
+- id: linting-style
+  label: stylelint
+  icon: logos:stylelint
+- id: design-system
+  label: Storybook
+  icon: logos:storybook-icon