Getting Started

Install penguin.js


To get started with penguin.js is easy because it embraces the filesystem as its API. So there no need to mess around with config files to get your project started.


Create a package.json with minimal markup

{
  "penguin": {
    "languages": ["en"]
  },
  "scripts": {
    "serve": "penguin serve -v pug",
    "prebuild": "penguin pack -v pug",
    "build": "penguin build"
  }
}

Install penguin.js (make sure, you got at least node v6 installed)

npm install -S penguin.js redux express

Start your development server

npm run serve

Alright now if you got everything right, your development server should start and listen on port 3000.

Structure of package.json

languages: This is a mandatory field. It lists all languages of the project. The first language is the default language. Note that this must have at least one element.

Create a new page


Penguin will serve the web pages in the /pages directory. So we should put our .pug or .html files there. If you create a file called pages/whatever.html and add some content, it will be served under /en/whatever.

Create a file called index.pug in your pages directory and add some content.

doctype html
html
  head
    title My first page
  body
    p My first content

A quick note on pug

Penguin.js is designed to be used with many template languages. But currently it only supports pug. If you don't know pug, read the primer on thewebsite.

you should see your first page on http://localhost:3000/.

Make your page editable


Nice! a static page is useful, but we could haved reached to that point easily without penguin. The real power comes in when we make the content on our page editable. To accomplish this we need so-called components which will be described in detail later. For now we just install two components using the following command ...

npm i -S penguin-inplace penguin-save-button

... and list them in our package.json.

{
  "penguin": {
    "languages": ["en"],
    "components": {
      "Inplace": "penguin-inplace",
      "SaveButton": "penguin-save-button"
    }
  },
  "scripts": {
    "serve": "penguin serve -v pug",
    "prebuild": "penguin pack -v pug",
    "build": "penguin build"
  }
}

Structure of package.json

components: This is an object that contains the components of your project.

Now we can use the inplace component in our page to add editable fields. Add the following pug snippet to your page body.

span(data-component='Inplace' data-props='{"field":"my-first-field"}') My first editable content

If you refresh the page, you'll see that the inplace component transforms your element into a content-editable element. But this does not persist our changes. To do so, we have to use the save-button component:

button(data-component='SaveButton') Save

Now try refreshing your page after editing your content. You will see that the changes persisted, this is because penguin stores the content of your changes, and loads them when you refresh. All this happens without connection to a database - Pretty cool, right!

What next?


Congratulations! You made it. From here you can do different things: