Idea Arca

---

ความคิด arca

Idea Arca (ละติน: "Idea Vault") เป็นธนาคารแนวคิดของโครงการ ปลดปล่อยความคิดสร้างสรรค์ทางเทคโนโลยีของคุณ ค้นพบทำงานร่วมกันและนำแนวคิดโครงการที่เป็นนวัตกรรมมาสู่ชีวิตในสาขาเทคโนโลยีต่างๆผ่านที่เก็บแรงบันดาลใจนี้

ซ้อนเทค

Astro	SCSS	JSON
youtube vid	youtube vid	youtube vid

หลังจากผ่านวิดีโอเหล่านี้คุณจะมีคุณสมบัติเพียงพอที่จะทำงานบน codebase ของเรา

การบริจาค

นี่คือวิธีที่คุณสามารถมีส่วนร่วมในโครงการนี้:

• เพิ่มธีม
• เพิ่มไอเดีย
• รายงาน/แก้ไขข้อบกพร่อง
• เขียนเอกสาร
• อื่น ๆ : ใช้คุณสมบัติใหม่แก้ไข UI/UX

กระบวนการบริจาค

1. Fork : แยก repo github นี้ไปยังบัญชี GitHub ของคุณเอง
2. โคลน : โคลน repo forked (repo นำเสนอในบัญชีของคุณ) ไปยังเครื่องในพื้นที่ของคุณ
3. ปัญหา : สร้างปัญหาเกี่ยวกับคุณสมบัติที่คุณจะดำเนินการและได้รับปัญหาที่ได้รับมอบหมายให้คุณ
4. การเปลี่ยนแปลง : สร้างสาขาใหม่และกระทำการเปลี่ยนแปลงของคุณในสาขานั้น
5. Push : หลังจากการเปลี่ยนแปลงทั้งหมดได้รับการเปลี่ยนแปลงให้ผลักดันการเปลี่ยนแปลงของคุณไปยัง repo ระยะไกลของคุณ
6. PR : หลังจากผลักดันการเปลี่ยนแปลงให้เพิ่มการประชาสัมพันธ์จาก Repo ระยะไกลของคุณไปยังสาขา dev ของ repo นี้ ใน PR กล่าวถึงหมายเลขปัญหาที่คุณจะปิด

หากคุณยังใหม่กับ Git และ GitHub ฉันจะแนะนำให้คุณผ่านสิ่งนี้ก่อน:

1. วิดีโอ yt (แนะนำ): https://www.youtube.com/watch?v=rgoj5yh7evk&pp=yguoz2l0igfuzcbnaxrodwi%3d
2. เอกสาร: https://hacktoberfest.com/partipolication/#beginner-resources

หากคุณยังใหม่กับโอเพ่นซอร์สคุณสามารถผ่าน: https://www.youtube.com/watch?v=yzevmecydce

---

ผลงาน

การบริจาคสองประเภทที่สำคัญมีการอธิบายด้านล่าง (เพิ่มธีมเพิ่มแนวคิด):

เพิ่มธีม

ที่นี่เรากำลังพูดถึงธีมสำหรับเว็บไซต์ กระบวนการเพิ่มธีมคือ (หลังส้อมและโคลน):
เรากำลังแสดง EG โดยการเพิ่มธีมที่เรียกว่า test

1. เพิ่ม <option> ใหม่ใน ./src/components/ThemeSelector.astro :

• ก่อน

 < select name = "themes" id = { id } class = "btn" >
  /* other options */
  < option value = "neon" > Neon </ option >
</ select >

• หลังจาก

 < select name = "themes" id = { id } class = "btn" >
  /* other options */
  < option value = "neon" > Neon </ option >
  /* Added code ? */
  < option value = "test" > Test </ option >
</ select >

2. การเพิ่มรหัส class ใหม่ใน ./src/styles/themes.scss :

ชื่อของคลาสคือค่าที่กำหนดให้กับแอตทริบิวต์ value ของแท็ก <option> ของคุณ

ที่นี่เราใช้:

 < option value = "test" > Test </ option >

ดังนั้นชั้นเรียนของเราคือ test

• ก่อน

 /* Other Codes */
.neon {
  --primary-1 : #793fdf ;
  --primary-2 : #7091f5 ;
  --primary-3 : #97fff4 ;
  --primary-4 : #ffffff ;
  --sidenav : #793fdfce ;
  --gradient : #e600ff ;
}

• หลังจาก

 /* Other Codes */
.neon {
  /* same */
}

