Skip to content

API Documentation Updates and Style Enhancements 🚀 #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

API Documentation Updates and Style Enhancements 🚀 #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f9a2f1f
Merge pull request #17 from wecoded-dev/main
madhurimarawat May 7, 2025
6ce1c0b
Add all api docs
madhurimarawat May 7, 2025
ac27d76
Add updated docs with all apis
madhurimarawat May 7, 2025
9d011ac
Add contact and api-docs preview image
madhurimarawat May 7, 2025
66fa679
Add css with updated documentation
madhurimarawat May 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
173 changes: 173 additions & 0 deletions api/docs/jokes/Jokes-API-Docs.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,173 @@
<!DOCTYPE html>
<!--
Jokes API Documentation
Author: Madhurima Rawat
Description: This page provides developers with an overview and practical examples
of how to use the Jokes JSON API to access humorous jokes and their authors.
Date: 2025
Usage: Educational and reference use for frontend integration.
Notes:
- Converted to PDF using wkhtmltopdf.
- Since gradients aren't supported in PDF output, a solid background color is used.
- Background color: Coral (#FF7F50)
-->

<html lang="en">

<head>
<meta charset="UTF-8">
<title>Jokes API Documentation</title>
<style>
body {
margin: 0;
padding: 10px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #d88263;
color: #333;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}

.container {
max-width: 1100px;
background-color: #aaf7ff;
padding: 20px;
margin: 10px;
border-radius: 12px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

h1,
h2 {
text-align: center;
color: #5a5a3b;
}

h2 {
margin-top: 25px;
}

pre,
code {
padding: 10px;
border-radius: 6px;
overflow-wrap: break-word;
display: block;
background-color: whitesmoke;
color: #000;
font-weight: bold;
font-family: monospace;
}

ul {
list-style: disc;
padding-left: 20px;
}

a {
color: #336699;
}

.section {
margin-top: 16px;
}

.docstring {
font-size: 0.95em;
color: #555;
text-align: center;
margin-bottom: 16px;
}

.docstring span {
font-style: italic;
}
</style>
</head>

<body>
<div class="container">
<div class="docstring">API Documentation by <span>Madhurima Rawat</span></div>

<h1>Jokes API Documentation</h1>

<div class="section">
<h2>Overview</h2>
<p>The Jokes API provides a collection of humorous jokes in JSON format, perfect for displaying random jokes
in web apps, widgets, or fun content sections.</p>
</div>

<div class="section">
<h2>API Files</h2>
<ul>
<li><strong>Jokes:</strong> <code>jokes.json</code> – Contains an array of objects with joke text and
author name.</li>
<li><strong>Extended Jokes:</strong> <code>jokes++.json</code> – Structured similarly, but with
potential for additional metadata in the future (e.g., categories, ratings).</li>
</ul>
</div>

<div class="section">
<h2>File Structure</h2>
<p><strong>jokes.json</strong> contains:</p>
<ul>
<li><code>author</code>: Name of the person who told the joke.</li>
<li><code>part1</code>: The setup of the joke.</li>
<li><code>part2</code>: The punchline of the joke.</li>
<li><code>score</code>: The score/rating of the joke.</li>
<li><code>mature</code>: Boolean indicating whether the joke is suitable for mature audiences.</li>
<li><code>link</code>: The URL link to the joke's Reddit post.</li>
</ul>
</div>

<div class="section">
<h2>Using the API</h2>
<p>Use JavaScript's <code>fetch()</code> method to retrieve jokes:</p>
<pre><code>fetch('path/to/jokes.json')
.then(response => response.json())
.then(data => {
console.log(data); // Logs array of joke objects
});</code></pre>
</div>

<div class="section">
<h2>Displaying Jokes (Example)</h2>
<p>HTML container:</p>
<pre><code>&lt;div id="joke-box"&gt;&lt;/div&gt;</code></pre>

<p>JavaScript to populate a random joke:</p>
<pre><code>document.addEventListener('DOMContentLoaded', () => {
const jokeBox = document.getElementById('joke-box');

fetch('path/to/jokes.json')
.then(res => res.json())
.then(data => {
const random = data[Math.floor(Math.random() * data.length)];
jokeBox.innerHTML = `
&lt;blockquote&gt;"${random.part1} ${random.part2}"&lt;/blockquote&gt;
&lt;footer&gt;— ${random.author}&lt;/footer&gt;
`;
});
});</code></pre>
</div>

<div class="section">
<h2>Best Practices</h2>
<ul>
<li>Randomize joke display to keep content fresh and fun.</li>
<li>Preload jokes for performance-sensitive applications.</li>
<li>Ensure jokes are appropriately categorized for different audience types.</li>
</ul>
</div>

<div class="section">
<h2>Conclusion</h2>
<p>The Jokes API is a simple and fun tool to integrate humor into digital experiences, ideal for social
media widgets, entertainment apps, or websites focused on lighthearted content.</p>
</div>
</div>
</body>

</html>
Binary file added api/docs/jokes/Jokes-API-Docs.pdf
View file
Open in desktop
Binary file not shown.
174 changes: 174 additions & 0 deletions api/docs/quotes/Quotes-API-Docs.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,174 @@
<!DOCTYPE html>
<!--
Quotes API Documentation
Author: Madhurima Rawat
Description: This page provides developers with an overview and practical examples
of how to use the Quotes JSON API to access inspirational quotes and their authors.
Date: 2025
Usage: Educational and reference use for frontend integration.
Notes:
- Converted to PDF using wkhtmltopdf.
- Since gradients aren't supported in PDF output, a solid background color is used.
- Background color: Lemon Chiffon (#FFFACD)
-->

<html lang="en">

<head>
<meta charset="UTF-8">
<title>Quotes API Documentation</title>
<style>
body {
margin: 0;
padding: 10px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #FFFACD;
color: #333;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}

.container {
max-width: 1100px;
background-color: #aaf7ff;
padding: 20px;
margin: 10px;
border-radius: 12px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

h1,
h2 {
text-align: center;
color: #5a5a3b;
}

h2 {
margin-top: 25px;
}

pre,
code {
padding: 10px;
border-radius: 6px;
overflow-wrap: break-word;
display: block;
background-color: whitesmoke;
color: #000;
font-weight: bold;
font-family: monospace;
}

ul {
list-style: disc;
padding-left: 20px;
}

a {
color: #336699;
}

.section {
margin-top: 16px;
}

.docstring {
font-size: 0.95em;
color: #555;
text-align: center;
margin-bottom: 16px;
}

.docstring span {
font-style: italic;
}
</style>
</head>

<body>
<div class="container">
<div class="docstring">API Documentation by <span>Madhurima Rawat</span></div>

<h1>Quotes API Documentation</h1>

<div class="section">
<h2>Overview</h2>
<p>The Quotes API provides a simple collection of inspirational quotes in JSON format, perfect for
displaying random quotes in web apps, widgets, or daily thought sections.</p>
</div>

<div class="section">
<h2>API Files</h2>
<ul>
<li><strong>Basic Quotes:</strong> <code>quotes.json</code> – Contains an array of objects with quote
text and author name.</li>
<li><strong>Extended Quotes:</strong> <code>quotes++.json</code> – Structured similarly, but with
potential for additional metadata in the future (e.g., tags, categories).</li>
</ul>
</div>

<div class="section">
<h2>File Structure</h2>
<p><strong>quotes.json</strong> contains:</p>
<ul>
<li><code>author</code>: Name of the person who said the quote.</li>
<li><code>text</code>: The actual quote string.</li>
</ul>
<p><strong>quotes++.json</strong> currently mirrors <code>quotes.json</code> but may expand to include:</p>
<ul>
<li><code>tags</code>: Categories like motivation, leadership, etc. (optional)</li>
<li><code>source</code>: Book, speech, or article the quote came from (optional)</li>
</ul>
</div>

<div class="section">
<h2>Using the API</h2>
<p>Use JavaScript's <code>fetch()</code> method to retrieve quotes:</p>
<pre><code>fetch('path/to/quotes.json')
.then(response => response.json())
.then(data => {
console.log(data); // Logs array of quote objects
});</code></pre>
</div>

<div class="section">
<h2>Displaying Quotes (Example)</h2>
<p>HTML container:</p>
<pre><code>&lt;div id="quote-box"&gt;&lt;/div&gt;</code></pre>

<p>JavaScript to populate a random quote:</p>
<pre><code>document.addEventListener('DOMContentLoaded', () => {
const quoteBox = document.getElementById('quote-box');

fetch('path/to/quotes.json')
.then(res => res.json())
.then(data => {
const random = data[Math.floor(Math.random() * data.length)];
quoteBox.innerHTML = `
&lt;blockquote&gt;"${random.text}"&lt;/blockquote&gt;
&lt;footer&gt;— ${random.author}&lt;/footer&gt;
`;
});
});</code></pre>
</div>

<div class="section">
<h2>Best Practices</h2>
<ul>
<li>Randomize quote display to keep content fresh.</li>
<li>Preload quotes for performance-sensitive applications.</li>
<li>Fallback gracefully if no quotes are available.</li>
</ul>
</div>

<div class="section">
<h2>Conclusion</h2>
<p>The Quotes API is an elegant, minimal tool for integrating motivational content into digital experiences.
It’s ideal for educational, lifestyle, and productivity-focused interfaces.</p>
</div>
</div>
</body>

</html>
Binary file added api/docs/quotes/Quotes-API-Docs.pdf
View file
Open in desktop
Binary file not shown.
Loading