Idea Arca
1.0.0
Idea arca(ラテン語: "Idea Vault")はプロジェクトアイデアバンクです。あなたの技術の創造性を解き放ちます。この心に強く訴えるリポジトリを通じて、さまざまな技術分野で革新的なプロジェクトのアイデアを発見、協力し、実現します。
| アストロ | SCSS | JSON |
|---|---|---|
| YouTube Vid | YouTube Vid | YouTube Vid |
これらのビデオを調べた後、あなたは私たちのコードベースで作業するのに十分な資格があります
このプロジェクトに貢献できる方法は次のとおりです。
Git and Githubを初めて使用する場合は、最初にこれを行うことをお勧めします。
- YTビデオ(推奨):https://www.youtube.com/watch?v=rgoj5yh7evk&pp=yguoz2l0igfuzcbnaxrodwi%3d
- ドキュメント:https://hacktoberfest.com/participation/#beginner-resources
オープンソースが初めての場合は、https://www.youtube.com/watch?v=yzevmecydceを通過できます。
貢献の2つの主要なタイプを以下に説明します(テーマを追加し、アイデアを追加):
ここでは、ウェブサイトのテーマについて話しています。テーマを追加するプロセスは(フォークとクローンの後)です。
testと呼ばれるテーマを追加することにより、EGを示しています。
./src/components/ThemeSelector.astroに新しい<option>を追加します: < 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 >./src/styles/themes.scssに新しいclassコードを追加:クラスの名前は、 <option>タグのvalue属性に与えられた値です
ここで使用しました:
< 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 ;
}--primary-1 :メインバックグラウンドとして使用されます--primary-3 :ほとんど私の重要なテキストが使用されています--primary-4 :詳細なテキストで使用されます--sidenav : --primary-1の不透明度が低下し、 --primary-1をceするだけです。--gradient :これはウェブサイトに合ったrandom colorで、ウェブサイトの上部にあるグラデーションサークルの色です4つのプライマリカラーにhttps://colorhunt.co/を使用して、自分でグラデーションに素敵な色を選択できます
ここでは、ウェブサイトに表示されるアイデアについて話しています。アイデアを追加するプロセスは(フォークとクローンの後)です。
Reactセクションにアイデアを追加して、例を示しています。
data内に./src/database/MainData.jsonにオブジェクトを追加します。 [
{
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' ,
} ,
] ,
} ,
] ;新しいSectio: BackboneJsセクションにアイデアを追加することで、例を示しています。
./src/database/sections.jsonに追加して、セクション/フィールドを左ナビゲーションパネルに表示します。 [ 'React' , 'Vue' , 'Svelte' , 'Frontend' , 'Backend' ] ; [ 'React' , 'Vue' , 'Svelte' , 'Frontend' , 'Backend' , 'BackboneJs' ] ;data内に./src/database/MainData.jsonにオブジェクトを追加します。 [
{
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' ,
} ,
] ,
} ,
] ;section :主要なフィールドlink :それは機能していない、壊れていないリンクである必要があります。 Figma、ホストされたWebサイトリンクである可能性があります。あなたのアイデアが他の既存のWebサイト(Desingsまたは任意の機能になる可能性がある場合)に基づいている場合は、そのWebサイトリンクを提供してください。id一意でなければなりません*