Updated

src/components/Article.astro

@@ -14,7 +14,11 @@ const { title, subtitle, category, date, minutes, content } = Astro.props
 ---
 
 <section>
-  <span>{category.toUpperCase()}</span>
+  <span>{category}</span>
   <h1>{title}</h1>
   <h3>{subtitle}</h3>
+
+  <div class="content">
+    <p set:html={content} />
+  </div>
 </section>

src/components/ArticleCard.astro

@@ -1,5 +1,5 @@
 ---
-import { Row, Column } from '../../@dasig'
+import { Row, Column, Padding } from '../../@dasig'
 
 interface Props {
   title: string
@@ -10,10 +10,11 @@ interface Props {
   alt: string
   minutes: number
   url: string
-  content: string
+  category: string
+  categoryColor: string
 }
 
-const { title, subtitle, date, imageA, imageW, alt, minutes, url, content } = Astro.props
+const { title, subtitle, date, imageA, imageW, alt, minutes, url, category, categoryColor } = Astro.props
 ---
 
 <section class="article">
@@ -22,25 +23,29 @@ const { title, subtitle, date, imageA, imageW, alt, minutes, url, content } = As
       <picture>
         <source srcset={imageA} type="image/avif" />
         <source srcset={imageW} type="image/webp" />
-        <img style={`border-radius: 0.75rem`} width="100%" height="auto" decoding="async" loading="lazy" alt={alt} />
+        <img class="picture" width="100%" height="auto" decoding="async" loading="lazy" alt={alt} />
       </picture>
-      <Row gap={1}>
-        <div>
-          <span class="article__title">{title}</span>
-          <h2 class="article__subtitle">{subtitle}</h2>
-        </div>
-      </Row>
-      <div class="dateandtime" style="width: 100%">
-        <Row gap={1} content="right">
-          <span>{date}</span>
-          <span>:</span>
-          <span>{minutes} min read</span>
-
-          <div class="content">
-            <p set:html={content} />
+      <Row content="left">
+        <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="minutes">{minutes} min read</span>
+            </Row>
+          </Padding>
+          <Row gap={1} content="left">
+            <div class="article__titles">
+              <span class="article__title">{title}</span>
+              <h2 class="article__subtitle">{subtitle}</h2>
+            </div>
+          </Row>
+          <div class="dateandtime">
+            <Row content="right">
+              <span>{date}</span>
+            </Row>
           </div>
-        </Row>
-      </div>
+        </Padding>
+      </Row>
     </Column>
   </a>
 </section>
@@ -49,14 +54,20 @@ const { title, subtitle, date, imageA, imageW, alt, minutes, url, content } = As
   @use '../styles/fonts' as fonts
   @use 'sass:color'
 
+  $blue: #1d3b52
+  $yellow: #4f521d
+  $red: #521d2c
+
   .article
     max-width: 30rem
     height: auto
     background-color: color.adjust(#0A0A0A, $lightness: 9%)
-    padding: 1.25rem
     border-radius: 1rem
     cursor: pointer
 
+    &__titles
+      height: auto
+
     &__title
       font-size: 1rem
       font-weight: 700
@@ -68,6 +79,34 @@ const { title, subtitle, date, imageA, imageW, alt, minutes, url, content } = As
       opacity: 0.8
 
   .dateandtime
+    width: 100%
+    padding: 0.5rem 0 0 0
     font-size: 0.75rem
     opacity: 0.6
+
+  .picture
+    border-radius: 1rem 1rem 0 0
+
+  .minutes
+    font-size: 10px
+
+  .category
+    @extend .minutes
+    border-radius: 1rem
+    padding: 0.5rem
+
+    &--blue
+      @extend .category
+      color: $blue
+      background-color: color.adjust($blue, $lightness: 65%)
+
+    &--yellow
+      @extend .category
+      color: $yellow
+      background-color: color.adjust($yellow, $lightness: 65%)
+
+    &--red
+      @extend .category
+      color: $red
+      background-color: color.adjust($red, $lightness: 65%)
 </style>

src/content/articles/5-tech-icons.md

@@ -1,19 +1,17 @@
 ---
+slug: "5-tech-icons"
 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"
 ---
 
-<style>
+<!--<style>
 p {
   color: red;
 }
-</style>
-
-## 5 Tech Icons And Their Meaning
-
-## The meaning behind these technology icons
+</style>-->
 
 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.
 

src/content/articles/lets-make-this.md

@@ -1,11 +1,9 @@
 ---
+slug: "lets-make-this"
 title: "Let’s Make This Hello World Joke More Interesting"
-slug: "5-tech-icons"
 subtitle: "hello_world(“print”)"
-date: "2024-01-01"
+date: "Sep 23, 2024"
 minutes: 8
+url: "read/lets-make-this.astro"
 ---
 
-## 5 Tech Icons And Their Meaning
-
-### The meaning behind these technology icons

src/pages/index.astro

@@ -1,23 +1,26 @@
 ---
 import Layout from '../layouts/Layout.astro'
-import { Page, Row } from '../../@dasig'
+import { Page, Row, Image, 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 }))
 ---
 
 <Layout title="Articles - Pat Alcala">
   <Page alignment="column">
