prep/Hello.py

import streamlit as st


st.set_page_config(
    page_title="Hello",
    page_icon="👋",
)

st.sidebar.success("Select a Page")

st.title('This is my fancy title for my main page!')

# after this point, things will be a little different if you are on PL or running the code locally on your computer
# I'll be running locally usually, but let's look at PL first:

# INSTRUCTIONS FOR RUNNING ON PL:
# 1. Open a "Terminal" by: View --> Terminal OR just the "Terminal" through the hamburger menu
# 2. run in terminal with: "streamlit run <the app .py file>"
# 3. click the "Open in Browser" link that pops up OR click on "Ports" and copy the URL
# 4. Open a Simple Browswer with View --> Command Palette --> Simple Browser: Show
# 5. use the URL from prior steps as intput into this simple browser

### 1.1 Text in Streamlit ###
# Let's look at a few more ways to include text in our Streamlit apps.
# We usually start our app with a title (like what we had above).
# We can also have headers and subheaders.
# See: https://docs.streamlit.io/develop/api-reference/text 

st.header('This is a "header"')
st.subheader('This is a "subheader"')

# On the docs there are several other ways to use text (like LaTeX and Markdown),
#  but we'll usually just be using the plain text:
st.text("This is plain text.")

# You can also use "magic" commands like:
'This is also plain text!!'

# ... but we will be using the "write" command typically for consistency:
st.write('This is also some text.')

# ... or often we will use Markdown:
st.markdown("""
I can also use markdown to write stuff!
 """)

# You should do whatever makes sense to you!

### 1.2 Layout elements ###
st.subheader('Layouts')
# There are several different ways we can layout our text/charts.
# See: https://docs.streamlit.io/develop/api-reference/layout 

col1, col2 = st.columns(2)
col1.write('This is me adding in some text to column 1')
col2.write('This is me adding in some text to column 2')

# Note that in theory we can have multiple columns, but in practice 
#  the columns will "wrap" after a certain number by default.

# There is a lot of fun stuff here to play with in layouts! 
# For our purposes, we'll start off with some of the simple defaults.

### 1.3 Images ###
st.subheader('Images')
# We can include images with a URL:
st.image('https://i.redd.it/on-a-scale-of-1-10-how-derpy-is-she-v0-z8gtdwu5n5zb1.jpg?width=3024&format=pjpg&auto=webp&s=345e7e1d5b45f20c733e497a9f746f4cbd3a61da',
         width=400,
         caption='A thinly veiled excuse to include a derpy corgi.')