122 lines
4.1 KiB
Org Mode
122 lines
4.1 KiB
Org Mode
* Frontend Mentor - Single price grid component solution
|
|
:PROPERTIES:
|
|
:CUSTOM_ID: frontend-mentor---single-price-grid-component-solution
|
|
:END:
|
|
This is a solution to the
|
|
[[https://www.frontendmentor.io/challenges/single-price-grid-component-5ce41129d0ff452fec5abbbc][Single
|
|
price grid component challenge on Frontend Mentor]]. Frontend Mentor
|
|
challenges help you improve your coding skills by building realistic
|
|
projects.
|
|
|
|
** Overview
|
|
:PROPERTIES:
|
|
:CUSTOM_ID: overview
|
|
:END:
|
|
*** The challenge
|
|
:PROPERTIES:
|
|
:CUSTOM_ID: the-challenge
|
|
:END:
|
|
Users should be able to:
|
|
|
|
- View the optimal layout for the component depending on their device's
|
|
screen size
|
|
- See a hover state on desktop for the Sign Up call-to-action
|
|
|
|
*** Screenshot
|
|
:PROPERTIES:
|
|
:CUSTOM_ID: screenshot
|
|
:END:
|
|
[[./screenshot-desktop.png]]
|
|
[[./screenshot-mobile.png]]
|
|
|
|
*** Links
|
|
:PROPERTIES:
|
|
:CUSTOM_ID: links
|
|
:END:
|
|
- [[https://www.frontendmentor.io/solutions/tailwind-scala-ssr-scalatags-and-cask-deployed-with-docker-image-UPzyFXyf_L][Solution URL]]
|
|
- [[https://efim-frontentmentor-price-grid-component.onrender.com/][Live Site URL]]
|
|
|
|
** My process
|
|
:PROPERTIES:
|
|
:CUSTOM_ID: my-process
|
|
:END:
|
|
*** Built with
|
|
:PROPERTIES:
|
|
:CUSTOM_ID: built-with
|
|
:END:
|
|
- Semantic HTML5 markup
|
|
- TailwindCSS
|
|
- Scalatags
|
|
html generation on backend
|
|
- Cask
|
|
simple Scala web server, with annotations to mark routes and simple functions to process request
|
|
- Mobile-first workflow
|
|
- Nix
|
|
for building the application, nix module for easy install to servers with NixOS, and docker image for other deployment
|
|
|
|
*** What I learned
|
|
:PROPERTIES:
|
|
:CUSTOM_ID: what-i-learned
|
|
:END:
|
|
**** Setting up Cask server to serve static resources
|
|
Previously in Vite the /public directory was just automagically made available to the production build.
|
|
Now, with @cask.staticFiles("/public") the route /public would serve files from "public" directory
|
|
|
|
The path is relative, so directory from which the server is started is important.
|
|
But the thing works.
|
|
|
|
**** First time installing TailwindCSS with cli, without the frontend bundler integration
|
|
https://tailwindcss.com/docs/installation
|
|
|
|
#+begin_src bash
|
|
$ tailwindcss -i ./src/input.css -o ./dist/output.css --watch
|
|
#+end_src
|
|
|
|
Idea for this exercise was to generate `out.css` of the final TailwindCSS stylesheet into /dist directory, which would be in .gitignore
|
|
|
|
The problem I've encountered - the nix derivation doesn't like to have all of the files in the tmp build directory, so files are referenced and loaded by neat library function
|
|
#+begin_src nix
|
|
src = pkgs.nix-gitignore.gitignoreSource [ ] ./.;
|
|
#+end_src
|
|
|
|
Which only puts unignored files into store.
|
|
So one time for the build step i'm using tailwind this way:
|
|
#+begin_src nix
|
|
buildPhase = ''
|
|
sbt assembly
|
|
tailwindcss -i ./src/input.css -o ./output.css
|
|
'';
|
|
#+end_src
|
|
|
|
and then copy resulting file where the server expects it to be.
|
|
|
|
**** Written a NixOS module with Systemd service and a Nginx reverse proxy
|
|
on my NixOS server i just need to reference the flake by the repository url, import the module, and then
|
|
|
|
#+begin_src nix
|
|
imports = [ inputs.htmx-examples.nixosModules.x86_64-linux.price-grid-app ];
|
|
services.priceGridService = {
|
|
enable = true;
|
|
host = "price-grid.frontendmentor.sunshine.industries";
|
|
port = 12345;
|
|
};
|
|
#+end_src
|
|
|
|
setting up config values, and =enable = true;= makes the server instantiate the systemd service, which will cover restarts and logs, and nginx reverse proxy.
|
|
|
|
**** Found out about =Workdir= setting of systemd servcie and =WorkingDir= of docker image
|
|
*** Continued development
|
|
:PROPERTIES:
|
|
:CUSTOM_ID: continued-development
|
|
:END:
|
|
This was first app (exercise #11) in the experiment with learning SSR in Scala, i've already completed exercise #14, and in the following steps I'm learning Thymeleaf templating engine, and HTMX - the library for extending html to make pages that allow easier partial page updates.
|
|
|
|
** Acknowledgments
|
|
:PROPERTIES:
|
|
:CUSTOM_ID: acknowledgments
|
|
:END:
|
|
My gratitude to render.com who are providing free tier for the service hosting from the docker image.
|
|
Which was necessary for me to submit the solution into frontendmentor.
|
|
And to DockerHub for hosting my docker images gratis as well.
|
|
And to Nix for their documentation!
|