Contribute to the Frontend

[Aloso]

I read on your blog that you would like help improving the Frontend. I have a bit of free time, so I'd like to offer my help.

About me: I'm a CS student and live in Germany. I'm experienced in writing Java, Kotlin, Javascript, Typescript, HTML, CSS, SQL and Rust.

I'm not yet familiar with Clojure, but I guess I don't have to understand everything to work with the HTML templates :)

Could you create some issues with a frontend label, so I know what needs to be implemented?

P.S. could you add build instructions to the readme?

[Aloso]

I figured out how to build it. When I execute lein run, two exceptions are printed to stdout, but it works nevertheless.

However, I haven't yet figured out how to open the frontend. When I open localhost:8855 I just get an error as JSON.

[Aloso]

I found the problem, it was disabled in the config.

[mcorbin]

Hello @Aloso,

Thank you for your interest for the project, and thanks you for offering your help on the frontend ;)

Instructions to build or launch Meuse are in the documentation websites:

• To build it: https://meuse.mcorbin.fr/installation/get-meuse/
• To run it (but you managed to do it): https://meuse.mcorbin.fr/installation/launch-it/

The frontend is indeed disabled in the configuration by default. Once enabled, it should be available on http://127.0.0.1:8855/front.

How to modify the frontend

The frontend code is mostly in the frontend directory. More specifically, the default layou is in the base.clj namespace, and the pages itself in the pages directory.

Pages are generated server side, and I use hiccup as templating engine.

Hiccup is simple: Instead of:

<div id="foo" class="bar">
    <p>Hello</p>
</div>

You have a clojure datastructure:

[:div {:id "foo" :class "bar"}
  [:p "Hello"]]

You can then use variables, for loop etc... to generate these datastructures.

Example

Let's take an example with the search.clj page:

We start by importing some namespaces (e.g modules) at the beginning of the file. This part is not very important:

(ns meuse.front.pages.search
  (:require [meuse.api.crate.search :as api-search]
            [meuse.db.public.search :as public-search]))

Then, I have a function which takes a parameter name result and format it:

(defn format-result
  [result]
  (->> (group-by :crate-id result)
       (map api-search/get-crate-max-version)))

Then, I page my page. page is a function which takes 2 parameters (a component to do do accesses and the HTTP request received by the server):

I extract from the http request the query (which is passed as a query parameter), and I use this query to search crates in the database:

(let [{query :q} (:params request)
        result (format-result (public-search/search search-db query))]

My variable result will now contain a list of crates, each crate being a map containinf informations about the crate.

Then, I define my HTML with [:div], [:h1] etc....

As you can see, I loop on crates (with for [crate result], this means that I loop over result and result elements will be available in the crate variable, which will be a map containing the crates informations), and for each crate generate an HTML div containing the crate informations.
As you can see, I extract things (crate name, download count etc...) using this syntax (:crates/name crate). This is how to retrieve a value from a map in clojure ("give me the value associated to the key named :crates/name")

What should be done

• A pretty frontend (the static files are here btw), with HTML/css best practices (I don't know them). For example, my style.css file is awful.
• Add authentication. I don't know which authentication mechanism I will use for the frontend. Each user already have a password, so we can probably reuse that. Do you have suggestions ? I can implement the backend part of the auth system if needed.

Could you create some issues with a frontend label, so I know what needs to be implemented?

I will do it, but probably tomorrow ;)

[Aloso]

Thanks for the detailed explanation! I already looked at the code and tweaked some things.

What bothered me the most is the font. Since Arial is not installed on Linux, it falls back to the default serif font.

I tried Work Sans from Google Fonts instead, and it looks very nice IMO:

Please also tell me what you think about the white background, the box shadow and the wide search bar!

[mcorbin]

Please also tell me what you think about the white background, the box shadow and the wide search bar!

It looks nice ! Don't hesitate to make PRs ;)

[Aloso]

I guess I can close this now.