diff options
| author | Chocobozzz <me@florianbigard.com> | 2018-07-18 09:52:46 +0200 |
|---|---|---|
| committer | Chocobozzz <me@florianbigard.com> | 2018-07-18 10:00:37 +0200 |
| commit | e032aec9b92be25a996923361f83a96a89505254 (patch) | |
| tree | 245b559061fdcb1c27946333ff7ecd6bd82247f7 /client | |
| parent | 1d94c154689b89b2c5e55f6e12ec25f49b369d52 (diff) | |
| download | PeerTube-e032aec9b92be25a996923361f83a96a89505254.tar.gz PeerTube-e032aec9b92be25a996923361f83a96a89505254.tar.zst PeerTube-e032aec9b92be25a996923361f83a96a89505254.zip | |
Render CSS/title/description tags on server side
Diffstat (limited to 'client')
| -rw-r--r-- | client/src/app/app.component.ts | 42 | ||||
| -rw-r--r-- | client/src/index.html | 14 |
2 files changed, 35 insertions, 21 deletions
diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts index fc4d6c6a2..2149768a2 100644 --- a/client/src/app/app.component.ts +++ b/client/src/app/app.component.ts | |||
| @@ -4,6 +4,7 @@ import { GuardsCheckStart, NavigationEnd, Router } from '@angular/router' | |||
| 4 | import { AuthService, RedirectService, ServerService } from '@app/core' | 4 | import { AuthService, RedirectService, ServerService } from '@app/core' |
| 5 | import { is18nPath } from '../../../shared/models/i18n' | 5 | import { is18nPath } from '../../../shared/models/i18n' |
| 6 | import { ScreenService } from '@app/shared/misc/screen.service' | 6 | import { ScreenService } from '@app/shared/misc/screen.service' |
| 7 | import { skip } from 'rxjs/operators' | ||
| 7 | 8 | ||
| 8 | @Component({ | 9 | @Component({ |
| 9 | selector: 'my-app', | 10 | selector: 'my-app', |
| @@ -89,25 +90,36 @@ export class AppComponent implements OnInit { | |||
| 89 | } | 90 | } |
| 90 | ) | 91 | ) |
| 91 | 92 | ||
| 93 | // Inject JS | ||
| 92 | this.serverService.configLoaded | 94 | this.serverService.configLoaded |
| 93 | .subscribe(() => { | 95 | .subscribe(() => { |
| 94 | const config = this.serverService.getConfig() | 96 | const config = this.serverService.getConfig() |
| 97 | |||
| 98 | if (config.instance.customizations.javascript) { | ||
| 99 | try { | ||
| 100 | // tslint:disable:no-eval | ||
| 101 | eval(config.instance.customizations.javascript) | ||
| 102 | } catch (err) { | ||
| 103 | console.error('Cannot eval custom JavaScript.', err) | ||
| 104 | } | ||
| 105 | } | ||
| 106 | }) | ||
| 95 | 107 | ||
| 96 | // We test customCSS if the admin removed the css | 108 | // Inject CSS if modified (admin config settings) |
| 97 | if (this.customCSS || config.instance.customizations.css) { | 109 | this.serverService.configLoaded |
| 98 | const styleTag = '<style>' + config.instance.customizations.css + '</style>' | 110 | .pipe(skip(1)) // We only want to subscribe to reloads, because the CSS is already injected by the server |
| 99 | this.customCSS = this.domSanitizer.bypassSecurityTrustHtml(styleTag) | 111 | .subscribe(() => { |
| 100 | } | 112 | const headStyle = document.querySelector('style.custom-css-style') |
| 113 | if (headStyle) headStyle.parentNode.removeChild(headStyle) | ||
| 101 | 114 | ||
| 102 | if (config.instance.customizations.javascript) { | 115 | const config = this.serverService.getConfig() |
| 103 | try { | 116 | |
| 104 | // tslint:disable:no-eval | 117 | // We test customCSS if the admin removed the css |
| 105 | eval(config.instance.customizations.javascript) | 118 | if (this.customCSS || config.instance.customizations.css) { |
| 106 | } catch (err) { | 119 | const styleTag = '<style>' + config.instance.customizations.css + '</style>' |
| 107 | console.error('Cannot eval custom JavaScript.', err) | 120 | this.customCSS = this.domSanitizer.bypassSecurityTrustHtml(styleTag) |
| 108 | } | 121 | } |
| 109 | } | 122 | }) |
| 110 | }) | ||
| 111 | } | 123 | } |
| 112 | 124 | ||
| 113 | isUserLoggedIn () { | 125 | isUserLoggedIn () { |
diff --git a/client/src/index.html b/client/src/index.html index a57df3a93..f00af8bff 100644 --- a/client/src/index.html +++ b/client/src/index.html | |||
| @@ -1,20 +1,22 @@ | |||
| 1 | <!DOCTYPE html> | 1 | <!DOCTYPE html> |
| 2 | <html> | 2 | <html> |
| 3 | <head> | 3 | <head> |
| 4 | <title>PeerTube</title> | ||
| 5 | |||
| 6 | <meta charset="UTF-8"> | 4 | <meta charset="UTF-8"> |
| 7 | <meta name="viewport" content="width=device-width, initial-scale=1"> | 5 | <meta name="viewport" content="width=device-width, initial-scale=1"> |
| 8 | <meta name="description" content="PeerTube, a decentralized video streaming platform using P2P (BitTorrent) directly in the web browser" /> | ||
| 9 | 6 | ||
| 10 | <meta name="theme-color" content="#fff" /> | 7 | <meta name="theme-color" content="#fff" /> |
| 11 | 8 | ||
| 12 | <!-- Web Manifest file --> | 9 | <!-- Web Manifest file --> |
| 13 | <link rel="manifest" href="/manifest.json"> | 10 | <link rel="manifest" href="/manifest.json"> |
| 14 | 11 | ||
| 15 | <!-- The following comment is used by the server to prerender OpenGraph and oEmbed tags --> | 12 | <!-- /!\ The following comment is used by the server to prerender some tags /!\ --> |
| 16 | <!-- open graph and oembed tags --> | 13 | |
| 17 | <!-- Do not remove it! --> | 14 | <!-- title tag --> |
| 15 | <!-- description tag --> | ||
| 16 | <!-- custom css tag --> | ||
| 17 | <!-- open graph and oembed tags --> | ||
| 18 | |||
| 19 | <!-- /!\ Do not remove it /!\ --> | ||
| 18 | 20 | ||
| 19 | <link rel="icon" type="image/png" href="/client/assets/images/favicon.png" /> | 21 | <link rel="icon" type="image/png" href="/client/assets/images/favicon.png" /> |
| 20 | 22 | ||