Merge pull request #7 from LR-Tech-Blog/image-post-href

src/components/AuthorAvatar.astro

@@ -1,18 +1,42 @@
 ---
 import type { AuthorProfile } from "../scripts/types/post_types";
-import { AuthorProfileImageType } from "../scripts/types/post_types"
+import { AuthorProfileImageType } from "../scripts/types/post_types";
 import { getGravatarImageUrl } from "../scripts/utils";
-import { Image } from 'astro:assets';
+import undefinedImage from "../images/undefined.jpg";
+import { Image } from "astro:assets";
 
 interface Props {
-    adm: AuthorProfile
+  adm: AuthorProfile;
 }
 
-const imageSize = 200
+const imageSize = 200;
 
-const { adm } = Astro.props
+const { adm } = Astro.props;
 //TODO: Add default user image
-const imageUrl = adm.profileImageType === AuthorProfileImageType.Gravatar ? getGravatarImageUrl(adm.email, imageSize) : adm.profileImageUrl ?? ""
+const imageUrl =
+  adm.profileImageType === AuthorProfileImageType.Gravatar
+    ? getGravatarImageUrl(adm.email, imageSize)
+    : adm.profileImageUrl;
+const imageAlt = adm.profileImageAlt ?? adm.name;
+console.log(imageUrl);
 ---
-<Image class="rounded-xl object-cover" src={imageUrl} alt={adm.profileImageAlt} 
-width={imageSize} height={imageSize}>
+
+{
+  imageUrl === null ? (
+    <Image
+      class="rounded-xl object-cover"
+      src={undefinedImage}
+      alt={imageAlt}
+      width={imageSize}
+      height={imageSize}
+    />
+  ) : (
+    <Image
+      class="rounded-xl object-cover"
+      src={imageUrl}
+      alt={imageAlt}
+      width={imageSize}
+      height={imageSize}
+    />
+  )
+}

src/components/KeyboardKey.astro

@@ -0,0 +1,11 @@
+---
+interface Props {
+    kbKey: string
+}
+
+const { kbKey } = Astro.props
+---
+
+<kbd class="kdb text-text dark:text-dark_text">
+    {kbKey}
+</kbd>

src/components/Logo.astro

@@ -1,9 +1,12 @@
 ---
-import { Image } from 'astro:assets';
+import { Image } from "astro:assets";
+import lrLogo from "../images/lr_logo.png"
+
+const logoAlt = "Logo LR Tech Blog"
 ---
 
 <div class="saturate-100 hue-rotate-30 btn btn-ghost h-auto">
     <a href="/">
-        <img src="/images/lr_logo.png" alt="logo-blog" class="transition hover:scale-105" width="90"/>
+        <Image class:list={"transition hover:scale-105"} src={lrLogo} alt={logoAlt} width={90} />
     </a>
 </div>

src/components/PostImageHero.astro

@@ -0,0 +1,32 @@
+---
+import type { PostImage } from "../scripts/types/post_types";
+
+interface Props {
+  image: PostImage;
+}
+
+const { image } = Astro.props;
+const { src, alt, href } = image;
+---
+
+{
+  href === undefined ? (
+    <img
+      src={src}
+      alt={alt}
+      class="relative rounded-xl mb-5 
+      h-96 w-screen shadow-md object-cover"
+      transition:animate="slide"
+    />
+  ) : (
+    <a href={href} target="_blank">
+      <img
+        src={src}
+        alt={alt}
+        class="relative rounded-xl mb-5 
+      h-96 w-screen shadow-md object-cover"
+        transition:animate="slide"
+      />
+    </a>
+  )
+}

src/content/config.ts

@@ -13,7 +13,8 @@ const blogCollection = defineCollection({
         description: z.string(),
         image: z.object({
             src: z.string(),
-            alt: z.string()
+            alt: z.string(),
+            href: z.string().url().optional(),
         })
     })
 })

src/content/posts/components_test.mdx

@@ -14,6 +14,7 @@ image: {
 }
 ---
 import DynamicImage from "../../components/DynamicImage.astro"
+import KeyboardKey from "../../components/KeyboardKey.astro"
 
 # Header 1
 Header 1
@@ -45,4 +46,9 @@ public class Program
 
 ### Vídeo Dinâmico
 Este vídeo muda de acordo com o tema do site
-<DynamicImage src="/images/posts/components_test/components_test_light.gif" srcDark="/images/posts/components_test/components_test_dark.gif"/>
+<DynamicImage src="/images/posts/components_test/components_test_light.gif" srcDark="/images/posts/components_test/components_test_dark.gif"/>
+
+### Teclas de Atalho
+<KeyboardKey kbKey="Ctrl" />
+
+A tecla <KeyboardKey kbKey="Ctrl"/> dentro de um paragrafo

src/content/posts/hello_world.mdx

