Fork me on GitHub
#clojurescript
<
2022-06-14
>
Loic07:06:39

Hi everybody, I have a question regarding web development in Clojure. My goal is to have my whole website in Clojure(Script). So far, I have my SPA done with clojureScript and the stack: figwheel - reagent - hiccup - reitit frontend. Figwheel compiles all my cljs into one main.js file. I never had to use node.js so far as you can see. Everything works well and is hosted on Netlify. However, I want to add a blog page in the website where posts are written in markdown. I want to fetch all the md files in a content folder, convert them to hiccup and populate my blog.cljs with them. However, I could not find a way to slurp the md files using clojureScript. The 2 ways I found are • using cljs.nodejs but I don't want node • defining a macro in a clj file and import the macro in my cljs file. I don't understand the second option. If I use clj, I need java to compile and execute my code, so I can only slurp my md files at build time. So it means, for every post, I need to build my main.js again, is it correct? How can I fetch those md files at run time like they do in those ssg like cryogen? If I use clj as my "backend`, I can only use it for build time or am I missing something?

magnars07:06:25

You can read the md-files from disk at build-time - with a build script, or with a macro. Using Clojure, normally. The ClojureScript, however, runs in your users' browsers. It doesn't have access to the md-files.

magnars07:06:29

If you want, you could use XHR to fetch the md-files, turn them into hiccup in the browser, and then render that.

maleghast08:06:00

Or you could define a route for your blog that reads / renders the .md files server-side and returns fully formed web-pages, i.e. outside your SPA.

Patrick Brown22:06:18

It isn't your exact use case, but it's dead simple. If you're willing to put your markdown files in the same folder as your source you can use shadow.resource/inline (def blog-post (shadow.resource/inline "./your-post.md")) The var blog-post will be the contents of the your-post.md file. I use it for Lottie files. There are lots of moments where it comes in handy.

Loic06:06:45

Thank you for your replies! @U08ABGP70 I'll use the macro in clj and macro-require it in the cljs

magnars06:06:46

Just be careful about the total bunde size of your javascript. If you're planning to serve lots of content in your markdown files, everything will have to be downloaded to view just one of them, since everything is inlined.

magnars06:06:03

This is why it is normally better to fetch the content on demand.

Loic06:06:08

I see, but if I fetch the md when the user click the post link, I'll have to execute js (turn md to hiccup) every time a user click a link of a post right? Is this better than pre-rendering at build time?

magnars07:06:17

depends on the amount of markdown files you're going for, but for normal use cases it would be better to fetch it runtime

Loic07:06:51

I should have just a few, probably not more than 20 posts. Ok, I'll have a look at XHR, thank you @U07FCNURX

Chris McCormick00:06:11

@U03J66D1GG6 I highly recommend nbb for this task. See the #nbb channel for help.

Loic03:06:27

@U050AFD41 nbb is scripting on node.js so I would need to use node in my project for that (I was not planning too but it seems pure clojure web stack is somewhat hard to do). Does nbb integrate well with figwheel? I saw on figwheel doc that it supports node.

Chris McCormick08:06:04

I would use nbb purely for outputting static HTML, rendered using Reagent forms. I built the https://github.com/chr15m/sitefox for doing server side ClojureScript using shadow-cljs or nbb so if you go down the cljs path that might we one way. Here's an example of rendering Reagent forms on the server side with nbb: https://github.com/chr15m/sitefox/blob/main/examples/templates/webserver.cljs

Mikko Harju07:06:47

Hi! Does anyone have ideas how does a recursion like this happen: cljs.core:3811 -> cljs.core:1236 -> cljs.core:3513 -> cljs.core:3456 -> cljs.core:3811 .... etc Our application (a customer facing info display) seems to crash randomly after running about 12-16 hours consecutively without errors. This loop is the only thing in the Sentry's call stack. Cannot repro this locally, and getting out of ideas... We are using seq basically just to check for emptiness, no loop..recur – we have core.async and javascript multiple setInterval doing work but they seem to be working just fine until something triggers this.

Mikko Harju08:06:09

We are using concat as the update fn to a map. Maybe that is the thing causing it? We'll drop concat and use into instead

Mikko Harju08:06:31

@U2FRKM4TW thanks for the tip! We'll try this 🙂

👍 1