coding-agent/startseite
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: migrate from prismjs to treesitter
All checks were successful
Deploy Blog / build (push) Successful in 23s
Details

Browse source
This commit is contained in:
Marcius 2024-05-22 14:16:21 +01:00
parent d6be0689ea
commit 40235561a6
10 changed files with 119 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
articles/how-to-build-a-blog-the-hard-way-2.html.cgt Normal file
View file

@ -0,0 +1,18 @@
<! local article = opt.articles["how-to-build-a-blog-the-hard-way-2"] !>
<% opt.doctype %>
<html>
<head>
<title><% article.title %></title>
<% opt.header_links %>
</head>
<body>
<% opt.menu %>
<div class="header">
<h1><% article.title %></h1>
<h2><b><% article.date %></b></h2>
</div>
<div class="content">
<h2></h2>
<p></p>
<% opt.prismjs %>
</body>

5
articles/how-to-build-a-blog-the-hard-way-2.lua Normal file
View file

@ -0,0 +1,5 @@
return {
title = "How to build a blog the hard way 2?",
lang = "eng",
date = "20-05-2024",
}

72
articles/how-to-build-a-blog-the-hard-way.html.cgt
View file

@ -27,88 +27,24 @@
<p>Confgen is mainly written in <a href="https://ziglang.org/learn/overview/">Zig</a> but all the configuration is in lua.</p>
<p>Anyone who has ever dealt with dotfiles knows how difficult it can be to customize them (for example when changing a theme) and that's where confgen comes into place.</p>
<pre><code class="language-ini">
# config.ini
background=#101010
color=#F7A41D
font-size=16
# config.ini.cgt
background=<&percnt; opt.background &percnt;>
color=<&percnt; opt.color &percnt;>
font-size=<&percnt; 10 + 6 &percnt;>
</code></pre>
<% opt.highlight("htbb1.lua") %>
<p>So here we see 2 features of confgen. First, between <b>&lt;&#37;</b> and <b>&#37;&gt</b> is where we set values to be written into the file and second, the <b>opt.field</b> are basically global scope variables because opt variable is passed into the <b>.cgt</b> files, we will see more about that in a second.</p>
<p>You might have noticed that confgen also has this <b>.cgt</b> format and that is to tell confgen that this file should be intepreted to create a new file removing the <b>.cgt</b> files added to the confgen file with it's new configuration as the example above shows with the <b>config.ini</b> but there is something else to mention which is the confgen.lua, aka, the confgen file.</p>
<pre><code class="language-lua">
-- confgen.lua
<% opt.highlight("htbb2.lua") %>
cg.addFile("confgen.ini.cgt")
-- optionally you could also sent an output path
-- otherwise it will output to the cwd
-- both absolute and relative paths work
cg.addFile("confgen.ini.cgt", "relative/path")
-- recursively adds files inside a path
cg.addPath(".config")
-- You can also set an output path here
cg.addPath(".config", "relative/path")
</code></pre>
<p>This is how confgen tracks a file to send to another destination and if it a <b>.cgt</b> file it will read the file and do any operations between <b>&lt;&#37;</b> and <b>&#37;&gt</b>.
Also, cg is a variable set by confgen for functions such as "addPath", "addFile", "doTemplate"... that should only be called in the confgen.lua file but cg also have the cg.opt which is where you set fields and values to be used inside <b>.cgt</b> files</p>
<p>Simple right? But there is more to see so stick with me.</p>
<pre><code class="language-lua">
-- how-to-build-a-blog-the-hard-way.lua
return {
title = "How to build a blog the hard way?",
lang = "eng",
date = "14-04-2024",
}
<% opt.highlight("htbb3.lua") %>
-- confgen.lua
cg.addFile("how-to-build-a-blog-the-hard-way.html.cgt")
-- Import the metadata to then be passed to opt.article
-- to be used inside the html file in this example
article = require("how-to-build-a-blog-the-hard-way")
cg.opt.article["how-to-build-a-blog-the-hard-way"] = article
-- how-to-build-a-blog-the-hard-way.html.cgt
&lt! local article = opt.articles["how-to-build-a-blog-the-hard-way"] !&gt
&lth1&gt<&percnt; article.title &percnt;>&lt/h1&gt
&lth2&gt<&percnt; article.date &percnt;>&lt/h2&gt
</pre></code>
<p>Here we have a simplified version of how I used confgen to build this blog, of course I made a more complex version for automation purposes but this is good enough to understand how to use the tool. </p>
<p>New feature here is code between <b>&lt!</b> and <b>!&gt</b> which is where we do operations that are not written into the file, for example, assignments, control flow, operations... for example:</p>
<pre><code class="language-lua">
-- example.txt.cgt
&lt! local i = 0 !&gt
&lt! while i <= 5 do !&gt
&lt% i %&gt
&lt! i = i + 1 !&gt
&lt! end !&gt
<% opt.highlight("htbb4.lua") %>
-- confgen.lua
cg.addFile('example.txt.cgt')
-- example.txt
1
2
3
4
5
</code></pre>
<p>Well, that's the basics of confgen, but there is much more to talk about it such as confgenfs mounts a FUSE3 filesystem containing all the config files added to confgen.lua and processes each file whenever it's opened.</p>
<p>And if you like it, show some love to the <a href="https://github.com/LordMZTE">LordMZTE</a> for building this tool and give a star to the <a href="https://github.com/LordMZTE/confgen">project</a> and have fun using it, I highly recommend it.</p>
<p>So, this is how you build a blog the hard way.</p>

