@profitlich/template-toolkit 1.0.0

package/scripts/deploy.js

@@ -0,0 +1,112 @@
+import ftp from 'basic-ftp';
+import dotenv from 'dotenv';
+import { glob } from 'glob';
+import path from 'path';
+import readline from 'readline';
+import cliProgress from 'cli-progress';
+
+// Helper for making sure the upload progress bars go to 100%
+const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
+
+export async function runDeploy(mode, uploadTasks) {
+    const client = new ftp.Client();
+    client.ftp.verbose = false;
+    let activeProgressBar = null;
+
+    try {
+        const modeUpper = mode.toUpperCase();
+        console.log(`🚀 Starting deployment for: ${modeUpper}`);
+
+        await client.access({
+            host: process.env[`FTP_HOST_${modeUpper}`],
+            user: process.env[`FTP_USER_${modeUpper}`],
+            password: process.env[`FTP_PASSWORD_${modeUpper}`],
+            secure: true
+        });
+
+        for (const task of uploadTasks) {
+            console.log(`\nProcessing Task: ${task.name}`);
+
+            const files = await glob(task.localPattern, {
+                nodir: true,
+                dot: true,
+                ignore: task.ignore
+            });
+
+            if (files.length === 0) {
+                console.log('No files found for this task.');
+                continue;
+            }
+
+            const newBar = new cliProgress.SingleBar({
+                format: '  Upload |{bar}| {percentage}%   {value}/{total} files   {duration_formatted}',
+                barCompleteChar: '█',
+                barIncompleteChar: '░',
+                hideCursor: true
+            });
+
+            activeProgressBar = newBar;
+            activeProgressBar.start(files.length, 0);
+
+            for (const file of files) {
+                const relativeFile = path.relative(task.localBase, file);
+                const remotePath = path.join(task.remoteDir, relativeFile).replace(/\\/g, '/');
+
+                await client.ensureDir(path.dirname(remotePath));
+                await client.uploadFrom(file, remotePath);
+
+                activeProgressBar.increment();
+            }
+
+            activeProgressBar.stop();
+            activeProgressBar = null;
+            await delay(50);
+        }
+
+        console.log('\n✅ Deployment completed successfully!');
+
+    } catch (err) {
+        if (activeProgressBar) {
+            activeProgressBar.stop();
+        }
+        console.error('Deployment failed:', err);
+    } finally {
+        client.close();
+    }
+}
+
+/**
+ * Run the deploy script.
+ * @param {Array} uploadTasks - array of { name, localPattern, localBase, remoteDir, ignore? }
+ */
+export function run(uploadTasks) {
+    const mode = process.argv[2];
+    if (!mode || (mode !== 'staging' && mode !== 'production')) {
+        console.error('Error: a mode needs to be given, either "staging" or "production"');
+        process.exit(1);
+    }
+
+    dotenv.config();
+
+    // In production mode prompt for confirmation
+    if (mode === 'production') {
+        const rl = readline.createInterface({
+            input: process.stdin,
+            output: process.stdout
+        });
+
+        rl.question('🔴 Do you really want to deploy to PRODUCTION? Type "yes" for confirmation: ', (answer) => {
+            rl.close();
+            if (answer.toLowerCase() === 'yes') {
+                console.log('Confirmed. Starting upload...');
+                runDeploy(mode, uploadTasks);
+            } else {
+                console.log('❌ Deployment aborted.');
+                process.exit(0);
+            }
+        });
+    // In all other modes run deploy without prompt
+    } else {
+        runDeploy(mode, uploadTasks);
+    }
+}

package/scss/core/hamburger.scss

