Merge pull request linode#7 from abailly/guides-wireframes

Guides wireframes

Author: Josh Sager

content/guides/_index.md

@@ -9,6 +9,4 @@ license: '[CC BY-ND 4.0](https://creativecommons.org/licenses/by-nd/4.0)'
 date: 2018-06-13T08:55:08-04:00
 template: guides
 ---
-This is the Guides page. This page will be a curated list of guides taken from
-our Docs site to make it easy for developers to find the resources they need
-to create and consume Linode's products and services.
+Get Started building tools and apps using the linode API

themes/dlc/gulpfile.js

@@ -13,17 +13,30 @@ const reporter = require('postcss-reporter');
 const tailwind = 'tailwind.js';
 const mainCss = './srcCSS/main.css';
 const css = './srcCSS/**/*.css';
-const html = './layouts/**/*.html'
+const baseThemeHtml = '../linode-hugo-base-theme/layouts/**/*.html';
+const html = './layouts/**/*.html';
 const output = 'static/assets/css/';
 const cssInfoDir = 'static/assets/cssinfo/';
 
+class TailwindExtractor {
+  static extract(content) {
+    return content.match(/[A-z0-9-:\/]+/g) || [];
+  }
+}
+
 const plugins = [
   atImport,
   tailwindcss('./tailwind.js'),
   autoprefixer({
     browsers: ['last 2 versions', '> 2%']
   }),
-  cssnano
+  // cssnano({
+  //   preset: ['none', {
+  //     discardComments: {
+  //         removeAll: true,
+  //     },
+  //   }]
+  // })
 ];
 
 gulp.task('lint', () => {
@@ -47,8 +60,14 @@ gulp.task('compile', () => {
     .pipe(postcss(plugins))
     .pipe(
       purgecss({
-        content: [html],
-        whitelist: ['mobile-nav', ['active']]
+        content: [baseThemeHtml, html],
+        whitelist: ['mobile-nav', 'active'],
+        extractors: [
+          {
+            extractor: TailwindExtractor,
+            extensions: ["html"]
+          }
+        ]
       })
     )
     .pipe(gulp.dest(output));

themes/dlc/layouts/_default/guides.html

@@ -0,0 +1,85 @@
+{{ define "main" }}
+
+
+<div class="mx-auto text-center max-w-lg my-8 pb-4">
+  <h1>{{ .Title }}</h1>
+  <div class="text-xl">{{.Content}}</div>
+</div>
+
+<div class="max-w-2xl mx-auto pb-4">
+  <h2 class="text-center">API Guides</h2>
+  <div class="flex flex-wrap my-8 -mx-4">
+    {{ range .Paginator.Pages  }}
+      <article class="w-full md:w-1/2 px-4 mb-4 md:mb-8">
+        <div class="p-8 h-full bg-grey-light">
+          <header>
+            <h3 class="mt-0"><a href="{{ .RelPermalink }}">{{ .Title | markdownify }}</a></h3>
+            {{ partial "2_molecules/post-categories" . }}
+          </header>
+          {{ .Content }}
+        </div>
+      </article>
+    {{ end }}
+    <button class="btn mx-auto">View All Platform Guides</button>
+  </div>
+</div>
+
+<h2 class="text-center">Recently Updated Guides</h2>
+
+<div class="flex flex-wrap my-8 -mx-4 pb-8">
+    <article class="w-full md:w-1/3 px-4 mb-4 md:mb-8">
+      <div class="p-8 h-full bg-grey-light">
+        <header>
+          <h3 class="mt-0"><a href="{{ .RelPermalink }}">{{ .Title | markdownify }}</a></h3>
+          {{ partial "2_molecules/post-categories" . }}
+        </header>
+        {{ .Content }}
+      </div>
+    </article>
+    <article class="w-full md:w-1/3 px-4 mb-4 md:mb-8">
+      <div class="p-8 h-full bg-grey-light">
+        <header>
+          <h3 class="mt-0"><a href="{{ .RelPermalink }}">{{ .Title | markdownify }}</a></h3>
+          {{ partial "2_molecules/post-categories" . }}
+        </header>
+        {{ .Content }}
+      </div>
+    </article>
+    <article class="w-full md:w-1/3 px-4 mb-4 md:mb-8">
+      <div class="p-8 h-full bg-grey-light">
+        <header>
+          <h3 class="mt-0"><a href="{{ .RelPermalink }}">{{ .Title | markdownify }}</a></h3>
+          {{ partial "2_molecules/post-categories" . }}
+        </header>
+        {{ .Content }}
+      </div>
+    </article>
+</div>
+
+<div class="flex flex-wrap my-8 -mx-4 pb-4">
+    <article class="w-full md:w-1/2 px-4 mb-4 md:mb-8" style="height: 300px">
+      <div class="p-8 h-full bg-grey-light">
+      </div>
+    </article>
+    <article class="w-full md:w-1/2 px-4 mb-4 md:mb-8">
+      <div class="p-8 h-full flex flex-col justify-center">
+        <header>
+          <h2 class="mt-0">Want more help?</h2>
+        </header>
+        <p>We're happy with any other qustions you might have.</p>
+        <button class="btn mt-4">Get your questions answered</button>
+      </div>
+    </article>
+</div>
+
+<div class="my-8 -mx-4 pb-4">
+    <h2 class="text-center mx-auto">Get started in the Linode Cloud today</h2>
+    <div class="flex justify-center">
+        <button class="btn mt-4 mr-2">Create an account</button>
+        <button class="btn mt-4 ml-2">Learn more</button>
+    </div>
+</div>
+
+{{ partial "2_molecules/paginator" . }}
+
+{{ end }}

themes/dlc/layouts/partials/0_utilities/htmlHead.html

@@ -23,7 +23,6 @@
   {{ .Hugo.Generator }}
 
   {{ partial "0_utilities/fonts.html" . }}
-  <link href='{{ "assets/css/base.css" | relURL }}' rel="stylesheet">
   <link href='{{ "assets/css/main.css" | relURL }}' rel="stylesheet">
   {{ if .Site.Params.dev.enable}}
     <link href='{{ "assets/cssinfo/css-info.css" | relURL }}' rel="stylesheet">

themes/dlc/srcCSS/components/0_utilities/_variables.css

@@ -1,2 +0,0 @@
-:root {
-}

themes/dlc/srcCSS/components/1_atoms/button.css

@@ -0,0 +1,4 @@
+.btn {
+  @apply font-bold py-3 px-4 bg-l-green text-white rounded;
+  width: fit-content;
+}

themes/dlc/srcCSS/main.css

@@ -1,2 +1,3 @@
 @import 'tailwind.css';
-@import './**/*.css';
+@import '../../linode-hugo-base-theme/srcCSS/components/**/*.css';
+@import 'components/**/*.css';