Merge pull request #581 from sharelatex/jel-add-cms

Add CMS

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
 		
 
-

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",

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;
+      }
+    }
+  }
+}

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;
+    }
+  }
+}

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 <p> inline, so that quotation mark is inline
+      but sometimes we have multiple <p>,
+      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;
+    }
+  }
+}

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;
 

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";
+@import "_ol_style_includes.less";
+
+// Pages
+@import "app/about.less";
+@import "app/blog-posts.less";
+@import "app/cms-page.less";