mirror of
https://github.com/flarum/core.git
synced 2025-07-31 13:40:20 +02:00
Frontend refactor (#1471)
Refactor Frontend + Asset code - Use Laravel's Filesystem component for asset IO, meaning theoretically assets should be storable on S3 etc. - More reliable checking for asset recompilation when debug mode is on, so you don't have to constantly delete the compiled assets to force a recompile. Should also fix issues with locale JS files being recompiled with the same name and cached. - Remove JavaScript minification, because it will be done by Webpack (exception is for the TextFormatter JS). - Add support for JS sourcemaps. - Separate frontend view and assets completely. This is an important distinction because frontend assets are compiled independent of a request, whereas putting together a view depends on a request. - Bind frontend view/asset factory instances to the container (in service providers) rather than subclassing. Asset and content populators can be added to these factories – these are simply objects that populate the asset compilers or the view with information. - Add RouteHandlerFactory functions that make it easy to hook up a frontend controller with a frontend instance ± some content. - Remove the need for "nojs" - Fix cache:clear command - Recompile assets when settings/enabled extensions change
This commit is contained in:
Toby Zerner
GitHub
@@ -1,37 +1,37 @@
|
||||
<div id="app" class="App">
|
||||
|
||||
<div id="app-navigation" class="App-navigation"></div>
|
||||
<div id="app-navigation" class="App-navigation"></div>
|
||||
|
||||
<div id="drawer" class="App-drawer">
|
||||
<div id="drawer" class="App-drawer">
|
||||
|
||||
<header id="header" class="App-header">
|
||||
<div id="header-navigation" class="Header-navigation"></div>
|
||||
<div class="container">
|
||||
<h1 class="Header-title">
|
||||
<a href="{{ array_get($forum, 'attributes.baseUrl') }}">
|
||||
<?php $title = array_get($forum, 'attributes.title'); ?>
|
||||
@if ($logo = array_get($forum, 'attributes.logoUrl'))
|
||||
<img src="{{ $logo }}" alt="{{ $title }}" class="Header-logo">
|
||||
@else
|
||||
{{ $title }}
|
||||
@endif
|
||||
</a>
|
||||
</h1>
|
||||
<div id="header-primary" class="Header-primary"></div>
|
||||
<div id="header-secondary" class="Header-secondary"></div>
|
||||
</div>
|
||||
</header>
|
||||
<header id="header" class="App-header">
|
||||
<div id="header-navigation" class="Header-navigation"></div>
|
||||
<div class="container">
|
||||
<h1 class="Header-title">
|
||||
<a href="{{ array_get($forum, 'baseUrl') }}">
|
||||
<?php $title = array_get($forum, 'title'); ?>
|
||||
@if ($logo = array_get($forum, 'logoUrl'))
|
||||
<img src="{{ $logo }}" alt="{{ $title }}" class="Header-logo">
|
||||
@else
|
||||
{{ $title }}
|
||||
@endif
|
||||
</a>
|
||||
</h1>
|
||||
<div id="header-primary" class="Header-primary"></div>
|
||||
<div id="header-secondary" class="Header-secondary"></div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
</div>
|
||||
|
||||
<main class="App-content">
|
||||
<div class="container">
|
||||
<div id="admin-navigation" class="App-nav sideNav"></div>
|
||||
</div>
|
||||
|
||||
<div id="content" class="sideNavOffset"></div>
|
||||
<main class="App-content">
|
||||
<div class="container">
|
||||
<div id="admin-navigation" class="App-nav sideNav"></div>
|
||||
</div>
|
||||
|
||||
{!! $content !!}
|
||||
</main>
|
||||
<div id="content" class="sideNavOffset"></div>
|
||||
|
||||
{!! $content !!}
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,63 +1,40 @@
|
||||
<!doctype html>
|
||||
<html dir="{{ $direction }}" lang="{{ $language }}">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>{{ $title }}</title>
|
||||
<meta name="description" content="{{ $description }}">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
|
||||
<meta name="theme-color" content="{{ array_get($forum, 'attributes.themePrimaryColor') }}">
|
||||
@if (! $allowJs)
|
||||
<meta name="robots" content="noindex" />
|
||||
@endif
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>{{ $title }}</title>
|
||||
|
||||
@foreach ($cssUrls as $url)
|
||||
<link rel="stylesheet" href="{{ $url }}">
|
||||
@endforeach
|
||||
{!! $head !!}
|
||||
</head>
|
||||
|
||||
@if ($faviconUrl = array_get($forum, 'attributes.faviconUrl'))
|
||||
<link href="{{ $faviconUrl }}" rel="shortcut icon">
|
||||
@endif
|
||||
<body>
|
||||
{!! $layout !!}
|
||||
|
||||
{!! $head !!}
|
||||
</head>
|
||||
<div id="modal"></div>
|
||||
<div id="alerts"></div>
|
||||
|
||||
<body>
|
||||
{!! $layout !!}
|
||||
<script>
|
||||
document.getElementById('flarum-loading').style.display = 'block';
|
||||
var flarum = {extensions: {}};
|
||||
</script>
|
||||
|
||||
<div id="modal"></div>
|
||||
<div id="alerts"></div>
|
||||
{!! $js !!}
|
||||
|
||||
@if ($allowJs)
|
||||
<script>
|
||||
document.getElementById('flarum-loading').style.display = 'block';
|
||||
var flarum = {extensions: {}};
|
||||
</script>
|
||||
<script>
|
||||
document.getElementById('flarum-loading').style.display = 'none';
|
||||
|
||||
@foreach ($jsUrls as $url)
|
||||
<script src="{{ $url }}"></script>
|
||||
@endforeach
|
||||
try {
|
||||
flarum.core.app.load(@json($payload));
|
||||
flarum.core.app.bootExtensions(flarum.extensions);
|
||||
flarum.core.app.boot();
|
||||
} catch (e) {
|
||||
var error = document.getElementById('flarum-loading-error');
|
||||
error.innerHTML += document.getElementById('flarum-content').textContent;
|
||||
error.style.display = 'block';
|
||||
throw e;
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
document.getElementById('flarum-loading').style.display = 'none';
|
||||
@if (! $debug)
|
||||
try {
|
||||
@endif
|
||||
flarum.core.app.load(@json($payload));
|
||||
flarum.core.app.bootExtensions(flarum.extensions);
|
||||
flarum.core.app.boot();
|
||||
@if (! $debug)
|
||||
} catch (e) {
|
||||
window.location += (window.location.search ? '&' : '?') + 'nojs=1';
|
||||
throw e;
|
||||
}
|
||||
@endif
|
||||
</script>
|
||||
@else
|
||||
<script>
|
||||
window.history.replaceState(null, null, window.location.toString().replace(/([&?]nojs=1$|nojs=1&)/, ''));
|
||||
</script>
|
||||
@endif
|
||||
|
||||
{!! $foot !!}
|
||||
</body>
|
||||
{!! $foot !!}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,23 +1,23 @@
|
||||
<div id="flarum-loading" style="display: none">
|
||||
{{ $translator->trans('core.views.content.loading_text') }}
|
||||
{{ $translator->trans('core.views.content.loading_text') }}
|
||||
</div>
|
||||
|
||||
@if ($allowJs)
|
||||
<noscript>
|
||||
<noscript>
|
||||
<div class="Alert">
|
||||
<div class="container">
|
||||
{{ $translator->trans('core.views.content.javascript_disabled_message') }}
|
||||
</div>
|
||||
<div class="container">
|
||||
{{ $translator->trans('core.views.content.javascript_disabled_message') }}
|
||||
</div>
|
||||
</div>
|
||||
</noscript>
|
||||
|
||||
<div id="flarum-loading-error" style="display: none">
|
||||
<div class="Alert">
|
||||
<div class="container">
|
||||
{{ $translator->trans('core.views.content.load_error_message') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<noscript id="flarum-content">
|
||||
{!! $content !!}
|
||||
</noscript>
|
||||
@else
|
||||
<div class="Alert Alert--error">
|
||||
<div class="container">
|
||||
{{ $translator->trans('core.views.content.load_error_message') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!! $content !!}
|
||||
@endif
|
||||
</noscript>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<div class="container">
|
||||
<h2>{{ $document->data->attributes->title }}</h2>
|
||||
<h2>{{ $apiDocument->data->attributes->title }}</h2>
|
||||
|
||||
<div>
|
||||
@foreach ($posts as $post)
|
||||
@@ -15,11 +15,11 @@
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
@if (isset($document->links->prev))
|
||||
@if (isset($apiDocument->links->prev))
|
||||
<a href="{{ $url(['page' => $page - 1]) }}">« {{ $translator->trans('core.views.discussion.previous_page_button') }}</a>
|
||||
@endif
|
||||
|
||||
@if (isset($document->links->next))
|
||||
@if (isset($apiDocument->links->next))
|
||||
<a href="{{ $url(['page' => $page + 1]) }}">{{ $translator->trans('core.views.discussion.next_page_button') }} »</a>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<h2>{{ $translator->trans('core.views.index.all_discussions_heading') }}</h2>
|
||||
|
||||
<ul>
|
||||
@foreach ($document->data as $discussion)
|
||||
@foreach ($apiDocument->data as $discussion)
|
||||
<li>
|
||||
<a href="{{ $url->to('forum')->route('discussion', [
|
||||
'id' => $discussion->id . (trim($discussion->attributes->slug) ? '-' . $discussion->attributes->slug : '')
|
||||
@@ -15,11 +15,11 @@
|
||||
@endforeach
|
||||
</ul>
|
||||
|
||||
@if (isset($document->links->prev))
|
||||
@if (isset($apiDocument->links->prev))
|
||||
<a href="{{ $url->to('forum')->route('index') }}?page={{ $page - 1 }}">« {{ $translator->trans('core.views.index.previous_page_button') }}</a>
|
||||
@endif
|
||||
|
||||
@if (isset($document->links->next))
|
||||
@if (isset($apiDocument->links->next))
|
||||
<a href="{{ $url->to('forum')->route('index') }}?page={{ $page + 1 }}">{{ $translator->trans('core.views.index.next_page_button') }} »</a>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@@ -1,64 +1,42 @@
|
||||
<?php
|
||||
/**
|
||||
* Forum Web App Template
|
||||
*
|
||||
* NOTE: You shouldn't edit this file directly. Your changes will be overwritten
|
||||
* when you update Flarum. See flarum.org/docs/templates to learn how to
|
||||
* customize your forum's layout.
|
||||
*
|
||||
* Flarum's JavaScript app mounts various components into key elements in
|
||||
* this template. They are distinguished by their ID attributes:
|
||||
*
|
||||
* - #app
|
||||
* - #app-navigation
|
||||
* - #drawer
|
||||
* - #header
|
||||
* - #header-navigation
|
||||
* - #home-link
|
||||
* - #header-primary
|
||||
* - #header-secondary
|
||||
* - #content
|
||||
* - #composer
|
||||
*/
|
||||
?>
|
||||
{!! array_get($forum, 'attributes.headerHtml') !!}
|
||||
{!! array_get($forum, 'headerHtml') !!}
|
||||
|
||||
<div id="app" class="App">
|
||||
|
||||
<div id="app-navigation" class="App-navigation"></div>
|
||||
<div id="app-navigation" class="App-navigation"></div>
|
||||
|
||||
<div id="drawer" class="App-drawer">
|
||||
<div id="drawer" class="App-drawer">
|
||||
|
||||
<header id="header" class="App-header">
|
||||
<div id="header-navigation" class="Header-navigation"></div>
|
||||
<div class="container">
|
||||
<h1 class="Header-title">
|
||||
<a href="{{ array_get($forum, 'attributes.baseUrl') }}" id="home-link">
|
||||
<?php $title = array_get($forum, 'attributes.title'); ?>
|
||||
@if ($logo = array_get($forum, 'attributes.logoUrl'))
|
||||
<img src="{{ $logo }}" alt="{{ $title }}" class="Header-logo">
|
||||
@else
|
||||
{{ $title }}
|
||||
@endif
|
||||
</a>
|
||||
</h1>
|
||||
<div id="header-primary" class="Header-primary"></div>
|
||||
<div id="header-secondary" class="Header-secondary"></div>
|
||||
</div>
|
||||
</header>
|
||||
<header id="header" class="App-header">
|
||||
<div id="header-navigation" class="Header-navigation"></div>
|
||||
<div class="container">
|
||||
<h1 class="Header-title">
|
||||
<a href="{{ array_get($forum, 'baseUrl') }}" id="home-link">
|
||||
@if ($logo = array_get($forum, 'logoUrl'))
|
||||
<img src="{{ $logo }}" alt="{{ array_get($forum, 'title') }}" class="Header-logo">
|
||||
@else
|
||||
{{ array_get($forum, 'title') }}
|
||||
@endif
|
||||
</a>
|
||||
</h1>
|
||||
<div id="header-primary" class="Header-primary"></div>
|
||||
<div id="header-secondary" class="Header-secondary"></div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
</div>
|
||||
|
||||
<main class="App-content">
|
||||
<div id="content"></div>
|
||||
|
||||
{!! $content !!}
|
||||
|
||||
<div class="App-composer">
|
||||
<div class="container">
|
||||
<div id="composer"></div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<main class="App-content">
|
||||
<div id="content"></div>
|
||||
|
||||
{!! $content !!}
|
||||
|
||||
<div class="App-composer">
|
||||
<div class="container">
|
||||
<div id="composer"></div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
||||
{!! array_get($forum, 'footerHtml') !!}
|
||||
|
||||
Reference in New Issue
Block a user