feature/issue 30 home page

[thescientist13]

Related Issue

resolves #30

Summary of Changes

1. New home page!
2. Additional tweaks to global link styles
3. Minor tweaks to header / footer styles

TODO

1. Hero Banner / footer copy to clipboard + sprite
2. Capabilities
   • code editor layout / behavior / responsiveness
   • walk through icon active states (using <img> and not <svg>)
   • fading animation for code snippets? (nice to have)
   • scroll bar styling?
3. First draft content
   • walk through content / code snippets - rename to capabilities
   • why greenwood
   • hybrid rendering redundant with server rendering? (hybrid routing?)
4. basic mobile / responsiveness styling
5. improve technique for collapsing the footer (no extra whitespace) - N / A, moving away from the roundedness
   
6. final polish / designs check / internal review feedback - feature/issue 30 home page #57 (comment)
7. rebase and reconcile patches
8. internal review feedback round 2 - feature/issue 30 home page #57 (comment)
9. Lighthouse - feature/issue 30 home page #57 (comment)
10. 🚨 cross browser testing
    • import attributes are actually not baseline! 😱 - feature/issue 30 home page #57 (comment)
    • misc style issues in Safari - feature/issue 30 home page #57 (comment)
11. add (placeholder) links where applicable / best guess
12. External feedback
13. Use the design system! (e.g. open props vars, favor class names over element selectors, breakpoint vars)
14. Third round internal feedback - feature/issue 30 home page #57 (comment)

Nice to Have / new issues

1. grid line background design aesthetic (nice to have / new issue) - grid lines aesthetic on the home page #80
2. terminal aesthetic for capabilities snippets - will save treatment for components, real estate / effort / distraction is too much for the home page
3. init capabilities content needs to be SSR'd and / or working without JS? - Progressively Enhanced Capabilities content #81
   • or put it into light DOM, but how to hide?
   • or just put walkthrough into the Light DOM, fight the @import?
4. Use { } for the SVG icon for API Routes capability - use curly braces ({ }) as the icon for API Routes in the "capabilities" section of the home page #79

Thoughts / Questions

1. top level section links, or lots of little links - going with top level links
2. what to do with the whitespace on the top right of the page? - deferred Hero Banner image / graphic #78
   • swing the buttons up and over to the right? - can make a discussion for making a hero image
3. condensed format for mobile and desktop for walk through? (why not both?)
4. (unrelated / make new issue?) What to about link (<a>) pseudo classes e.g. :active, :visited
   • yes. also the same feedback given during the first draft review
5. do need / have links for the why greenwood section? - no, doesn't seem relevant
6. should we keep the rounded footer? - N / A, we're doing "flat" edges between sections now per feedback
7. should we have an image or background image for the hero - Hero Banner image / graphic #78

Upstreams

1. CSS Modules DX tracking - CSS Modules ™️ plugin greenwood#1233
   • is breaking on components with hyphens in the file name - no longer reproducible
   • should warn for undefined class name entries (see <app-run-anywhere>)
2. Nested script tag attributes (e.g. prettier) breaks static optimization :o - prerendering breaks optimization configuration with multi-line formatted <script> / <style> / <link> tags greenwood#1241
3. var(--) spacing bug - functions in CSS declarations (like CSS var) are being incorrectly optimized greenwood#1242
4. support frontmatter import attributes - frontmatter import attributes greenwood#1255
5. postcss-import still needed to use @import with adoptedStyleSheets since @import is not allowed in a shadow root, however, because of our inlining of CSSStyleSheet, and so all that global CSS ends up coming back into the JS bundle anyway??? :/
   • see demo/home page greenwood Super CSS (SCSS) optimizations #74 111
6. PostCSS (or csstree?) dev parsing error - wrong syntax on my part, aka skill issue

   Parse error: Colon is expected
   4 |  padding: 0;
   5 |
   6 |  @media (width >= 1080px) {
   -----------------------^
   7 |    max-width: 60%
   8 |  }

7. PostCSS (or csstree?) build parsing error - Parse error with CSS custom properties with default values including a nested calc postcss/postcss-calc#77

   Parse error: ")" is expected
   73 |  --font-size-fluid-3: clamp(2rem, 9vw, 3.5rem);
   74 |}
   75 |@custom-media --motionOK      (prefers-reduced-motion: no-preference);
     ------------------------------------------------------------^
    # etc

