integrate contentful-wizard with example app

Bloomca · Feb 5, 2018 · f493288 · f493288
1 parent bccdb86
commit f493288
Show file tree

Hide file tree

Showing 9 changed files with 124 additions and 94 deletions.
diff --git a/views/course.pug b/views/course.pug
@@ -3,6 +3,7 @@ extends layout
 include mixins/_breadcrumb
 include mixins/_editorialFeatures
 include mixins/_lesson
+include mixins/_ctfl
 
 block content
   .layout-no-sidebar
@@ -18,8 +19,9 @@ block content
               a.table-of-contents__link(href=`/courses/${course.fields.slug}${queryString}` class=(currentPath.endsWith(course.fields.slug) ? 'active' : '') class=(visitedLessons.includes(course.sys.id) ? 'visited' : '')) #{translate('courseOverviewLabel', currentLocale.code)}
             each l in course.fields.lessons
               if l.fields
-                .table-of-contents__item
-                  a.table-of-contents__link(href=`/courses/${course.fields.slug}/lessons/${l.fields.slug}${queryString}` class=(currentPath.endsWith(l.fields.slug) ? 'active' : '') class=(visitedLessons.includes(l.sys.id) ? 'visited' : '')) #{l.fields.title}
+                +tooltip(l)
+                  .table-of-contents__item
+                    a.table-of-contents__link(href=`/courses/${course.fields.slug}/lessons/${l.fields.slug}${queryString}` class=(currentPath.endsWith(l.fields.slug) ? 'active' : '') class=(visitedLessons.includes(l.sys.id) ? 'visited' : '')) #{l.fields.title}
     section.layout-sidebar__content
       if lesson
         +lesson(lesson, course, nextLesson)

diff --git a/views/courses.pug b/views/courses.pug
@@ -2,6 +2,7 @@ extends layout
 
 include mixins/_breadcrumb
 include mixins/_courseCard
+include mixins/_ctfl
 
 block content
   .layout-no-sidebar
@@ -17,7 +18,8 @@ block content
               a.sidebar-menu__link(href=`/courses${queryString}` class=(currentPath.endsWith('/courses') ? 'active' : '')) #{translate('allCoursesLabel', currentLocale.code)}
             each category in categories
               li.sidebar-menu__item
-                a.sidebar-menu__link(href=`/courses/categories/${category.fields.slug}${queryString}` class=(currentPath.endsWith(category.fields.slug) ? 'active' : '')) #{category.fields.title}
+                +tooltip(category)
+                  a.sidebar-menu__link(href=`/courses/categories/${category.fields.slug}${queryString}` class=(currentPath.endsWith(category.fields.slug) ? 'active' : '')) #{category.fields.title}
     section.layout-sidebar__content
       .courses
         h1= title

diff --git a/views/layout.pug b/views/layout.pug
@@ -193,6 +193,14 @@ html
             use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/icons.svg#cross")
 
   script(src='/scripts/index.js')
+  script(src='/scripts/contentful-wizard.js')
+  script.
+    CTFLWizard.init({
+        spaceId: 'qz0n5cdakyl9',
+        key: '580d5944194846b690dd89b630a1cb98a0eef6a19b860ef71efc37ee8076ddb8' // your API key
+      });
+
+
 
   if process.env.TRACKING
     include ./tracking.pug
diff --git a/views/mixins/_courseCard.pug b/views/mixins/_courseCard.pug
@@ -1,16 +1,19 @@
 include _entryState
+include _ctfl
 
 mixin courseCard(course = {fields: {title: '', description: '', categories: [], slug: ''}})
