add last recipe on main page

src/routes/+page.svelte

@@ -8,10 +8,15 @@
   let serverurl = 'http://192.168.0.105:3000';
   let last_page = 1;
   let recipes_list = [];
+  let last_recipe;
 
   // First loading
   let recipes_p = axios.get(serverurl+"/recipes?page=" + last_page);
   recipes_p.then(function (response) {
+    axios.get(serverurl+"/recipe?r_id="+response.data.recipes[0].id).then(function (response) {
+      last_recipe = response.data.recipe;
+      console.log(last_recipe);
+    })
     recipes_list = response.data.recipes;
   })
   .catch(function (error) {
@@ -41,13 +46,27 @@
     {#await recipes_p}
       <LoadingScreen/>
     {:then}
+      <div class="mb-10">
+        {#if last_recipe != undefined}
+          <!-- <h2>Новый рецепт</h2> -->
+          <div class="flex flex-col-reverse md:flex-row gap-6">
+            <div class="flex-1">
+              <h3 class="text-3xl box-border mb-5">{last_recipe.title}</h3>
+              <p>{last_recipe.desc}</p>
+            </div>
+            <div class="flex-1 duration-300 hover:scale-110 self-center">
+              <a href="/recipe/{last_recipe.id}"><img class="rounded-lg h-auto w-auto" alt={last_recipe.title} src="{serverurl}/recipe_image?filename={last_recipe.img}" /></a>
+            </div>
+          </div>
+        {/if}
+      </div>
       <div class="grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
         {#each recipes_list as recipe}
           <a href="/recipe/{recipe.id}" class="group transition duration-300 hover:scale-110">
             <div class="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-lg bg-gray-200 xl:aspect-h-8 xl:aspect-w-7">
               <img src="{serverurl}/recipe_image?filename={recipe.img}" alt="{recipe.title}" class="h-full w-full object-cover object-center transition duration-700 group-hover:opacity-90">
             </div>
-            <h3 class="mt-3 text-base text-gray-700">{recipe.ctime} / {recipe.cal}</h3>
+            <h4 class="mt-3 text-base text-gray-700">{recipe.ctime} / {recipe.cal}</h4>
             <p class="mt-0 text-lg font-medium text-gray-900">{recipe.title}</p>
           </a>
         {/each}
@@ -58,3 +77,16 @@
     {/await}
   </div>
 </div>
+
+<style>
+  @font-face {
+    font-family: 'AlegreyaSansSC';
+    font-style: normal;
+    font-weight: 800;
+    src: url('/fonts/Alegreyasansscextrabold.ttf');
+  }
+
+  h3 {
+    font-family: 'AlegreyaSansSC', sans-serif;
+  }
+</style>

src/routes/Header.svelte

@@ -65,9 +65,12 @@
 
 
 <!-- todo:
+  добавить env
   донат
   поиск
   кеширование
   метрики (prometheus, graphana)
   настроить robots.txt
+  добавить почту для рекламы
+  добавить похожие рецепты в конец страницы
 -->