Implement galleries

bin/capsule_cli/action.ml

@@ -5,6 +5,7 @@ let program target =
   let* () = Generator.Rule.indexes ~target in
   let* () = Generator.Rule.pages ~target in
   let* () = Generator.Rule.addresses ~target in
+  let* () = Generator.Rule.galleries ~target in
   let* () = Generator.Rule.journal ~target ~size:4 in
   let* () = Generator.Rule.journal_feed ~target ~size:25 in
   let* () = Generator.Rule.pages_feed ~target ~size:25 in

css/default.css

@@ -44,6 +44,7 @@ body {
   font-family: var(--sans-serif-font);
 }
 
+.picture-links a,
 .comment-content-link,
 .comment-content-tag,
 .comment-content-mention,
@@ -109,6 +110,23 @@ footer a {
   font-family: var(--mono-font);
 }
 
+.sidebar > div {
+  margin-bottom: 32px;
+}
+
+.sidebar > div:last-child {
+  margin-bottom: 0;
+}
+
+.sidebar h3 {
+  margin: 0;
+  font-family: var(--sans-serif-font);
+  font-weight: 800;
+  text-transform: uppercase;
+  border-bottom: 3px solid var(--layout-bg-rev-color);
+  margin-bottom: 12px;
+}
+
 .header {
   margin: 64px 0 72px 0;
 }
@@ -431,20 +449,25 @@ code {
   font-family: var(--serif-font);
 }
 
+.gallery .gallery-links,
+.gallery .gallery-tags,
 .feed-entry .feed-tags {
   padding: 4px 0;
   margin: 0;
   font-family: var(--mono-font);
   /* border-right: 2px solid var(--layout-bg-rev-color); */
 }
 
+.gallery .gallery-links > li,
+.gallery .gallery-tags > li,
 .feed-entry .feed-tags > li {
   list-style: none;
   color: var(--layout-font-rev-color);
   border-bottom: 2px solid var(--layout-bg-rev-color);
   padding: 2px 8px;
 }
 
