hippie/README.md

# HIPPIE

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.

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.

Change to the newly created folder. By default, this would be *hippie*.

Run the command `git submodule update --init`.
This will load the submodules.

Run the command `npm install`.
This will install all dependencies into the folder *node_modules*.

## Usage

Different *scripts* are provided through `package.json`:

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.

`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.

## 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.

### Sass (CSS)

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 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.

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.

- `add` - Add
- `qry` - Query
- `rmv` - Remove
- `set` - Set
- `slt` - Select
- `tgl` - Toggle

## 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).

## Contribution

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)
- refactor – Refactored code that neither fixes a bug nor adds a feature
- 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
- build – Changes that affect the build system or external dependencies
- revert – Reverts a previous commit

## Authors

**Stephan Hagedorn** - *Initial work* - [Interaktionsweise](https://interaktionsweise.de)

## License

This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.