Updating responsive branch to be up to date with main

CONTRIBUTING.md

@@ -1,15 +1,84 @@
 <!-- CONTRIBUTING -->
 
-## Contributing
+# Contributing
 
-Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
+Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**. 
 
-If you have a suggestion to better our API, please fork the repo and create a pull request. Additionally, you can open an issue and offer advice.
-Don't forget to give the project a star! Thanks again!
+<ins>Please make sure to follow our guidelines below before making any contributions.</ins>
 
-1. Visit our Issues page to check if an issue exists and does not have an assignee.
+
+
+## Understanding Coding-Resources-API branch structure
+### Permanent Branches
+#### Main
+- This branch is reserved for tested versions of our code-base. Do not make a PR directly into this branch, as we require testing before we can confirm any feature.
+
+
+
+#### Test
+- This branch is used to test a collection of newly added features, which will eventually become a future iteration of our application after thoroughly testing for bugs and code/guideline consistency. If you are interested in creating your own feature, we suggest that you first open an issue here: https://github.com/the-api-administration/coding-resources-api/issues and wait for our team to respond to your message and approve the implementation. If you are interested in taking responsibility for the implementation, please assign yourself to the issue once you submit it, so that our team can note your interest.
+
+
+
+#### Resources
+- This branch is reserved for adding new resources to our resources.js file. When adding a resource, follow these styling guidelines or we will be unable to address your contribution. 
+
+  Resource Addition Guidelines:
+
+  - The resource <ins>must</ins> strictly pertain to coding. Please do not include resources that represent non-coding-related content.
+  - The resources provided <ins>must</ins> strictly pertain to specific coding related topics, technologies, and content. We will not accept resources that are too broad and/or do not provide a specific focus.
+
+  Resource Styling:
+
+  - Object values <ins>must</ins> contain single quotes only.
+  - Keywords array should contain strings only.
+  - Keywords are preferred in lower case.
+  - Keywords <ins>must</ins> be specific. Do not include broad keywords such as 'guide', 'tutorial', 'information' or we will be unable to process your PR. Please opt for keywords that are specific to the content.
+
+  Resource Format:
+
+  ```
+  {
+    name: 'resource name',
+    url: 'url here',
+    keywords: ['each', 'keyword', 'should', 'be', 'a', 'string']
+  },
+  ```
+
+
+
+## How often should I stage changes?
+
+We require that you stage your changes for each section of code you develop. <ins>Do not</ins> stage changes with a single large commit, or we will instantly close your pull request. We would like you to make commits for every task you complete in your code and avoid working through multiple files when possible. Your commit message should include a detailed view of the work you are implementing and an issue you are solving if you have assigned yourself to an issue.
+
+
+
+## Where should I make my pull request to?
+
+<ins>Never make a pull request into our main branch</ins>. If you plan on adding a feature, wait until you have completely finished that feature and then make a pull request into "test" with a clear description of the issue you are solving. If you are planning on adding a resource, please make a pull request to the resources branch.
+
+
+
+## Creating an Issue
+
+We'd love to hear your advice, feature suggestions and/or read about any bugs you've encountered. Please create an issue here: https://github.com/the-api-administration/coding-resources-api/issues. If you wish to implement a feature on your own, please add yourself as an assignee to the issue you create, so that we can note your interest. When creating an issue, please attempt to outline in detail the topic of the issue, and a thorough description of what the issue attempts to solve. 
+
+If you have encountered a bug, please provide as much information as you can to help us replicate the issue on our own end. Depending on the issue, it may be useful to communicate your browser, screen width, and/or anything that relates to your specific encounter.
+
+
+
+## How to make a PR
+
+If you want to help us improve our API, please fork the repo and follow these steps before creating a pull request.
+
+1. Visit [our Issues](https://github.com/the-api-administration/coding-resources-api/issues) page to check if an issue exists and does not yet have an assignee. Assign yourself to the issue if you find what you are planning to solve.
 2. Fork the Project
-3. Change to your Feature Branch (`git checkout -b feature/AmazingFeature`)
-4. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
-5. Push to the Branch (`git push origin feature/AmazingFeature`)
-6. Open a Pull Request
+3. Clone your fork on your local device. The link can be found under the code drop-down at the base of your fork (`git clone <link here>`)
+4. If you are adding a resource, please skip to step 6.
+5. Create a new branch for your Feature (`git branch AmazingFeature`)
+6. Switch to the branch you are working on (`git checkout AmazingFeature`)
+7. Make your changes, commit after every isolated task.
+8. Add all of your changes (`git add .`)
+9. Commit your changes with a detailed description (`git commit -m 'added a, solved b, etc...'`)
+10. Push to the Branch (`git push origin AmazingFeature`)
+11. Open a Pull Request and follow the rules under "Where should I make my pull request to?"

README.md

@@ -5,6 +5,7 @@
 [![Contributors][contributors-shield]][contributors-url]
 [![Forks][forks-shield]][forks-url]
 [![Stargazers][stars-shield]][stars-url]
+[![Pull Requests][pullrequests-shield]][pullrequests-url]
 [![Issues][issues-shield]][issues-url]
 [![MIT License][license-shield]][license-url]
 
@@ -103,15 +104,7 @@ See the [open issues](https://github.com/the-api-administration/coding-resources
 
 Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
 
-If you have a suggestion to better our API, please fork the repo and create a pull request. Additionally, you can open an issue and offer advice.
-Don't forget to give the project a star! Thanks again!
-
-1. Visit our Issues page to check if an issue exists and does not have an assignee.
-2. Fork the Project
-3. Change to your Feature Branch (`git checkout -b feature/AmazingFeature`)
-4. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
-5. Push to the Branch (`git push origin feature/AmazingFeature`)
-6. Open a Pull Request
+Please visit <a href="https://github.com/the-api-administration/coding-resources-api/blob/main/CONTRIBUTING.md">`CONTRIBUTING.md`</a> to read about our guidelines before making a contribution to our project. Thank you!
 
 <p align="right">(<a href="#top">back to top</a>)</p>
 
@@ -148,6 +141,8 @@ Distributed under the MIT License. See <a href="https://github.com/the-api-admin
 [forks-url]: https://github.com/the-api-administration/coding-resources-api/network/members
 [stars-shield]: https://img.shields.io/github/stars/the-api-administration/coding-resources-api.svg?style=for-the-badge
 [stars-url]: https://github.com/the-api-administration/coding-resources-api/stargazers
+[pullrequests-shield]: https://img.shields.io/github/issues-pr/the-api-administration/coding-resources-api?color=red&label=Pull%20Requests&style=for-the-badge
+[pullrequests-url]: https://github.com/the-api-administration/coding-resources-api/pulls
 [issues-shield]: https://img.shields.io/github/issues/the-api-administration/coding-resources-api.svg?style=for-the-badge
 [issues-url]: https://github.com/the-api-administration/coding-resources-api/issues
 [license-shield]: https://img.shields.io/github/license/the-api-administration/coding-resources-api.svg?style=for-the-badge

public/css/style.css

@@ -191,7 +191,7 @@ main {
 	font-weight: 600;
 }
 
-.api-test form input:hover {
+.api-test form input:focus {
 	width: 70%;
 }
 
@@ -257,15 +257,39 @@ main {
 	background-color: #dbdbdb;
 }
 
-.json {
-	display: block;
-	white-space: pre-wrap;
+.text-truncate {
+	display: inline-block;
+	max-width: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.json,
+code {
+	white-space: pre-line;
+}
+
+.indent h4,
+.indent h5,
+.indent h6 {
+	padding: 0;
 }
 
 .indent {
 	padding-left: 2rem;
-	margin-top: -2rem;
-	line-height: 2;
+}
+
+.indent * {
+	line-height: 1.5; /* If this value is changed, make sure it is atleast 1 to avoid clipping when text wraps */
+	font-size: 1em;
+	margin: 0;
+	text-align: left;
+	font-weight: 400;
+}
+
+.indent a {
+	font-weight: 700;
 }
 
 /* documentation */

public/js/main.js

@@ -35,7 +35,7 @@ async function getMatches() {
 		const res = await fetch('/api');
 		const data = await res.json();
 		// Filters array from the API for resources with keywords containing user value
-		const matches = data.filter(resource => resource.keywords.some(str => str.includes(keyword)));
+		const matches = data.filter(resource => resource.keywords.some(str => str.toLowerCase().includes(keyword)));
 		renderMatches(matches);
 	} catch (err) {
 		console.error(err);
@@ -63,7 +63,17 @@ function renderMatches(matches) {
 
 			// Create an element that looks like a JSON object for every match
 			li.innerHTML = `
-				<pre class="json"><code>{<div class="indent"><br>name: '${match.name}',<br>url: <a href="${match.url}" target="_blank">'${match.url}',</a><br class="middle-br">keywords: [${match.keywords.map(keyword => `'${keyword}'`).join(", ")}]<br></div>},</code></pre>
+				<pre class="json">
+					<code>
+						{
+							<div class="indent">
+								<h4>name: ${match.name},</h4>
+								<h5>url: '<a href=${match.url} target="_blank">${match.url}</a>',</h5>
+								<h6 class="text-truncate">keywords: [${match.keywords.map(keyword => `'${keyword}'`).join(", ")}]</h6>
+							</div>
+						},
+					</code>
+				</pre>
 			`;
 
 			list.appendChild(li);

resources.js

@@ -285,6 +285,16 @@ const resources = [
 		url: 'https://htmlcheatsheet.com/seo/',
 		keywords: ['SEO', 'cheat sheet']
 	},
+	{
+		name: 'SEO Guide to Lighthouse Performance Metrics',
+		url: 'https://www.searchenginejournal.com/core-web-vitals/technical-seo-lighthouse/',
+		keywords: ['SEO', 'lighthouse', 'performance', 'metrics']
+	},
+	{
+		name: 'Centering in CSS',
+		url: 'https://ishadeed.com/article/learn-css-centering/#:~:text=To%20center%20an%20inline%20element,is%20text%2Dalign%3A%20center%20.&text=For%20multiple%20inline%20elements%2C%20the,using%20text%2Dalign%3A%20center%20',
+		keywords: ['CSS', 'center', 'align']
+	},
 	// 	Resource Format - please follow the styling below.
 	// 	{
 	// 		name: '',

server.js

@@ -10,14 +10,13 @@ app.use(express.static(__dirname + '/public'));
 app.use('/public', express.static(__dirname + '/public'));
 
 app.get('/', (req, res) => {
-	try {
-		if (resources) {
-			res.render('index.ejs', { resources });
-		} else {
-			throw new Error('Resources not found.')
-		}
-	} catch (err) {
-		console.error(err);
+	if (resources) {
+		res.render('index.ejs', { resources });
+	} else {
+		// respond with status 500 if the resources array could not be loaded from resources.js
+		res.status(500).json({
+			error: 'Resources were not able to be loaded from resources.js.'
+		});
 	}
 });
 
@@ -29,7 +28,7 @@ app.get('/api/:keyword', (req, res) => {
 	const keyword = req.params.keyword.toLowerCase();
 
 	// filter resources array, return items that match query; tag.
-	const matches = resources.filter((obj) => obj.keywords.some(str => str.includes(keyword)));
+	const matches = resources.filter((obj) => obj.keywords.some(str => str.toLowerCase().includes(keyword)));
 
 	// if matches were found, respond with matches array in JSON format
 	if (matches.length) {

views/index.ejs

@@ -60,7 +60,17 @@
 									<li>
 										<!-- JSON Format for DOM rendering -->
 										<!-- Add indentation, line break and quotes around each key's value -->
-										<pre class="json"><code>{<div class="indent"><br>name: '<%= resources[i].name %>',<br>url: <a href=<%= resources[i].url %> target="_blank">'<%= resources[i].url %>',</a><br class="middle-br">keywords: [<%= resources[i].keywords.map(keyword => `'${keyword}'`).join(", ") %>]<br></div>},</code></pre>
+										<pre class="json">
+											<code>
+												{
+													<div class="indent">
+														<h4>name: '<%= resources[i].name %>',</h4>
+														<h5>url: '<a href=<%= resources[i].url %> target="_blank"><%= resources[i].url %></a>',</h5>
+														<h6 class="text-truncate">keywords: [<%= resources[i].keywords.map(keyword => `'${keyword}'`).join(", ") %>]</h6>
+													</div>
+												},
+											</code>
+										</pre>
 									</li>
 								<% } %>
 							</ul>