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

44
lib/layouts/index_layout.ex Normal file
View File

@@ -0,0 +1,44 @@
defmodule Llmex.IndexLayout do
use Tableau.Layout, layout: Llmex.RootLayout
use Phoenix.Component
def template(assigns) do
~H"""
<h1><%= @page[:title] || "Latest Posts" %></h1>
<%= if @page[:description] do %>
<p><%= @page[:description] %></p>
<% end %>
<%= if assigns[:posts] && length(@posts) > 0 do %>
<ul>
<%= for post <- @posts do %>
<li>
<h2><a href={post.permalink}><%= post.title %></a></h2>
<%= if post[:date] do %>
<time datetime={post[:date]}><%= format_date(post[:date]) %></time>
<% end %>
<%= if post[:description] do %>
<p><%= post[:description] %></p>
<% end %>
</li>
<% end %>
</ul>
<% else %>
<p>No posts found.</p>
<% end %>
<%= {:safe, render(@inner_content)} %>
"""
end
defp format_date(date_string) when is_binary(date_string) do
case Date.from_iso8601(date_string) do
{:ok, date} -> Calendar.strftime(date, "%B %d, %Y")
{:error, _} -> date_string
end
end
defp format_date(%Date{} = date), do: Calendar.strftime(date, "%B %d, %Y")
defp format_date(_), do: ""
end

10
lib/layouts/page_layout.ex Normal file
View File

@@ -0,0 +1,10 @@
defmodule Llmex.PageLayout do
use Tableau.Layout, layout: Llmex.RootLayout
use Phoenix.Component
def template(assigns) do
~H"""
<%= {:safe, render(@inner_content)} %>
"""
end
end

13
lib/layouts/post_layout.ex
View File

@@ -5,6 +5,19 @@ defmodule Llmex.PostLayout do
def template(assigns) do
~H"""
<%= {:safe, render(@inner_content)} %>
<%= if @page[:date] do %>
<time datetime={@page[:date]}><%= format_date(@page[:date]) %></time>
<% end %>
"""
end
defp format_date(date_string) when is_binary(date_string) do
case Date.from_iso8601(date_string) do
{:ok, date} -> Calendar.strftime(date, "%B %d, %Y")
{:error, _} -> date_string
end
end
defp format_date(%Date{} = date), do: Calendar.strftime(date, "%B %d, %Y")
defp format_date(_), do: ""
end

23
lib/layouts/root_layout.ex
View File

@@ -13,18 +13,35 @@ defmodule Llmex.RootLayout do
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
<%= [@page[:title], Llmex]
<%= [@page[:title], "Llmex Blog"]
|> Enum.filter(& &1)
|> Enum.intersperse("|")
|> Enum.join(" ") %>
</title>
<link rel="stylesheet" href="/css/simple.css" />
<link rel="stylesheet" href="/css/mono.css" />
<link rel="stylesheet" href="/css/responsive.css" />
<meta name="description" content={@page[:description] || "A simple blog built with Elixir and Tableau"} />
</head>
<body>
<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>
<%= render @inner_content %>
<footer>
<p>&copy; <%= Date.utc_today().year %> 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>

44
lib/pages/about.ex Normal file
View File

@@ -0,0 +1,44 @@
defmodule Llmex.Pages.About do
use Tableau.Page,
layout: Llmex.PageLayout,
permalink: "/about"
use Phoenix.Component
def template(assigns) do
~H"""
<section>
<h2>About</h2>
<p>
Welcome to Llmex Blog, a demonstration of building static sites with Elixir's Tableau generator.
This blog showcases the power and elegance of functional programming applied to web development.
</p>
</section>
<section>
<h2>Technology Stack</h2>
<p>This blog is built using:</p>
<ul>
<li><a href="https://github.com/elixir-tools/tableau" target="_blank">Tableau</a> - Static site generator for Elixir</li>
<li><a href="https://github.com/artalar/mono" target="_blank">Mono</a> - A brutalist CSS framework for clean, semantic styling</li>
</ul>
</section>
<section>
<h2>Our Philosophy</h2>
<p>
We believe in the power of functional programming to create maintainable,
scalable, and elegant solutions. Through this blog, we aim to share insights,
tutorials, and experiences from the world of Elixir and functional web development.
</p>
</section>
<section class="about-contact">
<h2>Get in Touch</h2>
<p>
Interested in contributing or have questions? Feel free to reach out through
our community channels or open an issue on our GitHub repository.
</p>
</section>
"""
end
end

18
lib/pages/home.ex Normal file
View File

@@ -0,0 +1,18 @@
defmodule Llmex.Pages.Index do
use Tableau.Page,
layout: Llmex.RootLayout,
permalink: "/"
use Phoenix.Component
def template(assigns) do
~H"""
<section>
<h2>Welcome to Llmex Blog</h2>
<p>
A simple blog built with Elixir, Phoenix LiveView, and Tableau static site generator.
Explore our latest posts and insights on functional programming, web development, and more.
</p>
</section>
"""
end
end

15
lib/pages/home_page.ex
View File

@@ -1,15 +0,0 @@
defmodule Llmex.HomePage do
use Tableau.Page,
layout: Llmex.RootLayout,
permalink: "/"
use Phoenix.Component
def template(assigns) do
~H"""
<p>
hello, world!
</p>
"""
end
end

36
lib/pages/index.ex Normal file
View File

@@ -0,0 +1,36 @@
defmodule Llmex.Pages.Index do
use Tableau.Page,
layout: Llmex.RootLayout,
permalink: "/"
use Phoenix.Component
def template(assigns) do
~H"""
<section class="hero">
<h2>Welcome to Llmex Blog</h2>
<p>
A simple blog built with Elixir, Phoenix LiveView, and Tableau static site generator.
Explore our latest posts and insights on functional programming, web development, and more.
</p>
</section>
<section class="featured-content">
<h3>Featured Topics</h3>
<div class="topics-grid">
<div class="topic-card">
<h4>Elixir & Phoenix</h4>
<p>Deep dives into the Elixir ecosystem and Phoenix framework.</p>
</div>
<div class="topic-card">
<h4>Functional Programming</h4>
<p>Exploring functional programming concepts and patterns.</p>
</div>
<div class="topic-card">
<h4>Web Development</h4>
<p>Modern web development techniques and best practices.</p>
</div>
</div>
</section>
"""
end
end

28
lib/pages/posts.ex Normal file
View File

@@ -0,0 +1,28 @@
defmodule Llmex.Pages.Posts do
use Tableau.Page,
layout: Llmex.IndexLayout,
permalink: "/posts"
use Phoenix.Component
def template(assigns) do
~H"""
<section class="posts-archive">
<p>
Browse through our collection of articles on Elixir, functional programming,
web development, and software engineering best practices.
</p>
</section>
<section class="posts-filter">
<h3>Categories</h3>
<div class="category-tags">
<a href="/posts" class="category-tag active">All Posts</a>
<a href="/posts/elixir" class="category-tag">Elixir</a>
<a href="/posts/phoenix" class="category-tag">Phoenix</a>
<a href="/posts/functional-programming" class="category-tag">Functional Programming</a>
<a href="/posts/web-development" class="category-tag">Web Development</a>
</div>
</section>
"""
end
end