diff --git a/services/web/app/views/layout.pug b/services/web/app/views/layout.pug
index 687f5e1880..082e774d26 100644
--- a/services/web/app/views/layout.pug
+++ b/services/web/app/views/layout.pug
@@ -11,18 +11,25 @@ html(itemscope, itemtype='http://schema.org/Product')
-if (typeof(gaExperiments) != "undefined")
|!{gaExperiments}
-
+ //- Title
-if (typeof(title) == "undefined")
- title= settings.appName + ', '+ translate("online_latex_editor")
+ title= settings.appName + ', '+ translate("online_latex_editor")
+ meta(name="twitter:title", content=settings.appName + ', '+ translate("online_latex_editor"))
+ meta(name="og:title", content=settings.appName + ', '+ translate("online_latex_editor"))
-else
- title= translate(title) + ' - ' + settings.appName + ', ' + translate("online_latex_editor")
+ title= translate(title) + ' - ' + settings.appName + ', ' + translate("online_latex_editor")
+ //- to do - not translate?
+ meta(name="twitter:title", content=translate(title))
+ meta(name="og:title", content=translate(title))
+ //- Icons
link(rel="icon", href="/" + settings.brandPrefix + "favicon.ico")
link(rel="icon", sizes="192x192", href="/" + settings.brandPrefix + "touch-icon-192x192.png")
link(rel="apple-touch-icon-precomposed", href="/" + settings.brandPrefix + "apple-touch-icon-precomposed.png")
link(rel="mask-icon", href="/" + settings.brandPrefix + "mask-favicon.svg", color=settings.brandPrefix === 'ol-' ? "#4f9c45" : "#a93529")
-
+
+ //- Stylesheet
link(rel='stylesheet', href=buildCssPath("/" + settings.brandPrefix + "style.css", {hashedPath:true}))
block _headLinks
@@ -34,14 +41,46 @@ html(itemscope, itemtype='http://schema.org/Product')
meta(itemprop="name", content=settings.appName + ", the Online LaTeX Editor")
-
+
+ //- Description
-if (typeof(meta) == "undefined")
meta(itemprop="description", name="description", content=translate("site_description"))
-else
meta(itemprop="description", name="description" , content=meta)
-
- meta(itemprop="image", name="image", content="/" + settings.brandPrefix + "favicon.ico")
+ -if (typeof(metaImage) == "undefined")
+ meta(itemprop="image", name="image", content="/" + settings.brandPrefix + "favicon.ico")
+ -else
+ meta(itemprop="image", name="image", content=metaImage.fields.file.url)
+
+ //- Meta Tags: Twitter
+ -if (typeof(settings.social.twitter.handle) != "undefined")
+ meta(name="twitter:site", content=settings.social.twitter.handle)
+ meta(name="twitter:card", content=metaTwitterCard ? metaTwitterCard : 'summary')
+ -if (typeof(metaTwitterDescription) != "undefined")
+ meta(itemprop="twitter:description", content=metaTwitterDescription)
+ -if (typeof(metaTwitterImage) != "undefined")
+ meta(itemprop="image", name="image", content=metaTwitterImage.fields.file.url)
+ -else if (typeof(metaImage) != "undefined")
+ meta(itemprop="image", name="image", content=metaImage.fields.file.url)
+
+ //- Meta Tags: Open Graph
+ -if (typeof(settings.social.facebook.appId) != "undefined")
+ meta(name="fb:app_id", content=settings.social.facebook.appId)
+ -if (typeof(metaOpenGraphDescription) != "undefined")
+ meta(itemprop="og:description", content=metaOpenGraphDescription)
+ -if (typeof(metaOpenGraphImage) != "undefined")
+ meta(itemprop="image", name="image", content=metaOpenGraphImage.fields.file.url)
+ -else if (typeof(metaImage) != "undefined")
+ meta(itemprop="image", name="image", content=metaImage.fields.file.url)
+ -if (typeof(metaOgType) != "undefined")
+ meta(name="og:type", metaOgType)
+ -else
+ meta(name="og:type", content="website")
+
+ //- Scripts
+
+ //- Google Analytics
- if (typeof(gaToken) != "undefined")
script(type='text/javascript').
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
@@ -53,10 +92,10 @@ html(itemscope, itemtype='http://schema.org/Product')
- else
script(type='text/javascript').
window.ga = function() { console.log("would send to GA", arguments) };
-
+
script(type="text/javascript").
window.csrfToken = "#{csrfToken}";
-
+
script(src=buildJsPath("libs/jquery-1.11.1.min.js"))
script(type="text/javascript").
var noCdnKey = "nocdn=true"
@@ -152,4 +191,3 @@ html(itemscope, itemtype='http://schema.org/Product')
include sentry
-
diff --git a/services/web/package.json b/services/web/package.json
index ab9613e525..418fa34a08 100644
--- a/services/web/package.json
+++ b/services/web/package.json
@@ -36,6 +36,7 @@
"bufferedstream": "1.6.0",
"codemirror": "^5.33.0",
"connect-redis": "^3.1.0",
+ "contentful": "^6.1.1",
"cookie": "^0.2.3",
"cookie-parser": "1.3.5",
"csurf": "^1.8.3",
diff --git a/services/web/public/stylesheets/app/about.less b/services/web/public/stylesheets/app/about.less
new file mode 100644
index 0000000000..e50d2621be
--- /dev/null
+++ b/services/web/public/stylesheets/app/about.less
@@ -0,0 +1,33 @@
+/*
+ v2
+ About Page
+*/
+.team {
+ list-style: none;
+ padding: 0;
+ .team-member {
+ display: block;
+ float: left;
+ margin-bottom: @margin-lg;
+ width: 100%;
+ h3 {
+ margin: 0;
+ }
+ .team-pic {
+ float: left;
+ margin-right: @margin-sm;
+ }
+ .team-info {
+ overflow: hidden;
+ }
+ .team-connect {
+ list-style: none;
+ margin-top: @margin-sm;
+ padding: 0;
+ li {
+ display: inline-block;
+ margin: 0 @margin-md 0 0;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/services/web/public/stylesheets/app/blog-posts.less b/services/web/public/stylesheets/app/blog-posts.less
new file mode 100644
index 0000000000..c337ed280c
--- /dev/null
+++ b/services/web/public/stylesheets/app/blog-posts.less
@@ -0,0 +1,41 @@
+/*
+ v2
+ Blog Pages
+*/
+.blog {
+ img {
+ max-width: 100%;
+ }
+
+ .blog-list {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ li {
+ margin: 0 0 @margin-lg 0;
+ }
+ .card-header {
+ margin-bottom: @margin-sm;
+ padding: 0;
+ }
+ p {
+ margin-top: 12.5px;
+ }
+ }
+
+ .tags {
+ margin-top: @margin-md;
+ .tags-list {
+ list-style: none;
+ padding: 0;
+ }
+ li {
+ display: inline-block;
+ margin: 0;
+ padding: 0 @margin-sm 0 0;
+ }
+ a {
+ font-size: small;
+ }
+ }
+}
\ No newline at end of file
diff --git a/services/web/public/stylesheets/app/cms-page.less b/services/web/public/stylesheets/app/cms-page.less
new file mode 100644
index 0000000000..0e5a461bae
--- /dev/null
+++ b/services/web/public/stylesheets/app/cms-page.less
@@ -0,0 +1,88 @@
+/*
+ v2
+ CMS Generated Pages,
+ including About and Blog
+*/
+.cms-page {
+ .contact-btn-description {
+ margin-right: @margin-sm;
+ }
+
+ .tab-content {
+ float: left;
+ width: 100%;
+ }
+
+ /*
+ When on preview mode
+ */
+ .cms-preview {
+ background-color: @blue;
+ color: black;
+ font-weight: bold;
+ height: @navbar-padding-vertical;
+ left: 0;
+ line-height: @navbar-padding-vertical;
+ opacity: 0.8;
+ position: fixed;
+ text-align: center;
+ top: 0;
+ width: 100%;
+ z-index: 1;
+ &:after {
+ content: 'Preview';
+ width: 100%;
+ top: 0;
+ left: 0;
+ }
+ }
+
+ /*
+ All content from CMS is in .row-spaced.
+ Margin below is to fix extra whitespace for first rows
+ */
+ .container > .row:nth-child(2) {
+ //- first child is page header, don't correct margin
+ margin-top: 0;
+ }
+ .tab-pane {
+ .row:first-child {
+ margin-top: 0;
+ }
+ }
+
+ /*
+ quotes
+ */
+ blockquote {
+ /*
+ type.less sets inline, so that quotation mark is inline
+ but sometimes we have multiple
,
+ so hide quotation mark from type.less and add one here
+ */
+ &:before {
+ /* hide quotation from type.less */
+ display: none;
+ }
+ p {
+ display: block;
+ }
+ p:first-child {
+ /* below copied from type.less */
+ &:before {
+ content: open-quote;
+ font-size: @blockquote-font-size * 3;
+ color: @blockquote-border-color;
+ margin-right: 0.25em;
+ vertical-align: -0.4em;
+ line-height: 0.1em;
+ }
+ }
+ }
+ .quote-full-width {
+ img {
+ margin-right: @margin-sm;
+ margin-bottom: @margin-sm;
+ }
+ }
+}
\ No newline at end of file
diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less
index 5d08d9f95d..8dc3294a15 100644
--- a/services/web/public/stylesheets/core/_common-variables.less
+++ b/services/web/public/stylesheets/core/_common-variables.less
@@ -62,6 +62,10 @@
//
//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
+@margin-sm: 10px;
+@margin-md: 20px;
+@margin-lg: 30px;
+
@padding-base-vertical: 5px;
@padding-base-horizontal: 16px;
diff --git a/services/web/public/stylesheets/ol-style.less b/services/web/public/stylesheets/ol-style.less
index 540d106ab3..03e2bb3ed6 100644
--- a/services/web/public/stylesheets/ol-style.less
+++ b/services/web/public/stylesheets/ol-style.less
@@ -5,4 +5,9 @@
@import "core/ol-variables.less";
@import "app/ol-style-guide.less";
@import "_style_includes.less";
-@import "_ol_style_includes.less";
\ No newline at end of file
+@import "_ol_style_includes.less";
+
+// Pages
+@import "app/about.less";
+@import "app/blog-posts.less";
+@import "app/cms-page.less";
\ No newline at end of file