-  .course-card
-    .course-card__categories
-      if(course.fields.categories)
-        each category in course.fields.categories
-          .course-card__category
-            a.course-card__category-link(href=`/courses/categories/${category.fields.slug}${queryString}`) #{category.fields.title}
-    h2.course-card__title
-      a(href=`/courses/${course.fields.slug}${queryString}`)= course.fields.title
-      if currentApi.id === 'cpa' && (course.draft || course.pendingChanges)
-        +entryState(course)
-    p.course-card__description= course.fields.shortDescription
-    .course-card__link-wrapper
-      a.course-card__link(href=`/courses/${course.fields.slug}${queryString}`) #{translate("viewCourseLabel", currentLocale.code)}
+  +tooltip(course)
+    .course-card
+      .course-card__categories
+        if(course.fields.categories)
+          each category in course.fields.categories
+            +tooltip(category)
+              .course-card__category
+                a.course-card__category-link(href=`/courses/categories/${category.fields.slug}${queryString}`) #{category.fields.title}
+      h2.course-card__title
+        a(href=`/courses/${course.fields.slug}${queryString}`)= course.fields.title
+        if currentApi.id === 'cpa' && (course.draft || course.pendingChanges)
+          +entryState(course)
+      p.course-card__description= course.fields.shortDescription
+      .course-card__link-wrapper
+        a.course-card__link(href=`/courses/${course.fields.slug}${queryString}`) #{translate("viewCourseLabel", currentLocale.code)}
diff --git a/views/mixins/_ctfl.pug b/views/mixins/_ctfl.pug
@@ -0,0 +1,3 @@
+mixin tooltip(entry)
+  div(data-ctfl-content-type=entry.sys.contentType.sys.id, data-ctfl-entry=entry.sys.id)
+    block
diff --git a/views/mixins/_lessonModuleCodeSnippet.pug b/views/mixins/_lessonModuleCodeSnippet.pug
@@ -1,59 +1,62 @@
+include _ctfl
+
 mixin lessonModuleCodeSnippet(module)
-  .lesson-module.lesson-module-code
-    .lesson-module-code__header
-      if module.fields.curl
-        a.lesson-module-code__trigger(data-target='curl') cURL
-      if module.fields.dotNet
-        a.lesson-module-code__trigger(data-target='dotnet') .NET
-      if module.fields.javascript
-        a.lesson-module-code__trigger.lesson-module-code__trigger--active(data-target='javascript') JavaScript
-      if module.fields.java
-        a.lesson-module-code__trigger(data-target='java') Java
-      if module.fields.javaAndroid
-        a.lesson-module-code__trigger(data-target='android') Android
-      if module.fields.php
-        a.lesson-module-code__trigger(data-target='php') PHP
-      if module.fields.python
-        a.lesson-module-code__trigger(data-target='python') Python
-      if module.fields.ruby
-        a.lesson-module-code__trigger(data-target='ruby') Ruby
-      if module.fields.swift
-        a.lesson-module-code__trigger(data-target='swift') Swift
+  +tooltip(module)
+    .lesson-module.lesson-module-code
+      .lesson-module-code__header
+        if module.fields.curl
+          a.lesson-module-code__trigger(data-target='curl') cURL
+        if module.fields.dotNet
+          a.lesson-module-code__trigger(data-target='dotnet') .NET
+        if module.fields.javascript
+          a.lesson-module-code__trigger.lesson-module-code__trigger--active(data-target='javascript') JavaScript
+        if module.fields.java
+          a.lesson-module-code__trigger(data-target='java') Java
+        if module.fields.javaAndroid
+          a.lesson-module-code__trigger(data-target='android') Android
+        if module.fields.php
+          a.lesson-module-code__trigger(data-target='php') PHP
+        if module.fields.python
+          a.lesson-module-code__trigger(data-target='python') Python
+        if module.fields.ruby
+          a.lesson-module-code__trigger(data-target='ruby') Ruby
+        if module.fields.swift
+          a.lesson-module-code__trigger(data-target='swift') Swift
 
-    .lesson-module-code__code-area
-      if module.fields.curl
-        .lesson-module-code__code(id='curl')
-          pre
-            code.shell= module.fields.curl
-      if module.fields.dotNet
-        .lesson-module-code__code(id='dotnet')
-          pre
-            code.csharp= module.fields.dotNet
-      if module.fields.javascript
-        .lesson-module-code__code.lesson-module-code__code--active(id='javascript')
-          pre
-            code.javascript= module.fields.javascript
-      if module.fields.java
-        .lesson-module-code__code(id='java')
-          pre
-            code.java= module.fields.java
-      if module.fields.javaAndroid
-        .lesson-module-code__code(id='android')
-          pre
-            code.java= module.fields.javaAndroid
-      if module.fields.php
-        .lesson-module-code__code(id='php')
-          pre
-            code.php= module.fields.php
-      if module.fields.python
-        .lesson-module-code__code(id='python')
-          pre
-            code.python= module.fields.python
-      if module.fields.ruby
-        .lesson-module-code__code(id='ruby')
-          pre
-            code.ruby= module.fields.ruby
-      if module.fields.swift
-        .lesson-module-code__code(id='swift')
-          pre
-            code.swift= module.fields.swift
+      .lesson-module-code__code-area
+        if module.fields.curl
+          .lesson-module-code__code(id='curl')
+            pre
+              code.shell= module.fields.curl
+        if module.fields.dotNet
+          .lesson-module-code__code(id='dotnet')
+            pre
+              code.csharp= module.fields.dotNet
+        if module.fields.javascript
+          .lesson-module-code__code.lesson-module-code__code--active(id='javascript')
+            pre
+              code.javascript= module.fields.javascript
+        if module.fields.java
+          .lesson-module-code__code(id='java')
+            pre
+              code.java= module.fields.java
+        if module.fields.javaAndroid
+          .lesson-module-code__code(id='android')
+            pre
+              code.java= module.fields.javaAndroid
+        if module.fields.php
+          .lesson-module-code__code(id='php')
+            pre
+              code.php= module.fields.php
+        if module.fields.python
+          .lesson-module-code__code(id='python')
+            pre
+              code.python= module.fields.python
+        if module.fields.ruby
+          .lesson-module-code__code(id='ruby')
+            pre
+              code.ruby= module.fields.ruby
+        if module.fields.swift
+          .lesson-module-code__code(id='swift')
+            pre
+              code.swift= module.fields.swift
diff --git a/views/mixins/_lessonModuleCopy.pug b/views/mixins/_lessonModuleCopy.pug
@@ -1,3 +1,6 @@
+include _ctfl
+
 mixin lessonModuleCopy(module)
