4 Commits

  1. 13
      CHANGELOG.md
  2. 134
      assets/css/app.css
  3. 14
      lib/mirage_web/live/about_live.ex
  4. 15
      lib/mirage_web/live/about_live.html.leex
  5. 14
      lib/mirage_web/live/blog_live.html.leex
  6. 1
      lib/mirage_web/router.ex
  7. 2
      lib/mirage_web/templates/layout/root.html.leex
  8. 2
      mix.exs

13
CHANGELOG.md

@ -5,6 +5,19 @@ See [Conventional Commits](Https://conventionalcommits.org) for commit guideline
<!-- changelog -->
## [v0.92.0](https://git.inhji.de/inhji/mirage/compare/v0.91.0...v0.92.0) (2021-03-28)
### Features:
* add bare minimum mf2 to blog index
* improve structure of app.css
* about page
## [v0.91.0](https://git.inhji.de/inhji/mirage/compare/v0.90.0...v0.91.0) (2021-03-28)

134
assets/css/app.css

@ -7,6 +7,10 @@
@custom-media --smol (max-width: 45em);
/* ==========================================================================
Variables
========================================================================== */
:root {
--blue: #007bff;
--indigo: #6610f2;
@ -41,6 +45,10 @@
}
}
/* ==========================================================================
Layout and General Stuff
========================================================================== */
body {
margin-left: calc(var(--width-sidebar) + var(--ok-s-3));
@ -88,6 +96,44 @@ main {
}
}
nav#sidebar {
left: 0;
top: 0;
position: fixed;
width: var(--width-sidebar);
height: 100vh;
box-shadow: 1px 0px 1px 0px rgba(0,0,0,0.5);
background-color: var(--background-navigation);
@media (--smol) {
a > .label { display: none; }
}
a {
color: var(--color-navigation);
display: inline-block;
padding: 1rem;
text-decoration: none;
width: 100%;
transition: all 0.3s;
font-weight: 300;
&:hover, &.active {
background-color: var(--primary);
}
svg.icon {
width: 1rem;
height: 1rem;
vertical-align: -.125em;
}
}
}
/* ==========================================================================
Elements and Components
========================================================================== */
.tag a {
background: var(--gray-light);
padding: 0.5rem;
@ -113,14 +159,6 @@ img {
border: 1px solid #dddddd;
}
textarea,
input[type=text],
input[type=email],
input[type=url],
input[type=password] {
width: 100%;
}
.images {
display: flex;
@ -129,47 +167,12 @@ input[type=password] {
}
}
.CodeMirror {
& * {
margin: 0;
padding: 0;
}
.CodeMirror-vscrollbar { overflow-y: hidden }
}
nav#sidebar {
left: 0;
top: 0;
position: fixed;
width: var(--width-sidebar);
height: 100vh;
box-shadow: 1px 0px 1px 0px rgba(0,0,0,0.5);
background-color: var(--background-navigation);
@media (--smol) {
a > .label { display: none; }
}
a {
color: var(--color-navigation);
display: inline-block;
padding: 1rem;
text-decoration: none;
width: 100%;
transition: all 0.3s;
font-weight: 300;
&:hover, &.active {
background-color: var(--primary);
}
svg.icon {
width: 1rem;
height: 1rem;
vertical-align: -.125em;
}
}
textarea,
input[type=text],
input[type=email],
input[type=url],
input[type=password] {
width: 100%;
}
table {
@ -208,10 +211,35 @@ table {
}
}
/**
* GHColors theme by Avi Aryan (http://aviaryan.in)
* Inspired by Github syntax coloring
*/
/* ==========================================================================
Helpers
========================================================================== */
.muted { color: var(--ok-tc-1); }
/* ==========================================================================
Fixes
for things not playing well with the classless approach
========================================================================== */
header + footer {
margin-top: calc(var(--ok-s-4) * -1);
}
.CodeMirror {
& * {
margin: 0;
padding: 0;
}
.CodeMirror-vscrollbar { overflow-y: hidden }
}
/* ==========================================================================
GHColors theme
By Avi Aryan (http://aviaryan.in)
========================================================================== */
code[class*="language-"],
pre[class*="language-"] {

14
lib/mirage_web/live/about_live.ex

@ -0,0 +1,14 @@
defmodule MirageWeb.AboutLive do
@moduledoc """
A page which shows all notes in the list @blog
"""
use MirageWeb, :live_view
@impl true
def mount(_params, session, socket) do
about_note = Mirage.Notes.get_note_by_title("@about")
{:ok, assign(socket, %{about_note: about_note}) |> with_user(session)}
end
end

15
lib/mirage_web/live/about_live.html.leex

@ -0,0 +1,15 @@
<header class="hero">
<h1>About</h1>
</header>
<%= if @about_note do %>
<section class="width-full bg-content">
<div class="content html">
<%= raw @about_note.content_html %>
</div>
</section>
<% else %>
<section class="width-full bg-content">
Looks like you did not create an about note yet. Just name it <code>@about</code> and it will show up here.
</section>
<% end %>

14
lib/mirage_web/live/blog_live.html.leex

@ -16,15 +16,17 @@
Looks like you did not create a blog list yet. Just name it <code>@blog</code> and its notes will show up here.
</section>
<% else %>
<section>
<section class="h-feed">
<%= for note <- @list.notes do %>
<article id="note-<%= note.id %>">
<article id="note-<%= note.id %>" class="h-entry">
<header>
<%= live_patch to: Routes.note_show_path(MirageWeb.Endpoint, :show, note) do %>
<h2 class="title"><%= note.title %></h2>
<% end %>
<time>Created <%= note.inserted_at |> Timex.from_now() %></time> <time>Last Edited <%= note.updated_at |> Timex.from_now() %></time>
<%= live_patch to: Routes.note_show_path(MirageWeb.Endpoint, :show, note), class: "u-url u-uid" do %>
<h2 class="title p-name"><%= note.title %></h2>
<% end %>
</header>
<footer>
<time datetime="<%= note.inserted_at %>" class="dt-published">Created <%= note.inserted_at |> Timex.from_now() %></time><span class="muted"> ‧ </span><time datetime="<%= note.updated_at %>" class="dt-updated">Last Edited <%= note.updated_at |> Timex.from_now() %></time>
</footer>
</article>
<% end %>
</section>

1
lib/mirage_web/router.ex

@ -27,6 +27,7 @@ defmodule MirageWeb.Router do
pipe_through :browser
live "/", HomeLive, :index
live "/about", AboutLive, :index
live "/blog", BlogLive, :index
live "/search", SearchLive.Index, :index

2
lib/mirage_web/templates/layout/root.html.leex

@ -17,7 +17,7 @@
<header id="main-header">
<nav role="navigation">
<%= live_patch(@_s.header_title.value, to: "/") %> / <%= live_patch("Blog", to: "/blog") %> / <%= live_patch("Links", to: "/links") %> / <%= live_patch("Search", to: "/search") %>
<%= live_patch(@_s.header_title.value, to: "/") %> / <%= live_patch("About", to: "/about") %> / <%= live_patch("Blog", to: "/blog") %> / <%= live_patch("Search", to: "/search") %>
<%= if not Mirage.Accounts.has_user? do %>
/ <%= live_patch "Register", to: Routes.user_registration_path(@conn, :new) %>
<% end %>

2
mix.exs

@ -1,7 +1,7 @@
defmodule Mirage.MixProject do
use Mix.Project
@version "0.91.0"
@version "0.92.0"
def project do
[

Loading…
Cancel
Save