Snek Jaen Template

This is the official jaen project of snek-at. Free, sexy and cutting edge CMS framework for ReactJS.

"A bowl is most useful when it is empty." - Lao Tzu

Report bug · Request feature · Documentation

What’s In This Document

• 💪 Motivation
  • Jaen Features
  • Roadmap
  • Msg inspiring PPL
  • Disclaimer
• 🚀 Get Up and Running in 5 Minutes
  • Generate from template Generate Jaen on GitHub
  • First Deployment
  • Deployment Options
    • Codespace Setup
    • Local Setup
• 💻 How to Code
  • Overview
    • App Settings
    • Page Settings
    • Fields
  • App Settings
  • Page Settings
  • Fields
    • SimpleTextField
    • SimpleRichTextField
    • SimpleImageField
    • SimplePdfField
    • StreamField
    • IndexField
• 🐞 How to Report a Bug or Request a Feature
• 🤝 How to Contribute
• 💚 Thanks
• 💼 Creators
• 🤔 FAQs
• 📝 Copyright and License

💪 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
• Content API for 'headless' sites with de-coupled front-end
• StreamField encourages flexible content without compromising structure
• Excellent support for images and embedded content
• Multi-site and multi-language ready
• Powerd by blockchain and can be run for free

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 affraid to be a bit scratched.

🚀 Get Up and Running in 5 Minutes

Generate from template Generate Jaen on GitHub

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, do the second deployment like the following pictures.

First deployment failed	Go to the settings tab

Select branch	Deploying again and succeed

Deployment Options

We recomend to use vscode as IDE in either an codespace or local setup.

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:

• Add GitHub 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 set this up locally, make sure you have the following pre-requisites:

• Add GitHub 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 http://localhost:3000/.

💻 How to Code

Overview

App Settings

Field	Properties	Description	Wiki	Tutorial
CMSProvider	settings pages

Page Settings

Field	Type	Description	Wiki	Tutorial
PageType	string
ChildPages	[Pages]

Fields

Field	Properties	Description	Wiki	Tutorial
SimpleTextField	name
SimpleRichTextField	name
SimpleImageField	name imageStyle
SimplePdfField	name pdfStyle
StreamField	name reverseOrder blocks
IndexField	fixedSlug outerElement renderItem

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

SimpleTextField

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

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

[...]

export default HomePage

SimpleRichTextField

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

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

[...]

export default HomePage

SimpleImageField

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

const HomePage: ConnectedPageType = () => {
  return (
    <SimpleImageField
      name="siffield"
      imageStyle={{width: '500px', height: '500px', objectFit: 'cover'}}
    />
  )
}

[...]

export default HomePage

SimplePdfField

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

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

[...]

export default HomePage

StreamField

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

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

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

🤝 How to Contribute

Please read through our contributing guidelines. Included are directions for opening issues, coding standards, and notes on development.

All code should conform to the Code Guide, maintained by snek-at.

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

💼 Creators

Nico Schett	Florian Kleber

🤔 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. Community submitted issues will be tagged "Proposed" and will be reviewed by the team.

📝 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