diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..9e26dfee --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1 @@ +{} \ No newline at end of file diff --git a/preview-src/promos-ad-include.adoc b/preview-src/promos-ad-include.adoc new file mode 100644 index 00000000..1cfa6c79 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/preview-src/promos-include.adoc b/preview-src/promos-include.adoc new file mode 100644 index 00000000..89e93e86 --- /dev/null +++ b/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^]. +==== diff --git a/preview-src/promos.adoc b/preview-src/promos.adoc new file mode 100644 index 00000000..b58e650d --- /dev/null +++ b/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[] diff --git a/preview-src/ui-model.yml b/preview-src/ui-model.yml index cbd864d8..ef2af3ac 100644 --- a/preview-src/ui-model.yml +++ b/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 diff --git a/src/css/promo.css b/src/css/promo.css new file mode 100644 index 00000000..35e40ee5 --- /dev/null +++ b/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; +} diff --git a/src/css/site.css b/src/css/site.css index 007eab57..80b06336 100644 --- a/src/css/site.css +++ b/src/css/site.css @@ -43,3 +43,4 @@ @import "neo4j-docs.css"; @import "newsletter.css"; @import "challenges.css"; +@import "promo.css"; diff --git a/src/css/toc-ad.css b/src/css/toc-ad.css index 5ad70195..9fd12445 100644 --- a/src/css/toc-ad.css +++ b/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 { diff --git a/src/css/toc.css b/src/css/toc.css index d8ff76e0..ad21210e 100644 --- a/src/css/toc.css +++ b/src/css/toc.css @@ -1,6 +1,7 @@ .toc-menu { color: var(--toc-font-color); margin-bottom: 2rem; + width: 220px !important; } .toc.sidebar { diff --git a/src/css/vars-dark.css b/src/css/vars-dark.css index 0761084e..45b5d38d 100644 --- a/src/css/vars-dark.css +++ b/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); diff --git a/src/img/ad-blob.svg b/src/img/ad-blob.svg new file mode 100644 index 00000000..af6f5eb2 --- /dev/null +++ b/src/img/ad-blob.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/img/icons/mortarboard.svg b/src/img/icons/mortarboard.svg new file mode 100644 index 00000000..1b163936 --- /dev/null +++ b/src/img/icons/mortarboard.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/img/promo-blob.svg b/src/img/promo-blob.svg new file mode 100644 index 00000000..096dab81 --- /dev/null +++ b/src/img/promo-blob.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/partials/toc-ad.hbs b/src/partials/toc-ad.hbs index e7cb2c6b..c4ba1241 100644 --- a/src/partials/toc-ad.hbs +++ b/src/partials/toc-ad.hbs @@ -15,6 +15,10 @@ {{/if}} + {{#with page.attributes.ad-icon}} + + {{/with}} + {{#with page.attributes.ad-image}} {{{ page.attributes.ad-title }}} {{/with}}