a static website editor that runs in the browser Note: Flatpack is still under development, and might not work as the following suggests
Flatpack requires node.js and some familiarity with JavaScript (ES6), yarn/npm, React and HTML.
Flatpack should be installed locally, so that different projects can use different versions of flatpack.
cd /project-folder
yarn add flatpack-js react
touch index.js
Open index.js
in your favourite text editor
import React from 'react'
import { Text, EditButton } from 'flatpack-js'
export default (
<div>
<h1>Hello flatpack!</h1>
<Text path='introduction' placeholder='Introduction goes here…' />
<EditButton />
</div>
)
For a simple one-page website, you will need to define a component
for your content to live in.
This can be done in a separate file and imported, but for brevity,
lets define it in index.js
.
You will need to set up some Amazon web services to get going. Flatpack has a built-in setup script that will take care of this for you.
You will need an AWS access key id
and AWS secret access key
with credentials for S3, Cloudfront and Cognito.
Run flatpack setup
and follow the prompt.
After the setup prompt has finished you should be able to run flatpack dev
from
the command line and see your example running at http://localhost:3000/
All built-in components have a path
prop. This is where flatpack finds and stores data.
The text component uses slate to serialise data.
path
string, see pathplaceholder
string text to show in the editor whenpath
does not have data, for example when a new element is created.inline
(array of inline elements supported, ie.['i', 'b', 'a', 'strike']
). Default is[]
block
(array of block-level elements like['h2', 'h3', 'h4', 'p', 'ul', 'ol']
ifblock
is not defined, no text will be wrapped in a block-level element. Perfect for text inside an existing<h1>
or<p>
tag. Default is[]
Routes need to be defined with a trailing slash for compatibility with S3 and CloudFront, see external article re. ‘advices for best performance’