add promo blocks (#234)

.vscode/settings.json

@@ -0,0 +1 @@
+{}

preview-src/promos-ad-include.adoc

@@ -0,0 +1,6 @@
+:page-ad-icon: mortarboard
+:page-ad-title: Building Neo4j Applications with .NET
+:page-ad-description: Learn how to build a movie recommendation website using the Neo4j NET Driver.
+:page-ad-link: https://graphacademy.neo4j.com/courses/app-dotnet/?ref=docs-ad-dotnet
+:page-ad-underline-role: button
+:page-ad-underline: Enroll for free

preview-src/promos-include.adoc

@@ -0,0 +1,4 @@
+[.promo.promo-graphacademy]
+====
+Take our free, self-paced courses to learn link:https://graphacademy.neo4j.com/courses/app-typescript/?ref=docs-promo-typescript[how to build type-safe Neo4j applications with TypeScript^] or link:https://graphacademy.neo4j.com/courses/app-nodejs/?ref=docs-promo-typescript[how to build a Neo4j-backed movie recommendation site with Node.js^].
+====

preview-src/promos.adoc

@@ -0,0 +1,52 @@
+= Promo Blocks
+:author: Neo4j
+:category: development
+:tags: community, contributions, share
+include::preview-src/promos-ad-include.adoc[]
+
+
+For an example ad block in the sidebar, look to the right.
+The attributes are set by the `include::` on line 5.
+
+== Some non-graphacademy promo
+
+[.promo]
+====
+This is something worthy to promote but it doesn't have an icon or anything.
+====
+
+== One Liner
+
+[.promo.promo-graphacademy]
+====
+New to Neo4j? Take our free introductory
+link:#[Neo4j Fundamentals course^].
+====
+
+[.promo.promo-graphacademy]
+====
+Learn everything about Graph Algorithms and Machine Learning Pipelines with our
+link:#[Graph Data Science Fundamentals course^].
+====
+
+== Learning Path
+
+[.promo.promo-graphacademy]
+====
+You can learn about this topic and so much more in our link:#[Data Reporting Learning Path^]:
+
+* link:#[Foo Fundamentals^].
+* link:#[Introduction to Bar^].
+* link:#[Baz for Data Scientists^].
+====
+
+== Python Example
+
+[.promo.promo-graphacademy]
+====
+Learn how to use the Neo4j Python Driver to build a Neo4j-backed movie recommendation website in the link:https://graphacademy.neo4j.com/courses/app-python/?ref=docs-promo[free Building Neo4j Applications with Python^] course on link:https://graphacademy.neo4j.com/?ref=docs-promo[Neo4j GraphAcademy^].
+====
+
+== Include Example
+
+include::preview-src/promos-include.adoc[]

preview-src/ui-model.yml

@@ -177,12 +177,12 @@ page:
     - content: Training enrollement [disabled]
       url: training-enrollment-disabled.html
       urlType: internal
-    - content: Certification
-      url: neo4j-gds-certify.html
-      urlType: internal
-    - content: Course Yelp
-      url: applied-graph-algo-course-yelp.html
-      urlType: internal
+    # - content: Certification
+    #   url: neo4j-gds-certify.html
+    #   urlType: internal
+    # - content: Course Yelp
+    #   url: applied-graph-algo-course-yelp.html
+    #   urlType: internal
     - content: Tables
       url: tables.html
       urlType: internal
@@ -264,6 +264,9 @@ page:
     - content: Contribute
       url: contribute.html
       urlType: internal
+    - content: Promos
+      url: promos.html
+      urlType: internal
   # additional page attributes indexed by page-slug
     pages-data:
       cheatsheet-products: &cheatsheet-products

src/css/promo.css

@@ -0,0 +1,37 @@
+div.promo.promo-graphacademy .content {
+  background-image: url(../img/icons/mortarboard.svg);
+  background-repeat: no-repeat;
+  background-position: 0 4px;
+  padding-left: 48px !important;
+}
+
+div.promo {
+  background-image: url(../img/promo-blob.svg);
+  background-repeat: no-repeat;
+  background-position: bottom right;
+  padding: 24px;
+  border: 1px solid #e2e3e5;
+  border-radius: 16px;
+}
+
+div.promo .content {
+  padding: 0 !important;
+  border: 0 none !important;
+}
+
+div.promo .content .paragraph,
+div.promo .content .ulist {
+  margin-bottom: 0;
+}
+
+div.promo .content .ulist ul {
+  padding-left: 12px;
+}
+
+div.promo .content .ulist li {
+  margin-bottom: 0;
+}
+
+div.promo a {
+  font-weight: 400;
+}

src/css/site.css

@@ -43,3 +43,4 @@
 @import "neo4j-docs.css";
 @import "newsletter.css";
 @import "challenges.css";
+@import "promo.css";

src/css/toc-ad.css

@@ -1,58 +1,53 @@
 .toc .toc-ad {
-  border: 1px solid rgba(var(--colors-neutral-30));
-  padding: 1rem 0.5rem;
-  border-radius: 0.5rem;
+  border: 1px solid #e2e3e5;
+  padding: 24px 16px 48px;
+  border-radius: 12px;
   margin: 2rem -0.5rem 0;
+  background: #fff url(../img/ad-blob.svg) no-repeat bottom right;
+  background-size: cover;
 }
 
 .toc .toc-ad a {
   padding: 0 !important;
   border-left: 0 none !important;
+  color: #1a1b1d;
 }
 
 .toc .toc-ad a:active {
   background-color: var(--color-white) !important;
 }
 
-.toc .toc-ad .toc-ad-overline {
-  font-size: 0.7rem;
-  color: rgba(var(--colors-neutral-60));
-  text-transform: uppercase;
-  background-color: var(--color-white);
+.toc .toc-ad .toc-ad-icon {
+  display: block;
+  content: "";
+  width: 24px;
+  height: 24px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-position: cover;
+  margin-bottom: 12px;
+  /* toc-ad-icon  */
 }
 
-.toc .toc-ad .toc-ad-overline a {
-  padding-left: 0 !important;
-  border-left: 0 none !important;
-  color: rgba(var(--colors-neutral-60));
-}
-
-.toc .toc-ad .toc-ad-image {
-  width: 80%;
-  margin: 0.2rem auto;
-}
-
-.toc .toc-ad .toc-ad-overline a:hover {
-  color: rgba(var(--colors-neutral-80));
+.toc .toc-ad .toc-ad-icon.toc-ad-icon--mortarboard {
+  background-image: url(../img/icons/mortarboard.svg);
 }
 
 .toc .toc-ad .toc-ad-title {
-  color: rgba(var(--colors-baltic-50));
-  font-size: 1rem;
-  margin: 0.2rem 0 !important;
+  color: rgba(var(--colors-neutral-75));
+  font-size: 18px;
+  margin: 12px 0 !important;
   padding: 0 !important;
 }
 
 .toc .toc-ad-description {
-  color: rgba(var(--colors-neutral-50));
-  font-size: 0.8rem;
+  color: rgba(var(--colors-neutral-75));
   margin-top: 0;
 }
 
 .toc .toc-ad-underline {
   color: rgba(var(--colors-baltic-50));
   font-weight: bold;
-  font-size: 0.8rem;
 }
 
 .toc .toc-ad-underline-button,
@@ -61,9 +56,8 @@
   background-color: rgba(var(--colors-baltic-50));
   color: var(--color-white);
   display: inline-block;
-  font-size: 0.8rem;
   font-weight: bold;
-  padding: 0.5rem 1rem;
+  padding: 8px 24px;
 }
 
 .doc .ad {

src/css/toc.css

@@ -1,6 +1,7 @@
 .toc-menu {
   color: var(--toc-font-color);
   margin-bottom: 2rem;
+  width: 220px !important;
 }
 
 .toc.sidebar {

src/css/vars-dark.css

@@ -382,9 +382,9 @@
   --toc-top: calc(var(--body-top) + var(--toolbar-height));
   --kb-metadata-top: calc(var(--body-top) + var(--toolbar-height));
   --toc-height: calc(100vh - var(--toc-top) - 8.5rem);
-  --toc-width: calc(162 / var(--rem-base) * 1rem);
+  --toc-width: 274px;
   --kb-metadata-width: calc(216 / var(--rem-base) * 1rem);
-  --toc-width--widescreen: calc(216 / var(--rem-base) * 1rem);
+  --toc-width--widescreen: 274px;
   --kb-metadata-width--widescreen: calc(244 / var(--rem-base) * 1rem);
   --toolbar-wrapper-width: 69rem;
   --doc-max-width: calc(720 / var(--rem-base) * 1rem);

src/partials/toc-ad.hbs

@@ -15,6 +15,10 @@
     {{/if}}
 
     <a href="{{{page.attributes.ad-link}}}" target="_blank">
+        {{#with page.attributes.ad-icon}}
+        <i class="toc-ad-icon toc-ad-icon--{{{this}}}"></i>
+        {{/with}}
+
         {{#with page.attributes.ad-image}}
         <img class="toc-ad-image" src="{{{this}}}" alt="{{{ page.attributes.ad-title }}}">
         {{/with}}