projectevergreen / greenwood-getting-started Goto Github PK

As a "getting started" template, it would stand to reason that it probably should only promote web standards, which in this repo is conflicted due to usages of:

1. nested CSS
2. import for CSS files

Examples

1. https://github.com/ProjectEvergreen/greenwood-getting-started/blob/master/src/components/footer/footer.css
2. https://github.com/ProjectEvergreen/greenwood-getting-started/blob/master/src/components/footer/footer.js

What we should do here is the following

1. For any instances of import xxx from some.css, put that right into the JavaScript template, e.g.

   // create templates that interpolate variables and HTML!
   getTemplate() {
   
     return `
       <style>
         /* contents of CSS file goes here instead */
       </style>
     
       /* some HTML code */
     `;
   }

2. Un nest any of that CSS
3. Remove dependency on @eve-container/eve-container and replace with FlexBox / Grid equivalent

This will be important as the next version of Greenwood, while custom PostCSS plugins will still be supported, it wont be by default, so if a project wants to use nested CSS, that's great, they can by just installing it into their project.

Problem

No idea why this scroll is present in blog/page template; it looks out of place.

Solution

Remove it

Update
https://github.com/ProjectEvergreen/greenwood-getting-started/blob/master/src/assets/greenwood-logo.png
to
https://github.com/ProjectEvergreen/greenwood/blob/master/www/assets/greenwood-logo-og.png

Overview

Although we are just using Light DOM for the header and footer, e.g.

export default class HeaderComponent extends HTMLElement {
  // run some code to set HTML when the component is ready
  connectedCallback() {
    this.innerHTML = this.getTemplate();
  }

  // create templates that interpolate variables and HTML!
  getTemplate() {
    return `
      <!-- a bunch of HTML -->
    `;
  }
}

customElements.define('app-header', HeaderComponent);

It would likely be a bit more idiomatic to use a <template> tag

const template = document.createElement('template');

template.innerHTML = `
  <!-- a bunch of HTML -->
`;

export default class HeaderComponent extends HTMLElement {
  // run some code to set HTML when the component is ready
  connectedCallback() {
    this.innerHTML = template.content.cloneNode(true); // or something similar
  }
}

customElements.define('app-header', HeaderComponent);

Would also want to make sure this change is reflected in the Greenwood getting started guide
https://www.greenwoodjs.io/getting-started/branding/#templating

remote: GitHub found 4 vulnerabilities on ProjectEvergreen/greenwood-getting-started's default branch (2 critical, 1 high, 1 moderate). To find out more, visit:
remote: https://github.com/ProjectEvergreen/greenwood-getting-started/security/dependabot

Running a Lighthouse report, looks like we could improve the SEO score by adding a <meta> description.

Wonder if this should be a Greenwood default instead?

Getting the following error

Error: ENOENT: no such file or directory, mkdir '/path/to/project/greenwood-getting-started/.greenwood/blog/first-post'

Full error output

$ npm run build

> [email protected] build /path/to/project/greenwood-getting-started
> greenwood build

-------------------------------------------------------
Welcome to Greenwood ♻️
-------------------------------------------------------
Reading project config
Initializing project workspace contexts
Generating graph of workspace files...
Scaffolding out project files...
Generate pages from templates...
Error: ENOENT: no such file or directory, mkdir '/path/to/project/greenwood-getting-started/.greenwood/blog/first-post'
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `greenwood build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /path/to/log/.npm/_logs/2019-10-03T01_12_47_261Z-debug.log

Greenwood recently introduced a new logo and favicon.ico - ProjectEvergreen/greenwood#1094.

It would be good to copy that same favicon.ico file over into the src/ directory to update the existing one.

Currently the content of each page is set in the respective CSS is hardcoded to a certain height. This helps the <footer> from appearing in the middle of the page.

Ideally it would be nice to keep the footer at the bottom of the viewport at all times dynamically.

To help keep things consistent when contributing to this project, we should probably integrate the same tools we are using in Greenwood

• ESLint
• Stylelint
• Ls-lint

We should mimic Greenwood and create a grouped lint npm script and make sure that gets added to our GitHub Actions here.

To Github pages and / or Netlify