---

Misc (Markdown) Things (Greenwood discussion?) - ProjectEvergreen/greenwood#1267

1. indentation not aligned or else loses parsing / highlighting?

   <div class="walkthrough-card card2">
     <span>CSS Second</span>
     <p>Yay CSS!</p>
   
   <-- will lose parsing / highlighting if indented to align with the <p> tag -->
   ```css
   h3 { color: red}
   ```
   </div>
   ````md

2. also looks like prettier formats everything to the left automatically anyway?

   <section class="top">
   
   <app-latest-post
       link="/blog/release/v0.30.0/"
       title="We just launched v0.30.0">
   </app-latest-post>
   
   <app-hero-banner></app-hero-banner>

3. line breaks introduces <p> tags?

   <app-latest-post
     link="/blog/release/v0.30.0/"
     title="We just launched v0.30.0">
   </app-latest-post>

4. <template> tag breaks parsing / highlighting

   <!-- using a template tag breaks parsing -->
   <template class="walkthrough-card card3">
     <span>JS Second</span>
     <p>Yay JavaScript</p>
   
     ```js
     console.log('hello world!');
     ```
   </template>

[netlify]

✅ Deploy Preview for super-tapioca-5987ce ready!

Name	Link
🔨 Latest commit	e409146
🔍 Latest deploy log	https://app.netlify.com/sites/super-tapioca-5987ce/deploys/66cb6f2c308bd90008a87d02
😎 Deploy Preview	https://deploy-preview-57--super-tapioca-5987ce.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[thescientist13]

Some initial design feedback from the first draft review during our weekly meeting

1. more clear section / cutoffs, not so much roundedness everywhere
2. "why greenwood" section is especially too rounded , maybe use a border with gradients (take influence svelte kit website)
3. global link colors, do the underline thing
4. less mobile padding for Walk Through
5. full stack heading is a little too big on mobile
6. consistent padding top to bottom for content sections
7. CTA button groups feels / looks a little jumbled at the top of the page
8. improve headings / letter spacing / bolder font weights / check all font colors (e.g. getting started)
9. restore "run anywhere" edge lines - N / A

[thescientist13]

Round two internal feedback

1. More line height / letter on desktop (hero, capabilities, why Greenwood) more padding - maybe the pills
2. Why Greenwood - clean up section borders, different pill border color
3. Section headings needs to be bigger / more impactful
4. Look to Vercel for link behaviors
   • navigation - lighter hover, no underline
   • buttons - lighter on hover, no underline
   • text - different color
5. stylize run anywhere pill links (black background, white text)

[thescientist13]

Sooo... CSS Modules are not actually supported in Safari / Firefox! 😨

Dang, not sure how i missed that, could have sworn those were supported?

Could see if maybe within assert instead of with works cross browser? Otherwise, I guess I will just have to use the raw plugin, e.g.

import styles from './capabilities.css?type=css';

---

So, none of the browsers like the assert keyword, so that's a non starter

Using a <link> tag for development works, but is not getting bundled, so should probably track that for a fast-follow / pre greenwood 1.0 release

template.innerHTML = `
  <link href="/components/copy-to-clipboard/copy-to-clipboard.css" rel="stylesheet"></link>
  <button id="icon" title="Copy to clipboard">${copy}</button>
`;

[thescientist13]

Doing well on Lighthouse!

Looks like I should fix the headings for this home page

but otherwise the main issues seem to be around contrast for the syntax highlighting (see #83 )

and the rest of the issues around images can be resolved with #71

[thescientist13]

Everything looks good except in Safari, there are these couple little tweaks that are needed

[thescientist13]

Good call by @aholtzman , we should wrap this in a @prefers-reduced-motion media query

[thescientist13]

Final internal feedback items

1. Add more margin above / below recent posts component on desktop
2. Until we have something for Hero Banner image / graphic #78 , for now we're better of centering of hero banner and save the "T" layout for when we can pull it off
3. Remove left / right border on Why Greenwood? heading
4. Apply @prefers-reduced-motion for code snippets
5. npx text not vertically aligned in home page hero banner