Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/snek-at/jaen
Serverless CMS framework for ReactJS w/ IPFS and GitHub Workflows.
https://github.com/snek-at/jaen
cms cms-framework gatsby gatsbyjs github-actions github-pages ipfs react reactjs serverless serverless-framework
Last synced: about 2 months ago
JSON representation
Serverless CMS framework for ReactJS w/ IPFS and GitHub Workflows.
- Host: GitHub
- URL: https://github.com/snek-at/jaen
- Owner: snek-at
- License: other
- Created: 2021-07-03T23:17:30.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-08-08T13:22:14.000Z (5 months ago)
- Last Synced: 2024-10-09T12:42:42.390Z (3 months ago)
- Topics: cms, cms-framework, gatsby, gatsbyjs, github-actions, github-pages, ipfs, react, reactjs, serverless, serverless-framework
- Language: TypeScript
- Homepage:
- Size: 8.94 MB
- Stars: 6
- Watchers: 2
- Forks: 3
- Open Issues: 11
-
Metadata Files:
- Readme: README.de-at.md
- License: COPYING
Awesome Lists containing this project
README
Snek Jaen
Sie befinden sich im offiziellen Jaen Projekt von snek-at.
Mit Jaen, dem innovativen, attraktiven und offenem CMS Framework für ReactJS.
"Nur eine leere Schüssel kann man füllen." - Lao Tzu
Melde einen Bug
·
Beantrage ein Feature
·
Dokumentation
Read this wiki in a different language: [English](https://github.com/snek-at/jaen/blob/docs/update-readme/README.md)
## [](#table-of-contents)Was Sie erwartet
- [💪 Motivation](#-motivation)
- [Jaen Features](#jaen-features)
- [Roadmap](#roadmap)
- [Nachricht um Sie zu inspirieren](#nachricht-um-sie-zu-inspirieren)
- [Disclaimer](#disclaimer)
- [🚀 Beginne in 5 Minuten zu arbeiten](#-beginne-in-5-minuten-zu-arbeiten)
- [Vom Template auf GitHub generieren](#vom-template-auf-github-generieren)
- [Erste Schritte](#erste-schritte)
- [Optionen fürs Aufsetzen](#optionen-fürs-aufsetzen)
- [Codespace Setup](#codespace-setup)
- [Lokales Setup](#lokales-setup)
- [Fehlerbehebung](#fehlerbehebung)
- [Editieren](#editieren)
- [💻 Anwendung](#-anwendung)
- [Übersicht](#übersicht)
- [Seiten Einstellungen](#seiten-einstellungen)
- [Felder](#felder)
- [Seiten Einstellungen](#seiten-einstellungen)
- [Felder](#felder)
- [TextField](textfield)
- [ImageField](#imagefield)
- [BlockContainer](#blockcontainer)
- [IndexField](#indexfield)
- [ChoiceField](#choicefield)
- [Blöcke](#blöcke)
- [🐞 Wie man einen Bug meldet oder ein Feature beantragt](#-wie-man-einen-bug-meldet-oder-ein-feature-beantragt)
- [🤝 Selbst mitwirken](#-selbst-mitwirken)
- [💚 Danksagung](#-danksagung)
- [💼 Schöpfer](#-schöpfer)
- [🤔 FAQs](#-faqs)
- [:exploding_head: Trivia](#exploding_head-trivia)
- [📝 Urheberrechte und Lizenz](#-copyright-and-license)
## [](#-motivation)💪 Motivation
Ein CMS **sollte nicht** der definierende Teil einer Webapp sein. Auch E-Commerce sollte das nicht, sondern nur Ihr Code.
ERP Integration **sollte** den Entwickler **nicht** dazu zwingen Kurven zu schneiden.
- Jaen **wird Ihr** Nutzererlebnis **nicht** beeinträchtigen.
- Jaen **wird Ihr** Anwendungsdesign **nicht** herausfordern.
- Jaen gibt **Ihnen** die Kontrolle.
Spezialisiert mit gut und genau geführten Dokumentationen für die Schnittstellen.
Flexibel, erweiterbar und Open-Source.
### Jaen Features
* Eine schnelle, attraktive "What you see is what you get" Oberfläche für Editoren
* Die komplette Kontrolle über die Struktur und das Design des Frontends
* Von Natur aus schnell, Zwischenspeicher-freundlich wenn notwendig
* Das StreamField ermutigt flexiblen Inhalt ohne die Struktur zu gefährden
* Unterstützung für Bilder und eingebettete Inhalte
* Dezentralisiertes, kostenloses Hosting über ein verteiltes Netzwerk
### Roadmap
| Feature | Fertig | Fast geschafft | Wir arbeiten daran | In Planung |
|-------------------------------|:---:|:---:|:---:|:---:|
| `IndexField` | ✅️ | | | |
| `Email Support` | ✅️ | | | |
| `Fixed parent for IndexField` | ✅️ | | | |
| `TextField` | ✅️ | | | |
| `Dynamic Routes` | ✅️ | | | |
| `ImageField` | ✅️ | | | |
| `BlockContainer` | ✅️ | | | |
| `ChoiceField` | ✅️ | | | |
| `Gatsby` | ✅️ | | | |
| `PdfField` | | ✅️ | | |
| `LinkField` | | ✅️ | | |
| `Converter (HELMUT)` | | | | ✅️ |
| `Smart Converter (SMARTMUT)` | | | | ✅️ |
| `E-Commerce` | | | | ✅️ |
| `User Management` | | | | ✅️ |
| `Email Templates` | | | | ✅️ |
| `Development Tools` | | | | ✅️ |
| `Snek Editor` | | | | ✅️ |
| `YT Tutorials` | | | | ✅️ |
#### Nachricht um Sie zu inspirieren
In einem Hamsterrad zu rennen ist nicht inspirierend.
#### Disclaimer
Nichts für schwache Nerven. Wenn Sie sich dazu entscheiden Jaen zu nutzen, könnten Sie einige Kratzer abbekommen.
## [](#-beginne-in-5-minuten-zu-arbeiten)🚀 Beginne in 5 Minuten zu arbeiten
### Vom Template [auf GitHub generieren](https://github.com/snek-at/jaen-template/generate)
| Vom Template generieren | Wichtig ist, dass das Repository öffentlich ist und, dass Sie nicht alle Branches inkludieren |
|---|---|
|  |  |
### Erste Schritte
Der `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.
| Erstes Aufsetzen fehlgeschlagen | Gehen sie zu Ihrem Pages einstellungs Tab |
|---|---|
|  |  |
| Branch auswählen | Erneutes erfolgreiches Aufsetzen |
|---|---|
|  |  |
### Optionen fürs Aufsetzen
Wir empfehlen [Visual Studio Code](https://github.com/microsoft/vscode) als Entwickerumgebung, entweder Lokal oder in einem Codespace.
#### Codespace Setup
Der 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:
- Erstellen Sie eine .env-Datei und setzen Sie eine PUBLIC_URL
- Starten Sie die Seite lokal mit `yarn start`
- Oder kompilieren Sie eine lokale Kopie mit `yarn run build`
#### Lokales Setup
Wenn Sie sich dazu entscheiden ein lokales Setup zu verwenden, stellen Sie sicher, dass Sie die folgenden Schritte beachten:
- Nutzen Sie `yarn install` um die Abhängigkeiten zu installieren
- Starten Sie die Seite lokal mit `yarn start`
- Oder kompilieren Sie eine lokale Kopie mit `yarn run build`
Die Demoseite ist nun unter verfügbar.
#### Fehlerbehebung
- Dieses Repository wird mit yarn getestet. Wenn Sie npm verwenden, könnten unerwartete Fehler auftreten.
Wenn 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.
#### Editieren
Um Ihre Seite zu editieren müssen Sie sich beim CMS anmelden.
Der Standardnutzer hierfür ist **snekman** und das Passwort **ciscocisco**.
## [](#-anwendung)💻 Anwendung
### Übersicht
#### Seiten Einstellungen
| Parameter | Typ | Beschreibung | Wiki | Tutorial |
|-------------------------------|:----------:|-------------|:----:|:--------:|
| `TemplateName` | string | Der TemplateName definiert den Namen Ihrer Seite im CMS. | | |
#### Felder
| Feld | Parameter | Beschreibung | Wiki | Tutorial |
|-------------------------------|------------|-------------|:----:|:--------:|
| `TextField` | fieldName
initValue
rtf | Ein TextField wird genutzt um editierbare Texte auf Ihre Seite hinzuzufügen. | [✅️](https://github.com/snek-at/jaen/wiki/TextField_ger-at) | |
| `ImageField` | fieldName
initValue | Das ImageField muss genutzt werden, wenn Sie Bilder auf Ihrer Seite brauchen. | [✅️](https://github.com/snek-at/jaen/wiki/ImageField_ger-at) | |
| `BlockContainer` | name
reverseOrder
blocks
wrap
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) | |
| `IndexField` | fieldName
fixedSlug
onRender | Das IndexField ist dafür da Links und Blöcke zu bauen, die Daten von Subseiten benötigen.
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) | |
| `ChoiceField` | fieldName
options
initValue
onRender
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) | |
### Page Settings
```javascript
import {JaenTemplate} from '@snek-at/jaen-pages/src/types'
const HomePage: JaenTemplate = () => {...}
HomePage.TemplateName = 'HomePage'
export default HomePage
```
jaen-config.js
```javascript
module.exports = {
remote: 'snek-at/jaen-template',
plugins: {
pages: {
resolve: require('@snek-at/jaen-pages/jaen-register'),
templates: [require('./src/templates/SamplePage.tsx')]
}
}
}
```
gatsby-config.js
```javascript
const path = require('path')
const siteMetadata = require('./site-metadata')
module.exports = {
siteMetadata,
plugins: [
'@snek-at/jaen',
{
resolve: '@snek-at/jaen-pages',
options: {
templates: {
SamplePage: path.resolve('src/templates/SamplePage.tsx')
}
}
}
]
}
```
### Fields
Felder sind die Datenblöcke, die Sie verwenden können um Ihre React Apps für den Endnutzer bearbeitbar zu gestalten.
Die Namen der Felder müssen auf der jeweiligen Seite einzigartig sein.
Es wird empfohlen, aussagekräftige Namen zu nutzen.
#### TextField
Mithilfe des TextFields können Sie editierbare RichTextFields (`rtf={true}`) oder ebenfalls editierbare SimpleTextFields (`rtf={false}`) auf Ihre Webseite bringen.
[Wiki 📖](https://github.com/snek-at/jaen/wiki/TextField_ger-at)
```javascript
import {fields, JaenTemplate} from '@snek-at/jaen-pages'
const HomePage: JaenTemplate = () => {
return(
)
}
HomePage.TemplateName="HomePage"
export default HomePage
```
#### ImageField
Zum Einbetten von Bildern können Sie das ImageField nutzen.
Es funktioniert, indem ein Bild, welches auf der IPFS gespeichert wird, auf der Seite eingebettet wird.
[Wiki 📖](https://github.com/snek-at/jaen/wiki/ImageField_ger-at)
```javascript
import {fields, JaenTemplate} from '@snek-at/jaen-pages'
const HomePage: JaenTemplate = () => {
return(
)
}
export default HomePage
```
#### BlockContainer
Der 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.
[Wiki 📖](https://github.com/snek-at/jaen/wiki/BlockContainer_ger-at)
```javascript
import {BlockContainer, JaenTemplate} from '@snek-at/jaen-pages'
import {CardBlock} from '...'
const HomePage: JaenTemplate = () => {
return (
)
}
HomePage.TemplateName = 'HomePage'
export default HomePage
```
##### Chakra UI Wrap Beispiel
Dieses 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.
```javascript
import {Wrap, Box} from '@chakra-ui/react'
import {fields} from '@snek-at/jaen-pages'
const Component = () => {
return(
)
}
```
#### IndexField
Wenn 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.
[Wiki 📖](https://github.com/snek-at/jaen/wiki/IndexField_ger-at)
```javascript
import {fields, JaenTemplate} from '@snek-at/jaen-pages'
const HomePage: JaenTemplate = () => {
return (
{
return(
[...]
}}
/>
)
}
HomePage.TemplateName = 'HomePage'
export default HomePage
```
#### ChoiceField
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.
[Wiki 📖](https://github.com/snek-at/jaen/wiki/ChoiceField_ger-at)
```javascript
import {fields, JaenTemplate} from '@snek-at/jaen-pages'
const HomePage: JaenTemplate = () => {
return(
{
return [...]
}}
onRender={(selection, options, onSelect, isEditing) => {
return [...]
}}
/>
)
}
HomePage.TemplateName = 'HomePage'
export default HomePage
```
### Blöcke
Der 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.
[Wiki 📖](https://github.com/snek-at/jaen/wiki/Blocks_ger-at)
```javascript
import {JaenBlock, fields} from '@snek-at/jaen-pages'
const CardBlock: JaenBlock = () => {
return (
)
}
CardBlock.BlockName = 'CardBlock'
CardBlock.BlockDisplayName = 'Card'
export default CardBlock
```
## [](#-wie-man-einen-bug-meldet-oder-eine-neuerung-beantragt)🐞 Wie man einen Bug meldet oder ein Feature beantragt
Haben 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.
Wenn Sie den Bug oder die Idee darin nicht finden, [öffnen Sie bitte ein neues Issue](https://github.com/snek-at/jaen/issues/new/choose).
## [](#-selbst-mitwirken)🤝 Selbst mitwirken
Bitte lesen Sie unsere
[Contibution Guidlines](https://github.com/snek-at/jaen/blob/master/CONTRIBUTING.md).
Darin werden Sie die Anleitungen zum Öffnen von Issues, die Code Standards und Notizen zur Entwicklung finden.
Der Code sollte unserem [Code Guide](https://github.com/snek-at/tonic/blob/master/STYLE_GUIDE.md) entsprechen, der von
[snek-at](https://github.com/snek-at) aktuell gehalten wird.
## [](#-danksagung)💚 Danksagung
Wir haben noch keine externen Entwickler. Um Ihren Namen hier zu sehen, [tragen Sie zu unserem Projekt bei](#-sebst-beitragen).
## [](#-schöpfer)💼 Schöpfer
Nico Schett
Florian Kleber
Daniel
Petutschnigg
## [](#-faqs)🤔 FAQs
**Q:** Was bedeuten die Kategorien der Roadmap?
* Fertig - Hoffentlich gefällt Ihnen das Feature. Gerne können Sie über Feedback oder Verbesserungsvorschläge berichten!
* 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.
* Wir arbeiten daran - Die Entwicklung hat gestartet. Wir arbeiten daran, es so schnell wie möglich zu vervollständigen.
* 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.
**Q:** Warum sind auf der Roadmap keine Termine?
**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.
**Q:** Wie kann ich eine Rückmeldung hinterlassen oder mehr Informationen erhalten?
**A:** Bitte öffnen Sie ein Issue! Wenn das Issue einen Bug oder ein Sicherheitsproblem betrifft, beachten Sie bitte die oben stehnden Anleitung.
**Q:** Wie kann ich ein Feature für die Roadmap beantragen?
**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.
## [](#-trivia):exploding_head: Trivia
#### Name:
In Ö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.
#### Aussprache:
Jaen wird entweder wie (Jän)ner [ˈjɛn] oder wie (Jan)uary [ˈdʒæn] ausgesprochen.
#### Passwort:
Das 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.
#### Releases:
Jeder unserer Releases schmückt sich mit einem Lied. Hoffentlich haben Sie Spaß damit.
#### Maskottchen:
Das inoffizielle Maskottchen für Jaen ist eine junge Frau mit einer E-Gitarre.
### <3
## [](#-urheberrechte-und-lizent)📝 Urheberrechte und Lizenz
Das 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.