Comments (6)
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.
from meuse.
I found the problem, it was disabled in the config.
from meuse.
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 ;)
from meuse.
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!
from meuse.
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 ;)
from meuse.
I guess I can close this now.
from meuse.
Related Issues (20)
- UI: list users HOT 2
- Login with OAuth2/SSO HOT 3
- Show last token usage HOT 2
- UI: list my tokens HOT 1
- Documentation hosting HOT 7
- Bug after restart on docker, crate-index already exists HOT 3
- Crates with + in version return 404 via meuse HOT 5
- crate name with dash HOT 8
- Crates rename doesn't work with features (`package = ...`) HOT 10
- token generation doesn't work through website's /me HOT 1
- Notifications HOT 1
- Documentation source files HOT 2
- Bump dependencies to fix log4j security issues HOT 1
- configurable s3 key prefix? HOT 4
- issues with Dockerfile upgrade to jdk:17 HOT 2
- can't not copy file from build stage HOT 4
- by-crate-id query bug HOT 1
- Cargo yank fails with exception HOT 2
- Support for sparce registry
- Documentation website doesnt work HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from meuse.