-  .lesson-module.lesson-module-copy
-    .lesson-module-copy__copy !{helpers.markdown(module.fields.copy)}
+  +tooltip(module)
+    .lesson-module.lesson-module-copy
+      .lesson-module-copy__copy !{helpers.markdown(module.fields.copy)}
diff --git a/views/mixins/_moduleHeroImage.pug b/views/mixins/_moduleHeroImage.pug
@@ -1,6 +1,9 @@
+include _ctfl
+
 mixin moduleHeroImage(module)
-  .module.module-hero-image
-    .module-hero-image__wrapper
-      .module-hero-image__headline-wrapper
-        h2.module-hero-image__headline #{module.fields.headline}
-      img.module-hero-image__image(src=`${module.fields.backgroundImage.fields.file.url}` alt=`${module.fields.backgroundImage.fields.title}`)
+  +tooltip(module)
+    .module.module-hero-image
+      .module-hero-image__wrapper
+        .module-hero-image__headline-wrapper
+          h2.module-hero-image__headline #{module.fields.headline}
+        img.module-hero-image__image(src=`${module.fields.backgroundImage.fields.file.url}` alt=`${module.fields.backgroundImage.fields.title}`)
diff --git a/views/mixins/_moduleHighlightedCourse.pug b/views/mixins/_moduleHighlightedCourse.pug
@@ -1,17 +1,20 @@
 include ./_courseCard
+include _ctfl
 
 mixin moduleHighlightedCourse(module, course)
-  .module.module-highlighted-course
-    .module-highlighted-course__wrapper(style=`background-image: url(${course.fields.image.fields.file.url});`)
-      .module-highlighted-course__overlay
-      .module-highlighted-course__content
-        if(course.fields.categories)
-          .module-highlighted-course__categories
-            each category in course.fields.categories
-              a.module-highlighted-course__category(href=`/courses/categories/${category.fields.slug}${queryString}`) #{category.fields.title}
-        h2.module-highlighted-course__title
-          a(href=`/courses/${course.fields.slug}${queryString}`)= course.fields.title
-        .module-highlighted-course__description-wrapper
-          p !{helpers.markdown(course.fields.shortDescription)}
-        .module-highlighted-course__link-wrapper
-          a.module-highlighted-course__link(href=`/courses/${course.fields.slug}${queryString}`) #{translate('viewCourseLabel', currentLocale.code)}
+  +tooltip(course)
+    .module.module-highlighted-course
+      .module-highlighted-course__wrapper(style=`background-image: url(${course.fields.image.fields.file.url});`)
+        .module-highlighted-course__overlay
+        .module-highlighted-course__content
+          if(course.fields.categories)
+            .module-highlighted-course__categories
+              each category in course.fields.categories
+                +tooltip(category)
+                  a.module-highlighted-course__category(href=`/courses/categories/${category.fields.slug}${queryString}`) #{category.fields.title}
+          h2.module-highlighted-course__title
+            a(href=`/courses/${course.fields.slug}${queryString}`)= course.fields.title
+          .module-highlighted-course__description-wrapper
+            p !{helpers.markdown(course.fields.shortDescription)}
+          .module-highlighted-course__link-wrapper
+            a.module-highlighted-course__link(href=`/courses/${course.fields.slug}${queryString}`) #{translate('viewCourseLabel', currentLocale.code)}