Begin Contribution Documentation

Author: GeorgeBerdovskiy

app/assets/stylesheets/application.css

@@ -26,6 +26,7 @@ h1 {
 a {
 	text-decoration: none;
 	color: black;
+	border-bottom: 1px solid black;
 }
 
 /* DOCUMENTATION */
@@ -100,6 +101,13 @@ pre code {
 	border: none;
 }
 
+blockquote {
+	padding-left: 16px;
+    color: #9197a1;
+    margin: 0;
+    border-left: 3px solid #9ca3af;
+}
+
 .highlight {
 	background-color: rgba(var(--color-light-gray), 0.5);
 	border: 1px solid rgba(var(--color-light-gray), 1);

app/markdown/contribution.md

@@ -0,0 +1,60 @@
+# Contribution
+So you're interested in contributing to PureChart? Excellent - we're grateful for the help!
+
+## Create Example Project
+We recommend creating a simple project to test your work.
+
+> Note that we're using Ruby `3.0.0` and Rails `7.0.8`. If you encounter unexpected errors, try using these versions instead.
+
+First, choose the directory where you will be working and run `rails new metrics` to generate a new Ruby on Rails project. We've called the application "metrics" because one might use our charts for some kind of analytics application, but you may choose whatever name you'd like.
+
+## Clone PureChart
+Next, clone the PureChart gem from GitHub in the same directory (not in `/metrics`) as so -
+
+```sh
+git clone https://github.com/PureChart/purechart.git
+```
+
+## Add PureChart to Project
+Let's add the local version of PureChart to the metrics application. Open `metrics/Gemfile` and add the following line somewhere in the file.
+
+#### metrics/Gemfile
+```ruby
+gem "purechart", path: "../purechart"
+```
+
+Move to the `metrics` directory in your terminal and run `bundle install` to install the gem. Finally, run `bin/rails server` and you're ready to go! If you visit `http://127.0.0.1:3001` in your web browser, you'll see the following webpage -
+
+![Rails Default Webpage](./images/other/RailsDefaultWebpage.png)
+
+## Create a Chart
+Now that we have a working test project, let's add a new page called "dashboard." Ruby on Rails provides many nice generator commands, and we'll use one of them right now. But first, open `metrics/config/routes.rb`. It should look like this -
+
+#### metrics/config/routes.rb
+```ruby
+Rails.application.routes.draw do
+    # Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html
+
+    # Defines the root path route ("/")
+    # root "articles#index"
+end
+```
+
+This contains all the routes our application will handle. Add a new route that will point to our dashboard page -
+
+#### metrics/config/routes.rb
+```ruby
+Rails.application.routes.draw do
+    get "/dashboard", to: "dashboard#index"
+    ...
+end
+```
+
+Finally, run `bin/rails generate controller Articles index --skip-routes` to create a **controller** for the dashboard. Ruby on Rails uses the MVC model, which stands for **M**odel **V**iew **C**ontroller. Long story short, the controller decides what data to collect and what views to render based on a user request. The `--skip-routes` flag at the end is necessary because we've already added the route manually.
+
+> [RAILSG](https://railsg.xyz/) is an awesome website that helps you build Ruby on Rails generator commands. Definitely give it a whirl at some point.
+
+This will create a few new files. We're most interested in...
+
+- The controller (`app/controllers/dashboard_controller.rb`), and
+- The view (`app/views/dashboard/index.htmk.erb`).

app/views/articles/index.html.erb

@@ -13,6 +13,7 @@
                 <%= button_tag "Getting Started", id: "getting-started", class: "nav-button getting-started", data: { action: "click->articles--page#navigate" } %>
                 <%= button_tag "Types of Charts", id: "types-of-charts", class: "nav-button types-of-charts", data: { action: "click->articles--page#navigate" } %>
                 <%= button_tag "Chart Styling", id: "chart-styling", class: "nav-button chart-styling", data: { action: "click->articles--page#navigate" } %>
+                <%= button_tag "Contribution", id: "contribution", class: "nav-button contribution", data: { action: "click->articles--page#navigate" } %>
             </div>
         </div>