Error page 404 similar to Github but with Flarum Core UI interface

wolfshards

Hi, is my first time coding and i needs help about integrate Flarum core interface inside a Error 404 page with my custom text. Can someone help?

Exemple concept image (WIP):

I don't know whats components codes i needs to do this. I made a github repository to get help if something goes wrong or needs some quick model.

Soo there the code i made:
`<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Erreur 404 - Shawny43 Forum</title>

    <link rel="stylesheet" href="https://shawny43.flarum.cloud/assets/forum-ffff91d0.css">

I use FOF HTML errors pages for doing this.
Soo any advice about that?

Thanks you!

PS: I think the text editor on posting is broken i can't add a code boxes.

clarkwinkelmann

wolfshards Flarum's header is generated by the javascript single page application, so you either need to boot the single page application or create a static version of the HTML for the header, but this means it won't be automatically updated based on login state, header links and the search wouldn't work.

We have an open issue to make Flarum error pages be part of the single page app, but it's not an easy thing to solve and hasn't been done yet flarum/core2214

wolfshards

Okay but I'm at Freeflarum. Maybe they can make a extension to extend support for JavaScript, right?

SKevo

wolfshards no, FreeFlarum does not create any extensions for Flarum.

I'd suggest to watch the progress of the issue above, or maybe FoF HTML errors will handle this in the future

wolfshards

Uh, okay. Soo what's I can do now?

clarkwinkelmann

You can create a static HTML version of the header and inject it using the custom HTML error page extension.

Until FreeFlarum updates to Flarum 1.0+ you will likely need to update the URL to the Flarum CSS file every time the cache is cleared since the URL changes when that happens. In Flarum 1.0+ the file always has the same URL so it's possible to import it from a known name (just without the ?v= parameter)

Or you could inline the required CSS in the head or import it as a standalone file separate from Flarum base assets.

wolfshards

First, i see there no code editor when we adding code inside apparence or Error HTML extensions, is normal? Beacause i get forced to use VSCode everytimes and sometimes i doesn't have a time to fix quicklya and again when i write directly into Flarum settings, is much more harder to setup code than doing inside the VScode.

And how i get the header html version of Flarum?

Here my Github repo where my code is: https://github.com/shawny43/S43Flarum-Core

clarkwinkelmann

wolfshards you can look at the generated HTML inside of the browser development tools (inspect)

Or you can export the whole rendered HTML, for example with document.getElementById('header').outerHTML, combine it with the base template https://github.com/flarum/core/blob/master/views/frontend/app.blade.php and https://github.com/flarum/core/blob/master/views/frontend/forum.blade.php and remove everything that cannot be updated without javascript from it.

Another option would be to write a very simple header that just looks similar to the Flarum header. That's what the Pretty Mail extension uses in the email, or also the Passwordless extension: https://github.com/clarkwinkelmann/flarum-ext-passwordless/blob/master/resources/views/mail.blade.php

The "FoF Custom HTML Error Pages" is an incredibly simple extension, the settings are just basic text inputs to save an HTML string to the settings table. It's not designed to help in the creation of the HTML. The way it was designed (I wrote it) was for the HTML page to be developed and tested outside of Flarum, then copied there.

wolfshards

Okay thx, for ressources. I going to see how i can do with all that.