Added replit security tutorial

.vscode/settings.json

@@ -20,6 +20,11 @@
         "static/css/home.css",
         "static/css/navbar.css",
         "static/css/input.css",
-        "static/css/footer.css"
+        "static/css/footer.css",
+        "web/static/css/base.css",
+        "web/static/css/footer.css",
+        "web/static/css/home.css",
+        "web/static/css/input.css",
+        "web/static/css/navbar.css"
     ]
 }

web/app.py

@@ -33,14 +33,18 @@ def create_app() -> flask.Flask:
     def alt_design():
         return flask.render_template('alt-design.html')
 
-    @app.route('/panel')
-    def panel():
+    @app.route('/go')
+    def go():
         return flask.render_template('panel.html')
 
     @app.route('/novacord')
-    def novacord():
+    def novacord_page():
         return flask.render_template('novacord.html')
 
+    @app.route('/replit')
+    def replit_page():
+        return flask.render_template('replit.html')
+
     @app.route('/favicon.ico')
     def favicon():
         return flask.send_file('static/img/fav.ico', mimetype='image/vnd.microsoft.icon')

web/templates/panel.html

@@ -3,21 +3,16 @@
 
 <main>
     <h1>API Panel</h1>
-    <h2>
-        <mark>Warning</mark>
-        this is a <u>very early prototype</u> of NovaAI. Do not use it in production.
-        You have been warned.
-    </h2>
 
     <h2>Python</h2>
     <h3>Endpoint</h3>
     <p>
         To use <i>NovaAI</i> in your code, simply set the endpoint of <i>NovaAI</i>.
-        It's compitable with <i><s>Closed</s>AI</i>'s library.
+        It's compitable with the official <i>OpenAI</i> Python library.
     </p>
     
     <pre><code class="language-python">import openai as novaai
-        
+
 novaai.api_base = 'https://api.nova-oss.com/v1'</code></pre>
 
     <blockquote>
@@ -45,7 +40,7 @@ novaai.api_base = 'https://api.nova-oss.com/v1'</code></pre>
 
     <h2>Unofficial front-ends (Better ChatGPT, ...)</h2>
     <p>
-        Keep in mind not to violate <s>Closed</s>AI's terms of service, or it'll break their hearts :(
+        Keep in mind not to violate <s>OpenAI</s>AI's terms of service, or it'll break their hearts :(
         (and maybe write you a C&D).
         <br><br>
         Anyways, set the API endpoint to <code>https://api.nova-oss.com/v1</code> and don't forget to add your NovaAI API key, too.
@@ -58,7 +53,7 @@ novaai.api_base = 'https://api.nova-oss.com/v1'</code></pre>
 
 
     <h2>Documentation</h2>
-    <p><a href="https://platform.openai.com/docs/api-reference" target="_blank">Official <s>Closed</s>AI documentation</a></p>
+    <p><a href="https://platform.openai.com/docs/api-reference" target="_blank">Official OpenAI documentation</a></p>
 
 </main>
 

web/templates/replit.html

@@ -0,0 +1,71 @@
+{% include 'parts/begin.html' %}
+<link rel="stylesheet" href="/static/css/home.css">
+
+<main>
+    <h1>Prevent your API keys and Discord bot tokens from being stolen when using replit</h1>
+    <p>
+        Everyone can see your code created using <a href="https://replit.com">replit</a>.<br>
+        It's really important that you don't set your API keys and other secret credentials directly in your code.
+        This isn't just for NovaAI, but for all your projects.
+    </p>
+    <h2>How to add new secrets</h2>
+    <p>
+        It's really simple:
+        <ol>
+            <li>
+                Click the <mark><i class="bi bi-lock"></i></mark> lock icon in the left sidebar
+            </li>
+            <li>
+                Set <code>key</code> to something like <code>NOVA_API_KEY</code> or <code>DISCORD_BOT_TOKEN</code> (don't use spaces etc.)
+                and the field <code>value</code> to your API key/token that you want to hide.
+            </li>
+            <li>
+                Click <mark>Add new secret</mark>
+            </li>
+            <li>
+                Now, you'll need to change the code a bit. Don't worry, it's just one or two lines.
+            </li>
+        </ol>
+    </p>
+
+    <h2>How to use secrets in your code</h2>
+    <p>In the following example, we're assuming you have just created a new <code>NOVA_API_KEY</code> secret.</p>
+
+    <h3>Python</h3>
+    <p>To set the variable <code>nova_api_key</code> to the value of the secret, use the following code:</p>
+    <pre><code class="language-python">import os
+
+nova_api_key = os.environ['NOVA_API_KEY']</code></pre>
+    </code></pre>
+
+    <p>For example, if you want to use the <code>openai</code> Python library, your code might look a bit like this:</p>
+    <pre><code class="language-python">import openai as novaai
+import os
+
+novaai.api_base = 'https://api.nova-oss.com/v1'
+novaai.api_key = os.environ['NOVA_API_KEY']
+
+# ...</code></pre>
+
+
+    <h3>Node.js</h3>
+    <p>To set the variable <code>novaApiKey</code> to the value of the secret, use the following code:</p>
+    <pre><code class="language-javascript">const novaApiKey = process.env.NOVA_API_KEY</code></pre>
+
+    <p>If you're using <code>discord.js</code>, your code might look a bit like this:</p>
+    <pre><code class="language-javascript">const Discord = require('discord.js')
+const client = new Discord.Client()
+// ...
+client.login(process.env.DISCORD_BOT_TOKEN)</code></pre>
+
+    <h2>Need help?</h2>
+    <p>
+        Learn more in the <a href="https://docs.replit.com/programming-ide/workspace-features/secrets">replit documentation</a>
+        Here's a nice, well explained video tutorial by the team behind replit on how to use secrets:
+        <a href="https://youtu.be/Xrg2XP1JJec">https://youtu.be/Xrg2XP1JJec</a>
+        And here's a shorter, but unofficial video tutorial by
+        <a href="https://youtu.be/BKlv__1OoGc?t=24">https://youtu.be/BKlv__1OoGc?t=24</a>.
+    </p>
+</main>
+
+{% include 'parts/end.html' %}