docs: Update README

Change project description to current toolset and update usage.

.eleventy.js

@@ -1,10 +1,23 @@
 /* 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,
@@ -17,6 +30,9 @@ export default async function (eleventyConfig) {
 	eleventyConfig.addGlobalData('permalink', () => {
 		return (data) => `${data.page.filePathStem}.${data.page.outputFileExtension}`;
 	});
+
+	const demoPath = await hasFiles('source/screens') ? '/demo/' : '/';
+
 	eleventyConfig.addGlobalData('hippie', {
 		brand: 'hippie',
 		titlePrefix: '',
@@ -28,6 +44,7 @@ export default async function (eleventyConfig) {
 			mail: 'name@domain.tld',
 			domain: 'https://domain.tld'
 		},
+		demoPath: demoPath,
 		debugMode: true,
 		legacyMode: false
 	});
@@ -83,7 +100,6 @@ export default async function (eleventyConfig) {
     </g>
   </g>
 </svg>
-
 `;
 		let output = '';
 
@@ -121,7 +137,6 @@ export default async function (eleventyConfig) {
 			includes: '../templates',
 			data: '../data'
 		},
-		templateFormats: ['html', 'liquid', 'md']
-		// pathPrefix: './demo/'
+		templateFormats: ['html', 'liquid', 'md', 'njk']
 	};
 }

README.md

@@ -5,14 +5,19 @@ Hippie interweaves preeminent personal interface elements
 > WORK IN PROGRESS (it is not ready to be used)
 
 This is a [Node.js](https://nodejs.org/) based generator for static HTML documents.  
+It uses the [Eleventy](https://www.11ty.dev/) project to fiddle everything together.
 
-It uses the [gulp](https://gulpjs.com/) module to fiddle everything together. Styling is powered by the CSS extension language [SASS](https://sass-lang.com/). The HTML pages itself are made with the templating engine [Nunjucks](https://mozilla.github.io/nunjucks/).
+Styling is powered by the CSS extension language [SASS](https://sass-lang.com/). The HTML pages are written with
+templating engines or directly as HTML files. Mainly [Liquid](https://liquidjs.com/) is used,
+but [Markdown](https://daringfireball.net/projects/markdown/) and [Nunjucks](https://mozilla.github.io/nunjucks/) are
+also options.
 
 ## Installing
 
-Clone the repository `https://quelltext.interaktionsweise.de/interaktionsweise/hippie.git` to a folder to create your build environment.
+Clone the repository `https://quelltext.interaktionsweise.de/interaktionsweise/hippie.git` to a folder to create your
+build environment.
 
-Change to the newly created folder. By default this would be *hippie*.
+Change to the newly created folder. By default, this would be *hippie*.
 
 Run the command `git submodule update --init`.
 This will load the submodules.
@@ -22,21 +27,26 @@ This will install all dependencies into the folder *node_modules*.
 
 ## Usage
 
-The command `gulp --tasks` will give you an overview of possible actions.
+Different *scripts* are provided through `package.json`:
 
-Run the command `gulp` for a live development environment.
-This will create a folder *build* with the resulting files.
-Also the source files will be watched for changes which are reflected live at [localhost:3000](http://localhost:3000) and the *build* directory.
+Run the command `npm run serve` for a live development environment.
+This will create a folder `/build` with the resulting files.
+Also, the source files will be watched for changes which are reflected live at [localhost:8080](http://localhost:8080)
+and the `/build` directory.
 
-`gulp build` will create the resulting *build* directory ready for deployment.
+`npm run build` will just create the resulting `/build` directory and `npm run deploy` will use a path prefix (*hippie*
+by default) and create the results in `/deploy` ready for deployment.
 
-HIPPIE is intended to be used as a basis when creating HTML sites. It can be used without changes. It can be modified to have a different look and feel. It also can be used to build a new basis on top of it.
+HIPPIE is intended to be used as a basis when creating HTML sites. It can be used without changes. It can be modified to
+have a different look and feel. It also can be used to build a new basis on top of it.
 
 ## Content
 
 ### Intro
 
-There is an *intro* page which explains the main elements and their intended usage. It uses the default styling methods and also shows variations. The page is written in german language. However it has a semantic structure and the text itself can also just be seen as example content.
+There is an *intro* page which explains the main elements and their intended usage. It uses the default styling methods
+and also shows variations. The page is written in german language. However, it has a semantic structure and the text
+itself can also just be seen as example content.
 
 ### Sass (CSS)
 
@@ -44,7 +54,8 @@ Everything has its default style.
 
 CSS classes follow a naming scheme of `<object>_<description>`.
 
-- *Object* usually is the name of the HTML element. If it is not a element directly it is the thing which receives the styling
+- *Object* usually is the name of the HTML element. If it is not an element directly it is the thing which receives the
+  styling
 - *Description* is a name of the style e.g. what it does, how it looks
 
 ### JavaScript (JS)
@@ -65,19 +76,23 @@ If the ID is for an interactive element the first part is an abbreviation of the
 
 ## Versioning
 
-This project uses [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://quelltext.interaktionsweise.de/interaktionsweise/hippie/tags).
+This project uses [SemVer](http://semver.org/) for versioning. For the versions available, see
+the [tags on this repository](https://quelltext.interaktionsweise.de/interaktionsweise/hippie/tags).
 
 ## Contribution
 
-For contribution please use the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/#summary) specification.  
+For contribution please use the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/#summary)
+specification.  
 The commit *type* can include the following:
 
 - feat – A new feature is introduced with the changes
 - fix – A bug fix has occurred
-- chore – Changes that do not relate to a fix or feature and don't modify src or test files (for example updating dependencies)
+- chore – Changes that do not relate to a fix or feature and don't modify src or test files (for example updating
+  dependencies)
 - refactor – Refactored code that neither fixes a bug nor adds a feature
-- docs – Updates to documentation such as a the README or other markdown files
-- style – Changes that do not affect the meaning of the code, likely related to code formatting such as white-space, missing semi-colons, and so on.
+- docs – Updates to documentation such as the README or other Markdown files
+- style – Changes that do not affect the meaning of the code, likely related to code formatting such as white-space,
+  missing semicolons, and so on.
 - test – Including new or correcting previous tests
 - perf – Performance improvements
 - ci – Continuous integration related

package.json

@@ -38,7 +38,7 @@
 	},
 	"dependencies": {
 		"@11ty/eleventy": "^3.1.2",
-		"@11ty/eleventy-upgrade-help": "^3.0.2",
+		"@11ty/eleventy-plugin-webc": "^0.11.2",
 		"bootstrap-icons": "^1.13.1",
 		"hippie-script": "git+https://quelltext.interaktionsweise.de/interaktionsweise/hippie-script.git",
 		"jquery": "^3.7.1",

source/screens/demo/index.liquid

@@ -1,5 +1,5 @@
 ---
-permalink: "/"
+permalink: "{{ hippie.demoPath }}"
 title: Index
 ---
 {% assign pageId = page.fileSlug -%}