Screenshot support for themes

diff --git a/app/javascript/flavours/glitch/images/glitch-preview.jpg b/app/javascript/flavours/glitch/images/glitch-preview.jpg
new file mode 100644 (file)
index 0000000..fc5c420
Binary files /dev/null and b/app/javascript/flavours/glitch/images/glitch-preview.jpg differ

diff --git a/app/javascript/flavours/glitch/packs/common.js b/app/javascript/flavours/glitch/packs/common.js
index 07445d2b3ffa59bf69343003d4d34bb20793f2ba..8dd4372bc4c6118ec31c8d3ebfa07dc8f8a5ee33 100644 (file)
--- a/app/javascript/flavours/glitch/packs/common.js
+++ b/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);

diff --git a/app/javascript/flavours/glitch/theme.yml b/app/javascript/flavours/glitch/theme.yml
index 9437e2c045fad619a4de44e78dcf44487bbef674..435fa23293ae3ba25e3134ae4eb62a939dc78239 100644 (file)
--- a/app/javascript/flavours/glitch/theme.yml
+++ b/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.

diff --git a/app/javascript/flavours/vanilla/theme.yml b/app/javascript/flavours/vanilla/theme.yml
index 491ea173b01ba5f23f1c3e9b19ecc3562d306b77..0b27c31bb11cfe12703f0f4bcd482b59cd58517e 100644 (file)
--- a/app/javascript/flavours/vanilla/theme.yml
+++ b/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

diff --git a/app/javascript/images/screenshot.jpg b/app/javascript/images/screenshot.jpg
new file mode 100644 (file)
index 0000000..45b270f
Binary files /dev/null and b/app/javascript/images/screenshot.jpg differ

diff --git a/app/lib/themes.rb b/app/lib/themes.rb
index 49e9ebbc3817ea81328974d0bb97428beea2ab2f..55824a5c4eee3c02ea5c365e6d2b23b1a8ee8726 100644 (file)
--- a/app/lib/themes.rb
+++ b/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)
+      name = File.basename(dir)
+      locales = []
+      screenshots = []
       if data['locales']
-        locales = []
-        Dir.glob(File.join(File.dirname(path), data['locales'], '*.{js,json}')) do |locale|
+        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

diff --git a/app/views/settings/flavours/show.html.haml b/app/views/settings/flavours/show.html.haml
index 488fd2d1531f86b5261378ee1b3607a613fd46a2..8214f1b3d977b3d541954b71409785f6d12c9db2 100644 (file)
--- a/app/views/settings/flavours/show.html.haml
+++ b/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: ''