+.gallery .gallery-links > li > a,
 .feed-entry .feed-tags > li > a {
   color: var(--layout-font-rev-color);
   text-decoration: none;
@@ -455,10 +478,12 @@ code {
   padding-right: 4px;
 }
 
+.gallery .gallery-tags > li:last-child,
 .feed-entry .feed-tags > li:last-child {
   border-style: none;
 }
 
+.gallery .gallery-tags > li.tag:before,
 .feed-entry .feed-tags > li.tag:before {
   content: "#";
   color: var(--regular-link-color);
@@ -716,6 +741,80 @@ code {
   border-top: 0px solid transparent;
 }
 
+.gallery {
+  display: flex;
+  flex-direction: row;
+  margin-top: 64px;
+}
+
+.gallery article {
+  margin: 64px 0;
+}
+
+.gallery .gallery-content {
+  flex: 1;
+  margin-left: 24px;
+}
+
+.gallery .gallery-cover > img {
+  width: 100%;
+}
+
+.gallery .gallery-pictures {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 32px 8px;
+}
+
+.gallery .gallery-pictures .gallery-picture .gallery-description > div {
+  display: flex;
+  flex-direction: row;
+  font-family: var(--mono-font);
+  font-size: 90%;
+}
+
+.gallery
+  .gallery-pictures
+  .gallery-picture
+  .gallery-description
+  > div
+  > div:first-child {
+  flex: 1;
+  font-weight: 700;
+}
+
+.gallery
+  .gallery-pictures
+  .gallery-picture
+  .gallery-description
+  > div
+  > div:last-child {
+  flex: 2;
+}
+
+.gallery
+  .gallery-pictures
+  .gallery-picture
+  .gallery-description
+  .picture-links {
+  margin: 0;
+  padding: 0;
+}
+
+.gallery
+  .gallery-pictures
+  .gallery-picture
+  .gallery-description
+  .picture-links
+  > li {
+  list-style: none;
+}
+
+.gallery .gallery-pictures .gallery-picture img {
+  width: 100%;
+}
+
 .dapp-container {
   margin: 64px 0;
   font-family: var(--sans-serif-font);
@@ -942,10 +1041,23 @@ code {
     width: 100%;
   }
 
+  .gallery {
+    flex-direction: column-reverse;
+  }
+
   .feed-entry {
     flex-direction: column;
   }
 
+  .gallery .gallery-content {
+    margin-left: 0;
+    margin-bottom: 64px;
+  }
+
+  .gallery .gallery-pictures {
+    grid-template-columns: repeat(1, 1fr);
+  }
+
   .feed-sidebar {
     display: flex;
     margin-bottom: 12px;
@@ -962,6 +1074,9 @@ code {
   .feed-sidebar .feed-tags {
     padding: 0;
     margin: 0;
+  }
+
+  .feed-sidebar .feed-tags {
     margin-left: 32px;
   }
 

lib/generator/rule.ml

@@ -85,6 +85,22 @@ let addresses ~target =
     >>> T.apply_as_template (module Model.Address) "templates/layout.html"
     >>^ Stdlib.snd)
 
+let galleries ~target =
+  let open Build in
+  process_files $ [ "content/galleries" ] $ File.is_markdown
+  $ fun gallery_file ->
+  let file_target = Target.for_gallery ~target gallery_file in
+  create_file file_target
+    (binary_update
+    >>> Y.read_file_with_metadata (module Model.Gallery) gallery_file
+    >>> snd M.string_to_html
+    >>> fst (Model.Gallery.map_synopsis M.string_to_html)
+    >>> T.apply_as_template (module Model.Gallery) "templates/gallery.html"
+    >>> T.apply_as_template (module Model.Gallery) "templates/comments.html"
+    >>> T.apply_as_template (module Model.Gallery) "templates/page-header.html"
+    >>> T.apply_as_template (module Model.Gallery) "templates/layout.html"
+    >>^ Stdlib.snd)
+
 let journal_arrow preapply length i entries =
   let open Build in
   binary_update

lib/generator/rule.mli

@@ -38,6 +38,9 @@ val indexes : target:Filepath.t -> unit Effect.t
 val addresses : target:Filepath.t -> unit Effect.t
 (** [Rule.addresses] this is the rule that produces static addresses. *)
 
+val galleries : target:Filepath.t -> unit Effect.t
+(** [Rule.gallery] this is the rule that produces static addresses. *)
+
 val journal : target:Filepath.t -> size:int -> unit Effect.t
 (** [Rule.journal] this is the rule that produce pages of the journal. *)
 

lib/generator/target.ml

@@ -8,12 +8,14 @@ let fonts ~target = "fonts" |> into (capsule ~target)
 let images ~target = "images" |> into (capsule ~target)
 let pages ~target = "pages" |> into (capsule ~target)
 let addresses ~target = "addresses" |> into (capsule ~target)
+let galleries ~target = "galleries" |> into (capsule ~target)
 let dapps ~target = "dapps" |> into (capsule ~target)
 let entries ~target = "journal" |> into (capsule ~target)
 let indexes ~target = capsule ~target
 let for_page ~target file = md_to_html file |> into (pages ~target)
 let for_index ~target file = md_to_html file |> into (indexes ~target)
 let for_address ~target file = md_to_html file |> into (addresses ~target)
+let for_gallery ~target file = md_to_html file |> into (galleries ~target)
 let for_entry ~target file = md_to_html file |> into (entries ~target)
 
 let for_entries ~target index =

lib/generator/target.mli

@@ -30,6 +30,9 @@ val indexes : target:Filepath.t -> Filepath.t
 val addresses : target:Filepath.t -> Filepath.t
 (** [Target.addresses ~target] is the subfolder that contains addresses files. *)
 
+val galleries : target:Filepath.t -> Filepath.t
+(** [Target.galleries ~target] is the subfolder that contains galleries files. *)
+
 val dapps : target:Filepath.t -> Filepath.t
 (** [Target.dapps ~target] is the subfolder that contains dapps folders. *)
 
@@ -49,6 +52,10 @@ val for_address : target:Filepath.t -> string -> Filepath.t
 (** [Target.for_address ~target "a_page.md"] will returns the path of the
     address (with the extension changed in favor of [.html]). *)
 
+val for_gallery : target:Filepath.t -> string -> Filepath.t
+(** [Target.for_gallery ~target "a_page.md"] will returns the path of the
+    gallery (with the extension changed in favor of [.html]). *)
+
 val for_index : target:Filepath.t -> string -> Filepath.t
 (** [Target.for_index ~target "a_page.md"] will returns the path of the index
     (with the extension changed in favor of [.html]). *)

templates/comments.html

@@ -7,7 +7,7 @@ <h1>Commentaires</h1>
     Comme mon site web est hébergé sur un serveur de fichiers statiques (et ne
     dispose pas de base de données), les commentaires sont assurés par le
     <i>Fediverse</i>. Si vous possédez un compte, par exemple <i>Mastodon</i>,
-    <strong>vous pouvez donc commenter</strong> cet article en en répondant à ce
+    <strong>vous pouvez donc commenter</strong> cette page en répondant à ce
     <a
       href="https://{{ mastodon_thread.instance }}/@{{ mastodon_thread.user }}/{{ mastodon_thread.id }}"
       >fil de discussion</a