mirror of
https://github.com/techno-tim/littlelink-server.git
synced 2024-11-22 05:25:13 +01:00
Merge pull request #7 from Choubakawa/master
Modify index.html before starting express app
This commit is contained in:
Techno Tim
GitHub
commit
88b68244a9
@ -7,6 +7,8 @@ WORKDIR /usr/src/app
|
||||
COPY package.json yarn.lock ./
|
||||
RUN yarn install --frozen-lockfile --check-files --production=true
|
||||
COPY www ./www
|
||||
COPY template ./template
|
||||
COPY env.js ./
|
||||
COPY app.js ./
|
||||
COPY ./entrypoint.sh /
|
||||
RUN chmod +x /entrypoint.sh
|
||||
|
||||
17
app.js
17
app.js
@ -1,6 +1,23 @@
|
||||
const express = require('express')
|
||||
const morgan = require('morgan')
|
||||
const compression = require('compression')
|
||||
const fs = require('fs')
|
||||
const jsdom = require('jsdom')
|
||||
const useEnv = require('./env')
|
||||
|
||||
fs.readFile('./template/index.html', 'utf8', (err, file) => {
|
||||
if (err) {
|
||||
throw err;
|
||||
}
|
||||
const { JSDOM } = jsdom
|
||||
const dom = new JSDOM(file);
|
||||
const html = useEnv(dom.window.document).documentElement.outerHTML;
|
||||
fs.writeFile('./www/index.html', html, 'utf8', (err) => {
|
||||
if (err) {
|
||||
throw err;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const app = express();
|
||||
app.use(morgan('combined'));
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
#!/bin/bash
|
||||
originalfile="/usr/src/app/www/js/env.js"
|
||||
originalfile="/usr/src/app/env.js"
|
||||
tmpfile=$(mktemp)
|
||||
cp --attributes-only --preserve $originalfile $tmpfile
|
||||
cat $originalfile | envsubst | tee $tmpfile && mv $tmpfile $originalfile
|
||||
|
||||
351
env.js
Normal file
351
env.js
Normal file
@ -0,0 +1,351 @@
|
||||
module.exports = useEnv;
|
||||
|
||||
var env = {
|
||||
META_TITLE: '$META_TITLE',
|
||||
META_DESCRIPTION: '$META_DESCRIPTION',
|
||||
META_AUTHOR: '$META_AUTHOR',
|
||||
THEME: '$THEME',
|
||||
FAVICON_URL: '$FAVICON_URL',
|
||||
AVATAR_URL: '$AVATAR_URL',
|
||||
AVATAR_ALT: '$AVATAR_ALT',
|
||||
AVATAR_2X_URL : '$AVATAR_2X_URL',
|
||||
NAME:'$NAME',
|
||||
BIO: '$BIO',
|
||||
GITHUB: '$GITHUB',
|
||||
TWITTER: '$TWITTER',
|
||||
INSTAGRAM: '$INSTAGRAM',
|
||||
FACEBOOK: '$FACEBOOK',
|
||||
FACEBOOK_MESSENGER: '$FACEBOOK_MESSENGER',
|
||||
LINKED_IN: '$LINKED_IN',
|
||||
YOUTUBE: '$YOUTUBE',
|
||||
DISCORD: '$DISCORD',
|
||||
TWITCH: '$TWITCH',
|
||||
PRODUCT_HUNT: '$PRODUCT_HUNT',
|
||||
SNAPCHAT: '$SNAPCHAT',
|
||||
SPOTIFY: '$SPOTIFY',
|
||||
REDDIT: '$REDDIT',
|
||||
MEDIUM: '$MEDIUM',
|
||||
PINTEREST: '$PINTEREST',
|
||||
TIKTOK: '$TIKTOK',
|
||||
EMAIL: '$EMAIL',
|
||||
EMAIL_ALT: '$EMAIL_ALT',
|
||||
SOUND_CLOUD: '$SOUND_CLOUD',
|
||||
FIGMA: '$FIGMA',
|
||||
KIT: '$KIT',
|
||||
TELEGRAM: '$TELEGRAM',
|
||||
TUMBLR: '$TUMBLR',
|
||||
STEAM: '$STEAM',
|
||||
VIMEO: '$VIMEO',
|
||||
WORDPRESS: '$WORDPRESS',
|
||||
GOODREADS: '$GOODREADS',
|
||||
SKOOB: '$SKOOB',
|
||||
FOOTER: '$FOOTER',
|
||||
|
||||
}
|
||||
|
||||
function useEnv(document) {
|
||||
var metalTitleEl = document.getElementById('meta-title');
|
||||
if (env.META_TITLE) {
|
||||
metalTitleEl.textContent = env.META_TITLE;
|
||||
} else {
|
||||
metalTitleEl.remove()
|
||||
}
|
||||
|
||||
var metalDescriptionEl = document.getElementById('meta-description');
|
||||
if (env.META_DESCRIPTION) {
|
||||
metalDescriptionEl.content = env.META_DESCRIPTION;
|
||||
} else {
|
||||
metalDescriptionEl.remove()
|
||||
}
|
||||
|
||||
var metaAuthorEl = document.getElementById('meta-author');
|
||||
if (env.META_AUTHOR) {
|
||||
metaAuthorEl.content = env.META_AUTHOR;
|
||||
} else {
|
||||
metaAuthorEl.remove()
|
||||
}
|
||||
|
||||
var themeEl = document.getElementById('theme');
|
||||
if (env.THEME && env.THEME.toLocaleLowerCase() === 'dark') {
|
||||
themeEl.href = 'css/skeleton-dark.css';
|
||||
} else {
|
||||
themeEl.href = 'css/skeleton-light.css';
|
||||
}
|
||||
|
||||
var faviconEl = document.getElementById('favicon');
|
||||
if (env.FAVICON_URL) {
|
||||
faviconEl.href = env.FAVICON_URL;
|
||||
}
|
||||
|
||||
var avatarEl = document.getElementById('avatar');
|
||||
if (env.AVATAR_URL) {
|
||||
avatarEl.src = env.AVATAR_URL;
|
||||
avatarEl.alt = env.AVATAR_ALT;
|
||||
avatarEl.srcset = env.AVATAR_2X_URL + ' 2x';
|
||||
} else {
|
||||
avatarEl.remove()
|
||||
}
|
||||
|
||||
var nameEl = document.getElementById('name');
|
||||
if (env.NAME) {
|
||||
nameEl.innerHTML = env.NAME;
|
||||
} else {
|
||||
nameEl.remove()
|
||||
}
|
||||
|
||||
var bioEl = document.getElementById('bio');
|
||||
if (env.BIO) {
|
||||
bioEl.innerHTML = env.BIO;
|
||||
} else {
|
||||
bioEl.remove()
|
||||
}
|
||||
|
||||
var githubEl = document.getElementById('github');
|
||||
if (env.GITHUB) {
|
||||
githubEl.href = env.GITHUB;
|
||||
} else {
|
||||
githubEl.nextElementSibling.remove()
|
||||
githubEl.remove()
|
||||
}
|
||||
|
||||
var twitterEl = document.getElementById('twitter');
|
||||
if (env.TWITTER) {
|
||||
twitterEl.href = env.TWITTER;
|
||||
} else {
|
||||
twitterEl.nextElementSibling.remove()
|
||||
twitterEl.remove()
|
||||
}
|
||||
|
||||
var instagramEl = document.getElementById('instagram');
|
||||
if (env.INSTAGRAM) {
|
||||
instagramEl.href = env.INSTAGRAM;
|
||||
} else {
|
||||
instagramEl.nextElementSibling.remove()
|
||||
instagramEl.remove()
|
||||
}
|
||||
|
||||
var facebookEl = document.getElementById('facebook');
|
||||
if (env.FACEBOOK) {
|
||||
facebookEl.href = env.FACEBOOK;
|
||||
} else {
|
||||
facebookEl.nextElementSibling.remove()
|
||||
facebookEl.remove()
|
||||
}
|
||||
|
||||
var facebookMessengerEl = document.getElementById('facebook-messenger');
|
||||
if (env.FACEBOOK_MESSENGER) {
|
||||
facebookMessengerEl.href = env.FACEBOOK_MESSENGER;
|
||||
} else {
|
||||
facebookMessengerEl.nextElementSibling.remove()
|
||||
facebookMessengerEl.remove()
|
||||
}
|
||||
|
||||
|
||||
var linkedInEl = document.getElementById('linkedin');
|
||||
if (env.LINKED_IN) {
|
||||
linkedInEl.href = env.LINKED_IN;
|
||||
} else {
|
||||
linkedInEl.nextElementSibling.remove()
|
||||
linkedInEl.remove()
|
||||
}
|
||||
|
||||
|
||||
var youTubeEl = document.getElementById('youtube');
|
||||
if (env.YOUTUBE) {
|
||||
youTubeEl.href = env.YOUTUBE;
|
||||
} else {
|
||||
youTubeEl.nextElementSibling.remove()
|
||||
youTubeEl.remove()
|
||||
}
|
||||
|
||||
|
||||
var discordEl = document.getElementById('discord');
|
||||
if (env.DISCORD) {
|
||||
discordEl.href = env.DISCORD;
|
||||
} else {
|
||||
discordEl.nextElementSibling.remove()
|
||||
discordEl.remove()
|
||||
}
|
||||
|
||||
|
||||
var twitchEl = document.getElementById('twitch');
|
||||
if (env.TWITCH) {
|
||||
twitchEl.href = env.TWITCH;
|
||||
} else {
|
||||
twitchEl.nextElementSibling.remove()
|
||||
twitchEl.remove()
|
||||
}
|
||||
|
||||
var productHunEl = document.getElementById('producthunt');
|
||||
if (env.PRODUCT_HUNT) {
|
||||
productHunEl.href = env.PRODUCT_HUNT;
|
||||
} else {
|
||||
productHunEl.nextElementSibling.remove()
|
||||
productHunEl.remove()
|
||||
}
|
||||
|
||||
var snapchatEl = document.getElementById('snapchat');
|
||||
if (env.SNAPCHAT) {
|
||||
snapchatEl.href = env.SNAPCHAT;
|
||||
} else {
|
||||
snapchatEl.nextElementSibling.remove()
|
||||
snapchatEl.remove()
|
||||
}
|
||||
|
||||
var spotifyEl = document.getElementById('spotify');
|
||||
if (env.SPOTIFY) {
|
||||
spotifyEl.href = env.SPOTIFY;
|
||||
} else {
|
||||
spotifyEl.nextElementSibling.remove()
|
||||
spotifyEl.remove()
|
||||
}
|
||||
|
||||
var redditEl = document.getElementById('reddit');
|
||||
if (env.REDDIT) {
|
||||
redditEl.href = env.REDDIT;
|
||||
} else {
|
||||
redditEl.nextElementSibling.remove()
|
||||
redditEl.remove()
|
||||
}
|
||||
|
||||
|
||||
var mediumEl = document.getElementById('medium');
|
||||
if (env.MEDIUM) {
|
||||
mediumEl.href = env.MEDIUM;
|
||||
} else {
|
||||
mediumEl.nextElementSibling.remove()
|
||||
mediumEl.remove()
|
||||
}
|
||||
|
||||
|
||||
var pinterestEl = document.getElementById('pinterest');
|
||||
if (env.PINTEREST) {
|
||||
pinterestEl.href = env.PINTEREST;
|
||||
} else {
|
||||
pinterestEl.nextElementSibling.remove()
|
||||
pinterestEl.remove()
|
||||
}
|
||||
|
||||
var tiktokEl = document.getElementById('tiktok');
|
||||
if (env.TIKTOK) {
|
||||
tiktokEl.href = env.TIKTOK;
|
||||
} else {
|
||||
tiktokEl.nextElementSibling.remove()
|
||||
tiktokEl.remove()
|
||||
}
|
||||
|
||||
var emailEl = document.getElementById('email');
|
||||
if (env.EMAIL) {
|
||||
emailEl.href = env.EMAIL;
|
||||
} else {
|
||||
emailEl.nextElementSibling.remove()
|
||||
emailEl.remove()
|
||||
}
|
||||
|
||||
|
||||
var emailAltEl = document.getElementById('email-alt');
|
||||
if (env.EMAIL_ALT) {
|
||||
emailAltEl.href = env.EMAIL_ALT;
|
||||
} else {
|
||||
emailAltEl.nextElementSibling.remove()
|
||||
emailAltEl.remove()
|
||||
}
|
||||
|
||||
var soundCloudEl = document.getElementById('soundcloud');
|
||||
if (env.SOUND_CLOUD) {
|
||||
soundCloudEl.href = env.SOUND_CLOUD;
|
||||
} else {
|
||||
soundCloudEl.nextElementSibling.remove()
|
||||
soundCloudEl.remove()
|
||||
}
|
||||
|
||||
|
||||
var figmaEl = document.getElementById('figma');
|
||||
if (env.FIGMA) {
|
||||
figmaEl.href = env.FIGMA;
|
||||
} else {
|
||||
figmaEl.nextElementSibling.remove()
|
||||
figmaEl.remove()
|
||||
}
|
||||
|
||||
|
||||
var kitEl = document.getElementById('kit');
|
||||
if (env.KIT) {
|
||||
kitEl.href = env.KIT;
|
||||
} else {
|
||||
kitEl.nextElementSibling.remove()
|
||||
kitEl.remove()
|
||||
}
|
||||
|
||||
|
||||
var telegramEl = document.getElementById('telegram');
|
||||
if (env.TELEGRAM) {
|
||||
telegramEl.href = env.TELEGRAM;
|
||||
} else {
|
||||
telegramEl.nextElementSibling.remove()
|
||||
telegramEl.remove()
|
||||
}
|
||||
|
||||
var temblrEl = document.getElementById('tumblr');
|
||||
if (env.TUMBLR) {
|
||||
temblrEl.href = env.TUMBLR;
|
||||
} else {
|
||||
temblrEl.nextElementSibling.remove()
|
||||
temblrEl.remove()
|
||||
}
|
||||
|
||||
|
||||
var steamEl = document.getElementById('steam');
|
||||
if (env.STEAM) {
|
||||
steamEl.href = env.STEAM;
|
||||
} else {
|
||||
steamEl.nextElementSibling.remove()
|
||||
steamEl.remove()
|
||||
}
|
||||
|
||||
|
||||
var vimeoEl = document.getElementById('vimeo');
|
||||
if (env.VIMEO) {
|
||||
vimeoEl.href = env.VIMEO;
|
||||
} else {
|
||||
vimeoEl.nextElementSibling.remove()
|
||||
vimeoEl.remove()
|
||||
}
|
||||
|
||||
|
||||
var wordpressEl = document.getElementById('wordpress');
|
||||
if (env.WORDPRESS) {
|
||||
wordpressEl.href = env.WORDPRESS;
|
||||
} else {
|
||||
wordpressEl.nextElementSibling.remove()
|
||||
wordpressEl.remove()
|
||||
}
|
||||
|
||||
var goodreadsEl = document.getElementById('goodreads');
|
||||
if (env.GOODREADS) {
|
||||
goodreadsEl.href = env.GOODREADS;
|
||||
} else {
|
||||
goodreadsEl.nextElementSibling.remove()
|
||||
goodreadsEl.remove()
|
||||
}
|
||||
|
||||
var skoobEl = document.getElementById('skoob');
|
||||
if (env.SKOOB) {
|
||||
skoobEl.href = env.SKOOB;
|
||||
} else {
|
||||
skoobEl.nextElementSibling.remove()
|
||||
skoobEl.remove()
|
||||
}
|
||||
|
||||
|
||||
var footerEl = document.getElementById('footer');
|
||||
if (env.FOOTER) {
|
||||
footerEl.innerHTML = env.FOOTER;
|
||||
} else {
|
||||
footerEl.remove()
|
||||
}
|
||||
|
||||
return document;
|
||||
}
|
||||
|
||||
|
||||
@ -32,6 +32,7 @@
|
||||
"dependencies": {
|
||||
"compression": "^1.7.4",
|
||||
"express": "^4.17.1",
|
||||
"morgan": "^1.10.0"
|
||||
"morgan": "^1.10.0",
|
||||
"jsdom": "^17.0.0"
|
||||
}
|
||||
}
|
||||
|
||||
213
template/index.html
Normal file
213
template/index.html
Normal file
@ -0,0 +1,213 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Page Information
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||
<meta charset="utf-8">
|
||||
<title id="meta-title">LittleLink</title>
|
||||
<meta id="meta-description" name="description" content="Find us online!">
|
||||
<meta id="meta-author" name="author" content="Seth Cottle">
|
||||
|
||||
<!-- Mobile Specific Metas
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<!-- FONT
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- CSS
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||
<link rel="stylesheet" href="css/normalize.css">
|
||||
<link id="theme" rel="stylesheet" href="css/skeleton-light.css">
|
||||
<link rel="stylesheet" href="css/brands.css">
|
||||
|
||||
<!-- Favicon
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||
<link id="favicon" rel="icon" type="image/png" href="images/avatar.png">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Primary Page Layout
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="column" style="margin-top: 10%">
|
||||
<!--
|
||||
|
||||
## Getting Started with LittleLink
|
||||
|
||||
This page has been built with every pre-designed button available in LittleLink by default. You can rearrange and delete as needed.
|
||||
|
||||
You can add your own brand or others brands you may need in the `css/brands.css` file.
|
||||
|
||||
Edit the "Your Image Here" section to add your own personal branding, like a picture of yourself or your brand logo!
|
||||
|
||||
Edit the "Your Name" section to change the page heading. You can use something like your name, your social handle, or your brand name.
|
||||
|
||||
Edit the "Short Bio" section tell users about yourself or your brand.
|
||||
|
||||
-->
|
||||
|
||||
<!-- Your Image Here -->
|
||||
<img id="avatar" class="avatar" src="images/avatar.png" srcset="images/avatar@2x.png 2x" alt="LittleLink Logo">
|
||||
|
||||
<!-- Your Name -->
|
||||
<h1 id="name">LittleLink</h1>
|
||||
|
||||
<!-- Short Bio -->
|
||||
<p id="bio">LittleLink is an open source DIY alternative to services like <a href="https://linktr.ee" target="_blank" rel="noopener">Linktree</a> and <a href="https://many.link" target="_blank" rel="noopener">many.link</a>. LittleLink was built using <a href="http://www.getskeleton.com" target="_blank" rel="noopener">Skeleton</a>, a dead simple, responsive boilerplate—we’ve just created some branded buttons and stripped out the things you won't need. 😊</p>
|
||||
|
||||
<!--
|
||||
|
||||
## Breaking down <a> attributes:
|
||||
|
||||
1.) class="button button-default" | The first "button" here is telling this <a> tag that it should make this element a button and applies the default styling in `css/brands.css`.
|
||||
The second portion, button-default, is declaring the specific brand style you would like to apply. Here we're applying the "default" style and color.
|
||||
If you want to make this button to use the brand colors for Discord, just change "button-default" to "button-discord". Brands are found in `css/brands.css`. You can always edit & add your own there.
|
||||
|
||||
2.) Replace the # in href="#" with the desired target URL for the button.
|
||||
|
||||
3.) target="_blank" | This attribute opens links in a new tab. Remove this attribute to prevent links from opening in a new tab.
|
||||
|
||||
4.) rel="noopener" | This attribute instructs the browser to navigate to the target resource without granting the new browsing context access to the document that opened it.
|
||||
This is especially useful when opening untrusted links. https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/noopener
|
||||
|
||||
## Breaking down the <img> attributes:
|
||||
|
||||
1.) class="icon" | This class is telling the <img> tag that it should use the styling for icons found in `css/brands.css`.
|
||||
|
||||
2.) src="icons/[icon_name].svg" | This defines the icon you would like to display from the icons/ folder. For example, you can change this to src="icons/discord.svg" to use the Discord icon.
|
||||
Add your own 24x24 icons to the "icons" folder to reference them. We recommend providing a SVG.
|
||||
|
||||
3.) alt="Example Logo" | This alt attribute helps provides alternate text for an image, this can assist users who use screen readers.
|
||||
|
||||
-->
|
||||
|
||||
<!-- Github -->
|
||||
|
||||
<a id="github" class="button button-github" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/github.svg" alt="GitHub Logo">GitHub</a>
|
||||
<br>
|
||||
|
||||
<!-- Twitter -->
|
||||
<a id="twitter" class="button button-twitter" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/twitter.svg" alt="Twitter Logo">Twitter</a>
|
||||
<br>
|
||||
|
||||
<!-- Instagram -->
|
||||
<a id="instagram" class="button button-instagram" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/instagram.svg" alt="Instagram Logo">Instagram</a>
|
||||
<br>
|
||||
|
||||
<!-- Facebook -->
|
||||
<a id="facebook" class="button button-facebook" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/facebook.svg" alt="Facebook Logo">Find us on Facebook</a>
|
||||
<br>
|
||||
|
||||
<!-- Facebook Messenger -->
|
||||
<a id="facebook-messenger" class="button button-messenger" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/messenger.svg" alt="Facebook Messenger Logo">Chat on Messenger</a>
|
||||
<br>
|
||||
|
||||
<!-- LinkedIn -->
|
||||
<a id="linkedin" class="button button-linkedin" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/linkedin.svg" alt="LinkedIn Logo">LinkedIn</a>
|
||||
<br>
|
||||
|
||||
<!-- YouTube -->
|
||||
<a id="youtube" class="button button-youtube" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/youtube.svg" alt="YouTube Logo">YouTube</a>
|
||||
<br>
|
||||
|
||||
<!-- Discord -->
|
||||
<a id="discord" class="button button-discord" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/discord.svg" alt="Discord Logo">Discord</a>
|
||||
<br>
|
||||
|
||||
<!-- Twitch -->
|
||||
<a id="twitch" class="button button-twitch" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/twitch.svg" alt="Twitch Logo">Twitch</a>
|
||||
<br>
|
||||
|
||||
<!-- ProductHunt -->
|
||||
<a id="producthunt" class="button button-producthunt" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/producthunt.svg" alt="Product Hunt Logo">Product Hunt</a>
|
||||
<br>
|
||||
|
||||
<!-- Snapchat -->
|
||||
<a id="snapchat" class="button button-snapchat" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/snapchat.svg" alt="Snapchat Logo">Snapchat</a>
|
||||
<br>
|
||||
|
||||
<!-- Spotify -->
|
||||
<a id="spotify" class="button button-spotify" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/spotify.svg" alt="Spotify Logo">Spotify</a>
|
||||
<br>
|
||||
|
||||
<!-- Reddit -->
|
||||
<a id="reddit" class="button button-reddit" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/reddit.svg" alt="Reddit Logo">Reddit</a>
|
||||
<br>
|
||||
|
||||
<!-- Medium -->
|
||||
<a id="medium" class="button button-medium" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/medium.svg" alt="Medium Logo">Medium</a>
|
||||
<br>
|
||||
|
||||
<!-- Pinterest -->
|
||||
<a id="pinterest" class="button button-pinterest" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/pinterest.svg" alt="Pinterest Logo">Follow on Pinterest</a>
|
||||
<br>
|
||||
|
||||
<!-- TikTok -->
|
||||
<a id="tiktok" class="button button-tiktok" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/tiktok.svg" alt="TikTok Logo">TikTok</a>
|
||||
<br>
|
||||
|
||||
<!-- Email -->
|
||||
<a id="email" class="button button-default" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/email.svg" alt="Email Icon">hello@littlelink.io</a>
|
||||
<br>
|
||||
|
||||
<!-- Email Alternative -->
|
||||
<a id="email-alt" class="button button-default" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/email_alt.svg" alt="Email Icon">hello@littlelink.io</a>
|
||||
<br>
|
||||
|
||||
<!-- SoundCloud -->
|
||||
<a id="soundcloud" class="button button-soundcloud" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/soundcloud.svg" alt="SoundCloud Logo">SoundCloud</a>
|
||||
<br>
|
||||
|
||||
<!-- Figma -->
|
||||
<a id="figma" class="button button-figma" href="#" target="_blank" rel="noopener" ><img class="icon" src="icons/figma.svg" alt="Figma Logo">Figma</a>
|
||||
<br>
|
||||
|
||||
<!-- Kit -->
|
||||
<a id="kit" class="button button-kit" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/kit.svg" alt="Kit Logo">Kit</a>
|
||||
<br>
|
||||
|
||||
<!-- Telegram -->
|
||||
<a id="telegram" class="button button-telegram" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/telegram.svg" alt="Telegram Logo">Telegram</a>
|
||||
<br>
|
||||
|
||||
<!-- Tumblr -->
|
||||
<a id="tumblr" class="button button-tumblr" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/tumblr.svg" alt="Tumblr Logo">Tumblr</a>
|
||||
<br>
|
||||
|
||||
<!-- Steam -->
|
||||
<a id="steam" class="button button-steam" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/steam.svg" alt="Steam Logo">Steam</a>
|
||||
<br>
|
||||
|
||||
<!-- Vimeo -->
|
||||
<a id="vimeo" class="button button-vimeo" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/vimeo.svg" alt="Vimeo Logo">Vimeo</a>
|
||||
<br>
|
||||
|
||||
<!-- Wordpress -->
|
||||
<a id="wordpress" class="button button-wordpress" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/wordpress.svg" alt="Wordpress Logo">Wordpress</a>
|
||||
<br>
|
||||
|
||||
<!-- Goodreads -->
|
||||
<a id="goodreads" class="button button-goodreads" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/goodreads.svg" alt="Goodreads Logo">Goodreads</a>
|
||||
<br>
|
||||
|
||||
<!-- Skoob -->
|
||||
<a id="skoob" class="button button-skoob" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/skoob.svg" alt="Skoob Logo">Skoob</a>
|
||||
<br>
|
||||
|
||||
<br>
|
||||
<br>
|
||||
<p id="footer">Build your own by forking <a href="https://littlelink.io" target="_blank" rel="noopener">LittleLink</a>.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Document
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||
</body>
|
||||
</html>
|
||||
@ -207,9 +207,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- JavaScript
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||
<script src="js/env.js"></script>
|
||||
<!-- End Document
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||
</body>
|
||||
|
||||
343
www/js/env.js
343
www/js/env.js
@ -1,343 +0,0 @@
|
||||
var env = {
|
||||
META_TITLE: '$META_TITLE',
|
||||
META_DESCRIPTION: '$META_DESCRIPTION',
|
||||
META_AUTHOR: '$META_AUTHOR',
|
||||
THEME: '$THEME',
|
||||
FAVICON_URL: '$FAVICON_URL',
|
||||
AVATAR_URL: '$AVATAR_URL',
|
||||
AVATAR_ALT: '$AVATAR_ALT',
|
||||
AVATAR_2X_URL : '$AVATAR_2X_URL',
|
||||
NAME:'$NAME',
|
||||
BIO: '$BIO',
|
||||
GITHUB: '$GITHUB',
|
||||
TWITTER: '$TWITTER',
|
||||
INSTAGRAM: '$INSTAGRAM',
|
||||
FACEBOOK: '$FACEBOOK',
|
||||
FACEBOOK_MESSENGER: '$FACEBOOK_MESSENGER',
|
||||
LINKED_IN: '$LINKED_IN',
|
||||
YOUTUBE: '$YOUTUBE',
|
||||
DISCORD: '$DISCORD',
|
||||
TWITCH: '$TWITCH',
|
||||
PRODUCT_HUNT: '$PRODUCT_HUNT',
|
||||
SNAPCHAT: '$SNAPCHAT',
|
||||
SPOTIFY: '$SPOTIFY',
|
||||
REDDIT: '$REDDIT',
|
||||
MEDIUM: '$MEDIUM',
|
||||
PINTEREST: '$PINTEREST',
|
||||
TIKTOK: '$TIKTOK',
|
||||
EMAIL: '$EMAIL',
|
||||
EMAIL_ALT: '$EMAIL_ALT',
|
||||
SOUND_CLOUD: '$SOUND_CLOUD',
|
||||
FIGMA: '$FIGMA',
|
||||
KIT: '$KIT',
|
||||
TELEGRAM: '$TELEGRAM',
|
||||
TUMBLR: '$TUMBLR',
|
||||
STEAM: '$STEAM',
|
||||
VIMEO: '$VIMEO',
|
||||
WORDPRESS: '$WORDPRESS',
|
||||
GOODREADS: '$GOODREADS',
|
||||
SKOOB: '$SKOOB',
|
||||
FOOTER: '$FOOTER',
|
||||
|
||||
}
|
||||
|
||||
var metalTitleEl = document.getElementById('meta-title');
|
||||
if (env.META_TITLE) {
|
||||
metalTitleEl.innerText = env.META_TITLE;
|
||||
} else {
|
||||
metalTitleEl.remove()
|
||||
}
|
||||
|
||||
var metalDescriptionEl = document.getElementById('meta-description');
|
||||
if (env.META_DESCRIPTION) {
|
||||
metalDescriptionEl.content = env.META_DESCRIPTION;
|
||||
} else {
|
||||
metalDescriptionEl.remove()
|
||||
}
|
||||
|
||||
var metaAuthorEl = document.getElementById('meta-author');
|
||||
if (env.META_AUTHOR) {
|
||||
metaAuthorEl.content = env.META_AUTHOR;
|
||||
} else {
|
||||
metaAuthorEl.remove()
|
||||
}
|
||||
|
||||
var themeEl = document.getElementById('theme');
|
||||
if (env.THEME && env.THEME.toLocaleLowerCase() === 'dark') {
|
||||
themeEl.href = 'css/skeleton-dark.css';
|
||||
} else {
|
||||
themeEl.href = 'css/skeleton-light.css';
|
||||
}
|
||||
|
||||
var faviconEl = document.getElementById('favicon');
|
||||
if (env.FAVICON_URL) {
|
||||
faviconEl.href = env.FAVICON_URL;
|
||||
}
|
||||
|
||||
var avatarEl = document.getElementById('avatar');
|
||||
if (env.AVATAR_URL) {
|
||||
avatarEl.src = env.AVATAR_URL;
|
||||
avatarEl.alt = env.AVATAR_ALT;
|
||||
avatarEl.srcset = env.AVATAR_2X_URL + ' 2x';
|
||||
} else {
|
||||
avatarEl.remove()
|
||||
}
|
||||
|
||||
var nameEl = document.getElementById('name');
|
||||
if (env.NAME) {
|
||||
nameEl.innerText = env.NAME;
|
||||
} else {
|
||||
nameEl.remove()
|
||||
}
|
||||
|
||||
var bioEl = document.getElementById('bio');
|
||||
if (env.BIO) {
|
||||
bioEl.innerText = env.BIO;
|
||||
} else {
|
||||
bioEl.remove()
|
||||
}
|
||||
|
||||
var githubEl = document.getElementById('github');
|
||||
if (env.GITHUB) {
|
||||
githubEl.href = env.GITHUB;
|
||||
} else {
|
||||
githubEl.nextElementSibling.remove()
|
||||
githubEl.remove()
|
||||
}
|
||||
|
||||
var twitterEl = document.getElementById('twitter');
|
||||
if (env.TWITTER) {
|
||||
twitterEl.href = env.TWITTER;
|
||||
} else {
|
||||
twitterEl.nextElementSibling.remove()
|
||||
twitterEl.remove()
|
||||
}
|
||||
|
||||
var instagramEl = document.getElementById('instagram');
|
||||
if (env.INSTAGRAM) {
|
||||
instagramEl.href = env.INSTAGRAM;
|
||||
} else {
|
||||
instagramEl.nextElementSibling.remove()
|
||||
instagramEl.remove()
|
||||
}
|
||||
|
||||
var facebookEl = document.getElementById('facebook');
|
||||
if (env.FACEBOOK) {
|
||||
facebookEl.href = env.FACEBOOK;
|
||||
} else {
|
||||
facebookEl.nextElementSibling.remove()
|
||||
facebookEl.remove()
|
||||
}
|
||||
|
||||
var facebookMessengerEl = document.getElementById('facebook-messenger');
|
||||
if (env.FACEBOOK_MESSENGER) {
|
||||
facebookMessengerEl.href = env.FACEBOOK_MESSENGER;
|
||||
} else {
|
||||
facebookMessengerEl.nextElementSibling.remove()
|
||||
facebookMessengerEl.remove()
|
||||
}
|
||||
|
||||
|
||||
var linkedInEl = document.getElementById('linkedin');
|
||||
if (env.LINKED_IN) {
|
||||
linkedInEl.href = env.LINKED_IN;
|
||||
} else {
|
||||
linkedInEl.nextElementSibling.remove()
|
||||
linkedInEl.remove()
|
||||
}
|
||||
|
||||
|
||||
var youTubeEl = document.getElementById('youtube');
|
||||
if (env.YOUTUBE) {
|
||||
youTubeEl.href = env.YOUTUBE;
|
||||
} else {
|
||||
youTubeEl.nextElementSibling.remove()
|
||||
youTubeEl.remove()
|
||||
}
|
||||
|
||||
|
||||
var discordEl = document.getElementById('discord');
|
||||
if (env.DISCORD) {
|
||||
discordEl.href = env.DISCORD;
|
||||
} else {
|
||||
discordEl.nextElementSibling.remove()
|
||||
discordEl.remove()
|
||||
}
|
||||
|
||||
|
||||
var twitchEl = document.getElementById('twitch');
|
||||
if (env.TWITCH) {
|
||||
twitchEl.href = env.TWITCH;
|
||||
} else {
|
||||
twitchEl.nextElementSibling.remove()
|
||||
twitchEl.remove()
|
||||
}
|
||||
|
||||
var productHunEl = document.getElementById('producthunt');
|
||||
if (env.PRODUCT_HUNT) {
|
||||
productHunEl.href = env.PRODUCT_HUNT;
|
||||
} else {
|
||||
productHunEl.nextElementSibling.remove()
|
||||
productHunEl.remove()
|
||||
}
|
||||
|
||||
var snapchatEl = document.getElementById('snapchat');
|
||||
if (env.SNAPCHAT) {
|
||||
snapchatEl.href = env.SNAPCHAT;
|
||||
} else {
|
||||
snapchatEl.nextElementSibling.remove()
|
||||
snapchatEl.remove()
|
||||
}
|
||||
|
||||
var spotifyEl = document.getElementById('spotify');
|
||||
if (env.SPOTIFY) {
|
||||
spotifyEl.href = env.SPOTIFY;
|
||||
} else {
|
||||
spotifyEl.nextElementSibling.remove()
|
||||
spotifyEl.remove()
|
||||
}
|
||||
|
||||
var redditEl = document.getElementById('reddit');
|
||||
if (env.REDDIT) {
|
||||
redditEl.href = env.REDDIT;
|
||||
} else {
|
||||
redditEl.nextElementSibling.remove()
|
||||
redditEl.remove()
|
||||
}
|
||||
|
||||
|
||||
var mediumEl = document.getElementById('medium');
|
||||
if (env.MEDIUM) {
|
||||
mediumEl.href = env.MEDIUM;
|
||||
} else {
|
||||
mediumEl.nextElementSibling.remove()
|
||||
mediumEl.remove()
|
||||
}
|
||||
|
||||
|
||||
var pinterestEl = document.getElementById('pinterest');
|
||||
if (env.PINTEREST) {
|
||||
pinterestEl.href = env.PINTEREST;
|
||||
} else {
|
||||
pinterestEl.nextElementSibling.remove()
|
||||
pinterestEl.remove()
|
||||
}
|
||||
|
||||
var tiktokEl = document.getElementById('tiktok');
|
||||
if (env.TIKTOK) {
|
||||
tiktokEl.href = env.TIKTOK;
|
||||
} else {
|
||||
tiktokEl.nextElementSibling.remove()
|
||||
tiktokEl.remove()
|
||||
}
|
||||
|
||||
var emailEl = document.getElementById('email');
|
||||
if (env.EMAIL) {
|
||||
emailEl.href = env.EMAIL;
|
||||
} else {
|
||||
emailEl.nextElementSibling.remove()
|
||||
emailEl.remove()
|
||||
}
|
||||
|
||||
|
||||
var emailAltEl = document.getElementById('email-alt');
|
||||
if (env.EMAIL_ALT) {
|
||||
emailAltEl.href = env.EMAIL_ALT;
|
||||
} else {
|
||||
emailAltEl.nextElementSibling.remove()
|
||||
emailAltEl.remove()
|
||||
}
|
||||
|
||||
var soundCloudEl = document.getElementById('soundcloud');
|
||||
if (env.SOUND_CLOUD) {
|
||||
soundCloudEl.href = env.SOUND_CLOUD;
|
||||
} else {
|
||||
soundCloudEl.nextElementSibling.remove()
|
||||
soundCloudEl.remove()
|
||||
}
|
||||
|
||||
|
||||
var figmaEl = document.getElementById('figma');
|
||||
if (env.FIGMA) {
|
||||
figmaEl.href = env.FIGMA;
|
||||
} else {
|
||||
figmaEl.nextElementSibling.remove()
|
||||
figmaEl.remove()
|
||||
}
|
||||
|
||||
|
||||
var kitEl = document.getElementById('kit');
|
||||
if (env.KIT) {
|
||||
kitEl.href = env.KIT;
|
||||
} else {
|
||||
kitEl.nextElementSibling.remove()
|
||||
kitEl.remove()
|
||||
}
|
||||
|
||||
|
||||
var telegramEl = document.getElementById('telegram');
|
||||
if (env.TELEGRAM) {
|
||||
telegramEl.href = env.TELEGRAM;
|
||||
} else {
|
||||
telegramEl.nextElementSibling.remove()
|
||||
telegramEl.remove()
|
||||
}
|
||||
|
||||
var temblrEl = document.getElementById('tumblr');
|
||||
if (env.TUMBLR) {
|
||||
temblrEl.href = env.TUMBLR;
|
||||
} else {
|
||||
temblrEl.nextElementSibling.remove()
|
||||
temblrEl.remove()
|
||||
}
|
||||
|
||||
|
||||
var steamEl = document.getElementById('steam');
|
||||
if (env.STEAM) {
|
||||
steamEl.href = env.STEAM;
|
||||
} else {
|
||||
steamEl.nextElementSibling.remove()
|
||||
steamEl.remove()
|
||||
}
|
||||
|
||||
|
||||
var vimeoEl = document.getElementById('vimeo');
|
||||
if (env.VIMEO) {
|
||||
vimeoEl.href = env.VIMEO;
|
||||
} else {
|
||||
vimeoEl.nextElementSibling.remove()
|
||||
vimeoEl.remove()
|
||||
}
|
||||
|
||||
|
||||
var wordpressEl = document.getElementById('wordpress');
|
||||
if (env.WORDPRESS) {
|
||||
wordpressEl.href = env.WORDPRESS;
|
||||
} else {
|
||||
wordpressEl.nextElementSibling.remove()
|
||||
wordpressEl.remove()
|
||||
}
|
||||
|
||||
var goodreadsEl = document.getElementById('goodreads');
|
||||
if (env.GOODREADS) {
|
||||
goodreadsEl.href = env.GOODREADS;
|
||||
} else {
|
||||
goodreadsEl.nextElementSibling.remove()
|
||||
goodreadsEl.remove()
|
||||
}
|
||||
|
||||
var skoobEl = document.getElementById('skoob');
|
||||
if (env.SKOOB) {
|
||||
skoobEl.href = env.SKOOB;
|
||||
} else {
|
||||
skoobEl.nextElementSibling.remove()
|
||||
skoobEl.remove()
|
||||
}
|
||||
|
||||
|
||||
var footerEl = document.getElementById('footer');
|
||||
if (env.FOOTER) {
|
||||
footerEl.innerText = env.FOOTER;
|
||||
} else {
|
||||
footerEl.remove()
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user