feat: add new content

Add placeholder content for /projects and copy over code of conduct and things, with a custom layout to fix the markup nicely.
hasancruk · Jul 19, 2024 · 2a3b0bc · 2a3b0bc
1 parent d317795
commit 2a3b0bc
Show file tree

Hide file tree

Showing 10 changed files with 417 additions and 150 deletions.
diff --git a/eleventy.config.cjs b/eleventy.config.cjs
@@ -5,7 +5,10 @@ module.exports = function(eleventyConfig) {
     components: "./src/_includes/components/**/*.webc"
   });
 
-  eleventyConfig.addPassthroughCopy({"public": "assets"});
+  eleventyConfig.addPassthroughCopy({
+    "public": "assets",
+    "./node_modules/@hasancruk/cruk-textarea/cruk-textarea.js": "scripts/cruk-textarea.js",
+  });
 
   return {
     dir: {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "@11ty/eleventy": "^2.0.1"
   },
   "dependencies": {
-    "@11ty/eleventy-plugin-webc": "^0.11.1"
+    "@11ty/eleventy-plugin-webc": "^0.11.1",
+    "@hasancruk/cruk-textarea": "^0.1.0"
   }
 }
diff --git a/src/_includes/components/site-header.webc b/src/_includes/components/site-header.webc
@@ -1,8 +1,9 @@
 <header>
   <nav>
     <ul>
+      <li><a href="/">Home</a></li>
       <li><a href="/projects">Projects</a></li>
-      <li><a href="/blog">Blog</a></li>
+      <li><a href="/community">Community</a></li>
       <li><a href="https://github.com/crUKorg/creative-spaces-community" target="_blank">GitHub</a></li>
     </ul>
     <search>
@@ -19,11 +20,10 @@
 
 <style webc:scoped>
   :host(header) {
-    padding-inline: 0.5rem;
-    padding-block: 0.5rem;
+    padding: 0.5rem 0.5rem 0;
 
     @media(min-width: 768px) {
-      padding-inline: 1rem;
+      padding: 1rem 1rem 0;
     }
   }
 

diff --git a/src/_includes/layouts/base.css b/src/_includes/layouts/base.css
@@ -79,27 +79,37 @@
 
   body {
     font-family: var(--font-base, sans-serif);
+    line-height: 1.5rem;
   }
 
   h1, h2, h3, h4, h5, h6, p {
     max-width: 60ch;
   }
 
   h1, h2, h3, h4, h5, h6 {
+    line-height: 1;
     font-family: var(--font-heading, sans-serif);
   }
 
   h1 {
     font-size: clamp(2.25rem, 3vw + 1rem, 5rem);
     font-weight: 700;
     margin-block-end: 1.5rem;
+
+    @media(min-width: 768px) {
+      margin-block-end: 2rem;
+    }
   }
 
   h2 {
     font-size: clamp(1.5rem, 3vw + 1rem, 3rem);
     color: var(--text-secondary);
     font-weight: 700;
     margin-block-end: 0.75rem;
+
+    @media(min-width: 768px) {
+      margin-block-end: 1rem;
+    }
   }
 
   h3 {
@@ -108,16 +118,22 @@
     margin-block-end: 0.5rem;
   }
 
+  ol, ul {
+    list-style-position: inside;
+
+    &:not(nav &) {
+      margin-block-end: 1rem;
+    }
+  }
+
   ol {
     list-style-type: decimal;
-    list-style-position: inside;
   }
 
   ul {
     list-style-type: disc;
-    list-style-position: inside;
   }
-
+    
   a {
     font-weight: 700;
     color: var(--text-base);
@@ -148,17 +164,6 @@
     white-space: nowrap;
     width: 1px;
   }
