enhancement/issue 1253 init baseline starting point (#1254)

* WIP landing page with spinning logo * flesh out cards conent * comment out fonts * use SVG logo * restore (broken) fonts * windy leaf animation * fix leaf logo * add links * responsive and misc styling tweaks * correctly align logo * update test case for basic content checks * ESLint ignore init template contents * downgrade usage of import attributes * fix typo * add xmlns to SVG
ProjectEvergreen · Aug 29, 2024 · 9f31034 · 9f31034
1 parent 38671e5
commit 9f31034
Show file tree

Hide file tree

Showing 7 changed files with 244 additions and 6 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -3,5 +3,6 @@
 **/node_modules/**
 !.eslintrc.cjs
 !.mocharc.js
+packages/init/src/template/src/**/*.js
 packages/plugin-babel/test/cases/**/*main.js
 TODO.md
diff --git a/packages/init/src/index.js b/packages/init/src/index.js
@@ -257,7 +257,7 @@ const run = async () => {
     }
 
     // map all the template files and copy them to the current working directory
-    console.log('Initialzing project with files...');
+    console.log('Initializing project with files...');
     await srcInit();
 
     console.log('Creating manifest (package.json)...');

diff --git a/packages/init/src/template/src/components/logo/logo.js b/packages/init/src/template/src/components/logo/logo.js
@@ -0,0 +1,114 @@
+const template = document.createElement('template');
+
+template.innerHTML = `
+  <div class="my-logo">
+    <style>
+      .my-logo {
+        height: 100px;
+        line-height: 100px;
+        font-size: 36px;
+        color: transparent;
+      }
+
+      .spacer {
+        height: 100px;
+        width: 100px;
+        display: block;
+        margin-top: -100px;
+      }
+
+      .my-logo div {
+        display: inline-block;
+        max-width: 35%;
+        vertical-align: middle;
+        border-radius: 20px;
+        vertical-align: top;
+      }
+
+      svg {
+        will-change: filter;
+        transition: filter 300ms;
+        width: 80%;
+      }
+
+      @keyframes logo-spin {
+        from {
+          transform: rotate(0deg);
+        }
+
+        to {
+          transform: rotate(360deg);
+        }
+      }
+
+      /* https://stackoverflow.com/a/40996404/417806 */
+      @keyframes leafanimation {
+        0% {transform:translate(1000px,500px) rotate(0deg);}
+        20% {transform:translate(850px,450px) rotate(360deg);}
+        40% {transform:translate(450px,200px) rotate(720deg);}
+        60% {transform:translate(100px,100px) rotate(1080deg);}
+        80% {transform:translate(0,0) rotate(1440deg);}
+        100% {transform:translate(0,0) rotate(1440deg);}
+      }
+
+      @media (prefers-reduced-motion: no-preference) {
+        .my-logo {
+          animation: leafanimation 6s linear;
+        }
+      }
+
+      @media(min-width: 500px) {
+        .my-logo div {
+          max-width: 23%;
+        }
+      }
+
+      @media(min-width: 768px) {
+        .my-logo div {
+          max-width: 15%;
+        }
+      }
+
+      @media(min-width: 1024px) {
+        .my-logo div {
+          max-width: 10%;
+        }
+      }
+    </style>
+
+    <span class="spacer"></span>
+
+    <div>
+      <svg width="100%" height="100%" viewBox="0 0 150 180" fill="#00b68f" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <style>
+            .shading {
+              fill: #1ad6a9;
+            }
+          </style>
+        </defs>
+        <g>
+          <g>
+            <g>
+              <path d="M81.32,142.25c-1.07.63-1.58,1.9-1.26,3.09,5.15,19.17-7.94,33.56,4.33,33.56,10.15,0,16.65-.48,16.65-14.91,0-10.63-2.06-25.06-5.08-27.12-2.32-1.59-10.84,3.12-14.64,5.38Z"/>
+              <path class="shading" d="M87.57,172.18c-.87.02-1.52-.8-1.32-1.64.13-.53.26-1.06.38-1.54,1.35-5.44,1.62-16.56-.67-25.59,2.65-1.11,6.78-2.61,8.45-3.15,1.43,4.2,2.65,15.98,2.65,23.73,0,4.62-1.04,6.8-2.01,7.29-1.29.65-4.43.84-7.47.9Z"/>
+            </g>
+            <path d="M20.78.05c.35-2.48-43.96,89.96-4.22,131.69,38.68,40.62,107.46,7.08,110.82-31.56C130.45,64.79,101.48,11.12,20.78.05Z"/>
+            <path class="shading" d="M119.87,99.53c-.9,10.31-9.73,30.5-34.22,40.27C76.61,67.13,38.01,20.47,26.37,8.54c39.28,6.82,61.55,23.92,73.47,37.44,14.07,15.96,21.56,35.98,20.03,53.55Z"/>
+          </g>
+        </g>
+      </svg>
+    </div>
+  </div>
+`;
+
+class Logo extends HTMLElement {
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      this.attachShadow({ mode: 'open' });
+      this.shadowRoot.appendChild(template.content.cloneNode(true));
+    }
+  }
+}
+
+customElements.define('x-logo', Logo);
diff --git a/packages/init/src/template/src/favicon.ico b/packages/init/src/template/src/favicon.ico
diff --git a/packages/init/src/template/src/pages/index.html b/packages/init/src/template/src/pages/index.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="en" prefix="og:http://ogp.me/ns#">
+  <head>
+    <title>Greenwood</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
+    <link rel="shortcut icon" href="/favicon.ico">
+    <link rel="icon" href="/favicon.ico">
+
+    <style>
+      :root {
+        --font-primary: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+      }
+
+      body {
+        font-family: var(--font-primary);
+        margin: 0;
+        overflow: hidden;
+      }
+
+      main {
+        max-width: 1280px;
+        margin: 0 auto;
+        padding: 2rem;
+        text-align: center;
+      }
+
+      ul {
+        list-style-type: none;
+        padding: 0;
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+      .card {
+        margin: 5px auto;
+        padding: 1rem;
+        height: 125px;
+        vertical-align: text-top;
+        border-radius: 1rem;
+        color: #edefec;
+        background-image: linear-gradient(to top left, #020202, #2e3440);
+      }
+
+      a, a:visited, a:hover {
+        color: #edefec;
+        text-decoration: underline;
+      }
+
+      h2 {
+        text-decoration: underline;
+      }
+
+      @media(min-width: 768px) {
+        .card {
+          display: inline-block;
+          width: 40%;
+        }
+      }
+
+      x-logo {
+        display: block;
+        min-height: 100px;
+        margin-bottom: 125px;
+      }
+    </style>
+
+    <script type="module" src="../components/logo/logo.js"></script>
+  </head>
+
+  <body>
+    <main>
+
+      <h1>Welcome to Greenwood!</h1>
+
+      <x-logo></x-logo>
+
+      <h1>Edit <code>src/pages/index.html</code> to start making changes</h1>
+
+      <div class="card-wrapper">
+        <div class="card">
+          <h2>Getting Started</h2>
+          <p>Follow our <a href="https://www.greenwoodjs.io/getting-started/">guide</a> on learning Greenwood for the first time.</p>
+        </div>
+
+        <div class="card">
+          <h2>Docs</h2>
+          <p>Learn about Greenwood's <a href="https://www.greenwoodjs.io/docs/">features and capabilities</a>.</p>
+        </div>
+
+        <div class="card">
+          <h2>Guides</h2>
+          <p>Walkthroughs on ways to <a href="https://www.greenwoodjs.io/guides/">build and deploy</a> with Greenwood.</p>
+        </div>
+
+        <div class="card">
+          <h2>Community</h2>
+          <p>Come join us on <a href="https://github.com/ProjectEvergreen/greenwood">GitHub</a> and <a href="https://discord.gg/nhAq8zAS">Discord</a> to get involved.</p>
+        </div>
+      </div>
+
+    </main>    
+  </body>
+</html> 
diff --git a/packages/init/src/template/src/pages/index.md b/packages/init/src/template/src/pages/index.md
diff --git a/packages/init/test/cases/init.default/init.default.spec.js b/packages/init/test/cases/init.default/init.default.spec.js
@@ -35,6 +35,7 @@ describe('Scaffold Greenwood With Default Template: ', function() {
 
     before(async function() {
       await fs.promises.mkdir(outputPath);
+
       runner.setup(outputPath);
       runner.runCommand(initPath);
     });
@@ -88,11 +89,27 @@ describe('Scaffold Greenwood With Default Template: ', function() {
       });
     });
 
-    describe('initial page contents', function() {
-      it('should have the correct contents for src/pages.index.md', function() {
-        const pageContents = fs.readFileSync(path.join(outputPath, 'src/pages/index.md'), 'utf-8');
+    describe('home page contents', function() {
+      let pageContents;
+
+      before(async function() {
+        pageContents = fs.readFileSync(path.join(outputPath, 'src/pages/index.html'), 'utf-8');
+      });
+
+      it('should have the expected getting started prompt', function() {
+        expect(pageContents).to.contain('<h1>Edit <code>src/pages/index.html</code> to start making changes</h1>');
+      });
+
+      it('should have the card headings for src/pages/index.html', function() {
+        expect(pageContents).to.contain('<h2>Getting Started</h2>');
+        expect(pageContents).to.contain('<h2>Docs</h2>');
+        expect(pageContents).to.contain('<h2>Guides</h2>');
+        expect(pageContents).to.contain('<h2>Community</h2>');
+      });
 
-        expect(pageContents).to.equal('## My Project');
+      it('should have a <script> tag to the logo component', function() {
+        expect(pageContents).to.contain('<script type="module" src="../components/logo/logo.js"></script>');
+        expect(pageContents).to.contain('<x-logo></x-logo>');
       });
     });
   });