samuel-p/sp-magic.de
samuel-p/sp-magic.de
1
0
Fork 0
Code Issues Pull requests 8 Releases Wiki Activity Actions

Merge pull request 'develop' (#115) from develop into main
All checks were successful
Build and Deploy Website / Build Website (push) Successful in 24s
Details
Build and Deploy Website / Deploy Dev Website (push) Has been skipped
Details
Build and Deploy Website / Deploy Website (push) Successful in 4s
Details

Browse source 
Reviewed-on: #115
This commit is contained in:
Samuel Philipp 2024-04-10 00:08:56 +00:00
commit bca96b1b4e
5 changed files with 86 additions and 223 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
.eleventy.js Normal file
View 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
View file

@ -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
View file

@ -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",

15
src/index.html
View file

@ -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>

20
src/scss/main.scss
View file

@ -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;