hippie/.eleventy.js

/* jshint strict: false */

import fs from 'fs/promises';
import {HtmlBasePlugin} from "@11ty/eleventy";
import pluginWebc from "@11ty/eleventy-plugin-webc";

async function hasFiles(dirPath) {
	try {
		const entries = await fs.readdir(dirPath, {withFileTypes: true});
		return entries.some(entry => entry.isFile());
	} catch (err) {
		console.error('Error reading directory:', err);
		return false;
	}
}

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

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

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

	const demoPath = await hasFiles('source/screens') ? '/demo/' : '/';

	eleventyConfig.addGlobalData('hippie', {
		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',
			domain: 'https://domain.tld'
		},
		demoPath: demoPath,
		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 === '') {
			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', 'md']
	};
}