Browse Source

updated project to build with gulpjs

master
Samuel Philipp 1 month ago
parent
commit
d4f8e8c85f
22 changed files with 8432 additions and 154 deletions
  1. +5
    -1
      .gitignore
  2. +18
    -1
      .gitlab-ci.yml
  3. +0
    -105
      css/app.css
  4. +0
    -5
      css/style-legal.css
  5. +254
    -0
      gulpfile.js
  6. +7992
    -0
      package-lock.json
  7. +36
    -0
      package.json
  8. +0
    -0
      src/.htaccess
  9. +0
    -0
      src/font/Pacifico-Regular.ttf
  10. +0
    -0
      src/font/SourceCodePro-Regular.ttf
  11. +0
    -0
      src/font/minotaur.ttf
  12. +0
    -0
      src/img/bg.png
  13. +0
    -0
      src/img/samuel.png
  14. +0
    -0
      src/img/sp-codes.png
  15. +0
    -0
      src/img/sp-magic.png
  16. +0
    -0
      src/img/sp-magic_overlay.png
  17. +4
    -7
      src/imprint.html
  18. +5
    -28
      src/index.html
  19. +0
    -0
      src/js/main.js
  20. +4
    -7
      src/privacy.html
  21. +114
    -0
      src/scss/main.scss
  22. +0
    -0
      test

+ 5
- 1
.gitignore View File

@@ -1,2 +1,6 @@
.idea
*.iml
*.iml

dist/

node_modules/

+ 18
- 1
.gitlab-ci.yml View File

@@ -2,10 +2,27 @@ stages:
- build
- deploy

build:
image: node
stage: build
dependencies: []
before_script:
- rm package-lock.json
script:
- npm run build
cache:
paths:
- node_modules/
artifacts:
paths:
- dist/

deploy:
image: alpine
stage: deploy
dependencies:
- build
before_script:
- apk add lftp
- which lftp || ( apk --update add lftp )
script:
- lftp -e "mirror -R ./ samuel-philipp.de/; bye" -u $FTP_USERNAME,$FTP_PASSWORD $FTP_HOST

+ 0
- 105
css/app.css View File

@@ -1,105 +0,0 @@
@font-face {
font-family: 'Minotaur';
src: local('Minotaur Phatte'), url(../font/minotaur.ttf) format('truetype');
}

body {
color: #fff;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
padding: 0;
margin: 0;
}

.image {
display: block;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
position: fixed;
top: -25px;
left: -25px;
width: calc(100% + 50px);
height: calc(100% + 50px);
z-index: 0;
}

#developer {
background-image: url('../img/sp-codes.png');
}

#magician {
background-image: url('../img/sp-magic_overlay.png');
}

.headers {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
/*justify-content: stretch;*/
align-items: stretch;
/*align-content: stretch;*/
text-align: center;
}

.headers .magician {
color: #000000;
font-family: "Minotaur", cursive;
font-weight: normal;
font-size: 5rem;
text-shadow: 0 0 1rem #ffffff;
}

.headers .developer {
color: #ffffff;
font-family: "Minotaur", monospace;
font-weight: bold;
font-size: 5rem;
text-shadow: 0 0 1rem #000000;
}

.headers a {
text-decoration: none;
}

.headers .codes {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
}

.headers .magic {
flex-grow: 0.6;
display: flex;
align-items: center;
justify-content: center;
}

.headers .padding {
flex-grow: 1.3;
}

.menu {
position: fixed;
right: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.6);
border-top: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-top-left-radius: 8px;
}

.menu a {
color: #000000;
}

.menu a:hover {
color: #222222;
}

+ 0
- 5
css/style-legal.css View File

@@ -1,5 +0,0 @@
body {
background-image: url("../img/bg.png");
padding: 2%;
color: #fff;
}

+ 254
- 0
gulpfile.js View File

@@ -0,0 +1,254 @@
/**
* Settings
* Turn on/off build features
*/
var settings = {
clean: true,
scripts: true,
styles: true,
copy: true,
reload: true
};


