fix links, use framework

package.json

@@ -1,5 +1,8 @@
 {
   "dependencies": {
     "tailwindcss": "^3.4.14"
+  },
+  "devDependencies": {
+    "daisyui": "^4.12.13"
   }
 }

src/main.rs

@@ -15,7 +15,7 @@ mod entities;
 #[derive(Debug, Template)]
 #[template(path = "recipe_card.html")]
 struct RecipeCard {
-    id: i64,
+    id: i32,
     author: Option<String>,
     image_url: String,
     title: String,

styles.css

@@ -4,17 +4,16 @@
 @tailwind components;
 @tailwind utilities;
 
-/* overflow-hidden is to prevent overflow within the card */
+/*
 .card {
     @apply bg-white rounded overflow-hidden shadow-md relative;
 }
 
-/* object-cover is to prevent distortion */
 .badge {
     @apply bg-secondary-100 text-secondary-200 text-xs uppercase font-bold rounded-full p-2 absolute top-0 ml-2 mt-2;
 }
 
-/* tracking-wider is for space between letters */
 .btn {
     @apply rounded-full py-2 px-3 uppercase text-xs font-bold cursor-pointer tracking-wider;
 }
+*/

tailwind.config.js

@@ -1,7 +1,6 @@
 /** @type {import('tailwindcss').Config} */
     module.exports = {
         content: ["./templates/**/*.html"],
-        darkMode: true,
         theme: {
             extend: {
                 colors: {
@@ -19,5 +18,17 @@ module.exports = {
         variants: {
             extend: {},
         },
-        plugins: [],
+        plugins: [
+            require('daisyui'),
+        ],
+        daisyui: {
+            themes: ['light', 'dark'], // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "cupcake"]
+            darkTheme: "light", // name of one of the included themes for dark mode
+            base: true, // applies background color and foreground color for root element by default
+            styled: true, // include daisyUI colors and design decisions for all components
+            utils: true, // adds responsive and modifier utility classes
+            prefix: "", // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors)
+            logs: true, // Shows info about daisyUI version and used config in the console when building your CSS
+            themeRoot: ":root", // The element that receives theme color CSS variables
+        },
     };

templates/index.html

@@ -1,8 +1,7 @@
 {% extends "base.html" %}
 
 {% block content %}
-<!-- main content -->
+<main class="px-16 py-6 md:col-span-3">
-<main class="px-16 py-6 bg-gray-100 md:col-span-3">
     <div class="flex justify-center md:justify-end">
         <a href="/sign-in" class="btn text-primary border-primary md:border-2 hover:shadow-lg transition ease-out duration-300">Login</a>
     </div>
@@ -25,5 +24,4 @@
         </div>
     </div>
 </main>
-
 {% endblock %}

templates/nav.html

@@ -14,7 +14,7 @@
         </div>
         <ul class="text-sm mt-6 hidden md:block" id="menu">
             <li class="text-gray-700 font-bold py-2">
-                <a href="#" class="px-4 flex justify-end border-r-4 border-primary hover:shadow-md">
+                <a href="/" class="px-4 flex justify-end border-r-4 border-primary hover:shadow-md">
                     <span>Home</span>
                     <svg class="w-5 ml-2" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                         <path
@@ -22,16 +22,6 @@
                     </svg>
                 </a>
             </li>
-            <li class="py-2">
-                <a href="#" class="px-4 flex justify-end border-r-4 border-white hover:shadow-md">
-                    <span>About</span>
-                    <svg class="w-5 ml-2" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-                        <path fill-rule="evenodd"
-                        d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z"
-                        clip-rule="evenodd" />
-                    </svg>
-                </a>
-            </li>
         </ul>
     </nav>
 </div>

templates/recipe_card.html

@@ -1,4 +1,4 @@
-<a class="card hover:shadow-lg transition ease-linear transform hover:scale-105" href="/recipies/{{id}}">
+<a class="card hover:shadow-lg transition ease-linear transform hover:scale-105" href="/recipe/{{id}}">
     <img src={{image_url}} alt="noodles" class="w-full h-32 md:h-48 object-cover">
     <div class="m-4">
         <span class="font-bold">{{title}}</span>

templates/recipies/show.html

@@ -1,15 +1,14 @@
 {% extends "base.html" %}
 
 {% block content %}
-<!-- main content -->
+<main class="px-16 py-md:col-span-3">
-<main class="px-16 py-6 bg-gray-100 md:col-span-3">
     <div class="flex justify-center md:justify-end">
         <a href="/sign-in" class="btn text-primary border-primary md:border-2 hover:shadow-lg transition ease-out duration-300">Login</a>
     </div>
 
-    <div class="sm:bg-white sm:w-[50%] sm:ml-auto sm:mr-auto sm:mt-[10rem] sm:p-10 sm:rounded-3xl">
+    <div class="sm:ml-auto sm:mr-auto sm:rounded-3xl">
-        <div>
+        <div class="sm:mx-auto text-center">
-            <img src={{ recipe.image_url.clone().unwrap_or_default() }} alt="omelette" class="sm:rounded-xl">
+            <img src={{ recipe.image_url.clone().unwrap_or_default() }} alt="{{recipe.title}}" class="sm:rounded-xl">
         </div>
         <div class="pl-[1.7rem] mt-8 sm:p-0 sm:mt-9">
             <h1 class="font-young-serif text-[37px] text-stone-700 leading-10 mb-7 sm:text-stone-800">{{ recipe.title }}</h1>
@@ -36,6 +35,16 @@
                 {% endfor %}
             </ol>
         </div>
+        <div class="border-bottom marker:text-rose-900 marker:font-outfit-semibold border-b-[2px] ml-auto mr-auto w-[20.2rem] pb-4 mt-8 sm:w-auto">
+            <p class="Title mb-5">Tags</p>
+            <ol class="list-disc ml-6">
+                {% for tag in tags %}
+                <li class="font-outfit-regular text-stone-500 text-[17px] mb-3 pl-3 text-base">
+                    <div>{{ tag.name }}</div>
+                </li>
+                {% endfor %}
+            </ol>
+        </div>
     </div>
 </main>
 

yarn.lock

@@ -187,11 +187,34 @@ cross-spawn@^7.0.0:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
+css-selector-tokenizer@^0.8:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz#88267ef6238e64f2215ea2764b3e2cf498b845dd"
+  integrity sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==
+  dependencies:
+    cssesc "^3.0.0"
+    fastparse "^1.1.2"
+
 cssesc@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
+culori@^3:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/culori/-/culori-3.3.0.tgz#e33530adbd124d53bd6550394397e695eaaed739"
+  integrity sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ==
+
+daisyui@^4.12.13:
+  version "4.12.13"
+  resolved "https://registry.yarnpkg.com/daisyui/-/daisyui-4.12.13.tgz#e386c54dd7a55e77dc865f12e1556b37229dfb4e"
+  integrity sha512-BnXyQoOByUF/7wSdIKubyhXxbtL8gxwY3u2cNMkxGP39TSVJqMmlItqtpY903fQnLI/NokC+bc+ZV+PEPsppPw==
+  dependencies:
+    css-selector-tokenizer "^0.8"
+    culori "^3"
+    picocolors "^1"
+    postcss-js "^4"
+
 didyoumean@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
@@ -228,6 +251,11 @@ fast-glob@^3.3.0:
     merge2 "^1.3.0"
     micromatch "^4.0.4"
 
+fastparse@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.2.tgz#91728c5a5942eced8531283c79441ee4122c35a9"
+  integrity sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==
+
 fastq@^1.6.0:
   version "1.17.1"
   resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.17.1.tgz#2a523f07a4e7b1e81a42b91b8bf2254107753b47"
@@ -445,7 +473,7 @@ path-scurry@^1.11.1:
     lru-cache "^10.2.0"
     minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
 
-picocolors@^1.0.0, picocolors@^1.1.0:
+picocolors@^1, picocolors@^1.0.0, picocolors@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
   integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
@@ -474,7 +502,7 @@ postcss-import@^15.1.0:
     read-cache "^1.0.0"
     resolve "^1.1.7"
 
-postcss-js@^4.0.1:
+postcss-js@^4, postcss-js@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.1.tgz#61598186f3703bab052f1c4f7d805f3991bee9d2"
   integrity sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==