Merge pull request #19 from LeonidShv/dev

.env

@@ -0,0 +1,3 @@
+# VITE_BACKEND_URL=https://echr-opendata.eu/api
+VITE_BACKEND_URL=https://data.un.org/ws/rest/data/UNSD,DF_UNData_UNFCC
+VITE_BACKEND_VERSION=1.0

.github/workflows/main.yml → .github/workflows/dev.yml

@@ -4,7 +4,6 @@ on:
   pull_request:
     branches:
       - dev
-      - main
 
 jobs:
   build:
@@ -38,6 +37,3 @@ jobs:
 
       - name: Build app
         run: npm run build
-
-      # - name: Deploy app
-      #   TODO

.github/workflows/prod.yml

@@ -0,0 +1,39 @@
+name: UN Environment
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    name: "Test and build app"
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [20.x] # here you can add many different node versions
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "npm"
+
+      - name: Install dependency
+        run: npm install
+
+      - name: Setup .env
+        run: |
+          echo "VITE_BACKEND_URL=${{ secrets.VITE_BACKEND_URL }}" > .env
+          echo "VITE_BACKEND_VERSION=${{ secrets.VITE_BACKEND_VERSION }}" >> .env
+
+      # - name: Run test
+      #   run: npm test # HERE run cypress
+
+      - name: Build app
+        run: npm run build
+
+      - name: Deploy app
+        run: npm run deploy

app.vue

@@ -1,10 +1,14 @@
 <template>
-  <header class="p-h-3">
+  <header class="header p-h-3">
     <VNavigation class="navigation" :navigation="navigation" />
   </header>
-  <main class="p-h-3">
+  <main class="main p-h-3">
     <NuxtPage />
   </main>
+
+  <footer class="footer d-flex wrap">
+    <VFooter />
+  </footer>
 </template>
 
 <script setup lang="ts">
@@ -31,22 +35,39 @@ on((params: IElNotification | any) => {
 const navigation: Ref<INavigationItem[]> = ref([
   {
     path: "/",
-    label: "Information",
+    label: "Charts",
     disabled: false,
   },
   {
-    path: "/",
-    label: "Cases",
+    path: "/map-pollution",
+    label: "Map Pollution",
     disabled: false,
   },
   {
-    path: "/",
-    label: "Conclusions",
-    disabled: true,
+    path: "/blog",
+    label: "Blog",
+    disabled: false,
   },
 ]);
 </script>
 
 <style lang="scss">
 @import "./assets/styles/main.scss";
+
+.header,
+.main,
+.footer {
+  max-width: 1200px;
+  margin: auto;
+}
+
+.main {
+  min-height: calc(100vh - 95px - 60px);
+}
+
+.footer {
+  justify-content: space-between;
+  padding: 2rem 3rem;
+  border-top: 1px solid var(--el-menu-border-color);
+}
 </style>

app/router.options.ts

@@ -16,5 +16,16 @@ export default <RouterConfig>{
       component: () =>
         import("@/pages/Map/MapPage.vue").then((r) => r.default || r),
     },
+    {
+      name: "blog",
+      path: "/blog",
+      component: () => import("@/pages/Blog/BlogPage.vue"),
+    },
+    {
+      name: "article",
+      path: "/blog/:id",
+      component: () =>
+        import("@/pages/Article/ArticlePage.vue").then((r) => r.default || r),
+    },
   ],
 };

assets/articles/articles.json

