diff --git a/.eleventy.js b/.eleventy.js index 522c4dd..a29e297 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -31,7 +31,8 @@ export default async function (eleventyConfig) { return (data) => `${data.page.filePathStem}.${data.page.outputFileExtension}`; }); - const demoPath = await hasFiles('source/screens') ? '/demo/' : '/'; + // TODO: Demo entfernen + const permalinkPath = await hasFiles('source/view') ? '/demo/' : '/'; eleventyConfig.addGlobalData('hippie', { brand: 'hippie', @@ -44,7 +45,7 @@ export default async function (eleventyConfig) { mail: 'name@domain.tld', domain: 'https://domain.tld' }, - demoPath: demoPath, + permalink: permalinkPath, debugMode: true, legacyMode: false }); @@ -129,14 +130,13 @@ export default async function (eleventyConfig) { 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', 'njk'] - }; } + +// noinspection JSUnusedGlobalSymbols +export const config = { + dir: { + input: 'source/view', + output: 'build' + }, + templateFormats: ['html', 'liquid', 'md', 'njk'] +}; \ No newline at end of file diff --git a/.gitmodules b/.gitmodules index 068fd29..410b0db 100644 --- a/.gitmodules +++ b/.gitmodules @@ -2,3 +2,6 @@ path = source/style/hippie-style url = https://quelltext.interaktionsweise.de/interaktionsweise/hippie-style.git branch = development +[submodule "source/view/_includes/hippie-view"] + path = source/view/_includes/hippie-view + url = https://quelltext.interaktionsweise.de/interaktionsweise/hippie-view.git diff --git a/.jshintrc b/.jshintrc index 24ef2fe..13fcfa1 100644 --- a/.jshintrc +++ b/.jshintrc @@ -14,20 +14,20 @@ "unused": false, "browser": true, "globals": { - "HIPPIE": false, - "hippie": true, - "viewHover": true, - "basicEase": true, - "debugOn": true, - "TimeDisplay": true, "DateDisplay": true, + "HIPPIE": false, + "HippieTaskBar": true, + "TimeDisplay": true, + "basicEase": true, + "centerElementUnderCursor": false, "checkButtonAndTarget": false, + "debugOn": true, "getClosestEdgeToElement": false, "getClosestEdgeToMouse": false, - "centerElementUnderCursor": false, - "setAttributesAccordingToPosition": false, + "hippie": true, "randomIntFrom": false, + "readJsonFile": false, "replaceLineBreaks": false, - "HippieTaskBar": true + "viewHover": true } } diff --git a/CHANGELOG.md b/CHANGELOG.md index 2c9dd37..4e82455 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,52 +1,52 @@ -| Commit | Version | Description | -| :--- | :----: | :--- | -| 6095870ce33fd3775718a1de3d33f604fd0630ab | 0.4.2 | Javascript again | -| 50a1a6d9257b272e076c2e3b5bac39c7d17b2793 | 0.5.0 | Changes to content | -| e2bbe9273a292a3806de1599f752258a2721d067 | 0.5.1 | | -| 3d4eef5eb0a1632b43e1e3372e38a70cd4b58914 | 0.5.2 | | -| 371cb450f81cd0d692c9005952af35ec066e01e1 | 0.6.0 | New es6 coding standard | -| 175816c3595d783e7d8b48f5336fbdd54dae145b | 0.6.1 | | -| 67e3cc1eca359bc2b927b8e971ccd7ba71f4c5a2 | 0.6.2 | | -| abeb843718988fab978de7c75d6d45806f5d35a7 | 0.6.3 | | -| 4401761a6bec9db19293353942479aea7bb8ead1 | 0.6.4 | | -| 83464a1cf4ba3efc6382eafb6f68f106c6650161 | 0.6.5 | | -| 6f95393409b502fef9ad9677b3c1ed1fe07ecc28 | 0.6.6 | | -| 63b54f2749ed5a4d9a7a53c27540e7d6f8dff63d | 0.6.7 | | -| 830037f5e5237d33ad66fe89ba45167a62d87829 | 0.6.8 | | -| d205031fff29ee4d48251e30b17090143ae5458c | 0.7.0 | switched to style submodule usage | -| d18254b61d87eb3d09d17b93783117dad7d13686 | 0.7.1 | | -| 9b9b0cb1c631273f574d3cd7618bd799f561db6c | 0.7.2 | | -| 11b30671d4948dfd30b7da14fe7295f386b54257 | 0.7.3 | | -| 767b3024fa3bbededab2a8d665b4b35b55854a1c | 0.7.4 | | -| 5c3cda58b147f16e1b9fdf1ed7b5499651df943d | 0.8.0 | changes to license file and submodule update | -| 8567604ea6b129ded8b0e6108362a30d039235a7 | 0.8.1 | | -| b2ea5b01aa47783b5f797310e16f1897e1839eb9 | 0.9.0 | Requirements updated and new nunjucks variables | -| df064b8a942f00dd3277a9dde696e91324dfd166 | 0.9.1 | | -| d812ed62084c90d4fac18b6c56a6dd3bf9bd7cba | 0.9.2 | | -| 84957f75a017d5d06a32874282d9eb9f3d537534 | 0.9.3 | | -| 489786aadc30bb589be769fe627389611c4f71f5 | 0.9.4 | | -| 003a1159231241140a262ae67bb1236978b22ec0 | 0.9.5 | | -| 731c19dd61215b8f373af9100ad5c23f19a4c2a3 | 0.9.6 | | -| dd5ff43e1695d2de0b5a0a9614c1f31ad7e7b85b | 0.9.7 | | -| dde26ec45eeb8d28a986093b8b5b29d8165e5a11 | 0.9.8 | | -| 06ba1113929183f51e8501d440c950e4b4d9f0d2 | 0.9.9 | | -| 827e6c1cde0aa4ca65e6c170174eae91da9aa4c9 | 0.9.10 | | -| 202729f9ba098b5ff07f6af43acce7a67007cd1b | 0.9.11 | | -| d22828400125f8572cfbe6243e2521ffab519adf | 0.9.12 | | -| bf1a6ca7421a0385f664f864a82850f0805522c0 | 0.9.13 | | -| 32215de810546f6ebd7f552816fc5bf3281a0a13 | 0.9.14 | | -| f7dd7c93e3a06bc430fcf4e12f4be3d3b1aa29c6 | 0.10.0 | Added card and portal modules | -| f54dbe92d912b9e7553a3a2263b009ed05017b0b | 0.10.1 | | -| 6b217b6ebbfcfa2f3e14bdf41e21bb36f88050a5 | 0.10.2 | | -| 534115ff282de4648c294ae78fe768d79e23d379 | 0.10.3 | | -| f7a5481fd2e1d1c96f7e9d82eb2c3db9483b5784 | 0.10.4 | | -| 31e896462e7693a4a6ba10d52657caf919e7f482 | 0.10.5 | | -| 778d7d14d5e8d4dbcce2f9cb996afbc4d7accf27 | 0.11.0 | logPerf without JQuery | -| 1d7f2eb839472524d73f395365ffb43e8fc5d115 | 0.12.0 | Migration to new home | -| 69c04c32349d3d11820da933ed2bbd648fabb040 | 0.12.1 | | -| 9415d4d9573a4f2a4e1c479c74c59abe3a69cd57 | 0.12.2 | | -| 6e7615b44d9ef26ade73a00102878804272cf717 | 0.12.3 | | -| b6ec313f26dde6b379da16edb65de082c6ca9b65 | 0.12.4 | | -| e856e5311439d5a64478f7cda79998476ebdfe33 | 0.12.5 | | -| ef9d665849f370b2284ae8d985d9625b5083fe37 | 0.13.0 | Introduced 11ty | -| 3358e1858bc764e520dad65cc614c842b4f66245 | 0.13.1 | | \ No newline at end of file +| Commit | Version | Description | +|:-----------------------------------------|:-------:|:------------------------------------------------| +| 6095870ce33fd3775718a1de3d33f604fd0630ab | 0.4.2 | Javascript again | +| 50a1a6d9257b272e076c2e3b5bac39c7d17b2793 | 0.5.0 | Changes to content | +| e2bbe9273a292a3806de1599f752258a2721d067 | 0.5.1 | | +| 3d4eef5eb0a1632b43e1e3372e38a70cd4b58914 | 0.5.2 | | +| 371cb450f81cd0d692c9005952af35ec066e01e1 | 0.6.0 | New es6 coding standard | +| 175816c3595d783e7d8b48f5336fbdd54dae145b | 0.6.1 | | +| 67e3cc1eca359bc2b927b8e971ccd7ba71f4c5a2 | 0.6.2 | | +| abeb843718988fab978de7c75d6d45806f5d35a7 | 0.6.3 | | +| 4401761a6bec9db19293353942479aea7bb8ead1 | 0.6.4 | | +| 83464a1cf4ba3efc6382eafb6f68f106c6650161 | 0.6.5 | | +| 6f95393409b502fef9ad9677b3c1ed1fe07ecc28 | 0.6.6 | | +| 63b54f2749ed5a4d9a7a53c27540e7d6f8dff63d | 0.6.7 | | +| 830037f5e5237d33ad66fe89ba45167a62d87829 | 0.6.8 | | +| d205031fff29ee4d48251e30b17090143ae5458c | 0.7.0 | switched to style submodule usage | +| d18254b61d87eb3d09d17b93783117dad7d13686 | 0.7.1 | | +| 9b9b0cb1c631273f574d3cd7618bd799f561db6c | 0.7.2 | | +| 11b30671d4948dfd30b7da14fe7295f386b54257 | 0.7.3 | | +| 767b3024fa3bbededab2a8d665b4b35b55854a1c | 0.7.4 | | +| 5c3cda58b147f16e1b9fdf1ed7b5499651df943d | 0.8.0 | changes to license file and submodule update | +| 8567604ea6b129ded8b0e6108362a30d039235a7 | 0.8.1 | | +| b2ea5b01aa47783b5f797310e16f1897e1839eb9 | 0.9.0 | Requirements updated and new nunjucks variables | +| df064b8a942f00dd3277a9dde696e91324dfd166 | 0.9.1 | | +| d812ed62084c90d4fac18b6c56a6dd3bf9bd7cba | 0.9.2 | | +| 84957f75a017d5d06a32874282d9eb9f3d537534 | 0.9.3 | | +| 489786aadc30bb589be769fe627389611c4f71f5 | 0.9.4 | | +| 003a1159231241140a262ae67bb1236978b22ec0 | 0.9.5 | | +| 731c19dd61215b8f373af9100ad5c23f19a4c2a3 | 0.9.6 | | +| dd5ff43e1695d2de0b5a0a9614c1f31ad7e7b85b | 0.9.7 | | +| dde26ec45eeb8d28a986093b8b5b29d8165e5a11 | 0.9.8 | | +| 06ba1113929183f51e8501d440c950e4b4d9f0d2 | 0.9.9 | | +| 827e6c1cde0aa4ca65e6c170174eae91da9aa4c9 | 0.9.10 | | +| 202729f9ba098b5ff07f6af43acce7a67007cd1b | 0.9.11 | | +| d22828400125f8572cfbe6243e2521ffab519adf | 0.9.12 | | +| bf1a6ca7421a0385f664f864a82850f0805522c0 | 0.9.13 | | +| 32215de810546f6ebd7f552816fc5bf3281a0a13 | 0.9.14 | | +| f7dd7c93e3a06bc430fcf4e12f4be3d3b1aa29c6 | 0.10.0 | Added card and portal modules | +| f54dbe92d912b9e7553a3a2263b009ed05017b0b | 0.10.1 | | +| 6b217b6ebbfcfa2f3e14bdf41e21bb36f88050a5 | 0.10.2 | | +| 534115ff282de4648c294ae78fe768d79e23d379 | 0.10.3 | | +| f7a5481fd2e1d1c96f7e9d82eb2c3db9483b5784 | 0.10.4 | | +| 31e896462e7693a4a6ba10d52657caf919e7f482 | 0.10.5 | | +| 778d7d14d5e8d4dbcce2f9cb996afbc4d7accf27 | 0.11.0 | logPerf without JQuery | +| 1d7f2eb839472524d73f395365ffb43e8fc5d115 | 0.12.0 | Migration to new home | +| 69c04c32349d3d11820da933ed2bbd648fabb040 | 0.12.1 | | +| 9415d4d9573a4f2a4e1c479c74c59abe3a69cd57 | 0.12.2 | | +| 6e7615b44d9ef26ade73a00102878804272cf717 | 0.12.3 | | +| b6ec313f26dde6b379da16edb65de082c6ca9b65 | 0.12.4 | | +| e856e5311439d5a64478f7cda79998476ebdfe33 | 0.12.5 | | +| ef9d665849f370b2284ae8d985d9625b5083fe37 | 0.13.0 | Introduced 11ty | +| 3358e1858bc764e520dad65cc614c842b4f66245 | 0.13.1 | | \ No newline at end of file diff --git a/README.md b/README.md index e40ece3..3f4beda 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ Hippie interweaves preeminent personal interface elements 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 +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. diff --git a/TODO.md b/TODO.md index 6af7f1b..2c1ec95 100644 --- a/TODO.md +++ b/TODO.md @@ -1,6 +1,5 @@ # General -- Remove gulp and legacy files - Better README with more info for the content section - Explain eleventy usage - Complete CHANGELOG @@ -8,6 +7,10 @@ - Add dynamic content to robots.txt during build process - Add dynamic content to sitemap.xml +# 11ty + +- Look into teh difference of layouts and templates + # CSS - Check style for every basic element @@ -20,6 +23,9 @@ - Keep placeholder and demo stuff - Move other things - Prevent styles to be global +- Adapt bootstrap utility API + - https://github.com/twbs/bootstrap/blob/main/scss/utilities/_api.scss + - https://github.com/twbs/bootstrap/blob/main/scss/_utilities.scss # JS diff --git a/package-lock.json b/package-lock.json index 913ed24..0c46b1f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,12 +9,12 @@ "version": "0.13.1", "license": "MIT", "dependencies": { - "@11ty/eleventy": "^3.1.2", + "@11ty/eleventy": "^3.1.5", "@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", - "sass": "^1.93.0" + "jquery": "^4.0.0", + "sass": "^1.99.0" }, "devDependencies": { "normalize.css": "^8.0.1" @@ -42,44 +42,44 @@ } }, "node_modules/@11ty/eleventy": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/@11ty/eleventy/-/eleventy-3.1.2.tgz", - "integrity": "sha512-IcsDlbXnBf8cHzbM1YBv3JcTyLB35EK88QexmVyFdVJVgUU6bh9g687rpxryJirHzo06PuwnYaEEdVZQfIgRGg==", + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/@11ty/eleventy/-/eleventy-3.1.5.tgz", + "integrity": "sha512-hZ0g6MwZyRxCqXsPm82gIM304LraKbUz3ZmezOSjsqxttZG6cHTib3Qq8QkESJoKwnr+yX1eyfOkPC5/mEgZnQ==", "license": "MIT", "dependencies": { - "@11ty/dependency-tree": "^4.0.0", - "@11ty/dependency-tree-esm": "^2.0.0", + "@11ty/dependency-tree": "^4.0.2", + "@11ty/dependency-tree-esm": "^2.0.4", "@11ty/eleventy-dev-server": "^2.0.8", - "@11ty/eleventy-plugin-bundle": "^3.0.6", + "@11ty/eleventy-plugin-bundle": "^3.0.7", "@11ty/eleventy-utils": "^2.0.7", "@11ty/lodash-custom": "^4.17.21", - "@11ty/posthtml-urls": "^1.0.1", - "@11ty/recursive-copy": "^4.0.2", + "@11ty/posthtml-urls": "^1.0.2", + "@11ty/recursive-copy": "^4.0.4", "@sindresorhus/slugify": "^2.2.1", "bcp-47-normalize": "^2.3.0", "chokidar": "^3.6.0", - "debug": "^4.4.1", + "debug": "^4.4.3", "dependency-graph": "^1.0.0", "entities": "^6.0.1", "filesize": "^10.1.6", "gray-matter": "^4.0.3", "iso-639-1": "^3.1.5", - "js-yaml": "^4.1.0", + "js-yaml": "^4.1.1", "kleur": "^4.1.5", - "liquidjs": "^10.21.1", - "luxon": "^3.6.1", - "markdown-it": "^14.1.0", + "liquidjs": "^10.25.0", + "luxon": "^3.7.2", + "markdown-it": "^14.1.1", "minimist": "^1.2.8", - "moo": "^0.5.2", + "moo": "0.5.2", "node-retrieve-globals": "^6.0.1", "nunjucks": "^3.2.4", - "picomatch": "^4.0.2", + "picomatch": "^4.0.3", "please-upgrade-node": "^3.2.0", - "posthtml": "^0.16.6", + "posthtml": "^0.16.7", "posthtml-match-helper": "^2.0.3", - "semver": "^7.7.2", - "slugify": "^1.6.6", - "tinyglobby": "^0.2.14" + "semver": "^7.7.4", + "slugify": "^1.6.8", + "tinyglobby": "^0.2.15" }, "bin": { "eleventy": "cmd.cjs" @@ -256,14 +256,14 @@ } }, "node_modules/@11ty/recursive-copy": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/@11ty/recursive-copy/-/recursive-copy-4.0.3.tgz", - "integrity": "sha512-SX48BTLEGX8T/OsKWORsHAAeiDsbFl79Oa/0Wg/mv/d27b7trCVZs7fMHvpSgDvZz/fZqx5rDk8+nx5oyT7xBw==", + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/@11ty/recursive-copy/-/recursive-copy-4.0.4.tgz", + "integrity": "sha512-oI7m8pa7/IAU/3lqRU9vjBbs20iKFo7x+1K9kT3aVira6scc1X9MjBdgLCHzLJeJ7iB6wydioA+kr9/qPnvmlQ==", "license": "ISC", "dependencies": { "errno": "^1.0.0", "junk": "^3.1.0", - "maximatch": "^0.1.0", + "minimatch": "^3.1.5", "slash": "^3.0.0" }, "engines": { @@ -752,45 +752,6 @@ "sprintf-js": "~1.0.2" } }, - "node_modules/array-differ": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz", - "integrity": "sha512-LeZY+DZDRnvP7eMuQ6LHfCzUGxAAIViUBliK24P3hWXL6y4SortgR6Nim6xrkfSLlmH0+k+9NYNwVC2s53ZrYQ==", - "license": "MIT", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/array-union": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz", - "integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==", - "license": "MIT", - "dependencies": { - "array-uniq": "^1.0.1" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/array-uniq": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz", - "integrity": "sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==", - "license": "MIT", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/arrify": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz", - "integrity": "sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==", - "license": "MIT", - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/asap": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz", @@ -869,9 +830,9 @@ "license": "MIT" }, "node_modules/brace-expansion": { - "version": "1.1.12", - "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz", - "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==", + "version": "1.1.14", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.14.tgz", + "integrity": "sha512-MWPGfDxnyzKU7rNOW9SP/c50vi3xrmrua/+6hfPbCS2ABNWfx24vPidzvC7krjU/RTo235sV776ymlsMtGKj8g==", "license": "MIT", "dependencies": { "balanced-match": "^1.0.0", @@ -1333,9 +1294,9 @@ } }, "node_modules/immutable": { - "version": "5.1.4", - "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.4.tgz", - "integrity": "sha512-p6u1bG3YSnINT5RQmx/yRZBpenIl30kVxkTLDyHLIMk0gict704Q9n+thfDI7lTRm9vXdDYutVzXhzcThxTnXA==", + "version": "5.1.5", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.5.tgz", + "integrity": "sha512-t7xcm2siw+hlUM68I+UEOK+z84RzmN59as9DZ7P1l0994DKUWV7UXBMQZVxaoMSRQ+PBZbHCOoBt7a2wxOMt+A==", "license": "MIT" }, "node_modules/inherits": { @@ -1440,9 +1401,9 @@ } }, "node_modules/jquery": { - "version": "3.7.1", - "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz", - "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-4.0.0.tgz", + "integrity": "sha512-TXCHVR3Lb6TZdtw1l3RTLf8RBWVGexdxL6AC8/e0xZKEpBflBsjh9/8LXw+dkNFuOyW9B7iB3O1sP7hS0Kiacg==", "license": "MIT" }, "node_modules/js-yaml": { @@ -1493,9 +1454,9 @@ } }, "node_modules/liquidjs": { - "version": "10.24.0", - "resolved": "https://registry.npmjs.org/liquidjs/-/liquidjs-10.24.0.tgz", - "integrity": "sha512-TAUNAdgwaAXjjcUFuYVJm9kOVH7zc0mTKxsG9t9Lu4qdWjB2BEblyVIYpjWcmJLMGgiYqnGNJjpNMHx0gp/46A==", + "version": "10.25.5", + "resolved": "https://registry.npmjs.org/liquidjs/-/liquidjs-10.25.5.tgz", + "integrity": "sha512-GKiKeZjJDdVoQAu+S9rzkYsYnYhcep5W3WwZXgb5f+yq484P/k9JqamBbGYu+LBEixcUAXZr2jogdAIjB3ki1w==", "license": "MIT", "dependencies": { "commander": "^10.0.0" @@ -1562,21 +1523,6 @@ "url": "https://github.com/fb55/entities?sponsor=1" } }, - "node_modules/maximatch": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/maximatch/-/maximatch-0.1.0.tgz", - "integrity": "sha512-9ORVtDUFk4u/NFfo0vG/ND/z7UQCVZBL539YW0+U1I7H1BkZwizcPx5foFv7LCPcBnm2U6RjFnQOsIvN4/Vm2A==", - "license": "MIT", - "dependencies": { - "array-differ": "^1.0.0", - "array-union": "^1.0.1", - "arrify": "^1.0.0", - "minimatch": "^3.0.0" - }, - "engines": { - "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", @@ -1850,10 +1796,10 @@ } }, "node_modules/posthtml": { - "version": "0.16.6", - "resolved": "https://registry.npmjs.org/posthtml/-/posthtml-0.16.6.tgz", - "integrity": "sha512-JcEmHlyLK/o0uGAlj65vgg+7LIms0xKXe60lcDOTU7oVX/3LuEuLwrQpW3VJ7de5TaFKiW4kWkaIpJL42FEgxQ==", - "peer": true, + "version": "0.16.7", + "resolved": "https://registry.npmjs.org/posthtml/-/posthtml-0.16.7.tgz", + "integrity": "sha512-7Hc+IvlQ7hlaIfQFZnxlRl0jnpWq2qwibORBhQYIb0QbNtuicc5ZxvKkVT71HJ4Py1wSZ/3VR1r8LfkCtoCzhw==", + "license": "MIT", "dependencies": { "posthtml-parser": "^0.11.0", "posthtml-render": "^3.0.0" @@ -1985,13 +1931,13 @@ } }, "node_modules/sass": { - "version": "1.93.2", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.93.2.tgz", - "integrity": "sha512-t+YPtOQHpGW1QWsh1CHQ5cPIr9lbbGZLZnbihP/D/qZj/yuV68m8qarcV17nvkOX81BCrvzAlq2klCQFZghyTg==", + "version": "1.99.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.99.0.tgz", + "integrity": "sha512-kgW13M54DUB7IsIRM5LvJkNlpH+WhMpooUcaWGFARkF1Tc82v9mIWkCbCYf+MBvpIUBSeSOTilpZjEPr2VYE6Q==", "license": "MIT", "dependencies": { "chokidar": "^4.0.0", - "immutable": "^5.0.2", + "immutable": "^5.1.5", "source-map-js": ">=0.6.2 <2.0.0" }, "bin": { @@ -2104,9 +2050,10 @@ } }, "node_modules/slugify": { - "version": "1.6.6", - "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.6.6.tgz", - "integrity": "sha512-h+z7HKHYXj6wJU+AnS/+IH8Uh9fdcX1Lrhg1/VMdf9PwoBQXFcXiAdsy2tSK0P6gKwJLXp02r90ahUCqHk9rrw==", + "version": "1.6.9", + "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.6.9.tgz", + "integrity": "sha512-vZ7rfeehZui7wQs438JXBckYLkIIdfHOXsaVEUMyS5fHo1483l1bMdo0EDSWYclY0yZKFOipDy4KHuKs6ssvdg==", + "license": "MIT", "engines": { "node": ">=8.0.0" } @@ -2191,7 +2138,6 @@ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, diff --git a/package.json b/package.json index 1d127ed..99e61a7 100644 --- a/package.json +++ b/package.json @@ -37,11 +37,11 @@ "normalize.css": "^8.0.1" }, "dependencies": { - "@11ty/eleventy": "^3.1.2", + "@11ty/eleventy": "^3.1.5", "@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", - "sass": "^1.93.0" + "jquery": "^4.0.0", + "sass": "^1.99.0" } } diff --git a/source/code/game.js b/source/code/game.js new file mode 100644 index 0000000..b961fdb --- /dev/null +++ b/source/code/game.js @@ -0,0 +1,313 @@ +class HippieCrosshair { + constructor(canvas, options = {}) { + this.canvas = canvas; + this.ctx = canvas.getContext('2d'); + + this.debug = options.debug || false; + + const defaults = { + crosshair: { + size: 16, + thickness: 2, + color: '#000', + gapSize: 8, + style: 'cross' + }, + connector: { + distance: 128, // Distance to draw next symbol + spacing: 64, // Space between symbols + size: 8, + color: '#000', + style: 'arrow', + visibility: true + }, + line: { + color: 'rgba(0, 0, 0, 0.1)', + width: 1 + } + }; + const merged = this.mergeOptions(defaults, options); + const { crosshair, connector, line } = merged; + + // Crosshair options + this.size = crosshair.size; + this.thickness = crosshair.thickness; + this.color = crosshair.color; + this.gapSize = crosshair.gapSize; + this.style = crosshair.style; + + // Connector options + this.distance = connector.distance; + this.spacing = connector.spacing; + this.connectorSize = connector.size; + this.connectorColor = connector.color; + this.connectorStyle = connector.style; + this.connectorShow = connector.visibility; + + // Line options + this.lineColor = line.color || '#fff'; + this.lineWidth = line.width || 1; + + this.mouseX = canvas.width / 2; + this.mouseY = canvas.height / 2; + + // Animation control + this.isAnimating = true; + this.animationFrameId = null; + + this.setupEventListeners(); + this.animate(); + } + + mergeOptions(defaults, options) { + const merged = JSON.parse(JSON.stringify(defaults)); + + if (options.crosshair) { + Object.assign(merged.crosshair, options.crosshair); + } + if (options.connector) { + Object.assign(merged.connector, options.connector); + } + if (options.line) { + Object.assign(merged.line, options.line); + } + + return merged; + } + + setupEventListeners() { + document.addEventListener('mousemove', (event) => { + this.mouseX = event.clientX; + this.mouseY = event.clientY; + }); + } + + animate() { + if (!this.isAnimating) { + this.animationFrameId = requestAnimationFrame(() => this.animate()); + return; + } + + this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); + + if (this.connectorShow) { + if (this.debug) this.drawLine(); + this.drawConnector(); + } + + // TODO: Autom. Zug zum Zentrum hin ermöglichen + this.drawCrosshair(); + + this.animationFrameId = requestAnimationFrame(() => this.animate()); + } + + drawLine() { + const centerX = this.canvas.width / 2; + const centerY = this.canvas.height / 2; + + this.ctx.strokeStyle = this.lineColor; + this.ctx.lineWidth = this.lineWidth; + this.ctx.beginPath(); + this.ctx.moveTo(centerX, centerY); + this.ctx.lineTo(this.mouseX, this.mouseY); + this.ctx.stroke(); + } + + // TODO: Ausblenden nach Distanz + drawConnector() { + const centerX = this.canvas.width / 2; + const centerY = this.canvas.height / 2; + + const dx = this.mouseX - centerX; + const dy = this.mouseY - centerY; + const delta = Math.sqrt(dx * dx + dy * dy); + + // Only draw connectors if cursor is far enough from center + if (delta < this.distance) { + return; + } + + const angle = Math.atan2(dy, dx); + const count = Math.floor((delta - this.distance) / this.spacing); + + for (let i = 0; i < count; i++) { + const distance = this.distance + (i * this.spacing); + const x = centerX + Math.cos(angle) * distance; + const y = centerY + Math.sin(angle) * distance; + + this.drawSymbol(x, y, angle); + } + } + + drawSymbol(x, y, angle = 0) { + this.ctx.fillStyle = this.connectorColor; + this.ctx.strokeStyle = this.connectorColor; + this.ctx.lineWidth = 1; + + switch (this.connectorStyle) { + case 'circle': + this.ctx.beginPath(); + this.ctx.arc(x, y, this.connectorSize / 2, 0, Math.PI * 2); + this.ctx.fill(); + break; + case 'diamond': + const size = this.connectorSize - (this.connectorSize / 4); + this.ctx.beginPath(); + this.ctx.moveTo(x, y - size); + this.ctx.lineTo(x + size, y); + this.ctx.lineTo(x, y + size); + this.ctx.lineTo(x - size, y); + this.ctx.closePath(); + this.ctx.fill(); + break; + case 'square': + this.ctx.fillRect( + x - this.connectorSize / 2, + y - this.connectorSize / 2, + this.connectorSize, + this.connectorSize + ); + break; + case 'arrow': + this.arrow(x, y, angle); + break; + } + } + + arrow(x, y, angle) { + const size = this.connectorSize - (this.connectorSize / 4); + + this.ctx.save(); + this.ctx.translate(x, y); + this.ctx.rotate(angle); + + // Arrow pointing right + this.ctx.beginPath(); + this.ctx.moveTo(size, 0); // Tip + this.ctx.lineTo(-size, -size); // Back left + // this.ctx.lineTo(-size * 0.4, 0); // Middle + this.ctx.lineTo(-size, size); // Back right + this.ctx.closePath(); + this.ctx.fill(); + + this.ctx.restore(); + } + + drawCrosshair() { + this.ctx.strokeStyle = this.color; + this.ctx.lineWidth = this.thickness; + this.ctx.lineCap = 'round'; + + switch (this.style) { + case 'cross': + this.cross(); + break; + case 'circle': + this.circle(); + break; + case 'dot': + this.dot(); + break; + case 'level': + this.level(); + break; + } + } + + cross() { + // Horizontal line + this.ctx.beginPath(); + this.ctx.moveTo(this.mouseX - this.size, this.mouseY); + this.ctx.lineTo(this.mouseX - this.gapSize, this.mouseY); + this.ctx.stroke(); + + this.ctx.beginPath(); + this.ctx.moveTo(this.mouseX + this.gapSize, this.mouseY); + this.ctx.lineTo(this.mouseX + this.size, this.mouseY); + this.ctx.stroke(); + + // Vertical line + this.ctx.beginPath(); + this.ctx.moveTo(this.mouseX, this.mouseY - this.size); + this.ctx.lineTo(this.mouseX, this.mouseY - this.gapSize); + this.ctx.stroke(); + + this.ctx.beginPath(); + this.ctx.moveTo(this.mouseX, this.mouseY + this.gapSize); + this.ctx.lineTo(this.mouseX, this.mouseY + this.size); + this.ctx.stroke(); + } + + circle() { + // Outer circle + this.ctx.beginPath(); + this.ctx.arc(this.mouseX, this.mouseY, this.size, 0, Math.PI * 2); + this.ctx.stroke(); + + // Inner dot + this.ctx.fillStyle = this.color; + this.ctx.beginPath(); + this.ctx.arc(this.mouseX, this.mouseY, this.thickness, 0, Math.PI * 2); + this.ctx.fill(); + } + + dot() { + this.ctx.fillStyle = this.color; + this.ctx.beginPath(); + this.ctx.arc(this.mouseX, this.mouseY, this.size / 4, 0, Math.PI * 2); + this.ctx.fill(); + } + + level() { + this.ctx.beginPath(); + this.ctx.moveTo(this.mouseX - this.size * 2, this.mouseY); + this.ctx.lineTo(this.mouseX - this.gapSize * 2, this.mouseY); + this.ctx.stroke(); + + this.ctx.beginPath(); + this.ctx.arc(this.mouseX, this.mouseY, this.size, 0, Math.PI); + this.ctx.stroke(); + + this.ctx.beginPath(); + this.ctx.moveTo(this.mouseX + this.gapSize * 2, this.mouseY); + this.ctx.lineTo(this.mouseX + this.size * 2, this.mouseY); + this.ctx.stroke(); + + this.ctx.fillStyle = this.color; + this.ctx.beginPath(); + this.ctx.arc(this.mouseX, this.mouseY, this.thickness, 0, Math.PI * 2); + this.ctx.fill(); + } + + setCrosshairStyle(style) { + this.style = style; + } + + setCrosshairColor(color) { + this.color = color; + } + + setConnectorStyle(style) { + this.connectorStyle = style; + } + + setConnectorColor(color) { + this.connectorColor = color; + } + + setConnectorVisibility(visible) { + this.connectorShow = visible; + } + + startAnimation() { + this.isAnimating = true; + } + + stopAnimation() { + this.isAnimating = false; + } + + toggleAnimation() { + this.isAnimating = !this.isAnimating; + } +} diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js index 50efe38..89af792 100644 --- a/source/code/hippie/app.js +++ b/source/code/hippie/app.js @@ -1,3 +1,5 @@ +/* jshint strict: false */ + // TODO: Inhalte angleichen nach Zusammenfassung von app.js und function.js. // Benennung und Beschreibungen verbessern. @@ -69,7 +71,7 @@ function HippieFade(toggleElement, initState) { const fragment = document.createDocumentFragment(); const overlay = document.createElement('div'); - overlay.id = 'mouse-overlay'; + overlay.id = 'mouse_overlay'; if (initState) { overlay.classList.add('active'); @@ -190,13 +192,13 @@ function composeMail(tag, name, prov, suffix, text, topic) { el.innerHTML = elContent + text; el.setAttribute('href', 'mailto:' + mailString + topic); } else { - const els = document.getElementsByClassName(tag.slice(1)); + const elements = document.getElementsByClassName(tag.slice(1)); - for (let el of els) { - const elContent = el.innerHTML; + for (const element of elements) { + const content = element.innerHTML; - el.innerHTML = elContent + text; - el.setAttribute('href', 'mailto:' + mailString + topic); + element.innerHTML = content + text; + element.setAttribute('href', 'mailto:' + mailString + topic); } } } @@ -392,20 +394,6 @@ function centerElementUnderCursor(event, element) { element.style.top = `${y}px`; } -function setAttributesAccordingToPosition(element, position, attributes) { - 'use strict'; - - element.classList.remove(...Object.values(attributes).map(pos => pos.className)); - Object.keys(attributes[position].styles).forEach(key => { - element.style[key] = ''; - }); - - element.classList.add(attributes[position].className); - Object.entries(attributes[position].styles).forEach(([key, value]) => { - element.style[key] = value; - }); -} - /** * Gibt eine Zahl zwischen und aus. * Die Werte und sind dabei mit eingeschlossen. @@ -424,10 +412,10 @@ function randomIntFrom(min, max, pos = 0) { return Math.floor((Math.random() * (max - min + 1) + min) / pos) * pos; } -function randomFloatFrom(min, max, dec = 0) { +function randomFloatFrom(min, max, dec = 1) { dec = Math.pow(10, dec); - return Math.round((Math.random() * (max - min + 1) + min) * dec) / dec; + return Math.round((Math.random() * (max - min) + min) * dec) / dec; } /** @@ -540,11 +528,139 @@ function mapRange(value, inMin, inMax, outMin, outMax, reverse = false, clamp = return mapped; } +function zeroFill(number, width) { + width -= number.toString().length; + + if (width > 0) { + return new Array(width + (/\./.test(number) ? 2 : 1)).join('0') + number; + } + return number + ''; // always return a string +} + // Source - https://stackoverflow.com/a/47480429 // Posted by Etienne Martin, modified by community. See post 'Timeline' for change history // Retrieved 2026-03-08, License - CC BY-SA 4.0 const delay = ms => new Promise(res => setTimeout(res, ms)); +async function readJsonFile(file) { + return new Promise((resolve, reject) => { + const reader = new FileReader(); + + reader.readAsText(file); + reader.onload = function () { + try { + resolve(JSON.parse(reader.result)); + } catch (error) { + reject(error); + } + }; + reader.onerror = function () { + reject(reader.error); + }; + }); +} + +async function loadJson(filePath) { + try { + const response = await fetch(filePath); + + if (!response.ok) throw new Error(`Failed to load file: ${response.status}`); + + return await response.json(); + } catch (error) { + console.error('Error loading file:', error); + throw error; + } +} + +class RandomPixelPlaceholder { + constructor(parent, options = {}) { + this.container = parent; + this.width = options.width || 400; + this.height = options.height || 300; + this.colors = options.colors || ['#000000', '#ffffff']; + this.filter = options.filter || ''; + this.type = options.type || 'canvas'; // 'canvas' or 'img' + this.element = this.createElement(); + + this.addContextToElement(); + } + + createElement() { + if (this.type === 'img') { + const img = document.createElement('img'); + img.style.filter = this.filter; + + this.container.appendChild(img); + + return img; + } else { + const canvas = document.createElement('canvas'); + canvas.width = this.width; + canvas.height = this.height; + canvas.style.filter = this.filter; + + this.container.appendChild(canvas); + + return canvas; + } + } + + addContextToElement() { + if (this.type === 'img') { + // Create intermediate canvas + const canvas = document.createElement('canvas'); + canvas.width = this.width; + canvas.height = this.height; + + this.fillWithRandomPixels(canvas); + + // Convert canvas to image data URL and set as img src + this.element.src = canvas.toDataURL(); + this.element.width = this.width; + this.element.height = this.height; + } else { + this.fillWithRandomPixels(this.element); + } + } + + fillWithRandomPixels(canvas) { + const ctx = canvas.getContext('2d'); + const imageData = ctx.createImageData(this.width, this.height); + const data = imageData.data; + + for (let i = 0; i < data.length; i += 4) { + const color = this.getRandomColor(); + const rgb = this.hexToRgb(color); + + data[i] = rgb.r; // Red + data[i + 1] = rgb.g; // Green + data[i + 2] = rgb.b; // Blue + data[i + 3] = 255; // Alpha + } + + ctx.putImageData(imageData, 0, 0); + } + + getRandomColor() { + return this.colors[Math.floor(Math.random() * this.colors.length)]; + } + + hexToRgb(hex) { + const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); + + return result ? { + r: parseInt(result[1], 16), + g: parseInt(result[2], 16), + b: parseInt(result[3], 16) + } : {r: 0, g: 0, b: 0}; + } +} + +function sample(array) { + return array[Math.floor(Math.random() * array.length)]; +} + // CONCEPTS // NOTE: Benutzt private Zuweisungen @@ -603,91 +719,6 @@ Clock.prototype.formatDigits = function (val) { return val; }; -function ongoing() { - - var now = new Date(); - - var w = Math.floor(now.getDay()); - var D = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag']; - var DNumb = Math.floor(now.getDate()); - var MNumb = Math.floor(now.getMonth()); - var M = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'MaiOktober', 'November', 'Dezember']; - var y = Math.floor(now.getYear()); - if (y < 999) y += 1900; - - var ms = Math.floor(now.getMilliseconds()); - var s = Math.floor(now.getSeconds()); - var m = Math.floor(now.getMinutes() + s / 60); - var h = Math.floor(now.getHours() + m / 60); - - var j2000 = new Date(); // Bezugspunkt ist der 1.1.2000 0:00 UT (entspricht JD 2451544,5) - j2000.setUTCFullYear(2000, 0, 1); - j2000.setUTCHours(0, 0, 0, 0); - - var utc = new Date(); - utc.setUTCFullYear(y, MNumb, DNumb); // Monate müssen im Wertebereich 0...11 übergeben werden - utc.setUTCHours(h, m, s, ms); - - var utc0 = new Date(); - utc0.setUTCFullYear(y, MNumb, DNumb); - utc0.setUTCHours(0, 0, 0, 0); - - var jd = 2451544.5 + (utc - j2000) / 86400000; // Zählung erfolgt in Millisekunden, 1 Tag = 86.400.000 ms - var jdUTC0 = 2451544.5 + (utc0 - j2000) / 86400000; - - var N = jd - 2451545.0; - var L = 280.460 + 0.9856474 * N; // mittlere ekliptikale Länge der Sonne - var g = 357.528 + 0.9856003 * N; // mittlere Anomalie - var el = L + 1.915 * Math.sin(g) + 0.020 * Math.sin(2 * g); - var e = 23.439 - 0.0000004 * N; - var rektaszension = Math.atan((Math.cos(e) * Math.sin(el)) / Math.cos(el)); - - var T = (jdUTC0 - 2451545.0) / 36525; - var stGMT = (((6 * 3600) + (41 * 60) + 50.54841) + (8640184.812866 * T) + (0.093104 * Math.pow(T, 2)) - (0.0000062 * Math.pow(T, 3))) / 3600; - - var stGMT2 = 6.697376 + 2400.05134 * T + 1.002738 * T; - var hWGMT = stGMT2 * 15; - var hW = hWGMT + 11.9566185772; - - var st = (stGMT + (now.getUTCHours() * 1.00273790935)) + (11.9566185772 / 15); // Sommerzeit muss noch berücksichtigt werden - var st24 = Math.abs(st - (Math.round(st / 24) * 24)); - var stH = Math.floor(st24); - var stM = Math.floor((st24 % 1) * 60); - var stS = zeroFill(Math.floor((((st24 % 1) * 60) % 1) * 60), 2); - - var travelWidth = document.body.clientWidth; - var travelHeight = document.body.clientHeight; - var sunPosX = 0; - var sunPosY = 0; - var moonPosX = 0; - var moonPosY = 0; - - var sun = $('#sun').css({ - 'left': (s / 60) * travelWidth, - 'top': (m / 60) * travelHeight - }); - - $('#day').text(D[w]); - $('#dayNumb').text(DNumb); - $('#month').text(M[MNumb]); - $('#year').text(y); - $('#time').text('' + zeroFill(h, 2) + ':' + zeroFill(m, 2) + ':' + zeroFill(s, 2)); - - $('#julian').text(jd.toFixed(6)); - //$('#star').text(stH + ':' + stM + ':' + stS); - $('#star').text(stH + ':' + stM); - $('#star1').text(stGMT); - $('#star2').text(stGMT2); -} - -function zeroFill(number, width) { - width -= number.toString().length; - if (width > 0) { - return new Array(width + (/\./.test(number) ? 2 : 1)).join('0') + number; - } - return number + ''; // always return a string -} - //Länge der Balken im Diagram berechnen function barwidth(size, G, W) { var s = size; diff --git a/source/code/windows.js b/source/code/windows.js index 01a3c7d..ca85af2 100644 --- a/source/code/windows.js +++ b/source/code/windows.js @@ -3,9 +3,10 @@ class HippieTaskBar { this.element = element; this.placeholder = placeholder; this.date = null; + this.time = null; this.isDragging = false; this.barSize = ''; - // TODO: Erweitern auf allgemeine Möglichkeiten und dann aus JSON-Datei laden + // TODO: Ergänzen und nicht ersetzen this.options = options || { direction: 0, position: 'bottom', @@ -13,7 +14,8 @@ class HippieTaskBar { year: 'numeric', month: '2-digit', day: '2-digit' - } + }, + time: {hour: '2-digit', minute: '2-digit'} }; this.init(); @@ -25,11 +27,20 @@ class HippieTaskBar { document.addEventListener('pointermove', this.onMove.bind(this)); document.addEventListener('pointerup', this.onUp.bind(this)); + const clock = this.element.querySelector('.clock'); const dateElement = document.createElement('span'); + const timeElement = document.createElement('span'); + const br = document.createElement('br'); dateElement.id = 'date'; - this.element.querySelector('.clock').appendChild(dateElement); + timeElement.id = 'time'; this.date = new DateDisplay(dateElement, this.options.date); + this.time = new TimeDisplay(timeElement, this.options.time); + + // TODO: Reihenfolge anpassbar machen + clock.appendChild(timeElement); + clock.appendChild(br); + clock.appendChild(dateElement); this.setOptions(this.options.position); } @@ -111,7 +122,7 @@ class HippieTaskBar { } }; - setAttributesAccordingToPosition(this.placeholder, this.options.position, attributes); + this.setAttributesAccordingToPosition(this.placeholder, this.options.position, attributes); centerElementUnderCursor(event, this.placeholder); } } @@ -142,6 +153,18 @@ class HippieTaskBar { this.date.changeFormat(this.options.date, this.options.direction); } + setAttributesAccordingToPosition(element, position, attributes) { + element.classList.remove(...Object.values(attributes).map(pos => pos.className)); + Object.keys(attributes[position].styles).forEach(key => { + element.style[key] = ''; + }); + + element.classList.add(attributes[position].className); + Object.entries(attributes[position].styles).forEach(([key, value]) => { + element.style[key] = value; + }); + } + setOptions(position) { const attributes = { top: { @@ -182,7 +205,7 @@ class HippieTaskBar { } }; - setAttributesAccordingToPosition(this.element, position, attributes); + this.setAttributesAccordingToPosition(this.element, position, attributes); switch (position) { case 'right': diff --git a/source/data/windows.json b/source/data/windows.json new file mode 100644 index 0000000..565adaa --- /dev/null +++ b/source/data/windows.json @@ -0,0 +1,13 @@ +{ + "taskbar": { + "position": "top", + "color": "white", + "hover": { + "active": true, + "color": "#52bed1" + } + }, + "window": { + "name": "Custom" + } +} \ No newline at end of file diff --git a/source/screens/demo/examples/game/menu.liquid b/source/screens/demo/examples/game/menu.liquid deleted file mode 100644 index 7852bdb..0000000 --- a/source/screens/demo/examples/game/menu.liquid +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Menu -tags: -- game ---- -{% assign bodyClass = 'body_game' -%} -{% layout 'hippie/simple.liquid' %} - -{% block body %} -
- -
-
- {% brand 'brand', 'last' %} -

