website and mec-app-descriptor docs deployment

ATNoG · Sep 12, 2024 · 37bf3c1 · 37bf3c1
1 parent 5ddb4db
commit 37bf3c1
Show file tree

Hide file tree

Showing 9 changed files with 198 additions and 106 deletions.
diff --git a/.github/workflows/jekyll-gh-pages.yaml b/.github/workflows/jekyll-gh-pages.yaml
@@ -0,0 +1,71 @@
+# Sample workflow for building and deploying a Jekyll site to GitHub Pages
+name: Deploy Jekyll with GitHub Pages dependencies preinstalled
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          submodules: recursive
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+      - name: Build with Jekyll
+        uses: actions/jekyll-build-pages@v1
+        with:
+          source: ./
+          destination: ./_site
+      - name: Prepare Artifacts
+        run: |
+          # include/exlude subdirectories/files not capable of being configured in jekyll _config.yaml
+          mkdir -p /tmp/site
+          cp -t /tmp/site -r README.md osm-mec-logo.png docs
+
+          # Generate yang documentation
+          cd yang
+          pip install pyang==2.6.0 pyangbind==0.8.5
+          pyang -f jstree -o /tmp/site/mec-app-descriptor-parameters.html mec-app-descriptor.yang
+          cd ..
+
+          # Replace the logo in mec-app-descriptor-parameters.html
+          sed -i 's|<a href="[^"]*">|<a href="https://atnog.github.io/osm-mec/docs/index.html">|' /tmp/site/mec-app-descriptor-parameters.html
+          # Replace the img tag with the new logo image
+          sed -i 's|<img src="[^"]*"[^>]*>|<img src="https://atnog.github.io/osm-mec/osm-mec-logo.png" alt="OSM MEC" style="width:150px;height:43.125px;" />|' /tmp/site/mec-app-descriptor-parameters.html
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: /tmp/site
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/README.md b/README.md
@@ -8,10 +8,11 @@
   <br>
 
   **<kbd> <br> [Promo Video](https://www.youtube.com/watch?v=NGTCEbkJ_D4) <br> </kbd>**
-  **<kbd> <br> [Get Started / Wiki](https://samuthecoder.github.io/osm-mec-wiki/) <br> </kbd>**
+  **<kbd> <br> [Get Started / Wiki](https://atnog.github.io/osm-mec-wiki/) <br> </kbd>**
   **<kbd> <br> [Demo](https://www.youtube.com/watch?v=o9OZxs9vXEQ) <br> </kbd>**
   **<kbd> <br> [API Docs](https://app.swaggerhub.com/apis-docs/HenriqueCruz/oss-nb_api/1.0.0#/) <br> </kbd>**
-  **<kbd> <br> [Website](https://pedrodsferreira.github.io/osm-mec/) <br> </kbd>**
+  **<kbd> <br> [MEC APP descriptor Parameters](https://atnog.github.io/osm-mec/mec-app-descriptor-parameters) <br> </kbd>**
+  **<kbd> <br> [Website](https://atnog.github.io/osm-mec/) <br> </kbd>**
   **<kbd> <br> [Poster](students-at-deti-poster.pdf) <br> </kbd>**
 
 </div>

diff --git a/docs/assets/css/styles.css b/docs/assets/css/styles.css
@@ -143,7 +143,7 @@ the website, in dark theme
   background-color: var(--first-color-dark);
 }
 
-.dark-theme .product__circle,
+.dark-theme .team__circle,
 .dark-theme .footer__subscribe{
   background-color: var(--container-color);
 }
@@ -490,42 +490,42 @@ the website, in dark theme
   transform: translateY(-.25rem);
 }
 
-/*=============== PRODUCTS ===============*/
-.product__description{
+/*=============== TEAM ===============*/
+.team__description{
   text-align: center;
 }
 
-.product__container{
+.team__container{
   padding: 3rem 0;
   grid-template-columns: repeat(2, 1fr);
   gap: 2.5rem 3rem;
 }
 
-.product__card{
+.team__card{
   display: grid;
   position: relative;
 }
 
-.product__img{
+.team__img{
   position: relative;
   width: 350px;
   justify-self: center;
   margin-bottom: var(--mb-0-75);
   transition: .3s;
 }
 
-.product__title,
-.product__price{
+.team__title,
+.team__price{
   font-size: var(--small-font-size);
   font-weight: var(--font-semi-bold);
   color: var(--title-color);
 }
 
-.product__title{
+.team__title{
   margin-bottom: .25rem;
 }
 
-.product__button{
+.team__button{
   position: absolute;
   right: 0;
   bottom: 0;
@@ -536,11 +536,11 @@ the website, in dark theme
   font-size: 1.15rem;
 }
 
-.product__button:hover{
+.team__button:hover{
   background-color: var(--first-color-alt);
 }
 
-.product__circle{
+.team__circle{
   width: 90px;
   height: 90px;
   background-color: var(--first-color-lighten);
@@ -550,7 +550,7 @@ the website, in dark theme
   left: 5%;
 }
 
-.product__card:hover .product__img{
+.team__card:hover .team__img{
   transform: translateY(-.5rem);
 }
 
@@ -632,24 +632,24 @@ the website, in dark theme
   transform: rotate(45deg);
 }
 
-/*=============== CONTACT ===============*/
-.contact__container{
+/*=============== CREDIT ===============*/
+.credits__container{
   row-gap: 3.5rem;
 }
 
-.contact__data{
+.credits__data{
   display: grid;
   row-gap: 2rem;
 }
 
-.contact__subtitle{
+.credits__subtitle{
   font-size: var(--normal-font-size);
   font-weight: var(--font-medium);
   color: var(--text-color);
   margin-bottom: var(--mb-0-5);
 }
 
-.contact__description{
+.credits__description{
   display: inline-flex;
   align-items: center;
   column-gap: .5rem;
@@ -658,23 +658,23 @@ the website, in dark theme
   text-align: justify;
 }
 
-.contact__icon{
+.credits__icon{
   font-size: 1.25rem;
 }
 
-.contact__inputs{
+.credits__inputs{
   display: grid;
   row-gap: 2rem;
   margin-bottom: var(--mb-2-5);
 }
 
-.contact__content{
+.credits__content{
   position: relative;
   height: 3rem;
   border-bottom: 1px solid var(--text-color-light);
 }
 
-.contact__input{
+.credits__input{
   position: absolute;
   top: 0;
   left: 0;
@@ -691,7 +691,7 @@ the website, in dark theme
   z-index: 1;
 }
 
-.contact__label{
+.credits__label{
   position: absolute;
   top: .75rem;
   width: 100%;
@@ -700,24 +700,41 @@ the website, in dark theme
   transition: .3s;
 }
 
-.contact__area{
+.credits__header{
+  display: flex;
+  align-items: center;
+  column-gap: .5rem;
+  padding: .75rem .5rem;
+  cursor: pointer;
+}
+
+.credits__item,
+.credits__header,
+.credits__item-title,
+.credits__icon,
+.credits__description,
+.credits__content{
+  transition: .3s;
+}
+
+.credits__area{
   height: 7rem;
 }
 
-.contact__area textarea{
+.credits__area textarea{
   resize: none;
 }
 
 /*Input focus move up label*/
-.contact__input:focus + .contact__label{
+.credits__input:focus + .credits__label{
   top: -.75rem;
   left: 0;
   font-size: var(--smaller-font-size);
   z-index: 10;
 }
 
 /*Input focus sticky top label*/
-.contact__input:not(:placeholder-shown).contact__input:not(:focus) + .contact__label{
+.credits__input:not(:placeholder-shown).credits__input:not(:focus) + .credits__label{
   top: -.75rem;
   font-size: var(--smaller-font-size);
   z-index: 10;
@@ -877,7 +894,7 @@ the website, in dark theme
     padding: 1.5rem;
   }
 
-  .product__container{
+  .team__container{
     grid-template-columns: .6fr;
     justify-content: center;
   }
@@ -889,10 +906,10 @@ the website, in dark theme
     grid-template-columns: repeat(2, 1fr);
   }
 
-  .product__description{
+  .team__description{
     padding: 0 4rem;
   }
-  .product__container{
+  .team__container{
     grid-template-columns: repeat(2, 230px);
     justify-content: center;
     column-gap: 5rem;
@@ -927,7 +944,7 @@ the website, in dark theme
   .home__container,
   .about__container,
   .questions__container,
-  .contact__container,
+  .credits__container,
   .footer__container{
     grid-template-columns: repeat(2, 1fr);
   }
@@ -997,23 +1014,23 @@ the website, in dark theme
     font-size: var(--normal-font-size);
   }
 
-  .product__description{
+  .team__description{
     padding: 0 16rem;
   }
-  .product__container{
+  .team__container{
     padding: 4rem 0;
     grid-template-columns: repeat(3, 300px);
     gap: 4rem 6rem;
   }
-  .product__img{
+  .team__img{
     width: 400px;
   }
-  .product__circle{
+  .team__circle{
     width: 110px;
     height: 110px;
   }
-  .product__title,
-  .product__price{
+  .team__title,
+  .team__price{
     font-size: var(--normal-font-size);
   }
 

diff --git a/docs/assets/scss/components/_breakpoints.scss b/docs/assets/scss/components/_breakpoints.scss
@@ -24,7 +24,7 @@
         }
     }
 
-    .product__container{
+    .team__container{
         grid-template-columns: .6fr;
         justify-content: center;
     }
@@ -37,7 +37,7 @@
             grid-template-columns: repeat(2, 1fr);
         }
     }
-    .product{
+    .team{
         &__description{
             padding: 0 4rem;
         }
@@ -78,7 +78,7 @@
     .home__container,
     .about__container,
     .questions__container,
-    .contact__container,
+    .credits__container,
     .footer__container{
         grid-template-columns: repeat(2, 1fr);
     }
@@ -155,7 +155,7 @@
         }
     }
 
-    .product{
+    .team{
         &__description{
             padding: 0 16rem;
         }