Design + Callouts + Setup Environment + Backend Process

Finished Design. Have custom callouts in index Finished getting started. Added some extra modules (Design process and getting started) Started on backend code introduction.
tritonhacks · Feb 5, 2024 · 5a1fecf · 5a1fecf
1 parent 712af56
commit 5a1fecf
Show file tree

Hide file tree

Showing 21 changed files with 185 additions and 39 deletions.
diff --git a/_config.yml b/_config.yml
@@ -11,3 +11,27 @@ back_to_top_text: "Back to top"
 aux_links_new_tab: true
 aux_links:
   CS Foreach: https://www.csforeach.org/
+
+
+callouts:
+  warning:
+    title: Warning
+    color: yellow
+  hint:
+    title: Hint
+    color: grey-lt
+  important:
+    title: Important
+    color: blue
+  note:
+    title: Note
+    color: grey-dk
+  tip:
+    title: Tip
+    color: blue
+  caution:
+    title: Caution
+    color: red
+  attention:
+    title: Attention
+    color: purple
diff --git a/index.md b/index.md
@@ -6,9 +6,32 @@ nav_order: 1
 ---
 
 # TritonHacks Web Development <br> Starter Kit
-{: .note }
+
 > By [Victor](https://linkedin.com/in/hsiaovictor), [Noah](), [Kevin](https://www.linkedin.com/in/kevin-shin-373183188/), 
+{: .note }
+
+The following are the different callouts you can use. Reference the source code to use them.
+
+{: .important}
+If you are more comfortable with the dark theme, press the top right icon to switch. 
+
+{: .warning}
+text holder
+
+{: .hint}
+text holder
+
+{: .note}
+text holder
+
+{: .tip}
+text holder
+
+{: .caution}
+text holder
 
+{: .attention}
+text holder
 
 Welcome to Triton Hacks - your gateway to coding and tech exploration! This is the starter kit for those who want to learn about web development and how we can create websites!
 

diff --git a/source/Backend/Databases.md b/source/Backend/Databases.md
@@ -16,8 +16,6 @@ nav_order: 2
 1. TOC
 {:toc}
 
----
-
 {: .note }
 > By [name](github or linkedin)
 

diff --git a/source/Backend/RESTful.md b/source/Backend/RESTful.md
@@ -16,8 +16,6 @@ nav_order: 3
 1. TOC
 {:toc}
 
----
-
 {: .note }
 > By [name](github or linkedin)
 

diff --git a/source/Backend/Servers.md b/source/Backend/Servers.md
@@ -22,8 +22,6 @@ nav_order: 1
 {: .note }
 > By [Noah Terrell](github or linkedin)
 
-
-
 ### Simple Definition:
 A web server is a computer that stores and serves website files to other computers over the internet. It’s kind of like a library that has all of the books (websites) and gives them to people (computers) who want to read them.
 
@@ -62,9 +60,7 @@ For example let's say you the user is using a computer and have the google brows
 
 An analogy to think about this is like a restaurant. In the restaurant the kitchen would be considered the web server. Just like how the kitchen receives orders from the waitstaff (the users computer), prepares the food (processes the request) and then sends them back out to the waitstaff to be delivered to the customers (users web browser).
 
-![Image web server kitchen analogy](../source/assets/images/web-server-kitchen-image.png)
-
-
+![Image web server kitchen analogy](../source/assets/images/web-server-kitchen-image.jpg)
 
 
 [Previous: Backend](../Backend){: .float-left .v-align-text-top}

diff --git a/source/Design/User Experience.md b/source/Design/User Experience.md
@@ -15,7 +15,6 @@ nav_order: 2
 1. TOC
 {:toc}
 
----
 {: .note }
 By [Kevin](https://www.linkedin.com/in/kevin-shin-373183188/)
 

diff --git a/source/Design/User Interaction.md b/source/Design/User Interaction.md
@@ -16,13 +16,9 @@ nav_order: 1
 1. TOC
 {:toc}
 
----
-
 {: .note }
 > By [Kevin](https://www.linkedin.com/in/kevin-shin-373183188/)
 
-
-
 With DEI in mind, let's explore some principles that can help us be more inclusive.
 ### User Interaction Principes
 #### 🔍 **Adjustable Text Size and Font**

diff --git a/source/Example/Backend.md b/source/Example/Backend.md
@@ -4,7 +4,7 @@ title: Creating the Backend
 has_children: false
 parent: An Example
 permalink: /Example/Backend
-nav_order: 2
+nav_order: 4
 ---
 
 # Creating our Backend
@@ -16,12 +16,59 @@ nav_order: 2
 1. TOC
 {:toc}
 
----
-
 {: .note }
 > By [name](github or linkedin)
 
+### <img src="../source/assets/images/fastapi-1.svg" alt="FastAPI Logo" width="15" height="15"> FastAPI
+For our Web Development Starter Kit, we'll be utilizing FastAPI, an essential toolkit for those creating websites and web applications. Consider FastAPI as a collection of foundational tools that developers employ to build and manage the unseen components of websites or apps. These components are crucial for functions like securely transmitting your data during sign-ups or log-ins.
+
+While there are other frameworks like Flask, Django, and Tornado, each serving distinct purposes, FastAPI stands out for its ease of use and robust built-in features. This means you can achieve more with less coding effort, making it an excellent choice for both quick website deployment and for those new to web development, thanks to its gentle learning curve.
+
+Complete [Getting Started](Getting Started) before doing this.
+{: .caution}
+
+#### **Working with FastAPI**
+Create an app.py file at the root level of your project folder. Inside of it, write these lines of code.
+```python
+from fastapi import FastAPI
+from fastapi.staticfiles import StaticFiles       # Used for making static resources available to server
+from fastapi.templating import Jinja2Templates # Used for templatizied HTML
+import uvicorn
+
+# Here, you're creating an instance of FastAPI. 
+# This is like starting up your FastAPI toolkit and getting it ready to use. 
+# We call this instance app, and it's what you'll use to create different parts of your web application.
+app = FastAPI() 
+
+# Specify where the static files are located. This is the name of your folder.
+static_files = StaticFiles(directory='public') 
+views = Jinja2Templates(directory="public/views")
+
+# Mount the static files directory to /public, this is where your other files will access the sources.
+app.mount('/public', static_files, name='public')
+
+# We modulate the different kinds of files so it's easier for us to navigate them
+app.mount("/imgs", StaticFiles(directory="public/imgs"), name="imgs")
+app.mount("/css", StaticFiles(directory="public/css"), name="css")
+app.mount("/js", StaticFiles(directory="public/js"), name="js")
+
+if __name__ == "__main__":
+    # We can specify what ports to run, and you can change this.
+    # You would access this at 127.0.0.`:8007 or localhost:8007
+    # reload = True allows us to make changes to our code without constantly rerunning the code.
+    uvicorn.run("FileName:app", host="127.0.0.1", port=8007, reload=True)
+```
+
+We're then going to add these routes.
+```py
+@app.get("")
+
+@app.post("")
+
+@app.put("")
 
+@app.delete("")
+```
 
 [Previous: Frontend](Frontend){: .float-left .v-align-text-top}
-[Next: Building our Website](Website){: .float-right .v-align-text-top}
+[Next: Building our Website](/Example){: .float-right .v-align-text-top}
diff --git a/source/Example/Design Process.md b/source/Example/Design Process.md
@@ -0,0 +1,23 @@
+---
+layout: default
+title: Design Process
+has_children: false
+parent: An Example
+permalink: /Example/Design Process
+nav_order: 2
+---
+
+# Design Process
+{: .no_toc }
+
+## Table of contents
+{: .no_toc .text-delta }
+
+1. TOC
+{:toc}
+
+{: .note }
+> By [Kevin](github or linkedin)
+
+[Previous: Getting Started](Example/Getting Started){: .float-left .v-align-text-top}
+[Next: Frontend](Example/Frontend){: .float-right .v-align-text-top}
diff --git a/source/Example/Example.md b/source/Example/Example.md
@@ -12,6 +12,5 @@ permalink: /Example
 > By [name](github or linkedin)
 
 
-
-[Previous: RESTful](Backend/RESTful){: .float-left .v-align-text-top}
-[Next: Frontend](Example/Frontend){: .float-right .v-align-text-top}
+[Previous: RESTful](/Backend/RESTful){: .float-left .v-align-text-top}
+[Next: Getting Started](Getting Started){: .float-right .v-align-text-top}
diff --git a/source/Example/Frontend.md b/source/Example/Frontend.md
@@ -4,7 +4,7 @@ title: Creating the Frontend
 has_children: false
 parent: An Example
 permalink: /Example/Frontend
-nav_order: 1
+nav_order: 3
 ---
 
 # Creating our Frontend
@@ -16,12 +16,10 @@ nav_order: 1
 1. TOC
 {:toc}
 
----
-
 {: .note }
 > By [name](github or linkedin)
 
 
 
-[Previous: An Example](../Example){: .float-left .v-align-text-top}
+[Previous: Design Process](Design Process){: .float-left .v-align-text-top}
 [Next: Backend](Backend){: .float-right .v-align-text-top}
diff --git a/source/Example/Getting Started.md b/source/Example/Getting Started.md
@@ -0,0 +1,56 @@
+---
+layout: default
+title: Getting Started
+has_children: false
+parent: An Example
+permalink: /Example/Getting Started
+nav_order: 1
+---
+
+# Getting Started
+{: .no_toc }
+
+## Table of contents
+{: .no_toc .text-delta }
+
+1. TOC
+{:toc}
+
+{: .note }
+> By [Kevin](https://www.linkedin.com/in/kevin-shin-373183188/)
+
+{: .caution}
+This documentation is only for Windows.
+
+## Setting up Python in Visual Studio Code
+If your computer doesn't have [Visual Studio Code](https://code.visualstudio.com/), install it and follow these steps. In the installation process of Visual Studio Code, don't change anything and press next until it is installed.
+
+Once it is installed, it will look like this.
+![Visual Studio Code Welcome Page](../source/assets/images/vsc_welcome_page.png)
+
+Head over to the [Python Website](https://www.python.org/downloads/) and download the latest version.
+Once you get this pop up, make sure to check the second box.
+
+![Python Install](../source/assets/images/python_install.png)
+
+After you've installed Python, you have to set your interpreter so that it uses the installed Python. To do so, press ``` CTRL + SHIFT + P ``` inside of your visual studio code and type Python: Select Interpreter and press enter. You should see an option to select the interpreter you just installed.
+
+![Python Interpreter](add image here later)
+
+You've just finished setting up your environment!
+## Dependencies
+You won't be able to install any of these dependencies if you do not have your Python set up.
+{: .attention}
+
+In order to access the framework we'll be using, you must install the libraries first. To do so, go into your Visual Studio Code and make sure that your interpreter is set as the one you just installed. Press ``` Ctrl + Shift + P ``` and type in Terminal: Create New Terminal. Inside of this terminal, type these two commands separately.
+```bash
+pip install fastapi
+```
+```bash
+pip install uvicorn
+```
+
+Once these are installed, you are all set up to start creating your website.
+
+[Previous: Example](/Example){: .float-left .v-align-text-top}
+[Next: Design Process](/Example/Design Process){: .float-right .v-align-text-top}
diff --git a/source/Example/Website.md b/source/Example/Website.md
@@ -4,7 +4,7 @@ title: Crafting the Website
 has_children: false
 parent: An Example
 permalink: /Example/Website
-nav_order: 3
+nav_order: 4
 ---
 
 # Creating the Website
@@ -16,8 +16,6 @@ nav_order: 3
 1. TOC
 {:toc}
 
----
-
 {: .note }
 > By [name](github or linkedin)
 

diff --git a/source/Frontend/CSS.md b/source/Frontend/CSS.md
@@ -16,8 +16,6 @@ nav_order: 2
 1. TOC
 {:toc}
 
----
-
 {: .note }
 > By [name](github or linkedin)    
 

diff --git a/source/Frontend/Frontend.md b/source/Frontend/Frontend.md
@@ -16,8 +16,6 @@ permalink: /Frontend
 1. TOC
 {:toc}
 
-
-
 {: .note }
 > By [Victor](https://linkedin.com/in/hsiaovictor)
 

diff --git a/source/Frontend/HTML.md b/source/Frontend/HTML.md
@@ -16,8 +16,6 @@ nav_order: 1
 1. TOC
 {:toc}
 
----
-
 {: .note }
 > By [Victor Hsiao](https://www.linkedin.com/in/hsiaovictor/)
 

diff --git a/source/Frontend/Javascript.md b/source/Frontend/Javascript.md
@@ -16,8 +16,6 @@ nav_order: 3
 1. TOC
 {:toc}
 
----
-
 {: .note }
 > By [name](github or linkedin)
 

diff --git a/source/assets/images/fastapi-1.svg b/source/assets/images/fastapi-1.svg
diff --git a/source/assets/images/python_install.png b/source/assets/images/python_install.png
diff --git a/source/assets/images/vsc_welcome_page.png b/source/assets/images/vsc_welcome_page.png
diff --git a/team.md b/team.md
@@ -8,8 +8,6 @@ nav_order: 6
 # The Team
 {: .fs-9 }
 
----
-
 {: .note }
 > This guide has been prepared by [name](github or linkedin)
-Original file line number
+Diff line change
@@ Expand Up / @@ -16,8 +16,6 @@ nav_order: 2 @@
 . TOC
     {:toc}
-    ---
     {: .note }
     > By [name](github or linkedin)
@@ Expand Down @@