Skip to content

Commit 5dda4ec

Browse files
w3tealw3teal
committed
Posts in website is good idea
1 parent 7f7e5b4 commit 5dda4ec

23 files changed

+394
-68
lines changed

‎.eleventy.js

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,18 @@
11
module.exports = async function (eleventyConfig) {
22

3-
eleventyConfig.addPassthroughCopy({ "src/public": "/" });
4-
3+
eleventyConfig.addLiquidShortcode('image', (filename, alt, size, loading) => {
4+
const [width, height] = size.split('x');
5+
return `<img src="${filename}" alt="${alt}" width="${width}" height="${height}" loading="${loading}" />`;
6+
});
7+
8+
eleventyConfig.addPassthroughCopy({
9+
"src/public": "/"
10+
});
11+
12+
eleventyConfig.addPassthroughCopy({
13+
"src/img": "/img/"
14+
});
15+
516
module.exports.config = {
617
dir: {
718
input: "src",

‎_includes/index.njk

Lines changed: 25 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -38,9 +38,9 @@
3838
</h2>
3939
<p>Some my newest projects that i like to maintain.</p>
4040
</div>
41-
<div class="scroll projects">
41+
<div class="scroll lists">
4242
{%- for project in projects -%}
43-
<a href="{{ project.url }}" class="project" aria-label="{{ project.title }}">
43+
<a href="{{ project.url }}" class="list" aria-label="{{ project.title }}">
4444
<div class="name">{{ project.title }}</div>
4545
<div class="description">{{ project.description }}</div>
4646
</a>
@@ -55,9 +55,9 @@
5555
</h2>
5656
<p>Some plugins and themes that i used to build when i use Docsify.</p>
5757
</div>
58-
<div class="scroll projects">
58+
<div class="scroll lists">
5959
{%- for plugin in plugins -%}
60-
<a href="{{ plugin.url }}" class="project">
60+
<a href="{{ plugin.url }}" class="list">
6161
<div class="name">{{ plugin.title }}</div>
6262
<div class="description">{{ plugin.description }}</div>
6363
</a>
@@ -89,22 +89,35 @@
8989
<div class="scroll contact">
9090
{%- for via in contact -%}
9191
<a href="{{ via.url }}" class="via" aria-label="{{ via.slug }}">
92-
<img height="32" width="32" src="https://cdn.simpleicons.org/{{ via.slug }}/white"
92+
<img height="64" width="64" src="https://cdn.simpleicons.org/{{ via.slug }}/white"
9393
alt="{{ via.slug }}">
9494
<div class="name">{{ via.slug }}</div>
9595
</a>
9696
{%- endfor -%}
9797
</div>
9898
</section>
99-
<section id="posts" class="posts">
100-
<a href="https://dev.to/ligmatv" aria-label="Open my posts">
101-
<span>Read my posts</span>
102-
<div class="description">When i get big idea, sometimes i turn this as post. Mostly about CSS.</div>
103-
</a>
99+
<section id="posts" class="grid all-s12 all-m6">
100+
<div class="details">
101+
<h2>
102+
<a href="#posts" aria-label="posts">Posts</a>
103+
</h2>
104+
<p>Archives for my some posts, too bored to write more again. Most of them in <a href="http://2.is-a.dev/dev.to">DEV.to</a>.</p>
105+
</div>
106+
<div class="scroll lists">
107+
{%- for post in collections.post -%}
108+
<a href="{{ post.url }}" class="list" aria-label="{{ post.data.title }}" style="background-image: url('{{ post.data.cover }}');">
109+
<div>
110+
<div class="name">{{ post.data.title }}</div>
111+
<div class="description">{{ post.data.description }}</div>
112+
<div class="date">{{ post.data.released }}</div>
113+
</div>
114+
</a>
115+
{%- endfor -%}
116+
</div>
104117
</section>
105118
<section id="my-links" class="my-links">
106-
<a href="/links.html" aria-label="Open my links"> <img
107-
src="https://api.iconify.design/mdi/open-in-new.svg?color=white" alt="Open my links" width="48"> My
119+
<a href="/links/" aria-label="Open my links"> <img
120+
src="https://api.iconify.design/mdi/open-in-new.svg?color=white" alt="Open my links" width="64" height="64"> My
108121
links</a>
109122
</section>
110123
</main>

‎_includes/post.njk

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
---
2+
title: LIGMATV
3+
---
4+
5+
<!DOCTYPE html>
6+
<html lang="en">
7+
8+
<head>
9+
<meta charset="UTF-8">
10+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
11+
<title>{{ title }}</title>
12+
<meta name="description" content="{{ description }}">
13+
<link rel="shortcut icon" href="/logo.png" type="image/x-icon">
14+
<link rel="preconnect" href="https://fonts.googleapis.com">
15+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
16+
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
17+
<script type="module" src="https://cdn.jsdelivr.net/npm/bluesky-profile-feed-embed@^1.0.0/+esm"></script>
18+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bluesky-profile-feed-embed@^1.0.0/dist/core.min.css">
19+
<link rel="stylesheet" href="/style.css">
20+
</head>
21+
<body>
22+
<section class="post-detail" style="background-image: url('{{ cover }}');">
23+
<div>
24+
<h1>{{ title }}</h1>
25+
<div class="date">{{ released }}</div>
26+
<div class="description">{{ description }}</div>
27+
</div>
28+
</section>
29+
<article>
30+
{{ content | safe }}
31+
</article>
32+
</body>
33+
</html>

‎posts/gmxcss-create-a-simple-layout.md

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
---
2+
title: "GMX.css: Create a simple layout"
3+
description: GMX.css, an CSS framework that comnes with a lot of beautiful styled components...
4+
cover: /img/gmx-css-layout.webp
5+
released: 2024/12/12
6+
---
7+
8+
Make a simple web page can be difficult, because a lot of ugly and unstyled components built in by browser. But of course, you can customize all of it with CSS. But styling can waste your times, makes you not serious about building applications.
9+
10+
GMX.css, an CSS framework that comnes with a lot of beautiful styled components with Material Design based, you can building your web apps many times easier and faster. This is how you can make an simple layout with GMX.css.
11+
12+
First, you need to import the CSS and Iconify Icon. We recommended to use the JSDelivr CDN.
13+
14+
```
15+
<link rel="stylesheet" href="https://unpkg.com/gmx.css">
16+
<script src="https://unpkg.com/iconify-icon"></script>
17+
```
18+
19+
Second, we built the simple navigation. And also it was really responsive! In desktop, it will showed in left and vertical, meanwhille in mobile, it will showed in bottom and horizontal.
20+
21+
```
22+
<main>
23+
<aside>
24+
<nav>
25+
<li class="active">
26+
<i>
27+
<iconify-icon icon="material-symbols:home"></iconify-icon>
28+
</i>
29+
<span>Home</span>
30+
</li>
31+
<li>
32+
<a href="https://github.com/LIGMATV/gmx.css">
33+
<i>
34+
<iconify-icon icon="mdi:github"></iconify-icon>
35+
</i>
36+
<span>GitHub</span>
37+
</a>
38+
</li>
39+
</nav>
40+
<article>
41+
</article>
42+
</aside>
43+
</main>
44+
```
45+
46+
Third, built some container with typography and button. You can learn from here.
47+
48+
```
49+
...
50+
</aside>
51+
<article>
52+
<h1>Hello, GMX.</h1>
53+
<br>
54+
<button>Action...</button>
55+
</article>
56+
</main>
57+
```
58+
59+
You now can built an simple web app with GMX.css. For more explore, visit the website to see the demos and examples of the elements you want to copy 👇🏻
60+
https://ligmatv.is-a.dev/gmx.css/ [(Source code)](https://github.com/LIGMATV/gmx.css)

‎posts/gmxcss-now-in-npm.md

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
title: "GMX.css v0.0.13: Now in NPM!"
3+
description: Following the GMX.css v0.0.13, We now publishing the GMX.css in NPM.
4+
cover: /img/gmx-css-npm.webp
5+
released: 2024/12/14
6+
---
7+
8+
Following the GMX.css v0.0.13, We now publishing the GMX.css in NPM. So, it's now more easy to use it in any framework.
9+
10+
Installing from NPM:
11+
```
12+
npm install gmx.css
13+
npm install iconify-icon
14+
```
15+
16+
Importing from NPM:
17+
```
18+
@import "gmx.css";
19+
```
20+
```
21+
import 'gmx.css';
22+
```
23+
24+
And also, it's now easier to import it via CDN with JSDelivr and UNPKG.
25+
```
26+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gmx.css">
27+
<script src="https://cdn.jsdelivr.net/npm/iconify-icon"></script>
28+
```
29+
```
30+
<link rel="stylesheet" href="https://unpkg.com/gmx.css">
31+
<script src="https://unpkg.com/iconify-icon"></script>
32+
```
33+
34+
---
35+
36+
[GMX.css repository](https://github.com/LIGMATV/gmx.css)
37+
[GMX.css NPM](https://www.npmjs.com/package/gmx.css)
38+
[GMX.css website](https://ligmatv.is-a.dev/gmx.css/)

‎posts/gmxcss-the-most-lightweight-material-design-based-framework.md

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
---
2+
title: "GMX.css: The most lightweight Material Design-based framework"
3+
description: GMX.css is an new CSS framework that implements the Material 3 design system in Vanilla CSS/JS, ...
4+
cover: /img/gmx-css-cover.webp
5+
released: 2024/12/09
6+
---
7+
8+
I used to create my website with [Beer.css](https://www.beercss.com/), it's very lightweight and easy to reusable the components and customizable. And later, i found [M3 Svelte](https://ktibow.github.io/m3-svelte/) which have a perfect Material Design Guideline and good-looking too, but sadly that framework is just for Svelte framework, meanwhille me just HTML5 framework. So i decide to make my own framework...
9+
10+
## Understanding
11+
12+
GMX.css is an new CSS framework that implements the Material 3 design system in Vanilla CSS/JS, from the components to the animations to the theming. I used to make this framework for my own, but i decide to publish it on GitHub. That's because there's already a bunch of components already (Thought it's just realeased in yesterday).
13+
14+
## Feature
15+
16+
It's was really lighweight. So far, with 15 components already implemented, the unminified (full) version size is just **19,3 KB!** Thought it has a lot of variables and utilities. But this framework is not yet stable, so there are still many things that untidy so that this framework is still not perfect. But it's already responsive!
17+
18+
{% image "/img/gmxcss-on-desktop.webp" "On desktop" "960x540" %}
19+
20+
On desktop
21+
22+
{% image "/img/gmxcss-on-mobile.webp" "On mobile" "480x1006" %}
23+
24+
On mobile
25+
26+
## Try it
27+
28+
Try it, and give me some comment... Thanks.
29+
https://ligmatv.is-a.dev/gmx.css/ [(Source code)](https://github.com/LIGMATV/gmx.css)

‎posts/gmxcss-v0012-whats-new.md

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
---
2+
title: "GMX.css v0.0.12: What's new?"
3+
description: The new minor update from GMX.css just launched now. What's the difference?
4+
cover: /img/gmxcss-v0012.webp
5+
released: 2024/12/12
6+
---
7+
8+
The new minor update from GMX.css just launched now. What's the difference?
9+
10+
## Progress
11+
12+
The progress element displays an indicator showing the completion progress of a task, typically displayed as a progress bar. And also, there's a different attribute to run this element, you can make the progress element with normal bar or circular look, and make it runs statically by `value` or leave it intermedinate.
13+
14+
The code is simple, just create the progress element for intermedinate.
15+
```
16+
<progress></progress>
17+
```
18+
19+
Or, you can give it `value` and `max` too.
20+
```
21+
<progress value="30" max="100"></progress>
22+
```
23+
24+
Wants the circular version? Add the `circle` class with `--value` variable.
25+
```
26+
<progress class="circle" value="30" max="100" style="--value: 30;"></progress>
27+
```
28+
29+
Circle but intermedinate and spinning? Sure.
30+
```
31+
<progress class="circle spin" style="--value: 30;"></progress>
32+
```
33+
34+
Try the demo here:
35+
36+
## More
37+
38+
Not just add progress, we also made the web more responsive.
39+
See the difference and try inspect: [v0.0.10](https://rawcdn.githack.com/LIGMATV/gmx.css/1d9c56ed5042de3c552b9dbacb1daaa3fb7ee144/index.html) vs [v0.0.12](https://rawcdn.githack.com/LIGMATV/gmx.css/eabede68d4a0d216b709d29638e16eb09c6ef959/index.html)
40+
41+
---
42+
43+
Cool right? Getting started now by add single line in your HTML file!
44+
45+
```
46+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/LIGMATV/gmx.css@main/gmx.css">
47+
```
48+
49+
[GMX.css repository](https://github.com/LIGMATV/gmx.css)
50+
[GMX.css website](https://ligmatv.is-a.dev/gmx.css/)

‎posts/gmxcss-v0016-select-your-favorite-theme.md

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
---
2+
title: "GMX.css v0.0.16: Select your favorite theme!"
3+
description: Bored for use the default purple theme? Now, GMX.css have a built in themes...
4+
cover: /img/gmx-css-themes.webp
5+
released: 2024/12/16
6+
---
7+
8+
Bored for use the default purple theme? Now, GMX.css have a built in themes that you can simply add to your website! 👀
9+
10+
## Add
11+
12+
So, you can import the themes file under the gmx.css & iconify-icon imports with this simple code:
13+
```
14+
<link rel="stylesheet" href="https://unpkg.com/gmx.css/dist/theme.min.css">
15+
```
16+
It was includes Red, Pink, Purple, Indigo, Blue, Cyan, Teal, Green, Lime, Yellow, Amber, Orange and Monochrome color.
17+
18+
For example, if you want to make your site have a green color scheme, just add the `green` class to your `body` site!
19+
```
20+
...
21+
<body class="green">
22+
...
23+
```
24+
Just that! Import the theme file and add color class to the body. Make your website have uniqueness and characteristics. 🎨
25+
26+
---
27+
28+
Getting started on your website with GMX.css now ✨
29+
```
30+
<link rel="stylesheet" href="https://unpkg.com/gmx.css">
31+
<script src="https://unpkg.com/iconify-icon"></script>
32+
```
33+
34+
[GMX.css repository](https://github.com/LIGMATV/gmx.css)
35+
[GMX.css NPM](https://www.npmjs.com/package/gmx.css)
36+
[GMX.css website](https://ligmatv.is-a.dev/gmx.css/)

‎posts/posts.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"tags": "post",
3+
"layout": "post.njk"
4+
}

‎src/img/1280x800.webp

3.66 KB
Binary file not shown.

‎src/img/480x400.webp

1.05 KB
Binary file not shown.

‎src/img/four-hundos.webp

21 KB
Binary file not shown.

‎src/img/gmx-css-cover.webp

19.1 KB
Binary file not shown.

‎src/img/gmx-css-layout.webp

3.29 KB
Binary file not shown.

‎src/img/gmx-css-npm.webp

17.8 KB
Binary file not shown.

‎src/img/gmx-css-themes.webp

11.4 KB
Binary file not shown.

‎src/img/gmxcss-on-desktop.webp

37.1 KB
Binary file not shown.

‎src/img/gmxcss-on-mobile.webp

76.4 KB
Binary file not shown.

‎src/img/gmxcss-v0012.webp

2.47 KB
Binary file not shown.

‎src/img/not-like-us.webp

6.8 KB
Binary file not shown.

‎src/index.njk

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ title: LIGMATV
55
description: "I'm LIGMATV, thanks for your presence. I'm a frontend developer from Indonesia, especially North Sumatra province. Has experiencing in HTML, CSS, and a bit JS since 2023."
66
contact:
77
- slug: Bluesky
8-
url: https://bsky.app/messages/3leiyaqisx725
8+
url: http://2.is-a.dev/bluesky
99
- slug: Gmail
1010
url: mailto:[email protected]
1111
social:

‎src/links.njk

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
layout: links.njk
3-
permalink: /links.html
3+
permalink: /links/index.html
44
domain: "http://2.is-a.dev/"
55
title: LIGMATV's URL Manager
66
---

0 commit comments

Comments
 (0)