/**
* Paths to project folders
*/
var paths = {
input: 'src/',
output: 'dist/',
scripts: {
input: 'src/js/*.js',
output: 'dist/js/'
},
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 flatmap = require('gulp-flatmap');
var lazypipe = require('lazypipe');
var rename = require('gulp-rename');
var header = require('gulp-header');
var package = require('./package.json');

// Scripts
var concat = require('gulp-concat');
var uglify = require('gulp-terser');
var optimizejs = require('gulp-optimize-js');

// Styles
var sass = require('gulp-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();

};

// Repeated JavaScript tasks
var jsTasks = lazypipe()
.pipe(header, banner.main, {package: package})
.pipe(optimizejs)
.pipe(dest, paths.scripts.output)
.pipe(rename, {suffix: '.min'})
.pipe(uglify)
.pipe(optimizejs)
.pipe(header, banner.main, {package: package})
.pipe(dest, paths.scripts.output);

// minify, and concatenate scripts
var buildScripts = function (done) {
// Make sure this feature is activated before running
if (!settings.scripts) return done();

// Run tasks on script files
return src(paths.scripts.input)
.pipe(flatmap(function(stream, file) {

// If the file is a directory
if (file.isDirectory()) {

// Setup a suffix variable
var suffix = '';

// If separate polyfill files enabled
if (settings.polyfills) {

// Update the suffix
suffix = '.polyfills';

// Grab files that aren't polyfills, concatenate them, and process them
src([file.path + '/*.js', '!' + file.path + '/*' + paths.scripts.polyfills])
.pipe(concat(file.relative + '.js'))
.pipe(jsTasks());

}

// Grab all files and concatenate them
// If separate polyfills enabled, this will have .polyfills in the filename
src(file.path + '/*.js')
.pipe(concat(file.relative + suffix + '.js'))
.pipe(jsTasks());

return stream;

}

// Otherwise, process the file
return stream.pipe(jsTasks());

}));

};

// 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(
buildScripts,
buildStyles,
copyFiles
)
);

// Watch and reload
// gulp watch
exports.watch = series(
exports.default,
startServer,
watchSource
);

+ 7992
- 0
package-lock.json
File diff suppressed because it is too large
View File


+ 36
- 0
package.json View File

@@ -0,0 +1,36 @@
{
"name": "samuel-philipp.de",
"version": "1.0.0",
"description": "website for samuel-philipp.de",
"scripts": {
"start": "gulp watch",
"build": "gulp"
},
"author": "samuel-p",
"repository": {
"type": "git",
"url": "https://gitlab.com/samuel-p/samuel-philipp.de"
},
"devDependencies": {
"gulp": "4.0.2",
"del": "3.0.0",
"lazypipe": "1.0.1",
"gulp-flatmap": "1.0.2",
"gulp-header": "2.0.5",
"gulp-rename": "1.4.0",
"gulp-concat": "2.6.1",
"gulp-terser": "1.1.7",
"gulp-optimize-js": "1.1.0",
"gulp-sass": "4.0.2",
"gulp-postcss": "8.0.0",
"cssnano": "4.1.10",
"autoprefixer": "9.6.1",
"browser-sync": "2.26.7",
"node-sass-tilde-importer": "^1.0.2"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^5.11.2",
"bootstrap": "^4.3.1",
"jquery": "^3.4.1"
}
}

.htaccess → src/.htaccess View File


font/Pacifico-Regular.ttf → src/font/Pacifico-Regular.ttf View File


font/SourceCodePro-Regular.ttf → src/font/SourceCodePro-Regular.ttf View File


font/minotaur.ttf → src/font/minotaur.ttf View File


img/bg.png → src/img/bg.png View File


img/samuel.png → src/img/samuel.png View File


img/sp-codes.png → src/img/sp-codes.png View File


img/sp-magic.png → src/img/sp-magic.png View File


img/sp-magic_overlay.png → src/img/sp-magic_overlay.png View File


imprint.html → src/imprint.html View File

