Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/snek-at/jaen-template-v2
Get Up and Running in 5 Minutes.
https://github.com/snek-at/jaen-template-v2
jaen
Last synced: about 1 month ago
JSON representation
Get Up and Running in 5 Minutes.
- Host: GitHub
- URL: https://github.com/snek-at/jaen-template-v2
- Owner: snek-at
- License: 0bsd
- Created: 2021-07-04T12:13:42.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-05-13T11:06:50.000Z (over 1 year ago)
- Last Synced: 2023-05-13T12:21:18.029Z (over 1 year ago)
- Topics: jaen
- Language: Roff
- Homepage:
- Size: 32.6 MB
- Stars: 0
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.de-at.md
- License: COPYING
Awesome Lists containing this project
README
Snek Jaen Template
Sie befinden sich im offiziellen Jaen Template von snek-at.
Mit Jaen, dem innovativen, attraktiven gratis CMS Framework für ReactJS.
"Nur eine leere Schüssel kann man füllen." - Lao Tzu
Melde einen Bug
·
Beantrage ein Feature
·
Dokumentation
## [](#table-of-contents)What’s In This Document
- [💪 Motivation](#-motivation)
- [Jaen Features](#jaen-features)
- [Roadmap](#roadmap)
- [Nachricht um Sie zu inspirieren](#nachricht-um-sie-zu-inspirieren)
- [Warnhinweis](#warnhinweis)
- [🚀 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)
- [App Einstellungen](#app-einstellungen)
- [Seiten Einstellungen](#seiten-einstellungen)
- [Felder](#felder)
- [App Einstellungen](#app-einstellungen)
- [Seiten Einstellungen](#seiten-einstellungen)
- [Felder](#felder)
- [SimpleTextField](#simpletextfield)
- [SimpleRichTextField](#simplerichtextfield)
- [SimpleImageField](#simpleimagefield)
- [SimplePdfField](#simplepdffield)
- [StreamField](#streamfield)
- [IndexField](#indexfield)
- [Blöcke](#blöcke)
- [🐞 Wie man einen Bug meldet oder eine Neuerung beantragt](#-wie-man-einen-bug-meldet-oder-eine-neuerung-beantragt)
- [🤝 Selbst mitwirken](#-selbst-mitwirken)
- [💚 Danksagung](#-danksagung)
- [💼 Schöpfer](#-schöpfer)
- [🤔 FAQs](#-faqs)
- [📝 Urheberrechte und Lizenz](#-copyright-and-license)
## [](#-motivation)💪 Motivation
Ein CMS **sollte nicht** der definierende Teil einer Webapp sein. Auch Ecommerce sollte das nicht noch etwas anderes als 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.
One thing and one thing only with clean and well documented interfaces.
Customizable, extensible and open-source.
Spezialisiert mit gut und genau geführten Dokumentationen für die Schnittstellen.
### 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 man es braucht
* Das StreamField ermutigt flexiblen Inhalt ohne die Struktur zu gefährden
* Unterstützung für Bilder und eingebettete Inhalte
* Dezentralisiertes gratis Hosting über ein verteiltes Netzwerk
### Roadmap
| Feature | Fertig | Fast geschafft | Wir arbeiten daran | In Planung |
|-------------------------------|:---:|:---:|:---:|:---:|
| `IndexField` | ✅️ | | | |
| `RichTextField` | ✅️ | | | |
| `Email Support` | ✅️ | | | |
| `Fixed parent for IndexField` | ✅️ | | | |
| `TextField` | ✅️ | | | |
| `Dynamic Routes` | ✅️ | | | |
| `PdfField` | ✅️ | | | |
| `ImageField` | ✅️ | | | |
| `StreamField` | ✅️ | | | |
| `LinkField` | | ✅️ | | |
| `Gatsby` | | | ✅️ | |
| `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
Not for crybabies. Do not touch if you are afraid of being scratched a little.
Nichts für schwache Nerven.
## [](#-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 Einstullungsseite Ihres Repositorys auswählen. Danach müssen Sie den Anweisungen, die in den Bildern unter diesem Text gezeigt werden, befolgen.
| Erstes Aufsetzen fehlgeschlagen | Gehen sie zu Ihrem Pages einstellungs Tab |
|---|---|
|  |  |
| Branch auswählen | Erneutes erfolgreiches Aufsetzen |
|---|---|
|  |  |
### Optionen fürs Aufsetzen
Wir empfehlen [VSCode](https://github.com/microsoft/vscode) als Entwickerumgebung entweder Lokal oder in einem Codespace.
#### Codespace Setup
The easiest method is to use a GitHub [Codespace](https://github.com/features/codespaces) (in beta). Just create a GitHub Codespace from the Code menu. Wait for the Codespace to complete provisioning. When the Codespace has completed provisioning open a terminal window (Ctrl-`, Control-backquote) and:
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:
- Fügen Sie die [GitHub npm registry](https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry) hinzu `npm login --registry=https://npm.pkg.github.com`
- Erstellen sie eine .env und setzen Sie eine PUBLIC_URL
- Starten sie die Seite Lokal mit `npm start`
- Oder kompilieren sie eine lokale Kopie mit `npm run build`
#### Lokales Setup
Wenn Sie sich dazu entscheiden ein lokales Setup zu verwenden, stellen Sie sicher, dass Sie die folgenden Schritte beachten:
- Fügen Sie die [GitHub npm registry](https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry) hinzu `npm login --registry=https://npm.pkg.github.com`
- Nutzen Sie `npm install` um die Abhängigkeiten zu installieren
- Starten sie die Seite Lokal mit `npm start`
- Oder kompilieren sie eine lokale Kopie mit `npm run build`
Die Demoseite ist nun unter verfügbar.
#### Fehlerbehebung
Wenn Sie beim Aufsetzen des Templates Probleme haben können Sie die folgenden Dinge probieren:
- node-sass nutzt Node15. Wenn Sie Node16 verwenden können Sie nvm nutzen um mehrere Node Versionen zu Installieren.
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
#### App Einstellungen
| Field | Parameter | Beschreibung | Wiki | Tutorial |
|-------------------------------|------------|-------------|:----:|:--------:|
| `CMSProvider` | settings
pages | Der CMSProvider registriert die Jaen Applikation und ermöglicht es Daten(z.B. Felder) zwischen Jaen und den Seiten zu übertragen. | | |
#### Seiten Einstellungen
| Feld | Typ | Beschreibung | Wiki | Tutorial |
|-------------------------------|:----------:|-------------|:----:|:--------:|
| `PageType` | string | Der PageType definiert den Namen Ihrer Seite im CMS. | | |
| `ChildPages` | [Pages] | In ChildPages setzen Sie fest welche Arten von Seiten ein PageType als Unterseiten haben kann. | | |
#### Felder
| Feld | Parameter | Beschreibung | Wiki | Tutorial |
|-------------------------------|------------|-------------|:----:|:--------:|
| `SimpleTextField` | name
| Ein SimpleTextField wird genutzt um kurze editierbare Texte auf Ihre Seite hinzuzufügen. | [✅️](https://github.com/snek-at/jaen/wiki/SimpleTextField) | |
| `SimpleRichTextField` | name
| SimpleRichtextField wird genutzt um größere RichText Blöcke auf Ihre Seite zu bringen. | [✅️](https://github.com/snek-at/jaen/wiki/SimpleRichTextField) | |
| `SimpleImageField` | name
| Mit dem SimpleImageField können Sie ein Bild auf Ihrer Webseite einbetten. | [✅️](https://github.com/snek-at/jaen/wiki/SimpleImageField) | |
| `ImageField` | fieldOptions
imageClassName
imageStyle | Das ImageField muss genutzt werden, wenn Sie Bilder auf Ihrer Seite brauchen, die gestylt werden müssen. Hiefür haben Sie die Möglichkeiten, einen className mit dem imageClassName Parameter zu setzen oder Sie stylen das Bild direkt mit dem imageStyle. | [✅️](https://github.com/snek-at/jaen/wiki/ImageField) | |
| `SimplePdfField` | name
pdfStyle | Wenn Sie auf Ihrer Seite eine PDF einbetten wollen können Sie dies mit dem SimplePdfField. | [✅️](https://github.com/snek-at/jaen/wiki/SimplePdfField) | |
| `StreamField` | name
reverseOrder
blocks| Ein StreamField bietet Ihnen die Möglichkeit mehrere React-Components sooft wie Ihnen beliebt zu wiederholen. | [✅️](https://github.com/snek-at/jaen/wiki/StreamField) | |
| `IndexField` | fixedSlug
outerElement
renderItem | 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) | |
### App Settings
```javascript
import {CMSProvider} from '@snek-at/jaen'
import {HomePage} from '...'
import ImprintPage from '...'
const App: React.FC = () => {
return (
)
}
)
```
### Page Settings
```javascript
import ImprintPage from '...'
const HomePage: ConnectedPageType = () => {...}
HomePage.PageType = 'HomePage'
HomePage.ChildPages = [ImprintPage]
export default HomePage
```
### Fields
Felde 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 beschreibende Namen zu nutzen.
#### SimpleTextField
Das SimpleTextField ist einfach zu nutzen. Geben Sie dem Feld einfach einen Namen.
[Wiki 📖](https://github.com/snek-at/jaen/wiki/SimpleTextField)
```javascript
import {SimpleTextField} from '@snek-at/jaen'
const HomePage: ConnectedPageType = () => {
return (
)
}
[...]
export default HomePage
```
#### SimpleRichTextField
Auch das SimpleRichTextField ist einfach zu nutzen, da man dem Feld nur einen Namen geben muss.
[Wiki 📖](https://github.com/snek-at/jaen/wiki/SimpleRichTextField)
```javascript
import {SimpleRichTextField} from '@snek-at/jaen'
const HomePage: ConnectedPageType = () => {
return (
)
}
[...]
export default HomePage
```
#### SimpleImageField
Zum einbetten von Bildern können Sie das SimpleImageField nutzen.
Es funktioniert indem ein Bild, das auf der IPFS gespeichert wird, auf der Seite eingebetter wird.
[Wiki 📖](https://github.com/snek-at/jaen/wiki/SimpleImageField)
```javascript
import {SimpleImageField} from '@snek-at/jaen'
const HomePage: ConnectedPageType = () => {
return (
)
}
[...]
export default HomePage
```
#### ImageField
Zusätzlich zum Namen, den Sie dem SimpleImageField geben müssen, hat das ImageField auch noch die Möglichkeit das Bild zu stylen indem man einen imageClassName oder einen imageStyle hinzufügt.
[Wiki 📖](https://github.com/snek-at/jaen/wiki/ImageField)
```javascript
import {ImageField} from '@snek-at/jaen'
const HomePage: ConnectedPageType = () => {
return (
)
}
[...]
export default HomePage
```
#### SimplePdfField
Das SimplePdfField erlaubt es Ihnen eine auf der IPFS gespeicherte PDF-Datei einzubetten.
[Wiki 📖](https://github.com/snek-at/jaen/wiki/SimplePdfField)
```javascript
import {SimplePdfField} from '@snek-at/jaen'
const HomePage: ConnectedPageType = () => {
return (
)
}
[...]
export default HomePage
```
#### StreamField
Das StreamField ermöglicht es Ihnen editierbare Blocks in Ihre Seite einzubauen und diese sooft wie gewünscht wiederzuverwenden. Um dieses Feld zu nutzen müssen Sie einen Block bauen.
[Wiki 📖](https://github.com/snek-at/jaen/wiki/StreamField)
```javascript
import {StreamField} from '@snek-at/jaen'
import {CardBlock} from '...'
const HomePage: ConnectedPageType = () => {
return (
)
}
[...]
export default HomePage
```
#### IndexField
Wenn Sie einen Link auf die Subseiten Ihrer Seite brauchen können Sie das IndexField verwenden. Der fixedSlug Parameter wird nicht gefordert. Standardmäßig wird die Seite auf der das IndexField ist dafür genutzt. Das outerElement ist HTML-Tags der Ihre Links umgiebt und renderItem erlaubt Ihnen die React-Components, die die Daten oder den Link der Subseiten enthalten, zu bauen.
[Wiki 📖](https://github.com/snek-at/jaen/wiki/IndexField)
```javascript
import {IndexField} from '@snek-at/jaen'
const HomePage: ConnectedPageType = () => {
return (
}
renderItem={(item, key, navigate) => (
Slug: {item.slug} Title: {item.title}{' '}
navigate()}>Goto
)}
/>
)
}
[...]
export default HomePage
```
### Blöcke
Der Block ist der Eckstein des StreamFields. Mit seiner Hilfe können Sie React-Componenten bauen, die im StreamField sooft wie gewünscht wiederholt werden können.
[Wiki 📖](https://github.com/snek-at/jaen/wiki/Blocks)
```javascript
import {
BC,
prepareBlocks,
ImageField,
EditableField,
RichTextField
} from '@snek-at/jaen'
type BlockType = {
title: string
extra: string
text: string
}
const Block: BC = ({
fieldOptions,
streamFieldWidth
}) => {
const blocks = prepareBlocks(Block, fieldOptions)
return (
<>
{title}
{blocks['text']}
{blocks['image']}
{blocks['extra']}
>
)
}
Block.BlockType = 'Block'
Block.BlockFields = {
image: ImageField,
title: EditableField,
extra: EditableField,
text: RichTextField
}
export default Block
```
## [](#-wie-man-einen-bug-meldet-oder-eine-neuerung-beantragt)🐞 Wie man einen Bug meldet oder eine Neuerung beantragt
Haben Sie einen Bug gefunden oder haben Sie eine Idee für einen neuen Bestandteil? Bitte sehen Sie zuvor in den offenen und geschlossenen Issues nach, ob Ihr Problem schon 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
[Contibutions 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 Roadmap Kategorien?
* Fertig - Hoffentlich haben Sie spaß damit. Hinterlassen Sie uns eine Rückmeldung über Ihre Erfahrungen!
* Fast geschafft - Wir sind dabei die letzten Änderungen vorzunehmen. Die Features in dieser kategorie können in den nächsten 2-4 Wochen erwartet werden.
* Wir arbeiten daran - Die Entwicklung hat gestartet. Wir arbeiten daran es so schnell und gut wie möglich zu vervollständigen.
* In Planung - Wir denken darüber nach. Dies kann bedeuten, dass wir schon designen oder das wir noch darüber nachdenken wie es funktionieren könnte. Diese Phase ist ein guter Zeitpunkt um vorzuschlagen, wie Sie gern ein Feature sehen würden und um Design Ideen einzureichen.
**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 wollen den Spielraum um Sicherheitsprobleme zu lösen oder Nutzer zu untersützen. Manchmal müssen wir daher unsere Prioritäten ändern und wolen es aber gerne vermeiden Nutzer zu enttäuschen.
**Q:** Wie kann ich eine Rückmeldung hinterlassen oder mehr Information 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.
## [](#-urheberrechte-und-lizent)📝 Urheberrechte und Lizenz
Das nutzen dieses SourceCodes wird von der EUPL-1.2 Lizenz bestimmt sie ist in der LICENSE Datei unter https://snek.at/license zu finden.