82b12a5fae1c82dffe13401e09749849d116e724
lrnassar
  Fri Dec 5 17:27:44 2025 -0800
Making major changes to the markdown /docs/ directory since we are going to keep adding to it. Starting with adding more heirarchy, also had to update the makefile and staticPage.lua to reference the correct root path for the CSS. Also had to update all of the relative links in the pages so far in order to make them absolute paths for easier implementation. Lastly, adding the new hubBasics page which is the first in the new hubs subdir. Refs #28347

diff --git docs/gatewayTutorial.md docs/tutorials/gatewayTutorial.md
similarity index 90%
rename from docs/gatewayTutorial.md
rename to docs/tutorials/gatewayTutorial.md
index b37faac4280..aebd1186544 100644
--- docs/gatewayTutorial.md
+++ docs/tutorials/gatewayTutorial.md
@@ -1,18 +1,18 @@
 % UCSC Genome Browser Gateway Tutorial
 
-The [UCSC Genome Browser Gateway](../cgi-bin/hgGateway) page is a tool for finding and accessing
+The [UCSC Genome Browser Gateway](/cgi-bin/hgGateway) page is a tool for finding and accessing
 genome assemblies.  It features two search boxes: one for selecting an assembly and another for
 specifying a genomic position. This tutorial will guide you through various features of the
 Gateway page, including:
 
 - Finding a genome browser using the Popular Species option
 - Exploring the UCSC Species Tree
 - Searching for an assembly using different identifiers
 - Viewing sequences
 - Using search terms to jump to a specific genome location
 
 ## Learning materials
 
 <div class="row" style="padding-top: 15px">
 <div class="col-md-4">
 <div class="panel panel-default" style="padding-bottom: 10px">
