develop #115
5 changed files with 86 additions and 223 deletions
45
.eleventy.js
Normal file
45
.eleventy.js
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
const pluginRev = require("eleventy-plugin-rev");
|
||||||
|
const eleventySass = require("eleventy-sass");
|
||||||
|
const tinyHTML = require('@sardine/eleventy-plugin-tinyhtml');
|
||||||
|
|
||||||
|
module.exports = function (eleventyConfig) {
|
||||||
|
eleventyConfig.addPlugin(pluginRev);
|
||||||
|
eleventyConfig.addPlugin(tinyHTML);
|
||||||
|
eleventyConfig.addPlugin(eleventySass, {
|
||||||
|
sass: {
|
||||||
|
loadPaths: ["node_modules"],
|
||||||
|
style: "compressed",
|
||||||
|
sourceMap: false,
|
||||||
|
},
|
||||||
|
compileOptions: {
|
||||||
|
permalink: function (contents, inputPath) {
|
||||||
|
return (data) => {
|
||||||
|
return data.page.filePathStem.replace(/^\/scss\//, "/css/") + ".css";
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
rev: true
|
||||||
|
});
|
||||||
|
|
||||||
|
eleventyConfig.setUseGitIgnore(false);
|
||||||
|
eleventyConfig.addPassthroughCopy({
|
||||||
|
"src/img": "img",
|
||||||
|
"src/favicon.*": "",
|
||||||
|
"node_modules/@fortawesome/fontawesome-free/webfonts": "webfonts",
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
// Pre-process *.html files with: (default: `liquid`)
|
||||||
|
htmlTemplateEngine: "njk",
|
||||||
|
// Opt-out of pre-processing global data JSON files: (default: `liquid`)
|
||||||
|
dataTemplateEngine: "njk",
|
||||||
|
|
||||||
|
dir: {
|
||||||
|
input: "src",
|
||||||
|
// includes: "_includes",
|
||||||
|
// layouts: "_includes/layouts",
|
||||||
|
data: "_data",
|
||||||
|
output: `dist`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
185
gulpfile.js
185
gulpfile.js
|
|
@ -1,185 +0,0 @@
|
||||||
/**
|
|
||||||
* Settings
|
|
||||||
* Turn on/off build features
|
|
||||||
*/
|
|
||||||
var settings = {
|
|
||||||
clean: true,
|
|
||||||
styles: true,
|
|
||||||
copy: true,
|
|
||||||
reload: true
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Paths to project folders
|
|
||||||
*/
|
|
||||||
var paths = {
|
|
||||||
input: 'src/',
|
|
||||||
output: 'dist/',
|
|
||||||
styles: {
|
|
||||||
input: 'src/scss/*.scss',
|
|
||||||
output: 'dist/css/'
|
|
||||||
},
|
|
||||||
copy: {
|
|
||||||
input: [
|
|
||||||
'src/*.html',
|
|
||||||
// 'src/.htaccess',
|
|
||||||
'src/{img,font}/**/*',
|
|
||||||
'node_modules/@fortawesome/fontawesome-free/*fonts/**/*'
|
|
||||||
],
|
|
||||||
output: 'dist/'
|
|
||||||
},
|
|
||||||
reload: './dist/'
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Template for banner to add to file headers
|
|
||||||
*/
|
|
||||||
|
|
||||||
var banner = {
|
|
||||||
main:
|
|
||||||
'/*!' +
|
|
||||||
' <%= package.name %> v<%= package.version %>' +
|
|
||||||
' | (c) ' + new Date().getFullYear() + ' <%= package.author.name %>' +
|
|
||||||
' | <%= package.license %> License' +
|
|
||||||
' | <%= package.repository.url %>' +
|
|
||||||
' */\n'
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Gulp Packages
|
|
||||||
*/
|
|
||||||
// General
|
|
||||||
var {src, dest, watch, series, parallel} = require('gulp');
|
|
||||||
var del = require('del');
|
|
||||||
var rename = require('gulp-rename');
|
|
||||||
var header = require('gulp-header');
|
|
||||||
var package = require('./package.json');
|
|
||||||
|
|
||||||
// Styles
|
|
||||||
var sass = require('gulp-sass')(require('sass'));
|
|
||||||
var postcss = require('gulp-postcss');
|
|
||||||
var prefix = require('autoprefixer');
|
|
||||||
var minify = require('cssnano');
|
|
||||||
var tildeImporter = require('node-sass-tilde-importer');
|
|
||||||
|
|
||||||
// BrowserSync
|
|
||||||
var browserSync = require('browser-sync');
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Gulp Tasks
|
|
||||||
*/
|
|
||||||
// Remove pre-existing content from output folders
|
|
||||||
var cleanDist = function (done) {
|
|
||||||
|
|
||||||
// Make sure this feature is activated before running
|
|
||||||
if (!settings.clean) return done();
|
|
||||||
|
|
||||||
// Clean the dist folder
|
|
||||||
del.sync([
|
|
||||||
paths.output
|
|
||||||
]);
|
|
||||||
|
|
||||||
// Signal completion
|
|
||||||
return done();
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
// Process, and minify Sass files
|
|
||||||
var buildStyles = function (done) {
|
|
||||||
// Make sure this feature is activated before running
|
|
||||||
if (!settings.styles) return done();
|
|
||||||
|
|
||||||
// Run tasks on all Sass files
|
|
||||||
return src(paths.styles.input)
|
|
||||||
.pipe(sass({
|
|
||||||
importer: tildeImporter,
|
|
||||||
outputStyle: 'expanded',
|
|
||||||
sourceComments: true
|
|
||||||
}))
|
|
||||||
.pipe(postcss([
|
|
||||||
prefix({
|
|
||||||
cascade: true,
|
|
||||||
remove: true
|
|
||||||
})
|
|
||||||
]))
|
|
||||||
.pipe(header(banner.main, {package: package}))
|
|
||||||
.pipe(dest(paths.styles.output))
|
|
||||||
.pipe(rename({suffix: '.min'}))
|
|
||||||
.pipe(postcss([
|
|
||||||
minify({
|
|
||||||
discardComments: {
|
|
||||||
removeAll: true
|
|
||||||
}
|
|
||||||
})
|
|
||||||
]))
|
|
||||||
.pipe(dest(paths.styles.output));
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
// Copy static files into output folder
|
|
||||||
var copyFiles = function (done) {
|
|
||||||
|
|
||||||
// Make sure this feature is activated before running
|
|
||||||
if (!settings.copy) return done();
|
|
||||||
|
|
||||||
// Copy static files
|
|
||||||
return src(paths.copy.input)
|
|
||||||
.pipe(dest(paths.copy.output));
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
// Watch for changes to the src directory
|
|
||||||
var startServer = function (done) {
|
|
||||||
// Make sure this feature is activated before running
|
|
||||||
if (!settings.reload) return done();
|
|
||||||
|
|
||||||
// Initialize BrowserSync
|
|
||||||
browserSync.init({
|
|
||||||
server: {
|
|
||||||
baseDir: paths.reload
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Signal completion
|
|
||||||
done();
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
// Reload the browser when files change
|
|
||||||
var reloadBrowser = function (done) {
|
|
||||||
if (!settings.reload) return done();
|
|
||||||
browserSync.reload();
|
|
||||||
done();
|
|
||||||
};
|
|
||||||
|
|
||||||
// Watch for changes
|
|
||||||
var watchSource = function (done) {
|
|
||||||
watch(paths.input, series(exports.default, reloadBrowser));
|
|
||||||
done();
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Export Tasks
|
|
||||||
*/
|
|
||||||
// Default task
|
|
||||||
// gulp
|
|
||||||
exports.default = series(
|
|
||||||
cleanDist,
|
|
||||||
parallel(
|
|
||||||
buildStyles,
|
|
||||||
copyFiles
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
// Watch and reload
|
|
||||||
// gulp watch
|
|
||||||
exports.watch = series(
|
|
||||||
exports.default,
|
|
||||||
startServer,
|
|
||||||
watchSource
|
|
||||||
);
|
|
||||||
26
package.json
26
package.json
|
|
@ -3,8 +3,9 @@
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"description": "website for sp-magic.de",
|
"description": "website for sp-magic.de",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "gulp watch",
|
"minify-css": "uncss -n -H dist/ -o dist/css/main-*.css dist/index.html",
|
||||||
"build": "gulp"
|
"build": "eleventy && npm run minify-css",
|
||||||
|
"start": "eleventy --serve --watch"
|
||||||
},
|
},
|
||||||
"author": "samuel-p",
|
"author": "samuel-p",
|
||||||
"repository": {
|
"repository": {
|
||||||
|
|
@ -15,17 +16,18 @@
|
||||||
"browser-sync": "^3.0.2"
|
"browser-sync": "^3.0.2"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"autoprefixer": "10.4.19",
|
"@11ty/eleventy": "^2.0.1",
|
||||||
"cssnano": "6.1.2",
|
"@node-minify/core": "^8.0.6",
|
||||||
"del": "6.1.1",
|
"@node-minify/crass": "^8.0.6",
|
||||||
"gulp": "5.0.0",
|
"@node-minify/html-minifier": "^8.0.6",
|
||||||
"gulp-header": "2.0.9",
|
"@sardine/eleventy-plugin-tinyhtml": "^0.2.0",
|
||||||
"gulp-postcss": "10.0.0",
|
"eleventy-plugin-rev": "^2.0.0",
|
||||||
"gulp-rename": "2.0.0",
|
"eleventy-sass": "^2.2.4",
|
||||||
"gulp-sass": "5.1.0",
|
"glob": "^10.3.12",
|
||||||
"node-sass-tilde-importer": "^1.0.2",
|
"minify": "^11.1.1",
|
||||||
"postcss": "^8.4.38",
|
"postcss": "^8.4.38",
|
||||||
"sass": "^1.74.1"
|
"sass": "^1.72.0",
|
||||||
|
"uncss": "^0.17.3"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fortawesome/fontawesome-free": "^5.15.4",
|
"@fortawesome/fontawesome-free": "^5.15.4",
|
||||||
|
|
|
||||||
|
|
@ -29,8 +29,9 @@
|
||||||
<meta name="twitter:description" content="Samuel Philipp - Magician from Magdeburg">
|
<meta name="twitter:description" content="Samuel Philipp - Magician from Magdeburg">
|
||||||
<meta name="twitter:image" content="https://sp-magic.de/img/sp-magic.jpg">
|
<meta name="twitter:image" content="https://sp-magic.de/img/sp-magic.jpg">
|
||||||
<link rel="shortcut icon" href="img/samuel.png">
|
<link rel="shortcut icon" href="img/samuel.png">
|
||||||
<link rel="stylesheet" href="css/main.min.css">
|
<link rel="stylesheet" href="{{ '/css/main.css' | rev }}">
|
||||||
<script async defer data-website-id="dfb1ca1d-dc41-488a-8a95-f0e036bd3490" data-domains="sp-magic.de" src="https://umami.sp-codes.de/umami.js"></script>
|
<script async defer data-website-id="dfb1ca1d-dc41-488a-8a95-f0e036bd3490" data-domains="sp-magic.de"
|
||||||
|
src="https://umami.sp-codes.de/umami.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body class="d-flex flex-column">
|
<body class="d-flex flex-column">
|
||||||
<div class="container flex-column flex-grow p-3">
|
<div class="container flex-column flex-grow p-3">
|
||||||
|
|
@ -44,10 +45,10 @@
|
||||||
<div class="col-lg-8 col-md-10 col-12">
|
<div class="col-lg-8 col-md-10 col-12">
|
||||||
<h1 class="sp-codes">Willkommen bei sp-magic!</h1>
|
<h1 class="sp-codes">Willkommen bei sp-magic!</h1>
|
||||||
<p class="lead text-center mb-2">
|
<p class="lead text-center mb-2">
|
||||||
Schön dass du hergefunden hast. Mein Name ist Samuel Philipp und ich bin ein Zauberkünstler aus Magdeburg.
|
Schön, dass du hergefunden hast. Mein Name ist Samuel Philipp und ich bin ein Zauberkünstler aus
|
||||||
Bei meinen Auftritten präsentiere ich Tricks mit Spielkarten, Büchern, Nägeln, Feuer und vielen anderen
|
Magdeburg. Bei meinen Auftritten präsentiere ich Tricks mit Spielkarten, Büchern, Nägeln, Feuer und
|
||||||
Dingen. Auf dieser Seite findest du verschiedene Möglichkeiten mit mir in Kontakt zu treten.
|
vielen anderen Dingen. Auf dieser Seite findest du verschiedene Möglichkeiten mit mir in Kontakt zu
|
||||||
Ich freue mich auf deine Nachricht.
|
treten. Ich freue mich auf deine Nachricht.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -56,7 +57,7 @@
|
||||||
<div class="m-2"><a href="mailto:mail@sp-magic.de"><span
|
<div class="m-2"><a href="mailto:mail@sp-magic.de"><span
|
||||||
class="fas fa-fw fa-4x fa-envelope"></span></a></div>
|
class="fas fa-fw fa-4x fa-envelope"></span></a></div>
|
||||||
<div class="m-2"><a href="https://matrix.to/#/@samuel-p:matrix.sp-codes.de">
|
<div class="m-2"><a href="https://matrix.to/#/@samuel-p:matrix.sp-codes.de">
|
||||||
<img class="matrix-icon" src="../img/matrix.png" alt=""></a></div>
|
<img class="matrix-icon" src="img/matrix.png" alt=""></a></div>
|
||||||
<div class="m-2"><a rel="me" href="https://social.sp-codes.de/@samuel_p"><span
|
<div class="m-2"><a rel="me" href="https://social.sp-codes.de/@samuel_p"><span
|
||||||
class="fab fa-fw fa-4x fa-mastodon"></span></a></div>
|
class="fab fa-fw fa-4x fa-mastodon"></span></a></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -74,14 +75,14 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-sm-grow-1"></div>
|
<div class="flex-sm-grow-1"></div>
|
||||||
<div class="d-flex justify-content-sm-start flex-wrap">
|
<div class="d-flex justify-content-sm-start flex-wrap">
|
||||||
<div class="mr-3"><a href="https://sp-codes.de/de/imprint"><span
|
<div class="mr-3"><a href="https://sp-codes.de/de/imprint"><span
|
||||||
class="fas fa-info-circle mr-2"></span>Impressum</a></div>
|
class="fas fa-info-circle mr-2"></span>Impressum</a></div>
|
||||||
<div class="mr-3"><a href="https://sp-codes.de/de/privacy"><span
|
<div class="mr-3"><a href="https://sp-codes.de/de/privacy"><span
|
||||||
class="fas fa-user-secret mr-2"></span>Datenschutz</a></div>
|
class="fas fa-user-secret mr-2"></span>Datenschutz</a></div>
|
||||||
<div class="mr-3"><a target="_blank" href="https://git.sp-codes.de/samuel-p/sp-magic.de"><span
|
<div class="mr-3"><a target="_blank" href="https://git.sp-codes.de/samuel-p/sp-magic.de"><span
|
||||||
class="fas fa-code mr-2"></span>Code</a></div>
|
class="fas fa-code mr-2"></span>Code</a></div>
|
||||||
<div><a target="_blank" href="https://umami.sp-codes.de/share/eEm9eppL/sp-magic.de"><span
|
<div><a target="_blank" href="https://umami.sp-codes.de/share/eEm9eppL/sp-magic.de"><span
|
||||||
class="fas fa-chart-line mr-2"></span>Statistiken</a></div>
|
class="fas fa-chart-line mr-2"></span>Statistiken</a></div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,13 @@
|
||||||
@import "~bootstrap/scss/bootstrap-grid";
|
@import "bootstrap/scss/bootstrap-grid";
|
||||||
@import "~bootstrap/scss/bootstrap-reboot";
|
@import "bootstrap/scss/bootstrap-reboot";
|
||||||
@import "~bootstrap/scss/utilities/align";
|
@import "bootstrap/scss/utilities/align";
|
||||||
@import "~bootstrap/scss/utilities/spacing";
|
@import "bootstrap/scss/utilities/spacing";
|
||||||
@import "~bootstrap/scss/utilities/display";
|
@import "bootstrap/scss/utilities/display";
|
||||||
@import "~bootstrap/scss/utilities/text";
|
@import "bootstrap/scss/utilities/text";
|
||||||
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
|
@import "@fortawesome/fontawesome-free/scss/fontawesome";
|
||||||
@import "~@fortawesome/fontawesome-free/scss/solid";
|
@import "@fortawesome/fontawesome-free/scss/solid";
|
||||||
@import "~@fortawesome/fontawesome-free/scss/brands";
|
@import "@fortawesome/fontawesome-free/scss/brands";
|
||||||
@import "~@fortawesome/fontawesome-free/scss/regular";
|
@import "@fortawesome/fontawesome-free/scss/regular";
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background: url('../img/bg.png') no-repeat center center fixed;
|
background: url('../img/bg.png') no-repeat center center fixed;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue