1
0
mirror of https://gitlab.com/2-chainz/2chainz.git synced 2025-06-15 17:36:39 +00:00

Import website

This commit is contained in:
Anson 2025-05-22 23:18:07 -06:00
parent 31fb9b3899
commit 2d125a3e1d
10 changed files with 879 additions and 0 deletions

13
.gitlab-ci.yml Normal file
View File

@ -0,0 +1,13 @@
# This file is a template, and might need editing before it works on your project.
# Full project: https://gitlab.com/pages/plain-html
pages:
stage: deploy
script:
- mkdir public
- cp -r cp -r website/* public/
- mv .public public
artifacts:
paths:
- public
only:
- main

1
website/.gitignore vendored Normal file
View File

@ -0,0 +1 @@
.vscode

21
website/LICENSE Normal file
View File

@ -0,0 +1,21 @@
MIT License
Copyright (c) 2020 2 Chainz Rest API
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

448
website/css/mvp.css Normal file
View File

@ -0,0 +1,448 @@
/* MVP.css v1.6.2 - https://github.com/andybrewer/mvp */
:root {
--border-radius: 5px;
--box-shadow: 2px 2px 10px;
--color: #118bee;
--color-accent: #118bee15;
--color-bg: #fff;
--color-bg-secondary: #e9e9e9;
--color-secondary: #920de9;
--color-secondary-accent: #920de90b;
--color-shadow: #f4f4f4;
--color-text: #000;
--color-text-secondary: #999;
--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
--hover-brightness: 1.2;
--justify-important: center;
--justify-normal: left;
--line-height: 1.5;
--width-card: 285px;
--width-card-medium: 460px;
--width-card-wide: 800px;
--width-content: 1080px;
}
/*
@media (prefers-color-scheme: dark) {
:root {
--color: #0097fc;
--color-accent: #0097fc4f;
--color-bg: #333;
--color-bg-secondary: #555;
--color-secondary: #e20de9;
--color-secondary-accent: #e20de94f;
--color-shadow: #bbbbbb20;
--color-text: #f7f7f7;
--color-text-secondary: #aaa;
}
}
*/
/* Layout */
article aside {
background: var(--color-secondary-accent);
border-left: 4px solid var(--color-secondary);
padding: 0.01rem 0.8rem;
}
body {
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-family);
line-height: var(--line-height);
margin: 0;
overflow-x: hidden;
padding: 1rem 0;
}
footer,
header,
main {
margin: 0 auto;
max-width: var(--width-content);
padding: 2rem 1rem;
}
hr {
background-color: var(--color-bg-secondary);
border: none;
height: 1px;
margin: 4rem 0;
}
section {
display: flex;
flex-wrap: wrap;
justify-content: var(--justify-important);
}
section aside {
border: 1px solid var(--color-bg-secondary);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow) var(--color-shadow);
margin: 1rem;
padding: 1.25rem;
width: var(--width-card);
}
section aside:hover {
box-shadow: var(--box-shadow) var(--color-bg-secondary);
}
section aside img {
max-width: 100%;
}
[hidden] {
display: none;
}
/* Headers */
article header,
div header,
main header {
padding-top: 0;
}
header {
text-align: var(--justify-important);
}
header a b,
header a em,
header a i,
header a strong {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
header nav img {
margin: 1rem 0;
}
section header {
padding-top: 0;
width: 100%;
}
/* Nav */
nav {
align-items: center;
display: flex;
font-weight: bold;
justify-content: space-between;
margin-bottom: 7rem;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline-block;
margin: 0 0.5rem;
position: relative;
text-align: left;
}
/* Nav Dropdown */
nav ul li:hover ul {
display: block;
}
nav ul li ul {
background: var(--color-bg);
border: 1px solid var(--color-bg-secondary);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow) var(--color-shadow);
display: none;
height: auto;
left: -2px;
padding: .5rem 1rem;
position: absolute;
top: 1.7rem;
white-space: nowrap;
width: auto;
}
nav ul li ul li,
nav ul li ul li a {
display: block;
}
/* Typography */
code,
samp {
background-color: var(--color-accent);
border-radius: var(--border-radius);
color: var(--color-text);
display: inline-block;
margin: 0 0.1rem;
padding: 0 0.5rem;
}
details {
margin: 1.3rem 0;
}
details summary {
font-weight: bold;
cursor: pointer;
}
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: var(--line-height);
}
mark {
padding: 0.1rem;
}
ol li,
ul li {
padding: 0.2rem 0;
}
p {
margin: 0.75rem 0;
padding: 0;
}
pre {
margin: 1rem 0;
max-width: var(--width-card-wide);
padding: 1rem 0;
}
pre code,
pre samp {
display: block;
max-width: var(--width-card-wide);
padding: 0.5rem 2rem;
white-space: pre-wrap;
}
small {
color: var(--color-text-secondary);
}
sup {
background-color: var(--color-secondary);
border-radius: var(--border-radius);
color: var(--color-bg);
font-size: xx-small;
font-weight: bold;
margin: 0.2rem;
padding: 0.2rem 0.3rem;
position: relative;
top: -2px;
}
/* Links */
a {
color: var(--color-secondary);
display: inline-block;
font-weight: bold;
text-decoration: none;
}
a:hover {
filter: brightness(var(--hover-brightness));
text-decoration: underline;
}
a b,
a em,
a i,
a strong,
button {
border-radius: var(--border-radius);
display: inline-block;
font-size: medium;
font-weight: bold;
line-height: var(--line-height);
margin: 0.5rem 0;
padding: 1rem 2rem;
}
button {
font-family: var(--font-family);
}
button:hover {
cursor: pointer;
filter: brightness(var(--hover-brightness));
}
a b,
a strong,
button {
background-color: var(--color);
border: 2px solid var(--color);
color: var(--color-bg);
}
a em,
a i {
border: 2px solid var(--color);
border-radius: var(--border-radius);
color: var(--color);
display: inline-block;
padding: 1rem 2rem;
}
/* Images */
figure {
margin: 0;
padding: 0;
}
figure img {
max-width: 100%;
}
figure figcaption {
color: var(--color-text-secondary);
}
/* Forms */
button:disabled,
input:disabled {
background: var(--color-bg-secondary);
border-color: var(--color-bg-secondary);
color: var(--color-text-secondary);
cursor: not-allowed;
}
button[disabled]:hover {
filter: none;
}
form {
border: 1px solid var(--color-bg-secondary);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow) var(--color-shadow);
display: block;
max-width: var(--width-card-wide);
min-width: var(--width-card);
padding: 1.5rem;
text-align: var(--justify-normal);
}
form header {
margin: 1.5rem 0;
padding: 1.5rem 0;
}
input,
label,
select,
textarea {
display: block;
font-size: inherit;
max-width: var(--width-card-wide);
}
input[type="checkbox"],
input[type="radio"] {
display: inline-block;
}
input[type="checkbox"]+label,
input[type="radio"]+label {
display: inline-block;
font-weight: normal;
position: relative;
top: 1px;
}
input,
select,
textarea {
border: 1px solid var(--color-bg-secondary);
border-radius: var(--border-radius);
margin-bottom: 1rem;
padding: 0.4rem 0.8rem;
}
input[readonly],
textarea[readonly] {
background-color: var(--color-bg-secondary);
}
label {
font-weight: bold;
margin-bottom: 0.2rem;
}
/* Tables */
table {
border: 1px solid var(--color-bg-secondary);
border-radius: var(--border-radius);
border-spacing: 0;
display: inline-block;
max-width: 100%;
overflow-x: auto;
padding: 0;
white-space: nowrap;
}
table td,
table th,
table tr {
padding: 0.4rem 0.8rem;
text-align: var(--justify-important);
}
table thead {
background-color: var(--color);
border-collapse: collapse;
border-radius: var(--border-radius);
color: var(--color-bg);
margin: 0;
padding: 0;
}
table thead th:first-child {
border-top-left-radius: var(--border-radius);
}
table thead th:last-child {
border-top-right-radius: var(--border-radius);
}
table thead th:first-child,
table tr td:first-child {
text-align: var(--justify-normal);
}
table tr:nth-child(even) {
background-color: var(--color-accent);
}
/* Quotes */
blockquote {
display: block;
font-size: x-large;
line-height: var(--line-height);
margin: 1rem auto;
max-width: var(--width-card-medium);
padding: 1.5rem 1rem;
text-align: var(--justify-important);
}
blockquote footer {
color: var(--color-text-secondary);
display: block;
font-size: small;
line-height: var(--line-height);
padding: 1.5rem 0;
}

