cloud-ri/cloud-ri.github.io

Cloud RI Website

cloud-ri.github.io

Cloud RI is a passionate group connecting, presenting and networking around cloud technology. You can check us out on our Meetup group.

Setup

1. Have NodeJS installed
2. Clone the repo
3. Run npm ci

Development

• npm start - Starts a local development server
• npm run build - Creates a production build
• npm run serve - Runs the build task and starts up a local preview server at localhost:8080

cloud-ri.github.io's Issues

Lighthouse SEO recommendations

Did a quick Lighthouse report and found some low hanging fruit we could probably easily do and could probably be a good first issue here for this repo.

Fixing the image would also help with Lighthouse a11y score as well.

---

Also, related to images and performance, it would be good to add height / width too.

Lighthouse Accessibility Recommendations

Did a quick Lighthouse report and found some low hanging fruit we could probably easily do and could probably be a good first issue here for this repo.

large payload size (from Tailwind)

Noticed that in the network tab, the site if pulling down almost 3.0 MB which is interesing though as the actual stats don't seem to indicate that.

The most likely culprit is the Tailwind CSS being loaded from unpkg which I can confirm on its own does seem to be the draw of the weight.

Lighthouse seems to corroborate this as well.

---

We might want to consider using Greenwood's PostCSS plugin to install Tailwind, which will allow us to purge un-used CSS at build time. I have a couple projects doing this now and it works pretty well!

• https://github.com/AnalogStudiosRI/www.blissfestri.com
• https://github.com/AnalogStudiosRI/www.tuesdaystunes.tv

Let me know your thoughts

Upgrade to greenwood/cli 0.29.0

Upgrade to "@greenwood/cli": "^0.29.0"

add `type=module` to package.json

As Greenwood is an ESM based project, in particular if / when you want to add a greennwod.config.js or use any additional server side / NodeJS capabilties, you will inevitably get this error

➜  cloud-ri.github.io git:(main) npm run build

> [email protected] build
> greenwood build

-------------------------------------------------------
Welcome to Greenwood (v0.28.5) ♻️
-------------------------------------------------------
Initializing project config
(node:91889) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
/Users/owenbuckley/Workspace/cloud-ri/cloud-ri.github.io/greenwood.config.js:1
export default {
^^^^^^

SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1088:15)
    at Module._compile (node:internal/modules/cjs/loader:1123:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Module._load (node:internal/modules/cjs/loader:878:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:530:24)

Node.js v18.12.1

So would be good to get on added to package.json to be consistent, e.g.

{
  "type": "module"
}

prerendering and static optimization considerations

On a casual observation, noticed the site could achieve a couple enhancements around performance and SEO through
leveraging a couple Greenwood features.

Prerendering
Being able to prerender custom elements means that for example, the header and footer instead of just rendering out initially as just the tag

<app-header></app-header>

can now (pre) render out their entire HTML, generated at build time (you can check this out by viewing source in the browser for the sent HTML)

<app-header>
  <header class="bg-white shadow-lg">
    <div class="max-w-6xl mx-auto px-4">
      <div class="flex justify-between">
        <div class="flex space-x-5">
          <div>
            <a href="/" class="flex py-4 px-2">
              <span class="text-black-500 text-xl">Cloud RI</span>
            </a>
          </div>
          <nav class="space-x-1 pt-5">
            <a href="/content/code-of-conduct/" class="py-4 px-2 text-gray-500 hover:text-green-500 transition duration-300">Code of Conduct</a>
            <a href="/content/join/" class="py-4 px-2 text-gray-500 hover:text-green-500 transition duration-300">Join</a>
          </nav>
        </div>
      </div>
    </div>
  </header>
</app-header>

This can be achieved with this setting

// greenwood.config.js
export default {
  prerender: true
}

Static Optimization

For things like the header and footer that are just static and have no interactivity, we can optionally strip these tags away so there doesn't have to be any JavaScript loaded for these files

We can achieve this through by adding this attribute to the header and footer <script> tags in app.html

<script type="module" src="/components/header.js" data-gwd-opt="static"></script>

So combined with prerender: true we can now get fully static HTML and not have to load any JS! 🎉

---

Anyway, just some thoughts to share

Add social menu

Could this be a greenwood component? ie, something other projects could use?

Could I somehow use https://github.com/ProjectEvergreen/greenwood/blob/master/www/components/social-icons/social-icons.js

And add meetup/linkedin, remove slack/twitter?

convert CSS in theme.css to tailwind classes

Since it doesn't look like there is anything custom in styles/theme.css, for consistency it would probably be best to refactor them be to tailwind class names in the HTML / CSS.