From c4947a9c04c483dd7cdf9336062f9b02af858df6 Mon Sep 17 00:00:00 2001 From: sthag Date: Sun, 15 Mar 2026 09:27:33 +0100 Subject: [PATCH] docs: Update README Change project description to current toolset and update usage. --- .eleventy.js | 2 +- README.md | 53 +++++++++++++++++++++++++++++++++------------------- 2 files changed, 35 insertions(+), 20 deletions(-) diff --git a/.eleventy.js b/.eleventy.js index 28f22fa..522c4dd 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -137,6 +137,6 @@ export default async function (eleventyConfig) { includes: '../templates', data: '../data' }, - templateFormats: ['html', 'liquid', 'md'] + templateFormats: ['html', 'liquid', 'md', 'njk'] }; } diff --git a/README.md b/README.md index 83ea378..e40ece3 100644 --- a/README.md +++ b/README.md @@ -4,15 +4,20 @@ 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. +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,15 +54,16 @@ Everything has its default style. CSS classes follow a naming scheme of `_`. -- *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) The codebase uses ECMAScript 2023 Language Specification (14th edition). -However, currently the JSHint configuration only allows 11 as highest version. +However, currently the JSHint configuration only allows 11 as highest version. -ID values are written in *camelCase*. The scheme further uses parts for specific contexts. +ID values are written in *camelCase*. The scheme further uses parts for specific contexts. If the ID is for an interactive element the first part is an abbreviation of the action. @@ -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