CMD Digital Playground

This progressive web app allows non-tech-y textwriters, developers, students and other collaborators to contribute to an environment that contains (in-depth) information about Communication and Multimedia Design, reflects CMD's view on Digital Interactive Design and displays their other activities or initiatives such as Battery or Golden Dot Awards.

Content is managed via a headless CMS, which allows for lots of freedom of the contributing developers/designers, whilst still accessible for sole content managers.

Table of contents

• Installation
  • Setting up the connection to Storyblok
• Usage
• Built with
  • Rationale
    • Eleventy
    • Nunjucks
    • Vercel
    • Storyblok
    • Storybook
• Contributing
  • To do's/Wishlist
• License

Installation

Use the package manager NPM to install CMD Digital Playground.

$ git clone https://github.com/kriskuiper/cmd-digital-playground.git && cd cmd-digital-playground

Don't copy $.

Then run:

npm install

To create a distribution folder _site run:

npm run build

To run a development environment & watching for changes run:

npm run dev

Setting up the connection to Storyblok

Rename .env.example to .env.

Fill in the public & preview keys that can be found at Settings > API-Keys in Storyblok.

Should look as follows:

STORYBLOK_PREVIEW_KEY={YOUR_PREVIEW_KEY}
STORYBLOK_PUBLIC_KEY={YOUR_PUBLIC_KEY}

Usage

Check out the docs on a lot of how to's.

Built with

• Eleventy
• Nunjucks
• Vercel
• Storyblok
• WIP Storybook, a pattern library to test components.

Rationale

Eleventy

A solid framework that distributes the fetched data between the pages for you. Seamless compatibility with deployment tools like Netlify & Vercel.

See more

Nunjucks

A templating language that stays close to HTML. To make treshold for co-creation as low as possible it was best to stay as true to HTML as possible, instead of using a fancy javascript framework.

See more

Vercel

A hosting solution/CDN that generates the static pages and distributes them. Free to use and auto builds with every push to the master repo.

See more

Storyblok

A CMS that has a live preview, (see the demo when you register), a big plus compared to other CMS's. It is a bit lackluster in the mental model compartment. Could use with a little less information overload to regular users.

See more

We made the project seperate from the CMS, so if you prefer a different CMS you only need to edit the files in _data folder to make a connection to your preferred CMS.

Storybook

Since the project will consist of a lot of loose components it would be nice to able to keep track of them in a library. Storybook can help with that.

It's currently in the project but not linked to the components. A nice todo: link the components folder automatically to the Storybook library.

See more

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

For adding components to the library check the wiki.

To do's / Wishlist

• New cool features (Open an issue first).
• Connection between components & storybook.
• (Optional) Another CMS, with a better mental model.

License

MIT