Skip to content

Commit

Permalink
Added page for "How to contribute section" (#37)
Browse files Browse the repository at this point in the history
* added webpage with bulma css

* added another heading with github buttons

* Added changes to code suggested by maintainer

* Removed the commented out code
  • Loading branch information
darshil-here authored Feb 21, 2023
1 parent 698cbab commit 8c8b0bd
Show file tree
Hide file tree
Showing 4 changed files with 290 additions and 3 deletions.
8 changes: 7 additions & 1 deletion main.py
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,6 @@ class FilterTypeForm(FlaskForm):
],
)


app = Flask(__name__)
app.config.from_object(Config)

Expand Down Expand Up @@ -103,6 +102,13 @@ def contributors():
)


@app.route("/how-to-contribute", methods=["GET"])
def how_to_contribute():
return render_template(
"how-to-contribute.html"
)


@app.route("/filtered_resources", methods=["POST"])
def filtered_resources():
rsr = resourcer.Resource(request.form.get("category"))
Expand Down
53 changes: 52 additions & 1 deletion static/css/custom.css
Original file line number Diff line number Diff line change
Expand Up @@ -38,4 +38,55 @@ a {

p#\.contributor-name{
text-align: center;
}
}


body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.main-main {
width: 80%;
margin: 3rem auto;
padding: 3rem auto;
}

