Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/snek-at/agt-guntrade-shop
https://github.com/snek-at/agt-guntrade-shop
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/snek-at/agt-guntrade-shop
- Owner: snek-at
- License: 0bsd
- Created: 2021-10-25T08:59:05.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2022-05-17T10:33:20.000Z (over 2 years ago)
- Last Synced: 2023-03-04T05:48:49.002Z (almost 2 years ago)
- Language: TypeScript
- Size: 10.7 MB
- Stars: 0
- Watchers: 1
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: COPYING
Awesome Lists containing this project
README
Snek Jaen-Template
This is the official Jaen[ˈdʒæn] template provided by snek-at.
Featuring Jaen the free, hot and secure CMS framework for ReactJS.
"A bowl is most useful when it is empty." - Lao Tzu
Report bug
·
Request feature
·
Documentation
## [](#table-of-contents)What’s In This Document
- [💪 Motivation](#-motivation)
- [Jaen Features](#jaen-features)
- [Roadmap](#roadmap)
- [Msg inspiring PPL](#msg-inspiring-ppl)
- [Disclaimer](#disclaimer)
- [🚀 Get Up and Running in 5 Minutes](#-get-up-and-running-in-5-minutes)
- [Generate from template Generate Jaen on GitHub](#generate-from-template-generate-jaen-on-github)
- [First Deployment](#first-deployment)
- [Deployment Options](#deployment-options)
- [Codespace Setup](#codespace-setup)
- [Local Setup](#local-setup)
- [Troubleshooting](#troubleshooting)
- [Editing](#editing)
- [💻 How to Code](#-how-to-code)
- [Overview](#overview)
- [App Settings](#app-settings)
- [Page Settings](#page-settings)
- [Fields](#fields)
- [App Settings](#app-settings)
- [Page Settings](#page-settings)
- [Fields](#fields)
- [SimpleTextField](#simpletextfield)
- [SimpleRichTextField](#simplerichtextfield)
- [SimpleImageField](#simpleimagefield)
- [SimplePdfField](#simplepdffield)
- [StreamField](#streamfield)
- [IndexField](#indexfield)
- [Blocks](#blocks)
- [🐞 How to Report a Bug or Request a Feature](#-how-to-report-a-bug-or-request-a-feature)
- [🤝 How to Contribute](#-how-to-contribute)
- [💚 Thanks](#-thanks)
- [💼 Creators](#-creators)
- [🤔 FAQs](#-faqs)
- [📝 Copyright and License](#-copyright-and-license)
## [](#-motivation)💪 Motivation
A CMS **should not** be the defining feature of a webapp. Neither should Ecommerce or anything other than your code. \
ERP integration **should not** force developer to cut corners.
- Jaen **does not** interfere with **your** user experience.
- Jean **does not** challange **your** application design.
- Jaen gives the power back to **you**.
One thing and one thing only with clean and well documented interfaces.
Customizable, extensible and open-source.
### Jaen Features
* A fast, attractive interface for authors
* Complete control over front-end design and structure
* Fast out of the box, cache-friendly when you need it
* StreamField encourages flexible content without compromising structure
* Excellent support for images and embedded content
* Powered by blockchain and can be run for free
* Simple, intuitive "What you see is what you get" editing mode
### Roadmap
| Feature | Shipped | Almost There | We're Writing the Code | Investigating |
|-------------------------------|:---:|:---:|:---:|:---:|
| `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` | | | | ✅️ |
#### Msg inspiring PPL
Chasing ones own tail is not inspiring.
#### Disclaimer
Not for crybabies. Do not touch if you are afraid of being scratched a little.
## [](#-get-up-and-running-in-5-minutes)🚀 Get Up and Running in 5 Minutes
### Generate from template [Generate Jaen on GitHub](https://github.com/snek-at/jaen-template/generate)
| Generate from template | Important public and no branches |
|---|---|
|  |  |
### First Deployment
The `GITHUB_TOKEN` has limitations for the first deployment so we have to select the GitHub Pages branch on the repository settings tab. After that follow the instrucions shown in the pictures below to deploy successfully.
| First deployment failed | Go to the [settings tab](https://github.com/snek-at/jaen-template/settings/pages) |
|---|---|
|  |  |
| Select branch | Deploying again and succeed |
|---|---|
|  |  |
### Deployment Options
We recomend to use [vscode](https://github.com/microsoft/vscode) as IDE in either an codespace or local setup.
#### 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:
- Add [GitHub npm registry](https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry) `npm login --registry=https://npm.pkg.github.com`
- Create .env and set PUBLIC_URL
- Start a local copy of the docs site with `npm start`
- Or build a local copy of the library with `npm run build`
#### Local Setup
If you decide to set up locally, make sure you have the following prerequisites:
- Add [GitHub npm registry](https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry) `npm login --registry=https://npm.pkg.github.com`
- Use `npm install` to install all dependencies
- Start a local copy of the docs site with `npm start`
- Or build a local copy of the library with `npm run build`
The demo site will now be accessible at .
#### Troubleshooting
If you are having trouble to get the template up and running there are a few things you can try:
- node-sass requires you to use node15. If you have node16 you can use nvm to get the repository running without having to downgrade
If you encounter any other issues getting this template to work we ask you to [report it](https://github.com/snek-at/jaen/issues) so that we can improve the documentation.
#### Editing
To edit the page you have to log into the CMS.
The standard user for this is **snekman** and the password for the account is **ciscocisco**.
## [](#-how-to-code)💻 How to Code
### Overview
#### App Settings
| Field | Properties | Description | Wiki | Tutorial |
|-------------------------------|------------|-------------|:----:|:--------:|
| `CMSProvider` | settings
pages | The CMSProvider registers a Jaen application and provides a way to share values (e.g fields) between Jaen and the template pages. | | |
#### Page Settings
| Field | Type | Description | Wiki | Tutorial |
|-------------------------------|:----------:|-------------|:----:|:--------:|
| `PageType` | string | The PageType defines the name of your page in the context of the CMS. | | |
| `ChildPages` | [Pages] | ChildPages is an array of pages in which you define what subpages can be added to a particular PageType. | | |
#### Fields
| Field | Properties | Description | Wiki | Tutorial |
|-------------------------------|------------|-------------|:----:|:--------:|
| `SimpleTextField` | name
| A SimpleTextField can be used to add short editable texts to your page.| [✅️](https://github.com/snek-at/jaen/wiki/SimpleTextField) | |
| `SimpleRichTextField` | name
| SimpleRichtextField is used to provide an editable RichTextField to your page. | [✅️](https://github.com/snek-at/jaen/wiki/SimpleRichTextField) | |
| `SimpleImageField` | name
| A SimpleImageField provides you with the option to embed a image of your choice. | [✅️](https://github.com/snek-at/jaen/wiki/SimpleImageField) | |
| `ImageField` | fieldOptions
imageClassName
imageStyle | The ImageField can is used to provide editable images that can also be passed an imageStyle parameter as well as an imageClassName parameter in order to style your images. | [✅️](https://github.com/snek-at/jaen/wiki/ImageField) | |
| `SimplePdfField` | name
pdfStyle | If you want to embed a PdfFile on your page you can use our SimplePdfField. | [✅️](https://github.com/snek-at/jaen/wiki/SimplePdfField) | |
| `StreamField` | name
reverseOrder
blocks| With a StreamField you can build your own React-Components with editable content and repeat them as often as you like. | [✅️](https://github.com/snek-at/jaen/wiki/StreamField) | |
| `IndexField` | fixedSlug
outerElement
renderItem | The IndexField provides you with the oppertunity to easily build links, buttons and more pointing to your subpages. It is also useful for building cards that rely on content from childpages.
With the fixedSlug property you can decide which page the childpages are pulled from. | [✅️](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
Fields are data blocks that you can use to build React apps which the enduser is able to maintain.
Fieldnames have to be unique when they are on the same page.
It is advisable to give all the fields descriptive names.
#### SimpleTextField
The SimpleTextField is as the name implies quite simple. You just have to give the field a name.
[Wiki 📖](https://github.com/snek-at/jaen/wiki/SimpleTextField)
```javascript
import {SimpleTextField} from '@snek-at/jaen'
const HomePage: ConnectedPageType = () => {
return (
)
}
[...]
export default HomePage
```
#### SimpleRichTextField
SimpleRichTextField is also a quite simple field that only requires a name.
[Wiki 📖](https://github.com/snek-at/jaen/wiki/SimpleRichTextField)
```javascript
import {SimpleRichTextField} from '@snek-at/jaen'
const HomePage: ConnectedPageType = () => {
return (
)
}
[...]
export default HomePage
```
#### SimpleImageField
If you want to add an image to your page you can use the SimpleImageField.
It works by embedding an image that is hosted on the ipfs by the CMS.
[Wiki 📖](https://github.com/snek-at/jaen/wiki/SimpleImageField)
```javascript
import {SimpleImageField} from '@snek-at/jaen'
const HomePage: ConnectedPageType = () => {
return (
)
}
[...]
export default HomePage
```
#### ImageField
The ImageField is a more powerful version of the SimpleImageField. In addition to giving the field a name you also have the oppertunity to pass the field an imageClassName as well as an imageStyle property to fulfill your styling requirements.
[Wiki 📖](https://github.com/snek-at/jaen/wiki/ImageField)
```javascript
import {ImageField} from '@snek-at/jaen'
const HomePage: ConnectedPageType = () => {
return (
)
}
[...]
export default HomePage
```
#### SimplePdfField
SimplePdfFields as the name implies enables you to embed a PDF hosted on the ipfs.
[Wiki 📖](https://github.com/snek-at/jaen/wiki/SimplePdfField)
```javascript
import {SimplePdfField} from '@snek-at/jaen'
const HomePage: ConnectedPageType = () => {
return (
)
}
[...]
export default HomePage
```
#### StreamField
Jaen StreamFields enable you to integrate editable blocks and to use as many of them as you like. In order to use this field you are required to build a block. You can find an example of a block below.
[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
If you want to link to childpages of a slug the IndexField is your friend. The fixedSlug property is not required. When none is provided the children of the current page are used if you like it is possible to specify the parentpage, the outerElement is the wrapper for all your items and the renderItem property allows you to build cards, teasers, buttons and more to your subpages.
[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
```
### Blocks
The Block is the keystone of the StreamField. With the help of blocks you can build complex React-Components with editable content.
[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
```
## [](#-how-to-report-a-bug-or-request-a-feature)🐞 How to Report a Bug or Request a Feature
Have a bug or a feature request? Please first search for existing and closed issues. If your problem or idea is not
addressed yet, [please open a new issue](https://github.com/snek-at/jaen/issues/new/choose).
## [](#-how-to-contribute)🤝 How to Contribute
Please read through our
[contributing guidelines](https://github.com/snek-at/jaen/blob/master/CONTRIBUTING.md). Included are
directions for opening issues, coding standards, and notes on development.
All code should conform to the [Code Guide](https://github.com/snek-at/tonic/blob/master/STYLE_GUIDE.md), maintained by
[snek-at](https://github.com/snek-at).
## [](#-thanks)💚 Thanks
We do not have any external contributors yet, but if you want your name to be here, feel free
to [contribute to our project](#contributing).
## [](#-creators)💼 Creators
Nico Schett
Florian Kleber
Daniel Petutschnigg
## [](#-faqs)🤔 FAQs
**Q:** What do the roadmap categories mean?
* Shipped - Hopefully you are enjoying it! Give us feedback on how it is working!
* Almost There - We are applying the finishing touches. Things in this bucket you can expect to be shipped within 2-4 weeks.
* We're Writing the Code - Actively in development, we are trying to get this out to you in a good state as soon as we can.
* Investigating - We're thinking about it. This might mean we're still designing, or thinking through how this might work. This is a great phase to send how you want to see something implemented! We'd love to see your usecase or design ideas here.
**Q:** Why are there no dates on your roadmap?
**A:** Because we know things change and we want the room to do the right thing by fixing security issues as they come up or helping people out where they need. This means we might have to change our priorities and don’t want to let people down.
**Q:** How can I provide feedback or ask for more information?
**A:** Please open an issue in this repo! If the issue is a bug or security issue, please follow the separate instructions above.
**Q:** How can I request a feature be added to the roadmap?
**A:** Please open an issue! You can read about how to contribute [here](https://github.com/snek-at/jaen/blob/master/CONTRIBUTING.MD). Community submitted issues will be tagged "Proposed" and will be reviewed by the team.
## [](#-copyright-and-license)📝 Copyright and License
Use of this source code is governed by an EUPL-1.2 license that can be found
in the LICENSE file at https://snek.at/license