redesign #281
16 changed files with 446 additions and 480 deletions
|
@ -2,147 +2,83 @@
|
||||||
@import "tailwindcss/components";
|
@import "tailwindcss/components";
|
||||||
@import "tailwindcss/utilities";
|
@import "tailwindcss/utilities";
|
||||||
|
|
||||||
@import "./reset.css";
|
|
||||||
@import "./gruvbox.css";
|
|
||||||
@import "./lightbox.css";
|
@import "./lightbox.css";
|
||||||
@import "./tablesort.css";
|
@import "./tablesort.css";
|
||||||
|
|
||||||
|
/*
|
||||||
|
The base layer is for things like reset rules or default styles applied to plain HTML elements.
|
||||||
|
*/
|
||||||
@layer base {
|
@layer base {
|
||||||
:root {
|
:root {
|
||||||
--font-features: "case", "cpsp", "frac", "salt", "ccmp", "cv01", "cv02", "cv03", "cv04", "cv05", "cv06", "cv07", "cv09", "cv10", "cv11";
|
--color-background: 255 255 255;
|
||||||
|
--color-foreground: 0 0 0;
|
||||||
|
--color-primary: 0 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
:root {
|
:root[mode=dark] {
|
||||||
|
--color-background: 0 0 0;
|
||||||
|
--color-foreground: 255 255 255;
|
||||||
|
--color-primary: 255 255 255;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
font-family: 'Inter', sans-serif;
|
font-family: 'Inter', sans-serif;
|
||||||
font-feature-settings: var(--font-features);
|
font-feature-settings: "case", "cpsp", "frac", "salt", "ccmp", "cv01", "cv02", "cv03", "cv04", "cv05", "cv06", "cv07", "cv09", "cv10", "cv11";
|
||||||
}
|
|
||||||
@supports (font-variation-settings: normal) {
|
|
||||||
:root {
|
|
||||||
font-family: 'Inter var', sans-serif;
|
|
||||||
font-feature-settings: var(--font-features);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
:root {
|
.stack > * + * {
|
||||||
--color-primary: 214 93 14; /* orange */
|
margin-block-start: var(--flow-space, 1em);
|
||||||
--color-primary1: 175 58 3; /* orange faded */
|
|
||||||
|
|
||||||
--color-secondary: 104 157 106; /* aqua */
|
|
||||||
--color-secondary1: 66 123 88; /* aqua faded */
|
|
||||||
|
|
||||||
--color-blue: 69 133 136 ; /* blue */
|
|
||||||
--color-blue1: 7 102 120; /* blue faded */
|
|
||||||
|
|
||||||
--color-purple: 177 98 134 ; /* purple */
|
|
||||||
--color-purple1: 143 63 113; /* purple faded */
|
|
||||||
|
|
||||||
--color-yellow: 215 153 33; /* yellow */
|
|
||||||
--color-yellow1: 181 118 20; /* yellow faded */
|
|
||||||
|
|
||||||
--color-background: 253 244 193; /* light0 */
|
|
||||||
--color-background1: 235 219 178; /* light1 */
|
|
||||||
|
|
||||||
--color-foreground: 60 56 54; /* dark1 */
|
|
||||||
--color-foreground1: 80 73 69; /* dark2 */
|
|
||||||
|
|
||||||
--color-heading: var(--color-secondary);
|
|
||||||
|
|
||||||
@apply selection:bg-theme-primary/50;
|
|
||||||
}
|
|
||||||
|
|
||||||
:root[data-mode=dark] {
|
|
||||||
--color-primary: 214 93 14; /* orange */
|
|
||||||
--color-primary1: 254 128 25; /* orange bright */
|
|
||||||
|
|
||||||
--color-secondary: 104 157 106; /* aqua */
|
|
||||||
--color-secondary1: 142 192 124; /* aqua bright */
|
|
||||||
|
|
||||||
--color-blue: 69 133 136 ; /* blue */
|
|
||||||
--color-blue1: 131 165 152; /* blue bright */
|
|
||||||
|
|
||||||
--color-purple: 177 98 134 ; /* purple */
|
|
||||||
--color-purple1: 250 189 47; /* purple bright */
|
|
||||||
|
|
||||||
--color-yellow: 215 153 33; /* yellow */
|
|
||||||
--color-yellow1: 181 118 20; /* yellow bright */
|
|
||||||
|
|
||||||
--color-background: 40 40 40; /* dark0 */
|
|
||||||
--color-background1: 60 56 54; /* dark1 */
|
|
||||||
|
|
||||||
--color-foreground: 235 219 178; /* light1 */
|
|
||||||
--color-foreground1: 213 196 161; /* light2 */
|
|
||||||
|
|
||||||
--color-heading: var(--color-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
:root[data-mode=dark] .prose {
|
|
||||||
@apply prose-invert;
|
|
||||||
}
|
|
||||||
|
|
||||||
.prose a, a.underline-link {
|
|
||||||
@apply underline decoration-1 decoration-theme-primary hover:decoration-theme-base transition;
|
|
||||||
}
|
|
||||||
|
|
||||||
.prose a[href^="http://"], .prose a[href^="https://"] {
|
|
||||||
@apply after:content-['_↗']
|
|
||||||
}
|
|
||||||
|
|
||||||
.prose em {
|
|
||||||
@apply text-theme-quaternary;
|
|
||||||
}
|
|
||||||
|
|
||||||
.prose h2 { @apply before:font-light before:text-theme-secondary; }
|
|
||||||
.prose h3 { @apply before:font-light before:text-theme-tertiary; }
|
|
||||||
.prose h4 { @apply before:font-light before:text-theme-quaternary; }
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.prose h1 {
|
|
||||||
@apply before:content-['#'];
|
|
||||||
}
|
|
||||||
|
|
||||||
.prose h2 {
|
|
||||||
@apply before:content-['##'];
|
|
||||||
}
|
|
||||||
|
|
||||||
.prose h3 {
|
|
||||||
@apply before:content-['###'];
|
|
||||||
}
|
|
||||||
|
|
||||||
.prose h4 {
|
|
||||||
@apply before:content-['####'];
|
|
||||||
}
|
|
||||||
|
|
||||||
.prose pre {
|
|
||||||
@apply p-0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.prose img {
|
|
||||||
@apply rounded-lg;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
The components layer is for class-based styles that you want to be able to override with utilities.
|
||||||
|
*/
|
||||||
@layer components {
|
@layer components {
|
||||||
/* Set width and color for identity icons */
|
|
||||||
a[rel] svg {
|
#site-header {
|
||||||
width: 1em;
|
@apply py-8 block px-3 bg-black text-white print:hidden;
|
||||||
fill: rgb(var(--color-foreground));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.alert {
|
#site-header nav ul {
|
||||||
@apply p-3 mt-3 rounded;
|
@apply flex gap-3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.alert.alert-danger {
|
#site-content {
|
||||||
@apply bg-red-100 text-red-500 dark:bg-red-950 dark:text-red-500;
|
@apply grid grid-cols-1 lg:grid-cols-4 gap-3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footnotes li p { display: inline; }
|
aside#primary-sidebar {
|
||||||
.footnotes hr { display: none; }
|
@apply col-span-1;
|
||||||
.footnote:before { content: '{'; }
|
}
|
||||||
.footnote:after { content: '}'; }
|
|
||||||
|
|
||||||
a.button {
|
aside#primary-sidebar nav {
|
||||||
@apply inline-block text-theme-base px-3 py-2.5 border border-theme-background1 hover:bg-theme-background1 rounded transition font-semibold;
|
@apply flex flex-col md:flex-row;
|
||||||
|
}
|
||||||
|
aside#primary-sidebar .menu {
|
||||||
|
@apply flex-1;
|
||||||
|
}
|
||||||
|
|
||||||
|
aside#primary-sidebar .menu h2 {
|
||||||
|
@apply font-bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
aside#secondary-sidebar {
|
||||||
|
@apply col-span-1;
|
||||||
|
}
|
||||||
|
|
||||||
|
section#content-wrapper {
|
||||||
|
@apply col-span-3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
@apply flex items-center my-8 before:flex-1 after:flex-1 before:content-[''] after:content-[''] before:p-[0.5px] after:p-[0.5px] w-full mx-auto last:hidden;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
The utilities layer is for small, single-purpose classes that should always take precedence over any other styles.
|
||||||
|
*/
|
||||||
|
@layer utilities {
|
||||||
|
|
||||||
|
}
|
148
assets/css/app.old.css
Normal file
148
assets/css/app.old.css
Normal file
|
@ -0,0 +1,148 @@
|
||||||
|
@import "tailwindcss/base";
|
||||||
|
@import "tailwindcss/components";
|
||||||
|
@import "tailwindcss/utilities";
|
||||||
|
|
||||||
|
@import "./reset.css";
|
||||||
|
@import "./gruvbox.css";
|
||||||
|
@import "./lightbox.css";
|
||||||
|
@import "./tablesort.css";
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
:root {
|
||||||
|
--font-features: "case", "cpsp", "frac", "salt", "ccmp", "cv01", "cv02", "cv03", "cv04", "cv05", "cv06", "cv07", "cv09", "cv10", "cv11";
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
font-feature-settings: var(--font-features);
|
||||||
|
}
|
||||||
|
@supports (font-variation-settings: normal) {
|
||||||
|
:root {
|
||||||
|
font-family: 'Inter var', sans-serif;
|
||||||
|
font-feature-settings: var(--font-features);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--color-primary: 214 93 14; /* orange */
|
||||||
|
--color-primary1: 175 58 3; /* orange faded */
|
||||||
|
|
||||||
|
--color-secondary: 104 157 106; /* aqua */
|
||||||
|
--color-secondary1: 66 123 88; /* aqua faded */
|
||||||
|
|
||||||
|
--color-blue: 69 133 136 ; /* blue */
|
||||||
|
--color-blue1: 7 102 120; /* blue faded */
|
||||||
|
|
||||||
|
--color-purple: 177 98 134 ; /* purple */
|
||||||
|
--color-purple1: 143 63 113; /* purple faded */
|
||||||
|
|
||||||
|
--color-yellow: 215 153 33; /* yellow */
|
||||||
|
--color-yellow1: 181 118 20; /* yellow faded */
|
||||||
|
|
||||||
|
--color-background: 253 244 193; /* light0 */
|
||||||
|
--color-background1: 235 219 178; /* light1 */
|
||||||
|
|
||||||
|
--color-foreground: 60 56 54; /* dark1 */
|
||||||
|
--color-foreground1: 80 73 69; /* dark2 */
|
||||||
|
|
||||||
|
--color-heading: var(--color-secondary);
|
||||||
|
|
||||||
|
@apply selection:bg-theme-primary/50;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root[data-mode=dark] {
|
||||||
|
--color-primary: 214 93 14; /* orange */
|
||||||
|
--color-primary1: 254 128 25; /* orange bright */
|
||||||
|
|
||||||
|
--color-secondary: 104 157 106; /* aqua */
|
||||||
|
--color-secondary1: 142 192 124; /* aqua bright */
|
||||||
|
|
||||||
|
--color-blue: 69 133 136 ; /* blue */
|
||||||
|
--color-blue1: 131 165 152; /* blue bright */
|
||||||
|
|
||||||
|
--color-purple: 177 98 134 ; /* purple */
|
||||||
|
--color-purple1: 250 189 47; /* purple bright */
|
||||||
|
|
||||||
|
--color-yellow: 215 153 33; /* yellow */
|
||||||
|
--color-yellow1: 181 118 20; /* yellow bright */
|
||||||
|
|
||||||
|
--color-background: 40 40 40; /* dark0 */
|
||||||
|
--color-background1: 60 56 54; /* dark1 */
|
||||||
|
|
||||||
|
--color-foreground: 235 219 178; /* light1 */
|
||||||
|
--color-foreground1: 213 196 161; /* light2 */
|
||||||
|
|
||||||
|
--color-heading: var(--color-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
:root[data-mode=dark] .prose {
|
||||||
|
@apply prose-invert;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose a, a.underline-link {
|
||||||
|
@apply underline decoration-1 decoration-theme-primary hover:decoration-theme-base transition;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose a[href^="http://"], .prose a[href^="https://"] {
|
||||||
|
@apply after:content-['_↗']
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose em {
|
||||||
|
@apply text-theme-quaternary;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose h2 { @apply before:font-light before:text-theme-secondary; }
|
||||||
|
.prose h3 { @apply before:font-light before:text-theme-tertiary; }
|
||||||
|
.prose h4 { @apply before:font-light before:text-theme-quaternary; }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.prose h1 {
|
||||||
|
@apply before:content-['#'];
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose h2 {
|
||||||
|
@apply before:content-['##'];
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose h3 {
|
||||||
|
@apply before:content-['###'];
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose h4 {
|
||||||
|
@apply before:content-['####'];
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose pre {
|
||||||
|
@apply p-0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose img {
|
||||||
|
@apply rounded-lg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer components {
|
||||||
|
/* Set width and color for identity icons */
|
||||||
|
a[rel] svg {
|
||||||
|
width: 1em;
|
||||||
|
fill: rgb(var(--color-foreground));
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert {
|
||||||
|
@apply p-3 mt-3 rounded;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert.alert-danger {
|
||||||
|
@apply bg-red-100 text-red-500 dark:bg-red-950 dark:text-red-500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footnotes li p { display: inline; }
|
||||||
|
.footnotes hr { display: none; }
|
||||||
|
.footnote:before { content: '{'; }
|
||||||
|
.footnote:after { content: '}'; }
|
||||||
|
|
||||||
|
a.button {
|
||||||
|
@apply inline-block text-theme-base px-3 py-2.5 border border-theme-background1 hover:bg-theme-background1 rounded transition font-semibold;
|
||||||
|
}
|
||||||
|
}
|
|
@ -14,59 +14,7 @@ module.exports = {
|
||||||
],
|
],
|
||||||
darkMode: ['class', '[data-mode="dark"]'],
|
darkMode: ['class', '[data-mode="dark"]'],
|
||||||
theme: {
|
theme: {
|
||||||
extend: {
|
container: { center: true }
|
||||||
typography: {
|
|
||||||
gruvbox: {
|
|
||||||
css: {
|
|
||||||
'--tw-prose-td-borders': 'rgb(var(--color-background1))',
|
|
||||||
'--tw-prose-th-borders': 'rgb(var(--color-background1))',
|
|
||||||
'--tw-prose-body': 'rgb(var(--color-foreground))',
|
|
||||||
'--tw-prose-links': 'rgb(var(--color-foreground))',
|
|
||||||
'--tw-prose-headings': 'rgb(var(--color-foreground))',
|
|
||||||
'--tw-prose-bold': 'rgb(var(--color-yellow1))',
|
|
||||||
'--tw-prose-quotes': 'rgb(var(--color-foreground))',
|
|
||||||
'--tw-prose-bullets': 'rgb(var(--color-primary))',
|
|
||||||
'--tw-prose-code': 'rgb(var(--color-yellow1))',
|
|
||||||
'--tw-prose-pre-bg': 'rgb(var(--color-background1))',
|
|
||||||
'--tw-prose-quote-borders': 'rgb(var(--color-primary))',
|
|
||||||
'--tw-prose-counters': 'rgb(var(--color-foreground))',
|
|
||||||
'--tw-prose-invert-td-borders': 'rgb(var(--color-background1))',
|
|
||||||
'--tw-prose-invert-th-borders': 'rgb(var(--color-background1))',
|
|
||||||
'--tw-prose-invert-body': 'rgb(var(--color-foreground))',
|
|
||||||
'--tw-prose-invert-links': 'rgb(var(--color-foreground))',
|
|
||||||
'--tw-prose-invert-headings': 'rgb(var(--color-foreground))',
|
|
||||||
'--tw-prose-invert-bold': 'rgb(var(--color-yellow))',
|
|
||||||
'--tw-prose-invert-quotes': 'rgb(var(--color-foreground))',
|
|
||||||
'--tw-prose-invert-bullets': 'rgb(var(--color-primary))',
|
|
||||||
'--tw-prose-invert-quote-borders': 'rgb(var(--color-primary))',
|
|
||||||
'--tw-prose-invert-code': 'rgb(var(--color-yellow))',
|
|
||||||
'--tw-prose-invert-pre-bg': 'rgb(var(--color-background1))',
|
|
||||||
'--tw-prose-invert-counters': 'rgb(var(--color-foreground))',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
colors: {
|
|
||||||
code: colors.emerald,
|
|
||||||
gray: colors.zinc,
|
|
||||||
theme: {
|
|
||||||
background: 'rgb(var(--color-background) / <alpha-value>)',
|
|
||||||
background1: 'rgb(var(--color-background1) / <alpha-value>)',
|
|
||||||
base: 'rgb(var(--color-foreground) / <alpha-value>)',
|
|
||||||
base1: 'rgb(var(--color-foreground1) / <alpha-value>)',
|
|
||||||
primary: 'rgb(var(--color-primary) / <alpha-value>)',
|
|
||||||
primary1: 'rgb(var(--color-primary1) / <alpha-value>)',
|
|
||||||
secondary: 'rgb(var(--color-secondary) / <alpha-value>)',
|
|
||||||
secondary1: 'rgb(var(--color-secondary1) / <alpha-value>)',
|
|
||||||
tertiary: 'rgb(var(--color-blue) / <alpha-value>)',
|
|
||||||
tertiary1: 'rgb(var(--color-blue1) / <alpha-value>)',
|
|
||||||
quaternary: 'rgb(var(--color-purple) / <alpha-value>)',
|
|
||||||
quaternary1: 'rgb(var(--color-purple1) / <alpha-value>)',
|
|
||||||
quinary: 'rgb(var(--color-yellow) / <alpha-value>)',
|
|
||||||
quinary1: 'rgb(var(--color-yellow1) / <alpha-value>)',
|
|
||||||
heading: 'rgb(var(--color-heading) / <alpha-value>)'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
require("@tailwindcss/forms"),
|
require("@tailwindcss/forms"),
|
||||||
|
|
|
@ -1,7 +1,5 @@
|
||||||
defmodule ChiyaWeb.Layouts do
|
defmodule ChiyaWeb.Layouts do
|
||||||
use ChiyaWeb, :html
|
use ChiyaWeb, :html
|
||||||
|
|
||||||
import ChiyaWeb.PublicComponents, only: [divider: 1, site_header: 1]
|
|
||||||
|
|
||||||
embed_templates "layouts/*"
|
embed_templates "layouts/*"
|
||||||
end
|
end
|
||||||
|
|
|
@ -34,56 +34,96 @@
|
||||||
<%= @settings.custom_css %>
|
<%= @settings.custom_css %>
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body class="text-theme-base bg-theme-background | h-feed hfeed">
|
<body class="stack | h-feed hfeed">
|
||||||
<aside class="block print:hidden">
|
<header id="site-header">
|
||||||
<%= raw(@settings.custom_html) %>
|
<nav class="container">
|
||||||
</aside>
|
<ul>
|
||||||
|
<li>
|
||||||
<header class="my-8 block px-3 print:hidden">
|
<a href="/">
|
||||||
<.site_header user={@current_user} />
|
<span>Home</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/about">
|
||||||
|
<span>About</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/wiki">
|
||||||
|
<span>Wiki</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/bookmarks">
|
||||||
|
<span>Bookmarks</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="flex-1"></li>
|
||||||
|
<%= if @current_user do %>
|
||||||
|
<li>
|
||||||
|
<a href="/admin">
|
||||||
|
Admin
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<% end %>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main class="mx-3 md:mx-0">
|
<main id="site-content" class="container print:hidden">
|
||||||
<%= @inner_content %>
|
<aside id="primary-sidebar">
|
||||||
</main>
|
<nav>
|
||||||
|
<div class="menu">
|
||||||
|
<h2>Info</h2>
|
||||||
|
|
||||||
<footer class="max-w-full mt-8 p-8 text-theme-base/75 bg-theme-background1 print:hidden">
|
<ul>
|
||||||
<section class="max-w-2xl mx-auto flex gap-3">
|
|
||||||
<div class="flex-1">
|
|
||||||
<h2 class="font-bold tracking-wider">Info</h2>
|
|
||||||
|
|
||||||
<ul class="list-disc list-inside">
|
|
||||||
<li>Served by Chiya v<%= Application.spec(:chiya, :vsn) %></li>
|
<li>Served by Chiya v<%= Application.spec(:chiya, :vsn) %></li>
|
||||||
<li>Made by Inhji</li>
|
<li>Made by Inhji</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex-1">
|
<div class="menu">
|
||||||
<h2 class="font-bold tracking-wider">Links</h2>
|
<h2>Links</h2>
|
||||||
|
|
||||||
<ul class="list-disc list-inside">
|
<ul>
|
||||||
<li><a href={~p"/wiki"}>Wiki</a></li>
|
<li><a href={~p"/wiki"}>Wiki</a></li>
|
||||||
<li><a href={~p"/about"}>About</a></li>
|
<li><a href={~p"/about"}>About</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex-1">
|
<div class="menu">
|
||||||
<h2 class="font-bold tracking-wider">Elsewhere</h2>
|
<h2>Elsewhere</h2>
|
||||||
|
|
||||||
<ul class="list-disc list-inside">
|
<ul>
|
||||||
<%= for identity <- @public_identities do %>
|
<%= for identity <- @public_identities do %>
|
||||||
<li><a href={identity.url}><%= identity.name %></a></li>
|
<li><a href={identity.url}><%= identity.name %></a></li>
|
||||||
<% end %>
|
<% end %>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="max-w-2xl mx-auto">
|
<div class="menu">
|
||||||
<.divider />
|
<h2>Elsewhere</h2>
|
||||||
<div data-dummy="true" />
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<p class="mt-4 max-w-2xl mx-auto text-center">
|
<ul>
|
||||||
|
<%= for channel <- @channels do %>
|
||||||
|
<li>
|
||||||
|
<a href={~p"/channel/#{channel.slug}"}>
|
||||||
|
<%= channel.name %>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<% end %>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<section id="content-wrapper">
|
||||||
|
<%= @inner_content %>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="max-w-full mt-8 p-8 text-theme-base/75 bg-theme-background1 print:hidden">
|
||||||
|
<p class="container text-center">
|
||||||
Struggling to make a decent website since 2011
|
Struggling to make a decent website since 2011
|
||||||
</p>
|
</p>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
|
@ -59,16 +59,6 @@ defmodule ChiyaWeb.PublicComponents do
|
||||||
<hr class="my-6 border-theme-base/20" />
|
<hr class="my-6 border-theme-base/20" />
|
||||||
"""
|
"""
|
||||||
|
|
||||||
attr :text, :string, default: "⌘"
|
|
||||||
|
|
||||||
def divider(assigns) do
|
|
||||||
~H"""
|
|
||||||
<div class="flex items-center my-8 text-theme-primary before:flex-1 after:flex-1 before:content-[''] after:content-[''] before:p-[0.5px] after:p-[0.5px] before:bg-theme-base/25 after:bg-theme-base/25 w-full mx-auto last:hidden">
|
|
||||||
<%= assigns.text %>
|
|
||||||
</div>
|
|
||||||
"""
|
|
||||||
end
|
|
||||||
|
|
||||||
attr :note, :map, required: true
|
attr :note, :map, required: true
|
||||||
attr :class_tag, :string, default: ""
|
attr :class_tag, :string, default: ""
|
||||||
attr :linked, :boolean, default: true
|
attr :linked, :boolean, default: true
|
||||||
|
@ -117,210 +107,6 @@ defmodule ChiyaWeb.PublicComponents do
|
||||||
"""
|
"""
|
||||||
end
|
end
|
||||||
|
|
||||||
attr :layout, :atom, default: :list
|
|
||||||
attr :notes, :list, required: true
|
|
||||||
attr :show_content, :boolean, default: true
|
|
||||||
|
|
||||||
def note_list(assigns) do
|
|
||||||
case assigns.layout do
|
|
||||||
:gallery ->
|
|
||||||
note_list_gallery(assigns)
|
|
||||||
|
|
||||||
:microblog ->
|
|
||||||
note_list_microblog(assigns)
|
|
||||||
|
|
||||||
_ ->
|
|
||||||
note_list_default(assigns)
|
|
||||||
end
|
|
||||||
end
|
|
||||||
|
|
||||||
attr :notes, :list, required: true
|
|
||||||
|
|
||||||
@doc """
|
|
||||||
Default note list that renders a list of rounded boxes,
|
|
||||||
which show the note title and an excerpt of the content
|
|
||||||
"""
|
|
||||||
def note_list_default(assigns) do
|
|
||||||
~H"""
|
|
||||||
<section class="note-list default | sm:w-auto flex flex-col gap-3">
|
|
||||||
<%= for note <- assigns.notes do %>
|
|
||||||
<a
|
|
||||||
href={~p"/note/#{note.slug}"}
|
|
||||||
class="block rounded-lg px-6 py-4 border border-theme-background1 hover:bg-theme-background1 transition"
|
|
||||||
>
|
|
||||||
<header class="flex flex-row items-center gap-1">
|
|
||||||
<span class="text-theme-primary text-lg font-semibold leading-8 flex-1">
|
|
||||||
<%= note.name %>
|
|
||||||
</span>
|
|
||||||
<span class="text-theme-base/75 text-sm">
|
|
||||||
<%= pretty_date(note.published_at) %>
|
|
||||||
</span>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<%= if assigns.show_content do %>
|
|
||||||
<p class="text-theme-base">
|
|
||||||
<%= String.slice(note.content, 0..150) %>
|
|
||||||
</p>
|
|
||||||
<% end %>
|
|
||||||
|
|
||||||
<%= if not Enum.empty?(note.tags) do %>
|
|
||||||
<span class="inline-block">
|
|
||||||
<.tags note={note} linked={false} />
|
|
||||||
</span>
|
|
||||||
<% end %>
|
|
||||||
</a>
|
|
||||||
<% end %>
|
|
||||||
</section>
|
|
||||||
"""
|
|
||||||
end
|
|
||||||
|
|
||||||
attr :notes, :list, required: true
|
|
||||||
|
|
||||||
def note_list_microblog(assigns) do
|
|
||||||
~H"""
|
|
||||||
<section class="note-list microblog | mt-6 text-theme-base">
|
|
||||||
<%= for note <- assigns.notes do %>
|
|
||||||
<article class="mt-4 first:mt-0">
|
|
||||||
<.featured_images note={note} />
|
|
||||||
|
|
||||||
<header class="mt-4 text-lg">
|
|
||||||
<%= if(note.kind == :bookmark) do %>
|
|
||||||
<strong><%= note.name %></strong>
|
|
||||||
<% end %>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div class="prose prose-gruvbox mt-4">
|
|
||||||
<%= raw(render(note.content)) %>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<footer class="mt-4">
|
|
||||||
<a href={~p"/note/#{note.slug}"}>
|
|
||||||
<time class="text-theme-base/75">
|
|
||||||
<%= pretty_datetime(note.published_at) %>
|
|
||||||
</time>
|
|
||||||
</a>
|
|
||||||
<%= if not Enum.empty?(note.tags) do %>
|
|
||||||
<.dot />
|
|
||||||
<.tags note={note} class_tag="text-theme-base/75" />
|
|
||||||
<% end %>
|
|
||||||
</footer>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<.divider />
|
|
||||||
<% end %>
|
|
||||||
</section>
|
|
||||||
"""
|
|
||||||
end
|
|
||||||
|
|
||||||
attr :notes, :list, required: true
|
|
||||||
|
|
||||||
def note_list_gallery(assigns) do
|
|
||||||
~H"""
|
|
||||||
<section class="note-list gallery | mt-6">
|
|
||||||
<%= for note <- assigns.notes do %>
|
|
||||||
<article>
|
|
||||||
<section class="flex flex-wrap justify-start gap-3">
|
|
||||||
<%= for image <- note.images do %>
|
|
||||||
<a
|
|
||||||
href={ChiyaWeb.Helpers.image_url(image, :full)}
|
|
||||||
class="lightbox | w-28"
|
|
||||||
data-gallery={gallery_name(note)}
|
|
||||||
data-description={ChiyaWeb.Markdown.render(image.content)}
|
|
||||||
>
|
|
||||||
<img src={ChiyaWeb.Helpers.image_url(image, :thumb)} loading="lazy" />
|
|
||||||
</a>
|
|
||||||
<% end %>
|
|
||||||
</section>
|
|
||||||
<a
|
|
||||||
href={~p"/note/#{note.slug}"}
|
|
||||||
class="text-theme-secondary text-lg/10 font-semibold rounded-lg -mx-2 -my-0.5 px-2 py-0.5 hover:bg-theme-secondary/10 transition"
|
|
||||||
>
|
|
||||||
<%= note.name %>
|
|
||||||
<span class="text-theme-base/75 text-sm">
|
|
||||||
<%= pretty_date(note.published_at) %>
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<.line />
|
|
||||||
<% end %>
|
|
||||||
</section>
|
|
||||||
"""
|
|
||||||
end
|
|
||||||
|
|
||||||
attr :user, :map, required: true
|
|
||||||
|
|
||||||
def site_header(assigns) do
|
|
||||||
~H"""
|
|
||||||
<nav class="mx-auto max-w-2xl">
|
|
||||||
<ul class="flex gap-3">
|
|
||||||
<li>
|
|
||||||
<a href="/" class="button">
|
|
||||||
<.icon name="hero-home" />
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="/about" class="button">
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="16"
|
|
||||||
height="16"
|
|
||||||
fill="currentColor"
|
|
||||||
class="bi bi-umbrella inline"
|
|
||||||
viewBox="0 0 16 16"
|
|
||||||
>
|
|
||||||
<path d="M8 0a.5.5 0 0 1 .5.5v.514C12.625 1.238 16 4.22 16 8c0 0 0 .5-.5.5-.149 0-.352-.145-.352-.145l-.004-.004-.025-.023a3.484 3.484 0 0 0-.555-.394A3.166 3.166 0 0 0 13 7.5c-.638 0-1.178.213-1.564.434a3.484 3.484 0 0 0-.555.394l-.025.023-.003.003s-.204.146-.353.146-.352-.145-.352-.145l-.004-.004-.025-.023a3.484 3.484 0 0 0-.555-.394 3.3 3.3 0 0 0-1.064-.39V13.5H8h.5v.039l-.005.083a2.958 2.958 0 0 1-.298 1.102 2.257 2.257 0 0 1-.763.88C7.06 15.851 6.587 16 6 16s-1.061-.148-1.434-.396a2.255 2.255 0 0 1-.763-.88 2.958 2.958 0 0 1-.302-1.185v-.025l-.001-.009v-.003s0-.002.5-.002h-.5V13a.5.5 0 0 1 1 0v.506l.003.044a1.958 1.958 0 0 0 .195.726c.095.191.23.367.423.495.19.127.466.229.879.229s.689-.102.879-.229c.193-.128.328-.304.424-.495a1.958 1.958 0 0 0 .197-.77V7.544a3.3 3.3 0 0 0-1.064.39 3.482 3.482 0 0 0-.58.417l-.004.004S5.65 8.5 5.5 8.5c-.149 0-.352-.145-.352-.145l-.004-.004a3.482 3.482 0 0 0-.58-.417A3.166 3.166 0 0 0 3 7.5c-.638 0-1.177.213-1.564.434a3.482 3.482 0 0 0-.58.417l-.004.004S.65 8.5.5 8.5C0 8.5 0 8 0 8c0-3.78 3.375-6.762 7.5-6.986V.5A.5.5 0 0 1 8 0zM6.577 2.123c-2.833.5-4.99 2.458-5.474 4.854A4.124 4.124 0 0 1 3 6.5c.806 0 1.48.25 1.962.511a9.706 9.706 0 0 1 .344-2.358c.242-.868.64-1.765 1.271-2.53zm-.615 4.93A4.16 4.16 0 0 1 8 6.5a4.16 4.16 0 0 1 2.038.553 8.688 8.688 0 0 0-.307-2.13C9.434 3.858 8.898 2.83 8 2.117c-.898.712-1.434 1.74-1.731 2.804a8.687 8.687 0 0 0-.307 2.131zm3.46-4.93c.631.765 1.03 1.662 1.272 2.53.233.833.328 1.66.344 2.358A4.14 4.14 0 0 1 13 6.5c.77 0 1.42.23 1.897.477-.484-2.396-2.641-4.355-5.474-4.854z" />
|
|
||||||
</svg>
|
|
||||||
<span class="hidden sm:inline-block">About</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="/wiki" class="button">
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="16"
|
|
||||||
height="16"
|
|
||||||
fill="currentColor"
|
|
||||||
class="bi bi-journals inline"
|
|
||||||
viewBox="0 0 16 16"
|
|
||||||
>
|
|
||||||
<path d="M5 0h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2 2 2 0 0 1-2 2H3a2 2 0 0 1-2-2h1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1H1a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v9a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1H3a2 2 0 0 1 2-2z" />
|
|
||||||
<path d="M1 6v-.5a.5.5 0 0 1 1 0V6h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V9h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 2.5v.5H.5a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1H2v-.5a.5.5 0 0 0-1 0z" />
|
|
||||||
</svg>
|
|
||||||
<span class="hidden sm:inline">Wiki</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="/bookmarks" class="button">
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="16"
|
|
||||||
height="16"
|
|
||||||
fill="currentColor"
|
|
||||||
class="bi bi-bookmark-fill inline"
|
|
||||||
viewBox="0 0 16 16"
|
|
||||||
>
|
|
||||||
<path d="M2 2v13.5a.5.5 0 0 0 .74.439L8 13.069l5.26 2.87A.5.5 0 0 0 14 15.5V2a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2z" />
|
|
||||||
</svg>
|
|
||||||
<span class="hidden sm:inline-block">Bookmarks</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="flex-1"></li>
|
|
||||||
<%= if @user do %>
|
|
||||||
<li>
|
|
||||||
<a href="/admin" class="button">
|
|
||||||
<.icon name="hero-beaker" />
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<% end %>
|
|
||||||
<li>
|
|
||||||
<.darkmode_toggle class="button" />
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
"""
|
|
||||||
end
|
|
||||||
|
|
||||||
attr :note, :map, required: true
|
attr :note, :map, required: true
|
||||||
|
|
||||||
def featured_images(assigns) do
|
def featured_images(assigns) do
|
||||||
|
@ -406,8 +192,6 @@ defmodule ChiyaWeb.PublicComponents do
|
||||||
"""
|
"""
|
||||||
end
|
end
|
||||||
|
|
||||||
defp gallery_name(note), do: "gallery-#{note.id}"
|
|
||||||
|
|
||||||
defp main_images(note),
|
defp main_images(note),
|
||||||
do: Enum.filter(note.images, fn image -> image.featured end)
|
do: Enum.filter(note.images, fn image -> image.featured end)
|
||||||
end
|
end
|
||||||
|
|
|
@ -1,9 +1,14 @@
|
||||||
defmodule ChiyaWeb.PageHTML do
|
defmodule ChiyaWeb.PageHTML do
|
||||||
use ChiyaWeb, :html_public
|
use ChiyaWeb, :html_public
|
||||||
import Phoenix.HTML.Tag, only: [content_tag: 3, content_tag: 2]
|
import Phoenix.HTML.Tag, only: [content_tag: 3, content_tag: 2]
|
||||||
|
import ChiyaWeb.Format, only: [pretty_datetime: 1, pretty_date: 1, datetime: 1]
|
||||||
|
|
||||||
embed_templates "page_html/*"
|
embed_templates "page_html/*"
|
||||||
|
|
||||||
|
|
||||||
|
attr :notes, :list, required: true
|
||||||
|
def note_list_default(assigns)
|
||||||
|
|
||||||
def tag_list([]), do: "No Tags"
|
def tag_list([]), do: "No Tags"
|
||||||
def tag_list(tags), do: Enum.map_join(tags, ", ", fn t -> t.name end)
|
def tag_list(tags), do: Enum.map_join(tags, ", ", fn t -> t.name end)
|
||||||
|
|
||||||
|
|
|
@ -8,7 +8,15 @@
|
||||||
|
|
||||||
<section class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-3 max-w-4xl mx-auto">
|
<section class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-3 max-w-4xl mx-auto">
|
||||||
<section class="col-span-1 md:col-span-2">
|
<section class="col-span-1 md:col-span-2">
|
||||||
<.note_list notes={@notes} layout={@channel.layout} show_content={false} />
|
<%= if @channel.layout == :default do %>
|
||||||
|
<.note_list_default notes={@channel.notes}/>
|
||||||
|
<% end %>
|
||||||
|
<%= if @channel.layout == :gallery do %>
|
||||||
|
<.note_list_gallery notes={@channel.notes}/>
|
||||||
|
<% end %>
|
||||||
|
<%= if @channel.layout == :microblog do %>
|
||||||
|
<.note_list_microblog notes={@channel.notes}/>
|
||||||
|
<% end %>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
|
|
|
@ -5,6 +5,14 @@
|
||||||
</.header>
|
</.header>
|
||||||
|
|
||||||
<div class="w-full mt-6 sm:w-auto flex flex-col gap-1.5">
|
<div class="w-full mt-6 sm:w-auto flex flex-col gap-1.5">
|
||||||
<.note_list notes={@channel.notes} layout={@channel.layout} />
|
<%= if @channel.layout == :default do %>
|
||||||
|
<.note_list_default notes={@channel.notes}/>
|
||||||
|
<% end %>
|
||||||
|
<%= if @channel.layout == :gallery do %>
|
||||||
|
<.note_list_gallery notes={@channel.notes}/>
|
||||||
|
<% end %>
|
||||||
|
<%= if @channel.layout == :microblog do %>
|
||||||
|
<.note_list_microblog notes={@channel.notes}/>
|
||||||
|
<% end %>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
@ -1,29 +1,11 @@
|
||||||
<section class="max-w-2xl mx-auto">
|
<%= if @channel do %>
|
||||||
<.header class_title="text-theme-primary p-name" class_subtitle="p-summary">
|
<%= if @channel.layout == :default do %>
|
||||||
<%= @settings.title %>
|
<.note_list_default notes={@channel.notes}/>
|
||||||
<:subtitle><%= @settings.subtitle %></:subtitle>
|
|
||||||
</.header>
|
|
||||||
|
|
||||||
<section class="text-sm my-8">
|
|
||||||
<ul class="flex flex-wrap gap-3">
|
|
||||||
<li>
|
|
||||||
<a href="#" class="button">
|
|
||||||
<.icon name="hero-megaphone" />
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<%= for channel <- @channels do %>
|
|
||||||
<li>
|
|
||||||
<a href={~p"/channel/#{channel.slug}"} class="button">
|
|
||||||
<%= channel.name %>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<% end %>
|
<% end %>
|
||||||
</ul>
|
<%= if @channel.layout == :gallery do %>
|
||||||
</section>
|
<.note_list_gallery notes={@channel.notes}/>
|
||||||
|
|
||||||
<%= if @channel do %>
|
|
||||||
<section class="mt-8">
|
|
||||||
<.note_list notes={@channel.notes} layout={@channel.layout} />
|
|
||||||
</section>
|
|
||||||
<% end %>
|
<% end %>
|
||||||
</section>
|
<%= if @channel.layout == :microblog do %>
|
||||||
|
<.note_list_microblog notes={@channel.notes}/>
|
||||||
|
<% end %>
|
||||||
|
<% end %>
|
||||||
|
|
|
@ -34,8 +34,8 @@
|
||||||
|
|
||||||
<%= if not Enum.empty?(@note.links_to) do %>
|
<%= if not Enum.empty?(@note.links_to) do %>
|
||||||
<section class="mt-8 prose prose-gruvbox max-w-2xl mx-auto">
|
<section class="mt-8 prose prose-gruvbox max-w-2xl mx-auto">
|
||||||
<.divider text="" /> Notes linking here:
|
Notes linking here:
|
||||||
<ul class="">
|
<ul>
|
||||||
<%= for link <- @note.links_to do %>
|
<%= for link <- @note.links_to do %>
|
||||||
<li><a href={~p"/note/#{link.slug}"}><%= link.name %></a></li>
|
<li><a href={~p"/note/#{link.slug}"}><%= link.name %></a></li>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
@ -45,7 +45,6 @@
|
||||||
|
|
||||||
<%= if String.length(@note.url || "") > 0 do %>
|
<%= if String.length(@note.url || "") > 0 do %>
|
||||||
<section class="mt-8 max-w-2xl mx-auto text-center text-lg">
|
<section class="mt-8 max-w-2xl mx-auto text-center text-lg">
|
||||||
<.divider text=" " />
|
|
||||||
<.icon name="hero-link" /> <a href={@note.url}><%= @note.url %></a>
|
<.icon name="hero-link" /> <a href={@note.url}><%= @note.url %></a>
|
||||||
</section>
|
</section>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
@ -77,8 +76,6 @@
|
||||||
|
|
||||||
<section class="max-w-2xl mx-auto mt-8">
|
<section class="max-w-2xl mx-auto mt-8">
|
||||||
<%= if !Enum.empty?(@note.images) do %>
|
<%= if !Enum.empty?(@note.images) do %>
|
||||||
<.line />
|
|
||||||
|
|
||||||
<div class="flex flex-wrap gap-3">
|
<div class="flex flex-wrap gap-3">
|
||||||
<%= for image <- @note.images do %>
|
<%= for image <- @note.images do %>
|
||||||
<a
|
<a
|
||||||
|
|
|
@ -0,0 +1,29 @@
|
||||||
|
<section class="note-list default">
|
||||||
|
<%= for note <- assigns.notes do %>
|
||||||
|
<a
|
||||||
|
href={~p"/note/#{note.slug}"}
|
||||||
|
class="block rounded-lg px-6 py-4 border border-theme-background1 hover:bg-theme-background1 transition"
|
||||||
|
>
|
||||||
|
<header class="flex flex-row items-center gap-1">
|
||||||
|
<span class="text-theme-primary text-lg font-semibold leading-8 flex-1">
|
||||||
|
<%= note.name %>
|
||||||
|
</span>
|
||||||
|
<span class="text-theme-base/75 text-sm">
|
||||||
|
<%= pretty_date(note.published_at) %>
|
||||||
|
</span>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<%= if assigns.show_content do %>
|
||||||
|
<p class="text-theme-base">
|
||||||
|
<%= String.slice(note.content, 0..150) %>
|
||||||
|
</p>
|
||||||
|
<% end %>
|
||||||
|
|
||||||
|
<%= if not Enum.empty?(note.tags) do %>
|
||||||
|
<span class="inline-block">
|
||||||
|
<.tags note={note} linked={false} />
|
||||||
|
</span>
|
||||||
|
<% end %>
|
||||||
|
</a>
|
||||||
|
<% end %>
|
||||||
|
</section>
|
|
@ -0,0 +1,30 @@
|
||||||
|
|
||||||
|
<section class="note-list gallery | stack">
|
||||||
|
<%= for note <- assigns.notes do %>
|
||||||
|
<article>
|
||||||
|
<section class="flex flex-wrap justify-start gap-3">
|
||||||
|
<%= for image <- note.images do %>
|
||||||
|
<a
|
||||||
|
href={ChiyaWeb.Helpers.image_url(image, :full)}
|
||||||
|
class="lightbox | w-28"
|
||||||
|
data-gallery={"gallery-#{note.id}"}
|
||||||
|
data-description={ChiyaWeb.Markdown.render(image.content)}
|
||||||
|
>
|
||||||
|
<img src={ChiyaWeb.Helpers.image_url(image, :thumb)} loading="lazy" />
|
||||||
|
</a>
|
||||||
|
<% end %>
|
||||||
|
</section>
|
||||||
|
<a
|
||||||
|
href={~p"/note/#{note.slug}"}
|
||||||
|
class="text-theme-secondary text-lg/10 font-semibold rounded-lg -mx-2 -my-0.5 px-2 py-0.5 hover:bg-theme-secondary/10 transition"
|
||||||
|
>
|
||||||
|
<%= note.name %>
|
||||||
|
<span class="text-theme-base/75 text-sm">
|
||||||
|
<%= pretty_date(note.published_at) %>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<.line />
|
||||||
|
<% end %>
|
||||||
|
</section>
|
|
@ -0,0 +1,29 @@
|
||||||
|
<section class="note-list microblog | stack">
|
||||||
|
<%= for note <- assigns.notes do %>
|
||||||
|
<article class="stack">
|
||||||
|
<.featured_images note={note} />
|
||||||
|
|
||||||
|
<header class="text-lg">
|
||||||
|
<%= if(note.kind == :bookmark) do %>
|
||||||
|
<strong><%= note.name %></strong>
|
||||||
|
<% end %>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="prose">
|
||||||
|
<%= raw(Markdown.render(note.content)) %>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<a href={~p"/note/#{note.slug}"}>
|
||||||
|
<time>
|
||||||
|
<%= pretty_datetime(note.published_at) %>
|
||||||
|
</time>
|
||||||
|
</a>
|
||||||
|
<%= if not Enum.empty?(note.tags) do %>
|
||||||
|
<.dot />
|
||||||
|
<.tags note={note} />
|
||||||
|
<% end %>
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
<% end %>
|
||||||
|
</section>
|
|
@ -5,6 +5,14 @@
|
||||||
</.header>
|
</.header>
|
||||||
|
|
||||||
<div class="w-full mt-6 sm:w-auto flex flex-col gap-1.5">
|
<div class="w-full mt-6 sm:w-auto flex flex-col gap-1.5">
|
||||||
<.note_list notes={@tag.notes} />
|
<%= if @channel.layout == :default do %>
|
||||||
|
<.note_list_default note={@channel.notes}/>
|
||||||
|
<% end %>
|
||||||
|
<%= if @channel.layout == :gallery do %>
|
||||||
|
<.note_list_gallery note={@channel.notes}/>
|
||||||
|
<% end %>
|
||||||
|
<%= if @channel.layout == :microblog do %>
|
||||||
|
<.note_list_microblog note={@channel.notes}/>
|
||||||
|
<% end %>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
@ -14,13 +14,29 @@
|
||||||
<div class="mt-6 flex flex-1 flex-col gap-1.5">
|
<div class="mt-6 flex flex-1 flex-col gap-1.5">
|
||||||
<h2 class="text-xl text-theme-base">Recently Updated</h2>
|
<h2 class="text-xl text-theme-base">Recently Updated</h2>
|
||||||
|
|
||||||
<.note_list notes={@notes_updated} layout={@channel.layout} show_content={false} />
|
<%= if @channel.layout == :default do %>
|
||||||
|
<.note_list_default note={@channel.notes}/>
|
||||||
|
<% end %>
|
||||||
|
<%= if @channel.layout == :gallery do %>
|
||||||
|
<.note_list_gallery note={@channel.notes}/>
|
||||||
|
<% end %>
|
||||||
|
<%= if @channel.layout == :microblog do %>
|
||||||
|
<.note_list_microblog note={@channel.notes}/>
|
||||||
|
<% end %>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mt-6 flex flex-1 flex-col gap-1.5">
|
<div class="mt-6 flex flex-1 flex-col gap-1.5">
|
||||||
<h2 class="text-xl text-theme-base">Recently Published</h2>
|
<h2 class="text-xl text-theme-base">Recently Published</h2>
|
||||||
|
|
||||||
<.note_list notes={@notes_published} layout={@channel.layout} show_content={false} />
|
<%= if @channel.layout == :default do %>
|
||||||
|
<.note_list_default note={@channel.notes}/>
|
||||||
|
<% end %>
|
||||||
|
<%= if @channel.layout == :gallery do %>
|
||||||
|
<.note_list_gallery note={@channel.notes}/>
|
||||||
|
<% end %>
|
||||||
|
<%= if @channel.layout == :microblog do %>
|
||||||
|
<.note_list_microblog note={@channel.notes}/>
|
||||||
|
<% end %>
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
</section>
|
</section>
|
||||||
|
|
Loading…
Reference in a new issue