initial WIP to resolve the issue

ProjectEvergreen · Dec 24, 2020 · ee60fe0 · ee60fe0
1 parent 1a7b3cb
commit ee60fe0
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 57 deletions.
diff --git a/www/components/card/card.css b/www/components/card/card.css
@@ -1,5 +1,5 @@
 /* TODO restore to nested styles */
-:host .card {
+:host {
   padding: 2.5rem;
   position: relative;
   display: flex;
@@ -15,7 +15,7 @@
   }
 }
 
-:host .card .body {
+:host slot {
   padding:10px;
 }
 

diff --git a/www/components/card/card.js b/www/components/card/card.js
@@ -43,16 +43,9 @@ class Card extends LitElement {
 
   render() {
     return html`
-    <style>
-      ${css}
-    </style>
-      <div class="card ${this.size ? `card-${this.size}` : ''}">
-        ${this.renderImage()}
-        ${this.renderTitle()}
-        <div class="body">
-          <slot></slot>
-        </div>
-      </div>
+      ${this.renderImage()}
+      ${this.renderTitle()}
+      <slot name="cardcontent"></slot>
     `;
   }
 }

diff --git a/www/components/row/row.css b/www/components/row/row.css
diff --git a/www/components/row/row.js b/www/components/row/row.js
diff --git a/www/pages/index.html b/www/pages/index.html
@@ -4,10 +4,34 @@
   <head>
     <!-- TODO have to use forward slash / for path references?  translate on the fly in serve.js? -->
     <script type="module" src="../components/banner/banner.js"></script>
+
+    <script>
+      class SlotTestNative extends HTMLElement {
+        constructor() {
+          super();
+
+          // create a Shadow DOM
+          this.root = this.attachShadow({ mode: 'closed' });
+          this.root.innerHTML = `
+            <h3>Content from the custom element. (inside HTMLElement)</h3>
+            <h3>
+              <slot name="content"></slot>
+            <h3>
+            <div>
+              <span>nested - will the slot show?<span>
+              <h3>
+                <slot name="content"></slot>
+              <h3>
+            </div>
+          `;
+        }
+      }
+
+      customElements.define('slot-test-native', SlotTestNative);
+    </script>
 
     <!-- TODO these came from front matter, return to frontmatter? -->
     <script type="module" src="../components/card/card.js"></script>
-    <script type="module" src="../components/row/row.js"></script>
 
     <!-- TODO had to handle relative path by using / , should be transparent to the user -->
     <link rel="stylesheet" href="/styles/home.css"></link>
@@ -16,6 +40,11 @@
   <body>
 
     <div class="gwd-content-outlet">
+
+      <slot-test-native>
+        <h3 slot="content">Content for the slot. (outside HTMLElement)</h3>
+      </slot-test-native>
+
       <app-banner></app-banner>
 
       <div class='gwd-content-wrapper'>
@@ -28,21 +57,20 @@ <h2>Greenwood is a modern and performant static site generator for Web Component
               <p>Greenwood is focused on providing an intuitive and accessible development workflow supporting modern JavaScript and CSS features like Web Components, FlexBox, CSS Grid, and Modules.  Greenwood strives to deliver not only great user experiences, but also great developer experiences.  To learn more about the project we encourage everyone to first go through our <a href="/getting-started/">Getting Started</a> guide.  You can learn more about the project itself at our <a href="/about">about page</a> or see our <a href="/docs/">documentation</a> to learn more about how to use Greenwood.</p>
               <hr/>
             </div>
-            
+
             <div class="cards">
-              <app-row>
-                <app-card title="webpack" img="../assets/webpack.svg" size="full" style="width:100%">
-                  To us, webpack is more than a module bundler, it's an entire development ecosystem!  We use webpack
-                  under the hood to power the development workflow and to help generate a performant site for you with the power of tools like Babel and PostCSS.  The best part?  You don't have to know anything about that!  Greenwood handles all the configuration and optimizations for you, so you can be sure that your users will get the best experience possible, and as a developer, so will you.
-                </app-card>
-                <app-card title="Web Components" img="../assets/webcomponents.svg" size="full" style="width:100%">
-                  Do we love Web Components?  You bet we do!  In fact, it's one of many things we love about the modern web, including other features like Modules, FlexBox and CSS Grid, Fetch API, and more!  It's all there for you in the browser, and with Greenwood, we make sure all those features will work for all your users.  Sit back and write the modern code you want and Greenwood will take care of the rest.
-                </app-card>
-                <app-card title="NodeJS" img="../assets/nodejs.png" size="full" style="width:100%">
-                  Although Greenwood generates a static site that you can host just about anywhere (Netlify, S3, Apache, etc), for developing and building your site Greenwood requires NodeJS to be available on the command line.  This allows us to tap into all the amazing web development tools and libraries available on npm and also means you can use those packages too when developing your own site!  Greenwood will aim to support the latest LTS release of NodeJS and the version of npm that comes with.
-                </app-card>
-              </app-row>
-            </div>    
+              <app-card title="webpack" img="../assets/webpack.svg" style="width:100%">
+                <p slot="cardcontent">To us, webpack is more than a module bundler, it's an entire development ecosystem!  We use webpack under the hood to power the development workflow and to help generate a performant site for you with the power of tools like Babel and PostCSS.  The best part?  You don't have to know anything about that!  Greenwood handles all the configuration and optimizations for you, so you can be sure that your users will get the best experience possible, and as a developer, so will you.</p>
+              </app-card>
+
+              <app-card title="Web Components" img="../assets/webcomponents.svg" style="width:100%">
+                <p slot="cardcontent">Do we love Web Components?  You bet we do!  In fact, it's one of many things we love about the modern web, including other features like Modules, FlexBox and CSS Grid, Fetch API, and more!  It's all there for you in the browser, and with Greenwood, we make sure all those features will work for all your users.  Sit back and write the modern code you want and Greenwood will take care of the rest.</p>
+              </app-card>
+
+              <app-card title="NodeJS" img="../assets/nodejs.png" style="width:100%">
+                <p slot="cardcontent">Although Greenwood generates a static site that you can host just about anywhere (Netlify, S3, Apache, etc), for developing and building your site Greenwood requires NodeJS to be available on the command line.  This allows us to tap into all the amazing web development tools and libraries available on npm and also means you can use those packages too when developing your own site!  Greenwood will aim to support the latest LTS release of NodeJS and the version of npm that comes with.</p>
+              </app-card>
+            </div>
 
           </div>
 

diff --git a/www/styles/home.css b/www/styles/home.css
@@ -37,4 +37,16 @@ h3 {
   @media(max-width:768px) {
     padding:0;
   }
+}
+
+.cards {
+  margin-left: -0.25rem;
+  margin-right: -0.25rem;
+  display: flex;
+  justify-content: space-around;
+  flex-direction: row;
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+  }
 }