@@ -0,0 +1,25 @@
+{
+  "articles": [
+    {
+      "title": "Influence of air polution",
+      "id": "3410949",
+      "author": "Leonid Shvab",
+      "description": [
+        "The warming rate of our planet has significantly increased in recent years due to atmospheric emissions. Humanity knows about 8 ice ages on Earth, which were bly influenced by the Earth's orbital variations.",
+        "However, the current warming is due to human activities. This warming is about 10 times faster than the warming after the first ice age. Our emissions into the atmosphere create a greenhouse effect. Here’s how it works: sunlight passes through the atmosphere, clouds, and our emissions, heating the atmosphere. When the sunlight reflects off the Earth's surface, this energy goes back into space. Therefore, the more emissions in the atmosphere, the more heat our planet absorbs.",
+        "Such climate change has a major impact on humanity. The precipitation patterns will change, sea levels will rise, weather will become more extreme (hurricanes, extreme heat), and entire countries or large areas of densely populated countries could be at risk of flooding.",
+        "Let's investigate basic <strong>greenhouse gasses</strong>:",
+        "<ul><li><b>Methane</b> (CH4): <b>Impact</b>: Methane is a potent greenhouse gas, about 25 times more effective at trapping heat in the atmosphere than CO2 over a 100-year period. <b>Sources</b>: It is emitted during the production and transport of coal, oil, and natural gas, as well as from livestock and other agricultural practices, and by the decay of organic waste in landfills.</li><li><b>Carbon dioxide</b> (CO2): <b>Impact</b> : CO2 is the primary greenhouse gas emitted through human activities, mainly from burning fossil fuels for energy and transportation. It is the largest contributor to climate change. <b>Sources</b>: Fossil fuel combustion, deforestation, and industrial processes.</li><li><b>Greenhouse Gases</b> (GHGs): <b>Impact</b>: GHGs trap heat in the atmosphere, leading to global warming and climate change. They include CO2, CH4, N2O, HFCs, PFCs, and SF6. <b>Sources</b>: Various human activities like industrial processes, agriculture, and energy production.</li><li><b>Hydrofluorocarbons</b> (HFCs): <b>Impact</b>: HFCs are synthetic gases used in refrigeration and air conditioning. They have a high global warming potential (GWP), much higher than CO2. <b>Sources</b>: Leakage and disposal of equipment containing HFCs.</li><li><b>Nitrous oxide</b> (N2O): <b>Impact</b>: N2O is a powerful greenhouse gas with a GWP about 298 times that of CO2 over 100 years. It also contributes to the depletion of the ozone layer. <b>Sources</b>: Agricultural activities, fossil fuel combustion, and industrial processes.</li><li><b>Perfluorocarbons</b> (PFCs): <b>Impact</b>: PFCs are very potent greenhouse gases with a long atmospheric lifetime. They have a very high GWP. <b>Sources</b>: Industrial processes, primarily aluminum production and semiconductor manufacturing.</li><li><b>Sulphur hexafluoride</b> (SF6): <b>Impact</b>: SF6 is an extremely potent greenhouse gas with a GWP of 23,500 times that of CO2. It has a very long atmospheric lifetime. <b>Sources</b>: Used as an insulating gas in electrical equipment.</li></ul>",
+        "Sources:",
+        "<a href='https://science.nasa.gov/climate-change/evidence/'>NASA - climate-change evidence</a>",
+        "<a href='https://science.nasa.gov/climate-change/causes/'>NASA - climate-change causes</a>",
+        "<a href='https://science.nasa.gov/climate-change/effects/'>NASA - climate-change effects</a>",
+        "<a href='https://uk-ua.topographic-map.com/map/'>Map - elevation of the land above sea level</a>"
+      ],
+      "imgSrc": "/airPollutionAnime.webp",
+      "imgAlt": "Influence of air polution",
+      "timeRead": "5 min read",
+      "date": "2024-06-24T19:00:28.971Z"
+    }
+  ]
+}

assets/styles/main.scss

@@ -13,32 +13,45 @@ a {
 }
 
 h1 {
-  font-size: 40px;
+  font-size: 2.5rem;
 
   @include tablet-lower {
-    font-size: 32px;
+    font-size: 1.7rem;
+  }
+
+  @include phone-lower {
+    font-size: 1.5rem;
   }
 }
 
 h2,
 h2 span {
-  font-size: 32px;
+  font-size: 2rem;
 
   @include tablet-lower {
-    font-size: 3rem;
+    font-size: 1.7rem;
+  }
+
+  @include phone-lower {
+    font-size: 1.3rem;
   }
 }
 
 h3 {
   font-size: 3rem;
 
   @include tablet-lower {
+    font-size: 2.3rem;
+  }
+
+  @include phone-lower {
     font-size: 2rem;
   }
 }
 
