10 files changed, 221 insertions, 0 deletions
diff --git a/templates/base.html b/templates/base.html
new file mode 100644
index 0000000..64ae319
--- /dev/null
+++ b/templates/base.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>index.cooking - {% block title %}{% endblock %}</title>
+    <script src="/static/scripts/htmx.js" defer></script>
+    <link href="/static/style/style.css" rel="stylesheet" />
+  </head>
+  <body>
+    {% include "/components/header.html" %}
+    <h1>{% block heading %}Some heading!{% endblock %}</h1>
+    {% block content %}{% endblock %}
+  </body>
+</html>
diff --git a/templates/components/app.html b/templates/components/app.html
new file mode 100644
index 0000000..6a4c83a
--- /dev/null
+++ b/templates/components/app.html
@@ -0,0 +1,48 @@
+<!-- Renders the main part of the app, including recipes, filters, pagination -->
+
+<div class="app">
+  <h3>Filter by tag</h3>
+  <form
+    class="tags"
+    hx-post="/recipes/search"
+    hx-trigger="change"
+    hx-include="#search"
+    hx-target=".app"
+    hx-swap="innerHTML"
+    id="facets"
+  >
+    {% for facet in facets %}
+    <label
+      ><input
+        type="checkbox"
+        name="choice-{{ loop.index }}"
+        value="{{ facet.name }}"
+        {%
+        if
+        facet.checked
+        %}
+        checked
+        {%
+        endif
+        %}
+      />{{ facet.name }}</label
+    >
+    {% endfor %}
+  </form>
+  <hr />
+
+  {% if recipes|length > 0 %}
+  <ul class="recipes">
+    {% for recipe in recipes %}
+    <li>
+      <a href="/recipe/{{recipe._id}}">{{ recipe.title }}</a>
+      <span>{{ recipe.author }}</span>
+    </li>
+    {% endfor %}
+  </ul>
+
+  {% else %}
+  <p><i>No recipes found</i></p>
+  {% endif %}
+  <div></div>
+</div>
diff --git a/templates/components/header.html b/templates/components/header.html
new file mode 100644
index 0000000..e69cedf
--- /dev/null
+++ b/templates/components/header.html
@@ -0,0 +1,21 @@
+<header>
+  <nav>
+    <ul>
+      <li><a href="/">index.cooking</a></li>
+      <li><a href="/about">about</a></li>
+      {% if not session.username %}
+      <li><a href="/signup">sign up</a></li>
+      <li><a href="/login">login</a></li>
+      {% endif %} {% if session.username %}
+      <li><a href="/home">recipes</a></li>
+      {% endif %}
+    </ul>
+    {% if session.username %}
+    <ul>
+      <li>
+        <a href="/account">{{ session.username }} (account)</a>
+      </li>
+    </ul>
+    {% endif %}
+  </nav>
+</header>
diff --git a/templates/pages/about.html b/templates/pages/about.html
new file mode 100644
index 0000000..d719941
--- /dev/null
+++ b/templates/pages/about.html
@@ -0,0 +1,20 @@
+{% extends "base.html" %} {% block title %} about {% endblock %} {% block
+heading %}
+<h1>about</h1>
+{% endblock %} {% block content %}
+<p>
+  index.cooking is a simple website that allows you to add your favourite
+  recipes from the internet to your own personal searchable index (hence the
+  name).
+</p>
+<p>
+  Simply add URLs for your recipes and index.cooking will remove all the bloat
+  and stories about grandmother's blah blah blah....and just give you the info
+  you need to cook your favourite meals.
+</p>
+<p>
+  Right now index.cooking supports extracting markup from Wordpress sites using
+  Yoast SEO Schema. If you have other websites that you would like us to index,
+  then reach out <a href="/contact">here.</a>
+</p>
+{% endblock %}
diff --git a/templates/pages/account.html b/templates/pages/account.html
new file mode 100644
index 0000000..db28632
--- /dev/null
+++ b/templates/pages/account.html
@@ -0,0 +1,16 @@
+{% extends "base.html" %} {% block title %} account {% endblock %} {% block
+heading %}
+<h1>Hey {{ session.username }} 👋</h1>
+{% endblock %} {% block content %}
+<p>
+  Remember that index.cooking does not store any personal information such as
+  email addresses, so you are responsible for keeping access to your account at
+  all times, be sure to keep your username and password safe!
+</p>
+<p>
+  If you have lost account access and you need the URLs of all the recipes you
+  previously addedd, then contact me
+  <a href="mailto:hello@somwthing.com">here.</a>
+</p>
+<button hx-post="/logout">Logout</button>
+{% endblock %}
diff --git a/templates/pages/home.html b/templates/pages/home.html
new file mode 100644
index 0000000..6a5d4cd
--- /dev/null
+++ b/templates/pages/home.html
@@ -0,0 +1,26 @@
+{% extends "base.html" %} {% block title %} home {% endblock %} {% block heading
+%}recipes{% endblock %} {% block content %}
+<h3>add new recipe</h3>
+<form
+  hx-post="/recipes/add"
+  hx-trigger="submit load"
+  hx-target=".app"
+  hx-swap="innerHTML"
+>
+  <input type="text" name="url" class="border-2 border-black" />
+  <button type="submit" class="cursor-pointer">Submit</button>
+</form>
+
+<h3>search for recipes 🔎</h3>
+<input
+  type="text"
+  hx-trigger="input"
+  hx-post="/recipes/search"
+  hx-target=".app"
+  hx-include="#facets"
+  name="q"
+  class="border-2 border-black"
+  id="search"
+/>
+
+{% include "/components/app.html" %} {% endblock %}
diff --git a/templates/pages/landing.html b/templates/pages/landing.html
new file mode 100644
index 0000000..d6697c8
--- /dev/null
+++ b/templates/pages/landing.html
@@ -0,0 +1,15 @@
+{% extends "base.html" %} {% block title %} welcome 👋{% endblock %} {% block
+heading %}{% endblock %} {% block content %}
+<main>
+  <h1>index.recipes</h1>
+  <p>
+    Welcome. Index.recipes is your own personal recipe database that gets rids
+    of all the noise and bloat of modern recipe sites.
+  </p>
+  <p>
+    You can add URLs for your favourite recipes and your own personal searchable
+    recipe database will be created.
+  </p>
+  <p>Cheers 🍻</p>
+</main>
+{% endblock %}
diff --git a/templates/pages/login.html b/templates/pages/login.html
new file mode 100644
index 0000000..dfee9a0
--- /dev/null
+++ b/templates/pages/login.html
@@ -0,0 +1,13 @@
+{% extends "base.html" %} {% block title %}login{% endblock %} {% block heading
+%}
+<h1>login</h1>
+{% endblock %} {% block content %}
+<form hx-post="/login" hx-trigger="submit load" hx-target="#message">
+  <label for="username">username</label>
+  <input type="text" name="username" id="username" />
+  <label for="password">password</label>
+  <input type="password" name="password" id="password" />
+  <button type="submit">submit</button>
+</form>
+<p id="message"></p>
+{% endblock %}
diff --git a/templates/pages/signup.html b/templates/pages/signup.html
new file mode 100644
index 0000000..c706074
--- /dev/null
+++ b/templates/pages/signup.html
@@ -0,0 +1,18 @@
+{% extends "base.html" %} {% block title %}signup{% endblock %} {% block heading
+%}
+<h1>signup*</h1>
+{% endblock %} {% block content %}
+<form hx-post="/signup" hx-trigger="submit load" hx-target="#message">
+  <label for="username">username</label>
+  <input type="text" name="username" id="username" />
+  <label for="password">password</label>
+  <input type="password" name="password" id="password" />
+  <button type="submit">submit</button>
+</form>
+<p id="message"></p>
+<p>
+  * index.cooking does not store <i>any</i> personal information about you,
+  including email. So be sure to keep your login information safe, as it won't
+  be recoverable.
+</p>
+{% endblock %}
diff --git a/templates/pages/single-recipe.html b/templates/pages/single-recipe.html
new file mode 100644
index 0000000..35c03c0
--- /dev/null
+++ b/templates/pages/single-recipe.html
@@ -0,0 +1,29 @@
+{% extends "base.html" %} {% block heading %} {{ single_recipe.title }} {%
+endblock %} {% block content %}
+<article>
+  <figure>
+    <img src="{{ single_recipe.image }}" alt="{{ single_recipe.title }}" />
+    <figcaption><a href="{{ single_recipe.url }}">Source</a></figcaption>
+  </figure>
+  <h2>Ingredients</h2>
+  <ul>
+    {% for ingredient in single_recipe.ingredients %}
+    <li>{{ ingredient }}</li>
+    {% endfor %}
+  </ul>
+  <h2>Instructions</h2>
+  <ul>
+    {% for instruction in single_recipe.instructions %}
+    <li>{{ instruction }}</li>
+    {% endfor %}
+  </ul>
+</article>
+<button
+  hx-delete="/recipes/delete/{{ single_recipe._id }}"
+  hx-target="#delete-message"
+  hx-swap="innerHTML"
+>
+  Delete recipe
+</button>
+<p id="delete-message"></p>
+{% endblock %}