{"id":15538929,"url":"https://github.com/snek-at/jaen","last_synced_at":"2025-04-14T16:23:52.788Z","repository":{"id":46763176,"uuid":"382725272","full_name":"snek-at/jaen","owner":"snek-at","description":"Serverless CMS framework for ReactJS w/ IPFS and GitHub Workflows.","archived":false,"fork":false,"pushed_at":"2024-08-08T13:22:14.000Z","size":9377,"stargazers_count":6,"open_issues_count":11,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-12-09T14:08:40.687Z","etag":null,"topics":["cms","cms-framework","gatsby","gatsbyjs","github-actions","github-pages","ipfs","react","reactjs","serverless","serverless-framework"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/snek-at.png","metadata":{"files":{"readme":"README.de-at.md","changelog":null,"contributing":null,"funding":null,"license":"COPYING","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-07-03T23:17:30.000Z","updated_at":"2024-09-24T08:34:01.000Z","dependencies_parsed_at":"2024-06-14T11:23:05.303Z","dependency_job_id":"4f8e5e78-4a97-4a77-83f4-3375f8fb21a9","html_url":"https://github.com/snek-at/jaen","commit_stats":{"total_commits":7,"total_committers":1,"mean_commits":7.0,"dds":0.0,"last_synced_commit":"d48dabf1a2b205f9250d35784bc012bbcb615138"},"previous_names":["snek-at/jaen","snek-at/jaen-2"],"tags_count":158,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/snek-at%2Fjaen","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/snek-at%2Fjaen/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/snek-at%2Fjaen/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/snek-at%2Fjaen/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/snek-at","download_url":"https://codeload.github.com/snek-at/jaen/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248914816,"owners_count":21182504,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cms","cms-framework","gatsby","gatsbyjs","github-actions","github-pages","ipfs","react","reactjs","serverless","serverless-framework"],"created_at":"2024-10-02T12:07:56.722Z","updated_at":"2025-04-14T16:23:52.755Z","avatar_url":"https://github.com/snek-at.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://snek.at/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n    \u003cimg src=\"https://avatars2.githubusercontent.com/u/55870326?s=400\u0026u=c6c7f06305ddc94747d474850fde7b2044f53838\u0026v=4\" alt=\"SNEK Logo\" height=\"150\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch3 align=\"center\"\u003eSnek Jaen\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e\n  Sie befinden sich im offiziellen Jaen Projekt von snek-at.\n  Mit Jaen, dem innovativen, attraktiven und offenem CMS Framework für ReactJS.\n  \u003cbr\u003e\n  \u003cbr\u003e\n  \u003ccite\u003e\"Nur eine leere Schüssel kann man füllen.\"\u003c/cite\u003e - Lao Tzu\n  \u003cbr\u003e\n  \u003cbr\u003e\n  \u003ca href=\"https://github.com/snek-at/jaen/issues/new?template=bug_report.md\"\u003eMelde einen Bug\u003c/a\u003e\n  ·\n  \u003ca href=\"https://github.com/snek-at/jaen/issues/new?template=feature_request.md\"\u003eBeantrage ein Feature\u003c/a\u003e\n  ·\n  \u003ca href=\"https://www.github.com/snek-at/jaen/wiki\"\u003eDokumentation\u003c/a\u003e\n  \u003cbr\u003e\n  \u003cbr\u003e\n  \u003ca href=\"https://www.codacy.com/gh/snek-at/jaen/dashboard?utm_source=github.com\u0026amp;utm_medium=referral\u0026amp;utm_content=snek-at/jaen\u0026amp;utm_campaign=Badge_Grade\"\u003e\n    \u003cimg src=\"https://app.codacy.com/project/badge/Grade/bb3d984d38704860ba7ad800d319b8c4\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\nRead this wiki in a different language: [English](https://github.com/snek-at/jaen/blob/docs/update-readme/README.md)\n\n## [](#table-of-contents)Was Sie erwartet\n- [💪 Motivation](#-motivation)\n    - [Jaen Features](#jaen-features)\n    - [Roadmap](#roadmap)\n    - [Nachricht um Sie zu inspirieren](#nachricht-um-sie-zu-inspirieren)\n    - [Disclaimer](#disclaimer)\n- [🚀 Beginne in 5 Minuten zu arbeiten](#-beginne-in-5-minuten-zu-arbeiten)\n    - [Vom Template auf GitHub generieren](#vom-template-auf-github-generieren)\n    - [Erste Schritte](#erste-schritte)\n    - [Optionen fürs Aufsetzen](#optionen-fürs-aufsetzen)\n        - [Codespace Setup](#codespace-setup)\n        - [Lokales Setup](#lokales-setup)\n            - [Fehlerbehebung](#fehlerbehebung)\n    - [Editieren](#editieren)\n- [💻 Anwendung](#-anwendung)\n    - [Übersicht](#übersicht)\n        - [Seiten Einstellungen](#seiten-einstellungen)\n        - [Felder](#felder)\n    - [Seiten Einstellungen](#seiten-einstellungen)\n    - [Felder](#felder)\n        - [TextField](textfield)\n        - [ImageField](#imagefield)\n        - [BlockContainer](#blockcontainer)\n        - [IndexField](#indexfield)\n        - [ChoiceField](#choicefield)\n    - [Blöcke](#blöcke)\n- [🐞 Wie man einen Bug meldet oder ein Feature beantragt](#-wie-man-einen-bug-meldet-oder-ein-feature-beantragt)\n- [🤝 Selbst mitwirken](#-selbst-mitwirken)\n- [💚 Danksagung](#-danksagung)\n- [💼 Schöpfer](#-schöpfer)\n- [🤔 FAQs](#-faqs)\n- [:exploding_head: Trivia](#exploding_head-trivia)\n- [📝 Urheberrechte und Lizenz](#-copyright-and-license)\n\n## [](#-motivation)💪 Motivation\n\nEin CMS **sollte nicht** der definierende Teil einer Webapp sein. Auch E-Commerce sollte das nicht, sondern nur Ihr Code.\nERP Integration **sollte** den Entwickler **nicht** dazu zwingen Kurven zu schneiden.\n\n- Jaen **wird Ihr** Nutzererlebnis **nicht** beeinträchtigen.\n- Jaen **wird Ihr** Anwendungsdesign **nicht** herausfordern.\n- Jaen gibt **Ihnen** die Kontrolle.\n\nSpezialisiert mit gut und genau geführten Dokumentationen für die Schnittstellen.\nFlexibel, erweiterbar und Open-Source.\n\n### Jaen Features\n\n* Eine schnelle, attraktive \"What you see is what you get\" Oberfläche für Editoren\n* Die komplette Kontrolle über die Struktur und das Design des Frontends\n* Von Natur aus schnell, Zwischenspeicher-freundlich wenn notwendig\n* Das StreamField ermutigt flexiblen Inhalt ohne die Struktur zu gefährden\n* Unterstützung für Bilder und eingebettete Inhalte\n* Dezentralisiertes, kostenloses Hosting über ein verteiltes Netzwerk\n\n\n### Roadmap\n| Feature                       | Fertig | Fast geschafft | Wir arbeiten daran | In Planung |\n|-------------------------------|:---:|:---:|:---:|:---:|\n| `IndexField`                  | ✅️ |  |  |  |\n| `Email Support`               | ✅️ |  |  |  |\n| `Fixed parent for IndexField` | ✅️ |  |  |  |\n| `TextField`                   | ✅️ |  |  |  |\n| `Dynamic Routes`              | ✅️ |  |  |  |\n| `ImageField`                  | ✅️ |  |  |  |\n| `BlockContainer`              | ✅️ |  |  |  |\n| `ChoiceField`                 | ✅️ |  |  |  |\n| `Gatsby`                      | ✅️ |  |  |  |\n| `PdfField`                    |  | ✅️ |  |  |\n| `LinkField`                   |  | ✅️ |  |  |\n| `Converter (HELMUT)`          |  |  |  | ✅️ |\n| `Smart Converter (SMARTMUT)`  |  |  |  | ✅️ |\n| `E-Commerce`                  |  |  |  | ✅️ |\n| `User Management`             |  |  |  | ✅️ |\n| `Email Templates`             |  |  |  | ✅️ |\n| `Development Tools`           |  |  |  | ✅️ |\n| `Snek Editor`                 |  |  |  | ✅️ |\n| `YT Tutorials`                |  |  |  | ✅️ |\n\n#### Nachricht um Sie zu inspirieren\nIn einem Hamsterrad zu rennen ist nicht inspirierend.\n\n#### Disclaimer\n\nNichts für schwache Nerven. Wenn Sie sich dazu entscheiden Jaen zu nutzen, könnten Sie einige Kratzer abbekommen.\n\n## [](#-beginne-in-5-minuten-zu-arbeiten)🚀 Beginne in 5 Minuten zu arbeiten\n\n### Vom Template [auf GitHub generieren](https://github.com/snek-at/jaen-template/generate)\n| Vom Template generieren | Wichtig ist, dass das Repository öffentlich ist und, dass Sie nicht alle Branches inkludieren |\n|---|---|\n| ![image](https://user-images.githubusercontent.com/83394650/124399008-16b7d780-dd19-11eb-84bb-769462d5440e.png) | ![image](https://user-images.githubusercontent.com/83394650/124401575-6c48b000-dd2a-11eb-8316-7f583e5e98d7.png) |\n\n### Erste Schritte\n\nDer `GITHUB_TOKEN`hat Limitierungen für das erste Deployment. Also müssen Sie den GitHub Pages Branch in der Einstellungsseite Ihres Repositorys auswählen. Danach müssen Sie den Anweisungen, die in den Bildern unter diesem Text gezeigt werden, folgen.\n\n| Erstes Aufsetzen fehlgeschlagen | Gehen sie zu Ihrem Pages einstellungs Tab |\n|---|---|\n| ![image](https://user-images.githubusercontent.com/83394650/124398796-ecb1e580-dd17-11eb-9f06-64d73eb2d4d9.png) | ![image](https://user-images.githubusercontent.com/83394650/124398815-0ce1a480-dd18-11eb-9aef-9d8a3797008b.png) |\n\n| Branch auswählen | Erneutes erfolgreiches Aufsetzen |\n|---|---|\n| ![image](https://user-images.githubusercontent.com/83394650/124398825-1408b280-dd18-11eb-985f-f28de94b8888.png) | ![image](https://user-images.githubusercontent.com/83394650/124398968-d3f5ff80-dd18-11eb-8f17-ee2d92900014.png) |\n\n### Optionen fürs Aufsetzen\nWir empfehlen [Visual Studio Code](https://github.com/microsoft/vscode) als Entwickerumgebung, entweder Lokal oder in einem Codespace.\n\n#### Codespace Setup\n\nDer einfachste Weg ist die Nutzung eines GitHub [Codespace](https://github.com/features/codespaces) (in der Beta). Erstellen Sie einfach einen Codespace vom Code Menü. Warten Sie bis der Codespace fertig aufgesetzt ist und öffnen Sie ein Konsolenfenster (Strg-\\`, Steuerung-Backquote) und:\n\n- Erstellen Sie eine .env-Datei und setzen Sie eine PUBLIC_URL\n- Starten Sie die Seite lokal mit `yarn start`\n- Oder kompilieren Sie eine lokale Kopie mit `yarn run build`\n\n#### Lokales Setup\nWenn Sie sich dazu entscheiden ein lokales Setup zu verwenden, stellen Sie sicher, dass Sie die folgenden Schritte beachten:\n\n- Nutzen Sie `yarn install` um die Abhängigkeiten zu installieren\n- Starten Sie die Seite lokal mit `yarn start`\n- Oder kompilieren Sie eine lokale Kopie mit `yarn run build`\n\nDie Demoseite ist nun unter \u003chttp://localhost:8000/\u003e verfügbar.\n\n#### Fehlerbehebung\n\n- Dieses Repository wird mit yarn getestet. Wenn Sie npm verwenden, könnten unerwartete Fehler auftreten.\n\nWenn Sie während des Aufsetzen auf andere Probleme stoßen, bitten wir Sie darum, Ihr Problem [zu melden](https://github.com/snek-at/jaen/issues), sodass wir die Dokumentation verbessern können.\n\n#### Editieren\n\nUm Ihre Seite zu editieren müssen Sie sich beim CMS anmelden.\u003cbr /\u003e\nDer Standardnutzer hierfür ist **snekman** und das Passwort **ciscocisco**.\n\n## [](#-anwendung)💻 Anwendung\n\n### Übersicht\n\n#### Seiten Einstellungen\n| Parameter                     | Typ       | Beschreibung | Wiki | Tutorial |\n|-------------------------------|:----------:|-------------|:----:|:--------:|\n| `TemplateName`             \t| string     | Der TemplateName definiert den Namen Ihrer Seite im CMS. |  |  |\n\n#### Felder\n| Feld                         | Parameter | Beschreibung | Wiki | Tutorial |\n|-------------------------------|------------|-------------|:----:|:--------:|\n| `TextField`             | fieldName \u003cbr/\u003e initValue \u003cbr/\u003e rtf | Ein TextField wird genutzt um editierbare Texte auf Ihre Seite hinzuzufügen. | [✅️](https://github.com/snek-at/jaen/wiki/TextField_ger-at) |  |\n| `ImageField`                  | fieldName \u003cbr/\u003e initValue | Das ImageField muss genutzt werden, wenn Sie Bilder auf Ihrer Seite brauchen. | [✅️](https://github.com/snek-at/jaen/wiki/ImageField_ger-at) |  |\n| `BlockContainer`                 | name \u003cbr/\u003e reverseOrder \u003cbr/\u003e blocks \u003cbr/\u003e wrap \u003cbr/\u003e wrapProps | Ein StreamField bietet Ihnen die Möglichkeit mehrere React-Components sooft wie Ihnen beliebt zu wiederholen. | [✅️](https://github.com/snek-at/jaen/wiki/BlockContainer_ger-at) |  |\n| `IndexField`                  | fieldName \u003cbr/\u003e fixedSlug \u003cbr/\u003e onRender | Das IndexField ist dafür da Links und Blöcke zu bauen, die Daten von Subseiten benötigen. \u003cbr /\u003e Mit dem fixedSlug Parameter können Sie entscheiden von welcher Seite Sie die Subseiten verwenden wollen. | [✅️](https://github.com/snek-at/jaen/wiki/IndexField_ger-at) |  |\n| `ChoiceField` | fieldName \u003cbr/\u003e options \u003cbr/\u003e initValue \u003cbr/\u003e onRender \u003cbr/\u003e onRenderPopover | Mithilfe des ChoiceFields können Sie React-Components bauen und den Administrator der Webseite entscheiden lassen, welchen davon er gerade braucht. Dafür haben Sie zwei Möglichkeiten. Wenn Sie alle Ihre Komponenten immer anzeigen wollen und z.B. nur die Farbe des aktiven ändern wollen oder Sie ein Boolean Verhalten benötigen, können Sie dem onRenderPopover ein null als Wert geben und die Auswahl im onRender definieren. Wenn aber nur einer Ihrer Komponenten angezeigt werden sollte können Sie ein selbst definiertes Popover in onRenderPopover dafür schreben. |  [✅️](https://github.com/snek-at/jaen/wiki/ChoiceField_ger-at) |  |\n\n\n### Page Settings\n```javascript\nimport {JaenTemplate} from '@snek-at/jaen-pages/src/types'\n\nconst HomePage: JaenTemplate = () =\u003e {...}\n\nHomePage.TemplateName = 'HomePage'\n\nexport default HomePage\n```\n\njaen-config.js\n```javascript\nmodule.exports = {\n  remote: 'snek-at/jaen-template',\n  plugins: {\n    pages: {\n      resolve: require('@snek-at/jaen-pages/jaen-register'),\n      templates: [require('./src/templates/SamplePage.tsx')]\n    }\n  }\n}\n```\ngatsby-config.js\n```javascript\nconst path = require('path')\n\nconst siteMetadata = require('./site-metadata')\n\nmodule.exports = {\n  siteMetadata,\n  plugins: [\n    '@snek-at/jaen',\n    {\n      resolve: '@snek-at/jaen-pages',\n      options: {\n        templates: {\n          SamplePage: path.resolve('src/templates/SamplePage.tsx')\n        }\n      }\n    }\n  ]\n}\n```\n### Fields\nFelder sind die Datenblöcke, die Sie verwenden können um Ihre React Apps für den Endnutzer bearbeitbar zu gestalten.\nDie Namen der Felder müssen auf der jeweiligen Seite einzigartig sein.\nEs wird empfohlen, aussagekräftige Namen zu nutzen.\n\n#### TextField\n\nMithilfe des TextFields können Sie editierbare RichTextFields (`rtf={true}`) oder ebenfalls editierbare SimpleTextFields (`rtf={false}`) auf Ihre Webseite bringen.\u003cdiv align=right\u003e[Wiki 📖](https://github.com/snek-at/jaen/wiki/TextField_ger-at)\u003c/div\u003e\n\n```javascript\nimport {fields, JaenTemplate} from '@snek-at/jaen-pages'\n\nconst HomePage: JaenTemplate = () =\u003e {\n  return(\n    \u003cfields.TextField \n      fieldName=\"hometext\"\n      initValue=\"\u003cp\u003eYour text\u003c/p\u003e\"\n      rtf={true}\n    /\u003e\n  )\n}\n\nHomePage.TemplateName=\"HomePage\"\nexport default HomePage\n\n```\n\n#### ImageField\n\nZum Einbetten von Bildern können Sie das ImageField nutzen. \u003cbr /\u003e\nEs funktioniert, indem ein Bild, welches auf der IPFS gespeichert wird, auf der Seite eingebettet wird.\u003cdiv align=right\u003e[Wiki 📖](https://github.com/snek-at/jaen/wiki/ImageField_ger-at)\u003c/div\u003e\n\n```javascript\nimport {fields, JaenTemplate} from '@snek-at/jaen-pages'\n\nconst HomePage: JaenTemplate = () =\u003e {\n  return(\n    \u003cfields.ImageField \n      fieldName=\"homeimage\"\n      initValue={{src: 'https://your.source', alt: 'homeimage', title: 'homeimage'}}\n    /\u003e\n  )\n}\n\nexport default HomePage\n```\n\n\n#### BlockContainer\n\nDer BlockContainer ermöglicht es Ihnen, editierbare Blocks in Ihre Seite einzubauen und diese so oft wie gewünscht wiederzuverwenden. Mit dem Wrap Parameter ist es Ihnen ermöglicht einen Chakra UI Wrap um die Blöcke zu setzen und wrapProps erlaubt das bestimmen der Parameter des Wraps. Um dieses Feld zu nutzen müssen Sie einen Block bauen.\u003cdiv align=right\u003e[Wiki 📖](https://github.com/snek-at/jaen/wiki/BlockContainer_ger-at)\u003c/div\u003e\n\n```javascript\nimport {BlockContainer, JaenTemplate} from '@snek-at/jaen-pages'\nimport {CardBlock} from '...'\n\nconst HomePage: JaenTemplate = () =\u003e {\n  return (\n    \u003cdiv style={{width: '50%'}}\u003e\n      \u003cBlockContainer\n        reverseOrder={false}\n        name=\"home-blockcontainer\"\n        blocks={[CardBlock]}\n\twrap={true}\n\twrapProps={{justify: 'center', spacing: '5'}}\n      /\u003e\n    \u003c/div\u003e\n  )\n}\n\nHomePage.TemplateName = 'HomePage'\n\nexport default HomePage\n```\n##### Chakra UI Wrap Beispiel\n\nDieses Beispiel zeigt fünf farbige Quadrate an, die untereinander einen Abstand von 1 rem haben, die in einem Flex sind, das in eine neue Zeile geht, wenn die Quadrate mehr Platz benötigen als das Browserfenster hat und die zentriert sind.\n\n```javascript\nimport {Wrap, Box} from '@chakra-ui/react'\nimport {fields} from '@snek-at/jaen-pages'\n\n\nconst Component = () =\u003e {\n  return(\n    \u003cWrap spacing=\"1rem\" justify=\"center\"\u003e\n      \u003cBox boxSize=\"300px\" bg=\"red\"/\u003e\n      \u003cBox boxSize=\"300px\" bg=\"teal\"/\u003e\n      \u003cBox boxSize=\"300px\" bg=\"orange\"/\u003e\n      \u003cBox boxSize=\"300px\" bg=\"blue\"/\u003e\n      \u003cBox boxSize=\"300px\" bg=\"green\"/\u003e\n    \u003c/Wrap\u003e\n  )\n}\n\n```\n\n#### IndexField\nWenn Sie einen Link auf die Unterseiten Ihrer Seite brauchen können Sie das IndexField verwenden. Der fixedSlug Parameter wird nicht gefordert. Standardmäßig wird die Seite, auf welcher sich das IndexField befindet, dafür genutzt. onRender erlaubt Ihnen die React-Components, die die Daten oder den Link der Unterseiten enthalten, zu bauen.\u003cdiv align=right\u003e[Wiki 📖](https://github.com/snek-at/jaen/wiki/IndexField_ger-at)\u003c/div\u003e\n\n```javascript\nimport {fields, JaenTemplate} from '@snek-at/jaen-pages'\n\nconst HomePage: JaenTemplate = () =\u003e {\n  return (\n    \u003cfields.IndexField\n      fieldName=\"home-indexfield\"\n      fixedSlug={'pageId'}\n      onRender={(page) =\u003e {\n        return(\n\t  [...]\n\t}}\n    /\u003e\n  )\n}\n\nHomePage.TemplateName = 'HomePage'\n\nexport default HomePage\n```\n\n#### ChoiceField\n\nMithilfe des ChoiceFields können Sie React-Components bauen und den Administrator der Webseite entscheiden lassen, welchen davon er gerade braucht. Dafür haben Sie zwei Möglichkeiten. Wenn Sie alle Ihre Komponenten immer anzeigen wollen und z.B. nur die Farbe des aktiven ändern wollen oder Sie ein Boolean Verhalten benötigen, können Sie dem onRenderPopover ein null als Wert geben und die Auswahl im onRender definieren. Wenn aber nur einer Ihrer Komponenten angezeigt werden sollte können Sie ein selbst definiertes Popover in onRenderPopover dafür schreben.\u003cdiv align=right\u003e[Wiki 📖](https://github.com/snek-at/jaen/wiki/ChoiceField_ger-at)\u003c/div\u003e\n\n\n```javascript\nimport {fields, JaenTemplate} from '@snek-at/jaen-pages'\n\nconst HomePage: JaenTemplate = () =\u003e {\n  return(\n    \u003cfields.ChoiceField \n      fieldName=\"home-choice\"\n      options={[...]}\n      onRenderPopover={(selection, options, select) =\u003e {\n        return [...]\n      }}\n      onRender={(selection, options, onSelect, isEditing) =\u003e {\n        return [...]\n      }}\n    /\u003e\n  )\n}\n\nHomePage.TemplateName = 'HomePage'\n\nexport default HomePage\n\n```\n\n### Blöcke\nDer Block ist der Eckstein des StreamFields. Mit seiner Hilfe können Sie React-Componenten bauen, welche im StreamField so oft wie gewünscht wiederholt werden können. In Blöcken können Sie alle verfügbaren Jaen Felder verwenden.\u003cdiv align=right\u003e[Wiki 📖](https://github.com/snek-at/jaen/wiki/Blocks_ger-at)\u003c/div\u003e\n\n```javascript\nimport {JaenBlock, fields} from '@snek-at/jaen-pages'\n\nconst CardBlock: JaenBlock = () =\u003e {\n  return (\n    \u003cdiv className=\"card\"\u003e\n      \u003ch1\u003e\n      \t\u003cfields.TextField \n      \t  fieldName=\"blocktext\"\n\t  initValue=\"\u003cp\u003ethis is your heading\u003c/p\u003e\"\n\t  rtf={false}\n\t/\u003e\n      \u003c/h1\u003e\n      \u003cfields.ImageField \n        fieldName=\"blockimage\"\n\tinitValue={{src: 'https://your.source', alt: 'yourAlt'}}\n\tstyle={{width: '300px', heigth: '180px'}}\n      /\u003e\n    \u003c/div\u003e\n  )\n}\n\nCardBlock.BlockName = 'CardBlock'\nCardBlock.BlockDisplayName = 'Card'\n\nexport default CardBlock\n```\n\n\n## [](#-wie-man-einen-bug-meldet-oder-eine-neuerung-beantragt)🐞 Wie man einen Bug meldet oder ein Feature beantragt\n\nHaben Sie einen Bug gefunden oder haben Sie eine Idee für ein neues Feature? Bitte sehen Sie vorher in den offenen und geschlossenen Issues nach, ob Ihr Problem vielleicht bereits behandelt wurde.\nWenn Sie den Bug oder die Idee darin nicht finden, [öffnen Sie bitte ein neues Issue](https://github.com/snek-at/jaen/issues/new/choose).\n\n## [](#-selbst-mitwirken)🤝 Selbst mitwirken\n![GitHub letzter Commit](https://img.shields.io/github/last-commit/snek-at/jaen)\n![GitHub Issues](https://img.shields.io/github/issues-raw/snek-at/jaen)\n![GitHub geschlossene Issues](https://img.shields.io/github/issues-closed-raw/snek-at/jaen?color=green)\n\nBitte lesen Sie unsere\n[Contibution Guidlines](https://github.com/snek-at/jaen/blob/master/CONTRIBUTING.md).\nDarin werden Sie die Anleitungen zum Öffnen von Issues, die Code Standards und Notizen zur Entwicklung finden.\n\nDer Code sollte unserem [Code Guide](https://github.com/snek-at/tonic/blob/master/STYLE_GUIDE.md) entsprechen, der von\n[snek-at](https://github.com/snek-at) aktuell gehalten wird.\n\n## [](#-danksagung)💚 Danksagung\n\nWir haben noch keine externen Entwickler. Um Ihren Namen hier zu sehen, [tragen Sie zu unserem Projekt bei](#-sebst-beitragen).\n\n## [](#-schöpfer)💼 Schöpfer\n\n\u003ctable border=\"0\"\u003e\n    \u003ctr\u003e\n\t \u003ctd\u003e\n      \u003ca href=\"https://github.com/schettn\"\u003e\n        \u003cimg src=\"https://avatars.githubusercontent.com/schettn?s=100\" alt=\"Avatar schettn\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003ca href=\"https://github.com/kleberbaum\"\u003e\n        \u003cimg src=\"https://avatars.githubusercontent.com/kleberbaum?s=100\" alt=\"Avatar kleberbaum\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003ca href=\"https://github.com/kleberbaum\"\u003e\n        \u003cimg src=\"https://avatars.githubusercontent.com/petute?s=100\" alt=\"Avatar petute\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003ca href=\"https://github.com/schettn\"\u003eNico Schett\u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003ca href=\"https://github.com/kleberbaum\"\u003eFlorian Kleber\u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003ca href=\"https://github.com/petute\"\u003eDaniel\u003cbr/\u003e Petutschnigg\u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## [](#-faqs)🤔 FAQs\n**Q:** Was bedeuten die Kategorien der Roadmap?\n* Fertig - Hoffentlich gefällt Ihnen das Feature. Gerne können Sie über Feedback oder Verbesserungsvorschläge berichten!\n* Fast geschafft - Wir sind dabei die letzten Änderungen vorzunehmen. Die Features in dieser Kategorie können in den nächsten zwei bis vier Wochen erwartet werden.\n* Wir arbeiten daran - Die Entwicklung hat gestartet. Wir arbeiten daran, es so schnell wie möglich zu vervollständigen.\n* In Planung - Wir evaluieren das Feature. Dies kann bedeuten, dass wir schon Designen oder dass wir noch darüber nachdenken wie es implementiert werden könnte. Diese Phase ist ein guter Zeitpunkt zum Einbringen von Ihren Ideen. \n\n**Q:** Warum sind auf der Roadmap keine Termine?\n\n**A:** Auf der Roadmap sind keine Termine, da wir wissen, dass sich die Umstände ändern können und wir nehmen uns den Spielraum, Sicherheitsprobleme zu lösen oder Nutzer zu untersützen. Manchmal müssen wir daher unsere Prioritäten ändern, wollen aber gerne Enttäuschungen vermeiden.\n\n**Q:** Wie kann ich eine Rückmeldung hinterlassen oder mehr Informationen erhalten?\n\n**A:** Bitte öffnen Sie ein Issue! Wenn das Issue einen Bug oder ein Sicherheitsproblem betrifft, beachten Sie bitte die oben stehnden Anleitung.\n\n**Q:** Wie kann ich ein Feature für die Roadmap beantragen?\n\n**A:** Bitte öffnen Sie ein Issue! Sie können [hier](https://github.com/snek-at/jaen/blob/master/CONTRIBUTING.MD) nachlesen was beim mitwirken zu beachten ist. Issues von der Community werden mit dem Tag \"Proposed\" gekennzeichnet und werden vom Team überprüft.\n\n## [](#-trivia):exploding_head: Trivia\n#### Name:\nIn Österreich ist der erste Monat des Jahres der Jänner. Da wir in diesem Monat mit der Arbeit an Jaen begonnen haben, bekam das Projekt seinen Namen.\n#### Aussprache:\nJaen wird entweder wie (Jän)ner [ˈjɛn] oder wie (Jan)uary [ˈdʒæn] ausgesprochen.\n#### Passwort:\nDas Standardpasswort ist **ciscocisco**. Der Ursprung hiervon liegt in unserer Schulzeit. In der Schule für Netzwerktechnik, die der Großteil des Gründerteams besuchte, war in den Cisco-Kursen das Passwort stets ciscocisco.\n#### Releases:\nJeder unserer Releases schmückt sich mit einem Lied. Hoffentlich haben Sie Spaß damit.\n#### Maskottchen:\nDas inoffizielle Maskottchen für Jaen ist eine junge Frau mit einer E-Gitarre.\n\n### \u003c3\n\n## [](#-urheberrechte-und-lizent)📝 Urheberrechte und Lizenz\n\n![GitHub Repository Lizenz](https://img.shields.io/badge/license-EUPL--1.2-blue)\n\nDas Nutzen dieses Source-Codes wird von der EUPL-1.2 Lizenz bestimmt sie ist in der LICENSE Datei unter https://snek.at/license zu finden.\n\n\u003c!--\n  SPDX-FileCopyrightText: Copyright © 2021 snek.at\n  SPDX-License-Identifier: EUPL-1.2\n  Use of this source code is governed by an EUPL-1.2 license that can be found\n  in the LICENSE file at https://snek.at/license\n--\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsnek-at%2Fjaen","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsnek-at%2Fjaen","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsnek-at%2Fjaen/lists"}