-p {
-  font-size: 20px;
+p,
+li {
+  font-size: 1.25rem;
   line-height: 30px;
 }
 
@@ -169,6 +182,9 @@ body {
 .p-b-3 {
   padding-bottom: 3rem;
 }
+.p-b-4 {
+  padding-bottom: 4rem;
+}
 
 .p-t-1 {
   padding-top: 1rem;

components/VFooter.vue

@@ -0,0 +1,107 @@
+<template>
+  <p class="footer__contacts d-flex gap-2">
+    <a
+      class="footer__link"
+      href="https://github.com/LeonidShv/un-environment"
+      target="_blank"
+      aria-label="visit a Github open source project, un-environment"
+    >
+      <svg
+        class="footer__icon"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        x="0px"
+        y="0px"
+        viewBox="0 0 512 512"
+        style="enable-background: new 0 0 512 512"
+        xml:space="preserve"
+      >
+        <g>
+          <g>
+            <path
+              d="M255.968,5.329C114.624,5.329,0,120.401,0,262.353c0,113.536,73.344,209.856,175.104,243.872
+                                    c12.8,2.368,17.472-5.568,17.472-12.384c0-6.112-0.224-22.272-0.352-43.712c-71.2,15.52-86.24-34.464-86.24-34.464
+                                    c-11.616-29.696-28.416-37.6-28.416-37.6c-23.264-15.936,1.728-15.616,1.728-15.616c25.696,1.824,39.2,26.496,39.2,26.496
+                                    c22.848,39.264,59.936,27.936,74.528,21.344c2.304-16.608,8.928-27.936,16.256-34.368
+                                    c-56.832-6.496-116.608-28.544-116.608-127.008c0-28.064,9.984-51.008,26.368-68.992c-2.656-6.496-11.424-32.64,2.496-68
+                                    c0,0,21.504-6.912,70.4,26.336c20.416-5.696,42.304-8.544,64.096-8.64c21.728,0.128,43.648,2.944,64.096,8.672
+                                    c48.864-33.248,70.336-26.336,70.336-26.336c13.952,35.392,5.184,61.504,2.56,68c16.416,17.984,26.304,40.928,26.304,68.992
+                                    c0,98.72-59.84,120.448-116.864,126.816c9.184,7.936,17.376,23.616,17.376,47.584c0,34.368-0.32,62.08-0.32,70.496
+                                    c0,6.88,4.608,14.88,17.6,12.352C438.72,472.145,512,375.857,512,262.353C512,120.401,397.376,5.329,255.968,5.329z"
+            ></path>
+          </g>
+        </g>
+      </svg>
+    </a>
+
+    <a
+      class="footer__link"
+      href="https://www.linkedin.com/in/leonid-shvab-a2a32b1a7/"
+      target="_blank"
+      aria-label="visit a Linkedin of Leonid Shvab"
+    >
+      <svg
+        class="footer__icon"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z"
+        ></path>
+      </svg>
+    </a>
+
+    <a
+      class="footer__link"
+      href="https://x.com/LeonidShvab"
+      target="_blank"
+      aria-label="visit a twitter (x) of Leonid Shvab"
+    >
+      <svg
+        class="footer__icon"
+        xmlns="http://www.w3.org/2000/svg"
+        width="1200"
+        height="1227"
+        viewBox="0 0 1200 1227"
+        fill="none"
+      >
+        <g clip-path="url(#clip0_1_2)">
+          <path
+            d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_1_2">
+            <rect width="1200" height="1227" fill="white" />
+          </clipPath>
+        </defs>
+      </svg>
+    </a>
+  </p>
+
+  <p class="footer__date">2024</p>
+</template>
+
+<style lang="scss">
+.footer {
+  &__icon {
+    width: 1.5rem;
+    height: 1.5rem;
+    fill: var(--el-color-primary);
+  }
+
+  &__link {
+    display: flex;
+    align-items: center;
+  }
+
+  &__date {
+    font-weight: bold;
+    color: var(--el-color-primary);
+  }
+}
+</style>

components/VNavigation.vue

@@ -25,6 +25,8 @@ withDefaults(defineProps<Props>(), {
 
 <style lang="scss" scoped>
 .navigation {
+  width: 100%;
+
   :deep(.el-menu-item) {
     padding: 0;
   }

nuxt.config.ts

@@ -1,9 +1,11 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
-  modules: ["@element-plus/nuxt", "@pinia/nuxt"],
-  // eslint: {
-  // },
+  modules: ["@element-plus/nuxt", "@pinia/nuxt", "@nuxt/image-edge"],
+  app: {
+    baseURL: "/un-environment/", // baseURL: '/<repository>/'
+    buildAssetsDir: "assets", // don't use "_" at the begining of the folder name to avoids nojkill conflict
+  },
   vite: {
     css: {
       preprocessorOptions: {