Temporary guides section in docs (#1515)

* cherry picking react.md * moving to old directory * cherry picking React Guide header * cherry picking React Guide images * cherry picking guides template * cherry picking sass file * cherry picking sass * creating guides main page * reorganized page with community guides section * Delete app.min.css * adding assets/app.min.css to gitignore * adding new template, fixing menu
FredKSchott · Nov 12, 2020 · 0d0f4cd · 0d0f4cd · vercel · Nov 12, 2020
1 parent 88db5d0
commit 0d0f4cd
Show file tree

Hide file tree

Showing 18 changed files with 542 additions and 8 deletions.
diff --git a/www/_eleventy/layouts/base.njk b/www/_eleventy/layouts/base.njk
@@ -61,6 +61,7 @@
           </a>
         <form class="search-form hidden-mobile" data-controller="search">
           <a href="/#api-reference" class="grid-nav-link">API Reference</a>
+          <a href="/guides" class="grid-nav-link plugin-nav-link">Guides</a>
           <a href="/plugins/" class="grid-nav-link">Plugins</a>
           <!-- <input type="text" name="search" placeholder="Search documentation..." class="search-form-input"></div> -->
         </form>

diff --git a/www/_eleventy/layouts/guide.njk b/www/_eleventy/layouts/guide.njk
@@ -1,12 +1,11 @@
 ---
 layout: layouts/base.njk
 ---
-
 <aside class="grid-toc hidden-mobile">
   {{ content | toc | safe }}
 </aside>
 
-<article id="grid-body" class="grid-body">
+<article id="grid-body" class="guide grid-body">
   <div class="grid-body-header">
     <svg height="64px" style="padding-left: 8px;" viewBox="0 0 640 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
       <g id="Page-1" stroke="none" stroke-width="1" fill="currentColor" fill-rule="evenodd">
@@ -17,14 +16,11 @@ layout: layouts/base.njk
     </svg>
     <h1 class="header-snowpack">Snowpack</h1>
     <p class="header-snowpack-subtitle">
-    THE <span class="highlight-container highlight-yellow">
-        <span class="highlight">PLUGIN</span></span> GUIDE
+     {{ title }}
   </p>
-    <div style="margin: 0rem auto; max-width: 424px;">
-      <a href="/" class="subtitle">Take me back to the main docs</a>
-    </div>
+
   </div>
   <div class="markdown-body">
     {{ content | safe }}
   </div>
-</article>
+</article>
diff --git a/www/_eleventy/layouts/temp.njk b/www/_eleventy/layouts/temp.njk
@@ -0,0 +1,33 @@
+---
+layout: layouts/base.njk
+title: "Snowpack - The faster frontend build tool"
+description: "Snowpack is the fast, bundle-free build tool for all kinds of frontend projects."
+---
+
+<aside class="grid-toc hidden-mobile">
+   {% include 'main-sidebar.njk' %}
+</aside>
+
+<article id="grid-body" class="grid-body">
+  <div class="grid-body-header">
+    <svg height="64px" style="padding-left: 8px;" viewBox="0 0 640 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <g id="Page-1" stroke="none" stroke-width="1" fill="currentColor" fill-rule="evenodd">
+        <g id="mountain-solid" transform="translate(-1.000000, 0.000000)"fill-rule="nonzero">
+          <path d="M635.92,462.7 L347.92,14.7 C342.03,5.54 331.89,0 321,0 C310.11,0 299.97,5.54 294.08,14.7 L6.08,462.7 C-0.250773249,472.547007 -0.699487627,485.064987 4.91,495.34 C10.522069,505.612419 21.2945349,512 33,512 L609,512 C620.71,512 631.48,505.61 637.09,495.33 C642.699457,485.058495 642.250708,472.543372 635.92,462.7 Z M321,91.18 L406.39,224 L321,224 L257,288 L218.94,249.94 L321,91.18 Z" id="Shape"></path>
+        </g>
+      </g>
+    </svg>
+    <h1 class="header-snowpack">Snowpack</h1>
+    <p class="header-snowpack-subtitle">
+     {{ title }}
+  </p>
+
+  </div>
+
+  <div class="markdown-body">
+    {{ content | safe }}
+  </div>
+</article>
+
+<!-- Place this tag in your head or just before your close body tag. -->
+<script async="async" defer="defer" src="https://buttons.github.io/buttons.js"></script>
diff --git a/www/css/_guides.scss b/www/css/_guides.scss
@@ -0,0 +1,121 @@
+.language-diff .deleted-sign,
+.language-diff .inserted-sign .inserted {
+  user-select: none;
+}
+
+.token.inserted {
+  color: #b5cea8;
+}
+
+.token.deleted {
+  color: #ce9178;
+}
+
+.markdown-body img.screenshot {
+  box-shadow: none;
+  border: none;
+  border-radius: 0;
+}
+
+.markdown-body embed {
+  background-color: #fff;
+  box-sizing: content-box;
+  max-width: 100%;
+  width: 100%;
+}
+
+.frame {
+  background-color: #0a5e9d;
+  padding: 34px 17px 10px 17px;
+  border-radius: 10px;
+  position: relative;
+  margin: 1rem 0;
+
+  &::before {
+    content: url(/img/guides/react/buttons.svg);
+    display: block;
+    position: absolute;
+    top: 5px;
+  }
+
+  &::after {
+    content: url(/img/guides/react/snowpack-logo-tiny.svg);
+    display: block;
+    position: absolute;
+    top: 5px;
+    right: 17px;
+  }
+}
+
+.guide {
+  .grid-body-header {
+    margin-bottom: 4rem;
+  }
+
+  .markdown-body {
+    @media (min-width: 600px) {
+      font-size: 1.1em;
+    }
+
+    blockquote,
+    p,
+    ul,
+    ol,
+    pre {
+      margin-top: 2em;
+      margin-bottom: 2em;
+    }
+
+    p {
+      line-height: 1.6;
+    }
+
+    ul {
+      margin-top: 2em;
+      margin-bottom: 2em;
+    }
+
+    li {
+      margin-top: 0.5em;
+      margin-bottom: 0.5em;
+      line-height: 1.6;
+    }
+
+    h2 {
+      font-size: 2.5em;
+      line-height: 1.2;
+    }
+
+    blockquote {
+      margin-left: -1rem;
+      margin-right: -1rem;
+      padding: 1.5rem 1rem;
+      color: #2e5e82;
+      font-size: 1.1em;
+      font-weight: 300;
+      background: linear-gradient(-30deg, #c9efd8, #f9ddff);
+      border-left: none;
+
+      @media (min-width: 860px) {
+        margin-left: -2rem;
+        margin-right: -2rem;
+        padding: 2rem;
+        border-radius: 0.5rem;
+        box-shadow: 0 1px 2px rgba(50, 127, 177, 0.1),
+          0 1.5rem 3rem rgba(50, 125, 177, 0.1);
+      }
+
+      & *:first-child {
+        margin-top: 0;
+      }
+      & *:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+.markdown-body iframe.twitter-share-button {
+  box-shadow: none;
+  border: 0;
+}
diff --git a/www/css/app.scss b/www/css/app.scss
@@ -10,5 +10,7 @@
 // Base styles
 @import '_base';
 
+// Guides styles
+@import '_guides';
 // Pages
 @import '_pluginPage';
diff --git a/www/guides.md b/www/guides.md
@@ -0,0 +1,14 @@
+---
+layout: layouts/temp.njk
+---
+
+## Guides
+
+Snowpack Guides are deep dives into popular Snowpack topics.
+
+- [React](/guides/react)
+- [Create a Plugin](/guides/plugins)
+
+### Community guides
+
+PRs that add a link to this list are welcome!