@@ -4,14 +4,11 @@
<meta charset="UTF-8">
<title>Samuel Philipp - Impressum</title>
<link rel="shortcut icon" href="img/samuel.png">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link rel="stylesheet" href="css/style-legal.css" type="text/css" media="screen">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="css/main.min.css">
</head>
<body>
<body class="legal">
<h1>Impressum</h1>

<h2>Angaben gem&auml;&szlig; &sect; 5 TMG</h2>

index.html → src/index.html View File

@@ -4,33 +4,10 @@
<title>Samuel Philipp</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="shortcut icon" href="img/samuel.png">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link rel="stylesheet" href="css/app.css" type="text/css" media="screen"/>

<!-- Matomo -->
<script type="text/javascript">
var _paq = _paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function () {
var u = "//matomo.sp-codes.de/";
_paq.push(['setTrackerUrl', u + 'piwik.php']);
_paq.push(['setSiteId', '1']);
var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
g.type = 'text/javascript';
g.async = true;
g.defer = true;
g.src = u + 'piwik.js';
s.parentNode.insertBefore(g, s);
})();
</script>
<noscript><p><img src="//matomo.sp-codes.de/piwik.php?idsite=1&rec=1" style="border:0;" alt=""/></p></noscript>
<!-- End Matomo Code -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="author" content="Samuel Philipp">
<link rel="stylesheet" href="css/main.min.css">
</head>
<body>
<div id="developer" class="image"></div>
@@ -61,6 +38,6 @@
<div><a href="privacy.html"><span
class="fas fa-user-secret mr-2"></span>Privacy</a></div>
</div>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
</body>
</html>

js/app.js → src/js/main.js View File


privacy.html → src/privacy.html View File

@@ -4,14 +4,11 @@
<meta charset="UTF-8">
<title>Samuel Philipp - Datenschutzerklärung</title>
<link rel="shortcut icon" href="img/samuel.png">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link rel="stylesheet" href="css/style-legal.css" type="text/css" media="screen">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="css/main.min.css">
</head>
<body>
<body class="legal">
<h2>Datenschutzerklärung</h2>
<h3 id="dsg-general-intro"></h3>
<p>Diese Datenschutzerklärung klärt Sie über die Art, den Umfang und Zweck der Verarbeitung von personenbezogenen Daten

+ 114
- 0
src/scss/main.scss View File

@@ -0,0 +1,114 @@
@import "~bootstrap/scss/bootstrap-grid";
@import "~bootstrap/scss/bootstrap-reboot";
@import "~bootstrap/scss/utilities/align";
@import "~bootstrap/scss/utilities/spacing";
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/brands";
@import "~@fortawesome/fontawesome-free/scss/regular";

@font-face {
font-family: 'Minotaur';
src: local('Minotaur Phatte'), url(../font/minotaur.ttf) format('truetype');
}

body {
color: #fff;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
padding: 0;
margin: 0;

&.legal {
background-image: url("../img/bg.png");
padding: 2%;
}
}

.image {
display: block;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
position: fixed;
top: -25px;
left: -25px;
width: calc(100% + 50px);
height: calc(100% + 50px);
z-index: 0;
}

#developer {
background-image: url('../img/sp-codes.png');
}

#magician {
background-image: url('../img/sp-magic_overlay.png');
}

.headers {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
text-align: center;
}

.headers .magician {
color: #000000;
font-family: "Minotaur", cursive;
font-weight: normal;
font-size: 5rem;
text-shadow: 0 0 1rem #ffffff;
}

.headers .developer {
color: #ffffff;
font-family: "Minotaur", monospace;
font-weight: bold;
font-size: 5rem;
text-shadow: 0 0 1rem #000000;
}

.headers a {
text-decoration: none;
}

.headers .codes {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
}

.headers .magic {
flex-grow: 0.6;
display: flex;
align-items: center;
justify-content: center;
}

.headers .padding {
flex-grow: 1.3;
}

.menu {
position: fixed;
right: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.6);
border-top: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-top-left-radius: 8px;
}

.menu a {
color: #000000;
}

.menu a:hover {
color: #222222;
}

+ 0
- 0
test View File


Loading…
Cancel
Save