FIX: Embroider breaking index html structure (#23811)

The custom html elements we were using for bootstraping were causing Embroider to end the `<head>` tag and immediately start `<body>`. As a result most of `<meta>` tags ended up in the `<body>`.

That mean (among possibly other issues) that the app did not have CSRF token set properly on launch (in the development env)
This commit is contained in:
Jarek Radosz 2023-10-06 13:41:47 +02:00 committed by GitHub
parent f21a4a6cb3
commit bd52b1ec7b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 14 deletions

View File

@ -209,10 +209,7 @@ function replaceIn(bootstrap, template, id, headers, baseURL) {
if (id === "html-tag") { if (id === "html-tag") {
return template.replace(`<html>`, contents); return template.replace(`<html>`, contents);
} else { } else {
return template.replace( return template.replace(`<!-- bootstrap-content ${id} -->`, contents);
`<bootstrap-content key="${id}"></bootstrap-content>`,
contents
);
} }
} }

View File

@ -12,15 +12,18 @@
<meta name="description" content=""> <meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=yes, viewport-fit=cover"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=yes, viewport-fit=cover">
<bootstrap-content key="before-script-load"></bootstrap-content> <!-- bootstrap-content before-script-load -->
{{content-for "before-script-load"}} {{content-for "before-script-load"}}
<bootstrap-content key="discourse-preload-stylesheets"></bootstrap-content> <!-- bootstrap-content discourse-preload-stylesheets -->
{{content-for "discourse-preload-stylesheets"}} {{content-for "discourse-preload-stylesheets"}}
<link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css" /> <link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css" />
<link integrity="" rel="stylesheet" href="{{rootURL}}assets/discourse.css" /> <link integrity="" rel="stylesheet" href="{{rootURL}}assets/discourse.css" />
<!-- bootstrap-content head -->
{{content-for "head"}}
<discourse-chunked-script entrypoint="vendor"> <discourse-chunked-script entrypoint="vendor">
<script defer src="{{rootURL}}assets/vendor.js"></script> <script defer src="{{rootURL}}assets/vendor.js"></script>
</discourse-chunked-script> </discourse-chunked-script>
@ -29,33 +32,30 @@
<ember-auto-import-scripts defer entrypoint="app"></ember-auto-import-scripts> <ember-auto-import-scripts defer entrypoint="app"></ember-auto-import-scripts>
<script defer src="{{rootURL}}assets/discourse.js"></script> <script defer src="{{rootURL}}assets/discourse.js"></script>
</discourse-chunked-script> </discourse-chunked-script>
<bootstrap-content key="head"></bootstrap-content>
{{content-for "head"}}
</head> </head>
<body> <body>
<discourse-assets> <discourse-assets>
<discourse-assets-stylesheets> <discourse-assets-stylesheets>
<bootstrap-content key="discourse-stylesheets"></bootstrap-content> <!-- bootstrap-content discourse-stylesheets -->
{{content-for "discourse-stylesheets"}} {{content-for "discourse-stylesheets"}}
</discourse-assets-stylesheets> </discourse-assets-stylesheets>
<discourse-assets-json> <discourse-assets-json>
<bootstrap-content key="preloaded"></bootstrap-content> <!-- bootstrap-content preloaded -->
</discourse-assets-json> </discourse-assets-json>
<discourse-assets-icons></discourse-assets-icons> <discourse-assets-icons></discourse-assets-icons>
</discourse-assets> </discourse-assets>
<bootstrap-content key="body"></bootstrap-content> <!-- bootstrap-content body -->
{{content-for "body"}} {{content-for "body"}}
<section id='main'> <section id='main'>
</section> </section>
<bootstrap-content key="hidden-login-form"></bootstrap-content> <!-- bootstrap-content hidden-login-form -->
<script defer src="{{rootURL}}assets/start-discourse.js" data-embroider-ignore></script> <script defer src="{{rootURL}}assets/start-discourse.js" data-embroider-ignore></script>
<bootstrap-content key="body-footer"></bootstrap-content> <!-- bootstrap-content body-footer -->
{{content-for "body-footer"}} {{content-for "body-footer"}}
</body> </body>
</html> </html>