kamo-soupbato/projects/post-flask/documentation.md

---
title: we printed 85 000 postit for real
description: Web-to-print post-it generator app 
date: 15/03/2022
categories:
    - Web
    - SI17
    - Print
cover: production-line-al.jpg
cover_alt: rejected proposal for si17 cover with a dog
git: https://git.xpub.nl/kamo/postit
url: https://hub.xpub.nl/soupboat/postit/
---


## Working on contents together

For SI17 we produced a pubblication in 850 postit. Fun and funny, but at some point also crazy. 
We generated the postit hell starting from the experiments and researches we did in the second trim, in a way to make room for each contribution but still a common ground. 

After gathering all the materials we started splitting them to fit the postit format. We opted for self sustaining sentence approach. Each post-it is a concluded statement. Some of them invites a more linear narration, some others can just be combined with different variation.

To manage the contents and detach them from the layout and design of the postit, we set up a repository in git. Find more info [here](/soupboat/~kamo/projects/postit-contents/). 

In the [postit page](https://hub.xpub.nl/soupboat/postit/) it's possible to generate the contributions included in the loot box. The Contributions list it's basically an index of the pubblication. Since we have two kind of loot boxes we implemented a switch to change color also for the post-it.  

## Structure

The post-it generator is a web app built with Flask and Frontmatter. It uses the `postit-contents` repo as submodule, in order to manage the two things indipendently. In this way the work can advance on both sides without mess to much with the structure of each part of the project.

The postit flask app has these modules:

- a `dump.py` module to load the contents from the markdown files and generate a `contents.json` file with a list of postit, organized by contribution

- a `crosswords.py` module to generate the cells for the Crossword Imaginary Grid Game (that are created dinamically starting from the words in each crossword)

- a `prefix.py` module to manage the url prefixer for hosting the app in the soupboat

and a couple of blueprints

- a `home.py` blueprint to serve a homepage with the list of contributions, the color switch, etc. 

- a `generate.py` blueprint to manage the generation of the contributions, with two endpoints: one to generate all the contents and one for just the single contributions. It loads the `contents.json` file and

additionally we implemented also a git hook to regenerate the contents when something new is pushed on the `postit-contents` repo, but didn't manage to make it works right now. There are some issues in the python-git module, and we were a bit in a rush.

The `postit.html` template takes care of all the possible modules we developed for the layout, that at the moment are:

- Picture postit, with a monochromatic image that follow the main color of the pubblication (orange or purple)
```yaml
    - pic: cover.jpg
      alt: this is a picture
```
- Image postit, with content indipendent from the pubblication's color scheme

```yaml
    - img: cover.jpg
      alt: this is an image
```
- Card postit, for The Leader card game, that is a motivational take on Quartet. Each card has an ID, a quote and scores for motivation, empathy, vision and positivity.
```yaml
    - card: A1
      quote: If life is a game, play the game
      motivation: 90
      empathy: 20
      vision: 40
      positivity: 50
```
- Definition postit, for the Crossword Imaginary Grid Game. This come in two versions: one for the pubblication and one for the launch event. The former has the following properties: word is the final word, that will not be printed on the postit but it will be used to generate the cell for the imaginary grid. The definition is the definition of the word. The direction can be V (vertical) or H (horizontal), and start is a point in a grid composed by letters on the x axys and numbers on the y axis. Category is the category of the crossword. Each category is a complete crossword. Ask Emma for more infos she's the mastermind. For the launch we have also a different version with just the definition, the direction and the category. 
```yaml
    - word: Counterculture
      definition: It can be present as disturbance
      direction: V
      start: C16
      category: Ideology
```
- The mimic colophon is a mess and not really the reusable module fair, I put it here just for sake of  completion.
```yaml
    - type: mimic-colophon
      original: original text
      original-credits: Austin Wood
      original-action: published
      original-date: May 03, 2017
      current: current text
      current-credits: XPUB
      current-action: '.replace("mimic", "loot box")'
      current-date: March 25, 2022

```
- Dialogue postit is a layout that permit to put contents in the four corner of the postit, using the cardinal directions properties. NW will be top left, NE top right, SW bottom left, SE bottom right. Super usefull for the NIM dialogue and to combine some single word sentences in the definition of loot box. 
```yaml
- nw: top left
  ne: top right
  sw: bottom left
  se: bottom right
```

- Standard text post it it's a normal string entry in the contents list. 
```yaml
    - Hello a simple text
```

All the postit but the images and some really specific layouts (like the cards) have a footer with the title of the contribution and a progress bar instead of the page number. We decided on that in order to have the position of the contribution to be free in the loot box and not constrained to a single order. The progress bar is calculated on the amount of contents for contribution and it's funny and less strict than numbers. 

For the karaoke we slightly modified it in order to recall the animation that karaoke lyrics often have. Then there are some easter eggs scattered around just for fun. 

Find the code commented in git!

The Web-to-print part is managed with [Paged.js](https://pagedjs.org/).