hr {
border: 0;
height: 1px;
background: #333;
background-image: linnear-gradiet(to right, #ccc, #333, #ccc);
margin-top: 12px;
margin-bottom: 16px;
}

a {
color: #e4376d;
}

.imp {
border: none;
margin: 0;
padding: 0% 0.3%;
width: auto;
overflow: visible;
font-family: "Roboto Mono", monospace;
font-weight: 500;
background-color: #e5e5e5;
border-radius: 5px;
color: inherit;
line-height: normal;
}

pre {
padding: 10px 10px 10px 25px;
}

.header-1,
.header-2 {
margin-bottom: 24px;
}

.header-2 {
margin-top: 24px;
}
3 changes: 2 additions & 1 deletion templates/base.html
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
<a href="/" class="navbar-item">
Home
</a>
<a href="/" class="navbar-item">
<a href="/how-to-contribute" class="navbar-item">
How to contribute
</a>
<a href="/contributors" class="navbar-item">
Expand Down Expand Up @@ -104,6 +104,7 @@ <h1 class="title is-2 is-center">saadhan - resource hub by <a

gtag('config', 'G-QLB0N16RL5');
</script>
<script async defer src="https://buttons.github.io/buttons.js"></script>
</body>

</html>
229 changes: 229 additions & 0 deletions templates/how-to-contribute.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,229 @@
{% extends 'base.html' %}
{% block content %}

<div class="main-main">
<div
class="header-1 is-flex is-align-items-center is-justify-content-space-between"
>
<h1 class="title is-2" style="margin-bottom: 0px">
Contribute to developersIndia resources
</h1>
<div class="">Removed the commented out code
<a
class="github-button"
href="https://github.com/developersIndia/resources/fork"
data-icon="octicon-repo-forked"
data-size="large"
data-show-count="true"
aria-label="Fork developersIndia/resources on GitHub"
>Fork</a
>
<a
class="github-button"
href="https://github.com/developersIndia/resources"
data-icon="octicon-star"
data-size="large"
data-show-count="true"
aria-label="Star developersIndia/resources on GitHub"
>Star</a
>
</div>
</div>
<hr />
<p class="subtitle is-5">
First off, thanks for taking the time to contribute! 🎉 Make sure you
follow below guidelines before contributing.
</p>
<div class="main-body">
<div class="content">
<p class="title is-3" style="margin-bottom: 0px">
What qualifies as a "resource"?
</p>
<hr />
<div class="subtitle is-5">
Anything which can be used/referenced to learn something. We only
accept following types of resources:
</div>
<ol>
<li>Book</li>
<li>Video</li>
<li>Article</li>
<li>Cheatsheet</li>
<li>Online Course (Free/Paid)</li>
<li>Github Repository</li>
<li>Audio (any podcasts)</li>
<li>
Website (Anything dedicated to learning one thing. For ex.
javascript.info qualifies as a "Website" resource for
<button class="imp">JavaScript</button> whereas
<button class="imp">colorlib.com</button> doesn't qualify as a
resource for "CSS".
</li>
</ol>
</div>
<div class="content">
<h2>How to add a new resource?</h2>
<hr />
<ol>
<li>
Figure out the correct directory for your resource, E.g. If you
are adding a "Python" resource, you will have to edit the
index.json file in languages/python directory. <br />
<blockquote>
If no appropriate directory exists for your resource, add it
inside <button class="imp">miscellaneous/index.json</button>.
</blockquote>
</li>
<li>
<p>
Go to the bottom of the json file and add a object like this.
</p>
<pre>
<code class="language-html" data-lang="html"><span>{</span>
<span> "title":"",</span>
<span> "url":"",</span>
<span> "type":"",</span>
<span> "level":"",</span>
<span> "reviews": []</span>
<span>}</span></code>
</pre>
<div class="table">
<p>
Reference the below table for description of each JSON key.
</p>
<table class="table is-bordered is-striped is-fullwidth">
<tr style="background-color: #e4376d">
<th class="left" style="color: white">Key</th>
<th style="color: white">Description</th>
</tr>
<tr>
<td class="left"><button class="imp">title</button></td>
<td>
The title of resource. If you are contributing a book
resource you can choose to mention the author
</td>
</tr>
<tr>
<td class="left"><button class="imp">url</button></td>
<td>
The permalink to the resource. No links that redirect
anywhere.
</td>
</tr>
<tr>
<td class="left"><button class="imp">type</button></td>
<td>
<span>What type of resource is this:</span><br />
<div class="skibidi">
<ol>
<li><button class="imp">book</button></li>
<li><button class="imp">video</button></li>
<li><button class="imp">article</button></li>
<li><button class="imp">cheatsheet</button></li>
<li><button class="imp">course</button></li>
<li><button class="imp">github</button></li>
<li><button class="imp">audio</button></li>
<li><button class="imp">website</button></li>
</ol>
</div>
</td>
</tr>
<tr>
<td class="left"><button class="imp">level</button></td>
<td>
<span
>What is the best audience for consuming this
resource:</span
><br />
<ol>
<li><button class="imp">beginner</button></li>
<li><button class="imp">intermediate</button></li>
<li><button class="imp">advanced</button></li>
<li><button class="imp">everyone</button></li>
</ol>
</td>
</tr>
<tr>
<td class="left"><button class="imp">reviews</button></td>
<td>
<span>Add you review of this resource.</span>
<ul>
<li>What did you learn from it?</li>
<li>What was special or interesting about it?</li>
<li>Why do you recommend this resource?</li>
</ul>
</td>
</tr>
</table>
</div>
<p>This is how a correct object looks like:</p>
<pre><code class="language-html" data-lang="html"><span>{</span>
<span> "title":"learnopengl.com",</span>
<span> "url":"https://learnopengl.com/",</span>
<span> "type":"book",</span>
<span> "level":"everyone",</span>
<span> "reviews":[</span>
<span> "You should only follow concepts here, not api"</span>
<span> ]</span>
<span>}</span></code></pre>
<blockquote>
We highly encourage contributors to add their review to provide
a community aspect for the resource. If you have nothing to say
about the resource you can omit adding the "reviews" key.
</blockquote>
</li>
<li>
<p>
Make you changes to <button class="imp">feature</button> branch
& send a PR (See if there is already an open PR with the same
contribution).
</p>
</li>
<li>
<p>
Feel free to ask doubts, just open an
<a
href="https://github.com/developersIndia/resources/issues/new/choose"
>issue</a
>.
</p>
</li>
</ol>
</div>
</div>
<div
class="header-2 is-flex is-align-items-center is-justify-content-space-between"
>
<h1 class="title is-2" style="margin-bottom: 0px">
Contribute to saadhan website
</h1>
<div class="">
<a
class="github-button"
href="https://github.com/developersIndia/saadhan/fork"
data-icon="octicon-repo-forked"
data-size="large"
data-show-count="true"
aria-label="Fork developersIndia/saadhan on GitHub"
>Fork</a
>
<a
class="github-button"
href="https://github.com/developersIndia/saadhan"
data-icon="octicon-star"
data-size="large"
data-show-count="true"
aria-label="Star developersIndia/saadhan on GitHub"
>Star</a
>
</div>
</div>
<hr />
<p>
The website is built using Flask as backend and
<a href="https://htmx.org/">HTMX</a> with
<a href="https://bulma.io">Bulma</a> as frontend.
</p>
</div>

{% endblock content %}

0 comments on commit 8c8b0bd

Please sign in to comment.