Merge pull request #95 from British-Oceanographic-Data-Centre/feature…

…/beauty-docsy

Feature/beauty docsy

.github/workflows/docstrings.yml

@@ -46,6 +46,7 @@ jobs:
           git remote set-url origin https://x-access-token:${{ secrets.GITHUB_TOKEN }}@github.com/$GITHUB_REPOSITORY
           git checkout develop
           git pull
+          [ ! -f content/en/docs/Reference/index.md ] || mv content/en/docs/Reference/index.md content/en/docs/Reference/index_class.md
           git add content/en/docs/Reference/*
           git commit -am "Updated docstrings from coast repo."
           git push origin develop

README.md

@@ -1,31 +1,53 @@
-# COAsT docsy
+# COAsT Documentation Website
 
-This is the website repo for the COAsT python package it uses [Docsy](https://github.com/google/docsy) a Hugo theme for technical documentation sites, providing easy site navigation, structure, and more.
+This is the repository for the COAsT Python package documentation website. This site utilizes the [Docsy](https://github.com/google/docsy) theme, a Hugo theme designed for technical documentation sites, offering streamlined navigation, structure, and more.
 
+## Prerequisites
 
-## Cloning the COAsT Project website
+Before you get started, make sure you have the following prerequisites in place:
 
-The following will give you a project that is set up and ready to use (don't forget to use `--recurse-submodules` or you won't pull down some of the code you need to generate a working site). The `hugo server` command builds and serves the site. If you just want to build the site, run `hugo` instead.
+1. **Node.js and npm Installation**: Download and install Node.js, which includes npm, from the official [Node.js website](https://nodejs.org/). We recommend using version 18 or later.
+
+2. **Hugo Installation**: You'll need an extended version of Hugo, preferably version 0.120.1 or later, for local builds and previews of sites that use Docsy. To ensure you have the correct Hugo version, follow these steps:
+
+   - If you install Hugo from the release page, make sure to select the **extended Hugo version** to support SCSS.
+
+   - After installation, verify your Hugo version by running `hugo version`. Your output should resemble the following:
+
+     ```bash
+     hugo v0.120.2-9c2b2414d231ec1bdaf3e3a030bf148a45c7aa17+extended linux/amd64 BuildDate=2023-10-31T16:27:18Z VendorInfo=gohugoio
+     ```
+
+     Ensure that the version name includes the string *"extended"*.
+
+## Getting Started
+
+Follow these steps to set up your project and get it ready for use. Begin by cloning the repository:
 
 ```bash
-git clone --recurse-submodules --depth 1 https://github.com/British-Oceanographic-Data-Centre/COAsT-site.git
-cd docsy-example
-hugo server
+git clone --recurse-submodules --depth 1 [email protected]:British-Oceanographic-Data-Centre/COAsT-site.git
+cd COAsT-site
 ```
 
-The theme is included as a Git submodule:
+Now, proceed to install the dependencies and essential scripts:
 
 ```bash
-▶ git submodule
- a053131a4ebf6a59e4e8834a42368e248d98c01d themes/docsy (heads/master)
+npm install      # Install package dependencies 
+npm run prepare  # Fetch the submodule used as the theme for this website and install its dependencies
 ```
 
-If you want to do SCSS edits and want to publish these, you need to install `PostCSS` (not needed for `hugo server`):
+The `npm run prepare` command will install all the necessary dependencies for your theme, including `PostCSS`, `Bootstrap`, and `Autoprefixer`.
+
+## Running the Website Locally
+
+After cloning the site repository, navigate to the repository's root folder, and execute the following command to serve the website locally:
 
 ```bash
-npm install
+hugo server
 ```
 
+The `hugo server` command builds and serves the site. If you only want to build the site without serving it locally, run `hugo` instead.
+
 <!--### Cloning the Example from the Theme Project
 
 
@@ -42,12 +64,4 @@ Note that the Hugo Theme Site requires the `exampleSite` to live in a subfolder
 git subtree add --prefix exampleSite https://github.com/google/docsy.git  master --squash
 ```
 
-To pull in changes, see `pull-deps.sh` script in the theme.-->
-
-## Running the website locally
-
-Once you've cloned the site repo, from the repo root folder, run:
-
-```
-hugo server
-```
+To pull in changes, see `pull-deps.sh` script in the theme.-->

assets/scss/_variables_project.scss

@@ -4,3 +4,50 @@ Add styles or override variables from the theme here.
 
 */
 