-    <Row wrap gap={0} content="left">
+    <Row wrap gap={1} content="left">
+      <Logo size={90} />
       <h1 class="title">Pat's Articles</h1>
     </Row>
 
     <div class="articles">
       <Row wrap gap={1}>
-        {articles.map((post: any) => <ArticleCard 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) => <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} />)}
       </Row>
     </div>
   </Page>

src/pages/read/5-tech-icons.astro

@@ -0,0 +1,20 @@
+---
+import Layout from '../../layouts/Layout.astro'
+import * as fiveTech from '../../content/articles/5-tech-icons.md'
+import Article from '../../components/Article.astro'
+
+const title = fiveTech.frontmatter.title
+const content = await fiveTech.compiledContent()
+---
+
+<Layout title={title}>
+  <main class="page">
+    <Article title={fiveTech.frontmatter.title} subtitle={fiveTech.frontmatter.subtitle} category={fiveTech.frontmatter.category} date={fiveTech.frontmatter.date} minutes={fiveTech.frontmatter.minutes} content={content} />
+  </main>
+</Layout>
+
+<style lang="sass">
+  @media only screen and (max-width: 767px)
+    .title
+      font-size: 3rem
+</style>

src/pages/read/[article].astro

@@ -1,6 +1,6 @@
 ---
 import Layout from '../../layouts/Layout.astro'
-import Article from '../../components/Article.astro'
+// import Article from '../../components/Article.astro'
 
 import { Picture } from 'astro:assets'
 
@@ -8,39 +8,40 @@ import * as fiveTech from '../../content/articles/5-tech-icons.md'
 import * as letsMake from '../../content/articles/lets-make-this.md'
 
 export async function getStaticPaths() {
-  const articles = await Astro.glob('../../content/articles/*.md')
-  const paths = articles.map((article: any) => ({ params: { story: article.frontmatter.slug } }))
-  return paths
+  // const articles: any = await Astro.glob('../../content/articles/*.md')
+  // const paths = articles.map((article: any) => ({ params: { story: article.frontmatter.slug } }))
+  // return paths
+  return [{ params: { article: '5-tech-icons' } }, { params: { article: 'lets-make-this' } }]
 }
-const { story } = Astro.params
+const { article } = Astro.params
 
 let title = ''
 let content = ''
 
-if (story === fiveTech.frontmatter.slug) {
+if (article === fiveTech.frontmatter.slug) {
   title = fiveTech.frontmatter.title
   content = await fiveTech.compiledContent()
-} else if (story === letsMake.frontmatter.slug) {
+} else if (article === letsMake.frontmatter.slug) {
   title = letsMake.frontmatter.title
   content = await letsMake.compiledContent()
 }
 ---
 
-<Layout title="Read" description="Story Page - <story>">
+<Layout title={title}>
   <main class="page">
-    <section class="toolbar">
+    <!-- <section class="toolbar">
       <a href="/" style="text-decoration: none; color: inherit;" aria-label="Go to index page">
         <div class="toolbar--title" style="text-decoration: none; color: inherit;">Snuffverse</div>
       </a>
-    </section>
+    </section> -->
 
-    <Article title={title} />
-    <p set:html={content} />
+    <!-- <Article title={title} /> -->
+    <!-- <p set:html={content} /> -->
   </main>
-
-  <style lang="sass">
-    @media only screen and (max-width: 767px)
-      .title
-        font-size: 3rem
-  </style>
 </Layout>
+
+<style lang="sass">
+  @media only screen and (max-width: 767px)
+    .title
+      font-size: 3rem
+</style>