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",
|
||||
"description": "website for sp-magic.de",
|
||||
"scripts": {
|
||||
"start": "gulp watch",
|
||||
"build": "gulp"
|
||||
"minify-css": "uncss -n -H dist/ -o dist/css/main-*.css dist/index.html",
|
||||
"build": "eleventy && npm run minify-css",
|
||||
"start": "eleventy --serve --watch"
|
||||
},
|
||||
"author": "samuel-p",
|
||||
"repository": {
|
||||
|
|
@ -15,17 +16,18 @@
|
|||
"browser-sync": "^3.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "10.4.19",
|
||||
"cssnano": "6.1.2",
|
||||
"del": "6.1.1",
|
||||
"gulp": "5.0.0",
|
||||
"gulp-header": "2.0.9",
|
||||
"gulp-postcss": "10.0.0",
|
||||
"gulp-rename": "2.0.0",
|
||||
"gulp-sass": "5.1.0",
|
||||
"node-sass-tilde-importer": "^1.0.2",
|
||||
"@11ty/eleventy": "^2.0.1",
|
||||
"@node-minify/core": "^8.0.6",
|
||||
"@node-minify/crass": "^8.0.6",
|
||||
"@node-minify/html-minifier": "^8.0.6",
|
||||
"@sardine/eleventy-plugin-tinyhtml": "^0.2.0",
|
||||
"eleventy-plugin-rev": "^2.0.0",
|
||||
"eleventy-sass": "^2.2.4",
|
||||
"glob": "^10.3.12",
|
||||
"minify": "^11.1.1",
|
||||
"postcss": "^8.4.38",
|
||||
"sass": "^1.74.1"
|
||||
"sass": "^1.72.0",
|
||||
"uncss": "^0.17.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-free": "^5.15.4",
|
||||
|
|
|
|||
|
|
@ -29,8 +29,9 @@
|
|||
<meta name="twitter:description" content="Samuel Philipp - Magician from Magdeburg">
|
||||
<meta name="twitter:image" content="https://sp-magic.de/img/sp-magic.jpg">
|
||||
<link rel="shortcut icon" href="img/samuel.png">
|
||||
<link rel="stylesheet" href="css/main.min.css">
|
||||
<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>
|
||||
<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>
|
||||
</head>
|
||||
<body class="d-flex flex-column">
|
||||
<div class="container flex-column flex-grow p-3">
|
||||
|
|
@ -44,10 +45,10 @@
|
|||
<div class="col-lg-8 col-md-10 col-12">
|
||||
<h1 class="sp-codes">Willkommen bei sp-magic!</h1>
|
||||
<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.
|
||||
Bei meinen Auftritten präsentiere ich Tricks mit Spielkarten, Büchern, Nägeln, Feuer und vielen anderen
|
||||
Dingen. Auf dieser Seite findest du verschiedene Möglichkeiten mit mir in Kontakt zu treten.
|
||||
Ich freue mich auf deine Nachricht.
|
||||
Schön, dass du hergefunden hast. Mein Name ist Samuel Philipp und ich bin ein Zauberkünstler aus
|
||||
Magdeburg. Bei meinen Auftritten präsentiere ich Tricks mit Spielkarten, Büchern, Nägeln, Feuer und
|
||||
vielen anderen Dingen. Auf dieser Seite findest du verschiedene Möglichkeiten mit mir in Kontakt zu
|
||||
treten. Ich freue mich auf deine Nachricht.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -56,7 +57,7 @@
|
|||
<div class="m-2"><a href="mailto:mail@sp-magic.de"><span
|
||||
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">
|
||||
<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
|
||||
class="fab fa-fw fa-4x fa-mastodon"></span></a></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
@import "~bootstrap/scss/bootstrap-grid";
|
||||
@import "~bootstrap/scss/bootstrap-reboot";
|
||||
@import "~bootstrap/scss/utilities/align";
|
||||
@import "~bootstrap/scss/utilities/spacing";
|
||||
@import "~bootstrap/scss/utilities/display";
|
||||
@import "~bootstrap/scss/utilities/text";
|
||||
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
|
||||
@import "~@fortawesome/fontawesome-free/scss/solid";
|
||||
@import "~@fortawesome/fontawesome-free/scss/brands";
|
||||
@import "~@fortawesome/fontawesome-free/scss/regular";
|
||||
@import "bootstrap/scss/bootstrap-grid";
|
||||
@import "bootstrap/scss/bootstrap-reboot";
|
||||
@import "bootstrap/scss/utilities/align";
|
||||
@import "bootstrap/scss/utilities/spacing";
|
||||
@import "bootstrap/scss/utilities/display";
|
||||
@import "bootstrap/scss/utilities/text";
|
||||
@import "@fortawesome/fontawesome-free/scss/fontawesome";
|
||||
@import "@fortawesome/fontawesome-free/scss/solid";
|
||||
@import "@fortawesome/fontawesome-free/scss/brands";
|
||||
@import "@fortawesome/fontawesome-free/scss/regular";
|
||||
|
||||
body {
|
||||
background: url('../img/bg.png') no-repeat center center fixed;
|
||||
|
|
|
|||
Loading…
Reference in a new issue