@@ -11,7 +11,8 @@ postType: "Showcase"
 description: "Esta é a descrição do post"
 image: {
     "src": "/images/posts/hello_world.jpg",
-    "alt": "Hello World"
+    "alt": "Hello World",
+    "href": "https://www.youtube.com/watch?v=Yw6u6YkTgQ4&ab_channel=LouieZong"
 }
 ---
 # Header 1

src/layouts/PostLayout.astro

@@ -5,6 +5,8 @@ import type { AuthorProfile, PostData } from "../scripts/types/post_types";
 import PostSideBarLeft from "../components/PostSideBarLeft.astro";
 import TagsViewer from "../components/TagsViewer.astro";
 import PostTypeTag from "../components/PostTypeBadge.astro";
+import PostImageHero from "../components/PostImageHero.astro";
+import { imageConfig } from "astro:assets";
 
 interface Props {
   id: string;
@@ -20,26 +22,25 @@ const formatedDate = date.toLocaleDateString("pt-br");
 <LayoutBase title={title} bttEnable metaDescription={description}>
   <main class="sm:mx-5 md:mx-28">
     <div class="flex flex-col gap-5 mb-5">
-      <PostSideBarLeft/>
+      <PostSideBarLeft />
       <header class="flex flex-col">
-        <img src={image.src} alt={image.alt} class="relative rounded-xl mb-5 
-            h-96 w-screen shadow-md object-cover" transition:animate="slide"/>
+        <PostImageHero image={image} />
         <div class="flex flex-col mb-3">
-            <div class="flex flex-row items-center gap-3">
-                <h1 transition:name={id}>{title}</h1>
-                <span transition:name={id + postType}>
-                    <PostTypeTag text={postType}/>
-                </span>
-            </div>
-            <small>by {author.name} ● {formatedDate}</small>
+          <div class="flex flex-row items-center gap-3">
+            <h1 transition:name={id}>{title}</h1>
+            <span transition:name={id + postType}>
+              <PostTypeTag text={postType} />
+            </span>
+          </div>
+          <small>by {author.name} ● {formatedDate}</small>
         </div>
-        <TagsViewer tags={tags}/>
-    </header>
-  </div>
-  <article class="self-center">
-    <Prose>
-        <slot/>
-    </Prose>
-</article>
+        <TagsViewer tags={tags} />
+      </header>
+    </div>
+    <article class="self-center">
+      <Prose>
+        <slot />
+      </Prose>
+    </article>
   </main>
-</LayoutPage>
+</LayoutBase>

src/pages/404.astro

@@ -1,22 +1,15 @@
 ---
 import Icon from "astro-icon";
 import LayoutPage from "../layouts/LayoutPage.astro";
-import { generateRandomNumber } from "../scripts/utils"
 import { getRandomEmoji } from "../scripts/emoji"
-export const prerender = false
 
-const iconIndex = generateRandomNumber(0, 20)
 const emoji = getRandomEmoji()
-console.log(`Icon frequency: ${iconIndex}`);
 console.log(`Emojo: ${emoji}`);
 ---
 
 <LayoutPage title="Você digitou erardo?">
     <div class="flex flex-col items-center justify-center sm:text-center h-52">
-        {
-            iconIndex > 5 ? <Icon name="file-off" height="40" width="40"/> : 
-            <Icon name="downasaur" height="40" width="40"/>
-        }
+        <Icon name="downasaur" height="40" width="40"/>
         <h2>
             Esta pagina não existe.
         </h2>

src/pages/about.astro

@@ -1,8 +1,8 @@
 ---
 import { getEntry } from "astro:content";
-import GravatarAvatar from "../components/AuthorAvatar.astro";
+import AuthorAvatar from "../components/AuthorAvatar.astro";
 import LayoutPage from "../layouts/LayoutPage.astro";
-import type { AuthorProfile, AuthorDescription } from "../scripts/types/post_types";
+import type { AuthorProfile } from "../scripts/types/post_types";
 import Icon from "astro-icon";
 import IconButton from "../components/IconButton.astro";
 import Prose from "../components/Prose.astro";
@@ -21,10 +21,10 @@ const linkedinUrl = adm.linkedin;
 ---
 
 <LayoutPage title={title}>
-    <div
+  <div
     class="flex sm:gap-2 md:max-2xl:gap-5 sm:flex-col md:max-2xl:flex-row mb-3"
   >
-    <GravatarAvatar adm={adm} />
+    <AuthorAvatar adm={adm} />
     <div class="flex flex-col sm:gap-2">
       <h1>{adm.name}</h1>
       <div class="flex flex-row gap-2 items-center">
@@ -81,4 +81,4 @@ const linkedinUrl = adm.linkedin;
   }
 
   customElements.define("social-button", SocialButton);
-</script>
+</script>

src/scripts/types/post_types.ts

@@ -1,6 +1,7 @@
 export interface PostImage {
     src: string,
-    alt: string
+    alt: string,
+    href?: string | undefined,
 }
 export interface PostData {
     id: string,