Add blog to docs site (decaporg#1419)

JordanBienvenue · Jun 12, 2018 · edfd35d · edfd35d
1 parent b65f68e
commit edfd35d
Show file tree

Hide file tree

Showing 8 changed files with 181 additions and 66 deletions.
diff --git a/website/site/config.yaml b/website/site/config.yaml
@@ -1,9 +1,11 @@
-baseurl: "/"
+baseurl: "https://www.netlifycms.org/"
 languageCode: "en-us"
 title: "Netlify CMS | Open-Source Content Management System"
 disable404: true
 pluralizeListTitles: false
 metaDataFormat: "yaml"
+permalinks:
+  blog: /blog/:year/:month/:title/
 menu:
   docs:
     - name: start

diff --git a/website/site/content/blog/netlify-cms-now-supports-gitlab-as-a-backend.md b/website/site/content/blog/netlify-cms-now-supports-gitlab-as-a-backend.md
@@ -0,0 +1,32 @@
+---
+title: Netlify CMS now supports GitLab as a backend
+author: Benaiah Mischenko
+description: >-
+  Netlify CMS, the open source, headless CMS that provides a user-friendly UI
+  around your Git repository, can now be used with GitLab in addition to
+  GitHub. 
+date: '2018-06-11'
+---
+Netlify CMS is releasing support for GitLab as a backend, creating the world's first completely open source stack for Git-based content editing. 
+
+<iframe width="100%" height="400" src="https://www.youtube.com/embed/ZrM3U0z8Sks?autoplay=1&loop=1&playlist=ZrM3U0z8Sks&mute=1&controls=0&modestbranding=1&showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
+
+We heard [you](https://github.com/netlify/netlify-cms/pull/517#issuecomment-383283557) (and [you](https://github.com/netlify/netlify-cms/pull/517#issuecomment-355386542), and [you](https://github.com/netlify/netlify-cms/pull/517#issuecomment-343569725), and [you](https://github.com/netlify/netlify-cms/pull/517#issuecomment-333629637))! While you want to use Netlify CMS as the headless content management system for your JAMstack projects, all of your code lives in GitLab. Our long-term vision is to be tool-agnostic so you can use whatever tool helps you work best. But while you can already use Netlify CMS with most static site generators, backend support was limited to GitHub. 
+
+Immediately after the December release of Netlify CMS 1.0, contributors got to work on improving the API for backend integrations. At the urging of the community, we prioritized support for GitLab. With today’s release of Netlify CMS 1.9.0, you can now use GitLab as the backend for Netlify CMS. 
+
+Adding support for GitLab means that millions more developers can now use Netlify CMS with their projects. Seriously — millions. GitLab is used by more than 100,000 organizations like Ticketmaster, Intel, Red Hat, and CERN. 
+
+## How it works
+
+Netlify CMS is an open source content management system for your Git workflow that enables you to provide editors with a friendly UI and intuitive workflow. You can use it with any static site generator to create faster, more flexible web projects. Content is stored in your GitLab repository alongside your code for easier versioning, multi-channel publishing, and the option to handle content updates directly in Git.
+
+In case you want an even easier way to get started, or just want to poke around in the code, you can use the button below to automatically deploy a starter site that uses the Hugo static site generator along with Netlify CMS. 
+
+<a href="https://app.netlify.com/start/deploy?repository=https://gitlab.com/netlify-templates/one-click-hugo-cms&stack=cms" rel="nofollow noreferrer noopener" target="_blank"><img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify"></a>
+
+Lastly, one particularly exciting thing about using GitLab as your backend is that it doesn’t require an authentication server. While the GitHub integration requires a hop to an authentication server (something Netlify provides for most users), GitLab’s implicit auth flow allows you to connect directly from your browser to gitlab.com, or even to your own self-hosted GitLab server!
+
+## What’s next
+
+We’re already working toward [Bitbucket](https://github.com/netlify/netlify-cms/pull/525) support and will be releasing it as soon as possible! We’re also focused on the upcoming release of [Netlify CMS 2.0](https://github.com/netlify/netlify-cms/issues/1280), which will bring new image handling features and improvements, and improved APIs for better CMS extensions. We’re also looking for more ideas and helping hands, so if you’re keen to build a smarter, safer, and more scalable CMS, we’d love your contributions. Give us a shout on [Twitter](https://twitter.com/netlifycms) or Gitter if you have questions or ideas.
diff --git a/website/site/layouts/blog/single.html b/website/site/layouts/blog/single.html
@@ -0,0 +1,16 @@
+{{ partial "header" . }}
+
+<div class="docs page">
+  <div class="container">
+    <article class="blog-content" id="blog-content">
+      <div class="blog-post-header">
+        <h1>{{ .Title }}</h1>
+        <p class="meta-info">by {{ .Params.author }} on {{ .Date.Format "January 2, 2006" }}</p>
+      </div>
+      {{ .Content }}
+    </article>
+  </div>
+</div>
+
+{{ partial "footer" . }}
+
diff --git a/website/site/layouts/partials/header.html b/website/site/layouts/partials/header.html
@@ -12,10 +12,26 @@
     <meta name="application-name" content="NetlifyCMS">
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="/css/main.css"/>
+
+    <meta name="description" content=
+    {{ if .Params.meta_description }}
+      {{ .Params.meta_description }}
+    {{ else if .Params.description }}
+      {{ .Params.description }}
+    {{ else if or (eq .Section "blog") (eq .Title "Blog") }}
+      "Recent news and updates about Netlify CMS."
+    {{ else }}
+      "Netlify CMS provides open source content management for your Git workflow."
+    {{ end }}
+    >
+
     {{ if or (eq .Section "docs") (eq .Title "Docs") }}
       <link rel="stylesheet" href="/css/lib/prism.css"/>
     {{ end }}
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />
+    {{ range .AlternativeOutputFormats -}}
+      {{ printf `<link rel="%s" type="%s+%s" href="%s" title="%s" />` .Rel .MediaType.Type .MediaType.Suffix .Permalink $.Site.Title | safeHTML }}
+    {{ end -}}
   </head>
   <body>
     {{ range .Site.Data.notifications }}
@@ -25,7 +41,7 @@
         {{ end }}
       {{ end }}
     {{ end }}
-    <header id="header" {{ if or (eq .Section "docs") (eq .Title "Docs") }}class="docs"{{ end }}>
+    <header id="header" class="{{ .Section }}">
       <div class="contained">
         <div class="logo-container">
           <a href="/" class="logo"><img src="/img/netlify-cms-logo.svg"/></a>
@@ -40,6 +56,7 @@
           <a class="nav-link docs-link" href="/docs/intro/">Docs</a>
           <a class="nav-link contributing-link" href="/docs/contributor-guide">Contributing</a>
           <a class="nav-link" href="/community">Community</a>
+          <a class="nav-link" href="/blog/">Blog</a>
           <a id="ghstars" class="github-button" href="https://github.com/netlify/netlify-cms" data-icon="octicon-star" data-show-count="true" aria-label="Star netlify/netlify-cms on GitHub">Star</a>
         </div>
       </div>

diff --git a/website/site/layouts/section/blog.html b/website/site/layouts/section/blog.html
@@ -0,0 +1,17 @@
+{{ partial "header" . }}
+
+<div class="blog page">
+  <div class="container">
+    <h1>Netlify CMS Blog</h1>
+    {{ range (.Paginate .Data.Pages.ByDate.Reverse ).Pages }}
+    <article class="blog-list-item">  
+      <h2><a href="{{ .Permalink }}" class="article">{{ .Title }}</a></h2>
+      <p class="meta-info">by {{ .Params.author }} on {{ .Date.Format "January 2, 2006" }}</p>
+      <p>{{ .Description }}</p>
+    </article>
+    {{ end }}
+    {{ template "_internal/pagination.html" . }}
+  </div>
+</div>
+
+{{ partial "footer" . }}
diff --git a/website/site/static/admin/config.yml b/website/site/static/admin/config.yml
@@ -1,6 +1,7 @@
 backend:
   name: github
   repo: netlify/netlify-cms
+  branch: master
   squash_merges: true
 
 publish_mode: editorial_workflow
@@ -17,6 +18,18 @@ collections: # A list of collections the CMS should be able to edit
       - {label: "Title", name: "title", widget: "string", tagname: "h1"}
       - {label: "Position", name: "position", widget: "number"}
       - {label: "Body", name: "body", widget: "markdown"}
+  - name: "blog"
+    label: "Blog"
+    label_singular: "Post"
+    folder: "website/site/content/blog"
+    create: true
+    fields:
+      - {label: "Title", name: "title", widget: "string", tagname: "h1"}
+      - {label: "Author", name: "author", widget: "string"}
+      - {label: "Description (for blog list)", name: "description", widget: "text"}
+      - {label: "Meta Description (defaults to Description)", name: "meta_description", widget: "text", required: false}
+      - {label: "Date", name: "date", widget: "date"}
+      - {label: "Body", name: "body", widget: "markdown"}
   - name: updates
     label: Updates
     files:

diff --git a/website/src/css/imports/docs.css b/website/src/css/imports/docs.css
@@ -1,4 +1,5 @@
-.docs-content {
+.docs-content,
+.blog-content {
   pre {
     margin: 30px -16px !important;
   }
@@ -9,7 +10,8 @@
     }
   }
 }
-.docs.page {
+.docs.page,
+.blog.page {
   padding: 69px $tiny $xl;
   text-align: left;
   @media screen and (min-width: $mobile) {
@@ -121,64 +123,6 @@
     }
   }
 
-  .docs-content {
-    font-size: 18px;
-    line-height: 28px;
-
-    .edit-this-page {
-      float: right;
-    }
-
-    #pencil {
-      fill: #7CA511;
-    }
-
-    @media screen and (min-width: $tablet) {
-      @neat-span-columns 17 24;
-      @neat-shift 1 24;
-    }
-
-    h2:not(:first-child) {
-      margin-top: $large;
-    }
-
-    p {
-      line-height: 1.7;
-    }
-
-    a {
-			text-decoration: none;
-			color: $darkGreen;
-		}
-
-		iframe {
-			width: 100%;
-		}
-
-    img {
- 			max-width: 100%;
- 			height: auto;
- 		}
-
-    table {
-      background: #f7f7f7;
-      border-radius: $borderRadius;
-    }
-
-    code {
-      background: $lightestGrey;
-      border-radius: 2px;
-      padding: 2px 6px;
-      white-space: nowrap;
-    }
-
-    pre > code {
-      background: initial;
-      padding: initial;
-      white-space: inherit;
-    }
-	}
-
 	h1,
 	h2 {
 		font-size: 36px;
@@ -197,14 +141,18 @@
 	h3 {
 		color: $grey;
 		font-size: 20px;
-		margin-top: $large;
+		margin-top: $medium;
     margin-bottom: $small;
 
 		&.inverse {
 			color: white;
 		}
-	}
+  }
 
+  .meta-info {
+    font-size: $tiny;
+  }
+
 	table {
 		width: 100%;
 		text-align: left;
@@ -229,5 +177,74 @@
 		td {
 			font-size: 14px;
 		}
-	}
+  }
 }
