diff --git a/app/javascript/flavours/glitch/images/glitch-preview.jpg b/app/javascript/flavours/glitch/images/glitch-preview.jpg new file mode 100644 index 000000000..fc5c42043 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 07445d2b3..8dd4372bc 100644 --- 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 9437e2c04..435fa2329 100644 --- 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 491ea173b..0b27c31bb 100644 --- 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 index 000000000..45b270fbb 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 49e9ebbc3..55824a5c4 100644 --- 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 488fd2d15..8214f1b3d 100644 --- 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: ''