diff options
| author | Andinus <andinus@nand.sh> | 2022-06-10 23:13:14 +0530 |
|---|---|---|
| committer | Andinus <andinus@nand.sh> | 2022-06-10 23:16:27 +0530 |
| commit | bef200b4669f058ce43ec9c0a3583de7fac558e3 (patch) | |
| tree | 0b25b603e5ba3f46c2c8396cfcf036923771471e | |
| parent | 3a443f9380478ab30a2ba7dc173f5e6de880de03 (diff) | |
| download | crater-bef200b4669f058ce43ec9c0a3583de7fac558e3.tar.gz | |
Add alt tags to images, fix flash of unstyled content
- FOUC: On firefox, maybe the '@import' rule caused this. Also tried out lightGallery.js for lightbox, it doesn't work with text & anyways, it's buggy with bricks.js & you have to request license key.
| -rw-r--r-- | lib/Crater/Gallery.rakumod | 8 | ||||
| -rw-r--r-- | lib/Crater/Routes/Gallery.rakumod | 2 | ||||
| -rw-r--r-- | resources/css/style.css | 2 | ||||
| -rw-r--r-- | resources/js/gallery.js | 4 | ||||
| -rw-r--r-- | templates/base.crotmp | 17 | ||||
| -rw-r--r-- | templates/gallery.crotmp | 36 | ||||
| -rw-r--r-- | templates/login.crotmp | 21 |
7 files changed, 43 insertions, 47 deletions
diff --git a/lib/Crater/Gallery.rakumod b/lib/Crater/Gallery.rakumod index ea92c47..19b0d69 100644 --- a/lib/Crater/Gallery.rakumod +++ b/lib/Crater/Gallery.rakumod @@ -3,13 +3,16 @@ class Crater::Gallery { method list() { my @gallery; - for dir($!directory).sort(*.modified) { + for $!directory.dir.sort(*.modified) { if .IO.d { } elsif .IO.f { my Str $ext = .extension.lc; if $ext eq "jpg"|"png" { - push @gallery, %( :type<img>, :src($_.relative($!directory)) ); + push @gallery, %( + :type<img>, :src($_.relative($!directory)), + :alt($_) + ); } elsif $ext eq "0" { push @gallery, %( :type<heading>, :text($_.slurp) ); } elsif $ext eq "txt" { @@ -19,7 +22,6 @@ class Crater::Gallery { } } } - return @gallery; } } diff --git a/lib/Crater/Routes/Gallery.rakumod b/lib/Crater/Routes/Gallery.rakumod index 04c8d74..cf79cc6 100644 --- a/lib/Crater/Routes/Gallery.rakumod +++ b/lib/Crater/Routes/Gallery.rakumod @@ -19,7 +19,7 @@ sub gallery-routes( redirect '/login', :see-other; } get -> *@path { - static $gallery.directory, @path; + static $gallery.directory.add(".crater/thumbnails"), @path; } } } diff --git a/resources/css/style.css b/resources/css/style.css index 0c51bab..a380707 100644 --- a/resources/css/style.css +++ b/resources/css/style.css @@ -1,5 +1,3 @@ -@import 'colors.css'; - ::selection { background-color: var(--bg-hl-alt-intense); } diff --git a/resources/js/gallery.js b/resources/js/gallery.js index ae0fd90..bab4d1d 100644 --- a/resources/js/gallery.js +++ b/resources/js/gallery.js @@ -24,7 +24,9 @@ const instance = Bricks({ instance .on('pack', () => console.log('ALL grid items packed.')) .on('update', () => console.log('NEW grid items packed.')) - .on('resize', size => console.log('The grid has be re-packed to accommodate a new BREAKPOINT.', size)); + .on('resize', size => console.log( + 'The grid has be re-packed to accommodate a new BREAKPOINT.', size + )); // start it up, when the DOM is ready. note that if images are in the // grid, you may need to wait for document.readyState === 'complete'. diff --git a/templates/base.crotmp b/templates/base.crotmp index f200241..41c0420 100644 --- a/templates/base.crotmp +++ b/templates/base.crotmp @@ -1,14 +1,15 @@ <:macro page($title)> -<!doctype html> -<html lang="en"> + <!doctype html> + <html lang="en"> <head> - <meta charset="utf-8"> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <title><$title> - Crater</title> - <link rel="stylesheet" href="/resources/css/style.css"> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title><$title> - Crater</title> + <link rel="stylesheet" href="/resources/css/colors.css"> + <link rel="stylesheet" href="/resources/css/style.css"> </head> <body> - <:body> + <:body> </body> -</html> + </html> </:macro> diff --git a/templates/gallery.crotmp b/templates/gallery.crotmp index 25c55ea..6afef0a 100644 --- a/templates/gallery.crotmp +++ b/templates/gallery.crotmp @@ -1,24 +1,18 @@ <:use 'templates/base.crotmp'> -<|page(.title)> -<div id="gallery"> - <@gallery : $i> - - <?{ $i.<type> eq 'img' }> - <img src="<$i.<src>>" loading="lazy"> - </?> - - <?{ $i.<type> eq 'text' }> - <div class="text"> - <$i.<text>> + <|page(.title)> + <div id="gallery"> + <@gallery : $i> + <?{ $i.<type> eq 'img' }> + <img alt="<$i.<alt>>" src="<$i.<src>>" loading="lazy"> + </?> + <?{ $i.<type> eq 'text' }> + <div class="text"><$i.<text>></div> + </?> + <?{ $i.<type> eq 'heading' }> + <h1 class="heading"><$i.<text>></h1> + </?> + </@> </div> - </?> - - <?{ $i.<type> eq 'heading' }> - <h1 class="heading"><$i.<text>></h1> - </?> - - </@> -</div> -<script type="text/javascript" src="/resources/js/bricks.js"></script> -<script type="text/javascript" src="/resources/js/gallery.js"></script> + <script type="text/javascript" src="/resources/js/bricks.js"></script> + <script type="text/javascript" src="/resources/js/gallery.js"></script> </|> diff --git a/templates/login.crotmp b/templates/login.crotmp index 2a5587c..343f768 100644 --- a/templates/login.crotmp +++ b/templates/login.crotmp @@ -1,15 +1,14 @@ <:use 'templates/base.crotmp'> -<|page('Log In')> -<form method="post" action="/login"> - <?.error> - <div class="alert" role="alert"> + <|page('Log In')> + <form method="post" action="/login"> + <?.error> + <div class="alert" role="alert"> <.error> - </div> - </?> + </div> + </?> - <input type="password" name="pass" id="pass" placeholder="Password" required> - <br> - <input type="submit" value="Log In" /> -</form> -</div> + <input type="password" name="pass" id="pass" placeholder="Password" required> + <br> + <input type="submit" value="Log In" /> + </form> </|> |