Updated

src/components/ArticleCard.astro

@@ -14,7 +14,7 @@ interface Props {
   categoryColor: string
 }
 
-const { title, subtitle, date, imageA, imageW, alt, minutes, url, category, categoryColor } = Astro.props
+const { title, subtitle, date, imageA, imageW, alt = 'article image', minutes, url, category = 'Technology', categoryColor = 'blue' } = Astro.props
 ---
 
 <section class="article">
@@ -29,7 +29,7 @@ const { title, subtitle, date, imageA, imageW, alt, minutes, url, category, cate
         <Padding top={0} bottom={1} left={1} right={1}>
           <Padding top={0} bottom={1} left={0} right={0}>
             <Row content="left" gap={0.5}>
-              <span class=`category--${categoryColor}`>{category}</span>
+              <span class={`category--${categoryColor}`}>{category}</span>
               <span class="minutes">{minutes} min read</span>
             </Row>
           </Padding>
@@ -59,7 +59,7 @@ const { title, subtitle, date, imageA, imageW, alt, minutes, url, category, cate
   $red: #521d2c
 
   .article
-    max-width: 30rem
+    max-width: 23rem
     height: auto
     background-color: color.adjust(#0A0A0A, $lightness: 9%)
     border-radius: 1rem
@@ -69,19 +69,21 @@ const { title, subtitle, date, imageA, imageW, alt, minutes, url, category, cate
       height: auto
 
     &__title
-      font-size: 1rem
+      font-size: 0.8rem
       font-weight: 700
       font-family: fonts.$Literata
 
     &__subtitle
-      font-size: 0.75rem
+      font-size: 0.65rem
       font-weight: 500
       opacity: 0.8
 
   .dateandtime
+    font-family: fonts.$Inter
     width: 100%
     padding: 0.5rem 0 0 0
-    font-size: 0.75rem
+    font-size: 0.5rem
+    font-weight: 500
     opacity: 0.6
 
   .picture

src/content/articles/5-tech-icons-and-their-meaning.md

@@ -4,14 +4,14 @@ title: "5 Tech Icons And Their Meaning"
 subtitle: "The meaning behind these technology icons"
 date: "Dec 9, 2024"
 minutes: 5
-url: "read/5-tech-icons-and-their-meaning"
+category: Technology
 ---
 
-<!--<style>
+<picture>
-p {
+  <source srcset="../../../@dasig/images/5-tech-icons-and-their-meaning.avif" type="image/avif">
-  color: red;
+  <source srcset="../../../@dasig/images/5-tech-icons-and-their-meaning.webp" type="image/webp">
-}
+  <img alt="5 Tech Icons And Their Meaning">
-</style>-->
+</picture>
 
 An icon is a small image or symbol used to represent a concept, idea, or, in this case, a function or a technological indication. And digital icons are found everywhere, especially on software and website designs. Thanks to online resources like Material Fonts, Flaticon, Font Awesome, and many more.
 
@@ -21,8 +21,56 @@ But there are few icons that have ambiguous designs. Although they are highly re
 
 ## Power Icon
 
-Image created by the Author
+<picture>
+  <source srcset="../../../@dasig/images/power.avif" type="image/avif">
+  <source srcset="../../../@dasig/images/power.webp" type="image/webp">
+  <img alt="5 Tech Icons And Their Meaning">
+</picture>
 
 An incomplete circle with a small line interfering with its arc — that’s an odd representation for a power button, isn’t it?. However, there’s actually a meaning behind it that ties closely to how electronic machines work.
 
 Every machine that operates on electricity understands just two digits: 1 and 0. In simple terms, this translates to the presence of electricity (1) and the absence of electricity (0), or on and off, if you prefer. Going back to the icon, if you look closely, you’ll see that it is just a smooth collaboration between 1 and 0.
+
+## Bluetooth Icon
+
+<picture>
+  <source srcset="../../../@dasig/images/bluetooth.avif" type="image/avif">
+  <source srcset="../../../@dasig/images/bluetooth.webp" type="image/webp">
+  <img alt="5 Tech Icons And Their Meaning">
+</picture>
+
+Unlike the other entries on this list, this icon has nothing to do with technology but rather with history. Have you wondered where the name “Bluetooth” came from and why a name like that was chosen for a technology that had nothing to do with dental or even colors?
+
+To explain the icon, we need to go back to the years between 958 and 986, during which a Viking king known as King Harald Gormsson, also referred to as Harald Bluetooth, was in power.
+
+Why him? Why would a viking’s name get adapted for a technology used for wireless connections?
+
+If he were to have a resume, it might include “Uniting Denmark and Norway” in the achievements section, along with “Connecting warring tribes peacefully.” It’s like connecting conflicting devices together and having them unite to share a common function. For example, a speaker and a phone connect to play music seamlessly.
+
+The icon consists of two letters: the initial of his first name “H,” represented in Old Norse as (ᚼ), and the initial of his nickname “B,” depicted as (ᛒ).
+
+## Save Icon
+
+<picture>
+  <source srcset="../../../@dasig/images/bluetooth.avif" type="image/avif">
+  <source srcset="../../../@dasig/images/bluetooth.webp" type="image/webp">
+  <img alt="5 Tech Icons And Their Meaning">
+</picture>
+
+When you save a file on your computer or device, the data is sent straight to your storage. Regardless of whether it is an HDD or SSD, it will securely store the file’s data. It would be logical for the icon representing file saving to be depicted as a hard drive. However, oddly, that wasn’t the case. That leads to the question, why the icon designers went with that one?
+
+The icon was designed to represent a floppy disk, the original portable storage before flash drives, memory cards, and optical discs.
+
+And they looked like this:
+
+## RSS Icon
+
+RSS is a method for staying updated on news and content from different websites. Consider it a notification email that keeps you informed whenever a site publishes new content. But to set it up, you’ll need an RSS reader, and the site should provide an RSS feeder.
+
+For example: https://medium.com/@patalcala/feed
+
+Now, for the icon. A dot that represents the source, with two concentric arcs that represent radio waves. RSS is used for giving out news publicly, and, back in the day, people used to receive news only from radios. In short, the icon is a tribute to the old days of receiving news.
+
+---
+
+Thank you for reading.

src/content/articles/lets-make-this-hello-world-joke-more-interesting.md

@@ -4,9 +4,15 @@ title: "Let’s Make This Hello World Joke More Interesting"
 subtitle: "hello_world(“print”)"
 date: "Sep 23, 2024"
 minutes: 8
-url: "read/lets-make-this-hello-world-joke-more-interesting"
+category: Technology
 ---
 
+<picture>
+  <source srcset="../../../@dasig/images/lets-make-this-hello-world-joke-more-interesting.avif" type="image/avif">
+  <source srcset="../../../@dasig/images/lets-make-this-hello-world-joke-more-interesting.webp" type="image/webp">
+  <img alt="Let’s Make This Hello World Joke More Interesting">
+</picture>
+
 An icon is a small image or symbol used to represent a concept, idea, or, in this case, a function or a technological indication. And digital icons are found everywhere, especially on software and website designs. Thanks to online resources like Material Fonts, Flaticon, Font Awesome, and many more.
 
 The quick brown fox jumps over the lazy dog. hahahah

src/content/articles/the-beauty-of-music.md

@@ -0,0 +1,44 @@
+---
+slug: "the-beauty-of-music"
+title: "The Beauty of Music"
+subtitle: "The thing our ears love"
+date: "Sep 17, 2024"
+minutes: 2
+category: Poem
+---
+
+<picture>
+  <source srcset="../../../@dasig/images/the-beauty-of-music.avif" type="image/avif">
+  <source srcset="../../../@dasig/images/the-beauty-of-music.webp" type="image/webp">
+  <img alt="5 Tech Icons And Their Meaning">
+</picture>
+
+Melody, harmony, rhythm, beat, and tempo
+Perfect formula; like an ideal pitch of a piano
+Also, for other instruments like guitar, violin or cello
+Combine them, you’ll have an orchestra ready to go
+
+Music tampers with emotions, sided on positive and negative
+Tone stirs the soul; either makes us alive or depressive
+But either lane, we can’t deny the beauty it gives
+Whatever road it brought us, we can’t help but forgive
+
+The power it holds, we simply cannot contain
+A universal language that speaks directly to our brain
+With every note, a new memory is obtained
+And the emotions it evokes are forever sustained
+
+The reflection in our hearts, reminds us with our past
+Or the realization, makes future plan that last
+Whatever music had cooked, I’m not gonna ask
+Because the spark of its magic will never unmask
+
+Listen, listen, a great melody is playing
+A smile drew again, and I’m not even trying
+Like a cloud in still, calming and refreshing
+Even a raining cloud, won’t stop us from dancing
+
+So, whatever genre you love to adore
+Rap, jazz, pop, rock or any rhythmic roar
+Never stick with it, a lot of music you can explore
+Appreciate the diversity, you’ll surely love music more

src/pages/index.astro

@@ -1,14 +1,35 @@
 ---
 import Layout from '../layouts/Layout.astro'
-import { Page, Row, Image, Logo } from '../../@dasig'
+import { Page, Row, Logo } from '../../@dasig'
 import ArticleCard from '../components/ArticleCard.astro'
 
-import TechA from '../../@dasig/images/5-tech.avif'
-import TechW from '../../@dasig/images/5-tech.webp'
-import logoA from '../../@dasig/images/logo.avif'
-import logoW from '../../@dasig/images/logo.webp'
-
 const articles = Object.values(import.meta.glob('../content/articles/*.md', { eager: true }))
+
+function getArticleData(post: any) {
+  const slug = post.frontmatter.slug
+  const alt = slug.replace(/-/g, ' ')
+  const category = post.frontmatter.category
+  let categoryColor
+
+  if (category === 'Technology') {
+    categoryColor = 'blue'
+  } else if (category === 'Poem') {
+    categoryColor = 'yellow'
+  }
+
+  return {
+    category: post.frontmatter.category,
+    categoryColor: categoryColor,
+    url: `read/${slug}`,
+    title: post.frontmatter.title,
+    subtitle: post.frontmatter.subtitle,
+    imageA: `../@dasig/images/${slug}.avif`,
+    imageW: `../@dasig/images/${slug}.webp`,
+    alt: alt,
+    minutes: post.frontmatter.minutes,
+    date: post.frontmatter.date,
+  }
+}
 ---
 
 <Layout title="Articles - Pat Alcala">
@@ -20,7 +41,12 @@ const articles = Object.values(import.meta.glob('../content/articles/*.md', { ea
 
     <div class="articles">
       <Row wrap gap={1}>
-        {articles.map((post: any) => <ArticleCard category="Technology" categoryColor="blue" url={post.frontmatter.url} title={post.frontmatter.title} subtitle={post.frontmatter.subtitle} imageA={TechA.src} imageW={TechW.src} alt="5-tech" minutes={post.frontmatter.minutes} date={post.frontmatter.date} />)}
+        {
+          articles.map((post: any) => {
+            const data = getArticleData(post)
+            return <ArticleCard {...data} />
+          })
+        }
       </Row>
     </div>
   </Page>

src/pages/read/[article].astro

@@ -1,9 +1,10 @@
 ---
 import Layout from '../../layouts/Layout.astro'
 import ArticleComponent from '../../components/Article.astro'
+import { Page, Column } from '../../../@dasig'
 
 export async function getStaticPaths() {
-  const articles: any = await Astro.glob('../../content/articles/*.md')
+  const articles: any = Object.values(import.meta.glob('../../content/articles/*.md', { eager: true }))
   const paths = articles.map((article: any) => ({
     params: { article: article.frontmatter.slug },
   }))
@@ -12,16 +13,17 @@ export async function getStaticPaths() {
 
 const { article } = Astro.params
 
-// Dynamically import the article based on the slug
 const articleModule: any = await import(`../../content/articles/${article}.md`)
 const frontmatter = articleModule.frontmatter
 const content = await articleModule.compiledContent()
 ---
 
 <Layout title={frontmatter.title}>
-  <main class="page">
+  <Page>
-    <ArticleComponent title={frontmatter.title} subtitle={frontmatter.subtitle} category={frontmatter.category} date={frontmatter.date} minutes={frontmatter.minutes} content={content} />
+    <Column content="center">
-  </main>
+      <ArticleComponent title={frontmatter.title} subtitle={frontmatter.subtitle} category={frontmatter.category} date={frontmatter.date} minutes={frontmatter.minutes} content={content} />
+    </Column>
+  </Page>
 </Layout>
 
 <style lang="sass">