discourse/app/views/layouts/application.html.erb
Joe cfde4419f5
DEV: Preload CSS in the <head> (#17322)
This commit adds preload links for core/plugin/theme CSS stylesheets in the head.

Preload links are non-blocking and run in parallel. This means that they should have already been downloaded by the time we use the actual stylesheets (in the <body> tag).

Google is currently complaining about this here and this PR will address that warning.

This commit will also fix an issue in the splash screen where it sometimes doesn't respect the theme colors - causing a slightly jarring experience on dark themes.

Note that I opted not to add new specs because the underlying work required already has a lot of coverage. The new methods only change the output HTML so we can chuck that in the document <head>

This change also means that we can make all the stylesheets non-render blocking, but that will follow in a separate commit.
2022-07-05 00:23:09 +08:00

141 lines
4.7 KiB
Plaintext

<!DOCTYPE html>
<html lang="<%= html_lang %>" class="<%= html_classes %>">
<head>
<meta charset="utf-8">
<title><%= content_for?(:title) ? yield(:title) : SiteSetting.title %></title>
<meta name="description" content="<%= @description_meta || SiteSetting.site_description %>">
<meta name="discourse_theme_id" content="<%= theme_id %>">
<meta name="discourse_current_homepage" content="<%= current_homepage %>">
<%= render partial: "common/discourse_preload_stylesheet" %>
<%= render partial: "layouts/head" %>
<%= discourse_csrf_tags %>
<%- if SiteSetting.enable_escaped_fragments? %>
<meta name="fragment" content="!">
<%- end %>
<%- if shared_session_key %>
<meta name="shared_session_key" content="<%= shared_session_key %>">
<%- end %>
<%= build_plugin_html 'server:before-script-load' %>
<link rel="preload" href="<%= script_asset_path "start-discourse" %>" as="script">
<link rel="preload" href="<%= script_asset_path "browser-update" %>" as="script">
<%= preload_script 'browser-detect' %>
<%= preload_script "locales/#{I18n.locale}" %>
<%- if ExtraLocalesController.client_overrides_exist? %>
<%= preload_script_url ExtraLocalesController.url('overrides') %>
<%- end %>
<%= preload_script "vendor" %>
<%= preload_script "discourse" %>
<%- Discourse.find_plugin_js_assets(include_official: allow_plugins?, include_unofficial: allow_third_party_plugins?, request: request).each do |file| %>
<%= preload_script file %>
<%- end %>
<%- if staff? %>
<%= preload_script_url ExtraLocalesController.url("admin") %>
<%= preload_script "admin" %>
<%- end %>
<%- if admin? %>
<%= preload_script_url ExtraLocalesController.url("wizard") %>
<%= preload_script "wizard" %>
<%- end %>
<%- unless customization_disabled? %>
<%= theme_translations_lookup %>
<%= theme_js_lookup %>
<%= theme_lookup("head_tag") %>
<%- end %>
<%= render_google_tag_manager_head_code %>
<%= render_google_universal_analytics_code %>
<link id="manifest-link" rel="manifest" href=<%= manifest_url %> crossorigin="use-credentials">
<%- if include_ios_native_app_banner? %>
<meta name="apple-itunes-app" content="app-id=<%= SiteSetting.ios_app_id %><%= ios_app_argument %>">
<%- end %>
<%= yield :head %>
<%= build_plugin_html 'server:before-head-close' %>
<%= tag.meta id: 'data-discourse-setup', data: client_side_setup_data %>
<meta name="discourse/config/environment" content="<%=u discourse_config_environment %>" />
<%- if authentication_data %>
<meta id="data-authentication" data-authentication-data="<%= authentication_data %>">
<%- end %>
</head>
<body class="<%= body_classes %>">
<%- if include_splash_screen? %>
<%= render partial: "common/discourse_splash" %>
<%- end %>
<discourse-assets>
<discourse-assets-stylesheets>
<%= render partial: "common/discourse_stylesheet" %>
</discourse-assets-stylesheets>
<discourse-assets-json>
<div class="hidden" id="data-preloaded" data-preloaded="<%= preloaded_json %>"></div>
</discourse-assets-json>
<discourse-assets-icons></discourse-assets-icons>
</discourse-assets>
<%- if allow_plugins? %>
<%= build_plugin_html 'server:after-body-open' %>
<%- end -%>
<%= render_google_tag_manager_body_code %>
<noscript data-path="<%= request.env['PATH_INFO'] %>">
<%= render partial: "layouts/noscript_header" %>
<div id="main-outlet" class="wrap" role="main">
<!-- preload-content: -->
<%= yield %>
<!-- :preload-content -->
</div>
<%= render partial: "layouts/noscript_footer" %>
</noscript>
<%- unless customization_disabled? %>
<%= theme_lookup("header") %>
<%- end %>
<%- if allow_plugins? %>
<%= build_plugin_html 'server:header' %>
<%- end %>
<section id='main'>
</section>
<% unless current_user %>
<form id='hidden-login-form' method="post" action="<%=main_app.login_path%>" style="display: none;">
<input name="username" type="text" id="signin_username">
<input name="password" type="password" id="signin_password">
<input name="redirect" type="hidden">
<input type="submit" id="signin-button" value="<%= t 'log_in' %>">
</form>
<% end %>
<script defer src="<%= script_asset_path "start-discourse" %>"></script>
<%= yield :data %>
<script defer src="<%= script_asset_path "browser-update" %>"></script>
<%- unless customization_disabled? %>
<%= theme_lookup("body_tag") %>
<%- end %>
<%- if allow_plugins? %>
<%= build_plugin_html 'server:before-body-close' %>
<%- end %>
</body>
</html>