+.text-shadow-black-3{
+  text-shadow: 3px 3px rgba(0,0,0,1);
+}
+.text-shadow-black-2{
+  text-shadow: 2px 2px rgba(0,0,0,1);
+}
+
+.text-shadow-white-3{
+  text-shadow: 3px 3px rgba(255,255,255,1);
+}
+.text-shadow-white-2{
+  text-shadow: 2px 2px rgba(255,255,255,1);
+}
+
+.link-size{
+  width: 12rem;
+}
+
+.icon-size{
+  height: 2rem;
+}
+
+.foot-link{
+  :hover{
+    opacity: 0.7;
+  }
+}
+
+.td-search__input:not(:focus){
+  background: rgba(0,0,0,0.3) !important;
+}
+
+
+.td-footer {
+  min-height: 130px !important;
+  padding-top: 2.5rem !important;
+}
+
+
+#td-cover-block-0 {
+  background-image: linear-gradient(45deg, rgba(255,255,255, 0.2), rgba(255,255,255, 0.2)), url(/COAsT/feature-background_hu7bd19a57cd689ada407cd31cc8f06f38_227588_960x540_fill_q75_catmullrom_top.jpg) !important;
+}
+@media only screen and (min-width: 1200px) {
+  #td-cover-block-0 {
+    background-image: linear-gradient(45deg, rgba(255,255,255, 0.2), rgba(255,255,255, 0.2)), url(/COAsT/feature-background_hu7bd19a57cd689ada407cd31cc8f06f38_227588_960x540_fill_q75_catmullrom_top.jpg)  !important;
+  }
+}

config.toml

@@ -67,7 +67,10 @@ weight = 1
 #contentDir = "content/no"
 #time_format_default = "02.01.2006"
 #time_format_blog = "02.01.2006"
-
+[module]
+	[[module.mounts]]
+		source = "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
+		target = "assets/js/bootstrap.bundle.min.js"
 [markup]
   [markup.goldmark]
     [markup.goldmark.renderer]
@@ -120,15 +123,15 @@ offlineSearch = true
 # User interface configuration
 [params.ui]
 # Enable to show the side bar menu in its compact state.
-sidebar_menu_compact = false
+sidebar_menu_compact = true
 #  Set to true to disable breadcrumb navigation.
 breadcrumb_disable = false
 #  Set to true to hide the sidebar search box (the top nav search box will still be displayed if search is enabled)
 sidebar_search_disable = false
 #  Set to false if you don't want to display a logo (/assets/icons/logo.svg) in the top nav bar
 navbar_logo = true
 # Set to true to disable the About link in the site footer
-footer_about_disable = false
+footer_about_disable = true
 
 # Adds a H2 section titled "Feedback" to the bottom of each doc. The responses are sent to Google Analytics as events.
 # This feature depends on [services.googleAnalytics] and will be disabled if "services.googleAnalytics.id" is not set.
@@ -148,10 +151,18 @@ enable = true
 
 [params.links]
 # End user relevant links. These will show up on left side of footer and in the community page if you have one.
+[[params.links.user]]
+	name = "COAsT Github"
+	url = "https://github.com/British-Oceanographic-Data-Centre/COAsT"
+	desc = "COAsT GitHub Repository."
 [[params.links.user]]
 	name = "COAsT Pypi"
 	url = "https://pypi.org/project/COAsT/#history"
-	desc = "COAsT python package."
+	desc = "COAsT pip python package."
+[[params.links.user]]
+	name = "COAsT Anaconda"
+	url = "https://anaconda.org/BODC/coast"
+	desc = "COAsT anaconda package."
 #[[params.links.user]]
 # name ="Twitter"
 #	url = "https://example.org/twitter"

content/en/_index.html

@@ -4,34 +4,73 @@
 
 +++
 