/* Added code ? */
.test {
  --primary-1 : #000000 ;
  --primary-2 : #000132 ;
  --primary-3 : #000245 ;
  --primary-4 : #ffffff ;
  --sidenav : #0000ce ;
  --gradient : #f690fa ;
}

บันทึก :

1. --primary-1 : ใช้เป็นพื้นหลังหลัก
2. --primary-3 : ส่วนใหญ่ใช้ข้อความสำคัญของฉัน
3. --primary-4 : ใช้โดยข้อความโดยละเอียด
4. --sidenav : ลดความทึบของ --primary-1 เพียงผนวก ce ของคุณ --primary-1 ;
5. --gradient : นี่เป็น random color ที่เหมาะกับเว็บไซต์มันเป็นสีของวงกลมการไล่ระดับสีที่ด้านบนของเว็บไซต์

คุณสามารถใช้ https://colorhunt.co/ สำหรับ 4 สีหลักและเลือกสีที่ดีสำหรับการไล่ระดับสีด้วยตัวเอง

เพิ่มไอเดีย

ที่นี่เรากำลังพูดถึงแนวคิดที่แสดงบนเว็บไซต์ กระบวนการเพิ่มแนวคิดคือ (หลังส้อมและโคลน):

กรณีที่ 1 : การเพิ่มแนวคิดในส่วน/ฟิลด์ที่มีอยู่

เรากำลังแสดงตัวอย่างโดยการเพิ่มแนวคิดในส่วน React

1. เพิ่มวัตถุของคุณใน ./src/database/MainData.json ภายใน data ของส่วนปฏิกิริยา:

• ก่อน

 [
  {
    section : 'React' ,
    data : [
      {
        id : 1 ,
        title : 'E-commerce Dashboard' ,
        tags : [ 'React' , 'Redux' , 'CSS' , 'API Integration' ] ,
        description : 'Lorem Ispum' ,
        link : 'https://example-ecommerce-dashboard.com' ,
      } ,
    ] ,
  } ,
] ;

• หลังจาก

 [
  {
    section : 'React' ,
    data : [
      {
        // prev code
      } ,
      /* Added code ? */
      {
        id : 2 ,
        title : 'Test' ,
        tags : [ 'React' , 'Redux' , 'scss' , 'API' ] ,
        description : 'Give Meaningful Description, there is no word limit' ,
        link : 'Working Link' ,
      } ,
    ] ,
  } ,
] ;

กรณีที่ 2 : การเพิ่มแนวคิดในส่วน/ฟิลด์ใหม่

เรากำลังแสดงตัวอย่างโดยการเพิ่มแนวคิดในส่วนใหม่: ส่วน BackboneJs

1. เพิ่มชื่อส่วนของคุณใน ./src/database/sections.json เพื่อให้ส่วน/ฟิลด์ของคุณปรากฏในแผงนำทางด้านซ้าย:

• ก่อน

 [ 'React' , 'Vue' , 'Svelte' , 'Frontend' , 'Backend' ] ;

• หลังจาก

 [ 'React' , 'Vue' , 'Svelte' , 'Frontend' , 'Backend' , 'BackboneJs' ] ;

2. เพิ่มวัตถุของคุณใน ./src/database/MainData.json ภายใน data ของส่วนปฏิกิริยา:

• ก่อน

 [
  {
    section : 'React' ,
    data : [
      {
        id : 1 ,
        title : 'E-commerce Dashboard' ,
        tags : [ 'React' , 'Redux' , 'CSS' , 'API Integration' ] ,
        description : 'Lorem Ispum' ,
        link : 'Working Link' ,
      } ,
    ] ,
  } ,
  // Similar Codes for Other Sections
] ;

• หลังจาก

 [
  // prev Codes
  {
    section : 'BackboneJs' ,
    data : [
      {
        id : 1 ,
        title : 'E-commerce Dashboard' ,
        tags : [ 'Backbonejs' ] ,
        description : 'Give Meaningful Description, there is no word limit' ,
        link : 'Working Link' ,
      } ,
    ] ,
  } ,
] ;

บันทึก :

1. section : ฟิลด์สำคัญ
2. link : ควรเป็นลิงค์ที่ใช้งานไม่ได้ อาจเป็นลิงค์เว็บไซต์ที่โฮสต์ Figma หากความคิดของคุณขึ้นอยู่กับเว็บไซต์อื่น ๆ ที่มีอยู่แล้ว (อาจเป็น Desings หรือคุณสมบัติใด ๆ ) ให้ระบุลิงค์เว็บไซต์นั้น
3. * id ทั้งหมดในแต่ละส่วนจะต้อง ไม่ซ้ำกัน*