the-silverwood-institute / frontend

Recibase's front-end Python app

Frontend

The website of Recibase, the recipe ingestion and discovery service.

Recibase's frontend uses web.py.

Requirements

• Python 3.9
• pip

Installation

pip install -r requirements.txt

Test with pytest

Usage

To start

1. BACKEND_URL="https://api.reciba.se/" python3 app.py
2. Navigate to http://0.0.0.0:8080/

If you don't specify BACKEND_URL you will need to also have the Recibase API running locally.

To stop

Hold Ctrl + C until it quits

frontend's Issues

Indicate when search hasn't finished

There is currently no loading indicator to show that a search has not yet completed.

Given the backend is a separate heroku instance it can take a few seconds to start up, which causes the menu UI to incorrectly show a list of recipes which don't match the search terms.

Material design has a loading spinner/bar which I've used in other apps, along with some JavaScript to toggle it. This should just be a <1 hour lift and shift job.

Fix caching of outdated assets

CSS/JS should not be cached between releases. We can use the new $frontendVersion variable added in #8 to fix this.

Deployed version hash not working

The move to Render.com (The-Silverwood-Institute/Recibase#210) has broken the versions of the frontend/backend displayed in the footer:

Recipe menu cache not invalided by API deployments

The left-hand recipe menu isn't updated when new recipes are added to Recibase's API

Steps to reproduce:

1. Add new recipe to recibase API
2. Deploy updated API
3. Browse to front-end: recibase.herokuapp.com/

Expected behaviour:

Menu contains new recipe.

Recipe can be viewed by clicking its permalink in the menu.

Actual behaviour:

Menu does not.

Recipe can be viewed by knowing its permalink.

Further notes

This is caused because the front-end loads the recipe list on launch. Presumably the Heroku app falling asleep and rewaking would fix this after an hour or two.

Set up Travis CI

Now that there's tests we run them before deploying, wooo!

Can lift and shift from the backend

Database seeder broken

Recibase's schema was updated but seed.py wasn't, so it now produces unusable fixtures. Could fix it to use the new schema or just get rid of it.

Recipe search hard-coded to use prod backend

The JS to search for recipes is using the prod backend, when it should be configurable using the BACKEND_URL env variable

Redirect naked Heroku domain

Redirect requests from https://recibase.herokuapp.com/ to https://reciba.se/ with an HTTP 301

Add SEO tags

Steal all the SEO setup from: kittsville/deedpoll.lgbt#5

Move "fork me" ribbon to footer

The "fork me" ribbon added in #5 probably doesn't need to be as prominent and could be moved to a new material design footer (https://getmdl.io/components/index.html#layout-section/footer).

Menu is not sorted alphabetically

Menu not filtering on Firefox Android

The menu should filter as the input's being typed. This is not happening on Firefox for Android:

Bug is because keydown and keyup events aren't firing: Pixabay/JavaScript-autoComplete#71. Replacing the non-firing events with input should fix everything.

Generate sitemap

Recibase should have a sitemap.xml file that lists all recipes and the homepage so search engine crawlers and other automated systems can easily navigate the site.

&amp; in recipe title

The ampersand is not being properly encoded in recipe title, see:
https://reciba.se/courgette-broccoli-pasta

Add ingredient scaling

Add buttons/a number field to easily multiply all of the ingredients. Even a hidden feature using a URL Param would be useful. The ingredient data is separated by quantity in the UI but merged when templating occurs, so it avoid changing too much this could be done in the templating code.

Add newlines to recipe descriptions/notes

Recipes have newlines in some of their descriptions and notes, in order to separate different items e.g. Vegetable crumble

These should be captured in the resulting HTML as separate paragraphs.

Add random recipe button

Add animation when copying ingredients

Indicate that ingredients have been copied by animating the copy icon. Some kind of pulse effect:
https://www.florin-pop.com/blog/2019/03/css-pulse-effect/

redirect www subdomain

Some browsers automatically add www to the address, so Recibase should have DNS records to redirect to the naked domain

Fix mobile viewport

Add the viewport tag fix

Cache menu contents

Given the database doesn't change once Recibase generates it the menu will always been the same (the name and url of every recipe). As such this could be created when the server boots then stored in a variable, or any other low-effort caching method.

We'll never be under high load or face millions of queries, but this might keep page loads blazingly fast.

Current recipe not being highlighted

Steps to replicate

Visit a single recipe's page

Expected behaviour

The current recipe is highlighted in the left-hand recipes menu

Actual behaviour

No recipe is highlighted from the menu

Mouseover url preview obscures bottom menu

Create homepage

Fix menu icon on mobile

Add "fork me" banner to website

A fork me on GitHub banner would help make people aware that the entire project is open source, recipes included.

I'd imagine the grey or black right ribbon would look good, although it's probably best to experiment and see what it looks like.