Giter Site home page Giter Site logo

doersino / nyum Goto Github PK

View Code? Open in Web Editor NEW
179.0 9.0 47.0 6.92 MB

A simple Pandoc-powered static site generator for your recipe collection – it effortlessly turns a set of Markdown-formatted recipes into a lightweight, responsive, searchable website.

Home Page: https://doersino.github.io/nyum/_site/index.html

License: MIT License

CSS 30.99% JavaScript 12.95% HTML 45.97% Shell 8.99% Awk 1.10%
cookbook recipes recipe-website static-site-generator pandoc pandoc-template food static-website recipe-collection cooking

nyum's Issues

UTF-8: cut: the delimiter must be a single character

Building the demo site, I see the following error messages:

cut: the delimiter must be a single character
Try 'cut --help' for more information.

Hm…, let's see where cut gets into it:

$ rg cut
_site/cheesebuldak.html:            <p>Cut meat into <code>2-3 cm</code> cubes and mix into the marinade.</p>
build.sh:for CATEGORY in $(echo "$CATS" | cut -d§ -f2- | sort | uniq | (cat -; echo "$UNCATEGORIZED_LABEL")); do
build.sh:            C_CAT=$(echo "$C" | cut -d§ -f2-)
build.sh:        BASENAME=$(echo "$C" | cut -d§ -f1)
build.sh:        C_CAT=$(echo "$C" | cut -d§ -f2-)
_recipes/cheesebuldak.md:> Cut meat into `2-3 cm` cubes and mix into the marinade.
README.md:Apart from the translation of Markdown into HTML, which is a fairly self-explanatory `pandoc` call, and the `config.yaml` shenanigans, which are merely a medium-sized mess: I wanted to **build an index page listing all recipes, but ordered by category** and with cute spicy/vegan/etc. icons.
README.md:3. Employing a `cut`-`sort`-`uniq` pipeline to distill a list of unique categories.

So:

$ printf '§' | hexdump -C
00000000  c2 a7                                             |..|
00000002

Apparently cut sees ‘§’ as multibyte and barfs.

$ uname -a
Linux home 5.11.7-arch1-1 #1 SMP PREEMPT Wed, 17 Mar 2021 16:59:58 +0000 x86_64 GNU/Linux
$ cut --version | head -1
cut (GNU coreutils) 8.32
$ printf 'LC_ALL=%s, LANG=%s\n' "$LC_ALL" "$LANG"
LC_ALL=en_DK.UTF-8, LANG=en_GB.UTF-8

Error in recipe.template

Running the building script results in an error:

Building recipe pages...
↪ pandoc _recipes/cheesebuldak.md --metadata-file config.yaml --metadata basename=cheesebuldak --metadata category_faux_urlencoded=koreanfood --metadata updatedtime=2021-07-22 --template _templates/recipe.template.html -o _site/cheesebuldak.html
"template" (line 4, column 6):
unexpected "{"
expecting letter

I was using the sample recipes given. My pandoc version is 2.5.

Picture source (licensing)

Whenever I host pictures online I get very paranoid bc of possible licensing issues.
So I thought maybe the addition of a source for the image might calm my (an everyone else) nerves a little.
Whats is your take on that so far?

build.sh by github actions

I tried running the command bash build.sh in a github action, but it throws the error:
tput: No value for $TERM and no -T specified

If that is an error you are familiar with, I am happy about pointers, otherwise I continue the search on my own.

full ci file
name: Build CI

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      
      - name: Install pandoc
        run: |
          wget https://github.com/jgm/pandoc/releases/download/2.13/pandoc-2.13-1-amd64.deb
          sudo dpkg -i pandoc-2.13-1-amd64.deb

      - name: Run build
        run: bash build.sh

meat by default?

If I noticed this correctly, meat is set by default if no other attribute is set.
How I got rid of it was by specifying a vegan dish, but what about vegetarian dishes?

Whole ListItem clickable

overview page -> extend <a></a> over the whole ListItem and not just the title,
so the whole item is clickable

