Browse Source

Webpack structure simplified

pull/1/head
Sebastian 9 years ago
parent
commit
78a8a1b0d3
  1. 4
      src/Squidex/Pipeline/WebpackMiddleware.cs
  2. 6
      src/Squidex/Views/Account/ClientPopup.cshtml
  3. 6
      src/Squidex/Views/Account/ClientSilent.cshtml
  4. 25
      src/Squidex/Views/Account/Error.cshtml
  5. 31
      src/Squidex/Views/Account/LockedOut.cshtml
  6. 45
      src/Squidex/Views/Account/Login.cshtml
  7. 25
      src/Squidex/Views/Account/LogoutCompleted.cshtml
  8. 7
      src/Squidex/Views/Shared/Docs.cshtml
  9. 28
      src/Squidex/Views/_Layout.cshtml
  10. 2
      src/Squidex/Views/_ViewStart.cshtml
  11. 29
      src/Squidex/app-config/clean-css-loader.js
  12. 9
      src/Squidex/app-config/webpack.run.base.js
  13. 11
      src/Squidex/app-config/webpack.run.prod.js
  14. 14
      src/Squidex/app/app.module.ts
  15. 0
      src/Squidex/app/app.ts
  16. 14
      src/Squidex/app/features/apps/pages/apps-page.component.html
  17. 17
      src/Squidex/app/features/apps/pages/apps-page.component.scss
  18. 0
      src/Squidex/app/shims.ts
  19. 2
      src/Squidex/app/theme/_common.scss
  20. 38
      src/Squidex/app/theme/_static.scss
  21. 17
      src/Squidex/app/theme/theme.scss
  22. 13
      src/Squidex/app/theme/vendor.scss
  23. 9
      src/Squidex/app/vendor.ts
  24. 2
      src/Squidex/package.json
  25. 2
      src/Squidex/wwwroot/index.html
  26. 51
      src/Squidex/wwwroot/styles/static.css

4
src/Squidex/Pipeline/WebpackMiddleware.cs