@@ -0,0 +1,153 @@
+@mixin hamburger($hamburger-breite, $hamburger-hoehe, $hamburger-line-width, $hamburger-color, $hamburger-color-active) {
+
+    // Settings
+    // ==================================================
+    $hamburger-padding-x           : 15px !default;
+    $hamburger-padding-y           : 15px !default;
+    $hamburger-line-gap            : calc(($hamburger-hoehe - 3 * $hamburger-line-width) / 2) !default;
+    $hamburger-color               : #000 !default;
+    $hamburger-layer-border-radius : 0 !default;
+    $hamburger-hover-opacity       : 1 !default;
+    $hamburger-active-layer-color  : $hamburger-color-active !default;
+    $hamburger-active-hover-opacity: $hamburger-hover-opacity !default;
+    $hamburger-animation-timing: 0.195s;
+    $hamburger-compression-speed: 0.12s;
+    $hamburger-turn-speed: $hamburger-animation-timing - $hamburger-compression-speed;
+
+    // To use CSS filters as the hover effect instead of opacity,
+    // set $hamburger-hover-use-filter as true and
+    // change the value of $hamburger-hover-filter accordingly.
+    $hamburger-hover-use-filter   : false !default;
+    $hamburger-hover-filter       : opacity(50%) !default;
+    $hamburger-active-hover-filter: $hamburger-hover-filter !default;
+
+
+    // padding: $hamburger-padding-y $hamburger-padding-x;
+
+
+    &:hover {
+        @if $hamburger-hover-use-filter==true {
+            filter: $hamburger-hover-filter;
+        }
+
+        @else {
+            opacity: $hamburger-hover-opacity;
+        }
+    }
+
+    body[data-menu-active='true'] & {
+        &:hover {
+            @if $hamburger-hover-use-filter==true {
+                filter: $hamburger-active-hover-filter;
+            }
+
+            @else {
+                opacity: $hamburger-active-hover-opacity;
+            }
+        }
+
+        .hamburger-inner,
+        .hamburger-inner::before,
+        .hamburger-inner::after {
+            background-color: $hamburger-active-layer-color;
+            transition: 0s $hamburger-compression-speed linear;
+        }
+    }
+
+    .hamburger-box {
+        width: $hamburger-breite;
+        height: calc($hamburger-line-width * 3 + $hamburger-line-gap * 2);
+        display: inline-block;
+        position: relative;
+    }
+
+    .hamburger-inner {
+        display: block;
+        top: 50%;
+        margin-top: calc($hamburger-line-width / -2);
+
+        &,
+        &::before,
+        &::after {
+            width: $hamburger-breite;
+            height: $hamburger-line-width;
+            background-color: $hamburger-color;
+            border-radius: $hamburger-layer-border-radius;
+            position: absolute;
+            transition-property: transform;
+            transition-duration: 0.15s;
+            transition-timing-function: ease;
+        }
+
+        &::before,
+        &::after {
+            content: "";
+            display: block;
+        }
+
+        &::before {
+            top: calc(($hamburger-line-gap + $hamburger-line-width) * -1);
+        }
+
+        &::after {
+            bottom: calc(($hamburger-line-gap + $hamburger-line-width) * -1);
+        }
+    }
+
+
+
+    // Aus Basis
+    display: block;
+    cursor: pointer;
+
+    transition-property: opacity, filter;
+    transition-duration: 0.15s;
+    transition-timing-function: linear;
+
+    // Normalize (<button>)
+    font: inherit;
+    color: inherit;
+    text-transform: none;
+    background-color: transparent;
+    border: 0;
+    margin: 0;
+    overflow: visible;
+    line-height: 0;
+
+    .hamburger-inner {
+        transition-duration: $hamburger-turn-speed;
+        transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+
+        &::before {
+            transition: top $hamburger-turn-speed $hamburger-compression-speed ease,
+                opacity $hamburger-turn-speed ease;
+        }
+
+        &::after {
+            transition: bottom $hamburger-turn-speed $hamburger-compression-speed ease,
+                transform $hamburger-turn-speed cubic-bezier(0.55, 0.055, 0.675, 0.19);
+        }
+    }
+
+    body[data-menu-active='true'] & {
+        .hamburger-inner {
+            transform: rotate(45deg);
+            transition-delay: $hamburger-compression-speed;
+            transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+
+            &::before {
+                top: 0;
+                opacity: 0;
+                transition: top $hamburger-turn-speed ease,
+                    opacity $hamburger-turn-speed $hamburger-compression-speed ease;
+            }
+
+            &::after {
+                bottom: 0;
+                transform: rotate(-90deg);
+                transition: bottom $hamburger-turn-speed ease,
+                    transform $hamburger-turn-speed $hamburger-compression-speed cubic-bezier(0.215, 0.61, 0.355, 1);
+            }
+        }
+    }
+}

