silentsilas/monotab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add mono css framework, add some boiler plate, get started on responsive design fixes

Browse Source
This commit is contained in:
Silas
2025-07-26 04:48:30 -04:00
parent 378c8e09fb
commit bde72d0e93
25 changed files with 2077 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
_site/2024-01-15-test-post/index.html Normal file
View File

@@ -0,0 +1,131 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http_equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Test Post: Getting Started with Elixir | Llmex Blog
</title>
<link rel="stylesheet" href="/css/mono.css">
<link rel="stylesheet" href="/css/responsive.css">
<meta name="description" content="A simple blog built with Elixir and Tableau">
</head>
<body class="mono-all">
<aside>
<nav>
<h1><a href="/">Llmex Blog</a></h1>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/posts">Posts</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</aside>
<main>
<h1><a inert href="#getting-started-with-elixir" aria-hidden="true" class="anchor" id="getting-started-with-elixir"></a>Getting Started with Elixir</h1>
<p>Elixir is a dynamic, functional language designed for building scalable and maintainable applications. It leverages the Erlang VM, known for running low-latency, distributed, and fault-tolerant systems.</p>
<h2><a inert href="#key-features" aria-hidden="true" class="anchor" id="key-features"></a>Key Features</h2>
<ul>
<li><strong>Functional Programming</strong>: Immutable data and pattern matching</li>
<li><strong>Scalability</strong>: Built on the Erlang VM for concurrent processing</li>
<li><strong>Fault Tolerance</strong>: Supervisor trees and the "let it crash" philosophy</li>
<li><strong>Developer Productivity</strong>: Powerful metaprogramming and a helpful compiler</li>
</ul>
<h2><a inert href="#basic-syntax" aria-hidden="true" class="anchor" id="basic-syntax"></a>Basic Syntax</h2>
<pre class="athl" style="color: #e0e2ea; background-color: #14161b;"><code class="language-elixir" translate="no" tabindex="0"><span class="line" data-line="1"><span style="color: #e0e2ea; font-weight: bold;">defmodule</span> <span style="color: #e0e2ea;">Greeting</span> <span style="color: #e0e2ea; font-weight: bold;">do</span>
</span><span class="line" data-line="2"> <span style="color: #e0e2ea; font-weight: bold;">def</span> <span style="color: #8cf8f7;">hello</span><span style="color: #e0e2ea;">(</span><span style="color: #e0e2ea;">name</span><span style="color: #e0e2ea;">)</span> <span style="color: #e0e2ea; font-weight: bold;">do</span>
</span><span class="line" data-line="3"> <span style="color: #b3f6c0;">&quot;Hello, <span style="color: #8cf8f7;">#&lbrace;</span><span style="color: #e0e2ea;">name</span><span style="color: #8cf8f7;">&rbrace;</span>!&quot;</span>
</span><span class="line" data-line="4"> <span style="color: #e0e2ea; font-weight: bold;">end</span>
</span><span class="line" data-line="5"><span style="color: #e0e2ea; font-weight: bold;">end</span>
</span><span class="line" data-line="6">
</span><span class="line" data-line="7"><span style="color: #e0e2ea;">IO</span><span style="color: #e0e2ea;">.</span><span style="color: #8cf8f7;">puts</span> <span style="color: #e0e2ea;">Greeting</span><span style="color: #e0e2ea;">.</span><span style="color: #8cf8f7;">hello</span><span style="color: #e0e2ea;">(</span><span style="color: #b3f6c0;">&quot;World&quot;</span><span style="color: #e0e2ea;">)</span>
</span></code></pre>
<h2><a inert href="#pattern-matching" aria-hidden="true" class="anchor" id="pattern-matching"></a>Pattern Matching</h2>
<p>One of Elixir's most powerful features is pattern matching:</p>
<pre class="athl" style="color: #e0e2ea; background-color: #14161b;"><code class="language-elixir" translate="no" tabindex="0"><span class="line" data-line="1"><span style="color: #9b9ea4;"># Assign value</span>
</span><span class="line" data-line="2"><span style="color: #e0e2ea;">x</span> <span style="color: #e0e2ea;">=</span> <span style="color: #e0e2ea;">1</span>
</span><span class="line" data-line="3">
</span><span class="line" data-line="4"><span style="color: #9b9ea4;"># Pattern matching</span>
</span><span class="line" data-line="5"><span style="color: #e0e2ea;">&lbrace;</span><span style="color: #e0e2ea;">a</span><span style="color: #e0e2ea;">,</span> <span style="color: #e0e2ea;">b</span><span style="color: #e0e2ea;">,</span> <span style="color: #e0e2ea;">c</span><span style="color: #e0e2ea;">&rbrace;</span> <span style="color: #e0e2ea;">=</span> <span style="color: #e0e2ea;">&lbrace;</span><span style="color: #8cf8f7;">:hello</span><span style="color: #e0e2ea;">,</span> <span style="color: #b3f6c0;">&quot;world&quot;</span><span style="color: #e0e2ea;">,</span> <span style="color: #e0e2ea;">42</span><span style="color: #e0e2ea;">&rbrace;</span>
</span><span class="line" data-line="6">
</span><span class="line" data-line="7"><span style="color: #9b9ea4;"># Pattern matching in function definitions</span>
</span><span class="line" data-line="8"><span style="color: #e0e2ea; font-weight: bold;">def</span> <span style="color: #8cf8f7;">process</span><span style="color: #e0e2ea;">(</span><span style="color: #e0e2ea;">&lbrace;</span><span style="color: #8cf8f7;">:ok</span><span style="color: #e0e2ea;">,</span> <span style="color: #e0e2ea;">result</span><span style="color: #e0e2ea;">&rbrace;</span><span style="color: #e0e2ea;">)</span><span style="color: #e0e2ea;">,</span> <span style="color: #8cf8f7;">do: </span><span style="color: #e0e2ea;">result</span>
</span><span class="line" data-line="9"><span style="color: #e0e2ea; font-weight: bold;">def</span> <span style="color: #8cf8f7;">process</span><span style="color: #e0e2ea;">(</span><span style="color: #e0e2ea;">&lbrace;</span><span style="color: #8cf8f7;">:error</span><span style="color: #e0e2ea;">,</span> <span style="color: #e0e2ea;">reason</span><span style="color: #e0e2ea;">&rbrace;</span><span style="color: #e0e2ea;">)</span><span style="color: #e0e2ea;">,</span> <span style="color: #8cf8f7;">do: </span><span style="color: #e0e2ea; font-weight: bold;">raise</span><span style="color: #e0e2ea;">(</span><span style="color: #e0e2ea;">reason</span><span style="color: #e0e2ea;">)</span>
</span></code></pre>
<h2><a inert href="#the-pipe-operator" aria-hidden="true" class="anchor" id="the-pipe-operator"></a>The Pipe Operator</h2>
<p>Elixir's pipe operator (<code>|&gt;</code>) allows for clean, readable code:</p>
<pre class="athl" style="color: #e0e2ea; background-color: #14161b;"><code class="language-elixir" translate="no" tabindex="0"><span class="line" data-line="1"><span style="color: #b3f6c0;">&quot;Elixir rocks!&quot;</span>
</span><span class="line" data-line="2"><span style="color: #e0e2ea;">|&gt;</span> <span style="color: #e0e2ea;">String</span><span style="color: #e0e2ea;">.</span><span style="color: #8cf8f7;">upcase</span><span style="color: #e0e2ea;">(</span><span style="color: #e0e2ea;">)</span>
</span><span class="line" data-line="3"><span style="color: #e0e2ea;">|&gt;</span> <span style="color: #e0e2ea;">String</span><span style="color: #e0e2ea;">.</span><span style="color: #8cf8f7;">split</span><span style="color: #e0e2ea;">(</span><span style="color: #e0e2ea;">)</span>
</span><span class="line" data-line="4"><span style="color: #e0e2ea;">|&gt;</span> <span style="color: #e0e2ea;">Enum</span><span style="color: #e0e2ea;">.</span><span style="color: #8cf8f7;">count</span><span style="color: #e0e2ea;">(</span><span style="color: #e0e2ea;">)</span>
</span></code></pre>
<p>This blog post is just a simple introduction to Elixir. Stay tuned for more in-depth tutorials and examples!</p>
<time datetime="2024-01-15T00:00:00Z"></time>
<footer>
<p>&copy; 2025 Llmex Blog. Built with <a href="https://github.com/artalar/mono" target="_blank">Mono</a> and <a href="https://github.com/elixir-tools/tableau" target="_blank">Tableau</a></p>
</footer>
</main>
</body>
<script>
function log(message) {
if (true) {
console.log(`[web_dev_utils] ${message}`)
}
}
function connect() {
try {
window.socket = new WebSocket('ws://' + location.host + '/ws');
window.socket.onmessage = function(e) {
if (e.data === "reload") {
log("reloading!");
location.reload();
} else if (e.data === "subscribed") {
log("connected and subscribed!");
}
}
window.socket.onopen = () => {
waitForConnection(() => {
log("sending 'subscribe' message");
window.socket.send("subscribe")
}
, 300);
};
window.socket.onclose = () => {
setTimeout(() => connect(), 500);
};
function waitForConnection(callback, interval) {
log("waiting for connection!")
if (window.socket.readyState === 1) {
callback();
} else {
log("setting a timeout")
setTimeout(() => waitForConnection(callback, interval), interval);
}
}
} catch (e) {
log(e);
setTimeout(() => connect(), 500);
}
}
log("about to connect");
connect();
</script>
</html>