Generate 500.html with assets:precompile, remove loading from Google Fonts (#5067)

7 years ago · 2c8e3fbbfb
--- a/.gitignore
+++ b/.gitignore
@ -21,6 +21,7 @@ public/system
 public/assets
 public/packs
 public/packs-test
 public/500.html
 .env
 .env.production
 node_modules/
--- a/app/javascript/styles/basics.scss
+++ b/app/javascript/styles/basics.scss
@ -62,6 +62,27 @@ body {
    height: 100%;
    padding: 0;
  }

  &.error {
    text-align: center;
    color: $ui-primary-color;
    padding: 20px;

    .dialog img {
      display: block;
      margin: 20px auto;
      margin-top: 50px;
      max-width: 600px;
      width: 100%;
      height: auto;
    }

    .dialog h1 {
      font-size: 20px;
      line-height: 28px;
      font-weight: 400;
    }
  }
 }

 button {
--- a/app/views/errors/500.html.haml
+++ b/app/views/errors/500.html.haml
@ -0,0 +1,5 @@
 - content_for :page_title do
  = t('errors.500')

 - content_for :content do
  = t('errors.500')
--- a/app/views/layouts/error.html.haml
+++ b/app/views/layouts/error.html.haml
@ -5,31 +5,9 @@
    %meta{ charset: 'utf-8' }/
    %title= yield :page_title
    %meta{ content: 'width=device-width,initial-scale=1', name: 'viewport' }/
    %link{ href: 'https://fonts.googleapis.com/css?family=Roboto:400', rel: 'stylesheet' }/
    :css
      body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        background: #282c37;
        color: #9baec8;
        text-align: center;
        margin: 0;
        padding: 20px;
      }

      .dialog img {
        display: block;
        margin: 20px auto;
        margin-top: 50px;
        max-width: 600px;
        width: 100%;
        height: auto;
      }

      .dialog h1 {
        font: 20px/28px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        font-weight: 400;
      }
  %body
    = stylesheet_pack_tag 'common', media: 'all'
    = stylesheet_pack_tag Setting.default_settings['theme'], media: 'all'
  %body.error
    .dialog
      %img{ alt: 'Mastodon', src: '/oops.png' }/
      %div
--- a/config/i18n-tasks.yml
+++ b/config/i18n-tasks.yml
@ -45,6 +45,7 @@ ignore_missing:
  - 'sessions.{browsers,platforms}.*'
  - 'terms.body_html'
  - 'application_mailer.salutation'
  - 'errors.500'
 ignore_unused:
  - 'activemodel.errors.*'
  - 'activerecord.attributes.*'
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@ -310,6 +310,7 @@ en:
      content: Security verification failed. Are you blocking cookies?
      title: Security verification failed
    '429': Throttled
    '500': We're sorry, but something went wrong.
    noscript_html: To use the Mastodon web application, please enable JavaScript. Alternatively, try one of the <a href="https://github.com/tootsuite/documentation/blob/master/Using-Mastodon/Apps.md">native apps</a> for Mastodon for your platform.
  exports:
    blocks: You block
--- a/lib/tasks/assets.rake
+++ b/lib/tasks/assets.rake
@ -0,0 +1,8 @@
 # frozen_string_literal: true

 if Rake::Task.task_defined?('assets:precompile')
  Rake::Task['assets:precompile'].enhance do
    html = ApplicationController.render('errors/500', layout: 'error')
    File.write(Rails.root.join('public', '500.html'), html)
  end
 end
--- a/public/500.html
+++ b/public/500.html
@ -1,43 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="utf-8">
  <title>We're sorry, but something went wrong</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Roboto:400" rel="stylesheet">
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #282c37;
      color: #9baec8;
      text-align: center;
      margin: 0;
      padding: 20px;
    }

    .dialog img {
      display: block;
      margin: 20px auto;
      margin-top: 50px;
      max-width: 600px;
      width: 100%;
      height: auto;
    }

    .dialog h1 {
      font: 20px/28px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      font-weight: 400;
    }
  </style>
 </head>

 <body>
  <div class="dialog">
    <img src="/oops.png" alt="Mastodon" />

    <div>
      <h1>We're sorry, but something went wrong.</h1>
    </div>
  </div>
 </body>
 </html>