docs(12): lessons learned and docker deploy

12-order-summary-component-thymeleaf/README.org

@@ -23,15 +23,16 @@ Users should be able to:
 :PROPERTIES:
 :CUSTOM_ID: screenshot
 :END:
-[[./screenshot.png]]
+[[screenshot-desktop.png]]
+[[screenshot-mobile.png]]
 
 *** Links
 :PROPERTIES:
 :CUSTOM_ID: links
 :END:
-- Solution URL: [[https://your-solution-url.com][Add solution URL here]]
+- [[https://www.frontendmentor.io/solutions/responsive-by-tailwindcss-ssr-on-scala-with-cask-thymeleaf-template-bMMgFdajHT][Solution URL]]
-- Live Site URL: [[https://your-live-site-url.com][Add live site URL
+- [[https://efim-frontentmentor-order-summary.onrender.com/][Live Site URL]]
-  here]]
+  Free instance on render.com is turned off after 15 minutes of inactivity, please give the server a moment to start up if you're visiting it at the moment of being turned off
 
 ** My process
 :PROPERTIES:
@@ -42,16 +43,11 @@ Users should be able to:
 :CUSTOM_ID: built-with
 :END:
 - Semantic HTML5 markup
-- CSS custom properties
+- Tailwincss
-- Flexbox
-- CSS Grid
 - Mobile-first workflow
-- [[https://reactjs.org/][React]] - JS library
+- SSR in Scala & Cask webserver
-- [[https://nextjs.org/][Next.js]] - React framework
+- Thymeleaf templates
-- [[https://styled-components.com/][Styled Components]] - For styles
 
-*Note: These are just examples. Delete this note and replace the list
-above with your own choices*
 **** running during development
 installing "sbt-revolver":
 #+begin_src scala
@@ -82,9 +78,10 @@ will look for file in "src/main/resources/templates/index.html" to treat as a te
 **** with these html templates I can start learning and using Emmet mode in Emacs
 https://github.com/smihica/emmet-mode
 
-**** importing Thymeleaf template
+**** Importing Thymeleaf template
-
 There are other methods to include templates like th:replace and th:include, which have slightly different behaviours. th:insert keeps the host tag (the div in your case), th:replace replaces the whole host tag with the fragment, and th:include replaces the inner content of the host tag with the fragment.
+
+So i can actually have the "Order Summary" as reusable part.
 **** getting responsive background image with Tailwincss
 #+begin_src html
     <div
@@ -96,28 +93,10 @@ There are other methods to include templates like th:replace and th:include, whi
 :PROPERTIES:
 :CUSTOM_ID: continued-development
 :END:
-Use this section to outline areas that you want to continue focusing on
+This was first exercise I've done with Thymeleaf templates.
-in future projects. These could be concepts you're still not completely
-comfortable with or techniques you found useful that you want to refine
-and perfect.
 
-*Note: Delete this note and the content within this section and replace
+Next is using fragments with some dynamic content and styling.
-with your own plans for continued development.*
+Then attempting to include htmx fueled reactivity.
-
-*** Useful resources
-:PROPERTIES:
-:CUSTOM_ID: useful-resources
-:END:
-- [[https://www.example.com][Example resource 1]] - This helped me for
-  XYZ reason. I really liked this pattern and will use it going forward.
-- [[https://www.example.com][Example resource 2]] - This is an amazing
-  article which helped me finally understand XYZ. I'd recommend it to
-  anyone still learning this concept.
-
-*Note: Delete this note and replace the list above with resources that
-helped you during the challenge. These could come in handy for anyone
-viewing your solution or for yourself when you look back on this project
-in the future.*
 
 ** Acknowledgments
 :PROPERTIES:

12-order-summary-component-thymeleaf/default.nix

@@ -1,10 +1,10 @@
 { pkgs, lib, sbt-derivation }:
 
 let
-  package = sbt-derivation.lib.mkSbtDerivation {
-    inherit pkgs;
-    # ...and the rest of the arguments
   pname = "order-summary-component-app";
+  package = sbt-derivation.lib.mkSbtDerivation {
+    inherit pkgs pname;
+    # ...and the rest of the arguments
     version = "0.0.1";
     src = pkgs.nix-gitignore.gitignoreSource [ ] ./.;
     nativeBuildInputs = [ pkgs.nodePackages.tailwindcss ];
@@ -17,7 +17,7 @@ let
     # anyway copied to correct place
     installPhase = ''
       mkdir -p $out/bin
-      cp target/scala-*/order-summary-component-assembly-*.jar $out/bin/order-summary-component.jar
+      cp target/scala-*/order-summary-component-assembly-*.jar $out/bin/${pname}.jar
       mkdir -p $out/bin/dist
       cp ./output.css $out/bin/dist/output.css
       cp -r public $out/bin/public
@@ -26,6 +26,8 @@ let
     depsSha256 = "sha256-ADQB4qTl69ERlLAURrtR3fWa7PUdYjFLk5QdU5QgxRQ=";
   };
 
+in {
+  inherit package;
   module = { config, pkgs, ... }:
     let cfg = config.services.orderSummaryComponent;
     in {
@@ -67,7 +69,7 @@ let
             startLimitBurst = 10;
             serviceConfig = {
               ExecStart =
-                "${pkgs.jdk}/bin/java -jar ${package}/bin/order-summary-component.jar -p ${
+                "${pkgs.jdk}/bin/java -jar ${package}/bin/${pname}.jar -p ${
                   toString cfg.port
                 } --host ${serverHost}";
               WorkingDirectory = "${package}/bin";
@@ -84,7 +86,16 @@ let
         };
       };
     };
-in {
+  image = pkgs.dockerTools.buildLayeredImage {
-  package = package;
+    name = pname;
-  module = module;
+    tag = "latest";
+    created = "now";
+    config = {
+      Cmd = [ "${pkgs.jdk}/bin/java" "-jar" "${package}/bin/${pname}.jar" "--host" "0.0.0.0" ];
+      ExposedPorts = {
+        "8080/tcp" = {};
+      };
+      WorkingDir = "${package}/bin";
+    };
+  };
 }

flake.nix

@@ -42,6 +42,7 @@
         nixosModules.price-grid-app = price-grid.module;
         packages.price-grid-app-image = price-grid.image;
         packages.order-summary = order-summary.package;
+        packages.order-summary-image = order-summary.image;
         nixosModules.order-summary = order-summary.module;
         packages.testimonials-grid = testimonials-grid.package;
         nixosModules.testimonials-grid = testimonials-grid.module;