Idea Arca

---

Idee Arca

Idea Arca (Latein: "Idea Vault") ist eine Projektidee -Bank. Entfesselt Ihre technische Kreativität. Entdecken Sie in diesem inspirierenden Repository in verschiedenen Technologiemitteln, zusammenarbeiten und leben innovative Projektideen in verschiedenen technischen Bereichen zum Leben.

Tech Stack

Astro	SCSS	JSON
YouTube Vid	YouTube Vid	YouTube Vid

Nachdem Sie diese Videos durchlaufen haben, sind Sie qualifiziert genug, um an unserer Codebasis zu arbeiten

Beitragen

Hier sind einige Möglichkeiten, wie Sie zu diesem Projekt beitragen können:

• Themen hinzufügen
• Ideen hinzufügen
• Fehler melden/beheben.
• Dokumentation schreiben.
• Andere: Implementieren Sie neue Funktionen, ändern Sie UI/UX

Beitragsprozess

1. Fork : Fork dieses Github -Repo auf Ihr eigenes Github -Konto
2. Klon : Klonen Sie das Forked Repo (das in Ihrem Konto vorhandene Repo) auf Ihre lokale Maschine.
3. Problem : Erstellen Sie ein Problem in Bezug auf die Funktion, an der Sie arbeiten und das Problem Ihnen zugewiesen werden
4. Änderungen : Erstellen Sie eine neue Filiale und verpflichten Sie Ihre Änderungen in dieser Filiale.
5. Push : Schließen Sie nach allen Änderungen Ihre Änderungen in Ihr Remote -Repo.
6. PR : Erhöhen Sie nach Änderungen einen PR von Ihrem Remote -Repo auf den Dev -Zweig dieses Repos. Erwähnen Sie in der PR die Ausgabennummer, die Sie schließen werden.

Wenn Sie neu von Git und GitHub sind, empfehle ich Ihnen, zuerst dies zu durchlaufen:

1. Yt Video (empfohlen): https://www.youtube.com/watch?v=rgoj5yh7evk&pp=yguoz2l0igfuzcbnaxrodwi%3d
2. DOCS: https://hacktoberfest.com/participation/#begernner-resources

Wenn Sie neu in Open-Source sind, können Sie durchgehen: https://www.youtube.com/watch?v=yzevmecydce

---

Beiträge

Die beiden Haupttypen von Beitrag werden unten erläutert (Thema hinzufügen, Ideen hinzufügen):

Themen hinzufügen

Hier sprechen wir über das Thema für die Website. Der Prozess zum Hinzufügen von Thema ist (nach Gabel und Klon):
Wir zeigen ein EG, indem wir ein Thema namens test hinzufügen.

1. Fügen Sie eine neue <option> in ./src/components/ThemeSelector.astro hinzu:

• Vor

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

• Nach

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

2. Hinzufügen eines neuen class in ./src/styles/themes.scss :

Name der Klasse ist der Wert, der dem Wertattribut Ihres <option> -Tags zu value gegeben wird

Hier haben wir verwendet:

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

Unsere Klasse ist also test .

• Vor

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

• Nach

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

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

NOTIZ :

1. --primary-1 : wird als Haupthintergrund verwendet
2. --primary-3 : Wird meistens meine wichtigen Texte verwendet
3. --primary-4 : wird von detaillierten Texten verwendet
4. --sidenav : Ist eine reduzierte Opazität von --primary-1 , einfach ce Ihrer --primary-1 anhängen;
5. --gradient : Dies ist eine random color , die der Website entspricht. Es ist die Farbe des Gradientenkreises oben auf der Website

Sie können https://colorhunt.co/ für die 4 Primärfarben verwenden und eine schöne Farbe für den Verlauf selbst wählen

Ideen hinzufügen

Hier sprechen wir über die auf der Website angezeigten Ideen. Der Prozess zum Hinzufügen von Ideen ist (nach Gabel und Klon):

Fall 1 : Hinzufügen von Idee im vorhandenen Abschnitt/Feld Hinzufügen

Wir zeigen ein Beispiel, indem wir eine Idee im React -Abschnitt hinzufügen.

1. Fügen Sie Ihr Objekt in ./src/database/MainData.json im Abschnitt data des React" hinzu:

• Vor

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

• Nach

 [
  {
    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' ,
      } ,
    ] ,
  } ,
] ;

Fall 2 : Hinzufügen von Idee in einem neuen Abschnitt/Feld Hinzufügen

Wir zeigen ein Beispiel, indem wir eine Idee in einem neuen Abschnitt BackboneJs hinzufügen.

1. Fügen Sie Ihren Abschnittsnamen in ./src/database/sections.json hinzu, damit Ihr Abschnitt/Feld im linken Navigationspanel angezeigt wird:

• Vor

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

• Nach

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

2. Fügen Sie Ihr Objekt in ./src/database/MainData.json im Abschnitt data des React" hinzu:

• Vor

 [
  {
    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
] ;

• Nach

 [
  // 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' ,
      } ,
    ] ,
  } ,
] ;

NOTIZ :

1. section : Die Hauptfelder
2. link : Es sollte ein funktionierender, nicht gebrochener Link sein. Es kann eine Figma, eine gehostete Website -Link sein. Wenn Ihre Idee auf einer anderen bereits vorhandenen Website basiert (kann es sich um Unterschiede oder eine Funktion handeln), geben Sie diesen Website -Link an.
3. *Alle id in den einzelnen Abschnitten müssen eindeutig sein*