diff --git a/@dasig/images/5-tech.avif b/@dasig/images/5-tech.avif new file mode 100644 index 0000000..7193d10 Binary files /dev/null and b/@dasig/images/5-tech.avif differ diff --git a/@dasig/images/5-tech.webp b/@dasig/images/5-tech.webp new file mode 100644 index 0000000..93e0869 Binary files /dev/null and b/@dasig/images/5-tech.webp differ diff --git a/astro.config.mjs b/astro.config.mjs index ab33fb1..1487e87 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -5,14 +5,17 @@ import compressor from 'astro-compressor' import robotsTxt from '@itsmatteomanf/astro-robots-txt' import purgecss from 'astro-purgecss' - export default defineConfig({ prefetch: true, - integrations: [solidJs(), - compressor({ gzip: false, brotli: true }), robotsTxt(), purgecss({ - fontFace: true, - variables: true, - }) ], + integrations: [ + solidJs(), + compressor({ gzip: false, brotli: true }), + robotsTxt(), + purgecss({ + fontFace: true, + variables: true, + }), + ], vite: { css: { transformer: 'lightningcss', @@ -23,4 +26,4 @@ export default defineConfig({ inlineStylesheets: 'never', }, site: 'http://localhost:4321', -}) \ No newline at end of file +}) diff --git a/src/components/Article.astro b/src/components/Article.astro index e12023d..e54c292 100644 --- a/src/components/Article.astro +++ b/src/components/Article.astro @@ -1,84 +1,20 @@ --- -import { Row, Column } from '../../@dasig' +// import { Row, Column } from '../../@dasig' interface Props { title: string subtitle: string + category: string date: string - imageA: string - imageW: string - alt: string minutes: number + content: string } -const { title, subtitle, date, imageA, imageW, alt, minutes } = Astro.props +const { title, subtitle, category, date, minutes, content } = Astro.props --- -
- - - - - {alt} - - -
- {title} -

{subtitle}

-
- -
- - {date} - : - {minutes} min read - -
- +
+ {category.toUpperCase()} +

{title}

+

{subtitle}

- - diff --git a/src/components/ArticleCard.astro b/src/components/ArticleCard.astro new file mode 100644 index 0000000..056a653 --- /dev/null +++ b/src/components/ArticleCard.astro @@ -0,0 +1,73 @@ +--- +import { Row, Column } from '../../@dasig' + +interface Props { + title: string + subtitle: string + date: string + imageA: string + imageW: string + alt: string + minutes: number + url: string + content: string +} + +const { title, subtitle, date, imageA, imageW, alt, minutes, url, content } = Astro.props +--- + +
+ + + + + + {alt} + + +
+ {title} +

{subtitle}

+
+ +
+ + {date} + : + {minutes} min read + +
+

+

+ +
+ + +
+ + diff --git a/src/content/articles/5-tech-icons.md b/src/content/articles/5-tech-icons.md new file mode 100644 index 0000000..b916b1c --- /dev/null +++ b/src/content/articles/5-tech-icons.md @@ -0,0 +1,30 @@ +--- +title: "5 Tech Icons And Their Meaning" +subtitle: "The meaning behind these technology icons" +date: "Dec 9, 2024" +minutes: 5 +--- + + + +## 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. + +The design of these icons was carefully considered, aiming for simplicity, recognizability, and a timeless quality. Most of the time, it’s clear why the icons look that way; for example, a battery icon represents usage of a battery — straightforward enough, right? And a trash icon means a place for discarded files, and so on. + +But there are few icons that have ambiguous designs. Although they are highly recognizable and widely known. The reasoning behind the choice of that icon may leave some puzzled. These are the power icon, USB icon, Bluetooth icon, save icon, and lastly, the RSS icon (which is not to be confused with Wi-Fi). + +## Power Icon + +Image created by the Author + +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. diff --git a/src/content/articles/lets-make-this.md b/src/content/articles/lets-make-this.md new file mode 100644 index 0000000..ca4f691 --- /dev/null +++ b/src/content/articles/lets-make-this.md @@ -0,0 +1,11 @@ +--- +title: "Let’s Make This Hello World Joke More Interesting" +slug: "5-tech-icons" +subtitle: "hello_world(“print”)" +date: "2024-01-01" +minutes: 8 +--- + +## 5 Tech Icons And Their Meaning + +### The meaning behind these technology icons diff --git a/src/images/5-tech.png b/src/images/5-tech.png new file mode 100644 index 0000000..206605d Binary files /dev/null and b/src/images/5-tech.png differ diff --git a/src/pages/index.astro b/src/pages/index.astro index 2879ec7..d50f9de 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,67 +1,38 @@ --- import Layout from '../layouts/Layout.astro' -import { Logo, Page, Footer, Row, Image, Copyright, Column } from '../../@dasig' -import Article from '../components/Article.astro' +import { Page, Row } from '../../@dasig' +import ArticleCard from '../components/ArticleCard.astro' -import AA from '../../@dasig/images/sample.avif' -import AW from '../../@dasig/images/sample.webp' +import TechA from '../../@dasig/images/5-tech.avif' +import TechW from '../../@dasig/images/5-tech.webp' + +const articles = Object.values(import.meta.glob('../content/articles/*.md', { eager: true })) --- - - - -

Pat's Articles

+ + + +

Pat's Articles

 -
- -
-
-
+
+ + {articles.map((post: any) => )}
+ + - - diff --git a/src/pages/read.astro b/src/pages/read.astro deleted file mode 100644 index 853d812..0000000 --- a/src/pages/read.astro +++ /dev/null @@ -1,3 +0,0 @@ ---- - ---- diff --git a/src/pages/read/[article].astro b/src/pages/read/[article].astro new file mode 100644 index 0000000..3bc3105 --- /dev/null +++ b/src/pages/read/[article].astro @@ -0,0 +1,46 @@ +--- +import Layout from '../../layouts/Layout.astro' +import Article from '../../components/Article.astro' + +import { Picture } from 'astro:assets' + +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 { story } = Astro.params + +let title = '' +let content = '' + +if (story === fiveTech.frontmatter.slug) { + title = fiveTech.frontmatter.title + content = await fiveTech.compiledContent() +} else if (story === letsMake.frontmatter.slug) { + title = letsMake.frontmatter.title + content = await letsMake.compiledContent() +} +--- + + +
+
+ +
Snuffverse
+ +
+ +
+

+

+ + + diff --git a/src/stores/sample.ts b/src/stores/sample.ts deleted file mode 100644 index 21b60a3..0000000 --- a/src/stores/sample.ts +++ /dev/null @@ -1,3 +0,0 @@ -// import { atom } from 'nanostores' - -// export const $sample = atom(0)