Added Categories to FAQs and updated README instructions

README.md

@@ -2,21 +2,104 @@
 
 The instructions for contributing to the website depend on whether or not you have write access to the main repository.
 
-### If you have write access ...
+### Prerequisites 
 
-Create a new branch from `main`:
+Before you begin, ensure you have Node.js and npm (Node Package Manager) installed in your local environment.
 
-* `git checkout main`
-* `git pull` (to ensure your copy is up to date)
-* `git checkout -b <new branch name>`
+#### Check Installation
+Run the following commands in your terminal:
 
-### If you do not have write access ...
+```
+node -v
+npm -v
+```
+If a version number (e.g., v18.17.0) appears, you are ready. If not, follow the installation steps for your OS:
+
+| Operating System | Command / Action |
+| macOS | Run brew install node (requires Homebrew) |
+| Ubuntu/Linux | sudo apt update && sudo apt install nodejs npm |
+| Windows | Download the installer from nodejs.org |
+
+#### Getting the Code
+
+From your local terminal command line, set up a working directory and go to that directory.
+The method for downloading the code depends on your access level to the [CoreCollective website repository](https://github.com/CoreCollective-dev/cc-website)
+
+**If you do not have write access...**
+
+Fork the repository to your own namespace first using the Fork button in the GitHub repo UI.
+Clone your fork locally (replace YOUR-USERNAME with your GitHub handle)
+
+```
+git clone https://github.com/YOUR-USERNAME/cc-website.git
+cd cc-website
+```
+
+**If you have write access...**
+
+* Clone the main repository directly:
+
+```
+git clone https://github.com/CoreCollective-dev/cc-website.git
+cd cc-website
+```
+
+* Create a new branch from main:
+
+```
+git checkout main
+git pull  # Ensures your local copy is up to date
+git checkout -b <new-branch-name>
+```
+
+#### Initialize and Test
+
+Now that the code has been brought into a local repo, you'll need to initialize
+if and test to make sure your config is working.
+
+```
+npm install
+npm run dev
+```
+
+Open http://localhost:3000 (or the port shown in your terminal) to preview your changes.
+
+#### Make Changes and Test Locally
+
+Modify the files you need to update in your local working directory
+
+Validate the results using `npm run dev` 
+
+#### Submit Changes
+
+You're now ready to submit the changes back the the github repository!
+
+**If you have direct write access...**
+
+```
+git add .
+git commit -m "Description of changes"
+git push origin main
+```
+
+**If using the Fork method...**
+
+```
+git add .
+git commit -m "Description of changes"
+git push origin <your branch name>
+```
+
+#### Submit the Pull Request
 
-Fork the repository to your own namespace
+Regardless of your access level, the final step happens on the GitHub website:
+1 Navigate to the original repository: https://github.com/CoreCollective-dev/cc-website.
+2 You will see a yellow banner at the top of the page. Click "Compare & pull request."
+3 Ensure the base repository is CoreCollective-dev/cc-website and the base branch is main.
+4 Click "Create pull request."
 
-### In both cases ...
+**Note:** Opening a PR will automatically trigger a test deployment. Look for a comment from a "bot" in your PR thread providing a cloudfront.net URL to preview your work live.
 
-When you have made your changes and tested them with `npm run dev`, push them back to GitHub and raise a pull request against the `main` branch. This will trigger the deployment of a test version under a cloudfront.net URL.
 
 ## Updating Member logos
 

src/content/config.ts

@@ -41,6 +41,7 @@ const faqCollection = defineCollection({
     z.object({
       question: z.string(),
       answer: z.string(),
+      category: z.string().optional(),
     })
   ),
 });

src/content/faq/faq.yaml

@@ -6,24 +6,28 @@
     At a future date each Working Group will have a team page which
     includes the group calendar and a place to store files.
     Until then, all WG information will be shared via the Google Group.
+  category: "Working Group FAQs"
 
 - question: "What CoreCollective groups are available to join?"
   answer: >
     The <a href="/working-groups/">Working Groups</a> page lists all the
     active working groups.
     Click on the group title to get to the Google Group page where you can
     request to join and see the archives.
+  category: "Working Group FAQs"
 
 - question: "Can I join via email instead of the Google Groups page?"
   answer: >
     Yes, send an empty email to [group-name]+subscribe@corecollective.dev.
+  category: "Mailing List FAQs"
 
 - question: "Are working group archives public?"
   answer: >
     Yes, working groups keep public archives of the mailing list traffic.
     You don't need to be a member of a group to read the archive.
     You can see the mailing list archive by clicking on the group name
     on the <a href="/working-groups/">Working Groups</a> page.
