WIP static themeing

app/javascript/themes/glitch/index.js

@@ -1,14 +0,0 @@
-import loadPolyfills from './util/load_polyfills';
-
-// import default stylesheet with variables
-require('font-awesome/css/font-awesome.css');
-
-import './styles/index.scss';
-
-require.context('../../images/', true);
-
-loadPolyfills().then(() => {
-  require('./util/main').default();
-}).catch(e => {
-  console.error(e);
-});

app/javascript/themes/glitch/packs/about.js

@@ -0,0 +1,22 @@
+import loadPolyfills from 'themes/glitch/util/load_polyfills';
+
+function loaded() {
+  const TimelineContainer = require('themes/glitch/containers/timeline_container').default;
+  const React             = require('react');
+  const ReactDOM          = require('react-dom');
+  const mountNode         = document.getElementById('mastodon-timeline');
+
+  if (mountNode !== null) {
+    const props = JSON.parse(mountNode.getAttribute('data-props'));
+    ReactDOM.render(<TimelineContainer {...props} />, mountNode);
+  }
+}
+
+function main() {
+  const ready = require('themes/glitch/util/ready').default;
+  ready(loaded);
+}
+
+loadPolyfills().then(main).catch(error => {
+  console.error(error);
+});

app/javascript/themes/glitch/packs/common.js

@@ -0,0 +1,3 @@
+import 'font-awesome/css/font-awesome.css';
+require.context('../../images/', true);
+import './styles/index.scss';

app/javascript/themes/glitch/packs/home.js

@@ -0,0 +1,7 @@
+import loadPolyfills from './util/load_polyfills';
+
+loadPolyfills().then(() => {
+  require('./util/main').default();
+}).catch(e => {
+  console.error(e);
+});

app/javascript/themes/glitch/packs/public.js

@@ -0,0 +1,149 @@
+import loadPolyfills from 'themes/glitch/util/load_polyfills';
+import { processBio } from 'themes/glitch/util/bio_metadata';
+import ready from 'themes/glitch/util/ready';
+
+window.addEventListener('message', e => {
+  const data = e.data || {};
+
+  if (!window.parent || data.type !== 'setHeight') {
+    return;
+  }
+
+  ready(() => {
+    window.parent.postMessage({
+      type: 'setHeight',
+      id: data.id,
+      height: document.getElementsByTagName('html')[0].scrollHeight,
+    }, '*');
+  });
+});
+
+function main() {
+  const { length } = require('stringz');
+  const IntlRelativeFormat = require('intl-relativeformat').default;
+  const { delegate } = require('rails-ujs');
+  const emojify = require('../themes/glitch/util/emoji').default;
+  const { getLocale } = require('mastodon/locales');
+  const { localeData } = getLocale();
+  const VideoContainer = require('../themes/glitch/containers/video_container').default;
+  const MediaGalleryContainer = require('../themes/glitch/containers/media_gallery_container').default;
+  const CardContainer = require('../themes/glitch/containers/card_container').default;
+  const React = require('react');
+  const ReactDOM = require('react-dom');
+
+  localeData.forEach(IntlRelativeFormat.__addLocaleData);
+
+  ready(() => {
+    const locale = document.documentElement.lang;
+
+    const dateTimeFormat = new Intl.DateTimeFormat(locale, {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      hour: 'numeric',
+      minute: 'numeric',
+    });
+
+    const relativeFormat = new IntlRelativeFormat(locale);
+
+    [].forEach.call(document.querySelectorAll('.emojify'), (content) => {
+      content.innerHTML = emojify(content.innerHTML);
+    });
+
+    [].forEach.call(document.querySelectorAll('time.formatted'), (content) => {
+      const datetime = new Date(content.getAttribute('datetime'));
+      const formattedDate = dateTimeFormat.format(datetime);
+
+      content.title = formattedDate;
+      content.textContent = formattedDate;
+    });
+
+    [].forEach.call(document.querySelectorAll('time.time-ago'), (content) => {
+      const datetime = new Date(content.getAttribute('datetime'));
+
+      content.title = dateTimeFormat.format(datetime);
+      content.textContent = relativeFormat.format(datetime);
+    });
+
+    [].forEach.call(document.querySelectorAll('.logo-button'), (content) => {
+      content.addEventListener('click', (e) => {
+        e.preventDefault();
+        window.open(e.target.href, 'mastodon-intent', 'width=400,height=400,resizable=no,menubar=no,status=no,scrollbars=yes');
+      });
+    });
+
+    [].forEach.call(document.querySelectorAll('[data-component="Video"]'), (content) => {
+      const props = JSON.parse(content.getAttribute('data-props'));
+      ReactDOM.render(<VideoContainer locale={locale} {...props} />, content);
+    });
+
+    [].forEach.call(document.querySelectorAll('[data-component="MediaGallery"]'), (content) => {
+      const props = JSON.parse(content.getAttribute('data-props'));
+      ReactDOM.render(<MediaGalleryContainer locale={locale} {...props} />, content);
+    });
+
+    [].forEach.call(document.querySelectorAll('[data-component="Card"]'), (content) => {
+      const props = JSON.parse(content.getAttribute('data-props'));
+      ReactDOM.render(<CardContainer locale={locale} {...props} />, content);
+    });
+  });
+
+  delegate(document, '.webapp-btn', 'click', ({ target, button }) => {
+    if (button !== 0) {
+      return true;
+    }
+    window.location.href = target.href;
+    return false;
+  });
+
+  delegate(document, '.status__content__spoiler-link', 'click', ({ target }) => {
+    const contentEl = target.parentNode.parentNode.querySelector('.e-content');
+
+    if (contentEl.style.display === 'block') {
+      contentEl.style.display = 'none';
+      target.parentNode.style.marginBottom = 0;
+    } else {
+      contentEl.style.display = 'block';
+      target.parentNode.style.marginBottom = null;
+    }
+
+    return false;
+  });
+
+  delegate(document, '.account_display_name', 'input', ({ target }) => {
+    const nameCounter = document.querySelector('.name-counter');
+
+    if (nameCounter) {
+      nameCounter.textContent = 30 - length(target.value);
+    }
+  });
+
+  delegate(document, '.account_note', 'input', ({ target }) => {
+    const noteCounter = document.querySelector('.note-counter');
+
+    if (noteCounter) {
+      const noteWithoutMetadata = processBio(target.value).text;
+      noteCounter.textContent = 500 - length(noteWithoutMetadata);
+    }
+  });
+
+  delegate(document, '#account_avatar', 'change', ({ target }) => {
+    const avatar = document.querySelector('.card.compact .avatar img');
+    const [file] = target.files || [];
+    const url = file ? URL.createObjectURL(file) : avatar.dataset.originalSrc;
+
+    avatar.src = url;
+  });
+
+  delegate(document, '#account_header', 'change', ({ target }) => {
+    const header = document.querySelector('.card.compact');
+    const [file] = target.files || [];
+    const url = file ? URL.createObjectURL(file) : header.dataset.originalSrc;
+
+    header.style.backgroundImage = `url(${url})`;
+  });
+}
+
+loadPolyfills().then(main).catch(error => {
+  console.error(error);
+});

