Compare commits
3 commits
6520cdbcf0
...
c4947a9c04
| Author | SHA1 | Date | |
|---|---|---|---|
| c4947a9c04 | |||
| d3ab17d5a1 | |||
| 437c561847 |
5 changed files with 2318 additions and 2143 deletions
21
.eleventy.js
21
.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']
|
||||
};
|
||||
}
|
||||
|
|
|
|||
47
README.md
47
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
|
||||
|
|
|
|||
167
package-lock.json
generated
167
package-lock.json
generated
|
|
@ -10,7 +10,7 @@
|
|||
"license": "MIT",
|
||||
"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",
|
||||
|
|
@ -140,20 +140,33 @@
|
|||
"url": "https://opencollective.com/11ty"
|
||||
}
|
||||
},
|
||||
"node_modules/@11ty/eleventy-upgrade-help": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@11ty/eleventy-upgrade-help/-/eleventy-upgrade-help-3.0.2.tgz",
|
||||
"integrity": "sha512-1vnYgNQ0vPSSuD7fVa0wGFn1EUr6zqffj203rdO+yC0xUFp5E55Io2JHuVXY7oLxFpFEIsWaTNKHcIG77C6TPA==",
|
||||
"node_modules/@11ty/eleventy-plugin-webc": {
|
||||
"version": "0.11.2",
|
||||
"resolved": "https://registry.npmjs.org/@11ty/eleventy-plugin-webc/-/eleventy-plugin-webc-0.11.2.tgz",
|
||||
"integrity": "sha512-oa/XlAqI5KtVO7M14qaN92D2yJfBEMMSb66YWY6YZVbRqFSVbjO4WmRJ2Ti2ZZb1FNvxj4ypGNV8VJleGE69xw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"fast-glob": "^3.3.3",
|
||||
"kleur": "^4.1.5",
|
||||
"minimist": "^1.2.8",
|
||||
"posthtml-match-helper": "^2.0.3",
|
||||
"semver": "^7.7.3"
|
||||
"@11ty/eleventy-plugin-bundle": "^1.0.4",
|
||||
"@11ty/webc": "^0.11.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
"node": ">=14.18"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/11ty"
|
||||
}
|
||||
},
|
||||
"node_modules/@11ty/eleventy-plugin-webc/node_modules/@11ty/eleventy-plugin-bundle": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@11ty/eleventy-plugin-bundle/-/eleventy-plugin-bundle-1.0.5.tgz",
|
||||
"integrity": "sha512-Esv97j+mOo/yfxjaWl4j8CyszOBsRjU/DOUWOBqVnnDLM8VDXeus2LTJUxF70nAU0g+z+b6fRn8fKnm6b2a/UQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"debug": "^4.3.4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
|
|
@ -257,6 +270,77 @@
|
|||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@11ty/webc": {
|
||||
"version": "0.11.4",
|
||||
"resolved": "https://registry.npmjs.org/@11ty/webc/-/webc-0.11.4.tgz",
|
||||
"integrity": "sha512-q1GMcjNnx9PxUr6jyTT5CdDFma3JWkT5D45wRNYUQ/B4cxTTxpC15b2rYdzNaGuSqB6tsArQ9Qh4BPqg6Xo9cA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@11ty/eleventy-utils": "^1.0.1",
|
||||
"css-tree": "^2.3.1",
|
||||
"dependency-graph": "^0.11.0",
|
||||
"entities": "^4.4.0",
|
||||
"fast-glob": "^3.2.12",
|
||||
"is-glob": "^4.0.3",
|
||||
"nanoid": "^4.0.1",
|
||||
"node-retrieve-globals": "^2.0.7",
|
||||
"parse5": "^7.1.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.18"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/11ty"
|
||||
}
|
||||
},
|
||||
"node_modules/@11ty/webc/node_modules/@11ty/eleventy-utils": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@11ty/eleventy-utils/-/eleventy-utils-1.0.3.tgz",
|
||||
"integrity": "sha512-nULO91om7vQw4Y/UBjM8i7nJ1xl+/nyK4rImZ41lFxiY2d+XUz7ChAj1CDYFjrLZeu0utAYJTZ45LlcHTkUG4g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"normalize-path": "^3.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/11ty"
|
||||
}
|
||||
},
|
||||
"node_modules/@11ty/webc/node_modules/dependency-graph": {
|
||||
"version": "0.11.0",
|
||||
"resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.11.0.tgz",
|
||||
"integrity": "sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.6.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@11ty/webc/node_modules/entities": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
|
||||
"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
|
||||
"license": "BSD-2-Clause",
|
||||
"engines": {
|
||||
"node": ">=0.12"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/fb55/entities?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/@11ty/webc/node_modules/node-retrieve-globals": {
|
||||
"version": "2.0.8",
|
||||
"resolved": "https://registry.npmjs.org/node-retrieve-globals/-/node-retrieve-globals-2.0.8.tgz",
|
||||
"integrity": "sha512-mVimS/m8H28kyMdvOIfyMCM8wFNiKXM83ag1yHYP297iVmlCSmCh7Ih4b+ig9/DZ2+LbXZCPLDSZO4yRa5ttyg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"acorn": "^8.8.2",
|
||||
"acorn-walk": "^8.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@nodelib/fs.scandir": {
|
||||
"version": "2.1.5",
|
||||
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
|
||||
|
|
@ -844,6 +928,19 @@
|
|||
"integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/css-tree": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
|
||||
"integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"mdn-data": "2.0.30",
|
||||
"source-map-js": "^1.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/debug": {
|
||||
"version": "4.4.3",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
|
||||
|
|
@ -1480,6 +1577,12 @@
|
|||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/mdn-data": {
|
||||
"version": "2.0.30",
|
||||
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
|
||||
"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
|
||||
"license": "CC0-1.0"
|
||||
},
|
||||
"node_modules/mdurl": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
|
||||
|
|
@ -1592,6 +1695,24 @@
|
|||
"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/nanoid": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-4.0.2.tgz",
|
||||
"integrity": "sha512-7ZtY5KTCNheRGfEFxnedV5zFiORN1+Y1N6zvPTnHQd8ENUvfaDBeuJDZb2bN/oXwXxu3qkTXDzy57W5vAmDTBw==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/ai"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"nanoid": "bin/nanoid.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^14 || ^16 || >=18"
|
||||
}
|
||||
},
|
||||
"node_modules/node-addon-api": {
|
||||
"version": "7.1.1",
|
||||
"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
|
||||
|
|
@ -1675,6 +1796,30 @@
|
|||
"integrity": "sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/parse5": {
|
||||
"version": "7.3.0",
|
||||
"resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
|
||||
"integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"entities": "^6.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/inikulin/parse5?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/parse5/node_modules/entities": {
|
||||
"version": "6.0.1",
|
||||
"resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
|
||||
"integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
|
||||
"license": "BSD-2-Clause",
|
||||
"engines": {
|
||||
"node": ">=0.12"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/fb55/entities?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/parseurl": {
|
||||
"version": "1.3.3",
|
||||
"resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
permalink: "/"
|
||||
permalink: "{{ hippie.demoPath }}"
|
||||
title: Index
|
||||
---
|
||||
{% assign pageId = page.fileSlug -%}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue