Fix jobs

content/page/careers/careers.md

@@ -4,6 +4,6 @@ metaTitle: ThreeFold | Join Us
 metaDesc: ''
 metaImg: ''
 header: join_us
-pricing_plansMain: positions
+jobsMain: positions
-pricingPlans: [plan1, plan2, plan3, plan4, plan5, plan6, plan7, plan8]
+jobs: [plan1, plan2, plan3, plan4, plan5, plan6, plan7, plan8]
 ---

content/page/careers/job/tech_community_manager/tech_community_manager.md

@@ -1,21 +1,11 @@
 ---
 id: tech_community_manager
 title: Technical Community Manager & Team Lead, TFGrid 3.0 SDK
-button: ''
-link: ''
-button2: ''
-link2: ''
-button3: ''
-link3: ''
-button4: ''
-link4: ''
 ---
 
-# Technical Community Manager & Team Lead, TFGrid 3.0 SDK
-
 We are looking for a **Technical Community Manager & Team Lead** to help our community grow.
 
-## Job Description
+### Job Description
 
 - Be a Team Lead for x nr of other community managers, help them to be effective and grow in their human and technical skills.
 - Motivate your global team of contributors to spread the word and achieve our goals.
@@ -24,7 +14,7 @@ We are looking for a **Technical Community Manager & Team Lead** to help our com
 - Organize video conference meetings as well as Virtual Reality meetings (we have our own tools running on the TFGrid).
 - Create example scripts and example solutions, be able to train people on the creations you have made.
 
-## Requirements
+### Requirements
 
 - Technical skills:
   - Fluent in at least 2 development languages
@@ -40,12 +30,12 @@ We are looking for a **Technical Community Manager & Team Lead** to help our com
   - Be at least level 'wolf' in [the skill levels we use, we look at them in a different way](https://threefold.io/info/threefold#/threefold__p2p_awareness_level).
 
 
-## Remuneration
+### Remuneration
 
 - Work for our company in Dubai remotely
 - Paid in TFT and BTC (or other digital currency of choice)
 
-## More Info
+### More Info
 
 - [Technology](https://threefold.io/info/threefold#/internet4__technology)
 

content/page/careers/jobs/plan_1/plan1.md

@@ -4,7 +4,7 @@ title: Technical Community Manager
 price: ''
 duration: ''
 button: See Position
-link: /tech_community_manager
+link: /careers/tech_community_manager
 includeTitle: '' #Must Have
 options: ''
 ---

content/page/careers/tech_community_manager/tech_community_manager.md

@@ -1,4 +0,0 @@
----
-id: tech_community_manager
-cta: tech_community_manager
----

gridsome.config.js

@@ -315,6 +315,22 @@ module.exports = {
             }
         },
 
+        {
+            use: '@gridsome/source-filesystem',
+            options: {
+                typeName: 'Jobs',
+                path: './content/page/careers/jobs/**/*.md',
+            }
+        },
+
+        {
+            use: '@gridsome/source-filesystem',
+            options: {
+                typeName: 'JobsMain',
+                path: './content/page/**/jobs/main/*.md',
+            }
+        },
+
         {
             use: '@gridsome/source-filesystem',
             options: {
@@ -354,6 +370,7 @@ module.exports = {
                     roadmap: 'Roadmap',
                     pricing_plansMain: 'PricingPlans',
                     pricingPlans: 'PricingPlans',
+                    jobsMain: 'JobsMain',
                     plans: 'Plans',
                     inTheNews: 'InTheNews',
                     brandPanel: 'BrandPanel',
@@ -366,7 +383,8 @@ module.exports = {
                     blogs: 'Blogs',
                     BlogsMain: "BlogsMain",
                     faqMain: 'FAQMain',
-                    faqContent: 'FAQContent'
+                    faqContent: 'FAQContent',
+                    jobs: 'Jobs'
                 }
             }
         },
@@ -405,6 +423,14 @@ module.exports = {
                 },
             }
         },
