Update
This commit is contained in:
parent
5e12675bd0
commit
6fb5145b16
12 changed files with 205 additions and 141 deletions
BIN
@dasig/images/5-tech.avif
Normal file
BIN
@dasig/images/5-tech.avif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
BIN
@dasig/images/5-tech.webp
Normal file
BIN
@dasig/images/5-tech.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
|
|
@ -5,14 +5,17 @@ import compressor from 'astro-compressor'
|
||||||
import robotsTxt from '@itsmatteomanf/astro-robots-txt'
|
import robotsTxt from '@itsmatteomanf/astro-robots-txt'
|
||||||
import purgecss from 'astro-purgecss'
|
import purgecss from 'astro-purgecss'
|
||||||
|
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
prefetch: true,
|
prefetch: true,
|
||||||
integrations: [solidJs(),
|
integrations: [
|
||||||
compressor({ gzip: false, brotli: true }), robotsTxt(), purgecss({
|
solidJs(),
|
||||||
fontFace: true,
|
compressor({ gzip: false, brotli: true }),
|
||||||
variables: true,
|
robotsTxt(),
|
||||||
}) ],
|
purgecss({
|
||||||
|
fontFace: true,
|
||||||
|
variables: true,
|
||||||
|
}),
|
||||||
|
],
|
||||||
vite: {
|
vite: {
|
||||||
css: {
|
css: {
|
||||||
transformer: 'lightningcss',
|
transformer: 'lightningcss',
|
||||||
|
|
|
||||||
|
|
@ -1,84 +1,20 @@
|
||||||
---
|
---
|
||||||
import { Row, Column } from '../../@dasig'
|
// import { Row, Column } from '../../@dasig'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
title: string
|
title: string
|
||||||
subtitle: string
|
subtitle: string
|
||||||
|
category: string
|
||||||
date: string
|
date: string
|
||||||
imageA: string
|
|
||||||
imageW: string
|
|
||||||
alt: string
|
|
||||||
minutes: number
|
minutes: number
|
||||||
|
content: string
|
||||||
}
|
}
|
||||||
|
|
||||||
const { title, subtitle, date, imageA, imageW, alt, minutes } = Astro.props
|
const { title, subtitle, category, date, minutes, content } = Astro.props
|
||||||
---
|
---
|
||||||
|
|
||||||
<section class='article'>
|
<section>
|
||||||
<Column
|
<span>{category.toUpperCase()}</span>
|
||||||
gap={1}
|
<h1>{title}</h1>
|
||||||
content='top'>
|
<h3>{subtitle}</h3>
|
||||||
<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}
|
|
||||||
/>
|
|
||||||
</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>
|
|
||||||
</Row>
|
|
||||||
</div>
|
|
||||||
</Column>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<style lang='sass'>
|
|
||||||
@use '../styles/fonts' as fonts
|
|
||||||
@use 'sass:color'
|
|
||||||
|
|
||||||
.article
|
|
||||||
width: 20rem
|
|
||||||
height: auto
|
|
||||||
background-color: color.adjust(#0A0A0A, $lightness: 9%)
|
|
||||||
padding: 1.25rem
|
|
||||||
border-radius: 1rem
|
|
||||||
cursor: pointer
|
|
||||||
|
|
||||||
&__title
|
|
||||||
font-size: 1.25rem
|
|
||||||
font-weight: 700
|
|
||||||
font-family: fonts.$Literata
|
|
||||||
|
|
||||||
&__subtitle
|
|
||||||
font-size: 1rem
|
|
||||||
font-weight: 500
|
|
||||||
opacity: 0.8
|
|
||||||
|
|
||||||
.dateandtime
|
|
||||||
font-size: 0.75rem
|
|
||||||
opacity: 0.6
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
73
src/components/ArticleCard.astro
Normal file
73
src/components/ArticleCard.astro
Normal file
|
|
@ -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
|
||||||
|
---
|
||||||
|
|
||||||
|
<section class="article">
|
||||||
|
<a href={url}>
|
||||||
|
<Column gap={1} content="top">
|
||||||
|
<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} />
|
||||||
|
</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} />
|
||||||
|
</div>
|
||||||
|
</Row>
|
||||||
|
</div>
|
||||||
|
</Column>
|
||||||
|
</a>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<style lang="sass">
|
||||||
|
@use '../styles/fonts' as fonts
|
||||||
|
@use 'sass:color'
|
||||||
|
|
||||||
|
.article
|
||||||
|
max-width: 30rem
|
||||||
|
height: auto
|
||||||
|
background-color: color.adjust(#0A0A0A, $lightness: 9%)
|
||||||
|
padding: 1.25rem
|
||||||
|
border-radius: 1rem
|
||||||
|
cursor: pointer
|
||||||
|
|
||||||
|
&__title
|
||||||
|
font-size: 1rem
|
||||||
|
font-weight: 700
|
||||||
|
font-family: fonts.$Literata
|
||||||
|
|
||||||
|
&__subtitle
|
||||||
|
font-size: 0.75rem
|
||||||
|
font-weight: 500
|
||||||
|
opacity: 0.8
|
||||||
|
|
||||||
|
.dateandtime
|
||||||
|
font-size: 0.75rem
|
||||||
|
opacity: 0.6
|
||||||
|
</style>
|
||||||
30
src/content/articles/5-tech-icons.md
Normal file
30
src/content/articles/5-tech-icons.md
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
---
|
||||||
|
title: "5 Tech Icons And Their Meaning"
|
||||||
|
subtitle: "The meaning behind these technology icons"
|
||||||
|
date: "Dec 9, 2024"
|
||||||
|
minutes: 5
|
||||||
|
---
|
||||||
|
|
||||||
|
<style>
|
||||||
|
p {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
## 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.
|
||||||
11
src/content/articles/lets-make-this.md
Normal file
11
src/content/articles/lets-make-this.md
Normal file
|
|
@ -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
|
||||||
BIN
src/images/5-tech.png
Normal file
BIN
src/images/5-tech.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 418 KiB |
|
|
@ -1,67 +1,38 @@
|
||||||
---
|
---
|
||||||
import Layout from '../layouts/Layout.astro'
|
import Layout from '../layouts/Layout.astro'
|
||||||
import { Logo, Page, Footer, Row, Image, Copyright, Column } from '../../@dasig'
|
import { Page, Row } from '../../@dasig'
|
||||||
import Article from '../components/Article.astro'
|
import ArticleCard from '../components/ArticleCard.astro'
|
||||||
|
|
||||||
import AA from '../../@dasig/images/sample.avif'
|
import TechA from '../../@dasig/images/5-tech.avif'
|
||||||
import AW from '../../@dasig/images/sample.webp'
|
import TechW from '../../@dasig/images/5-tech.webp'
|
||||||
|
|
||||||
|
const articles = Object.values(import.meta.glob('../content/articles/*.md', { eager: true }))
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout title='Articles - Pat Alcala'>
|
<Layout title="Articles - Pat Alcala">
|
||||||
<Page alignment='column'>
|
<Page alignment="column">
|
||||||
<Row
|
<Row wrap gap={0} content="left">
|
||||||
wrap
|
<h1 class="title">Pat's Articles</h1>
|
||||||
gap={0}
|
|
||||||
content='left'>
|
|
||||||
<h1 class='title'>Pat's Articles</h1>
|
|
||||||
</Row>
|
</Row>
|
||||||
|
|
||||||
<div class='articles'>
|
<div class="articles">
|
||||||
<Row
|
<Row wrap gap={1}>
|
||||||
wrap
|
{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} />)}
|
||||||
gap={1}>
|
|
||||||
<Article
|
|
||||||
title='The quick brown fox'
|
|
||||||
subtitle='Ang pasko ay sumapit'
|
|
||||||
imageA={AA.src}
|
|
||||||
imageW={AW.src}
|
|
||||||
alt='aa'
|
|
||||||
minutes={2}
|
|
||||||
date='aa'
|
|
||||||
/>
|
|
||||||
<Article
|
|
||||||
title='AA'
|
|
||||||
subtitle='aa'
|
|
||||||
imageA={AA.src}
|
|
||||||
imageW={AW.src}
|
|
||||||
alt='aa'
|
|
||||||
minutes={2}
|
|
||||||
date='aa'
|
|
||||||
/>
|
|
||||||
<Article
|
|
||||||
title='AA'
|
|
||||||
subtitle='aa'
|
|
||||||
imageA={AA.src}
|
|
||||||
imageW={AW.src}
|
|
||||||
alt='aa'
|
|
||||||
minutes={2}
|
|
||||||
date='aa'
|
|
||||||
/>
|
|
||||||
</Row>
|
</Row>
|
||||||
</div>
|
</div>
|
||||||
</Page>
|
</Page>
|
||||||
|
|
||||||
|
<style lang="sass">
|
||||||
|
@use '../../configs/design/colors.sass' as colors
|
||||||
|
@use '../styles/fonts.sass' as fonts
|
||||||
|
|
||||||
|
h1
|
||||||
|
color: colors.$white
|
||||||
|
margin: 0
|
||||||
|
font-family: fonts.$Literata
|
||||||
|
font-weight: bold
|
||||||
|
|
||||||
|
.articles
|
||||||
|
padding: 2rem 0 0 0
|
||||||
|
</style>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
||||||
<style lang='sass'>
|
|
||||||
@use '../../configs/design/colors.sass' as colors
|
|
||||||
@use '../styles/fonts.sass' as fonts
|
|
||||||
|
|
||||||
h1
|
|
||||||
color: colors.$white
|
|
||||||
margin: 0
|
|
||||||
font-family: fonts.$Literata
|
|
||||||
font-weight: bold
|
|
||||||
|
|
||||||
.articles
|
|
||||||
padding: 2rem 0 0 0
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
---
|
|
||||||
|
|
||||||
---
|
|
||||||
46
src/pages/read/[article].astro
Normal file
46
src/pages/read/[article].astro
Normal file
|
|
@ -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()
|
||||||
|
}
|
||||||
|
---
|
||||||
|
|
||||||
|
<Layout title="Read" description="Story Page - <story>">
|
||||||
|
<main class="page">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<Article title={title} />
|
||||||
|
<p set:html={content} />
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<style lang="sass">
|
||||||
|
@media only screen and (max-width: 767px)
|
||||||
|
.title
|
||||||
|
font-size: 3rem
|
||||||
|
</style>
|
||||||
|
</Layout>
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
// import { atom } from 'nanostores'
|
|
||||||
|
|
||||||
// export const $sample = atom(0)
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue