- {title}
-
- {subtitle}
-
-
- {date}
- :
- {minutes} min read
-
-
@@ -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%)
diff --git a/src/content/articles/5-tech-icons.md b/src/content/articles/5-tech-icons.md
index b916b1c..754d6dd 100644
--- a/src/content/articles/5-tech-icons.md
+++ b/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"
---
-
-
-## 5 Tech Icons And Their Meaning
-
-## The meaning behind these technology icons
+-->
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.
diff --git a/src/content/articles/lets-make-this.md b/src/content/articles/lets-make-this.md
index ca4f691..e7abe26 100644
--- a/src/content/articles/lets-make-this.md
+++ b/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
diff --git a/src/images/A.png b/src/images/A.png
deleted file mode 100644
index a72d989..0000000
Binary files a/src/images/A.png and /dev/null differ
diff --git a/src/images/background.png b/src/images/background.png
deleted file mode 100644
index da8aba0..0000000
Binary files a/src/images/background.png and /dev/null differ
diff --git a/src/images/favicon.png b/src/images/favicon.png
index 4d1e48b..b26e1e5 100644
Binary files a/src/images/favicon.png and b/src/images/favicon.png differ
diff --git a/src/images/logo.png b/src/images/logo.png
index 4d1e48b..c228849 100644
Binary files a/src/images/logo.png and b/src/images/logo.png differ
diff --git a/src/images/sample.png b/src/images/sample.png
deleted file mode 100644
index a8f6f60..0000000
Binary files a/src/images/sample.png and /dev/null differ
diff --git a/src/pages/index.astro b/src/pages/index.astro
index d50f9de..0e2b71e 100644
--- a/src/pages/index.astro
+++ b/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 }))
---
-
+
+
- {articles.map((post: any) =>
diff --git a/src/pages/read/5-tech-icons.astro b/src/pages/read/5-tech-icons.astro
new file mode 100644
index 0000000..83e74de
--- /dev/null
+++ b/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()
+---
+
+
+
+
+
+
+
+
diff --git a/src/pages/read/[article].astro b/src/pages/read/[article].astro
index 3bc3105..ae43ffd 100644
--- a/src/pages/read/[article].astro
+++ b/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()
}
---
-
+
-
-
-
+
+
-
+
+
+
+
+ {category}
+ {minutes} min read
+
+
+
+
+
-
+
+
+ {title}
+
+ {subtitle}
+
+
+ {date}
+
-