Marke

- {% endbrand %} -
-{% endblock %} \ No newline at end of file diff --git a/source/screens/demo/examples/start.liquid b/source/screens/demo/examples/start.liquid deleted file mode 100644 index e11d3f8..0000000 --- a/source/screens/demo/examples/start.liquid +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Start -tags: -- demoExample ---- -{% assign pageId = page.fileSlug -%} -{% assign bodyClass = 'body_start' -%} -{% layout 'hippie/simple.liquid' %} - -{% block body %} -
- -
- - -
-
-{% endblock %} - -{% block script %} - -{% endblock %} \ No newline at end of file diff --git a/source/screens/demo/examples/ui/tile.liquid b/source/screens/demo/examples/ui/tile.liquid deleted file mode 100644 index be51071..0000000 --- a/source/screens/demo/examples/ui/tile.liquid +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: Tile -tags: -- ui ---- -{% assign bodyClass = 'body_new' -%} -{% layout 'hippie/app.liquid' %} - -{% block body %} -{% render 'hippie/partials/header-status', hippie: hippie, links: start %} -
- -
-
-
1
-
2
-
3
-
4
-
-{% endblock %} - -{%- block script %} -{{ block.super -}} - -{% endblock %} \ No newline at end of file diff --git a/source/screens/demo/examples/ui/tui.liquid b/source/screens/demo/examples/ui/tui.liquid deleted file mode 100644 index ac42d52..0000000 --- a/source/screens/demo/examples/ui/tui.liquid +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: TUI -tags: -- ui ---- -{% assign bodyClass = 'body_frame' -%} -{% layout 'hippie/app.liquid' %} - -{% block body %} -{% render 'hippie/partials/frame-header.liquid' %} -
-{% render 'hippie/partials/frame-mode.liquid' %} -{% endblock %} \ No newline at end of file diff --git a/source/style/hippie-style b/source/style/hippie-style index b4c5632..08b2054 160000 --- a/source/style/hippie-style +++ b/source/style/hippie-style @@ -1 +1 @@ -Subproject commit b4c56320060548dacde62639876c6aee72b297ea +Subproject commit 08b2054d437e3ff45ed790f3da0742f8fa8fa30f diff --git a/source/style/modules/_clock.scss b/source/style/modules/_clock.scss index 0965587..6ffbc12 100644 --- a/source/style/modules/_clock.scss +++ b/source/style/modules/_clock.scss @@ -1,7 +1,7 @@ -@use "../hippie-style/hippie"; - @use "sass:map"; +@use "../hippie-style/hippie"; + .body_clock { header { z-index: map.get(hippie.$z-indexes, "content-top"); diff --git a/source/style/modules/_game.scss b/source/style/modules/_game.scss index 6d49400..0c679d5 100644 --- a/source/style/modules/_game.scss +++ b/source/style/modules/_game.scss @@ -1,8 +1,11 @@ +@use 'sass:list'; +@use "sass:map"; + @use "../hippie-style/hippie"; -.body_game { +.body_menu { @extend .h_full_view; - background-color: hotpink; + background-color: hippie.basic_color(delta); footer { @extend .pos_abs; @@ -24,4 +27,4 @@ } } } -} \ No newline at end of file +} diff --git a/source/style/modules/_login.scss b/source/style/modules/_login.scss index 3382d86..42c57a0 100644 --- a/source/style/modules/_login.scss +++ b/source/style/modules/_login.scss @@ -1,4 +1,5 @@ @use "sass:color"; + @use "../hippie-style/hippie"; form[name="login"] { diff --git a/source/style/modules/_start.scss b/source/style/modules/_start.scss index 031f7f7..d2f31f9 100644 --- a/source/style/modules/_start.scss +++ b/source/style/modules/_start.scss @@ -1,15 +1,111 @@ +@use "sass:color"; + @use "../hippie-style/hippie"; +$module_top_height: 32px; +$body_top_space: $module_top_height + hippie.$space_basic; + .body_start { + @extend .h_full_view; + + padding: $body_top_space hippie.$space_basic hippie.$space_basic; + main { @extend .sec_main_center; + @extend %flex_column; + + height: 100%; } - #www-search { + form { + flex: 1; + input[type="text"] { flex: 1; padding: hippie.$padding_basic; line-height: hippie.$line_text_basic; } } + + .area { + display: grid; + grid-gap: hippie.$space_basic; + flex: 1; + // grid-template-rows: repeat(2, 1fr); + // grid-template-columns: repeat(2, 1fr); + grid-template-areas: "a a"; + grid-auto-rows: 1fr; + grid-auto-columns: 1fr; + transition: hippie.$transition_best; + + &:hover { + background-color: #999; + } + + & > div { + // height: unset; + border-color: color.scale(hippie.$color_back_basic, $lightness: -4%); + border-style: dotted; + border-width: hippie.$width_border_8; + border-radius: hippie.$width_border_8; + padding: hippie.$space_basic; + background-color: rgb(hippie.$color_back_basic, .5); + // background-color: lighten(hippie.$color_back_basic, hippie.$color_diff_tiny); + // background-color: gold; + } + } +} + +#top { + position: fixed; + top: 0; + left: 0; + display: flex; + width: 100%; + height: $module_top_height; + background-color: rgb(0, 0, 0, .8); + z-index: hippie.$z_top; + + div:last-child { + flex: 1; + } + + p, + li { + color: #fff; + } + + h1 a { + color: #000; + } + + p, + li { + margin-top: 8px; + margin-bottom: 7px; + padding: 0 4px; + font-size: 12px; + line-height: 17px; + } + + nav ul { + display: flex; + margin: 0 0 0 16px; + } + + .brand { + height: 36px; + background-color: #fff; + margin: 0 0 0 128px; + padding: 7px 24px; + font-size: 16px; + line-height: 22px; + font-weight: bold; + text-align: center; + } + + .state { + margin-right: 16px; + text-align: right; + } } \ No newline at end of file diff --git a/source/style/modules/game/_mwo.scss b/source/style/modules/game/_mwo.scss new file mode 100644 index 0000000..89259ff --- /dev/null +++ b/source/style/modules/game/_mwo.scss @@ -0,0 +1,48 @@ +@use 'sass:list'; +@use "sass:map"; + +@use "../../hippie-style/hippie"; + +$colors: hippie.$color_palette; +$steps: (0, 14.28, 28.57, 42.85, 57.14, 71.43, 100); + +@function getColor($index, $colors) { + $color_keys: map.keys($colors); + $key_count: list.length($color_keys); + $cycled_index: ($index % $key_count) + 1; + $key: list.nth($color_keys, $cycled_index); + @return map.get($colors, $key); +} + +@mixin fadeColors($steps, $colors) { + @keyframes fadeColor { + @for $i from 1 through list.length($steps) { + $percent: list.nth($steps, $i); + $color: getColor($i - 1, $colors); + + #{$percent}% { + background-color: $color; + } + } + } + + animation: fadeColor 16s infinite linear; +} + +.body_mwo { + @extend .h_full_view; + + canvas { + @include fadeColors($steps, $colors); + + display: block; + cursor: none; + } + + .controls { + position: fixed; + top: 0; + left: 0; + border-radius: hippie.$radius_basic; + } +} diff --git a/source/style/modules/game/_tfw.scss b/source/style/modules/game/_tfw.scss new file mode 100644 index 0000000..81f9312 --- /dev/null +++ b/source/style/modules/game/_tfw.scss @@ -0,0 +1,206 @@ +@use 'sass:list'; +@use "sass:map"; + +@use "../../hippie-style/hippie"; + +.body_tfw { + @extend .h_full_view; + + display: flex; + flex-flow: column nowrap; + + th, + .important, + .subtle, + button, + input[type="text"], + select { + text-transform: uppercase; + } + + th, + .important { + color: white; + background-color: hippie.basic_color(echo); + } + + .important { + padding: hippie.$space_half; + border-block: hippie.$width_border_basic solid hippie.$color_back_basic; + font-weight: bold; + } + + .subtle, + hgroup p { + @extend .txt_smaller; + + color: hippie.$color_darkest; + } + + .complete .subtle, + button[data-action="claim"] { + color: hippie.basic_color(alpha); + } + + .background { + position: relative; + overflow: hidden; + + h2, span { + color: white; + } + + *:not(canvas, img) { + z-index: map.get(hippie.$z-indexes, "content-bottom"); + position: relative; + } + + canvas, img { + z-index: map.get(hippie.$z-indexes, "default"); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } + } + + & > header { + & > button.active { + border-color: hippie.$color_highlight_basic; + color: hippie.$color_highlight_basic; + background-color: hippie.$color_action_basic; + } + + & > button:not(:first-child, :last-child, :nth-child(2)) { + flex: 1; + } + } + + .view { + flex: auto; + display: flex; + flex-flow: column nowrap; + min-height: 0; + + & > main { + flex: auto; + display: flex; + flex-flow: row nowrap; + gap: hippie.$space_double; + min-height: 0; + + nav { + flex: 1; + display: flex; + flex-flow: column nowrap; + gap: hippie.$space_basic; + min-height: 0; + + input:not([type="checkbox"], [type="range"]) { + @extend .input_io; + } + + select { + @extend .io_select; + } + } + + & > div { + flex: 4; + display: flex; + flex-flow: column nowrap; + gap: hippie.$space_basic; + min-height: 0; + + div:first-child { + flex: auto; + overflow: auto; + min-height: 0; + } + + div:last-child { + flex: 0 0 auto; + } + } + + aside { + flex: 2; + + .background { + border-bottom: 1px solid hippie.basic_color(echo); + } + + & > div { + display: none; + } + } + + table { + table-layout: fixed; + width: 100%; + margin: 0; + + th { + text-align: center; + } + + td { + vertical-align: top; + + span { + z-index: map.get(hippie.$z-indexes, "content-bottom"); + position: relative; + color: white; + } + + &.subtle { + text-align: center; + vertical-align: middle; + } + } + + &#questSelection { + display: none; + } + + &[data-type="faction"] td { + height: 6em; + } + + &[data-type="quest"] td { + height: 4em; + } + + .l { + width: 30%; + } + + .q { + width: 50%; + } + + .g { + width: 40%; + } + + .t, .s, .c, .f { + width: 20%; + } + } + } + + & > footer { + justify-content: space-between; + padding: hippie.$space_basic; + + & > button:not(:first-child) { + padding-inline: 2em; + } + } + } + + footer *:not(button[data-action="back"]) { + display: none; + } +} \ No newline at end of file diff --git a/source/style/modules/ui/_frame_module.scss b/source/style/modules/ui/_frame_module.scss index 91182ad..9742af3 100755 --- a/source/style/modules/ui/_frame_module.scss +++ b/source/style/modules/ui/_frame_module.scss @@ -9,7 +9,7 @@ } .body_frame { - @extend %flex-column; + @extend %flex_column; background-color: hippie.$color_back_basic; @@ -27,7 +27,7 @@ } main { - @extend %flex-row; + @extend %flex_row; flex: 1; @@ -53,7 +53,7 @@ } section { - @extend %flex-column; + @extend %flex_column; gap: 0; } } @@ -66,12 +66,12 @@ } #cli { - @extend %flex-column; + @extend %flex_column; background-color: black; #line { - @extend %flex-row; + @extend %flex_row; } #prompt { diff --git a/source/style/modules/ui/_new_module.scss b/source/style/modules/ui/_new_module.scss deleted file mode 100755 index 4e36346..0000000 --- a/source/style/modules/ui/_new_module.scss +++ /dev/null @@ -1,99 +0,0 @@ -@use "sass:color"; - -@use "../../hippie-style/hippie"; - -$module_top_height: 32px; -$body_top_space: $module_top_height + hippie.$space_basic; - -.body_new { - @extend %flex-column; - padding: $body_top_space hippie.$space_basic hippie.$space_basic; -} - -.area { - transition: hippie.$transition_best; - - &:hover { - background-color: #999; - } -} - -.grid { - display: grid; - flex: 1; - // grid-template-rows: repeat(2, 1fr); - // grid-template-columns: repeat(2, 1fr); - grid-template-areas: "a a"; - grid-auto-rows: 1fr; - grid-auto-columns: 1fr; -} - -.item { - // height: unset; - border-color: color.scale(hippie.$color_back_basic, $lightness: -4%); - border-style: dotted; - border-width: hippie.$width_border_8; - border-radius: hippie.$width_border_8; - padding: hippie.$space_basic; - background-color: rgb(hippie.$color_back_basic, .5); - // background-color: lighten(hippie.$color_back_basic, hippie.$color_diff_tiny); - // background-color: gold; -} - -.float { - min-height: 50%; -} - -#top { - position: fixed; - top: 0; - left: 0; - display: flex; - width: 100%; - height: $module_top_height; - background-color: rgb(0, 0, 0, .8); - z-index: hippie.$z_top; - - div:last-child { - flex: 1; - } - - p, - li { - color: #fff; - } - - h1 a { - color: #000; - } - - p, - li { - margin-top: 8px; - margin-bottom: 7px; - padding: 0 4px; - font-size: 12px; - line-height: 17px; - } - - nav ul { - display: flex; - margin: 0 0 0 16px; - } - - .brand { - height: 36px; - background-color: #fff; - margin: 0 0 0 128px; - padding: 7px 24px; - font-size: 16px; - line-height: 22px; - font-weight: bold; - text-align: center; - } - - .state { - margin-right: 16px; - text-align: right; - } -} \ No newline at end of file diff --git a/source/style/ui.scss b/source/style/ui.scss index 1266a3a..97d7c8f 100644 --- a/source/style/ui.scss +++ b/source/style/ui.scss @@ -4,12 +4,13 @@ @use "hippie-style/hippie"; @use "modules/ui/frame_module"; -@use "modules/ui/new_module"; @use "modules/ui/drag_module"; @use "modules/ui/form_module"; @use "modules/ui/gallery_module"; @use "modules/ui/windows_module"; @use "modules/ui/table_module"; +@use "modules/game/mwo"; +@use "modules/game/tfw"; $color_gui_back: hippie.$color_dark; $space_gui_half: hippie.$space_half; @@ -178,7 +179,7 @@ $space_gui_half: hippie.$space_half; background-color: hippie.$color_back_basic; transition: background-color 4s; - &:hover > .mouse-overlay { + &:hover > .mouse_overlay { background-color: transparent !important; transition: background-color hippie.$duration_basic hippie.$timing_basic 0s !important; } diff --git a/source/templates/hippie/app.liquid b/source/templates/hippie/app.liquid deleted file mode 100644 index 87db0cb..0000000 --- a/source/templates/hippie/app.liquid +++ /dev/null @@ -1,41 +0,0 @@ -{% assign pageId = page.fileSlug -%} -{% assign pageClass = 'html_ui' -%} -{% layout 'hippie/default.liquid' %} - -{% block title %}{{ title }}{% endblock %} - -{% block links %} -{{ block.super -}} - - -{% endblock %} - -{% block assets %} - - - - -{% endblock %} - -{% block script %} - -{% endblock %} diff --git a/source/templates/hippie/default.liquid b/source/templates/hippie/default.liquid deleted file mode 100644 index 0d6c050..0000000 --- a/source/templates/hippie/default.liquid +++ /dev/null @@ -1,37 +0,0 @@ - -{% if pageId %} -{%- capture idAttr %} id="{{ pageId }}"{% endcapture -%} -{% endif -%} -{% if pageClass %} - {%- capture classAttr %} class="{{ pageClass }}"{% endcapture -%} -{% endif -%} -{% if bodyClass %} - {%- capture bodyClassAttr %} class="{{ bodyClass }}"{% endcapture -%} -{% endif -%} - - - - {% block head %} - - {{- hippie.titlePrefix -}} - {% block title %}{% endblock -%} - {{ hippie.titlePostfix -}} - - {% block meta -%} - {% render 'hippie/partials/meta.liquid' %} - {% endblock -%} - {% block links -%} - {% render 'hippie/partials/links.liquid' %} - {% endblock -%} - {% endblock -%} - - - -{%- block body %}{% endblock -%} -{%- block assets %}{% endblock -%} - -{%- block script %}{% endblock -%} - - \ No newline at end of file diff --git a/source/templates/hippie/full.liquid b/source/templates/hippie/full.liquid deleted file mode 100644 index dbbe4ae..0000000 --- a/source/templates/hippie/full.liquid +++ /dev/null @@ -1,49 +0,0 @@ - -{% if pageId %} -{%- capture idAttr %} id="{{ pageId }}"{% endcapture -%} -{% endif -%} -{% if pageClass %} - {%- capture classAttr %} class="{{ pageClass }}"{% endcapture -%} -{% endif -%} -{% if bodyClass %} - {%- capture bodyClassAttr %} class="{{ bodyClass }}"{% endcapture -%} -{% endif -%} - - - - {% block head %} - - {{- hippie.titlePrefix -}} - {% block title %}{{ title }}{% endblock -%} - {{ hippie.titlePostfix -}} - - {% block meta -%} - {% render 'hippie/partials/meta.liquid', author: 'Interaktionsweise', desc: 'Hippie interweaves preeminent personal interface elements' %} - {% comment %}{% endcomment %} - {% endblock -%} - {% render 'hippie/partials/script-log.liquid' %} - {% render 'hippie/partials/log-setup', hippie: hippie, state: true -%} - {% render 'hippie/partials/log-start' -%} - {% block links -%} - {% render 'hippie/partials/links.liquid' %} - - {% endblock -%} - {% render 'hippie/partials/log-log' with 'HEAD end :: Links parsed, starting to load.' as msg -%} - {% endblock -%} - - - -{% render 'hippie/partials/log-log' with 'BODY start' as msg -%} -{%- block body %}{% endblock -%} -{% render 'hippie/partials/log-log' with 'BODY :: Loading script assets...' as msg -%} -{%- block assets %}{% endblock -%} -{% render 'hippie/partials/log-assets', state: true -%} -{% render 'hippie/partials/log-log', msg: 'BODY :: Assets loaded, running page specific script...', arg: true -%} - -{%- block script %}{% endblock -%} -{% render 'hippie/partials/log-log' with 'BODY end :: Page script might still be loading.' as msg -%} -{% render 'hippie/partials/log-log' with 'Application ready... or is it?' as msg -%} - - \ No newline at end of file diff --git a/source/templates/hippie/page.liquid b/source/templates/hippie/page.liquid deleted file mode 100644 index 5c8881f..0000000 --- a/source/templates/hippie/page.liquid +++ /dev/null @@ -1,64 +0,0 @@ -{% assign pageId = page.fileSlug -%} -{% layout 'hippie/full.liquid' %} - -{% block meta %} -{{ block.super -}} -{% comment %}{% endcomment %} -{% comment %}{% endcomment %} -{% endblock %} - -{% block links %} -{{ block.super -}} -{% if hippie.legacyMode %} - - - {% comment %}{% endcomment %} - {% comment %}{% endcomment %} -{% endif %} - -{% comment %}{% endcomment %} -{% comment %}{% endcomment %} -{% endblock %} - -{% block body %} -{{ block.super -}} -{% render 'hippie/partials/nav-page.liquid' %} -
- {% render 'hippie/partials/header-page.liquid' %} - -
- {% block main %}{% endblock %} -
- - {% render 'hippie/partials/footer-page.liquid' %} -
-{% endblock %} - -{% block assets %} - - - - -{% endblock %} -{% block script %} - -{% endblock %} diff --git a/source/templates/hippie/partials/footer-page.liquid b/source/templates/hippie/partials/footer-page.liquid deleted file mode 100644 index 7aa500a..0000000 --- a/source/templates/hippie/partials/footer-page.liquid +++ /dev/null @@ -1,3 +0,0 @@ -
-
-
\ No newline at end of file diff --git a/source/templates/hippie/partials/footer-pinned.liquid b/source/templates/hippie/partials/footer-pinned.liquid deleted file mode 100644 index 5f4160a..0000000 --- a/source/templates/hippie/partials/footer-pinned.liquid +++ /dev/null @@ -1,3 +0,0 @@ -
-

Unten fixiert

-
diff --git a/source/templates/hippie/partials/footer-status.liquid b/source/templates/hippie/partials/footer-status.liquid deleted file mode 100644 index b46ecf2..0000000 --- a/source/templates/hippie/partials/footer-status.liquid +++ /dev/null @@ -1,9 +0,0 @@ -
-
Kontakt: - {{ email | default: 'admin@domain.tld' }} - · Server: - {{ app | default: 'Application' }}/{{ version | default: 'ver.s.ion' }} - ({{ system | default: 'System name' }}) · Domain: - {{ domain | default: 'domain.tld:port' }} -
-
\ No newline at end of file diff --git a/source/templates/hippie/partials/frame-header.liquid b/source/templates/hippie/partials/frame-header.liquid deleted file mode 100644 index 14d04bc..0000000 --- a/source/templates/hippie/partials/frame-header.liquid +++ /dev/null @@ -1,20 +0,0 @@ -
- - -
\ No newline at end of file diff --git a/source/templates/hippie/partials/frame-mode.liquid b/source/templates/hippie/partials/frame-mode.liquid deleted file mode 100644 index 4e87985..0000000 --- a/source/templates/hippie/partials/frame-mode.liquid +++ /dev/null @@ -1,10 +0,0 @@ -
- - -
\ No newline at end of file diff --git a/source/templates/hippie/partials/frame-status.liquid b/source/templates/hippie/partials/frame-status.liquid deleted file mode 100644 index 98c94f9..0000000 --- a/source/templates/hippie/partials/frame-status.liquid +++ /dev/null @@ -1,11 +0,0 @@ -
- - -
\ No newline at end of file diff --git a/source/templates/hippie/partials/gate-list.liquid b/source/templates/hippie/partials/gate-list.liquid deleted file mode 100644 index 8c5fdea..0000000 --- a/source/templates/hippie/partials/gate-list.liquid +++ /dev/null @@ -1,19 +0,0 @@ - diff --git a/source/templates/hippie/partials/gate-simple.liquid b/source/templates/hippie/partials/gate-simple.liquid deleted file mode 100644 index 9d0b54e..0000000 --- a/source/templates/hippie/partials/gate-simple.liquid +++ /dev/null @@ -1,7 +0,0 @@ - \ No newline at end of file diff --git a/source/templates/hippie/partials/header-page.liquid b/source/templates/hippie/partials/header-page.liquid deleted file mode 100644 index a37637a..0000000 --- a/source/templates/hippie/partials/header-page.liquid +++ /dev/null @@ -1,3 +0,0 @@ -
-
-
\ No newline at end of file diff --git a/source/templates/hippie/partials/header-status.liquid b/source/templates/hippie/partials/header-status.liquid deleted file mode 100644 index 725e305..0000000 --- a/source/templates/hippie/partials/header-status.liquid +++ /dev/null @@ -1,21 +0,0 @@ -
-

- {{ hippie.brand | upcase }} -

- -
-

{% render 'hippie/partials/status-coord', id: "log" %} - / - {% render 'hippie/partials/status-date', id: "date" %} - / - {% render 'hippie/partials/status-time', id: "time" %}

-
-
diff --git a/source/templates/hippie/partials/links.liquid b/source/templates/hippie/partials/links.liquid deleted file mode 100644 index 32d854d..0000000 --- a/source/templates/hippie/partials/links.liquid +++ /dev/null @@ -1,3 +0,0 @@ -{% comment %}{% endcomment %} - - diff --git a/source/templates/hippie/partials/log-assets.liquid b/source/templates/hippie/partials/log-assets.liquid deleted file mode 100644 index a34b417..0000000 --- a/source/templates/hippie/partials/log-assets.liquid +++ /dev/null @@ -1,3 +0,0 @@ - diff --git a/source/templates/hippie/partials/log-log.liquid b/source/templates/hippie/partials/log-log.liquid deleted file mode 100644 index ba21f2a..0000000 --- a/source/templates/hippie/partials/log-log.liquid +++ /dev/null @@ -1,3 +0,0 @@ - diff --git a/source/templates/hippie/partials/log-setup.liquid b/source/templates/hippie/partials/log-setup.liquid deleted file mode 100644 index 04fd9b2..0000000 --- a/source/templates/hippie/partials/log-setup.liquid +++ /dev/null @@ -1,6 +0,0 @@ -{% comment %}{% assign hippie.debugMode = state %}{% endcomment %} - diff --git a/source/templates/hippie/partials/log-start.liquid b/source/templates/hippie/partials/log-start.liquid deleted file mode 100644 index e137e33..0000000 --- a/source/templates/hippie/partials/log-start.liquid +++ /dev/null @@ -1,4 +0,0 @@ - diff --git a/source/templates/hippie/partials/meta.liquid b/source/templates/hippie/partials/meta.liquid deleted file mode 100644 index a4b3cc2..0000000 --- a/source/templates/hippie/partials/meta.liquid +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - \ No newline at end of file diff --git a/source/templates/hippie/partials/nav-page.liquid b/source/templates/hippie/partials/nav-page.liquid deleted file mode 100644 index cf52d72..0000000 --- a/source/templates/hippie/partials/nav-page.liquid +++ /dev/null @@ -1,33 +0,0 @@ -
- -
-{% comment %}
- ? -
{% endcomment %} \ No newline at end of file diff --git a/source/templates/hippie/partials/placeholder-flag.liquid b/source/templates/hippie/partials/placeholder-flag.liquid deleted file mode 100644 index 6b6b048..0000000 --- a/source/templates/hippie/partials/placeholder-flag.liquid +++ /dev/null @@ -1,43 +0,0 @@ -{% assign height = width | divided_by: 1.6 %} - -{% if type == 'svg' or type == '' %} - - {% comment %} - - - - - - - - - - - {% endcomment %} - {% if desc %} - {{ desc }} - {% endif %} - - - - - - - - - - -{% elsif type == 'img' %} - {% if src == 'file' %} - - - {{ desc }} - - {% else %} - {{ desc }} - {% endif %} -{% endif %} diff --git a/source/templates/hippie/partials/script-log.liquid b/source/templates/hippie/partials/script-log.liquid deleted file mode 100644 index 7e270c7..0000000 --- a/source/templates/hippie/partials/script-log.liquid +++ /dev/null @@ -1,113 +0,0 @@ - \ No newline at end of file diff --git a/source/templates/hippie/partials/song.liquid b/source/templates/hippie/partials/song.liquid deleted file mode 100644 index 534da59..0000000 --- a/source/templates/hippie/partials/song.liquid +++ /dev/null @@ -1,10 +0,0 @@ -
-
-

{{ data.title }}

-
{{ data.releaseDate }}
-

{{ data.description }}

-
- {% comment %}
{{ content }}
{% endcomment %} - {{ content }} -
{{ index }}
-
\ No newline at end of file diff --git a/source/templates/hippie/partials/status-coord.liquid b/source/templates/hippie/partials/status-coord.liquid deleted file mode 100644 index 29e592f..0000000 --- a/source/templates/hippie/partials/status-coord.liquid +++ /dev/null @@ -1 +0,0 @@ -{{ text | default: 'X: #, Y: ##' }} diff --git a/source/templates/hippie/partials/status-date.liquid b/source/templates/hippie/partials/status-date.liquid deleted file mode 100644 index 296a866..0000000 --- a/source/templates/hippie/partials/status-date.liquid +++ /dev/null @@ -1,6 +0,0 @@ - - Wochentag, - ##. - Monat - #### - diff --git a/source/templates/hippie/partials/status-time.liquid b/source/templates/hippie/partials/status-time.liquid deleted file mode 100644 index f981e80..0000000 --- a/source/templates/hippie/partials/status-time.liquid +++ /dev/null @@ -1 +0,0 @@ -{{ text | default: '00:00:00' }}{{ postfix | default: ' Uhr' }} diff --git a/source/templates/hippie/simple.liquid b/source/templates/hippie/simple.liquid deleted file mode 100644 index b888886..0000000 --- a/source/templates/hippie/simple.liquid +++ /dev/null @@ -1,9 +0,0 @@ -{% assign pageId = page.fileSlug -%} -{% layout 'hippie/default.liquid' %} - -{% block title %}{{ title }}{% endblock %} - -{% block links %} -{{ block.super -}} - -{% endblock %} diff --git a/source/templates/hippie/status.liquid b/source/templates/hippie/status.liquid deleted file mode 100644 index 86499ed..0000000 --- a/source/templates/hippie/status.liquid +++ /dev/null @@ -1,37 +0,0 @@ - -{% if pageClass %} -{%- capture classAttr %} class="{{ pageClass }}"{% endcapture -%} -{% endif -%} -{% if bodyClass %} - {%- capture bodyClassAttr %} class="{{ bodyClass }}"{% endcapture -%} -{% endif -%} - - - - {% block head %} - - {{- hippie.titlePrefix -}} - {% block title %}{{ title }}{% endblock -%} - {{ hippie.titlePostfix -}} - - {% block meta -%} - {% render 'hippie/partials/meta.liquid' %} - {% endblock -%} - {% block links -%} - - - {% endblock -%} - {% endblock -%} - - - -{%- block body %} -
-

{{ title }}

- {% block main %}{% endblock -%} -
-{% render 'hippie/partials/footer-status' %} -{% endblock -%} - - \ No newline at end of file diff --git a/source/templates/hippie/world.liquid b/source/templates/hippie/world.liquid deleted file mode 100644 index ca935dc..0000000 --- a/source/templates/hippie/world.liquid +++ /dev/null @@ -1,11 +0,0 @@ - - - - - {{ title }} - - - -{{ content }} - - \ No newline at end of file diff --git a/source/view/_data/menu.json b/source/view/_data/menu.json new file mode 100644 index 0000000..f437630 --- /dev/null +++ b/source/view/_data/menu.json @@ -0,0 +1,18 @@ +[ + { + "text": "New", + "href": "#new" + }, + { + "text": "Continue", + "href": "#continue" + }, + { + "text": "Settings", + "href": "#options" + }, + { + "text": "Leave", + "href": "/" + } +] \ No newline at end of file diff --git a/source/data/start.json b/source/view/_data/start.json similarity index 63% rename from source/data/start.json rename to source/view/_data/start.json index cc0da22..65bfb14 100644 --- a/source/data/start.json +++ b/source/view/_data/start.json @@ -8,7 +8,7 @@ "href": "/demo/basics.html" }, { - "text": "Drag", - "href": "/demo/examples/ui/drag.html" + "text": "Portal", + "href": "/demo/examples/portal.html" } ] \ No newline at end of file diff --git a/source/view/_includes/hippie-view b/source/view/_includes/hippie-view new file mode 160000 index 0000000..49fa858 --- /dev/null +++ b/source/view/_includes/hippie-view @@ -0,0 +1 @@ +Subproject commit 49fa85800392bc217653e6a90573feda4a1dc0ed diff --git a/source/screens/demo/examples/10print.liquid b/source/view/demo/art/10print.liquid similarity index 92% rename from source/screens/demo/examples/10print.liquid rename to source/view/demo/art/10print.liquid index 9ee9246..2a62d3d 100644 --- a/source/screens/demo/examples/10print.liquid +++ b/source/view/demo/art/10print.liquid @@ -1,12 +1,11 @@ --- title: 10print tags: -- demoExample +- demoArt --- -{% layout 'hippie/simple.liquid' %} +{% layout 'hippie-view/simple.liquid' %} -{% block head %} -{{ block.super -}} +{% block style %} +{% endblock %} + +{% block body %} + +{% endblock %} + +{% block script %} + +{% endblock %} \ No newline at end of file diff --git a/source/view/demo/art/squares2.liquid b/source/view/demo/art/squares2.liquid new file mode 100644 index 0000000..fb44db9 --- /dev/null +++ b/source/view/demo/art/squares2.liquid @@ -0,0 +1,178 @@ +--- +title: Squares² +tags: +- demoArt +--- +{% layout 'hippie-view/simple.liquid' %} + +{% block style %} + +{% endblock %} + +{% block body %}{% endblock %} + +{% block script %} + +{% endblock %} \ No newline at end of file diff --git a/source/screens/demo/basics.liquid b/source/view/demo/basics.liquid similarity index 98% rename from source/screens/demo/basics.liquid rename to source/view/demo/basics.liquid index d3c7a08..a43bd90 100644 --- a/source/screens/demo/basics.liquid +++ b/source/view/demo/basics.liquid @@ -4,7 +4,7 @@ tags: - demoIndex order: 2 --- -{% layout 'hippie/page.liquid' %} +{% layout 'hippie-view/page.liquid' %} {% block title %}Grundlagen{% endblock %} @@ -208,7 +208,7 @@ order: 2
Fahne
{% comment %}// TODO: Durch Platzhalter ersetzten und Prozentangaben ermöglichen{% endcomment %} - Flag @@ -243,7 +243,7 @@ order: 2

Textebene

Verweise

-

Ein wesentlicher Bestandteil von Hypertext sind Verweise +

Änderungen

Werden Texte geändert, können solche Änderungen sichtbar gemacht werden. Somit können sie besser nachvollzogen werden.
Zum Beispiel eine Ergänzung von Inhalt.

-