-{{< blocks/cover title="Welcome to the documentation: A Docsy site for COAsT" image_anchor="top" height="full" color="orange" >}}
-<div class="mx-auto">
-	<a class="btn btn-lg btn-primary mr-3 mb-4" href="{{< relref "/docs" >}}">
-		Learn More <i class="fas fa-arrow-alt-circle-right ml-2"></i>
-	</a>
-	<a class="btn btn-lg btn-secondary mr-3 mb-4" href="https://github.com/british-oceanographic-data-centre/COAsT">
-		Download <i class="fab fa-github ml-2 "></i>
-	</a>
-	<p class="lead mt-5">COAsT</p>
-	{{< blocks/link-down color="info" >}}
+<div id="home">
+	{{< blocks/cover image_anchor="top" height="full">}}
+	<h1 class="display-1 mt-0 mt-md-5 mb-0 pb-0 text-white text-shadow-black-2">COAsT
+	</h1>
+	<h2 class="display-3 mt-0 pb-5 pt-0 mb-5 text-white text-shadow-black-2">Coastal Ocean Assessment Toolbox</h2>
+	<div class="mx-auto">
+		<h2 class="text-white text-shadow-black-2">
+			A Python toolbox for assessing kilometer-scale ocean models, conducting statistical analyses,
+			and facilitating model validation.
+		</h2>
+		<div class="row justify-content-center">
+			<!-- <a class="btn btn-lg btn-primary mr-3 mb-4" href="{{< relref "/docs" >}}">
+				About
+			</a>	 -->
+			<a class="col-md-2 col-sm-12 link-size btn btn-lg btn-primary m-4" href="#about">
+				About
+			</a>
+			<a class="col-md-2 col-sm-12 link-size btn btn-lg btn-primary m-4" href="{{< relref "/docs" >}}">
+				Documentation
+			</a>
+			<a class="col-md-2 col-sm-12 link-size btn btn-lg btn-secondary m-4" href="https://github.com/british-oceanographic-data-centre/COAsT">
+				Download <i class="fab fa-github ml-2 "></i>
+			</a>
+		</div>
+		<div class="m-5">
+			{{< blocks/link-down color="info" >}}
+		</div>
+	</div>
+	{{< /blocks/cover >}}
 </div>
-{{< /blocks/cover >}}
 
+<div id="about">
+	{{% blocks/lead color="primary"%}}
+		<h2 class="display-4 mb-3 pb-3">About</h2>
+		<div class="">
+			<p>COAsT is Diagnostic and Assessment toolbox for kilometric scale regional models.
+				It's aim is to deliver a flexible, community-ready framework for assessing kilometric scale ocean models.</p>
+			<p>The focus, initially, is be on delivering novel diagnostics for processes that are emergent
+				at the kilometric scale and with NEMO model output.</p>
+		</div>
 
-{{% blocks/lead color="primary" %}}
-This site provides visibility into the COAsT python framework.
-
-{{% /blocks/lead %}}
-
-
-{{< blocks/section color="dark" type="row">}}
-{{% blocks/feature icon="fab fa-app-store-ios" title="Download **from Anaconda.org**" url="https://anaconda.org/BODC/" %}}
-Get the COAsT framework!
-{{% /blocks/feature %}}
-
+	{{% /blocks/lead %}}
+</div>
 
-{{% blocks/feature icon="fab fa-github" title="Contributions welcome!" url="https://github.com/British-Oceanographic-Data-Centre/COAsT-site" %}}
-We do a [Pull Request](https://github.com/British-Oceanographic-Data-Centre/COAsT-site/pulls) contributions workflow on **GitHub**. New users are always welcome!
-{{% /blocks/feature %}}
+<div id="community">
+	{{% blocks/lead color="white"%}}
+	<h2 class="display-4 mb-3 pb-3">Join the COAsT community</h2>
+	<div class="">
+		<p>COAsT is an open source project that anyone in the community can use, improve, and enjoy.
+			We'd love you to join us! Here's a few ways to find out what's happening and get involved.</p>
+	</div>
+	<div class="row td-box td-box--4 td-box--gradient td-box--height-auto linkbox">
+		<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
+			<h2 class="mb-4">Learn and Connect</h2>		
+			<p>Using or want to use COAsT? Find out more here:</p>
+			<div class="p-4 d-flex justify-content-around">
+				<a target="_blank" href="https://github.com/British-Oceanographic-Data-Centre/COAsT"><img class="icon-size" src="images/github.svg"/>Github</a>
+				<a target="_blank" href="https://pypi.org/project/COAsT/"><img class="icon-size" src="images/pypi.svg"/>Pypi</a>
+				<a target="_blank" href="https://anaconda.org/BODC/coast"><img class="icon-size" src="images/anaconda.svg" />Anaconda</a>
+			</div>
+		</div>
+		<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
+			<h2 class="mb-4">Develop and Contribute</h2>
+			<p>If you want to get more involved by contributing to COAsT, join us on our <a target="_blank" href="https://github.com/British-Oceanographic-Data-Centre/COAsT">Github Repository</a>
 
-{{< /blocks/section >}}
+			<p>You can find out how to contribute to these docs in our <a target="_blank" href="/COAsT/docs/contributing_package/">Contribution Guidelines</a>.
+			</div>
+	</div>
+	{{% /blocks/lead %}}
+</div>