zinc-collective / recipe-box

A mobile app for collecting recipes
Other
4 stars 0 forks source link

Sprout Express App for Publishing Recipes #1

Closed zspencer closed 4 years ago

zspencer commented 4 years ago

In order for people to be able to share their recipes with other people, we'll want a publisher that is always on the internet, ideally written in such a way that it can work with free-to-host platforms like Glitch.

I want the app to do some very boring things:

  1. PUT /:recipe - HTML that conforms to the hRecipe format (or JSON if we can figure out a reasonable format!)
  2. GET /:recipe - Which returns a minimally themed, HTML version of the recipe.

I need to look into how to persist data across requests in glitch apps; but I think they give us a simple file storage system? Or maybe a database? @jalcine would know.

zspencer commented 4 years ago

Oh huh: https://glitch.com/@storage there's lots of places to do storage!

jalcine commented 4 years ago

Oh huh: https://glitch.com/@storage there's lots of places to do storage!

Yeah, treat Glitch like Heroku without add-ons; put all of your code on there but avoid putting data you don't want to be remixed away / read by other people.

jalcine commented 4 years ago

If the app follows the 12factor approach, you can even take in a database URI and use that for the application to use for persistence (not recommended but I use it as a hack for that).

Also regarding hRecipe, I have no idea if it's used as heavily as h-recipe (the update to it). Anything under the land of h- can be made into JSON with a decent parser though so you can get JSON for free :)

HTML

<article class="h-recipe">
  <h1 class="p-name">Bagels</h1>

  <ul>
    <li class="p-ingredient">Flour</li>
    <li class="p-ingredient">Sugar</li>
    <li class="p-ingredient">Yeast</li>
  </ul>

  <p>Takes <time class="dt-duration" datetime="1H">1 hour</time>,
     serves <data class="p-yield" value="4">four people</data>.</p>

  <div class="e-instructions">
    <ol>
      <li>Start by mixing all the ingredients together.</li>
    </ol>
  </div>
</article>

JSON

Parsing HTML with a Microformats parser

{
  "items": [
    {
      "type": [
        "h-recipe"
      ],
      "properties": {
        "name": [
          "Bagels"
        ],
        "ingredient": [
          "Flour",
          "Sugar",
          "Yeast"
        ],
        "yield": [
          "4"
        ],
        "instructions": [
          {
            "value": ["Start by mixing all the ingredients together."],
            "html": "<ol><li>Start by mixing all the ingredients together.</li></ol>"
          }
        ]
      }
    }
  ]
}