Add provider pages for SEO
This commit is contained in:
parent
d7c3b571e6
commit
b19d3278fe
GPG Key ID:
93549FA07F0AE268
1
.gitignore
vendored
1
.gitignore
vendored
@ -1,3 +1,4 @@
|
||||
public/assets/scripts/ffmpeg/
|
||||
public/assets/scripts/core/
|
||||
public/providers
|
||||
|
||||
|
||||
16
build.sh
16
build.sh
@ -1,5 +1,21 @@
|
||||
#!/bin/sh
|
||||
|
||||
# Generate provider pages
|
||||
|
||||
declare -a providers=(Discord Gmail "Yahoo Mail" Messenger Signal WhatsApp)
|
||||
declare -a slugs=(discord gmail yahoo-mail messenger signal whatsapp)
|
||||
declare -a sizes=(10 25 25 100 100 180)
|
||||
|
||||
for i in "${!providers[@]}"
|
||||
do
|
||||
mkdir -p "public/providers/${slugs[$i]}"
|
||||
cp provider-template.html "public/providers/${slugs[$i]}/index.html"
|
||||
sed -i -e "s/{{provider}}/${providers[$i]}/g" -e "s/{{size}}/${sizes[$i]}/g" -e "s/{{slug}}/${slugs[$i]}/g" "public/providers/${slugs[$i]}/index.html"
|
||||
done
|
||||
exit
|
||||
|
||||
# Download ffmpeg libraries
|
||||
|
||||
fetch () {
|
||||
echo "Downloading $1..."
|
||||
|
||||
|
||||
82
provider-template.html
Normal file
82
provider-template.html
Normal file
@ -0,0 +1,82 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Easily compress video files to {{size}}MB so you can upload them to {{provider}}, online for free">
|
||||
<title>Compress videos to {{size}}MB for uploading to {{provider}}</title>
|
||||
<script defer src="/assets/scripts/ffmpeg/package/dist/umd/ffmpeg.js"></script>
|
||||
<script defer type="module" src="/assets/scripts/main.js"></script>
|
||||
<script>
|
||||
var FILE_SIZE = {{size}};
|
||||
var FILE_SIZE_UNIT = "mb";
|
||||
</script>
|
||||
<link rel="canonical" href="https://compact.video/providers/{{slug}}/">
|
||||
<link rel="shortcut icon" href="/assets/images/icon.png">
|
||||
<link rel="apple-touch-icon" href="/assets/images/icon.png">
|
||||
<link rel="stylesheet" href="/assets/styles/main.css">
|
||||
<link rel="stylesheet" href="/assets/styles/ui.css">
|
||||
<link rel="stylesheet" href="/assets/styles/file-picker-section.css">
|
||||
<link rel="stylesheet" href="/assets/styles/loading-section.css">
|
||||
<link rel="stylesheet" href="/assets/styles/result-section.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1><span class="gradient-text">compact</span>.video</h1>
|
||||
<h2 style="margin-top: 3rem;">Compress your video to {{size}}MB for uploading to {{provider}}</h2>
|
||||
|
||||
<section id="file-picker-section">
|
||||
<label id="file-drop-area" tabindex="0">
|
||||
<span>Drag and drop a file here!</span>
|
||||
<input id="file-input" type="file" accept="video/*" tabindex="-1">
|
||||
</label>
|
||||
<div id="file-input-spacing" style="margin-top: -1rem">
|
||||
<button class="simple">.</button>
|
||||
</div>
|
||||
|
||||
<video id="uploaded-video" controls autoplay></video>
|
||||
<button id="remove-file" class="simple">Remove video</button>
|
||||
|
||||
<button id="compress" class="primary">Compress</button>
|
||||
|
||||
<hr>
|
||||
|
||||
<p>
|
||||
To save storage space on their servers, {{provider}} only
|
||||
allows uploading videos that are less than {{size}}MB in size.
|
||||
This online tool will allow you to compress your video
|
||||
file such that it hits exactly this file size, so you
|
||||
can upload it to {{provider}}.
|
||||
</p>
|
||||
|
||||
<a href="/"><button class="simple">Back to home</button></a>
|
||||
</section>
|
||||
|
||||
<section id="loading-section" style="opacity: 0; display: none;">
|
||||
<h3 id="loading-title">Please wait...</h3>
|
||||
<p id="loading-description">Your video is being compressed. This may take a while.</p>
|
||||
|
||||
<div id="progress-container">
|
||||
<div id="progress-indicator"></div>
|
||||
</div>
|
||||
|
||||
<p id="progress-percentage">0%</p>
|
||||
|
||||
<p><label><input id="notify-checkbox" type="checkbox"> Notify on finish</label></p>
|
||||
|
||||
<button id="cancel" class="simple">Cancel</button>
|
||||
</section>
|
||||
|
||||
<section id="result-section" style="opacity: 0; display: none;">
|
||||
<h4 id="result-title">Your video has been compressed!</h4>
|
||||
<p>Result size: <span id="result-size"></span></p>
|
||||
|
||||
<video id="compressed-video" controls autoplay></video><br>
|
||||
|
||||
<button id="download" class="primary">Download</button><br>
|
||||
<button id="share" class="secondary">Share video</button><br>
|
||||
|
||||
<button id="back" class="simple">Go back</button>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -94,8 +94,8 @@ async function compress(filesize, filesizeUnit) {
|
||||
}
|
||||
|
||||
document.getElementById("compress").onclick = async () => {
|
||||
const filesize = document.getElementById("filesize").value;
|
||||
const filesizeUnit = document.getElementById("filesize-unit").value;
|
||||
const filesize = window.FILE_SIZE || document.getElementById("filesize").value;
|
||||
const filesizeUnit = window.FILE_SIZE_UNIT || document.getElementById("filesize-unit").value;
|
||||
|
||||
await compress(filesize, filesizeUnit);
|
||||
}
|
||||
|
||||
@ -55,7 +55,7 @@
|
||||
border-left: 1px solid #00BCD4;
|
||||
}
|
||||
|
||||
#compress {
|
||||
#filesize ~ #compress {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
|
||||
@ -18,6 +18,15 @@ h1 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #757575;
|
||||
}
|
||||
|
||||
section {
|
||||
max-width: 500px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.gradient-text {
|
||||
background-image: linear-gradient(to right, #4CAF50, #4CAF50 20%, #00BCD4 80%);
|
||||
background-clip: text;
|
||||
@ -29,6 +38,12 @@ p {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-top: 1px solid #CECECE;
|
||||
margin: 3rem auto;
|
||||
}
|
||||
|
||||
* {
|
||||
opacity: 1;
|
||||
transition: opacity 300ms;
|
||||
|
||||
8
public/sitemap.txt
Normal file
8
public/sitemap.txt
Normal file
@ -0,0 +1,8 @@
|
||||
https://compact.video/
|
||||
https://compact.video/providers/discord/
|
||||
https://compact.video/providers/gmail/
|
||||
https://compact.video/providers/yahoo-mail/
|
||||
https://compact.video/providers/messenger/
|
||||
https://compact.video/providers/signal/
|
||||
https://compact.video/providers/whatsapp/
|
||||
|
||||
Loading…
Reference in New Issue
Block a user