feat: Learning platforms

shayaulman · Oct 14, 2020 · 8a8321b · 8a8321b
1 parent 2a539b9
commit 8a8321b
Show file tree

Hide file tree

Showing 17 changed files with 492 additions and 44 deletions.
diff --git a/data/learningPlatforms.js b/data/learningPlatforms.js
@@ -0,0 +1,80 @@
+module.exports = [
+  {
+    name: "Udemy",
+    desc: "Online Courses - Learn Anything, On Your Schedule",
+    link: "https://www.udemy.com/",
+    tags: ["פלטפורמת הלימודים הגדולה בעולם"],
+    color: "#e95252",
+  },
+  {
+    name: "Coursera",
+    desc: "Build Skills with Online Courses from Top Institutions",
+    link: "https://www.coursera.org/",
+    tags: ["חלק מהקורסים בחינם"],
+    color: "#4689c6",
+  },
+  {
+    name: "Codecademy",
+    desc: "Learn to code - for Free",
+    link: "https://www.codecademy.com/",
+    tags: ["חלק מהקורסים בחינם", "לימוד אינטראקטיבי"],
+    color: "#6101e4",
+  },
+  {
+    name: "Khan Academy",
+    desc: "Free Online Courses, Lessons & Practice",
+    link: "https://www.khanacademy.org/",
+    tags: ["בחינם"],
+    color: "#2db08e",
+  },
+  {
+    name: "To Code",
+    desc: "קורסים מקצועיים למפתחים אונליין ובעברית",
+    link: "https://www.tocode.co.il/",
+    tags: ["עברית", "וובינרים"],
+    color: "#ef5816",
+  },
+  {
+    name: "Webmaster",
+    desc: "תיכנות ובניית אתרים",
+    link: "https://webmaster.org.il/",
+    tags: ["עברית"],
+    color: "#e65000",
+  },
+  {
+    name: "המרכז לחינוך סייבר",
+    desc: "המרכז לחינוך סייבר",
+    link: "https://cyber.org.il/",
+    tags: ["עברית", "קורסים מקוונים", "ספרים דיגטליים"],
+    color: "#2b9cc6",
+  },
+  {
+    name: "Udacity",
+    desc: "Learn the Latest Tech Skills; Advance Your Career",
+    link: "https://www.udacity.com/",
+    tags: [],
+    color: "#01b3e4",
+  },
+  {
+    name: "Edx",
+    desc: "Free Online Courses by Harvard, MIT, & more",
+    link: "https://www.edx.org/",
+    tags: ["בחינם"],
+    color: "#b72667",
+  },
+  {
+    name: "Myco",
+    desc: "פיתוח ותכנות",
+    link:
+      "https://www.myco.co.il/category/Developing-and-Programming-Category/",
+    tags: ["עברית"],
+    color: "#f1582c",
+  },
+  {
+    name: "",
+    desc: "",
+    link: "",
+    tags: [],
+    color: "#",
+  },
+];
diff --git a/gridsome.server.js b/gridsome.server.js
@@ -4,6 +4,7 @@ const videoTutorials = require("./data/videoTutorials");
 const redditChannels = require("./data/redditChannels");
 const podcasts = require("./data/podcasts");
 const blogs = require("./data/blogs");
+const learningPlatforms = require("./data/learningPlatforms");
 
 let id_list = videoTutorials.map((tech) =>
   tech.videoTutorials.map((video) => video.url)
@@ -81,6 +82,18 @@ module.exports = function(api) {
       });
     });
 
