Update file paths to use relative URLs

USC-InfoLab · Jul 10, 2024 · 7c5b898 · 7c5b898
1 parent 2b5ba0d
commit 7c5b898
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 22 deletions.
diff --git a/.github/workflows/w4h-workflow.yml b/.github/workflows/w4h-workflow.yml
@@ -36,7 +36,7 @@ jobs:
             htmlfile="${htmlfile%.md}.html"
             echo "Converting $file to $htmlfile"
             mkdir -p "$(dirname "$htmlfile")"
-            pandoc "$file" -o "$htmlfile"
+            pandoc "$file" -o "$htmlfile" --extract-media=html
             if [ $? -eq 0 ]; then
               echo "Successfully converted $file"
             else

diff --git a/docs/getting-started/how_to_start.md b/docs/getting-started/how_to_start.md
@@ -15,52 +15,53 @@ The W4H GeoMTS dashboard is designed to provide visualization and analysis capab
 At this moment, you should have read the Setting up tutorial and set up your database server.
 If you already have data in proper format in your database, you can skip this step.  
 Click the "import page" button on the left side of the dashboard, you will see a page like this:  
-    <div style="display: flex;justify-content: center; "><img src="/static/import_page_create.png" alt="import_page_create" style="margin:10px;width:800px;border: 2px solid rgba(252, 176, 69, 0.3);"/></div>  
+    ![import_page_create](/static/import_page_create.png)
 
     Let's start from creating a new database instance:  
     First, Select "Create new W4H database instance"    
-    <div style="display: flex;justify-content: center; "><img src="../../static/create_new_db.png" alt="create_new_db" style="margin:10px;width:800px;border: 2px solid rgba(252, 176, 69, 0.3);"/></div>
+    ![create_new_db](static/create_new_db.png)
+
 
     Second, type in the name of database you want to make, and click "create". In this case we name it "test2"
-    <div style="display: flex;justify-content: center; "><img src="/static/set_db_name.png" alt="set_db_name" style="margin:10px;width:800px;border: 2px solid rgba(252, 176, 69, 0.3);"/></div>
-    If it's created successfully, you will see a message like this:  
-    <div style="display: flex;justify-content: center; "><img src="/static/create_success.png" alt="create_success" style="margin:10px;width:800px;border: 2px solid rgba(252, 176, 69, 0.3);"/></div>  
+    ![import_page_create](/static/set_db_name.png)
+    If it's created successfully, you will see a message like this:   
+    ![import_page_create](/static/create_success.png)
 
     Third, select "Choose existing W4H database instance"  
-    <div style="display: flex;justify-content: center; "><img src="/static/choose_exist_db.png" alt="choose_exist_db" style="margin:10px;width:800px;border: 2px solid rgba(252, 176, 69, 0.3);"/></div>  
+    ![import_page_create](/static/choose_exist_db.png)
     Select the database you just created  
-    <div style="display: flex;justify-content: center; "><img src="/static/select_exist_db.png" alt="select_exist_db" style="margin:10px;width:800px;border: 2px solid rgba(252, 176, 69, 0.3);"/></div>
+    ![import_page_create](/static/select_exist_db.png)
 
     For the Following step, if you need some test file, try to download here:  
     [synthetic_subject_data.csv](/static/synthetic_subject_data.csv)
 
     [synthetic_timeseries_data_reduced.csv](/static/synthetic_timeseries_data_reduced.csv)
 
-    Fourth, Upload your subjects csv file, and check "Populate subject table name".
-    <div style="display: flex;justify-content: center; "><img src="/static/upload_subject_csv.png" alt="upload_subject_csv" style="margin:10px;width:800px;border: 2px solid rgba(252, 176, 69, 0.3);"/></div>  
+    Fourth, Upload your subjects csv file, and check "Populate subject table name". 
+    ![import_page_create](/static/upload_subject_csv.png)
     After making sure corresponding Column are all correct, click "Populate database" at the bottom.  
-    <div style="display: flex;justify-content: center; "><img src="/static/populate_db.png" alt="populate_db" style="margin:10px;width:800px;border: 2px solid rgba(252, 176, 69, 0.3);"/></div>
+    ![import_page_create](/static/populate_db.png)
 
-    Fifth, upload your time series csv file  
-    <div style="display: flex;justify-content: center; "><img src="/static/upload_time_csv.png" alt="upload_time_csv" style="margin:10px;width:800px;border: 2px solid rgba(252, 176, 69, 0.3);"/></div>  
+    Fifth, upload your time series csv file   
+    ![import_page_create](/static/upload_time_csv.png)
     After making sure corresponding Column are all correct, click "Populate database" at the bottom.  
-    <div style="display: flex;justify-content: center; "><img src="/static/populate_db_time.png" alt="populate_db_time" style="margin:10px;width:800px;border: 2px solid rgba(252, 176, 69, 0.3);"/></div>  
+    ![import_page_create](/static/populate_db_time.png)
 
     (Optional)Sixth, open your DB management tool, such as PgAdmin4, and check if the data is populated correctly.  
-    <div style="display: flex;justify-content: center; "><img src="/static/pgadmin.png" alt="pgadmin" style="margin:10px;width:800px;border: 2px solid rgba(252, 176, 69, 0.3);"/></div>  
+    ![import_page_create](/static/pgadmin.png)
 
 2. **choose your db in the input page, then setup it!**  
 
-    choose your db in the input page  
-    <div style="display: flex;justify-content: center; "><img src="/static/input_select_db.png" alt="input_select_db" style="margin:10px;width:800px;border: 2px solid rgba(252, 176, 69, 0.3);"/></div>   
+    choose your db in the input page   
+    ![import_page_create](/static/input_select_db.png)  
 
-    select the subjects and control group you want to check  
-    <div style="display: flex;justify-content: center; "><img src="/static/subjects_and_control_group.png" alt="subjects_and_control_group" style="margin:10px;width:800px;border: 2px solid rgba(252, 176, 69, 0.3);"/></div>  
+    select the subjects and control group you want to check   
+    ![import_page_create](/static/subjects_and_control_group.png)  
 
     select if you want to simulate the data
     click "show result"
 3. **check the result page**  
     You are there!  
-    <div style="display: flex;justify-content: center; "><img src="/static/result_page.png" alt="result_page" style="margin:10px;width:800px;border: 2px solid rgba(252, 176, 69, 0.3);"/></div>  
+    ![import_page_create](/static/result_page.png) 
 
 
diff --git a/docs/getting-started/setting_up.md b/docs/getting-started/setting_up.md
@@ -11,5 +11,5 @@ db's host,username,password,database name, and the port it is listening to.
 login in with username and password(use "admin" for both username and password in first time)
 
 Then following instruction to set your database
-    <div style="display: flex;justify-content: center; "><img src="/static/manage_database_1.png" alt="manage_database_1" style="margin:10px;width:800px;border: 2px solid rgba(252, 176, 69, 0.3);"/></div>
-    <div style="display: flex;justify-content: center; "><img src="/static/manage_database_2.png" alt="manage_database_2" style="margin:10px;width:800px;border: 2px solid rgba(252, 176, 69, 0.3);"/></div>
+    ![import_page_create](/static/manage_database_1.png)
+    ![import_page_create](/static/manage_database_2.png)