BIN
website/favicon-16x16.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 919 B

BIN
website/favicon-32x32.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
website/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.3 KiB

300
website/index.html Normal file
View File

@ -0,0 +1,300 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<link rel="stylesheet" href="css/mvp.css" />
<meta charset="utf-8" />
<meta name="description" content="A REST API for 2 Chainz Quotes." />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta property="og:title" content="2 Chainz Rest API" />
<meta property="og:url" content="https://2chainz.ansonbiggs.com" />
<meta
property="og:description"
content="A free REST API for 2 Chainz quotes"
/>
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:creator" content="@Anson_3D" />
<meta name="twitter:url" content="https://2chainz.ansonbiggs.com" />
<meta name="twitter:title" content="2chainz.ansonbiggs.com" />
<meta
name="twitter:description"
content="A free REST API for 2 Chainz quotes"
/>
<style>
* {
transition: all 0.2s ease-out; /* Thanks https://news.ycombinator.com/item?id=19594993 */
}
body {
background-color: #d9c06e;
color: #03252a;
}
hr {
background-color: #03252a;
}
section aside {
border: 1px solid black;
box-shadow: none;
}
nav {
margin-bottom: 2rem;
}
:root {
--color: darkviolet;
--color-bg-secondary: black;
}
@media screen and (max-width: 400px) {
#scroll-icon {
display: none;
}
}
</style>
<title>2chainz.ansonbiggs.com</title>
</head>
<body>
<header style="height: 70vh;">
<nav>
<ul>
<li>
<a href="https://2chainz.ansonbiggs.com">2chainz.ansonbiggs.com</a> - A REST API for 2
Chainz Quotes
</li>
</ul>
</nav>
<section>
<blockquote>
<span id="quote"></span>
<footer><i id="alias">- 2 Chainz</i></footer>
</blockquote>
</section>
<p>
<a onclick="getQuote()" href="#"
><b>
<ion-icon size="large" name="refresh-circle"></ion-icon><br />
New Quote</b
></a
>
<a id="tweet" href="#"
><b
><ion-icon size="large" name="logo-twitter"></ion-icon> <br />
Tweet Quote
</b></a
>
</p>
<a href="#scroll" id="scroll-icon" style="padding-top: 10vh;"
><ion-icon size="large" name="arrow-down-sharp"></ion-icon
></a>
</header>
<main>
<hr style="padding-top: 0;" />
<header id="scroll">
<h2>Usage</h2>
</header>
<details open>
<summary>Quote</summary>
<p>
Returns a random 2 Chainz Quote in <code>json</code> format like the
following example:
</p>
<p>
send a <code>get</code> request to
<code
><a href="https://chainz-rest.azurewebsites.net/quote"
>https://chainz-rest.azurewebsites.net/quote</a
></code
>
</p>
<pre><code>{
"quote": "I got a pocket full of money, it got me walking all slew-foot"
}</code></pre>
<details style="margin-left: 5%;">
<summary>Parameters</summary>
<p>
This endpoint also supports an optional <code>batch</code> parameter
to get more than one quote per request. Maximum quotes that the
endpoint will return is the amount of quotes in
<a
href="https://gitlab.com/2-chainz/2-chainz-rest/-/blob/master/quote/quotes.py"
>quotes.py</a
>
and is subject to change. An example return from
<code>
<a href="https://chainz-rest.azurewebsites.net/quote?batch=2"
>https://chainz-rest.azurewebsites.net/quote?batch=2</a
></code
>
</p>
<pre><code class="json">{
"quotes": [
"I'm in the kitchen. Yams errrrrwhere.",
"Started from the trap, now I rap"
]
}</code></pre>
</details>
</details>
<details
><summary>Alias</summary>
<p>
Returns a random 2 Chainz alias in <code>json</code> format. The
return values are weighted and a full list can be seen in
<a
href="https://gitlab.com/2-chainz/2-chainz-rest/-/blob/master/alias/aliases.py"
>aliases.py</a
>.
</p>
<p>
send a <code>get</code> request to
<code
><a href="https://chainz-rest.azurewebsites.net/alias"
>https://chainz-rest.azurewebsites.net/alias</a
></code
>
</p>
<pre><code>{
"alias": "Dos Cadenas"
}</code></pre>
</details>
<hr />
<section>
<header>
<h2>
Projects built using 2chainz.ansonbiggs.com (Your project could be here!)
</h2>
</header>
<aside>
<h3>
<a href="https://t.me/twoChainzBot">Telegram Bot</a>
</h3>
<p>
An inline Telegram bot that sends a random 2 Chainz Quote. Hosted on
a
<a href="https://m.do.co/c/6b5df7ef55b6">DigitalOcean</a> Kubernetes
Cluster.
</p>
<small
><a href="https://gitlab.com/2-chainz/2-chainz-telegram"
>Source Code</a
>
</small>
</aside>
<aside>
<h3>
<a href="https://twitter.com/bot_chainz">Twitter Bot</a>
</h3>
<p>
A Twitter bot that posts weekly 2 Chainz Quotes. Built with Azure
Serverless Functions and Python.
</p>
<small
><a href="https://gitlab.com/2-chainz/2-chainz-twitter-bot"
>Source Code</a
>
</small>
</aside>
</section>
<hr />
<section>
<header>
<h2>Frequently Asked Questions</h2>
</header>
<aside>
<h3>Can I use this?</h3>
<p>
Please do! This project uses a
<a href="https://tldrlegal.com/license/mit-license#summary"
>MIT License</a
>
which means your welcome to do whatever you want.
</p>
<p>
<small
><a href="https://twitter.com/Anson_3D"
>Please let me know if you use it though!</a
></small
>
</p>
</aside>
<aside>
<h3>Do I need an API key or is this API rate limited?</h3>
<p>
No, the API is totally free and unlimited. However, its being hosted
by a college student so be nice.
</p>
</aside>
<aside>
<h3>Is this project open source? Can I contribute?</h3>
<p>
Yes and Yes! Check out the
<a href="https://gitlab.com/2-chainz">Project on GitLab.</a>
</p>
</aside>
<aside>
<h3>Does 2 Chainz know about this?</h3>
<p>
Probably not.
</p>
</aside>
<aside>
<h3>Why?</h3>
<p>
Because 2 Chainz has some of the best lines in the rap game.
</p>
</aside>
</section>
</main>
<footer>
<hr />
<p>
Made by <a href="https://gitlab.com/MisterBiggs">Anson Biggs</a>,
<a href="https://twitter.com/Anson_3D">@Anson_3D </a>
</p>
<p>
Inspired By <a href="https://kanye.rest/">kanye.rest</a> which was
created by:
<a href="https://ajzbc.com" target="_blank">Andrew Jazbec</a>,
<a href="https://twitter.com/ajzbc" target="_blank">@ajzbc</a>
</p>
<p><small>Truuuuuuuu</small></p>
</footer>
<script>
getQuote();
function getQuote() {
fetch("https://chainz-rest.azurewebsites.net/quote", { method: "GET" })
.then((resp) => resp.json())
.then(function (data) {
document.getElementById("quote").innerHTML = data.quote;
const tweet = encodeURIComponent(
`"${data.quote}" -@2chainz via https://2chainz.ansonbiggs.com`
);
document.getElementById(
"tweet"
).href = `https://twitter.com/intent/tweet?text=${tweet}`;
});
fetch("https://chainz-rest.azurewebsites.net/alias", { method: "GET" })
.then((resp) => resp.json())
.then(function (data) {
document.getElementById("alias").innerHTML = "- " + data.alias;
});
}
</script>
<script src="https://unpkg.com/ionicons@5.0.0/dist/ionicons.js"></script>
</body>
</html>