+
+
+.docs-content,
+.blog-content {
+  font-size: 18px;
+  line-height: 28px;
+
+  .edit-this-page {
+    float: right;
+  }
+
+  #pencil {
+    fill: #7CA511;
+  }
+
+  @media screen and (min-width: $tablet) {
+    @neat-span-columns 17 24;
+    @neat-shift 1 24;
+  }
+
+  h2:not(:first-child) {
+    margin-top: $medium;
+  }
+
+  p {
+    line-height: 1.7;
+  }
+
+  a {
+    text-decoration: none;
+    color: $darkGreen;
+  }
+
+  iframe {
+    width: 100%;
+  }
+
+  img {
+     max-width: 100%;
+     height: auto;
+   }
+
+  table {
+    background: #f7f7f7;
+    border-radius: $borderRadius;
+  }
+
+  code {
+    background: $lightestGrey;
+    border-radius: 2px;
+    padding: 2px 6px;
+    white-space: nowrap;
+  }
+
+  pre > code {
+    background: initial;
+    padding: initial;
+    white-space: inherit;
+  }
+}
+
+.blog-content h1 {
+  margin-bottom: 0;
+}
+
+.blog-list-item h2 {
+  margin: 48px 0 0;
+  line-height: 36px;
+}
diff --git a/website/src/css/imports/header.css b/website/src/css/imports/header.css
@@ -87,7 +87,8 @@ header {
     }
   }
 
-  &.docs {
+  &.docs,
+  &.blog {
     background: $darkerGrey;
     padding: $small 0;