flatpack-js
v0.2.3
Published
a static website editor that runs in the browser Note: Flatpack is still under development, and might not work as the following suggests
Downloads
302
Readme
flatpack
a static website editor that runs in the browser Note: Flatpack is still under development, and might not work as the following suggests
Prerequisites
Flatpack requires node.js and some familiarity with JavaScript (ES6), yarn/npm, React and HTML.
Getting started
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
.
AWS setup
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/
Components
All built-in components have a path
prop. This is where flatpack finds and stores data.
The <Text />
component
The text component uses slate to serialise data.
Props
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[]
Routing
Routes need to be defined with a trailing slash for compatibility with S3 and CloudFront, see external article re. ‘advices for best performance’