11
code_snippets/htbb1.lua Normal file
View file

@ -0,0 +1,11 @@
# config.ini
background="#101010"
color="#F7A41D"
font-size=16
# config.ini.cgt
background="<% opt.background %>"
color="<% opt.color %>"
font-size=<% 10 + 6 %>

16
code_snippets/htbb2.lua Normal file
View file

@ -0,0 +1,16 @@
-- confgen.lua
cg.addFile("confgen.ini.cgt")
-- optionally you could also sent an output path
-- otherwise it will output to the cwd
-- both absolute and relative paths work
cg.addFile("confgen.ini.cgt", "relative/path")
-- recursively adds files inside a path
cg.addPath(".config")
-- You can also set an output path here
cg.addPath(".config", "relative/path")

22
code_snippets/htbb3.lua Normal file
View file

@ -0,0 +1,22 @@
-- how-to-build-a-blog-the-hard-way.lua
return {
title = "How to build a blog the hard way?",
lang = "eng",
date = "14-04-2024",
}
-- confgen.lua
cg.addFile("how-to-build-a-blog-the-hard-way.html.cgt")
-- Import the metadata to then be passed to opt.article
-- to be used inside the html file in this example
local article = require("how-to-build-a-blog-the-hard-way")
cg.opt.article["how-to-build-a-blog-the-hard-way"] = article
-- how-to-build-a-blog-the-hard-way.html.cgt
<! local article = opt.articles["how-to-build-a-blog-the-hard-way"] !>
<h1><% article.title %></h1>
<h2><% article.date %></h2>

18
code_snippets/htbb4.lua Normal file
View file

@ -0,0 +1,18 @@
-- example.txt.cgt
<! local i = 0 !>
<! while i <= 5 do !>
<% i %>
<! i = i + 1 !>
<! end !>
-- confgen.lua
cg.addFile('example.txt.cgt')
-- example.txt
1
2
3
4
5

6
confgen.lua
View file

@ -2,8 +2,6 @@ cg.addPath('articles', '.')
cg.addFile('index.html.cgt')
cg.addFile('style.css.cgt')
cg.addFile('prism.css')
cg.addFile('prism.js')
local function getArticles()
local list = {}
@ -32,8 +30,6 @@ cg.opt.header_links = [[
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5734329956723165" crossorigin="anonymous"></script>
<meta name="google-adsense-account" content="ca-pub-5734329956723165">
<script src="https://kit.fontawesome.com/c95d3d678b.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="prism.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Share+Tech&display=swap" rel="stylesheet">
@ -52,3 +48,5 @@ cg.opt.menu = [[
<a href="]].. github ..[["> <i class="fa-brands fa-github"></i> Github </a>
</div>
]]
cg.opt.highlight = require("highlight")

9
highlight.lua Normal file
View file

@ -0,0 +1,9 @@
return function (file)
local highlighted = io.popen("tree-sitter highlight -H code_snippets/" .. file):read("*a")
highlighted = highlighted:gsub("<head.-</head>", "")
highlighted = highlighted:gsub("<body>", '<div class="code">')
highlighted = highlighted:gsub("</body>", "</div>")
return highlighted
end

14
style.css.cgt
View file

@ -132,6 +132,20 @@ a.article {
animation: blink 2s linear infinite;
}
.code {
background: #292929;
padding: 2em 1em;
border-radius: .3em;
}
.line-number {
display: none;
}
.line {
white-space: pre;
}
@keyframes blink{
0% {
opacity: 1;