add luma icon & link

kalug · Dec 26, 2024 · 55f5c28 · 55f5c28
1 parent b4dcd87
commit 55f5c28
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 36 deletions.
diff --git a/src/assets/socialIcons.ts b/src/assets/socialIcons.ts
@@ -32,6 +32,7 @@ const socialIcons = {
     <circle cx="12" cy="12" r="3"></circle>
     <line x1="16.5" y1="7.5" x2="16.5" y2="7.501"></line>
   </svg>`,
+  Luma: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 724 264"><path d="M38.53 260.65H.43V27.86h38.1zm86.46 2.77c-42.25 0-66.48-22.96-66.48-63V89.33h38.1v108.28c0 23.61 8.7 32.39 32.12 32.39 30.35 0 42.73-14.54 42.73-50.17v-90.5h38.1v171.33h-36.54v-29.91c-4.99 22.98-27.12 32.67-48.03 32.67zm347.2-2.77H434.4V149.87c0-22.5-7.01-30.87-25.88-30.87-24.28 0-37.11 14.45-37.11 41.79v99.86h-37.79V149.87c0-21.93-7.23-30.87-24.94-30.87-31.59 0-38.05 32.96-38.05 41.79v99.86h-38.1V89.33h36.54v29.96c6.49-21.02 27.02-33.71 47.72-33.71 20.69 0 38.09 7.9 45.64 33.71 10.13-26.76 28.35-33.71 50.15-33.71 37.88 0 59.61 18.88 59.61 51.81v123.26h0zm76.65 2.77c-52.62 0-61.55-33.45-61.55-50.52 0-20.1 8.83-38.21 27.93-45.55 8.41-3.11 16.52-5.43 24.84-7.1 7.33-1.47 18.64-3.03 26.91-4.17l2.73-.38c14.38-2 29.67-9.21 29.67-18.62 0-16-20.51-18.39-32.74-18.39-13.87 0-23.64 3.57-27.53 10.05-3.49 6.46-3.73 7.97-4.62 13.6l-.62 4.43h-38.1l.68-5.61c1.35-11.14 3.41-19.03 6.48-24.83 10.54-20.39 31.77-30.75 63.08-30.75 26.11 0 44.63 8.23 53.26 15.94 5.31 4.6 9.1 9.84 11.89 16.46 5.84 12.36 6.32 20.63 6.32 29.4v86.43c0 8.07.78 14.97 2.31 20.5l1.76 6.35h-38.91l-.7-4.19c-.5-2.96-.67-19.75-.88-26.23-8.99 23.61-28.27 33.18-52.21 33.18zm50.53-93.72c-7.97 6.11-20.47 9.6-38.62 13.23-31.27 5.78-36.54 13.06-36.54 27.22 0 12.5 10.63 20.26 27.75 20.26 33.23 0 47.41-15.48 47.41-51.77v-8.94zm124.2-105.51C688.46 64.19 660 35.73 660 .62c0 35.11-28.46 63.57-63.57 63.57h0c35.11 0 63.57 28.46 63.57 63.57h0c0-35.11 28.46-63.57 63.57-63.57z"/></svg>`,
   LinkedIn: `<svg
     xmlns="http://www.w3.org/2000/svg"
     class="icon-tabler"

diff --git a/src/components/Card.tsx b/src/components/Card.tsx
@@ -14,6 +14,7 @@ export default function Card({ href, frontmatter, secHeading = true }: Props) {
   const ylink = "https://www.youtube.com/watch?v=" + frontmatter.youtube;
   const mlink = "https://meet.google.com/" + frontmatter.googlemeet;
   const maplink = "https://maps.app.goo.gl/" + frontmatter.googlemap;
+  const lumalink = "https://lu.ma/" + frontmatter.luma;
   //Astro.props;
 
   const headerProps = {
@@ -40,29 +41,12 @@ export default function Card({ href, frontmatter, secHeading = true }: Props) {
           </h3>
         )}
       </a>
+      {pubDatetime && (
+      <Datetime pubDatetime={pubDatetime} modDatetime={modDatetime} luma={frontmatter.luma} youtube={frontmatter.youtube}/>
+      )}
+
 
-      <Datetime pubDatetime={pubDatetime} modDatetime={modDatetime} />
 
-      {frontmatter.youtube && (
-        <p>
-          {" "}
-          <a href={ylink} target="_blank">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              className="icon-tabler"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            >
-              <path
-                fill="#F61C0D"
-                d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"
-              ></path>
-              <polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"></polygon>
-            </svg>
-            - YouTube -{" "}
-          </a>
-        </p>
-      )}
       {frontmatter.googlemeet && (
         <p>
           {" "}

diff --git a/src/components/Datetime.tsx b/src/components/Datetime.tsx
@@ -1,9 +1,11 @@
 import { LOCALE, SITE } from "@config";
 import type { CollectionEntry } from "astro:content";
+import LinkButton from "@components/LinkButton.astro";
 
 interface DatetimesProps {
   pubDatetime: string | Date;
   modDatetime: string | Date | undefined | null;
+  luma: string | undefined | null;
 }
 
 interface EditPostProps {
@@ -19,37 +21,88 @@ interface Props extends DatetimesProps, EditPostProps {
 export default function Datetime({
   pubDatetime,
   modDatetime,
+  luma,
+  youtube,
   size = "sm",
   className = "",
   editPost,
   postId,
 }: Props) {
+  var smsize = "scale-100";
+  if (size === "sm") {
+    smsize = "scale-90";
+  }
+  const lumalink = "https://lu.ma/"+luma
+  const ylink = "https://www.youtube.com/watch?v=" + youtube;
+
   return (
     <div
       className={`flex items-center space-x-2 opacity-80 ${className}`.trim()}
     >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        className={`${
-          size === "sm" ? "scale-90" : "scale-100"
-        } inline-block h-6 w-6 min-w-[1.375rem] fill-skin-base`}
-        aria-hidden="true"
-      >
-        <path d="M7 11h2v2H7zm0 4h2v2H7zm4-4h2v2h-2zm0 4h2v2h-2zm4-4h2v2h-2zm0 4h2v2h-2z"></path>
-        <path d="M5 22h14c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2h-2V2h-2v2H9V2H7v2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2zM19 8l.001 12H5V8h14z"></path>
-      </svg>
+
+       <svg xmlns="http://www.w3.org/2000/svg"
+         className={`${smsize} inline-block h-6 w-6 min-w-[1.375rem] fill-skin-base`}
+         aria-hidden="true"
+       >
+         <path d="M7 11h2v2H7zm0 4h2v2H7zm4-4h2v2h-2zm0 4h2v2h-2zm4-4h2v2h-2zm0 4h2v2h-2z"></path>
+         <path d="M5 22h14c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2h-2V2h-2v2H9V2H7v2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2zM19 8l.001 12H5V8h14z"></path>
+       </svg>
+
+    {Date.now() < new Date(pubDatetime).getTime() && luma ? (
+       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 724 264">
+         <path d="M38.53 260.65H.43V27.86h38.1zm86.46 2.77c-42.25 0-66.48-22.96-66.48-63V89.33h38.1v108.28c0 23.61 8.7 32.39 32.12 32.39 30.35 0 42.73-14.54 42.73-50.17v-90.5h38.1v171.33h-36.54v-29.91c-4.99 22.98-27.12 32.67-48.03 32.67zm347.2-2.77H434.4V149.87c0-22.5-7.01-30.87-25.88-30.87-24.28 0-37.11 14.45-37.11 41.79v99.86h-37.79V149.87c0-21.93-7.23-30.87-24.94-30.87-31.59 0-38.05 32.96-38.05 41.79v99.86h-38.1V89.33h36.54v29.96c6.49-21.02 27.02-33.71 47.72-33.71 20.69 0 38.09 7.9 45.64 33.71 10.13-26.76 28.35-33.71 50.15-33.71 37.88 0 59.61 18.88 59.61 51.81v123.26h0zm76.65 2.77c-52.62 0-61.55-33.45-61.55-50.52 0-20.1 8.83-38.21 27.93-45.55 8.41-3.11 16.52-5.43 24.84-7.1 7.33-1.47 18.64-3.03 26.91-4.17l2.73-.38c14.38-2 29.67-9.21 29.67-18.62 0-16-20.51-18.39-32.74-18.39-13.87 0-23.64 3.57-27.53 10.05-3.49 6.46-3.73 7.97-4.62 13.6l-.62 4.43h-38.1l.68-5.61c1.35-11.14 3.41-19.03 6.48-24.83 10.54-20.39 31.77-30.75 63.08-30.75 26.11 0 44.63 8.23 53.26 15.94 5.31 4.6 9.1 9.84 11.89 16.46 5.84 12.36 6.32 20.63 6.32 29.4v86.43c0 8.07.78 14.97 2.31 20.5l1.76 6.35h-38.91l-.7-4.19c-.5-2.96-.67-19.75-.88-26.23-8.99 23.61-28.27 33.18-52.21 33.18zm50.53-93.72c-7.97 6.11-20.47 9.6-38.62 13.23-31.27 5.78-36.54 13.06-36.54 27.22 0 12.5 10.63 20.26 27.75 20.26 33.23 0 47.41-15.48 47.41-51.77v-8.94zm124.2-105.51C688.46 64.19 660 35.73 660 .62c0 35.11-28.46 63.57-63.57 63.57h0c35.11 0 63.57 28.46 63.57 63.57h0c0-35.11 28.46-63.57 63.57-63.57z"/></svg>
+
+      ) : (
+        <p />
+    )}
+
+
+
       {modDatetime && modDatetime > pubDatetime ? (
         <span className={`italic ${size === "sm" ? "text-sm" : "text-base"}`}>
           Updated:
         </span>
       ) : (
         <span className="sr-only">Published:</span>
       )}
+
       <span className={`italic ${size === "sm" ? "text-sm" : "text-base"}`}>
-        <FormattedDatetime
-          pubDatetime={pubDatetime}
-          modDatetime={modDatetime}
-        />
+    {Date.now() < new Date(pubDatetime).getTime() && luma ? (
+
+      <a href={lumalink} target="_blank"
+         className="hover:underline hover:opacity-75"
+       >
+          <FormattedDatetime
+            pubDatetime={pubDatetime}
+            modDatetime={modDatetime}
+          />
+      </a>
+    ) : (
+
+          <FormattedDatetime
+            pubDatetime={pubDatetime}
+            modDatetime={modDatetime}
+          />
+    )}
+      {youtube && (
+          <a href={ylink} target="_blank">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="icon-tabler"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path
+                fill="#F61C0D"
+                d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"
+              ></path>
+              <polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"></polygon>
+            </svg>
+          </a>
+      )}
+
+
+
         {size === "lg" && <EditPost editPost={editPost} postId={postId} />}
       </span>
     </div>

diff --git a/src/content/config.ts b/src/content/config.ts
@@ -8,7 +8,7 @@ const blog = defineCollection({
   schema: ({ image }) =>
     z.object({
       author: z.string().default(SITE.author),
-      pubDatetime: z.date(),
+      pubDatetime: z.date().optional().nullable(),
       modDatetime: z.date().optional().nullable(),
       title: z.string(),
       featured: z.boolean().optional(),
@@ -22,6 +22,7 @@ const blog = defineCollection({
         .optional(),
       youtube: z.string().optional(),
       googlemeet: z.string().optional(),
+      luma: z.string().optional(),
       hackmd: z.string().optional(),
       googlemap: z.string().optional(),
       meetupLocation: z.string().optional(),

diff --git a/src/layouts/PostDetails.astro b/src/layouts/PostDetails.astro
@@ -29,6 +29,7 @@ const {
   modDatetime,
   tags,
   youtube,
+  luma,
   googlemeet,
   editPost,
 } = post.data;
@@ -86,14 +87,17 @@ const nextPost =
   </div>
   <main id="main-content">
     <h1 transition:name={slugifyStr(title)} class="post-title">{title}</h1>
+
     <Datetime
       pubDatetime={pubDatetime}
       modDatetime={modDatetime}
+      luma={luma}
       size="lg"
       className="my-2"
       editPost={editPost}
       postId={post.id}
     />
+
       {
       googlemeet && (
 	  <p> <a href={mlink}>