package/scss/core/layout.scss

@@ -0,0 +1,238 @@
+@use "config";
+@use "sass:list";
+@use "sass:map";
+@use "sass:meta";
+@use "sass:math";
+
+// Media queries get the breakpoints
+// Breakpints get the layouts
+// Depending on the project, only a part of the layout names are used,
+// so there needs to be an intervention in the breakpoints to deliver a number even if a layout is not present.
+// Example: There are only the layouts smartphone, tablet and desktop.
+// Then tabletPortrait must deliver the value of tablet
+
+$tabletPortrait: null;
+@if map.get(config.$layouts, tabletPortrait) {
+    $tabletPortrait: tabletPortrait;
+// no tabletPortrait size is defined
+} @else {
+    @if map.get(config.$layouts, tablet) {
+        $tabletPortrait: tablet;
+    // neither tablet size is defined
+    } @else {
+        $tabletPortrait: desktop;
+    }
+}
+
+$bigFrom: null;
+@if map.get(config.$layouts, big) {
+    $bigFrom: big;
+} @else {
+    $bigFrom: 999999px;
+}
+
+$breakpointsVariables: (
+    smartphoneTo:       map.get(config.$breakpoints, $tabletPortrait) - 1px,
+    tabletPortraitFrom: map.get(config.$breakpoints, $tabletPortrait) + 0px,
+    tabletPortraitTo:   map.get(config.$breakpoints, tabletLandscape) - 1px,
+    tabletLandscapeFrom:map.get(config.$breakpoints, tabletLandscape) + 0px,
+    tabletLandscapeTo:  map.get(config.$breakpoints, desktop) - 1px,
+    desktopFrom:        map.get(config.$breakpoints, desktop) + 0px,
+    desktopTo:          map.get(config.$breakpoints, big) - 1px,
+    bigFrom:            map.get(config.$breakpoints, big) + 0px,
+);
+
+// Gibt es kein Layout big, soll die media query desktop keine max-width haben
+$mediaqueryDesktop: null;
+@if map.get(config.$layouts, big) {
+    $mediaqueryDesktop: (min-width: map.get($breakpointsVariables, desktopFrom), max-width: map.get($breakpointsVariables, desktopTo));
+} @else {
+    $mediaqueryDesktop: (min-width: map.get($breakpointsVariables, desktopFrom));
+}
+
+$mediaqueries: (
+	smartphone:         (max-width: map.get($breakpointsVariables, smartphoneTo)),
+	tablet:             (min-width: map.get($breakpointsVariables, tabletPortraitFrom), max-width: map.get($breakpointsVariables, tabletLandscapeTo)),
+	tabletFrom:         (min-width: map.get($breakpointsVariables, tabletPortraitFrom)),
+    tabletTo:           (max-width: map.get($breakpointsVariables, tabletLandscapeTo)),
+	tabletPortraitFrom: (min-width: map.get($breakpointsVariables, tabletPortraitFrom)),
+	tabletPortrait:     (min-width: map.get($breakpointsVariables, tabletPortraitFrom), max-width: map.get($breakpointsVariables, tabletPortraitTo)),
+	tabletPortraitTo:   (max-width: map.get($breakpointsVariables, tabletPortraitTo)),
+	tabletLandscapeFrom:(min-width: map.get($breakpointsVariables, tabletLandscapeFrom)),
+	tabletLandscape:    (min-width: map.get($breakpointsVariables, tabletLandscapeFrom), max-width: map.get($breakpointsVariables, tabletLandscapeTo)),
+	tabletLandscapeTo:  (max-width: map.get($breakpointsVariables, tabletLandscapeTo)),
+	desktopFrom:        (min-width: map.get($breakpointsVariables, desktopFrom)),
+	desktop:            $mediaqueryDesktop,
+	desktopTo:          (max-width: map.get($breakpointsVariables, desktopTo)),
+	big:                (min-width: map.get($breakpointsVariables, bigFrom)),
+);
+
+
+// Font
+@mixin font($layout, $fontSize, $lineHeight, $bold:'false') {
+
+    font-size: size($layout, $fontSize);
+    line-height: size($layout, $lineHeight);
+
+    @if ($bold != 'false') {
+        font-weight: $bold;
+    }
+
+}
+
+
+// columns
+// Calculates the width (as a fraction of 100%)
+// Per default the function assumes that the given space does not contain column gaps;
+// with the variable $columnGapsAddedBasis they can be specified.
+// $columnGapsAddedBasis is to be used when the space to be calculated contains additional column gaps outside the $columnsBasis.
+// $columnGapsAdditional is to be used when additionally to the $columns column gaps are to be added (e.g left and/or right).
+// $shift is for adding a value to the result, for example a margin
+// $inverse is for calculating the width as a negative number, for example for a negative shift in a stage system
+@function columns($layout, $columns, $columnsBasis, $columnGapsAddedBasis:0, $columnGapsAdditional:0, $margin:0, $shift:0, $invers:false) {
+    $columnGap: size($layout, map.get(config.$gutter, $layout) );
+    $margin: size($layout, $margin);
+    $shift: size($layout, $shift);
+    @if ( $invers == false ) {
+        $invers: 1;
+    } @else {
+        $invers: -1;
+    }
+
+    // available space
+    // minus column gaps within the space
+    // equals space for content
+    // divided by number of columns in space
+    // equals width of each column
+    // times number of desired columns
+    // equals width of desired columns
+    // plus column gaps between desired columns
+    // equals width of desired columns including gaps
+    // plus additional column gaps
+    @return calc(
+        (
+            (
+                // available space
+                100%
+                // all column gaps in the given space
+                - $margin - $columnGap * ($columnsBasis + $columnGapsAddedBasis - 1)
+            )
+            // number of columns in the given space
+            / $columnsBasis
+            // desired columns
+            * ($columns * $invers)
+            // columns gaps between desired columns plus additional column gaps
+            // inverse to get a negative value
+            + ($columnGap * ($columns - 1 + $columnGapsAdditional) * $invers)
+            // Shift
+            + ($shift * $invers)
+        )
+    );
+}
+
+
+
+// Size
+// converts a number to a size in px or vw
+// depending on the unit set for the layout
+// accepts single value or a list of values
+@function size($layout, $numbers) {
+    // Check whether second argument is a number or a list
+    @if (meta.type-of($numbers) == 'list') {
+        $result-list: (); // Empty list to store results
+
+        // Iterate over each element in the list
+        @each $number in $numbers {
+            // Test if the current element is a number
+            @if (meta.type-of($number) == 'number') {
+                // add calculated value to the result list
+                $result-list: list.append($result-list, _calculate-single-size($number, $layout));
+            } @else {
+                // Error if the current element is not a number
+                @error "Listenelement '#{$number}' übergeben an size() ist keine Zahl. Alle Elemente müssen Zahlen sein.";
+            }
+        }
+        @return $result-list; // Return the list of calculated sizes
+    } @else if (meta.type-of($numbers) == 'number') {
+        // If second argument is a single number, calculate and return the size
+        @return _calculate-single-size($numbers, $layout);
+    } @else {
+        // Error if the second argument is neither a number nor a list
+        @error "Das zweite Argument der Funktion size() muss eine Zahl oder eine Liste von Zahlen sein. Empfangen: #{type-of($numbers)} '#{$numbers}'.";
+    }
+}
+
+// Round a number to specified decimal places
+@function _decimal-round($number, $digits: 0) {
+    $n: math.pow(10, $digits);
+    @return math.div(math.round($number * $n), $n);
+}
+
+// Helper function to calculate a single size value (px or vw)
+// This function is used by the main size() function
+@function _calculate-single-size($number, $layout) {
+    // Get the width and unit type from the config
+    $width: map.get(config.$layouts, $layout);
+    $unit-type: map.get(config.$units, $layout);
+
+    // Error handling for missing width or unit type
+    @if ($width == null) {
+        @error "Layout '#{$layout}' ist nicht in 'config.$layouts' definiert.";
+    }
+    @if ($unit-type == null) {
+        @error "Der Einheitentyp für Layout '#{$layout}' ist nicht in 'config.$units' definiert.";
+    }
+
+
+    @if ($unit-type == 'px') {
+        @return $number * 1px;
+    } @else if ($unit-type == 'vw') {
+        @return _decimal-round(math.div($number, $width) * 100, 2) * 1vw;
+    } @else {
+        @error "Nicht unterstützter Einheitstyp '#{$unit-type}' für Layout '#{$layout}'. Nur 'px' oder 'vw' werden unterstützt.";
+    }
+}
+
+
+// Distance
+@mixin marginPadding($layout, $mode, $position, $top: 0, $right: 0, $bottom: 0, $left: 0) {
+
+    // @include mode($layout, padding/margin, all/top/right/bottom/left, 0, 0, 0, 0)
+
+    @if ( map.get(config.$units, $layout) == 'px' ) {
+        $top: $top + px;
+        $right: $right + px;
+        $bottom: $bottom + px;
+        $left: $left + px;
+    } @else {
+
+        @if meta.type-of($top) == 'number'{
+            $top: size($layout, $top);
+        }
+        @if meta.type-of($right) == 'number'{
+            $right: size($layout, $right);
+        }
+        @if meta.type-of($bottom) == 'number'{
+            $bottom: size($layout, $bottom);
+        }
+        @if meta.type-of($left) == 'number'{
+            $left: size($layout, $left);
+        }
+    }
+
+    @if $position == all {
+        #{$mode}: $top $right $bottom $left;
+    }
+    @if $position == top {
+        #{$mode}-top: $top;
+    }
+    @if $position == right {
+        #{$mode}-right: $top;
+    }
+    @if $position == bottom {
+        #{$mode}-bottom: $top;
+    }
+    @if $position == left {
+        #{$mode}-left: $top;
+    }
+}

