recipes.html

---
layout: default
title: Recipes
permalink: /recipes/
---

<style type="text/css" media="screen">
  .container {
    margin: 10px auto;
    max-width: 600px;
    text-align: center;
  }
  h1 {
    margin: 30px 0;
    font-size: 4em;
    line-height: 1;
    letter-spacing: -1px;
  }
</style>

<div class="wrapper">
  <h1 style="text-align: center">Recipes</h1>

  <div id="putta-da-recipes-here">
    <h3>
    </h3>
  </div>

</div>

<style type="text/css" media="screen">
  .underline-on-hover:hover {
    text-decoration: underline;
  }
  input[type="text"] {
    padding: 10px;
    margin: 20px 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 300px;
    font-size: 16px;
  }

  input[type="text"]:focus {
    outline: none;
    border-color: #9ecaed;
    box-shadow: 0 0 10px #9ecaed;
  }
</style>
<script type="module">
// Import h and render from preact
import { h, Component, render } from 'https://esm.sh/preact@10';
import { useState } from 'https://esm.sh/preact@10/hooks';

// Define a component for a collapsible section
function Collapsible({ title, children }) {
  const [isOpen, setIsOpen] = useState(false);

  const handleClick = () => setIsOpen(!isOpen);
  const symbol = isOpen ? '[-]' : '[+]';

  return h('div', {}, [
	h(
      'h2',
	  {
	    onClick: handleClick,
		style: { cursor: 'pointer' },
		class: "underline-on-hover"
	  },
	  `${symbol} ${title}`
	),
	isOpen && h('div', {}, children),
  ]);
}

// Define a component for a recipe
function Recipe({ recipe }) {
  return h(Collapsible, { title: recipe.name }, [
	//h('div', {}, `Effort: ${recipe.effort}`),
	h('strong', {}, 'Ingredients:'),
	h('ul', {}, Object.entries(recipe.ingredients).map(([ingredient, amount]) =>
	  h('li', {}, `${ingredient}: ${amount}`)
	)),
	h('strong', {}, 'Cookware:'),
	h('ul', {}, recipe.cookware.map(description =>
	  h('li', {}, description)
	)),
	h('strong', {}, 'Steps:'),
	h('ul', {}, recipe.steps.map(step =>
	  h('li', {}, step.text)
	)),
  ]);
}

// Define a component for the page
function SearchBar({ onInput }) {
  return h('input', { type: 'text', onInput , style: { width: "100%" }});
}

// Define a component for the page
function Page({ recipes }) {
  const [search, setSearch] = useState('');

  const handleInput = e => setSearch(e.target.value);

  const filteredRecipes = recipes.filter(recipe =>
    recipe.name.toLowerCase().includes(search.toLowerCase())
  );

  return h('div', {}, [
    h(SearchBar, { onInput: handleInput }),
    filteredRecipes.map(recipe => h(Recipe, { recipe })),
  ]);
}

// Fetch the recipes and render the page
const baseElement = document.getElementById("putta-da-recipes-here");
function renderRecipes(recipes) {
  recipes.sort((a, b) => a.name.localeCompare(b.name));
  render(h(Page, { recipes }), baseElement)
}

fetch('/recipes.json', {
  headers: new Headers({
    'If-None-Match': localStorage.getItem('recipesETag') || '',
  }),
})
  .then(response => {
    if (response.status === 304) {
      // Not Modified, use cached data
      renderRecipes(JSON.parse(localStorage.getItem('recipes')));
    } else if (response.ok) {
      // OK, cache the new data
      const eTag = response.headers.get('ETag');
      response.json().then(recipes => {
        localStorage.setItem('recipes', JSON.stringify(recipes));
        localStorage.setItem('recipesETag', eTag);
        renderRecipes(recipes)
      });
    } else {
      // Handle HTTP errors
      console.error('HTTP error', response.status);
    }
  })
  .catch(error => {
    // Handle network errors
    console.error('Network error', error);
  });
</script>