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

Was Sie erwartet

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

💪 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	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

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

Codespace Setup

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:

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 http://localhost:8000/ 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, 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

Seiten Einstellungen

Parameter	Typ	Beschreibung	Wiki	Tutorial
`TemplateName`	string	Der TemplateName definiert den Namen Ihrer Seite im CMS.

Felder

Feld	Parameter	Beschreibung	Wiki
`TextField`	fieldName initValue rtf	Ein TextField wird genutzt um editierbare Texte auf Ihre Seite hinzuzufügen.	✅️
`ImageField`	fieldName initValue	Das ImageField muss genutzt werden, wenn Sie Bilder auf Ihrer Seite brauchen.	✅️
`BlockContainer`	name reverseOrder blocks wrap wrapProps	Ein StreamField bietet Ihnen die Möglichkeit mehrere React-Components sooft wie Ihnen beliebt zu wiederholen.	✅️
`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.	✅️
`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.	✅️

Page Settings

import {JaenTemplate} from '@snek-at/jaen-pages/src/types'

const HomePage: JaenTemplate = () => {...}

HomePage.TemplateName = 'HomePage'

export default HomePage

jaen-config.js

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

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 📖

import {fields, JaenTemplate} from '@snek-at/jaen-pages'

const HomePage: JaenTemplate = () => {
  return(
    <fields.TextField 
      fieldName="hometext"
      initValue="<p>Your text</p>"
      rtf={true}
    />
  )
}

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 📖

import {fields, JaenTemplate} from '@snek-at/jaen-pages'

const HomePage: JaenTemplate = () => {
  return(
    <fields.ImageField 
      fieldName="homeimage"
      initValue={{src: 'https://your.source', alt: 'homeimage', title: 'homeimage'}}
    />
  )
}

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 📖

import {BlockContainer, JaenTemplate} from '@snek-at/jaen-pages'
import {CardBlock} from '...'

const HomePage: JaenTemplate = () => {
  return (
    <div style={{width: '50%'}}>
      <BlockContainer
        reverseOrder={false}
        name="home-blockcontainer"
        blocks={[CardBlock]}
	wrap={true}
	wrapProps={{justify: 'center', spacing: '5'}}
      />
    </div>
  )
}

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.

import {Wrap, Box} from '@chakra-ui/react'
import {fields} from '@snek-at/jaen-pages'


const Component = () => {
  return(
    <Wrap spacing="1rem" justify="center">
      <Box boxSize="300px" bg="red"/>
      <Box boxSize="300px" bg="teal"/>
      <Box boxSize="300px" bg="orange"/>
      <Box boxSize="300px" bg="blue"/>
      <Box boxSize="300px" bg="green"/>
    </Wrap>
  )
}

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 📖

import {fields, JaenTemplate} from '@snek-at/jaen-pages'

const HomePage: JaenTemplate = () => {
  return (
    <fields.IndexField
      fieldName="home-indexfield"
      fixedSlug={'pageId'}
      onRender={(page) => {
        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 📖

import {fields, JaenTemplate} from '@snek-at/jaen-pages'

const HomePage: JaenTemplate = () => {
  return(
    <fields.ChoiceField 
      fieldName="home-choice"
      options={[...]}
      onRenderPopover={(selection, options, select) => {
        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 📖

import {JaenBlock, fields} from '@snek-at/jaen-pages'

const CardBlock: JaenBlock = () => {
  return (
    <div className="card">
      <h1>
      	<fields.TextField 
      	  fieldName="blocktext"
	  initValue="<p>this is your heading</p>"
	  rtf={false}
	/>
      </h1>
      <fields.ImageField 
        fieldName="blockimage"
	initValue={{src: 'https://your.source', alt: 'yourAlt'}}
	style={{width: '300px', heigth: '180px'}}
      />
    </div>
  )
}

CardBlock.BlockName = 'CardBlock'
CardBlock.BlockDisplayName = 'Card'

export default CardBlock

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

🤝 Selbst mitwirken

Bitte lesen Sie unsere Contibution 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 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 nachlesen was beim mitwirken zu beachten ist. Issues von der Community werden mit dem Tag "Proposed" gekennzeichnet und werden vom Team überprüft.

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

Files

README.de-at.md

Latest commit

History

README.de-at.md

File metadata and controls

Snek Jaen

Was Sie erwartet

💪 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

Seiten Einstellungen

Felder

Page Settings

Fields

TextField

ImageField

BlockContainer

Chakra UI Wrap Beispiel

IndexField

ChoiceField

Blöcke

🐞 Wie man einen Bug meldet oder ein Feature beantragt

🤝 Selbst mitwirken

💚 Danksagung

💼 Schöpfer

🤔 FAQs

🤯 Trivia

Name:

Aussprache:

Passwort:

Releases:

Maskottchen:

<3

📝 Urheberrechte und Lizenz