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

What’s In This Document

💪 Motivation
🚀 Beginne in 5 Minuten zu arbeiten
💻 Anwendung
🐞 Wie man einen Bug meldet oder eine Neuerung beantragt
🤝 Selbst mitwirken
💚 Danksagung
💼 Schöpfer
🤔 FAQs
📝 Urheberrechte und Lizenz

💪 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

Vom Template auf Github generieren

Vom Template generieren	Wichtig ist, dass das Repository öffentlich ist und, dass Sie nicht alle Branches inkludieren

Erste Schritte

Der GITHUB_TOKENhat 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 als Entwickerumgebung entweder Lokal oder in einem Codespace.

Codespace Setup

The easiest method is to use a GitHub Codespace (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 (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 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 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 http://localhost:3000/ 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, 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

Ü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
`SimpleTextField`	name	Ein SimpleTextField wird genutzt um kurze editierbare Texte auf Ihre Seite hinzuzufügen.	✅️
`SimpleRichTextField`	name	SimpleRichtextField wird genutzt um größere RichText Blöcke auf Ihre Seite zu bringen.	✅️
`SimpleImageField`	name	Mit dem SimpleImageField können Sie ein Bild auf Ihrer Webseite einbetten.	✅️
`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.	✅️
`SimplePdfField`	name pdfStyle	Wenn Sie auf Ihrer Seite eine PDF einbetten wollen können Sie dies mit dem SimplePdfField.	✅️
`StreamField`	name reverseOrder blocks	Ein StreamField bietet Ihnen die Möglichkeit mehrere React-Components sooft wie Ihnen beliebt zu wiederholen.	✅️
`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.	✅️

App Settings

import {CMSProvider} from '@snek-at/jaen'

import {HomePage} from '...'
import ImprintPage from '...'

const App: React.FC = () => {
  return (
    <div style={{margin: 150}}>
      <CMSProvider
        settings={{gitRemote: process.env.REACT_APP_JAEN_GIT_REMOTE}}
        pages={[HomePage, ImprintPage]}></CMSProvider>
    </div>
  )
}
)

Page Settings

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 📖

import {SimpleTextField} from '@snek-at/jaen'

const HomePage: ConnectedPageType = () => {
  return (
    <SimpleTextField name="stffield" />
  )
}

[...]

export default HomePage

SimpleRichTextField

Auch das SimpleRichTextField ist einfach zu nutzen, da man dem Feld nur einen Namen geben muss.

Wiki 📖

import {SimpleRichTextField} from '@snek-at/jaen'

const HomePage: ConnectedPageType = () => {
  return (
    <SimpleRichTextField name="srtffield" />
  )
}

[...]

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 📖

import {SimpleImageField} from '@snek-at/jaen'

const HomePage: ConnectedPageType = () => {
  return (
    <SimpleImageField
      name="siffield"
    />
  )
}

[...]

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 📖

import {ImageField} from '@snek-at/jaen'

const HomePage: ConnectedPageType = () => {
  return (
    <ImageField
      fieldOptions={{fieldName: "iffield"}}
      imageClassName="iffield"
      imageStyle={{width: '500px', height: '500px', objectFit: 'cover'}}
    />
  )
}

[...]

export default HomePage

SimplePdfField

Das SimplePdfField erlaubt es Ihnen eine auf der IPFS gespeicherte PDF-Datei einzubetten.

Wiki 📖

import {SimplePdfField} from '@snek-at/jaen'

const HomePage: ConnectedPageType = () => {
  return (
     <SimplePdfField name="spffield" pdfStyle={{height: 1000, width: 1000}} />
  )
}

[...]

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 📖

import {StreamField} from '@snek-at/jaen'
import {CardBlock} from '...'

const HomePage: ConnectedPageType = () => {
  return (
    <div style={{width: '50%', display: 'table'}}>
      <StreamField
        reverseOrder={false}
        name={'timeline'}
        blocks={[CardBlock]}
      />
    </div>
  )
}

[...]

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 📖

import {IndexField} from '@snek-at/jaen'

const HomePage: ConnectedPageType = () => {
  return (
    <IndexField
      fixedSlug={'home'}
      outerElement={() => <div />}
      renderItem={(item, key, navigate) => (
        <p key={key}>
          Slug: {item.slug} Title: {item.title}{' '}
          <button onClick={() => navigate()}>Goto</button>
        </p>
       )}
    />
  )
}

[...]

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 📖

import {
  BC,
  prepareBlocks,
  ImageField,
  EditableField,
  RichTextField
} from '@snek-at/jaen'

type BlockType = {
  title: string
  extra: string
  text: string
  }

const Block: BC<BlockType> = ({
  fieldOptions,
  streamFieldWidth
}) => {
  const blocks = prepareBlocks<BlockType>(Block, fieldOptions)

  return (
    <>
      <div className="card">
        <h1>{title}</h1>
        {blocks['text']}
        {blocks['image']}
        {blocks['extra']}
      </div>
    </>
  )
}

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

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.

🤝 Selbst mitwirken

Bitte lesen Sie unsere Contibutions Guidlines. Darin werden Sie die Anleitungen zum öffnen von Issues, die Code Standards und Notizen zur Entwicklung finden.

Der Code sollte unserem Code Guide entsprechen, der von snek-at aktuell gehalten wird.

💚 Danksagung

Wir haben noch keine externen Entwickler. Um Ihren Namen hier zu sehen, tragen Sie zu unserem Projekt bei.

💼 Schöpfer


Nico Schett	Florian Kleber	Daniel Petutschnigg

🤔 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 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 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.

Files

README.de-at.md

Latest commit

History

README.de-at.md

File metadata and controls

Snek Jaen Template

What’s In This Document

💪 Motivation

Jaen Features

Roadmap

Nachricht um Sie zu inspirieren

Disclaimer

🚀 Beginne in 5 Minuten zu arbeiten

Vom Template auf Github generieren

Erste Schritte

Optionen fürs Aufsetzen

Codespace Setup

Lokales Setup

Fehlerbehebung

Editieren

💻 Anwendung

Übersicht

App Einstellungen

Seiten Einstellungen

Felder

App Settings

Page Settings

Fields

SimpleTextField

SimpleRichTextField

SimpleImageField

ImageField

SimplePdfField

StreamField

IndexField

Blöcke

🐞 Wie man einen Bug meldet oder eine Neuerung beantragt

🤝 Selbst mitwirken

💚 Danksagung

💼 Schöpfer

🤔 FAQs

📝 Urheberrechte und Lizenz