Screenshot support for themes

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

@@ -1 +1,4 @@
 import 'flavours/glitch/styles/index.scss';
+
+//  This ensures that webpack compiles our images.
+require.context('../images', true);

app/javascript/flavours/glitch/theme.yml

@@ -26,6 +26,12 @@ pack:
 #  language tags and whose default exports are a messages object.
 locales: locales
 
+#  (OPTIONAL) A file to use as the preview screenshot for the flavour,
+#  or an array thereof. These filenames must be unique across all
+#  images (regardless of path), so it's a good idea to namespace them
+#  to your theme. It's up to you to let webpack know to compile them.
+screenshot: glitch-preview.jpg
+
 #  (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.

app/javascript/flavours/vanilla/theme.yml

@@ -24,6 +24,12 @@ pack:
 #  the flavour, relative to this directory.
 locales: ../../mastodon/locales
 
+#  (OPTIONAL) A file to use as the preview screenshot for the flavour,
+#  or an array thereof. These filenames must be unique across all
+#  images (regardless of path), so it's a good idea to namespace them
+#  to your theme. It's up to you to let webpack know to compile them.
+screenshot: screenshot.jpg
+
 #  (OPTIONAL) The directory which contains the pack files.
 #  Defaults to this directory (`app/javascript/flavour/[flavour]`),
 #  but in the case of the vanilla Mastodon flavour the pack files are

app/lib/themes.rb

@@ -14,17 +14,27 @@ class Themes
     result = Hash.new
     Dir.glob(Rails.root.join('app', 'javascript', 'flavours', '*', 'theme.yml')) do |path|
       data = YAML.load_file(path)
-      name = File.basename(File.dirname(path))
+      dir = File.dirname(path)
-      if data['locales']
+      name = File.basename(dir)
       locales = []
-        Dir.glob(File.join(File.dirname(path), data['locales'], '*.{js,json}')) do |locale|
+      screenshots = []
+      if data['locales']
+        Dir.glob(File.join(dir, data['locales'], '*.{js,json}')) do |locale|
           localeName = File.basename(locale, File.extname(locale))
           locales.push(localeName) unless localeName.match(/defaultMessages|whitelist|index/)
         end
-        data['locales'] = locales
+      end
+      if data['screenshot']
+        if data['screenshot'].is_a? Array
+          screenshots = data['screenshot']
+        else
+          screenshots.push(data['screenshot'])
+        end
       end
       if data['pack']
         data['name'] = name
+        data['locales'] = locales
+        data['screenshot'] = screenshots
         data['skin'] = { 'default' => [] }
         result[name] = data
       end

app/views/settings/flavours/show.html.haml

@@ -4,6 +4,9 @@
 = simple_form_for current_user, url: settings_flavour_path(@selected), html: { method: :put } do |f|
   = render 'shared/error_messages', object: current_user
 
+  - Themes.instance.flavour(@selected)['screenshot'].each do |screen|
+    %img.flavour-screen{ width: 700, src: asset_pack_path(screen) }
+
   .flavour-description
     = t "flavours.#{@selected}.description", default: ''