diff --git a/.eleventy.js b/.eleventy.js new file mode 100644 index 0000000..ce3c1aa --- /dev/null +++ b/.eleventy.js @@ -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` + } + }; +}; diff --git a/gulpfile.js b/gulpfile.js deleted file mode 100644 index 35182ab..0000000 --- a/gulpfile.js +++ /dev/null @@ -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 -); \ No newline at end of file diff --git a/package.json b/package.json index a2f660d..caf1346 100644 --- a/package.json +++ b/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", diff --git a/src/index.html b/src/index.html index abdbe18..7f56bda 100644 --- a/src/index.html +++ b/src/index.html @@ -29,8 +29,9 @@ - - + +
@@ -44,10 +45,10 @@

Willkommen bei sp-magic!

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

@@ -56,7 +57,7 @@
-
+
@@ -74,14 +75,14 @@
-
Impressum
-
Datenschutz
-
Code
-
Statistiken
-
+
Impressum
+
Datenschutz
+
Code
+
Statistiken
+ diff --git a/src/scss/main.scss b/src/scss/main.scss index ed15128..8d957f6 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -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;