+    const LearningPlatforms = actions.addCollection("LearningPlatform");
+    learningPlatforms.forEach((platform) => {
+      LearningPlatforms.addNode({
+        name: platform.name,
+        desc: platform.desc,
+        link: platform.link,
+        tags: platform.tags,
+        isHebrew: platform.isHebrew || false,
+        color: platform.color,
+      });
+    });
+
     const Categories = actions.addCollection("Category");
     videoTutorials.forEach((category) => {
       Categories.addNode({

diff --git a/src/assets/global.scss b/src/assets/global.scss
@@ -23,18 +23,20 @@ h1 {}
   --bg-primary-2: #262d36;
   --bg-card: #191c23;
   --bg-card-2: #282e39;
+  --bg-card-3: #3a4252;
   --bg-3: #58595a;
   --text-primary: white;
   --text-secondary: #cbd5e0;
   --text-3: #cbd5e0;
-  --gray-1: #60718a;
+  --gray-1: #9fb0ca;
 }
 
 .theme-light {
   --bg-primary: white;
   --bg-primary-2: rgb(222, 218, 238);
   --bg-card: #edf2f7;
   --bg-card-2: #d8dde4;
+  --bg-card-3: #b5c1d1;
   --bg-3: #d8dde4;
   --text-primary: black;
   --text-secondary: #2d3748;

diff --git a/src/components/AppFooter.vue b/src/components/AppFooter.vue
@@ -1,15 +1,20 @@
 <template>
   <section class="ltr py-4 w-full absolute bottom-0 flex justify-around">
-    <p class="text-sm text-custom-text-primary font-thin">
+    <p class="text-xs text-custom-text-secondary font-thin">
       <a
         href="mailto:shayaulman@gmail.com"
-        class="text-sm font-thin hover:text-custom-brand transform transition duration-300"
-      >Shaya Ulman</a>
+        class="font-thin hover:text-custom-brand transform transition duration-300"
+        >Shaya Ulman</a
+      >
       &copy; 2020
     </p>
-    <a href="https://github.com/shayaulman/kosher-code" target="_blank" class="h-6 w-6">
+    <a
+      href="https://github.com/shayaulman/kosher-code"
+      target="_blank"
+      class="h-6 w-6"
+    >
       <app-icon
-        class="fill-current text-custom-text-primary hover:text-custom-brand transform transition duration-300"
+        class="fill-current text-custom-text-secondary hover:text-custom-brand transform transition duration-300"
         :icon="'github'"
       />
     </a>

diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
@@ -33,6 +33,7 @@ export default {
         { item: "בלוגים", link: "/blogs" },
         { item: "פודקאסטים", link: "/podcasts" },
         { item: "Reddit", link: "/reddit" },
+        { item: "לימודים", link: "/learning-platforms" },
         {
           item: "אודות",
           link:

diff --git a/src/components/LearningPlatformCard.vue b/src/components/LearningPlatformCard.vue
@@ -0,0 +1,77 @@
+<template>
+  <g-link
+    :to="link"
+    :style="`border-top: 3px solid ${color}`"
+    class="m-4 w-84 h-48 flex justify-center bg-custom-bg-card-2 rounded-md transform hover:-translate-y-1 ease-in duration-100"
+  >
+    <div class="py-2 px-4 w-full flex flex-col justify-between">
+      <div class="h-20">
+        <div
+          :class="{ 'flex-row-reverse': isHebrew(name) }"
+          class="flex justify-center items-center"
+        >
+          <img
+            :src="`https://www.google.com/s2/favicons?domain=${link}`"
+            alt="Platform logo"
+            class="m-1"
+          />
+          <h1
+            :style="`color: ${color}`"
+            class="m-1 text-2xl text-custom-text-primary"
+          >
+            {{ name }}
+          </h1>
+        </div>
+        <p class="px-4 text-center text-xs text-custom-gray-1">{{ desc }}</p>
+      </div>
+
+      <ul class="rtl flex flex-wrap -mx-2 text-xs p-4">
+        <li
+          v-for="tag in tags"
+          :key="tag"
+          class="m-1 px-3 py-1 text-xxs bg-custom-bg-card-3 rounded-full text-custom-gray-1"
+        >
+          {{ tag }}
+        </li>
+      </ul>
+    </div>
+  </g-link>
+</template>
+
+<script>
+import IsraelFlagIcon from "~/components/UI/IsraelFlagIcon";
+export default {
+  name: "LearningPlatformCard",
+  components: { IsraelFlagIcon },
+  props: {
+    name: String,
+    desc: String,
+    link: String,
+    color: String,
+    tags: Array,
+  },
+  computed: {
+    direction() {
+      return this.hebrew ? "rtl" : "ltr";
+    },
+  },
+  methods: {
+    isHebrew(text) {
+      const HEBREW = RegExp("[\u0590-\u05FF]");
+      return HEBREW.test(text);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.bg {
+  background: repeating-linear-gradient(
+    45deg,
+    var(--bg-card-2),
+    var(--bg-card-2) 10px,
+    #03a87c70 10px,
+    #03a87c70 20px
+  );
+}
+</style>
diff --git a/src/components/NavItem.vue b/src/components/NavItem.vue
@@ -6,15 +6,19 @@
         { 'router-link-active': subIsActive('/video-tutorials') },
         { 'text-custom-text-secondary': item === 'אודות' },
       ]"
-      class="mx-3 text-custom-text-primary font-hairline opacity-75 hover:text-custom-brand transition duration-300"
+      class="relative mx-3 text-custom-text-primary font-hairline opacity-75 hover:text-custom-brand transition duration-300"
       :v-smooth-scroll="link === 'video-tutorials'"
-      >{{ item }}</g-link
+    >
+      <new-badge v-if="item === 'לימודים'" />
+      {{ item }}</g-link
     >
   </section>
 </template>
 
 <script>
+import NewBadge from "~/components/UI/NewBadge";
 export default {
+  components: { NewBadge },
   props: {
     item: String,
     link: String,

diff --git a/src/components/PlaylistCard.vue b/src/components/PlaylistCard.vue
@@ -1,17 +1,17 @@
 <template>
   <g-link
-    @mouseenter.native="hover=true"
-    @mouseleave.native="hover=false"
+    @mouseenter.native="hover = true"
+    @mouseleave.native="hover = false"
     :to="`video-tutorials/playlists/${name.replace(' ', '-').toLowerCase()}`"
     class="m-3"
   >
     <section
-      :class="{'elevation-high': hover}"
+      :class="{ 'elevation-high': hover }"
       class="bg-custom-bg-card w-64 rounded overflow-hidden"
     >
       <div class="relative">
         <img
-          style="width:320px ;height:150px"
+          style="width: 320px; height: 150px"
           :src="thumbnail"
           height="90"
           class="rounded-t-md bg-black transition duration-300"
@@ -26,22 +26,32 @@
         </div>-->
       </div>
       <div
-        style="height: 150px;"
+        style="height: 150px"
         class="overlay-top relative px-1 py-3 h-16 w-full z-10 pointer-events-none"
       >
-        <div v-if="isHebrew" class="israel-icon w-10 absolute left-0 z-20 rounded">
-          <israel-flag-icon />
+        <div
+          v-if="isHebrew"
+          class="israel-icon w-10 absolute left-0 z-20 rounded"
+        >
+          <israel-flag-icon class="bg-custom-bg-card" />
         </div>
         <h2
           :class="direction"
           class="p-2 px-3 absolute font-light text-sm text-custom-text-primary Z-40"
-        >{{ hebrewName || name }}</h2>
+        >
+          {{ hebrewName || name }}
+        </h2>
         <div
           :class="amountDirection"
           class="videos-anount mt-4 flex justify-center items-center h-full text-white z-0 opacity-50"
         >
-          <h1 class="z-20 text-3xl text-custom-text-secondary">{{ amountOfVideos }}</h1>
-          <svg class="w-16 fill-current text-custom-text-secondary" viewBox="0 0 24 24">
+          <h1 class="z-20 text-3xl text-custom-text-secondary">
+            {{ amountOfVideos }}
+          </h1>
+          <svg
+            class="w-16 fill-current text-custom-text-secondary"
+            viewBox="0 0 24 24"
+          >
             <g>
               <path
                 d="M3.67 8.67h14V11h-14V8.67zm0-4.67h14v2.33h-14V4zm0 9.33H13v2.34H3.67v-2.34zm11.66 0v7l5.84-3.5-5.84-3.5z"

diff --git a/src/components/UI/BlogIcon.vue b/src/components/UI/BlogIcon.vue
@@ -0,0 +1,60 @@
+<template>
+  <svg
+    height="80"
+    viewBox="0 0 512 512"
+    width="80"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="m512 120v347c0 24.902344-20.097656 45-45 45h-422c-24.902344 0-45-20.097656-45-45v-347l31.199219-30h453.199219zm0 0"
+      fill="#deecf1"
+    />
+    <path
+      d="m512 120v347c0 24.902344-20.097656 45-45 45h-211v-422h228.402344zm0 0"
+      fill="#c6e2e7"
+    />
+    <path
+      d="m512 45v75h-512v-75c0-24.902344 20.097656-45 45-45h422c24.902344 0 45 20.097656 45 45zm0 0"
+      fill="#ec5569"
+    />
+    <path
+      d="m512 45v75h-256v-120h211c24.902344 0 45 20.097656 45 45zm0 0"
+      fill="#e63950"
+    />
+    <g fill="#deecf1">
+      <path
+        d="m89.972656 60c0 8.285156-6.71875 15-15 15-8.285156 0-15-6.714844-15-15s6.714844-15 15-15c8.28125 0 15 6.714844 15 15zm0 0"
+      />
+      <path
+        d="m149.972656 60c0 8.285156-6.71875 15-15 15-8.285156 0-15-6.714844-15-15s6.714844-15 15-15c8.28125 0 15 6.714844 15 15zm0 0"
+      />
+      <path
+        d="m210.972656 60c0 8.285156-6.71875 15-15 15-8.285156 0-15-6.714844-15-15s6.714844-15 15-15c8.28125 0 15 6.714844 15 15zm0 0"
+      />
+    </g>
+    <path
+      d="m437 75h-151c-8.289062 0-15-6.710938-15-15s6.710938-15 15-15h151c8.289062 0 15 6.710938 15 15s-6.710938 15-15 15zm0 0"
+      fill="#c6e2e7"
+    />
+    <path
+      d="m256 452h-181c-8.289062 0-15-6.710938-15-15s6.710938-15 15-15h181c8.289062 0 15 6.710938 15 15s-6.710938 15-15 15zm0 0"
+      fill="#a8d3d8"
+    />
+    <path
+      d="m271 407v30c0 8.402344-6.597656 15-15 15s-15-6.597656-15-15v-30c0-8.402344 6.597656-15 15-15s15 6.597656 15 15zm0 0"
+      fill="#392e6e"
+    />
+    <path
+      d="m271 407v30c0 8.402344-6.597656 15-15 15v-60c8.402344 0 15 6.597656 15 15zm0 0"
+      fill="#463b85"
+    />
+    <path
+      d="m416.601562 185.300781c-3.601562-2.699219-8.101562-3.902343-12.601562-3-32.699219 6.597657-63.398438 21-88 41.101563-26.398438 21.300781-47.101562 48.898437-60 80.699218-9.601562 23.398438-15 49.199219-15 75.898438v27c0 8.402344 6.597656 15 15 15 .902344 0 2.101562 0 3-.300781 20.101562-3.898438 39.300781-11.097657 57-20.699219 19.5-10.5 36.898438-24.300781 52.199219-40.800781 3.601562-3.898438 4.800781-9.597657 3-15l-4.5-13.199219h15.398437c5.402344 0 10.503906-3 13.203125-7.5 17.398438-30.601562 26.699219-65.097656 26.699219-100.5v-27c0-4.5-2.101562-8.699219-5.398438-11.699219zm0 0"
+      fill="#54469d"
+    />
+    <path
+      d="m416.601562 185.300781c3.296876 3 5.398438 7.199219 5.398438 11.699219v27c0 35.402344-9.300781 69.898438-26.699219 100.5-2.699219 4.5-7.800781 7.5-13.199219 7.5h-15.402343l4.5 13.199219c1.800781 5.402343.601562 11.101562-3 15-15.300781 16.5-32.699219 30.300781-52.199219 40.800781-17.699219 9.601562-36.898438 16.800781-57 20.699219-.898438.300781-2.097656.300781-3 .300781v-117.898438c12.898438-31.800781 33.601562-59.402343 60-80.703124 24.601562-20.097657 55.300781-34.5 88-41.097657 4.5-.902343 9 .300781 12.601562 3zm0 0"
+      fill="#463b85"
+    />
+  </svg>
+</template>