-
-  @media(min-width: 768px) {
-    h1 {
-      line-height: 1;
-      margin-block-end: 2rem;
-    }
-
-    h2 {
-      margin-block-end: 1rem;
-    }
-  }
 }
 
 @layer theme {

diff --git a/src/_includes/layouts/base.webc b/src/_includes/layouts/base.webc
@@ -18,9 +18,9 @@
 		<script @raw="getBundle('js')" webc:keep></script>
   </head>
   <body>
-    <!-- TODO Implement site header and link to new content -->
     <site-header></site-header>
     <main @html="this.content"></main>
     <site-footer></site-footer>
+    <script @raw="getBundle('js', 'defer')" type="module" webc:keep></script>
   </body>
 </html>
diff --git a/src/_includes/layouts/content.webc b/src/_includes/layouts/content.webc
@@ -0,0 +1,44 @@
+---
+layout: layouts/base.webc
+---
+<script webc:setup>
+  function getH1toH2(content) {
+    const regex = /<h1\b[^>]*>.*?(?=<h2\b|$)/;
+    const match = content.match(regex);
+    return match?.[0];
+  }
+
+  function getAllSections(content) {
+    const regex = /<h2\b[^>]*>.*?(?=<h2\b|$)/g;
+    const matches = [...content.matchAll(regex)];
+    return matches
+      .map(match => match[0])
+      .map(body => `<section>${body}</section>`)
+      .join("");
+  }
+
+  function extractContent(content) {
+    const topSection = getH1toH2(content);
+    const remainingContent = content.replace(topSection, "");
+    const allSections = getAllSections(remainingContent);
+
+    return {
+      topSection,
+      allSections,
+    };
+  }
+
+  function getContent(content) {
+    const trimmedContent = content.replaceAll("\n", "");
+    const { topSection, allSections } = extractContent(trimmedContent);
+
+    return `
+      ${topSection}
+      <article>
+        ${allSections}
+      </article>
+    `;
+  }
+</script>
+
+<template webc:root @html="getContent(this.content)"></template>
diff --git a/src/community.md b/src/community.md
@@ -0,0 +1,46 @@
+---
+layout: layouts/content.webc
+title: Community
+---
+<h1 class="sr-only">Creative Spaces Community</h1>
+
+[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.1-4baaaa.svg)](/conduct) 
+
+This is a living repo and it will evolve alongside the community. It's primary use will be to capture the core values of the community, formats of the sessions, and coordinating project and experiment ideas.
+
+## Purpose & Values 
+
+* A safe space for people to be creative with the web
+* A space for enthusiasts to tinker and experiment 
+* A place where you can bring your projects
+* Or collaborate with someone who’s already started one
+
+This kind of sandbox environment can enable you to test new ideas to take back to your teams, get feedback from others so you can iterate, or just simply be creative if that’s all you want to do.
+
+## Format Ideas
+
+All of these formats must adhere to the community guidelines.
+
+### Show & Tell
+
+A forum to share something you've been working on. This could range from something you've been working on to something you've been intrigued by.
+
+### Internal & External Speakers
+
+This would require a fair bit of organization (especially the external speakers), but this would be nice to expand our reach.
+
+### Hack and learn
+
+A day event where we can collaborate on a theme, either altogether or in small groups. The purpose of this format is to work together on a problem while potentially learning something new.
+
+### Bake-off
+
+Akin to a multi-day hack and learn. We can use this longer-format session to solve the same problem with different tools and approaches. The purpose of this is to collaborate but also evaluate tools and ideas quickly. An example of a session would be to build a website, but the constraints would be to either use a novel tool/framework or that it should load no JavaScript. At the end of the session, we can share our learnings so we can compare and contrast the approaches and tools we've explored. This could be used as a sandbox environment to validate questions and concerns we might have in other areas of work.
+
+### Hasan's Hot Takes™ (discontinued)
+
+> REASON: While we can still have conversations that are provocative, critical, analytical and in good spirit, I think it's problematic to even brand it as a "hot take". I find “hot takes” need a very specific tone and context to foster any meaningful discussion and debate. More often than not, it descends into unproductive one-sided conversations.
+
+This would be a time-blocked discussion (similar to lean coffee) where we can discuss any hot take related to the web and being creative with the web. The aim for it is to be provocative, critical and analytical, all the while being inclusive of others in the discussion.
+
+An example of a hot take would be: "HTML & CSS are complex and hard". The discussion that follows would aim to dissect what about HTML and CSS might be complex, what are some pain points and how are we addressing them day-to-day, and etc.
diff --git a/src/conduct.md b/src/conduct.md
@@ -0,0 +1,90 @@
+---
+layout: layouts/content.webc
+title: Code of Conduct
+---
+<h1 class="sr-only">Contributor Covenant Code of Conduct</h1>
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, caste, color, religion, or sexual
+identity and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+* Demonstrating empathy and kindness toward other people
+* Being respectful of differing opinions, viewpoints, and experiences
+* Giving and gracefully accepting constructive feedback
+* Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+* Focusing on what is best not just for us as individuals, but for the overall
+  community
+
+Examples of unacceptable behavior include:
+
+* The use of sexualized language or imagery, and sexual attention or advances of
+  any kind
+* Trolling, insulting or derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or email address,
+  without their explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement, and they are
+Hasan Ali (Hasan.Ali@cancer.org.uk) and David Adegbiyi (David.Adegbiyi@cancer.org.uk).
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.1, available at
+[https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1].
+
+Community Impact Guidelines were inspired by
+[Mozilla's code of conduct enforcement ladder][Mozilla CoC].
+
+For answers to common questions about this code of conduct, see the FAQ at
+[https://www.contributor-covenant.org/faq][FAQ]. Translations are available at
+[https://www.contributor-covenant.org/translations][translations].
+
+[homepage]: https://www.contributor-covenant.org
+[v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html
+[Mozilla CoC]: https://github.com/mozilla/diversity
+[FAQ]: https://www.contributor-covenant.org/faq
+[translations]: https://www.contributor-covenant.org/translations
diff --git a/src/projects.webc b/src/projects.webc
@@ -0,0 +1,60 @@
+---
+layout: layouts/content.webc
+title: Community
+---
+<script webc:bucket="defer">
+  const toggle = document.getElementById("idea-toggle");
+  const dialog = document.getElementById("idea-dialog");
+
+  toggle.addEventListener("click", () => {
+    dialog.showModal();
+  });
+  import "/scripts/cruk-textarea.js";
+</script>
+
+<template webc:type="11ty" 11ty:type="liquid,md">
+# Projects
+
+Here are some of the projects from the Creative Spaces community:
+
+- This site
+</template>
+
+<button id="idea-toggle">Submit an idea</button>
+<dialog id="idea-dialog">
+  <form method="dialog">
+    <label>
+      <span>Idea</span>
+      <cruk-textarea>
+        <textarea name="idea"></textarea> 
+      </cruk-textarea>
+      <button type="submit">Send</button>
+    </label>
+  </form>
+</dialog>
+
+<template webc:type="11ty" 11ty:type="liquid,md">
+## Inspiration
+
+- Cassie Codes
+- Raspberry Pi
+</template>
+
+<style webc:scoped>
+  :host(#idea-dialog) {
+    border: 0.15rem solid #212121;
+    border-radius: 1rem;
+    width: 85%;
+    max-width: 35rem;
+  }
+
+  :host(#idea-dialog > form > *) {
+    display: block;
+    margin-block: 0.8rem;
+  }
+
+  :host(#idea-dialog > form > div) {
+    margin-block-end: 1.5rem;
+    display: grid;
+  }
+</style>