update docker

Author: ehsanghaffar

.env

@@ -3,6 +3,6 @@
 
 ENV_VARIABLE=production_server_only_variable
 NEXT_PUBLIC_ENV_VARIABLE=production_public_variable
-DB_LOCAL_URL=mongodb://mongo:27017/denizpaz
+NEXT_PUBLIC_DB_LOCAL_URL=mongodb://mongo:27017/denizpaz
 PORT=3000
 STORE_PATH=upload

.env.development

@@ -0,0 +1,9 @@
+# DO NOT ADD SECRETS TO THIS FILE. This is a good place for defaults.
+# If you want to add secrets use `.env.local` instead.
+
+ENV_VARIABLE=production_server_only_variable
+NEXT_PUBLIC_ENV_VARIABLE=production_public_variable
+NEXT_PUBLIC_DB_LOCAL_URL=mongodb://mongo:27017/denizpaz
+PORT=3000
+STORE_PATH=upload
+NEXT_PUBLIC_DB_LOCAL_URL=mongodb://mongo:27017/denizpaz

.env.example

@@ -2,21 +2,17 @@ import React from "react";
 import LatestRecipes from "../../components/LatestRecipes";
 import SingleRecipeTopSection from "../../components/SingleRecipeTopSection";
 
-// کامپوننت Recipes که لیست رسپی‌ها را نمایش می‌دهد
 const Recipes = () => {
   return (
     <>
-      {/* بخش بالایی */}
       <SingleRecipeTopSection 
         sectionBackground={"/header-recipe.png"} 
         recipeName="... رسپی ها ..."
         recipeDesc="دنبال یه دسر خاص و خوشمزه ای ؟ سریع پیداش کن ..."
       />
-      {/* بخش لیست رسپی‌ها */}
       <section id="recipes">
         <div className="container py-10">
           <div className="recipes-section">
-            {/* استفاده از کامپوننت LatestRecipes برای نمایش لیست آخرین رسپی‌ها */}
             <LatestRecipes limitNumber={20} />
           </div>
         </div>

.env.local.example

@@ -9,6 +9,7 @@ services:
         NEXT_PUBLIC_ENV_VARIABLE: ${NEXT_PUBLIC_ENV_VARIABLE}
     restart: always
     volumes:
+      - ./:/app/
       - /app/node_modules
       - /app/.next
     ports:
@@ -18,21 +19,29 @@ services:
     depends_on:
       - mongo
     networks:
-      - asgard
+      - MONGO
 
   mongo:
     container_name: mongo
     image: mongo:latest
     volumes:
-      - data:/data/db
+      - type: volume
+        source: MONGO_DATA
+        target: /data/db
+      - type: volume
+        source: MONGO_CONFIG
+        target: /data/configdb
     ports:
       - "27017:27017"
     networks:
-      - asgard
+      - MONGO
 
 networks:
-  asgard:
-    # external: true
+  MONGO:
+    name: MONGO
 
 volumes:
-  data:
+  MONGO_DATA:
+    name: MONGO_DATA
+  MONGO_CONFIG:
+    name: MONGO_CONFIG

.env.production

@@ -0,0 +1,44 @@
+
+کد فوق یک کامپوننت React به نام "Recipes" را تعریف می‌کند. این کامپوننت دو کامپوننت دیگر به نام‌های "LatestRecipes" و "SingleRecipeTopSection" را درون خود استفاده می‌کند. در ادامه، ماژول‌های موردنیاز برای React را وارد می‌کنیم.
+
+```javascript
+import React from "react";
+import LatestRecipes from "../../components/LatestRecipes";
+import SingleRecipeTopSection from "../../components/SingleRecipeTopSection";
+```
+
+سپس، تابع `Recipes` تعریف می‌شود. این تابع عملکرد صفحه "Recipes" را تعیین می‌کند. تابع برگشتی JSX است که اجزای مختلف صفحه را شامل می‌شود.
+
+```javascript
+const Recipes = () => {
+  return (
+    <>
+      <SingleRecipeTopSection 
+        sectionBackground={"/header-recipe.png"} 
+        recipeName="... رسپی ها ..."
+        recipeDesc="دنبال یه دسر خاص و خوشمزه ای ؟ سریع پیداش کن ..."
+      />
+
+      <section id="recipes">
+        <div className="container py-10">
+          <div className="recipes-section">
+            <LatestRecipes limitNumber={20} />
+          </div>
+        </div>
+      </section>
+    </>
+  );
+};
+```
+
+در این قسمت، ابتدا کامپوننت "SingleRecipeTopSection" را با استفاده از مقادیر ویژگی‌ها (props) فراخوانی می‌کنیم. این کامپوننت یک بخش بالایی برای نمایش یک رسپی خاص را ایجاد می‌کند. در این مثال، مقادیر ویژگی‌ها برای تنظیم تصویر پس زمینه بخش، نام رسپی و توضیحات رسپی استفاده می‌شود.
+
+سپس، یک المان `<section>` با شناسه "recipes" تعریف می‌کنیم که درون آن یک المان `<div>` قرار دارد. این المان `<div>` حاوی یک کلاس "container py-10" است و درون آن یک المان `<div>` دیگر به عنوان "recipes-section" قرار دارد. درون این المان `<div>`، کامپوننت "LatestRecipes" قرار دارد که با استفاده از ویژگی (props) "limitNumber" تعداد محدودی از رسپی‌ها را نمایش می‌دهد.
+
+در نهایت، کامپوننت "Recipes" را به عنوان کامپوننت پیش‌فرض (default) برای صادرات تعریف می‌کنیم.
+
+```javascript
+export default Recipes;
+```
+
+به این ترتیب، کد فوق یک صفحه "Recipes" را تعریف می‌کند که شامل بخش بالایی رسپی‌ها و لیستی از رسپی‌های جدید است.

app/recipes/page.tsx

@@ -2,6 +2,7 @@ declare namespace NodeJS {
   export interface ProcessEnv {
     readonly ENV_VARIABLE: string
     readonly NEXT_PUBLIC_ENV_VARIABLE: string
+    readonly NEXT_PUBLIC_DB_LOCAL_URL: string
 
     readonly DEVELOPMENT_ENV_VARIABLE: string
     readonly NEXT_PUBLIC_DEVELOPMENT_ENV_VARIABLE: string

docker-compose.yml

@@ -10,7 +10,7 @@ const options: any = {
 export const connectToDatabase = async () => {
   if (!connection.readyState) {
     // console.log('Connecting to ', DATABASE)
-    await mongoose.connect(DATABASE || "mongodb://mongo:27017/denizpaz", options)
+    await mongoose.connect(process.env.NEXT_PUBLIC_DB_LOCAL_URL, options)
     .then((c) => {
       console.log("Mongo Connected: ")
     })