+
+        {
+            use: '@gridsome/source-filesystem',
+            options: {
+                typeName: 'Job',
+                path: './content/page/careers/job/**/*.md',
+            }
+        },
         {
             use: '@gridsome/source-filesystem',
             options: {
@@ -544,6 +570,10 @@ module.exports = {
             path: '/partners/:id',
             component: '~/templates/Project.vue'
         }],
+        Job: [{
+            path: '/careers/:id',
+            component: '~/templates/Job.vue'
+        }],
     },
 
     transformers: {

src/components/marketing/sections/pricing/four_tiers_with_toggle.vue

@@ -1,9 +1,15 @@
 <template>
   <div class="bg-white">
     <div class="max-w-screen-xl mx-auto py-24 px-4 sm:px-6 lg:px-8">
-      <div class="sm:flex sm:flex-col sm:align-center">
+      <div class="sm:flex sm:flex-col sm:align-center" v-if="main">
         <h1
-          class="text-5xl leading-none font-extrabold text-gray-900 sm:text-center"
+          class="
+            text-5xl
+            leading-none
+            font-extrabold
+            text-gray-900
+            sm:text-center
+          "
         >
           {{ main.title }}
         </h1>
@@ -28,12 +34,29 @@
         </div> -->
       </div>
       <div
-        class="mt-12 space-y-4 sm:mt-16 sm:space-y-0 sm:grid sm:grid-cols-2 sm:gap-6 lg:max-w-4xl lg:mx-auto xl:max-w-none xl:mx-0 xl:grid-cols-4"
+        class="
+          mt-12
+          space-y-4
+          sm:mt-16
+          sm:space-y-0
+          sm:grid sm:grid-cols-2
+          sm:gap-6
+          lg:max-w-4xl
+          lg:mx-auto
+          xl:max-w-none
+          xl:mx-0
+          xl:grid-cols-4
+        "
       >
         <div
           v-for="(plan, index) in pricingPlans"
           :key="index"
-          class="border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200"
+          class="
+            border border-gray-200
+            rounded-lg
+            shadow-sm
+            divide-y divide-gray-200
+          "
         >
           <div class="p-6">
             <h2 class="text-lg leading-6 font-medium text-gray-900">
@@ -53,43 +76,66 @@
             <g-link
               type="button"
               :to="plan.link"
-              class="mt-8 w-full text-center bg-gray-800 border border-gray-800 rounded-md py-2 text-sm leading-5 font-semibold text-white hover:bg-gray-700 focus:outline-none focus:shadow-outline-gray transition duration-150 ease-in-out"
+              class="
+                mt-8
+                w-full
+                text-center
+                bg-gray-800
+                border border-gray-800
+                rounded-md
+                py-2
+                text-sm
+                leading-5
+                font-semibold
+                text-white
+                hover:bg-gray-700
+                focus:outline-none
+                focus:shadow-outline-gray
+                transition
+                duration-150
+                ease-in-out
+              "
             >
               {{ plan.button }}
             </g-link>
           </div>
           <!-- <div class="pt-6 pb-8 px-6"> -->
-            <h3
+          <h3
-              class="text-xs leading-4 font-medium text-gray-900 tracking-wide uppercase"
+            v-if="plan.includeTitle"
+            class="
+              text-xs
+              leading-4
+              font-medium
+              text-gray-900
+              tracking-wide
+              uppercase
+            "
+          >
+            {{ plan.includeTitle }}
+          </h3>
+          <ul class="mt-6 space-y-4" v-if="plan.options.length > 0">
+            <li
+              class="flex space-x-3"
+              v-for="option in plan.options"
+              :key="option.id"
             >
-              {{ plan.includeTitle }}
+              <!-- Heroicon name: check -->
-            </h3>
+              <svg
-            <ul class="mt-6 space-y-4">
+                class="flex-shrink-0 h-5 w-5 text-green-500"
-              <li
+                aria-hidden="true"
-                class="flex space-x-3"
+                xmlns="http://www.w3.org/2000/svg"
-                v-for="option in plan.options"
+                viewBox="0 0 20 20"
-                :key="option.id"
+                fill="currentColor"
               >
-                <!-- Heroicon name: check -->
+                <path
-                <svg
+                  fill-rule="evenodd"
-                  class="flex-shrink-0 h-5 w-5 text-green-500"
+                  d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                  aria-hidden="true"
+                  clip-rule="evenodd"
-                  xmlns="http://www.w3.org/2000/svg"
+                />
-                  viewBox="0 0 20 20"
+              </svg>
-                  fill="currentColor"
+              <span class="text-sm leading-5 text-gray-500">{{ option }}</span>
-                >
+            </li>
-                  <path
+          </ul>
-                    fill-rule="evenodd"
-                    d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                    clip-rule="evenodd"
-                  />
-                </svg>
-                <span class="text-sm leading-5 text-gray-500">{{
-                  option
-                }}</span>
-              </li>
-            </ul>
-          </div> 
         </div>
       </div>
     </div>

src/templates/Job.vue

@@ -0,0 +1,46 @@
+<template>
+  <Layout :hideHeader="true" :disableScroll="true">
+    <div
+      class="container sm:pxi-0 mx-auto min-h-screen overflow-x-hidden pt-24"
+    >
+      <div class="flex flex-row flex-wrap items-center mx-4 sm:mx-0">
+        <div class="w-full md:w-5/6 md:pl-8 lg:pl-0">
+          <h1 class="pb-0 mb-0 mt-0 text-4xl font-bold">
+            {{ $page.job.title }}
+          </h1>
+        </div>
+      </div>
+      <section
+        class="post-content container mx-auto relative font-serif text-gray-700"
+      >
+        <div class="post-content-text text-lg" v-html="$page.job.content"></div>
+      </section>
+    </div>
+  </Layout>
+</template>
+
+<page-query>
+  query($id: ID!) {
+    job(id: $id) {
+        id
+        title
+        content
+      }
+    }
+</page-query>
+
+<script>
+export default {
+  metaInfo() {
+    return {
+      title: this.$page.job.title,
+    };
+  },
+};
+</script>
+
+<style scoped>
+h3 {
+  font-family: "Roboto", sans-serif;
+}
+</style>

src/templates/MarkdownPage.vue

@@ -134,11 +134,11 @@
         v-if="$page.markdownPage.logos.length > 0"
         :logos="$page.markdownPage.logos"
       />
-      
+
       <FourTiersWithToggle
-        v-if="$page.markdownPage.pricingPlans.length > 0"
+        v-if="$page.markdownPage.jobs.length > 0"
-        :main="$page.markdownPage.pricing_plansMain"
+        :pricingPlans="$page.markdownPage.jobs"
-        :pricingPlans="$page.markdownPage.pricingPlans"
+        :main="$page.markdownPage.jobsMain"
       />
 
       <GetInTouch
@@ -317,14 +317,14 @@
           question
           content
       }
-      pricing_plansMain{
+      jobsMain{
           id
           title
           button1
           button2
           excerpt
       }
-      pricingPlans{
+      jobs{
           id
           title
           excerpt