(I used the web version on a desktop pc, might be implemented already on mobile, I'm not sure)

Ingredients amount change

I know this is all about static generation, so this might be a tough call.
Anyway, most online cookbooks provide a feature to specify the serving size and calculate the ingredients up/down accordingly.
I understand that this might be hard with a static side.
But maybe by using multiple files (one for each serving size) such a thing could be specified (even though it would be a ton of work administrative wise)

Ingredience Appearance Delimiter

Screenshot from 2021-03-25 18-11-29

I noticed two improvement points.

  1. if an ingredient position is too long it does not align with the amount anymore
  2. The margin between a wordwrap is the same as for a new entry, making reading tougher
  3. not really an issue, but if I just specify * pepper in the markdown, the ingredient gets pushed into the amount column. I worked around it by * ` ` pepper

future development checklist

I just found your piece of art and I am head over heals.
Even though you write to have no real ambition to continue the project,
I still like to provide a checklist of interesting features so me or other people can add wish and contribute ourselfes.

appearance

  • dark mode
  • include the picture in the overview
  • overview page -> a better limitation view for categories (useful for a lot of recipes)
  • overview page -> change title + text to a centered with boxconstraints
  • recipe page -> add an highlight point, which expresses visually where to take extra caution
  • do not create a scrollable list for instructions (I noticed this by using 8 steps, and the last one was empty)

functionality

  • powerful search
    • search by label
    • navigate with arrow keys
  • a language extension (e.g. strawberrysmoothie_en.md), for multilingual support
  • on generation generate a "cookbook" pdf with pandoc that can be downloaded directly (+ single pages based on recipe)
  • overview page -> extend <a></a> over whole ListItem and not just the title

content

  • content, which won't be publicly available
  • a general overview of all required ingrediences (not autogenerated),
    which has no instruction number (like chowdown
  • support of deep _recipes folders which translate to categories
  • change of ✓ in markdown files to simple "x"
  • Adding title attributes for the icons on the index page. Minor, but relevant for accessibility.

generation

  • github action to auto generate on new recipes added (possibly using this)
  • image tag in header, which downloads the image on generation
    and adds a visible source in the html output (bc copyright)
  • change to hugo (it is no intend to bash 😅, and more a note for me to consider in the future)
  • allowing the hRecipe json as input and providing a parser for this site's recipes

other

  • spreading the word, by contributing to different awesome lists like this and that
  • Simplify the code in build.sh dealing with uncategorized recipes.
  • add a list of all supported md header settings in the README.md

Feel free to add anything or even edit my post for convenience sake.

unexpected "{"

Steps:

  • clone project
  • on Ubuntu 20.04.2 LTS run sudo apt install -y pandoc
  • check pandoc version (= 2.5)
  • bash build.sh
Error log
Resetting _site/ and _temp/...
↪ mkdir -p _site/
↪ touch _site/dummy.txt
↪ rm -r _site/
↪ mkdir -p _site/
↪ mkdir -p _temp/
↪ touch _temp/dummy.txt
↪ rm -r _temp/
↪ mkdir -p _temp/
Copying assets...
↪ cp -r _assets/ _site/assets/
Copying static files...
↪ cp _recipes/cheesebuldak.jpg _site/
↪ cp _recipes/strawberrysmoothie.jpg _site/
Building recipe pages...
↪ pandoc _recipes/cheesebuldak.md --metadata-file config.yaml --metadata updatedtime=2021-03-25 --template _templates/recipe.template.html -o _site/cheesebuldak.html
"template" (line 4, column 6):
unexpected "{"
expecting letter

Enhancements: Screen Wake Lock and PWA

Thanks for sharing this. I'm a big fan now of listing the ingredients next to each step. I forked this and made a few small enhancements that I thought I'd ask if you want shared back:

Screen Wake Lock - Added a button on each recipe to invoke the Screen Wake Lock API to keep the screen on while you're cooking. I believe this only works in Chrome on Android, but there are some polyfills that could make it work on iPhone as well.

Installable PWA - Added a service worker and manifest that makes the site installable as a progressive web app. It caches recipes on load so that it will work offline once you've loaded that recipe once. This makes the build pipeline a bit more complicated because you have to use a bundler like Rollup to build the service worker.

My live site: https://btburke.srht.site

Wakelock:
https://git.sr.ht/~btburke/recipes/tree/master/item/_assets/wakelock.js

Worker:
https://git.sr.ht/~btburke/recipes/tree/master/item/src/worker.js

Let me know if either of those interest you and I'll work up a pull request.

unnecessary Scrollbar

image

I noticed that in the recent version a vertical and horizontal scrollbar was added to the icons in the top right corner.
For a smaller screen this is a great idea, but imo it would look better if it stays hidden, when it can not be used.

Support for more out of the box attributes

I noticed that rn these attributes are supported:

  • spicy
  • veggie
  • vegan
  • favorite
  • size
  • time
  • author
  • source

It would be great if additional diets would be supported (e.g. keto).
And dish information like

  • kcal
  • protein
  • fat
  • carbohydrates

add Readme Table of Content

With all the great work you've put into the readme,
it reached a size by now, which would benefit from a table of content.

This would be especially beneficial to quickly jump to the list of possible yaml fields.

Expose all labels in config.yaml

Please consider exposing all used labels in the config.yaml, so one can build a complete german version for example.
I noticed these yet to be done:

  • 4 SERVING
  • 1 HOUR

Support for Windows users

I really like the idea of hosting recipe on a website by using Markdown, keep up the good work !

I tried to follow the instructions and managed to found how to run bash on Windows through an Ubuntu distribution, however almost every line of code in build.sh throws an error, even the empty lines (because of the different line breaks I guess ?). I apologize if this sounds silly but I have very little experience on this topic.

Is this code intended to be used on a Windows machine ? Could you add instructions for Windows users ?

Thank you !

Category Sub Pages / Filter

It would be awesome if a limitation toward the category could be provided.
This could work is over the search bar (making the category searchable) or a separate page for each category.

Important extra is here the ability to click on the header breadcrumbs and arrive at the filtered result/ page.

Screenshot from 2021-04-20 10-41-08

Struggling with deployment

It's me again !

I am struggling with the deployment part.
I want to send the files to a free bookdown.org location, I have set up RSconnect and managed to send the index file manually from the editor. However I have issues with the deploy.sh.
I put [email protected] in the config.yaml file and I get confirmation that the files are successfully sent somewhere, however when I go to bookdown.org I cannot see them.

Do you see a fix for this issue ?

Also on a sidenote the Search feature does not seem to be working on my browser (both Chrome or Edge) but does work in the RStudio browser. I got a greyed search area and a "TypeError: Could not fetch" red warning.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.