How to display or include html page?

Justoverclock

i have created a new page, with link in sidenav:

export default class myPage extends Page {
  view() {
    return m('.IndexPage', [
      IndexPage.prototype.hero(),
      m('.container', m('.sideNavContainer', [
        m('nav.IndexPage-nav.sideNav', m('ul', listItems(IndexPage.prototype.sidebarItems().toArray()))),
        m('.IndexPage-results.sideNavOffset', 'hello'),
      ])),
    ]);
  }
}

that display correctly the "hello" text:

now, i have some questions, is possible to include an html page inside this? how can i do this? thx to all

[deleted]

Justoverclock I think it'll be easier to use the fof/pages extension to achieve this. You can use the same extension to insert arbitrary HTML whilst keeping the layout of Flarum itself.

010101

Justoverclock 👀 Tell me all about this! I may not have a need for it. But, where do you put that code to make a custom page?

Justoverclock

[deleted] yes that's true, but i want to build an extension to add a new page with new functions inside flarum (even to learn something more about custom extension).

Justoverclock

010101 to create a new page u need to extend IndexPage and create a new route:

app.routes.myNewPage = {
    path: '/mypage',
    component: myPage,
  };

but now i need to fill that page with html....and this is the difficult part (for me obviously)

askvortsov

Justoverclock Is the html predetermined, or user generated?

Justoverclock

askvortsov i do not understand well...what do u mean for "generated"?

i just want to include an html page, or write an html code inside the "hello" area.

for example, if i want to put a contact form, a paragraph with images etc...

Justoverclock

i'm proud that i've reached this all alone:

so now i need a help to understand how to put all custom code and html

export default class ContactPage extends Page {
  view() {
    return m('.IndexPage', [
      IndexPage.prototype.hero(),
      m('.container', m('.sideNavContainer', [
        m('nav.IndexPage-nav.sideNav', m('ul', listItems(IndexPage.prototype.sidebarItems().toArray()))),
        m('.IndexPage-results.sideNavOffset', m('.Form-group', [
          m('input.FormControl', {
            name: 'username',
            type: 'textarea',
            placeholder: app.translator.trans('flarum-ext-contactme.forum.placeholderName'),
          }),
          m('input.FormControl', {
            name: 'username',
            type: 'textarea',
            placeholder: app.translator.trans('flarum-ext-contactme.forum.emailfield'),
          }),
          m('input.FormControl', {
            name: 'username',
            type: 'textarea',
            placeholder: app.translator.trans('flarum-ext-contactme.forum.emailfield'),
          })

        ])),

      ])),
    ]);
  }
}

askvortsov

Justoverclock Congrats, that's great work! I'd highly recommend reviewing the docs on frontend dev although I know you've already seen them as you translated them to Italian (thanks again for that! ♥).

I'm still confused as to whether you want to define the html and logic yourself, or if you want to input html on the admin side and have that be rendered into a page.

In either case, the key thing is to understand that mithril, the js framework we use, is based on a virtual DOM. So essentially, we tell mithril what html elements and components we want, and mithril translates that into actual html.

There are 2 main ways to specify this config. Option 1, which is what Clark prefers and you're using, is called Hyperscript. See https://mithril.js.org/hyperscript.html for more info.

Option 2 is called JSX, and looks a lot more like regular html. See https://mithril.js.org/jsx.html#jsx-vs-hyperscript for more info.

Justoverclock

askvortsov thanks this is a great resource and i will study this righ now.
now i'm here:

and i can't figure how to make te text inside <h1> and <p> translatable with app.translator.trans and how can i have larger textarea?

export default class ContactPage extends Page {
  view() {
    return m('.IndexPage', [
      IndexPage.prototype.hero(),
      m('.container', m('.sideNavContainer', [
        m('nav.IndexPage-nav.sideNav', m('ul', listItems(IndexPage.prototype.sidebarItems().toArray()))),
        m('.IndexPage-results.sideNavOffset',
          m("h1", {
            class: "Hero-title"},  "My first flarum page"),
          m("p", {
            class: "p"}, "agdfahfdshhhdf ghdfg df df h dfh dfh df hdf h dfh dh"),
          m('.Form-group', [
          m('input.FormControl', {
            name: 'username',
            type: 'textarea',
            placeholder: app.translator.trans('flarum-ext-contactme.forum.placeholderName'),
          }),
          m('input.FormControl', {
            name: 'username',
            type: 'textarea',
            placeholder: app.translator.trans('flarum-ext-contactme.forum.emailfield'),
          }),
          m('input.FormControl', {
            name: 'username',
            type: 'textarea',
            placeholder: app.translator.trans('flarum-ext-contactme.forum.emailfield'),

          })


        ])),

      ])),
    ]);
  }
}

