Finalized theme loading and stuff

app/javascript/themes/glitch/containers/mastodon.js

@@ -9,7 +9,7 @@ import UI from 'themes/glitch/features/ui';
 import { hydrateStore } from 'themes/glitch/actions/store';
 import { connectUserStream } from 'themes/glitch/actions/streaming';
 import { IntlProvider, addLocaleData } from 'react-intl';
-import { getLocale } from 'mastodon/locales';
+import { getLocale } from 'locales';
 import initialState from 'themes/glitch/util/initial_state';
 
 const { localeData, messages } = getLocale();

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

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

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

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

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

@@ -2,32 +2,14 @@ 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 emojify = require('themes/glitch/util/emoji').default;
+  const { getLocale } = require('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 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');
 
@@ -87,61 +69,6 @@ function main() {
       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 => {

app/javascript/themes/glitch/theme.yml

@@ -1,25 +1,34 @@
 #  (REQUIRED) The location of the pack files.
 pack:
   about: packs/about.js
-  admin: null
-  common: packs/common.js
-  embed: null
-  home: packs/home.js
+  admin:
+  auth:
+  common:
+    filename: packs/common.js
+    stylesheet: true
+  embed: packs/public.js
+  error:
+  home:
+    filename: packs/home.js
+    preload:
+    - themes/glitch/async/getting_started
+    - themes/glitch/async/compose
+    - themes/glitch/async/home_timeline
+    - themes/glitch/async/notifications
+    stylesheet: true
+  modal:
   public: packs/public.js
-  settings: null
+  settings:
   share: packs/share.js
 
 #  (OPTIONAL) The directory which contains the pack files.
 #  Defaults to the theme directory (`app/javascript/themes/[theme]`),
 #  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.
-preload:
-- themes/glitch/async/getting_started
-- themes/glitch/async/compose
-- themes/glitch/async/home_timeline
-- themes/glitch/async/notifications
+#      pack_directory: app/javascript/packs
+
+#  (OPTIONAL) By default the theme will fallback to the default theme
+#  if a particular pack is not provided. You can specify different
+#  fallbacks here, or disable fallback behaviours altogether by
+#  specifying a `null` value.
+fallback:

app/javascript/themes/vanilla/theme.yml

@@ -1,12 +1,23 @@
 #  (REQUIRED) The location of the pack files inside `pack_directory`.
 pack:
   about: about.js
-  admin: null
-  common: common.js
-  embed: null
-  home: application.js
+  admin:
+  auth:
+  common:
+    filename: common.js
+    stylesheet: true
+  embed: public.js
+  error:
+  home:
+    filename: application.js
+    preload:
+    - features/getting_started
+    - features/compose
+    - features/home_timeline
+    - features/notifications
+  modal:
   public: public.js
-  settings: null
+  settings:
   share: share.js
 
 #  (OPTIONAL) The directory which contains the pack files.
@@ -15,12 +26,8 @@ pack:
 #  somewhere else.
 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 ^^;;)
-preload:
-- features/getting_started
-- features/compose
-- features/home_timeline
-- features/notifications
+#  (OPTIONAL) By default the theme will fallback to the default theme
+#  if a particular pack is not provided. You can specify different
+#  fallbacks here, or disable fallback behaviours altogether by
+#  specifying a `null` value.
+fallback:

app/javascript/themes/win95/index.js

@@ -0,0 +1,10 @@
+//  These lines are the same as in glitch:
+import 'font-awesome/css/font-awesome.css';
+require.context('../../images/', true);
+
+//  …But we want to use our own styles instead.
+import 'styles/win95.scss';
+
+//  Be sure to make this style file import from
+//  `themes/glitch/styles/index.scss` (the glitch styling), and not
+//  `application.scss` (which are the vanilla styles).

app/javascript/themes/win95/theme.yml

@@ -0,0 +1,23 @@
+#  win95 theme.
+
+#  Ported over from `cybrespace:mastodon/theme_win95`.
+#  <https://github.com/cybrespace/mastodon/tree/theme_win95>
+
+#  You can use this theme file as inspiration for porting over
+#  a preëxisting Mastodon theme.
+
+#  We only modify the `common` pack, which contains our styling.
+pack:
+  common:
+    filename: index.js
+    stylesheet: true
+  #  All unspecified packs will inherit from glitch.
+
+#  By default, the glitch preloads will also be used here. You can
+#  disable them by setting `preload` to `null`.
+
+#      preload:
+
+#  The `fallback` parameter tells us to use glitch files for everything
+#  we haven't specified.
+fallback: glitch