16
website/js/index.js Normal file
View File

@ -0,0 +1,16 @@
getQuote();
function getQuote() {
fetch("https://api.chainz.rest/quote", { method: "GET" })
.then(resp => resp.json())
.then(function(data) {
document.getElementById("quote").innerHTML = data.quote;
const tweet = encodeURIComponent(
`"${data.quote}" -@2chainz via https://2.chainz.rest`
);
document.getElementById(
"tweet"
).href = `https://twitter.com/intent/tweet?text=${tweet}`;
});
}

80
website/plain.html Normal file
View File

@ -0,0 +1,80 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<link rel="stylesheet" href="css/mvp.css" />
<meta charset="utf-8" />
<meta name="description" content="A REST API for 2 Chainz Quotes." />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta property="og:title" content="2 Chainz Rest API" />
<meta property="og:url" content="https://2.chainz.rest" />
<meta
property="og:description"
content="A free REST API for 2 Chainz quotes"
/>
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:creator" content="@Anson_3D" />
<meta name="twitter:url" content="https://2.chainz.rest" />
<meta name="twitter:title" content="2.chainz.rest" />
<meta
name="twitter:description"
content="A free REST API for 2 Chainz quotes"
/>
<meta
name="twitter:image"
content="https://api.chainz.rest/static/apple-icon.png"
/>
<style>
body {
background-color: #d9c06e;
color: #03252a;
}
:root {
--color: darkviolet;
--color-bg-secondary: black;
}
.center {
padding-top: 30vh;
}
@media screen and (max-width: 400px) {
#scroll-icon {
display: none;
}
}
</style>
<title>2.chainz.rest</title>
</head>
<body>
<blockquote class="center">
<span id="quote">Make an Asian want hibachi</span>
<footer><i id="alias">- 2 Chainz</i></footer>
</blockquote>
<script>
getQuote();
// Get new quote every 15 minutes
setInterval(getQuote, 900000);
function getQuote() {
fetch("https://chainz-rest.azurewebsites.net/quote", { method: "GET" })
.then((resp) => resp.json())
.then(function (data) {
document.getElementById("quote").innerHTML = data.quote;
});
fetch("https://chainz-rest.azurewebsites.net/alias", { method: "GET" })
.then((resp) => resp.json())
.then(function (data) {
document.getElementById("alias").innerHTML = "- " + data.alias;
});
}
</script>
<script src="https://unpkg.com/ionicons@5.0.0/dist/ionicons.js"></script>
</body>
</html>