app/javascript/themes/glitch/packs/share.js

@@ -0,0 +1,22 @@
+import loadPolyfills from 'themes/glitch/util/load_polyfills';
+
+function loaded() {
+  const ComposeContainer = require('themes/glitch/containers/compose_container').default;
+  const React = require('react');
+  const ReactDOM = require('react-dom');
+  const mountNode = document.getElementById('mastodon-compose');
+
+  if (mountNode !== null) {
+    const props = JSON.parse(mountNode.getAttribute('data-props'));
+    ReactDOM.render(<ComposeContainer {...props} />, mountNode);
+  }
+}
+
+function main() {
+  const ready = require('themes/glitch/util/ready').default;
+  ready(loaded);
+}
+
+loadPolyfills().then(main).catch(error => {
+  console.error(error);
+});

app/javascript/themes/glitch/theme.yml

@@ -1,16 +1,23 @@
-#  (REQUIRED) The location of the pack file inside `pack_directory`.
-pack: index.js
+#  (REQUIRED) The location of the pack files.
+pack:
+  about: packs/about.js
+  admin: null
+  common: packs/common.js
+  embed: null
+  home: packs/home.js
+  public: packs/public.js
+  settings: null
+  share: packs/share.js
 
-#  (OPTIONAL) The directory which contains the pack file.
+#  (OPTIONAL) The directory which contains the pack files.
 #  Defaults to the theme directory (`app/javascript/themes/[theme]`),
-#  but in the case of the vanilla Mastodon theme the pack file is
-#  somewhere else.
+#  which should be sufficient for like 99% of use-cases lol.
 #    pack_directory: app/javascript/packs
 
 #  (OPTIONAL) Additional javascript resources to preload, for use with
 #  lazy-loaded components. It is **STRONGLY RECOMMENDED** that you
 #  derive these pathnames from `themes/[your-theme]` to ensure that
-#  they stay unique. (Of course, vanilla doesn't do this ^^;;)
+#  they stay unique.
 preload:
 - themes/glitch/async/getting_started
 - themes/glitch/async/compose

app/javascript/themes/vanilla/theme.yml

@@ -1,9 +1,17 @@
-#  (REQUIRED) The location of the pack file inside `pack_directory`.
-pack: application.js
+#  (REQUIRED) The location of the pack files inside `pack_directory`.
+pack:
+  about: about.js
+  admin: null
+  common: common.js
+  embed: null
+  home: application.js
+  public: public.js
+  settings: null
+  share: share.js
 
-#  (OPTIONAL) The directory which contains the pack file.
+#  (OPTIONAL) The directory which contains the pack files.
 #  Defaults to the theme directory (`app/javascript/themes/[theme]`),
-#  but in the case of the vanilla Mastodon theme the pack file is
+#  but in the case of the vanilla Mastodon theme the pack files are
 #  somewhere else.
 pack_directory: app/javascript/packs