From 37bf3c10f268f81b8ed173e1617689498a40a4d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Diogo=20Magalh=C3=A3es?= Date: Thu, 12 Sep 2024 09:58:24 +0000 Subject: [PATCH] website and mec-app-descriptor docs deployment --- .github/workflows/jekyll-gh-pages.yaml | 71 ++++++++++++ README.md | 5 +- docs/assets/css/styles.css | 91 +++++++++------ docs/assets/scss/components/_breakpoints.scss | 8 +- .../{_contact.scss => _credit.scss} | 8 +- .../{_products.scss => _teams.scss} | 6 +- docs/assets/scss/styles.scss | 4 +- docs/assets/scss/theme/_theme.scss | 2 +- docs/index.html | 109 +++++++++--------- 9 files changed, 198 insertions(+), 106 deletions(-) create mode 100644 .github/workflows/jekyll-gh-pages.yaml rename docs/assets/scss/components/{_contact.scss => _credit.scss} (86%) rename docs/assets/scss/components/{_products.scss => _teams.scss} (89%) diff --git a/.github/workflows/jekyll-gh-pages.yaml b/.github/workflows/jekyll-gh-pages.yaml new file mode 100644 index 0000000..5a1ccd1 --- /dev/null +++ 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|||' /tmp/site/mec-app-descriptor-parameters.html + # Replace the img tag with the new logo image + sed -i 's|]*>|OSM MEC|' /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 index 6c772d5..ff42a40 100644 --- a/README.md +++ b/README.md @@ -8,10 +8,11 @@
** 
 [Promo Video](https://www.youtube.com/watch?v=NGTCEbkJ_D4) 
 ** - ** 
 [Get Started / Wiki](https://samuthecoder.github.io/osm-mec-wiki/) 
 ** + ** 
 [Get Started / Wiki](https://atnog.github.io/osm-mec-wiki/) 
 ** ** 
 [Demo](https://www.youtube.com/watch?v=o9OZxs9vXEQ) 
 ** ** 
 [API Docs](https://app.swaggerhub.com/apis-docs/HenriqueCruz/oss-nb_api/1.0.0#/) 
 ** - ** 
 [Website](https://pedrodsferreira.github.io/osm-mec/) 
 ** + **
[MEC APP descriptor Parameters](https://atnog.github.io/osm-mec/mec-app-descriptor-parameters) 
 ** + ** 
 [Website](https://atnog.github.io/osm-mec/) 
 ** ** 
 [Poster](students-at-deti-poster.pdf) 
 ** diff --git a/docs/assets/css/styles.css b/docs/assets/css/styles.css index aa101d6..490add6 100644 --- 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,23 +490,23 @@ 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; @@ -514,18 +514,18 @@ the website, in dark theme 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,16 +700,33 @@ 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); @@ -717,7 +734,7 @@ the website, in dark theme } /*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 index 2952e2b..4dc4636 100644 --- 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; } diff --git a/docs/assets/scss/components/_contact.scss b/docs/assets/scss/components/_credit.scss similarity index 86% rename from docs/assets/scss/components/_contact.scss rename to docs/assets/scss/components/_credit.scss index c6d6bee..c271e81 100644 --- a/docs/assets/scss/components/_contact.scss +++ b/docs/assets/scss/components/_credit.scss @@ -1,5 +1,5 @@ -/*=============== CONTACT ===============*/ -.contact{ +/*=============== CREDIT ===============*/ +.credits{ &__container{ row-gap: 3.5rem; } @@ -46,13 +46,13 @@ outline: none; z-index: 1; - &:focus + .contact__label{ + &:focus + .credits__label{ top: -.75rem; left: 0; font-size: var(--smaller-font-size); z-index: 10; } - &:not(:placeholder-shown).contact__input:not(:focus) + .contact__label{ + &:not(:placeholder-shown).credits__input:not(:focus) + .credits__label{ top: -.75rem; font-size: var(--smaller-font-size); z-index: 10; diff --git a/docs/assets/scss/components/_products.scss b/docs/assets/scss/components/_teams.scss similarity index 89% rename from docs/assets/scss/components/_products.scss rename to docs/assets/scss/components/_teams.scss index ec929b7..36a1609 100644 --- a/docs/assets/scss/components/_products.scss +++ b/docs/assets/scss/components/_teams.scss @@ -1,5 +1,5 @@ -/*=============== PRODUCTS ===============*/ -.product{ +/*=============== TEAM ===============*/ +.team{ &__description{ text-align: center; } @@ -12,7 +12,7 @@ display: grid; position: relative; - &:hover .product__img{ + &:hover .team__img{ transform: translateY(-.5rem); } } diff --git a/docs/assets/scss/styles.scss b/docs/assets/scss/styles.scss index 97e2e46..327f3d9 100644 --- a/docs/assets/scss/styles.scss +++ b/docs/assets/scss/styles.scss @@ -7,9 +7,9 @@ @import 'components/buttons'; @import 'components/about'; @import 'components/steps'; -@import 'components/products'; +@import 'components/team'; @import 'components/questions'; -@import 'components/contact'; +@import 'components/credits'; @import 'components/footer'; @import 'components/scroll'; @import 'components/breakpoints'; \ No newline at end of file diff --git a/docs/assets/scss/theme/_theme.scss b/docs/assets/scss/theme/_theme.scss index 63a5ddc..1aaeefd 100644 --- a/docs/assets/scss/theme/_theme.scss +++ b/docs/assets/scss/theme/_theme.scss @@ -30,7 +30,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); } diff --git a/docs/index.html b/docs/index.html index 98a835e..ec6f313 100644 --- a/docs/index.html +++ b/docs/index.html @@ -32,13 +32,16 @@ About
  • - Team + Team
  • Related Questions
  • - Credits + Credits +
    • +
  • + Docs
    • @@ -223,91 +226,91 @@

    MEC App Yang Model and MEAO

    - -
    + +

    Our Team

    -
    -
    +
    +
    - + -

    Afonso Castanheta

    - Backend +

    Afonso Castanheta

    + Backend -
    -
    - +
    + -

    Francisco Cardita

    - Frontend +

    Francisco Cardita

    + Frontend -
    -
    - +
    + -

    Henrique Cruz

    - Backend +

    Henrique Cruz

    + Backend -
    -
    +
    - + -

    Luís Oliveira

    - Frontend +

    Luís Oliveira

    + Frontend -
    -
    +
    - + -

    Pedro Ferreira

    - Backend +

    Pedro Ferreira

    + Backend -
    -
    +
    - + -

    Samuel Teixeira

    - Backend +

    Samuel Teixeira

    + Backend - @@ -435,44 +438,44 @@

    - -
    -
    -
    + +
    +
    +

    Some useful links

    -
    -
    -

    Github repository of the project

    - - - Click Here +
    +
    +

    Github repository of the project

    + +     + Click Here
    -
    -

    Open Source MANO's Website

    - +
    +

    Open Source MANO's Website

    + - Click Here + Click Here
    -
    +

    Special Thanks

    -
    -
    - +
    +
    + We give a special thanks to Pedro Escaleira for his time and dedication to teach us to the advanced topics taught with this project.

    We also want to thank Diogo Magalhães for creating the CNF for our project.