clarkwinkelmann

nice job!

When using hyperscript, I usually include (non-dynamic) classnames in the selector, like m('h1.Hero-title'), since it's one of the situations where hyperscript is more compact than JSX 🙂 Both achieve the same though.

askvortsov which is what Clark prefers

While I do usually prefer hyperscript over JSX, I'd probably still choose JSX over hyperscript if a page has a lot of markup and very little logic. It's when a component is full of logic and classnames that I find JSX overly verbose with all the additional { and } and the inability to use object spread operators. Did I already say how much I love spread operators and object (de)structuring?

askvortsov

Justoverclock and i can't figure how to make te text inside <h1> and <p> translatable with app.translator.trans and how can i have larger textarea?

Just replace the string with a translation call! So for instance, replace

My first flarum page with app.translator.trans(TRANSLATION_KEY_STRING)

For a larger textarea, note that you're currently creating an input html element. You're setting the type attr to textarea, but that doesn't actually make it a textarea. Try replacing input.FormControl with textarea.FormControl.

Justoverclock

askvortsov

  m("h1", {
            class: "Hero-title"},  app.translator.trans(flarum-ext-contactme.forum.placeholderName)),

actually broke everything...

also textarea.formcontrol break everything

askvortsov

Justoverclock flarum-ext-contactme.forum.placeholderNam needs to be in quotes since it's a string. I would recommend familiarizing yourself with JS syntax. Are you using an editor like vscode or phpstorm that highlights syntax errors?

Justoverclock

askvortsov yes i'm actually on phpstorm

  m("h1", {
            class: "Hero-title"},  app.translator.trans("flarum-ext-contactme.forum.placeholderName")),

thank u very much @askvortsov

Justoverclock

ok, now i'm at this point, all translatable and editable:

export default class ContactPage extends Page {
  view() {
    return m('.IndexPage', [
      IndexPage.prototype.hero(),
      m('.container', m('.sideNavContainer', [
        m('nav.IndexPage-nav.sideNav', m('ul', listItems(IndexPage.prototype.sidebarItems().toArray()))),
        m('.IndexPage-results.sideNavOffset',
          m("h1", {
            class: "Hero-title"},  app.translator.trans("flarum-ext-contactme.forum.pageTitle")),
          m("p", {
            class: "p"}, app.translator.trans("flarum-ext-contactme.forum.pText")),
          m('.Form-group', [
            m('input.FormControl', {
              name: 'username',
              type: 'textarea',
              placeholder: app.translator.trans('flarum-ext-contactme.forum.placeholderName'),
            }),
            m('input.FormControl', {
              name: 'username',
              type: 'textarea',
              placeholder: app.translator.trans('flarum-ext-contactme.forum.emailfield'),
            }),
            m('textarea.FormControl', {
              placeholder: app.translator.trans('flarum-ext-contactme.forum.textAreaField'),}),
            m('button.Button Button--primary Button--block',  {}, app.translator.trans('flarum-ext-contactme.forum.sendForm'))


          ])),

      ])),
    ]);
  }
}

and now it's time for the hard (for me) job.

can mithril send an email with this form? where i can find some information do write this code?

askvortsov

Justoverclock mithril is a frontend framework, it's just for displaying things. If you want to send emails, you'll need a backend controller.

Justoverclock

askvortsov where can i find resources to create this backend component?

anyone want to cooperate with me to make this extension real? (and to give me opportunity to learn?) 🙂

https://github.com/justoverclockl/flarum-ext-contactme

i'm reading about nodemailer, can be useful? i think this last step is difficult to reach by myself

clarkwinkelmann

You can see how this extension sends emails https://github.com/clarkwinkelmann/flarum-ext-mailing

A few changes are probably required for the code to work with the latest Flarum though.

Justoverclock

clarkwinkelmann thanks Clark....I will make some try, but i think is too difficult without an help.

i hope someone would collaborate to help me