Commit Graph

293 Commits

Author SHA1 Message Date
Rafael dos Santos Silva 6888eb5c2d
Revert "Revert "FEATURE: Preload resources via link header (#18475)" (#18511)" (#18531)
* Revert "Revert "FEATURE: Preload resources via link header (#18475)" (#18511)"

This reverts commit 95a57f7e0c.

* put behind feature flag

* env -> global setting

* declare global setting

* forgot one spot
2022-10-11 20:11:44 -03:00
Rafael dos Santos Silva 95a57f7e0c
Revert "FEATURE: Preload resources via link header (#18475)" (#18511)
This reverts commit 2d1dbc6f96.

We need to increase nginx proxy buffer to land this.
2022-10-07 15:08:40 -03:00
Rafael dos Santos Silva 2d1dbc6f96
FEATURE: Preload resources via link header (#18475)
Experiment moving from preload tags in the document head to preload information the the response headers.

While this is a minor improvement in most browsers (headers are parsed before the response body), this allows smart proxies like Cloudflare to "learn" from those headers and build HTTP 103 Early Hints for subsequent requests to the same URI, which will allow the user agent to download and parse our JS/CSS while we are waiting for the server to generate and stream the HTML response.

Co-authored-by: Penar Musaraj <pmusaraj@gmail.com>
2022-10-07 13:19:50 -03:00
Kris b0ac98b465
DEV: remove H1 from crawler view header (#18201) 2022-09-12 10:46:00 -04:00
Arpit Jalan 10f200a5d3
FEATURE: revamped wizard (#17477)
* FEATURE: revamped wizard

* UX: Wizard redesign (#17381)

* UX: Step 1-2

* swap out images

* UX: Finalize all steps

* UX: mobile

* UX: Fix test

* more test

* DEV: remove unneeded wizard components

* DEV: fix wizard tests

* DEV: update rails tests for new wizard

* Remove empty hbs files that were created because of rebase

* Fixes for rebase

* Fix wizard image link

* More rebase fixes

* Fix rails tests

* FIX: Update preview for new color schemes: (#17481)

* UX: make layout more responsive, update images

* fix typo

* DEV: move discourse logo svg to template only component

* DEV: formatting improvements

* Remove unneeded files

* Add tests for privacy step

* Fix banner image height for step "ready"

Co-authored-by: Jordan Vidrine <30537603+jordanvidrine@users.noreply.github.com>
Co-authored-by: awesomerobot <kris.aubuchon@discourse.org>
2022-07-27 06:53:01 +05:30
Joe 3c558d2eb6
UX: Prevent color flicker on dark themes (#17620)
Follow up to: #17619
Context: https://meta.discourse.org/t/introducing-discourse-splash-a-visual-preloader-displayed-while-site-assets-load/232003/17

We previously relied on the user's browser when deciding when to show the splash in light/dark mode. This worked well but can fail if the user manually selects a theme with a default "dark" scheme.

This PR will now factor that in. If the user selects a theme with a default dark scheme, use that. If a user selects a theme with a "light" default scheme and also picks a secondary "dark" scheme, use the media detection we had before.

This PR also removes the dark mode theme-color that was added in the previous PR. That will now go in a separate PR
2022-07-25 18:02:21 +08:00
Joe 3d9464b7da
UX: Set theme color on splash a bit earlier (#17619)
Context: https://meta.discourse.org/t/introducing-discourse-splash-a-visual-preloader-displayed-while-site-assets-load/232003/17

We currently set the theme secondary color as the background for the splash, and this works and respects light/dark modes.

The issue is that we set it on the #d-splash div. That div doesn't have a specified height and only gets its height when the splash image loads.

This can cause a flicker effect where the <HTML> background shows for a fraction of a second while the splash image loads.

This PR sets the theme color on the <HTML> tag to alleviate this. This allows us to set the theme color a little bit sooner and should hopefully prevent the flicker effect from happening.

This PR also adds the theme-color <meta> tag for dark mode. Browsers that don't support multiple theme-color tags will ignore the second tag and fall back to the first one.
2022-07-23 17:53:42 +08:00
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
Joe 293323af38
UX: Splash screen v1 improvements (#17214)
This commit does six things

* changes the animation for the splash screen. To a more subtle animation.
* defers displaying the splash by 1.5 seconds
* defers displaying the splash "loading" text by 2.5 seconds
* defers removing the splash until all Discourse initializers have run
* fixes a display issue in Firefox
* Inlines the SVG as a base64 and inlines the required CSS.

The encoded SVG is hard coded for now, but we will use a helper to generate that based on the file after some testing.
2022-06-23 14:07:04 +08:00
Joe e82a2ce9ae
UX: Introduces a splash screen behind a hidden site setting (#17094)
This PR introduces a new hidden site setting that allows admins to display a splash screen while site assets load.

The splash screen can be enabled via the `splash_screen` hidden site setting.

This is what the splash screen currently looks like

5ceb72f085.mp4

Once site assets load, the splash screen is automatically removed.

To control the loading text that shows in the splash screen, you can change the preloader_text translation string in admin > customize > text
2022-06-22 04:35:46 +08:00
Jarek Radosz 2c1fc28d00
DEV: Remove ember-cli flags from the backend (#17147)
…and other auxiliary code

* Restore `QUNIT_EMBER_CLI` flag warning
* Add `ALLOW_EMBER_CLI_PROXY_BYPASS`
2022-06-20 16:33:05 +02:00
Joe 93b8811f08
DEV: Moves SVG sprite to `<discourse-assets>` element (#17148)
Similar to #17145

This commit moves the SVG sprite container to the <discourse-assets> element.

There is 0 visual or functional changes in this PR. It just tidies up the element view in devTools.
2022-06-20 20:58:50 +08:00
Joe b2bf1db36f
DEV: Move preloaded `json` into `<discourse-assets>` element (#17145)
This PR introduces 0 visual or functional changes. The only thing that it changes is that it moves the data-preloaded div (which has the app boot json into the <discourse-assets> element.

See #17078 for a bit more context.

The reason behind this change is that it makes devTools element view a little bit less cluttered.
2022-06-20 16:39:11 +08:00
Joe 2f66eb59c2
DEV: Slightly defer loading Discourse stylesheets (#17078)
This is related to #17063 and is also a pre-request for the splash screen work.

This PR introduces 0 visual or functional changes. It just relocates the stylesheets in the load order.
`.css` stylesheets block the browser render. We need to move those out of the <head> tag.

However, they still need to be loaded before core/plugin/theme rendered HTML to avoid FOUC.
2022-06-20 10:37:28 +08:00
Joe 804b8fd9f9
DEV: Defer loading core/plugin/theme JS files (#17063)
This is pre-request work to introduce a splash screen while site assets load.

The only change this commit introduces is that it ensures we add the defer attribute to core/plugin/theme .JS files. This will allow us to insert markup before the browser starts evaluating those scripts later on. It has no visual or functional impact on core.

This will not have any impact on how themes and plugins work. The only exception is themes loading external scripts in the </head> theme field directly via script tags. Everything will work the same but those would need to add the defer attribute if they want to keep the benefits introduced in this PR.
2022-06-20 09:47:37 +08:00
Jarek Radosz fcb4e5a1a1
DEV: Make wizard an ember addon (#17027)
Co-authored-by: David Taylor <david@taylorhq.com>
2022-06-17 14:50:21 +02:00
David Taylor 22a7905f2d
DEV: Allow Ember CLI assets to be used by development Rails app (#16511)
Previously, accessing the Rails app directly in development mode would give you assets from our 'legacy' Ember asset pipeline. The only way to run with Ember CLI assets was to run ember-cli as a proxy. This was quite limiting when working on things which are bypassed when using the ember-cli proxy (e.g. changes to `application.html.erb`). Also, since `ember-auto-import` introduced chunking, visiting `/theme-qunit` under Ember CLI was failing to include all necessary chunks.

This commit teaches Sprockets about our Ember CLI assets so that they can be used in development mode, and are automatically collected up under `/public/assets` during `assets:precompile`. As a bonus, this allows us to remove all the custom manifest modification from `assets:precompile`.

The key changes are:
- Introduce a shared `EmberCli.enabled?` helper
- When ember-cli is enabled, add ember-cli `/dist/assets` as the top-priority Rails asset directory
- Have ember-cli output a `chunks.json` manifest, and teach `preload_script` to read it and append the correct chunks to their associated `afterFile`
- Remove most custom ember-cli logic from the `assets:precompile` step. Instead, rely on Rails to take care of pulling the 'precompiled' assets into the `public/assets` directory. Move the 'renaming' logic to runtime, so it can be used in development mode as well.
- Remove fingerprinting from `ember-cli-build`, and allow Rails to take care of things

Long-term, we may want to replace Sprockets with the lighter-weight Propshaft. The changes made in this commit have been made with that long-term goal in mind.

tldr: when you visit the rails app directly, you'll now be served the current ember-cli assets. To keep these up-to-date make sure either `ember serve`, or `ember build --watch` is running. If you really want to load the old non-ember-cli assets, then you should start the server with `EMBER_CLI_PROD_ASSETS=0`. (the legacy asset pipeline will be removed very soon)
2022-04-21 16:26:34 +01:00
David Taylor 683b172104 UX: Make header/footer HTML consistent for crawler and noscript
These were originally very similar, but have diverged over time. This makes it very difficult to manage styling.

This commit moves the noscript header and footer into partials so they can be reused in both the crawler view and the `<noscript>` view. It also makes browser-update render the noscript content **instead of** the `<section id='main'>`, rather than adding adding the noscript inside the `<section>`. This provides better parity with the server-rendered crawler view.
2022-04-07 15:27:06 +01:00
David Taylor 230e220710 UX: Make crawler view usable under different color schemes
- Ensure the set of rendered `<link rel=stylesheet>` tags is consistent
- Add var() references for all crawler-view styles. Basic color definitions are defined first, as a fallback for super old browsers
2022-04-07 15:27:06 +01:00
Jordan Vidrine b20307377a
linting (#16360) 2022-04-02 10:47:01 -05:00
David Taylor a01b1dd648
PERF: Update ember-auto-import and webpack (#15919)
This makes a small improvement to 'cold cache' ember-cli build times, and a large improvement to 'warm cache' build times

The ember-auto-import update means that vendor is now split into multiple files for efficiency. These are named `chunk.*`, and should be included immediately after the `vendor.js` file. This commit also updates the rails app to render script tags for these chunks.

This change was previously merged, and caused memory-related errors on RAM-constrained machines. This was because Webpack 5 switches from multiple worker processes to a single multi-threaded process. This meant that it was hitting node's default heap size limit (~500mb on a 1GB RAM server). Discourse's standard install procedure recommends adding 2GB swap to 1GB-RAM machines, so we can afford to override's Node's default via the `--max-old-space-size` flag.
2022-02-14 11:21:39 +00:00
David Taylor 4cceb55621
Revert "PERF: Update ember-auto-import (#15814)" (#15854)
This reverts commit f4c6a61855 and a8325c9016

This update of ember-auto-import and webpack causes significantly higher memory use during rebuilds. This made ember-cli totally unusable on 1GB RAM / 2GB swap environments. We don't have a specific need for this upgrade right now, so reverting for now.
2022-02-07 22:41:07 +00:00
David Taylor f4c6a61855
PERF: Update ember-auto-import (#15814)
This makes a small improvement to 'cold cache' ember-cli build times, and a large improvement to 'warm cache' build times

The ember-auto-import update means that vendor is now split into multiple files for efficiency. These are named `chunk.*`, and should be included immediately after the `vendor.js` file. This commit also updates the rails app to render script tags for these chunks
2022-02-04 11:00:51 +00:00
David Taylor 1fa7a87f86
SECURITY: Remove ember-cli specific response from application routes (#15155)
Under some conditions, these varied responses could lead to cache poisoning, hence the 'security' label.

Previously the Rails application would serve JSON data in place of HTML whenever Ember CLI requested an `application.html.erb`-rendered page. This commit removes that logic, and instead parses the HTML out of the standard response. This means that Rails doesn't need to customize its response for Ember CLI.
2021-12-01 16:10:40 +00:00
David Taylor ed2c3ebd71
PERF: Move `preload` hints to the `<head>` (#15008)
We have two JS assets which are included in the `<body>` of responses. We were including the `<link rel='preload'` hint alongside the script tag in the body. Instead, we can move the preload hint to the `<head>` so that the browser discovers it earlier, and can start preloading the assets while the body is loading.
2021-11-18 18:02:16 +00:00
Ryan Lerch 1fffe941bf
remove some hardcoded 'localhost's from dev environment (#14801)
Trying to use a local test hostname other than localhost
(e.g. discourse.test )for discourse development was difficult due
the fact that localhost was hardcoded in a few places. This patch
uses existing environment variables to allow a developer to use a
different domain when developing.

Signed-off-by: Ryan Lerch <rlerch@redhat.com>
2021-11-03 11:26:44 +08:00
Mark VanLandingham b632ffd802
DEV: Allow actions to change the manifest endpoint (#14522) 2021-10-06 15:41:52 -05:00
Robin Ward 13b31def80 FIX: Ember CLI was being hijacked before potential errors
This was problematic if something like SCSS file throws an error as the
app would tell Ember CLI to bootstrap as if everything is fine and not
display the error.

The fix is to only hijack the rendering at the end of the template
instead of the beginning.
2021-09-08 16:07:54 -04:00
Joffrey JAFFEUX eb52abf076
DEV: adds server:after-body-open (#14106)
This change is to allow to add a node at the top of body. This is currently done through DOM in a plugin which is causing a full Recalculate Style.
2021-08-24 14:35:44 +02:00
Robin Ward 18c5e9338f DEV: Allow us to use Ember CLI assets in production
This adds an optional ENV variable, `EMBER_CLI_PROD_ASSETS`. If truthy,
compiling production assets will be done via Ember CLI and will replace
the assets Rails would otherwise use.
2021-08-05 08:32:33 -04:00
Alan Guo Xiang Tan 44aa46ca05 Code review comments. 2021-06-21 11:06:58 +08:00
Alan Guo Xiang Tan 8e3691d537 PERF: Eager load Theme associations in Stylesheet Manager.
Before this change, calling `StyleSheet::Manager.stylesheet_details`
for the first time resulted in multiple queries to the database. This is
because the code was modelled in a way where each `Theme` was loaded
from the database one at a time.

This PR restructures the code such that it allows us to load all the
theme records in a single query. It also allows us to eager load the
required associations upfront. In order to achieve this, I removed the
support of loading multiple themes per request. It was initially added
to support user selectable theme components but the feature was never
completed and abandoned because it wasn't a feature that we thought was
worth building.
2021-06-21 11:06:58 +08:00
Robin Ward 5d2b836ae5
DEV: Move pretty-text into vendor and use that (#13273)
In Ember CLI addons get put into the vendor bundle, as opposed to their
own bundle like we're doing in the Rails app. We never use pretty-text
without our vendor bundle so this should have no difference on
performance.

We need to keep the pretty-text bundle for server side cooking.
2021-06-04 11:01:59 -04:00
Robin Ward 409c8585e4
DEV: Remove `ember_jquery` in most situations (#13237)
In Ember CLI, the vendor bundler includes Ember/jQuery, so this brings
our app closer to that configuration.

We have a couple pages (Reset Password / Confirm New Email) where we need
`ember_jquery` without vendor so the file still exists for those cases.
2021-06-01 15:32:51 -04:00
Penar Musaraj bc4b41cfb6
DEV: Do not prompt to run `yarn` in dev env (#13167) 2021-05-26 22:16:28 -04:00
Jarek Radosz 9b9b601e2f
DEV: Remove unused `offscreen-content` (#13133)
Looks like a vestige of Ember 1.x?
2021-05-25 18:39:06 +02:00
Robin Ward 51f872f13a
DEV: Require Ember CLI to be used in development mode (#12738)
We really want to encourage all developers to use Ember CLI for local
development and testing. This will display an error page if they are not
with instructions on how to start the local server.

To disable it, you can set `NO_EMBER_CLI=1` as an ENV variable
2021-04-29 14:13:36 -04:00
Robin Ward e3b1d1a718
DEV: Improve Ember CLI's bootstrap logic (#12792)
* DEV: Give a nicer error when `--proxy` argument is missing

* DEV: Improve Ember CLI's bootstrap logic

Instead of having Ember CLI know which URLs to proxy or not, have it try
the URL with a special header `HTTP_X_DISCOURSE_EMBER_CLI`. If present,
and Discourse thinks we should bootstrap the application, it will
instead stop rendering and return a HTTP HEAD with a response header
telling Ember CLI to bootstrap.

In other words, any time Rails would otherwise serve up the HTML for the
Ember app, it stops and says "no, you do it."

* DEV: Support asset filters by path using a new options object

Without this, Ember CLI's bootstrap would not get the assets it wants
because the path it was requesting was different than the browser path.
This adds an optional request header to fix it.

So far this is only used by the styleguide.
2021-04-23 10:24:42 -04:00
Dan Ungureanu 4e46732346
FEATURE: Implement browser update in crawler view (#12448)
browser-update script does not work correctly in some very old browsers
because the contents of <noscript> is not accessible in JavaScript.
For these browsers, the server can display the crawler page and add the
browser update notice.

Simply loading the browser-update script in the crawler view is not a
solution because that means all crawlers will also see it.
2021-03-22 19:41:42 +02:00
Gerhard Schlager 0019e2e110
FIX: Remove unused JS from "finish installation" page (#12263)
This fixes the following error: "Uncaught ReferenceError: I18n is not defined"
The alternative would be to add `locales/#{I18n.locale}`, but the pages do not use any JS.
2021-03-02 19:19:19 +01:00
Joffrey JAFFEUX f80e6a2357
FIX: adds google tracking to page publishing (#12090) 2021-02-15 19:00:35 +01:00
David Taylor 2092152b03
FIX: Cleanup authentication_data cookie after login (#11834)
This cookie is only used during login. Having it persist after that can
cause some unusual behavior, especially for sites with short session
lengths.

We were already deleting the cookie following a new signup, but not for
existing users.

This commit moves the cookie deletion logic out of the erb template, and
adds logic and tests to ensure it is always deleted consistently.

Co-authored-by: Jarek Radosz <jradosz@gmail.com>
2021-01-25 13:47:44 +00:00
Paweł Kowalski 96aca6d994 Move CSS link tags above JS in the head
CSS are blocking resources, so keeping them below JS delays
rendering of the page. CSS should be loaded ASAP.
This change speeds up first contentful paint by 0.2s on localhost.
The slower the device, the bigger the difference could be.
2020-11-17 09:57:30 -05:00
Daniel Waterworth 721ee36425
Replace `base_uri` with `base_path` (#10879)
DEV: Replace instances of Discourse.base_uri with Discourse.base_path

This is clearer because the base_uri is actually just a path prefix. This continues the work started in 555f467.
2020-10-09 12:51:24 +01:00
Penar Musaraj 8fcfb9586c
FEATURE: Dark-mode-friendly wizard (#10739)
Co-authored-by: Jordan Vidrine <jordan@jordanvidrine.com>
2020-09-25 08:56:23 -04:00
Joffrey JAFFEUX f32cc04ddc
FIX: uses topic title for published page head title (#10312) 2020-07-27 15:09:12 +02:00
Neil Lalonde 8c9cc5b772
DEV: add class to body of no_ember layout so it can targeted in CSS 2020-06-25 16:17:19 -04:00
Joffrey JAFFEUX 3e161e372a
FEATURE: allows to have header/footer in publshed pages (#10067)
Usage: fill Header/Footer sections of your theme.
2020-06-19 09:51:03 +02:00
Robin Ward 2b2434b82d
Start Discourse in an initializer (#9930)
* DEV: To be pedantic, there is more than EMBER in there now

* DEV: Use less globals. Have `Discourse` start in an initializer

* DEV: Remove another global
2020-05-29 14:37:02 -04:00
Michael Brown d9a02d1336
Revert "Revert "Merge branch 'master' of https://github.com/discourse/discourse""
This reverts commit 20780a1eee.

* SECURITY: re-adds accidentally reverted commit:
  03d26cd6: ensure embed_url contains valid http(s) uri
* when the merge commit e62a85cf was reverted, git chose the 2660c2e2 parent to land on
  instead of the 03d26cd6 parent (which contains security fixes)
2020-05-23 00:56:13 -04:00