@ -20,8 +20,8 @@ namespace Squidex.Pipeline
{
private const string Host = "localhost";
private const string Port = "3000";
private static readonly string[] Scripts = { "polyfills.js", "vendor.js", "app.js" };
private static readonly string[] Styles = { "vendor.css" };
private static readonly string[] Scripts = { "shims.js", "app.js" };
private static readonly string[] Styles = new string[0];
private readonly RequestDelegate next;
private readonly ILogger logger;

6
src/Squidex/Views/Account/ClientPopup.cshtml

@ -1,4 +1,8 @@
<!DOCTYPE html>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<body>
<script src='~/scripts/oidc-client.min.js'></script>

6
src/Squidex/Views/Account/ClientSilent.cshtml

@ -1,4 +1,8 @@
<!DOCTYPE html>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<body>
<script src='~/scripts/oidc-client.min.js'></script>

25
src/Squidex/Views/Account/Error.cshtml

@ -1,20 +1,9 @@
<!DOCTYPE html>
<html>
<head>
<base href="/">
@{
ViewBag.Title = "Login failed";
}
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Squidex - Login failed</title>
<link href="/styles/static.css" rel="stylesheet" />
</head>
<body>
<h1 class="splash-h1">Login failed</h1>
<h1 class="splash-h1">Login failed</h1>
<p class="splash-text">
We are really sorry, something failed when you tried to login.
</p>
</body>
</html>
<p class="splash-text">
We are really sorry, something failed when you tried to login.
</p>

31
src/Squidex/Views/Account/LockedOut.cshtml

@ -1,24 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<base href="/">
@{
ViewBag.Title = "Account locked";
}
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<h1 class="splash-h1">Account locked</h1>
<title>Squidex - Account locked</title>
<link href="/styles/static.css" rel="stylesheet" />
</head>
<body>
<h1 class="splash-h1">Account locked</h1>
<p class="splash-text">
Your account is locked, please contact the administrator.
</p>
<p class="splash-text">
Your account is locked, please contact the administrator.
</p>
<p class="splash-text">
<a href="/identity-server/account/logout-redirect">Logout</a>
</p>
</body>
</html>
<p class="splash-text">
<a href="/identity-server/account/logout-redirect">Logout</a>
</p>

45
src/Squidex/Views/Account/Login.cshtml

@ -3,34 +3,21 @@
@using Microsoft.AspNetCore.Http.Authentication
@model Squidex.Controllers.UI.Account.LoginVM
<!DOCTYPE html>
<html>
<head>
<base href="/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Squidex - Login</title>
<link href="/styles/static.css" rel="stylesheet" />
</head>
<body>
<form asp-controller="Account" asp-action="External" asp-route-returnurl="@Model.ReturnUrl" method="post">
<div>
<p>
@foreach (var provider in Model.ExternalProviders)
{
<button class="redirect-button" type="submit" name="provider" id="loginButton" value="@provider.AuthenticationScheme" title="Log in using your @provider.DisplayName account">@provider.AuthenticationScheme</button>
}
</p>
</div>
</form>
<script>
document.getElementById("loginButton").click();
</script>
</body>
</html>
@{
ViewBag.Title = "Login";
}
<form asp-controller="Account" asp-action="External" asp-route-returnurl="@Model.ReturnUrl" method="post">
<div>
<p>
@foreach (var provider in Model.ExternalProviders)
{
<button class="redirect-button" type="submit" name="provider" id="loginButton" value="@provider.AuthenticationScheme" title="Log in using your @provider.DisplayName account">@provider.AuthenticationScheme</button>
}
</p>
</div>
</form>
<script>
document.getElementById("loginButton").click();
</script>

25
src/Squidex/Views/Account/LogoutCompleted.cshtml

@ -1,20 +1,9 @@
<!DOCTYPE html>
<html>
<head>
<base href="/">
@{
ViewBag.Title = "Logout";
}
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<h1 class="splash-h1">Logged out!</h1>
<title>Squidex - Logout</title>
<link href="/styles/static.css" rel="stylesheet" />
</head>
<body>
<h1 class="splash-h1">Logged out!</h1>
<p class="splash-text">
Please close this popup.
</p>
</body>
</html>
<p class="splash-text">
Please close this popup.
</p>

7
src/Squidex/Views/Shared/Docs.cshtml

@ -1,4 +1,8 @@
<!DOCTYPE html>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>API Docs</title>
@ -9,6 +13,7 @@
body {
margin: 0;
padding: 0;
position: fixed;
}
h1,

28
src/Squidex/Views/_Layout.cshtml

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<base href="/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Squidex - @ViewBag.Title</title>
<environment names="Production">
<link rel="stylesheet" asp-append-version="true" src="~/build/app.css" />
</environment>
@if (IsSectionDefined("header"))
{
@RenderSection("header")
}
</head>
<body>
@RenderBody()
<environment names="Development">
<script type="text/javascript" src="http://localhost:3000/shims.js"></script>
<script type="text/javascript" src="http://localhost:3000/app.js"></script>
</environment>
</body>
</html>

2
src/Squidex/Views/_ViewStart.cshtml

@ -1,3 +1,3 @@
@{
Layout = null;
Layout = "_Layout.cshtml";
}

29
src/Squidex/app-config/clean-css-loader.js

@ -1,29 +0,0 @@
var loaderUtils = require('loader-utils'),
CleanCSS = require('clean-css');
function cleanCss(css) {
this.cacheable();
var loader = this;
var callback = this.async();
new CleanCSS().minify(css, function (err, minified) {
if (err) {
if (Array.isArray(err) && (err[0] !== null)) {
return callback(err[0]);
} else {
return callback(err);
}
}
var warnings;
if (((warnings = minified.warnings) !== null ? warnings.length : void 0) !== 0) {
warnings.forEach(function (msg) {
loader.emitWarning(msg.toString());
});
}
return callback(null, minified.styles, minified.sourceMap);
});
};
module.exports = cleanCss;

9
src/Squidex/app-config/webpack.run.base.js

@ -15,9 +15,8 @@ module.exports = webpackMerge(commonConfig, {
* See: https://webpack.js.org/configuration/entry-context/
*/
entry: {
'polyfills': './app/polyfills.ts',
'vendor': './app/vendor.ts',
'app': './app/main.ts'
'shims': './app/shims.ts',
'app': './app/app.ts'
},
plugins: [
@ -27,7 +26,7 @@ module.exports = webpackMerge(commonConfig, {
* See: https://webpack.js.org/plugins/commons-chunk-plugin/
*/
new webpack.optimize.CommonsChunkPlugin({
name: ['app', 'vendor', 'polyfills']
name: ['app', 'shims']
}),
/**
@ -38,7 +37,7 @@ module.exports = webpackMerge(commonConfig, {
* See: https://github.com/ampedandwired/html-webpack-plugin
*/
new HtmlWebpackPlugin({
template: 'wwwroot/index.html'
template: 'wwwroot/index.html', hash: true
})
]
});

11
src/Squidex/app-config/webpack.run.prod.js

@ -28,7 +28,7 @@ module.exports = webpackMerge(runConfig, {
*
* See: https://webpack.js.org/configuration/output/#output-filename
*/
filename: '[name].[hash].js',
filename: '[name].js',
/**
* The filename of non-entry chunks as relative path
@ -58,7 +58,7 @@ module.exports = webpackMerge(runConfig, {
*
* See: https://github.com/webpack-contrib/extract-text-webpack-plugin
*/
use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader!sass-loader?sourceMap' }),
use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader?minimize!sass-loader?sourceMap' }),
/*
* Do not include component styles
*/
@ -68,7 +68,10 @@ module.exports = webpackMerge(runConfig, {
use: [{
loader: 'raw-loader'
}, {
loader: helpers.root('app-config', 'clean-css-loader')
loader: 'css-loader',
options: {
minimize: true
}
}, {
loader: 'sass-loader',
options: {
@ -94,7 +97,7 @@ module.exports = webpackMerge(runConfig, {
*
* See: https://github.com/webpack/extract-text-webpack-plugin
*/
new ExtractTextPlugin('[name].[hash].css'),
new ExtractTextPlugin('[name].css'),
new webpack.optimize.UglifyJsPlugin({
beautify: false,

14
src/Squidex/app/app.module.ts

@ -5,7 +5,7 @@
* Copyright (c) Sebastian Stehle. All rights reserved
*/
import { NgModule } from '@angular/core';
import { NgModule, ApplicationRef } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@ -62,6 +62,14 @@ export function configUserReport() {
{ provide: TitlesConfig, useFactory: configTitles },
{ provide: UserReportConfig, useFactory: configUserReport }
],
bootstrap: [AppComponent]
entryComponents: [AppComponent]
})
export class AppModule { }
export class AppModule {
public ngDoBootstrap(appRef: ApplicationRef) {
try {
appRef.bootstrap(AppComponent);
} catch (e) {
console.log('Application element not found');
}
}
}

0
src/Squidex/app/main.ts → src/Squidex/app/app.ts

14
src/Squidex/app/features/apps/pages/apps-page.component.html

@ -1,22 +1,20 @@
<sqx-title message="Apps"></sqx-title>
<content>
<div class="apps">
<div class="empty" *ngIf="(apps | async)?.length === 0">
<h3 class="empty-headline">You are not collaborating to any app yet</h3>
<button class="apps-empty-button btn btn-success" (click)="addAppDialog.show()"><i class="icon-plus"></i> Create New App</button>
</div>
<div class="apps">
<div class="app card" *ngFor="let app of (apps | async)">
<div class="card-block">
<h4 class="card-title">{{app.name}}</h4>
<div class="app card" *ngFor="let app of (apps | async)">
<div class="card-block">
<h4 class="card-title">{{app.name}}</h4>
<a [routerLink]="['/app', app.name]">Edit</a>
</div>
<a [routerLink]="['/app', app.name]">Edit</a>
</div>
</div>
</content>
</div>
<div class="modal" *sqxModalView="addAppDialog" [@fade]>
<div class="modal-backdrop"></div>

17
src/Squidex/app/features/apps/pages/apps-page.component.scss

@ -1,8 +1,17 @@
@import '_vars';
@import '_mixins';
content {
.apps {
@include clearfix();
padding: 1.25rem;
padding-left: $size-sidebar-width + .25rem;
display: block;
}
.app {
float: left;
width: 20rem;
margin: .625rem;
}
.empty {
@ -14,10 +23,4 @@ content {
margin: 1.25rem;
margin-top: 6.25rem;
}
}
.app {
float: left;
width: 20rem;
margin: .625rem;
}

0
src/Squidex/app/polyfills.ts → src/Squidex/app/shims.ts

2
src/Squidex/app/theme/_common.scss

@ -4,7 +4,7 @@
body {
background: $color-background;
padding-top: $size-navbar-height;
padding-left: $size-sidebar-width;
padding-left: 0;
}
h1 {

38
src/Squidex/app/theme/_static.scss

@ -0,0 +1,38 @@
@import '_mixins';
@import '_vars';
img {
vertical-align: middle;
}
.splash {
&-h1,
&-text {
text-align: center;
}
}
.redirect-button {
display: none;
}
.loading {
& {
text-align: center;
margin-top: 200px;
margin-bottom: 20px;
}
div {
font-size: 30px;
font-weight: lighter;
}
}
noscript {
display: block;
color: $color-theme-error;
font-size: 30px;
font-weight: lighter;
margin-bottom: 20px;
}

17
src/Squidex/app/theme/theme.scss

@ -1,4 +1,19 @@
@import '_bootstrap-vars.scss';
// Bootstrap
@import './../../node_modules/bootstrap/scss/bootstrap.scss';
// Pikaday
@import './../../node_modules/pikaday/css/pikaday.css';
// Bootstrap Overrides
@import '_bootstrap.scss';
// icomoon
@import './icomoon/style.css';
@import '_common';
@import '_panels';
@import '_forms';
@import '_lists';
@import '_lists';
@import '_static';

13
src/Squidex/app/theme/vendor.scss

@ -1,13 +0,0 @@
@import '_bootstrap-vars.scss';
// Bootstrap
@import './../../node_modules/bootstrap/scss/bootstrap.scss';
// Pikaday
@import './../../node_modules/pikaday/css/pikaday.css';
// Bootstrap Overrides
@import '_bootstrap.scss';
// icomoon
@import './icomoon/style.css';

9
src/Squidex/app/vendor.ts

@ -1,9 +0,0 @@
/*
* Squidex Headless CMS
*
* @license
* Copyright (c) Sebastian Stehle. All rights reserved
*/
// Bootstrap
import 'theme/vendor.scss';

2
src/Squidex/package.json

@ -23,7 +23,7 @@
"@angular/platform-browser-dynamic": "2.4.9",
"@angular/router": "3.4.9",
"babel-polyfill": "6.23.0",
"bootstrap": "4.0.0-alpha.2",
"bootstrap": "4.0.0-alpha.6",
"core-js": "2.4.1",
"moment": "2.17.1",
"mousetrap": "1.6.0",

2
src/Squidex/wwwroot/index.html

@ -7,8 +7,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Squidex Headless CMS</title>
<link href="/styles/static.css" rel="stylesheet" />
<noscript>
<style>

51
src/Squidex/wwwroot/styles/static.css

@ -1,51 +0,0 @@
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background: #F4F8F9;
margin: 0;
padding-top: 3.25rem;
padding-left: 7rem;
padding-right: 7rem;
line-height: 1.5;
}
img {
vertical-align: middle;
}
.splash-h1,
.splash-text {
text-align: center;
}
.splash-text a,
.splash-text a:visited {
color: #146feb;
}
.redirect-button {
display: none;
}
.loading {
text-align: center;
}
.loading img {
height: 60px;
}
.loading, noscript {
margin-top: 200px;
}
.loading div {
font-size: 30px;
font-weight: lighter;
}
noscript {
display: block;
font-size: 30px;
font-weight: lighter;
color: red;
}
Loading…
Cancel
Save