diff --git a/app/javascript/mastodon/main.js b/app/javascript/mastodon/main.js index d2c9d1c9..1f8ebb72 100644 --- a/app/javascript/mastodon/main.js +++ b/app/javascript/mastodon/main.js @@ -1,12 +1,6 @@ -const perf = require('./performance'); +import ready from './ready'; -function onDomContentLoaded(callback) { - if (document.readyState !== 'loading') { - callback(); - } else { - document.addEventListener('DOMContentLoaded', callback); - } -} +const perf = require('./performance'); function main() { perf.start('main()'); @@ -24,7 +18,7 @@ function main() { } } - onDomContentLoaded(() => { + ready(() => { const mountNode = document.getElementById('mastodon'); const props = JSON.parse(mountNode.getAttribute('data-props')); diff --git a/app/javascript/mastodon/ready.js b/app/javascript/mastodon/ready.js new file mode 100644 index 00000000..dd543910 --- /dev/null +++ b/app/javascript/mastodon/ready.js @@ -0,0 +1,7 @@ +export default function ready(loaded) { + if (['interactive', 'complete'].includes(document.readyState)) { + loaded(); + } else { + document.addEventListener('DOMContentLoaded', loaded); + } +} diff --git a/app/javascript/packs/about.js b/app/javascript/packs/about.js new file mode 100644 index 00000000..7b8ab5e5 --- /dev/null +++ b/app/javascript/packs/about.js @@ -0,0 +1,24 @@ +import TimelineContainer from '../mastodon/containers/timeline_container'; +import React from 'react'; +import ReactDOM from 'react-dom'; +import loadPolyfills from '../mastodon/load_polyfills'; +import ready from '../mastodon/ready'; + +require.context('../images/', true); + +function loaded() { + const mountNode = document.getElementById('mastodon-timeline'); + + if (mountNode !== null) { + const props = JSON.parse(mountNode.getAttribute('data-props')); + ReactDOM.render(, mountNode); + } +} + +function main() { + ready(loaded); +} + +loadPolyfills().then(main).catch(error => { + console.error(error); +}); diff --git a/app/javascript/packs/public.js b/app/javascript/packs/public.js index 0b00da39..6e6ba347 100644 --- a/app/javascript/packs/public.js +++ b/app/javascript/packs/public.js @@ -4,9 +4,7 @@ import { delegate } from 'rails-ujs'; import emojify from '../mastodon/emoji'; import { getLocale } from '../mastodon/locales'; import loadPolyfills from '../mastodon/load_polyfills'; -import TimelineContainer from '../mastodon/containers/timeline_container'; -import React from 'react'; -import ReactDOM from 'react-dom'; +import ready from '../mastodon/ready'; require.context('../images/', true); @@ -39,21 +37,10 @@ function loaded() { const datetime = new Date(content.getAttribute('datetime')); content.textContent = relativeFormat.format(datetime);; }); - - const mountNode = document.getElementById('mastodon-timeline'); - - if (mountNode !== null) { - const props = JSON.parse(mountNode.getAttribute('data-props')); - ReactDOM.render(, mountNode); - } } function main() { - if (['interactive', 'complete'].includes(document.readyState)) { - loaded(); - } else { - document.addEventListener('DOMContentLoaded', loaded); - } + ready(loaded); delegate(document, '.video-player video', 'click', ({ target }) => { if (target.paused) { diff --git a/app/views/about/show.html.haml b/app/views/about/show.html.haml index f75f87c9..fd468bba 100644 --- a/app/views/about/show.html.haml +++ b/app/views/about/show.html.haml @@ -1,11 +1,10 @@ -- content_for :header_tags do - %script#initial-state{ type: 'application/json' }!= json_escape(@initial_state_json) - = javascript_pack_tag 'public', integrity: true, crossorigin: 'anonymous' - - content_for :page_title do = site_hostname - content_for :header_tags do + %script#initial-state{ type: 'application/json' }!= json_escape(@initial_state_json) + = javascript_pack_tag 'about', integrity: true, crossorigin: 'anonymous' + %meta{ property: 'og:site_name', content: site_title }/ %meta{ property: 'og:url', content: about_url }/ %meta{ property: 'og:type', content: 'website' }/