+  category: "Mailing List FAQs"
 
 - question: "How do I propose a new CoreCollective Working Group?"
   answer: >
@@ -35,6 +39,7 @@
       <li>Providing a list of recommended WG member companies and a willingness to approach them is essential for kicking off a new WG.</li>
     </ul>
     <p>The above can be sent to <a href="mailto:enquiries@corecollective.dev">enquiries@corecollective.dev</a> for consideration. A member of the leadership team will respond with additional questions and proposed next steps.</p>
+  category: "Working Group FAQs"
 
 - question: "How does CoreCollective work?"
   answer: >
@@ -52,6 +57,7 @@
     The scope, priorities and approach of an initiative is set by the members who sponsor it.
     Management of the initiative is provided by CoreCollective on behalf of the sponsoring members.
     </p>
+  category: "CoreCollective General FAQs"
 
 - question: "How is CoreCollective organized?"
   answer: >
@@ -63,6 +69,7 @@
     multiple interest areas, and is responsible for oversight of the Working Groups.
     It is the TAC which approves new Working Groups and who evaluates the state of each active
     group on a regular basis.
+  category: "CoreCollective General FAQs"
 
 - question: "Who runs CoreCollective?"
   answer: >
@@ -71,3 +78,4 @@
     Linaro operates the project on behalf of the Arm ecosystem according to the terms of the
     <a href="/charter/">CoreCollective Charter</a>,
     and is accountable to the <a href="/about/">CoreCollective Governing Board</a>.
+  category: "CoreCollective General FAQs"

src/pages/faq/index.astro

@@ -5,6 +5,19 @@ import { getEntry } from 'astro:content';
 
 const faqData = await getEntry('faq', 'faq');
 const faqs = faqData?.data || [];
+
+// 1. Group the FAQs by their category
+const groupedFaqs = faqs.reduce((acc, faq) => {
+  const category = faq.category || 'General'; // Default to 'General' if category is missing
+  if (!acc[category]) {
+    acc[category] = [];
+  }
+  acc[category].push(faq);
+  return acc;
+}, {} as Record<string, typeof faqs>);
+
+// 2. Get the list of category names
+const categories = Object.keys(groupedFaqs);
 ---
 
 <BaseLayout title="FAQ">
@@ -19,32 +32,43 @@ const faqs = faqData?.data || [];
     <h1 class="text-center text-3xl font-bold text-white md:text-5xl">
       Frequently Asked Questions
     </h1>
-    <div class="mx-4 flex w-full max-w-4xl flex-col gap-4 text-left md:mx-0">
+
+    <div class="mx-4 flex w-full max-w-4xl flex-col gap-12 text-left md:mx-0">
       {
-        faqs.map((faq) => (
-          <details class="group rounded-lg border border-white/10 bg-white/5">
-            <summary class="flex cursor-pointer items-center justify-between px-6 py-5 text-lg font-semibold text-white transition-colors hover:text-cc-cyan md:text-xl [&::-webkit-details-marker]:hidden">
-              <span>{faq.question}</span>
-              <svg
-                class="h-5 w-5 shrink-0 transition-transform group-open:rotate-180"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M19 9l-7 7-7-7"
-                />
-              </svg>
-            </summary>
-            <div class="prose prose-invert prose-lg max-w-none px-6 pb-5 font-light text-white/80 prose-a:text-cc-cyan prose-li:text-white/80">
-              <Fragment set:html={faq.answer} />
-            </div>
-          </details>
+        categories.map((category) => (
+          <section class="flex flex-col gap-4">
+            {/* THIS IS YOUR NEW HEADER */}
+            <h2 class="text-2xl font-bold text-cc-cyan border-b border-white/10 pb-2 mb-2">
+              {category}
+            </h2>
+
+            {groupedFaqs[category].map((faq) => (
+              <details class="group rounded-lg border border-white/10 bg-white/5">
+                <summary class="flex cursor-pointer items-center justify-between px-6 py-5 text-lg font-semibold text-white transition-colors hover:text-cc-cyan md:text-xl [&::-webkit-details-marker]:hidden">
+                  <span>{faq.question}</span>
+                  <svg
+                    class="h-5 w-5 shrink-0 transition-transform group-open:rotate-180"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M19 9l-7 7-7-7"
+                    />
+                  </svg>
+                </summary>
+                <div class="prose prose-invert prose-lg max-w-none px-6 pb-5 font-light text-white/80 prose-a:text-cc-cyan prose-li:text-white/80">
+                  <Fragment set:html={faq.answer} />
+                </div>
+              </details>
+            ))}
+          </section>
         ))
       }
     </div>
   </div>
 </BaseLayout>
+