package/scss/core/mediaqueries.scss

@@ -0,0 +1,42 @@
+@use "layout";
+
+@use "sass:map";
+@use "sass:list";
+
+// Zusammenlegen aller Meda Queries in eine
+// https://www.sitepoint.com/sass-mixin-media-merging
+
+@mixin mediaquery($mediaquery) {
+    // Hole die map $mediaquery aus der map $mediaqueries
+    $queries: map.get(layout.$mediaqueries, $mediaquery);
+
+    // Wenn es keine $mediaquery in der map gibt, gebe einen Fehler aus
+    @if not $queries {
+        @error "No value could be retrieved from `#{$mediaquery}`. "
+        + "Please make sure it is defined in `$mediaqueries` map.";
+    }
+
+    // Include the media mixin with $queries
+    @include media($queries) {
+        @content($mediaquery);
+    }
+}
+
+@mixin media($queries) {
+    // Erst wenn alle mediaqueries geschachtelt geschrieben sind,
+    // wird der @content ausgegeben
+    @if list.length($queries) == 0 {
+        @content;
+    } @else {
+        $first-key: list.nth(map.keys($queries), 1);
+
+        // Schreibt nur die mediaquery, nicht den Inhalt
+        @media ($first-key: map.get($queries, $first-key)) {
+            $queries: map.remove($queries, $first-key);
+
+            @include media($queries) {
+                @content;
+            }
+        }
+    }
+}

