mirror of
https://github.com/hkalexling/Mango.git
synced 2025-08-02 10:55:30 -04:00
Optimize the static files
- Use webfont version of FontAwesome - Use CDN for UIKit JS files
This commit is contained in:
Alex Ling
parent
31c6893bbb
commit
933617503e
1
.gitignore
vendored
1
.gitignore
vendored
@ -13,3 +13,4 @@ public/css/uikit.css
|
|||||||
public/img/*.svg
|
public/img/*.svg
|
||||||
public/js/*.min.js
|
public/js/*.min.js
|
||||||
public/css/*.css
|
public/css/*.css
|
||||||
|
public/webfonts
|
||||||
|
|||||||
36
gulpfile.js
36
gulpfile.js
@ -4,26 +4,25 @@ const minify = require('gulp-babel-minify');
|
|||||||
const minifyCss = require('gulp-minify-css');
|
const minifyCss = require('gulp-minify-css');
|
||||||
const less = require('gulp-less');
|
const less = require('gulp-less');
|
||||||
|
|
||||||
// Copy libraries from node_moduels to public/js
|
gulp.task('copy-img', () => {
|
||||||
gulp.task('copy-js', () => {
|
|
||||||
return gulp.src([
|
|
||||||
'node_modules/@fortawesome/fontawesome-free/js/fontawesome.min.js',
|
|
||||||
'node_modules/@fortawesome/fontawesome-free/js/solid.min.js',
|
|
||||||
'node_modules/uikit/dist/js/uikit.min.js',
|
|
||||||
'node_modules/uikit/dist/js/uikit-icons.min.js'
|
|
||||||
])
|
|
||||||
.pipe(gulp.dest('public/js'));
|
|
||||||
});
|
|
||||||
|
|
||||||
// Copy UIKit SVG icons to public/img
|
|
||||||
gulp.task('copy-uikit-icons', () => {
|
|
||||||
return gulp.src('node_modules/uikit/src/images/backgrounds/*.svg')
|
return gulp.src('node_modules/uikit/src/images/backgrounds/*.svg')
|
||||||
.pipe(gulp.dest('public/img'));
|
.pipe(gulp.dest('public/img'));
|
||||||
});
|
});
|
||||||
|
|
||||||
|
gulp.task('copy-font', () => {
|
||||||
|
return gulp.src('node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.*')
|
||||||
|
.pipe(gulp.dest('public/webfonts'));
|
||||||
|
});
|
||||||
|
|
||||||
|
// Copy files from node_modules
|
||||||
|
gulp.task('node-modules-copy', gulp.parallel('copy-img', 'copy-font'));
|
||||||
|
|
||||||
// Compile less
|
// Compile less
|
||||||
gulp.task('less', () => {
|
gulp.task('less', () => {
|
||||||
return gulp.src('public/css/*.less')
|
return gulp.src([
|
||||||
|
'public/css/mango.less',
|
||||||
|
'public/css/tags.less'
|
||||||
|
])
|
||||||
.pipe(less())
|
.pipe(less())
|
||||||
.pipe(gulp.dest('public/css'));
|
.pipe(gulp.dest('public/css'));
|
||||||
});
|
});
|
||||||
@ -54,14 +53,19 @@ gulp.task('minify-css', () => {
|
|||||||
|
|
||||||
// Copy static files (includeing images) to dist
|
// Copy static files (includeing images) to dist
|
||||||
gulp.task('copy-files', () => {
|
gulp.task('copy-files', () => {
|
||||||
return gulp.src(['public/img/*', 'public/*.*', 'public/js/*.min.js'], {
|
return gulp.src([
|
||||||
|
'public/*.*',
|
||||||
|
'public/img/*',
|
||||||
|
'public/webfonts/*',
|
||||||
|
'public/js/*.min.js'
|
||||||
|
], {
|
||||||
base: 'public'
|
base: 'public'
|
||||||
})
|
})
|
||||||
.pipe(gulp.dest('dist'));
|
.pipe(gulp.dest('dist'));
|
||||||
});
|
});
|
||||||
|
|
||||||
// Set up the public folder for development
|
// Set up the public folder for development
|
||||||
gulp.task('dev', gulp.parallel('copy-js', 'copy-uikit-icons', 'less'));
|
gulp.task('dev', gulp.parallel('node-modules-copy', 'less'));
|
||||||
|
|
||||||
// Set up the dist folder for deployment
|
// Set up the dist folder for deployment
|
||||||
gulp.task('deploy', gulp.parallel('babel', 'minify-css', 'copy-files'));
|
gulp.task('deploy', gulp.parallel('babel', 'minify-css', 'copy-files'));
|
||||||
|
|||||||
@ -1,3 +1,10 @@
|
|||||||
|
// UIKit
|
||||||
|
@import "./uikit.less";
|
||||||
|
|
||||||
|
// FontAwesome
|
||||||
|
@import "../../node_modules/@fortawesome/fontawesome-free/less/fontawesome.less";
|
||||||
|
@import "../../node_modules/@fortawesome/fontawesome-free/less/solid.less";
|
||||||
|
|
||||||
// Item cards
|
// Item cards
|
||||||
.item .uk-card {
|
.item .uk-card {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
IMGS_PER_PAGE = 5
|
IMGS_PER_PAGE = 5
|
||||||
ENTRIES_IN_HOME_SECTIONS = 8
|
ENTRIES_IN_HOME_SECTIONS = 8
|
||||||
UPLOAD_URL_PREFIX = "/uploads"
|
UPLOAD_URL_PREFIX = "/uploads"
|
||||||
STATIC_DIRS = ["/css", "/js", "/img", "/favicon.ico"]
|
STATIC_DIRS = %w(/css /js /img /webfonts /favicon.ico /robots.txt)
|
||||||
SUPPORTED_FILE_EXTNAMES = [".zip", ".cbz", ".rar", ".cbr"]
|
SUPPORTED_FILE_EXTNAMES = [".zip", ".cbz", ".rar", ".cbr"]
|
||||||
|
|
||||||
def random_str
|
def random_str
|
||||||
@ -23,11 +23,21 @@ end
|
|||||||
|
|
||||||
def register_mime_types
|
def register_mime_types
|
||||||
{
|
{
|
||||||
|
# Comic Archives
|
||||||
".zip" => "application/zip",
|
".zip" => "application/zip",
|
||||||
".rar" => "application/x-rar-compressed",
|
".rar" => "application/x-rar-compressed",
|
||||||
".cbz" => "application/vnd.comicbook+zip",
|
".cbz" => "application/vnd.comicbook+zip",
|
||||||
".cbr" => "application/vnd.comicbook-rar",
|
".cbr" => "application/vnd.comicbook-rar",
|
||||||
|
|
||||||
|
# Favicon
|
||||||
".ico" => "image/x-icon",
|
".ico" => "image/x-icon",
|
||||||
|
|
||||||
|
# FontAwesome fonts
|
||||||
|
".woff" => "font/woff",
|
||||||
|
".woff2" => "font/woff2",
|
||||||
|
".eot" => "application/vnd.ms-fontobject",
|
||||||
|
".ttf" => "font/ttf",
|
||||||
|
".svg" => "image/svg+xml",
|
||||||
}.each do |k, v|
|
}.each do |k, v|
|
||||||
MIME.register k, v
|
MIME.register k, v
|
||||||
end
|
end
|
||||||
|
|||||||
@ -4,13 +4,10 @@
|
|||||||
<title>Mango - <%= page.split("-").map(&.capitalize).join(" ") %></title>
|
<title>Mango - <%= page.split("-").map(&.capitalize).join(" ") %></title>
|
||||||
<meta name="description" content="Mango - Manga Server and Web Reader">
|
<meta name="description" content="Mango - Manga Server and Web Reader">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<link rel="stylesheet" href="<%= base_url %>css/uikit.css" />
|
|
||||||
<link rel="stylesheet" href="<%= base_url %>css/mango.css" />
|
<link rel="stylesheet" href="<%= base_url %>css/mango.css" />
|
||||||
<link rel="icon" href="<%= base_url %>favicon.ico">
|
<link rel="icon" href="<%= base_url %>favicon.ico">
|
||||||
|
|
||||||
<script src="https://polyfill.io/v3/polyfill.min.js?features=MutationObserver%2Cdefault%2CmatchMedia&flats=gated"></script>
|
<script src="https://polyfill.io/v3/polyfill.min.js?features=MutationObserver%2Cdefault%2CmatchMedia&flats=gated"></script>
|
||||||
<script defer src="<%= base_url %>js/fontawesome.min.js"></script>
|
|
||||||
<script defer src="<%= base_url %>js/solid.min.js"></script>
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
||||||
<script type="module" src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js"></script>
|
<script type="module" src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js"></script>
|
||||||
<script nomodule src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine-ie11.min.js" defer></script>
|
<script nomodule src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine-ie11.min.js" defer></script>
|
||||||
|
|||||||
2
src/views/components/uikit.html.ecr
Normal file
2
src/views/components/uikit.html.ecr
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
<script src="https://cdn.jsdelivr.net/npm/uikit@3.5.9/dist/js/uikit.min.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/uikit@3.5.9/dist/js/uikit-icons.min.js"></script>
|
||||||
@ -25,14 +25,14 @@
|
|||||||
<td x-text="job.title"></td>
|
<td x-text="job.title"></td>
|
||||||
</template>
|
</template>
|
||||||
<template x-if="!job.plugin_id">
|
<template x-if="!job.plugin_id">
|
||||||
<td><a :href="`${'<%= mangadex_base_url %>'.replace(/\/$/, '')}/chapter/${job.id}`" x-text="job.title"></td>
|
<td><a :href="`<%= mangadex_base_url %>/chapter/${job.id}`" x-text="job.title"></td>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template x-if="job.plugin_id">
|
<template x-if="job.plugin_id">
|
||||||
<td x-text="job.manga_title"></td>
|
<td x-text="job.manga_title"></td>
|
||||||
</template>
|
</template>
|
||||||
<template x-if="!job.plugin_id">
|
<template x-if="!job.plugin_id">
|
||||||
<td><a :href="`${'<%= mangadex_base_url %>'.replace(/\/$/, '')}/manga/${job.manga_id}`" x-text="job.manga_title"></td>
|
<td><a :href="`<%= mangadex_base_url %>/manga/${job.manga_id}`" x-text="job.manga_title"></td>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<td x-text="`${job.success_count}/${job.pages}`"></td>
|
<td x-text="`${job.success_count}/${job.pages}`"></td>
|
||||||
|
|||||||
@ -1,91 +1,89 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
|
|
||||||
<%= render_component "head" %>
|
<%= render_component "head" %>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="uk-offcanvas-content">
|
<div class="uk-offcanvas-content">
|
||||||
<div class="uk-navbar-container uk-navbar-transparent" uk-navbar="uk-navbar">
|
<div class="uk-navbar-container uk-navbar-transparent" uk-navbar="uk-navbar">
|
||||||
<div id="mobile-nav" uk-offcanvas="overlay: true">
|
<div id="mobile-nav" uk-offcanvas="overlay: true">
|
||||||
<div class="uk-offcanvas-bar uk-flex uk-flex-column">
|
<div class="uk-offcanvas-bar uk-flex uk-flex-column">
|
||||||
<ul class="uk-nav-parent-icon uk-nav-primary uk-nav-center uk-margin-auto-vertical" uk-nav>
|
<ul class="uk-nav-parent-icon uk-nav-primary uk-nav-center uk-margin-auto-vertical" uk-nav>
|
||||||
<li><a href="<%= base_url %>">Home</a></li>
|
<li><a href="<%= base_url %>">Home</a></li>
|
||||||
<li><a href="<%= base_url %>library">Library</a></li>
|
<li><a href="<%= base_url %>library">Library</a></li>
|
||||||
<li><a href="<%= base_url %>tags">Tags</a></li>
|
<li><a href="<%= base_url %>tags">Tags</a></li>
|
||||||
<% if is_admin %>
|
<% if is_admin %>
|
||||||
<li><a href="<%= base_url %>admin">Admin</a></li>
|
<li><a href="<%= base_url %>admin">Admin</a></li>
|
||||||
<li class="uk-parent">
|
<li class="uk-parent">
|
||||||
<a href="#">Download</a>
|
<a href="#">Download</a>
|
||||||
<ul class="uk-nav-sub">
|
<ul class="uk-nav-sub">
|
||||||
<li><a href="<%= base_url %>download">MangaDex</a></li>
|
<li><a href="<%= base_url %>download">MangaDex</a></li>
|
||||||
<li><a href="<%= base_url %>download/plugins">Plugins</a></li>
|
<li><a href="<%= base_url %>download/plugins">Plugins</a></li>
|
||||||
<li><a href="<%= base_url %>admin/downloads">Download Manager</a></li>
|
<li><a href="<%= base_url %>admin/downloads">Download Manager</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<% end %>
|
<% end %>
|
||||||
<hr uk-divider>
|
<hr uk-divider>
|
||||||
<li><a onclick="toggleTheme()"><i class="fas fa-adjust"></i></a></li>
|
<li><a onclick="toggleTheme()"><i class="fas fa-adjust"></i></a></li>
|
||||||
<li><a href="<%= base_url %>logout">Logout</a></li>
|
<li><a href="<%= base_url %>logout">Logout</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="uk-position-top">
|
|
||||||
<div class="uk-navbar-container uk-navbar-transparent" uk-navbar="uk-navbar">
|
|
||||||
<div class="uk-navbar-left uk-hidden@s">
|
|
||||||
<div class="uk-navbar-toggle" uk-navbar-toggle-icon="uk-navbar-toggle-icon" uk-toggle="target: #mobile-nav"></div>
|
|
||||||
</div>
|
|
||||||
<div class="uk-navbar-left uk-visible@s">
|
|
||||||
<a class="uk-navbar-item uk-logo" href="<%= base_url %>"><img src="<%= base_url %>img/icon.png" style="width:90px;height:90px;"></a>
|
|
||||||
<ul class="uk-navbar-nav">
|
|
||||||
<li><a href="<%= base_url %>">Home</a></li>
|
|
||||||
<li><a href="<%= base_url %>library">Library</a></li>
|
|
||||||
<li><a href="<%= base_url %>tags">Tags</a></li>
|
|
||||||
<% if is_admin %>
|
|
||||||
<li><a href="<%= base_url %>admin">Admin</a></li>
|
|
||||||
<li>
|
|
||||||
<a href="#">Download</a>
|
|
||||||
<div class="uk-navbar-dropdown">
|
|
||||||
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
||||||
<li class="uk-nav-header">Source</li>
|
|
||||||
<li><a href="<%= base_url %>download">MangaDex</a></li>
|
|
||||||
<li><a href="<%= base_url %>download/plugins">Plugins</a></li>
|
|
||||||
<li class="uk-nav-divider"></li>
|
|
||||||
<li><a href="<%= base_url %>admin/downloads">Download Manager</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</div>
|
||||||
<% end %>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="uk-navbar-right uk-visible@s">
|
<div class="uk-position-top">
|
||||||
<ul class="uk-navbar-nav">
|
<div class="uk-navbar-container uk-navbar-transparent" uk-navbar="uk-navbar">
|
||||||
<li><a onclick="toggleTheme()"><i class="fas fa-adjust"></i></a></li>
|
<div class="uk-navbar-left uk-hidden@s">
|
||||||
<li><a href="<%= base_url %>logout">Logout</a></li>
|
<div class="uk-navbar-toggle" uk-navbar-toggle-icon="uk-navbar-toggle-icon" uk-toggle="target: #mobile-nav"></div>
|
||||||
</ul>
|
</div>
|
||||||
|
<div class="uk-navbar-left uk-visible@s">
|
||||||
|
<a class="uk-navbar-item uk-logo" href="<%= base_url %>"><img src="<%= base_url %>img/icon.png" style="width:90px;height:90px;"></a>
|
||||||
|
<ul class="uk-navbar-nav">
|
||||||
|
<li><a href="<%= base_url %>">Home</a></li>
|
||||||
|
<li><a href="<%= base_url %>library">Library</a></li>
|
||||||
|
<li><a href="<%= base_url %>tags">Tags</a></li>
|
||||||
|
<% if is_admin %>
|
||||||
|
<li><a href="<%= base_url %>admin">Admin</a></li>
|
||||||
|
<li>
|
||||||
|
<a href="#">Download</a>
|
||||||
|
<div class="uk-navbar-dropdown">
|
||||||
|
<ul class="uk-nav uk-navbar-dropdown-nav">
|
||||||
|
<li class="uk-nav-header">Source</li>
|
||||||
|
<li><a href="<%= base_url %>download">MangaDex</a></li>
|
||||||
|
<li><a href="<%= base_url %>download/plugins">Plugins</a></li>
|
||||||
|
<li class="uk-nav-divider"></li>
|
||||||
|
<li><a href="<%= base_url %>admin/downloads">Download Manager</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<% end %>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="uk-navbar-right uk-visible@s">
|
||||||
|
<ul class="uk-navbar-nav">
|
||||||
|
<li><a onclick="toggleTheme()"><i class="fas fa-adjust"></i></a></li>
|
||||||
|
<li><a href="<%= base_url %>logout">Logout</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="uk-section uk-section-small">
|
||||||
</div>
|
|
||||||
<div class="uk-section uk-section-small">
|
|
||||||
</div>
|
|
||||||
<div class="uk-section uk-section-small" style="position:relative;">
|
|
||||||
<div class="uk-container uk-container-small">
|
|
||||||
<div id="alert"></div>
|
|
||||||
<%= content %>
|
|
||||||
<div class="uk-visible@m" id="totop-wrapper" x-data="{}" x-show="$('body').height() > 1.5 * $(window).height()">
|
|
||||||
<a href="#" uk-totop uk-scroll></a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="uk-section uk-section-small" style="position:relative;">
|
||||||
</div>
|
<div class="uk-container uk-container-small">
|
||||||
<script>
|
<div id="alert"></div>
|
||||||
setTheme();
|
<%= content %>
|
||||||
const base_url = "<%= base_url %>";
|
<div class="uk-visible@m" id="totop-wrapper" x-data="{}" x-show="$('body').height() > 1.5 * $(window).height()">
|
||||||
</script>
|
<a href="#" uk-totop uk-scroll></a>
|
||||||
<script src="<%= base_url %>js/uikit.min.js"></script>
|
</div>
|
||||||
<script src="<%= base_url %>js/uikit-icons.min.js"></script>
|
</div>
|
||||||
|
</div>
|
||||||
<%= yield_content "script" %>
|
<script>
|
||||||
</body>
|
setTheme();
|
||||||
|
const base_url = "<%= base_url %>";
|
||||||
|
</script>
|
||||||
|
<%= render_component "uikit" %>
|
||||||
|
<%= yield_content "script" %>
|
||||||
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -30,8 +30,7 @@
|
|||||||
<script>
|
<script>
|
||||||
setTheme();
|
setTheme();
|
||||||
</script>
|
</script>
|
||||||
<script src="<%= base_url %>js/uikit.min.js"></script>
|
<%= render_component "uikit" %>
|
||||||
<script src="<%= base_url %>js/uikit-icons.min.js"></script>
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -103,9 +103,8 @@
|
|||||||
const eid = "<%= entry.id %>";
|
const eid = "<%= entry.id %>";
|
||||||
</script>
|
</script>
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/protonet-jquery.inview/1.1.2/jquery.inview.min.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/protonet-jquery.inview/1.1.2/jquery.inview.min.js"></script>
|
||||||
|
<%= render_component "uikit" %>
|
||||||
<script src="<%= base_url %>js/alert.js"></script>
|
<script src="<%= base_url %>js/alert.js"></script>
|
||||||
<script src="<%= base_url %>js/uikit.min.js"></script>
|
|
||||||
<script src="<%= base_url %>js/uikit-icons.min.js"></script>
|
|
||||||
<script src="<%= base_url %>js/reader.js"></script>
|
<script src="<%= base_url %>js/reader.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user