hippie/.eleventy.js

/* jshint strict: false */

import {HtmlBasePlugin} from "@11ty/eleventy";

// noinspection JSUnusedGlobalSymbols
export default async function (eleventyConfig) {
	eleventyConfig.addPlugin(HtmlBasePlugin);

	eleventyConfig.setLiquidOptions({
		// greedy: false,
		// trimOutputLeft: true,
		// trimOutputRight: true,
		// trimTagLeft: true,
		// trimTagRight : true,
	});

	eleventyConfig.setNunjucksEnvironmentOptions({
		// throwOnUndefined: true,
		trimBlocks: true
	});

	eleventyConfig.addGlobalData('permalink', () => {
		return (data) => `${data.page.filePathStem}.${data.page.outputFileExtension}`;
	});

	let demoMode = false;
	let pageBase = demoMode ? './demo/' : './';

	eleventyConfig.addGlobalData('hippie', {
		pageBase: pageBase,
		brand: 'hippie',
		titlePrefix: '',
		titlePostfix: ' - HIPPIE',
		placeholders: {
			name: 'Vorname Nachname',
			address: 'Straße Nr., PLZ Ort',
			phone: '+49 (0)101 1337 48',
			mail: 'name@domain.tld'
		},
		debugMode: true,
		legacyMode: false
	});

	eleventyConfig.addShortcode('text', function (text, attrId, attrClass) {
		return `<span id="${attrId}" class="${attrClass}">${text}</span>`;
	});

	eleventyConfig.addShortcode('link', function (target, text, attrId, attrClass) {
		if (text === '') {
			text = target;
		}

		if (target.indexOf('@') !== -1) {
			target = 'mailto:' + target;
		}

		return `<a id="${attrId}" class="${attrClass}" href="${target}">${text}</a>`;
	});

	eleventyConfig.addPairedShortcode("brand", function (content, attrClass = 'brand', direction = 'first') {
		const logo = `
<svg
   width="100%"
   height="100%"
   viewBox="0 0 512 512"
   preserveAspectRatio="xMidYMid meet">
  <defs
     id="defs1" />
  <g
     id="layer1">
    <g
       id="g2"
       transform="matrix(0.984375,0,0,0.984375,4,4)"
       style="stroke-width:1.01587">
      <rect
         style="fill:none;stroke:#000000;stroke-width:8.12698;stroke-linecap:square;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
         id="rect1"
         width="512"
         height="512"
         x="0"
         y="0" />
      <circle
         style="fill:none;stroke:#000000;stroke-width:8.12698;stroke-linecap:square;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
         id="path1"
         cx="256"
         cy="256"
         r="256" />
      <path
         style="fill:none;stroke:#000000;stroke-width:8.12698;stroke-linecap:butt;stroke-linejoin:bevel;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
         id="path2"
         d="M 477.7025,128 256,512 34.297496,128 Z"
    </g>
  </g>
</svg>

`;
		let output = '';
		switch (direction) {
			case 'first':
				output = logo + `${content}`;
				break;
			case 'last':
				output = `${content}` + logo;
				break;
		}

		return `<div class="${attrClass}">` + output + `</div>`;
	});

	eleventyConfig.addPassthroughCopy({'source/art/images': 'art'});

	eleventyConfig.addPassthroughCopy({'source/art/favicons/**/*.+(ico|png|svg)': '.'});

	eleventyConfig.addPassthroughCopy({'source/code/**/*.js': 'js'});

	eleventyConfig.addPassthroughCopy({'source/data/**/*.json': 'json'});

	eleventyConfig.addPassthroughCopy('vendor');
	eleventyConfig.addPassthroughCopy({'node_modules/bootstrap-icons': 'vendor/bootstrap-icons'});
	eleventyConfig.addPassthroughCopy({
		'node_modules/jquery/dist/jquery.min.js': 'vendor/jquery.min.js',
		'node_modules/jquery/dist/jquery.min.map': 'vendor/jquery.min.map'
	});
	eleventyConfig.addPassthroughCopy({'node_modules/hippie-script/index.js': 'vendor/hippie-script.js'});

	eleventyConfig.addWatchTarget('./source/style/');

	return {
		dir: {
			input: 'source/screens',
			output: 'build',
			includes: '../templates',
			data: '../data'
		},
		templateFormats: ['html', 'liquid', 'njk', 'md']
		// pathPrefix: './demo/'
	};
}