@@ -37,52 +37,52 @@
 
 <p style="text-align: end">
 <button>[View](#guided-walkthrough)</button>
 </p>
 </div>
 </div>
 
 <div class="col-md-4">
 <div class="panel panel-default" style="padding-bottom: 10px">
 <h3 class="panel-title" style="width: -webkit-fill-available;"
 >Interactive Tutorial</h3>
 
 An interactive tutorial that covers the basic Browser introduction on the Gateway page.
 
 <p style="text-align: end">
-<button>[View](../cgi-bin/hgGateway?db=hg38&startTutorial=true)</button>
+<button>[View](/cgi-bin/hgGateway?db=hg38&startTutorial=true)</button>
 </p>
 </div>
 </div>
 </div>
 
 ## Gateway page screenshot
 
 ```image
-src=../images/tutorialImages/gatewayPageAnnotated.jpg
+src=/images/tutorialImages/gatewayPageAnnotated.jpg
 width=90%
 ```
 
 ## Guided Walkthrough
 
 ### Using the Popular Species Option
 
 <div class="row">
 <div class="col-md-6">
 
 ```image
-src=../images/tutorialImages/popularSpecies.png
+src=/images/tutorialImages/popularSpecies.png
 width=70%
 ```
 
 </div>
 <div class="col-md-6">
 
 The **Popular Species** section lists commonly used model organisms, allowing for quick selection of
 their genome browsers. Clicking on a species will display the default assembly version for that
 organism. 
 
 </div>
 </div>
 
 ---
 <div class="row">
@@ -99,72 +99,72 @@
 
 The different assemblies often differ in their sequence content, with newer versions using newer
 technologies to fill in gaps, correct errors, and refine genome structure. Some regions of an older
 assembly may shift or change, while sequencing errors from previous data may be corrected in an
 updated version. For example, the updated reference genome hg38 contains many improvements over the
 hg19 assembly, some of which may include contigs that were merged together or placed where there
 were previously sequence gaps.
 
 To change the assembly version, click the **Assembly** option under **Find Position**.
 
 </div>
 <div class="col-md-6">
 
 
 ```image
-src=../images/tutorialImages/assemblyVersion.png
+src=/images/tutorialImages/assemblyVersion.png
 width=90%
 ```
 
 </div>
 </div>
 
 ---
 ### Using the search box
 
 <div class="row">
 <div class="col-md-6">
 
 The search box allows users to find genome assemblies by entering different types of queries:
 
 Searching by **species name**: Ovis aries
 
 Searching by  **common name**: dog
 
 Searching by  **GC accession number**: GCF_016699485.2
 
 
 </div>
 <div class="col-md-6">
 
 ```image
-src=../images/tutorialImages/searchByGCFid.gif
+src=/images/tutorialImages/searchByGCFid.gif
 width=100%
 ```
 
 
 </div>
 </div>
 ---
 
 ### Exploring the UCSC Species Tree
 
 <div class="row">
 <div class="col-md-6">
 
 ```image
-src=../images/tutorialImages/speciesTree.png
+src=/images/tutorialImages/speciesTree.png
 width=60%
 ```
 
 </div>
 <div class="col-md-6">
 
 The **Species Tree** option displays a phylogenetic tree that can be navigated using scrolling or
 by clicking different parts of the tree. Hovering over a branch will reveal the lineage branch name.
 
 **Note**: The Species Tree does not include all available Genome Browser assemblies. The process of
 adding Genome Browsers has been streamlined, enabling rapid releases but omitting certain previous
 features, such as inclusion in the Species Tree. To find a specific assembly, use the assembly
 search box.
 </div>
 </div>
@@ -177,55 +177,55 @@
 
 If a desired assembly is not listed, you can request it by clicking **&quot;Unable to find a
 genome? Send us a request**&quot;. This will direct you to the **Genome Assembly Search and Request
 page.**
 
 Steps to request an assembly:
 
 1. Enter the **species name, common name, or GC accession number** of the assembly.
 2. Click the **request button**.
 3. Fill out the required information on the submission page.
 
 </div>
 <div class="col-md-6">
 
 ```image
-src=../images/tutorialImages/assemblyRequest.png
+src=/images/tutorialImages/assemblyRequest.png
 width=130%
 ```
 
 ```image
-src=../images/tutorialImages/requestPage.png
+src=/images/tutorialImages/requestPage.png
 width=40%
 ```
 
 </div>
 </div>
 ---
 
 ### Using View sequences
 
 <div class="row">
 <div class="col-md-6">
 
 ```image
-src=../images/tutorialImages/viewSequence.png
+src=/images/tutorialImages/viewSequence.png
 width=30%
 ```
 
 ```image
-src=../images/tutorialImages/sequencesList.png
+src=/images/tutorialImages/sequencesList.png
 width=70%
 ```
 
 </div>
 <div class="col-md-6">
 
 Clicking the **View sequences** link directs users to the **Assembly Browser Sequences** page. This
 page displays information about chromosomes, sequences, and contigs for the selected assembly.
 
 The third column displays alias sequence names, while subsequent columns show alternate naming
 schemes. These include:
 
 - **assembly** - Names from NCBI&apos;s assembly_report.txt file.
 - **genbank** - INSDC names.
 - **refseq** - Names from RefSeq annotations.
@@ -248,50 +248,50 @@
 - Assembly date
 - Assembly type
 - Assembly level
 - Biosample
 - Assembly accession
 - NCBI Genome ID
 - NCBI Assembly ID
 - BioProject ID
 
 The Gateway page also offers  **download links** for data files related to the genome assembly.
 
 </div>
 <div class="col-md-6">
 
 ```image
-src=../images/tutorialImages/assemblyDetails.png
+src=/images/tutorialImages/assemblyDetails.png
 width=90%
 ```
 </div>
 </div>
 
 ----
 
 <div class="row">
 <div class="col-md-6">
 </div>
 </div>
 
 ### Jumping to a Specific Genome Location
 
 <div class="row">
 <div class="col-md-6">
 
 ```image
-src=../images/tutorialImages/searchBox.png
+src=/images/tutorialImages/searchBox.png
 width=70%
 ```
 
 </div>
 <div class="col-md-6">
 Once an assembly is selected, users can search for specific genome locations using:
 
 - Genome positions (e.g., chr1:1000000-2000000)
 - Gene names (e.g., BRCA1)
 
 For more details on valid position queries, visit the [Querying the Genome Browser](/goldenPath/help/query.html) page.
 
 </div>
 </div>