package/scss/forward.scss

@@ -0,0 +1,4 @@
+@forward "config";
+@forward "core/mediaqueries";
+@forward "core/layout";
+@forward "core/hamburger";

package/utils/BodyScrolled.js

@@ -0,0 +1,31 @@
+/**
+ * after scroll set body attribute data-scrolled to true
+ */
+
+export class BodyScrolled {
+    static #instance;
+
+    constructor() {
+        document.addEventListener('scroll', function setScrolled() {
+            document.body.setAttribute('data-body-scrolled', 'true');
+            this.removeEventListener('scroll', setScrolled);
+
+            // create event
+            let event = new CustomEvent('eventBodyScrolled', {
+                detail: {
+                    scrolled: true
+                }
+            });
+            // dispatch the event
+            window.dispatchEvent(event);
+        });
+
+    }
+
+    static getInstance() {
+        if (!BodyScrolled.#instance) {
+            BodyScrolled.#instance = new BodyScrolled();
+        }
+        return BodyScrolled.#instance;
+    }
+}

package/utils/MediaQueries.js

@@ -0,0 +1,56 @@
+/**Media queries
+ * https://kinsta.com/blog/javamediaqueryipt-media-query/
+ * option 3 on the linked page
+ */
+
+export class MediaQueries {
+    static #instance;
+    layout = 'desktop';
+    #breakpoints;
+
+    constructor(breakpoints) {
+        this.#breakpoints = breakpoints;
+        this.layout = 'desktop';
+        this.changeLayout();
+        this.#matchmedia();
+    }
+
+    static getInstance(breakpoints) {
+        if (!MediaQueries.#instance) {
+            if (!breakpoints) {
+                throw new Error("MediaQueries muss beim ersten Aufruf mit breakpoints initialisiert werden.");
+            }
+            MediaQueries.#instance = new MediaQueries(breakpoints);
+        }
+        return MediaQueries.#instance;
+    }
+
+    #matchmedia() {
+        for (let [layout, minSize] of Object.entries(this.#breakpoints)) {
+            if (minSize) {
+                var matchmedia = window.matchMedia('(min-width: ' + minSize + 'px)');
+                matchmedia.addEventListener('change', (e) => this.changeLayout());
+            }
+        }
+    }
+
+    // media query handler function
+    changeLayout() {
+        for (let [layout, minSize] of Object.entries(this.#breakpoints)) {
+            var matchmedia = window.matchMedia('(min-width: ' + minSize + 'px)');
+            if (!matchmedia || matchmedia.matches) {
+                this.layout = layout;
+            }
+        }
+        document.body.setAttribute('data-layout', this.layout);
+
+        // create event
+        let event = new CustomEvent('eventLayoutchange', {
+            detail: {
+                layout: this.layout
+            }
+        });
+        // dispatch the event
+        window.dispatchEvent(event);
+    }
+}

package/utils/Vh100.js

@@ -0,0 +1,31 @@
+/**
+ * 100vh problem
+ * https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+ */
+
+export class Vh100 {
+    static #instance;
+    vh = 0;
+
+    constructor() {
+        this.#calculate();
+        // We listen to the resize event
+        window.addEventListener('resize', () => {
+            this.#calculate();
+        });
+    }
+
+    #calculate() {
+        // First we get the viewport height and we multiple it by 1% to get a value for a vh unit
+        this.vh = window.innerHeight * 0.01;
+        // Then we set the value in the --vh custom property to the root of the document
+        document.documentElement.style.setProperty('--vh', `${this.vh}px`);
+    }
+
+    static getInstance() {
+        if (!Vh100.#instance) {
+            Vh100.#instance = new Vh100();
+        }
+        return Vh100.#instance;
+    }
+}