filesafe/views/home.njk
Bobby Wibowo 8ab77a6464
Updated
Removed version strings from _globals.njk,
in favor of src/versions.json.
That versions in that file can be bumped with "yarn bump-versions".
v1 is automatically bumped when doing "yarn build" as well.

Added README file in src directory, explaining versions.json file.

Added README file in scripts directory, detailing usage of each scripts.

Version strings will no longer be appended when cacheControl is disabled
in config file.
After all, version strings are only needed when the static assets are
cached indefinitely in users' browsers.

Initial Cloudflare's cache purging will no longer be executed when
cloudflare -> purgeCache is disabled, even if cacheControl is enabled.
Just in case someone wants to use version strings for other use cases.

Actually use custom metaDesc variable on meta description tag.
2019-09-19 19:10:37 +07:00

273 lines
11 KiB
Plaintext

{% extends "_layout.njk" %}
{% set maxSizeInt = config.uploads.maxSize | int %}
{% set urlMaxSizeInt = config.uploads.urlMaxSize | int %}
{% set urlDisclaimerMessage = config.uploads.urlDisclaimerMessage %}
{% set urlExtensionsFilterMode = config.uploads.urlExtensionsFilterMode %}
{% set urlExtensionsFilter = config.uploads.urlExtensionsFilter %}
{% set urlExtensionsFilterEnabled = urlExtensionsFilterMode and urlExtensionsFilterMode !== 'inherit' and urlExtensionsFilter.length %}
{% set temporaryUploadAges = config.uploads.temporaryUploadAges %}
{% block endmeta %}
{{ super() }}
{% if globals.google_site_verification %}
<meta name="google-site-verification" content="{{ globals.google_site_verification }}" />
{% endif %}
{% endblock %}
{% block stylesheets %}
{{ super() }}
<link rel="stylesheet" href="libs/fontello/fontello.css{{ versions[1] }}">
<link rel="stylesheet" href="css/sweetalert.css{{ versions[1] }}">
<link rel="stylesheet" href="css/home.css{{ versions[1] }}">
{% endblock %}
{% block scripts %}
{{ super() }}
<script src="libs/sweetalert/sweetalert.min.js{{ versions[3] }}"></script>
<script src="libs/dropzone/dropzone.min.js{{ versions[3] }}"></script>
<script src="libs/axios/axios.min.js{{ versions[3] }}"></script>
<script src="libs/clipboard.js/clipboard.min.js{{ versions[3] }}"></script>
<script src="libs/lazyload/lazyload.min.js{{ versions[3] }}"></script>
<script src="js/home.js{{ versions[1] }}"></script>
<script src="js/misc/utils.js{{ versions[1] }}"></script>
{# We assign an ID for this so that the script can find out version string for render images #}
<script id="renderScript" data-version="{{ versions[4] }}" src="js/misc/render.js{{ versions[1] }}"></script>
{% endblock %}
{% block content %}
{{ super() }}
<section id="home" class="hero is-fullheight">
<div class="hero-body">
<div class="container has-text-centered">
<p id="b" class="is-relative">
<img class="logo" alt="logo" src="images/logo_smol.png{{ versions[2] }}">
</p>
<h1 class="title">{{ globals.name }}</h1>
<h2 class="subtitle">{{ globals.home_subtitle | safe }}</h2>
<h3 id="maxSize" class="subtitle">
Maximum upload size per file is <span>{{ maxSizeInt }} MB</span>
</h3>
<div class="columns is-gapless">
<div class="column is-hidden-mobile"></div>
<div class="column">
<a id="loginToUpload" class="button is-danger is-outlined is-fullwidth is-loading"></a>
<div id="albumDiv" class="field has-addons is-hidden">
<div class="control is-expanded">
<div class="select is-fullwidth">
<select id="albumSelect">
<option value="" selected>Upload to album</option>
</select>
</div>
</div>
<div class="control">
<a id="createAlbum" class="button is-info is-outlined" title="Create new album">
<i class="icon-plus"></i>
</a>
</div>
</div>
<div id="tabs" class="tabs is-centered is-boxed is-hidden">
<ul>
<li data-id="tab-files" class="is-active">
<a>
<span class="icon is-small"><i class="icon-docs"></i></span>
<span>Files</span>
</a>
</li>
{% if urlMaxSizeInt -%}
<li data-id="tab-urls">
<a>
<span class="icon is-small"><i class="icon-link"></i></span>
<span>URLs</span>
</a>
</li>
{%- endif %}
<li data-id="tab-config">
<a>
<span class="icon is-small"><i class="icon-cog-alt"></i></span>
<span>Config</span>
</a>
</li>
</ul>
</div>
<div id="tab-files" class="tab-content is-hidden">
<div class="field dz-container"></div>
<div class="field uploads"></div>
</div>
{% if urlMaxSizeInt -%}
<div id="tab-urls" class="tab-content is-hidden">
<div class="field">
<div class="control">
<textarea id="urls" class="textarea" rows="2"></textarea>
</div>
<p class="help">
{% if urlMaxSizeInt !== maxSizeInt -%}
Maximum file size per URL is <span id="urlMaxSize">{{ urlMaxSizeInt }} MB</span>.
{{- ' ' }}{% endif -%}
{% if urlExtensionsFilterEnabled -%}
{% if urlExtensionsFilterMode === 'blacklist' -%}
Blacklist:
{%- elif urlExtensionsFilterMode === 'whitelist' -%}
Whitelist:
{%- endif %}{{ ' ' -}}
{% set comma = joiner(', ') %}
{%- for extension in urlExtensionsFilter -%}
{{ comma() }}{{ extension | replace('.', '') | upper }}
{%- endfor %}.
{{- ' ' }}{% endif -%}
{%- if urlDisclaimerMessage -%}
{{ urlDisclaimerMessage | safe }}
{%- endif %}
</p>
</div>
<div class="field">
<div class="control">
<a id="uploadUrls" class="button is-danger is-outlined is-fullwidth is-unselectable">
<span class="icon">
<i class="icon-upload-cloud"></i>
</span>
<span>Upload URLs</span>
</a>
</div>
</div>
<div class="field uploads"></div>
</div>
{%- endif %}
<div id="tab-config" class="tab-content is-hidden">
<form>
<div class="field">
<label class="label">File size display</label>
<div class="control">
<div class="select is-fullwidth">
<select id="siBytes">
<option value="default">1000 B = 1 kB = 1 Kilobyte (default)</option>
<option value="0">1024 B = 1 KiB = 1 Kibibyte</option>
</select>
</div>
</div>
<p class="help">This will be used in our homepage, dashboard, and album public pages.</p>
</div>
<div id="fileLengthDiv" class="field is-hidden">
<label class="label">File identifier length</label>
<div class="control">
<input id="fileLength" class="input is-fullwidth" type="number" min="0">
</div>
<p class="help"></p>
</div>
{%- if temporaryUploadAges and temporaryUploadAges.length %}
<div id="uploadAgeDiv" class="field is-hidden">
<label class="label">Upload age</label>
<div class="control">
<div class="select is-fullwidth">
<select id="uploadAge"></select>
</div>
</div>
<p class="help">This allows your files to automatically be deleted after a certain period of time.</p>
</div>
{%- endif %}
<div id="chunkSizeDiv" class="field">
<label class="label">Upload chunk size (MB)</label>
<div class="control">
<input id="chunkSize" class="input is-fullwidth" type="number" min="0">
</div>
<p class="help"></p>
</div>
<div id="parallelUploadsDiv" class="field">
<label class="label">Parallel uploads</label>
<div class="control">
<input id="parallelUploads" class="input is-fullwidth" type="number" name="parallelUploads" min="0">
</div>
<p class="help"></p>
</div>
<div class="field">
<label class="label">Uploads history order</label>
<div class="control">
<div class="select is-fullwidth">
<select id="uploadsHistoryOrder">
<option value="default">Older files on top (default)</option>
<option value="0">Newer files on top</option>
</select>
</div>
</div>
<p class="help">Newer files on top will use <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction#Accessibility_Concerns" target="_blank" rel="noopener">a CSS technique</a>. Trying to select their texts manually from top to bottom will end up selecting the texts from bottom to top instead.</p>
</div>
<div class="field">
<label class="label">Load images for preview</label>
<div class="control">
<div class="select is-fullwidth">
<select id="previewImages">
<option value="default">Yes (default)</option>
<option value="0">No</option>
</select>
</div>
</div>
<p class="help">By default, uploaded images will be loaded as their previews.</p>
</div>
<div class="field">
<p class="control">
<button id="saveConfig" type="submit" class="button is-danger is-outlined is-fullwidth">
<span class="icon">
<i class="icon-floppy"></i>
</span>
<span>Save & reload</span>
</button>
</p>
<p class="help">
This configuration will only be used in this browser.<br>
After reloading the page, some of them will also be applied to the ShareX config that you can download by clicking on the ShareX icon below.
</p>
</div>
</form>
</div>
</div>
<div class="column is-hidden-mobile"></div>
</div>
<div id="tpl" class="is-hidden">
<div class="field">
<i class="icon is-hidden"></i>
<img class="is-unselectable is-hidden">
<p class="name"></p>
<progress class="progress is-small is-danger" max="100" value="0"></progress>
<p class="error"></p>
<p class="link">
<a target="_blank" rel="noopener"></a>
</p>
<p class="help expiry-date is-hidden"></p>
<p class="clipboard-mobile is-hidden">
<a class="button is-small is-info is-outlined is-flex clipboard-js">
<span class="icon">
<i class="icon-clipboard"></i>
</span>
<span>Copy link to clipboard</span>
</a>
</p>
</div>
</div>
<h3 class="subtitle">
<a href="auth" id="loginLinkText"></a>
</h3>
{% include "_partial/links.njk" %}
{% if gitHash -%}
<div class="git-commit columns is-gapless">
<div class="column is-hidden-mobile"></div>
<div class="column">
<span>Git commit: </span><a href="https://github.com/BobbyWibowo/lolisafe/commit/{{ gitHash }}" target="_blank" rel="noopener">{{ gitHash }}</a>
</div>
<div class="column is-hidden-mobile"></div>
</div>
{%- endif %}
</div>
</div>
</section>
{% include "_partial/noscript.njk" %}
{% endblock %}