feat: support multiple authors for cart manuals

Closes #820 - Support multiple authors for carts on the website.

Changes:
- Update cart frontmatter format to: author: Name <contact>
- Contact can be GitHub username, email, or URL
- Multiple authors separated by commas
- Remove separate 'github' field from frontmatter
- Update PlayCart.js to display multiple author avatars
- Update PlayButton.js to show comma-separated author names
- Update Internet Archive upload script for multiple creators
- Convert all 139 existing cart markdown files to new format
- Update documentation with new author format examples

New author format examples:
  author: Alice <alice>                    # GitHub username
  author: Alice <alice@example.com>        # Email
  author: Alice <https://alice.dev>        # URL
  author: Alice <alice>, Bob <bob>         # Multiple authors

Author: aduros

scripts/upload-internetarchive

@@ -23,14 +23,17 @@ for cart in db:
     subprocess.run(["npx", "--package=wasm4@latest", "--", "w4", "bundle", site_root+"/static/carts/"+slug+".wasm",
         "--html", "/tmp/"+slug+".html", "--windows", "/tmp/"+slug+".exe"]);
 
+    # Extract author names from the authors array
+    creators = [author["name"] for author in cart["authors"]]
+
     metadata = {
         "collection": "wasm4",
 
         "mediatype": "software",
         "subject": "video game; computer game; game; emulation; console; fantasy console; WASM-4",
 
         "title": cart["title"],
-        "creator": cart["author"],
+        "creator": creators,  # Internet Archive supports multiple creators as a list
         "date": datetime.utcfromtimestamp(cart["date"]/1000).strftime("%Y-%m-%d"),
 
         "notes": "<p>This is a game cartridge for the WASM-4 fantasy console. The <code>"+slug+".wasm</code> file contains the cart data (ROM), in WebAssembly format. Also included are versions compiled to HTML and Windows.</p><p>Originally hosted at <a href=\"https://wasm4.org/play/"+slug+"\">https://wasm4.org/play/"+slug+"</a>.</p>",

site/docs/guides/distribution.md

@@ -75,10 +75,9 @@ The manual is a
 [Markdown](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax)
 document that should be in this format:
 
-```md
+```markdown
 ---
-author: (Your name or username)
-github: (Your github username, used to show a profile pic)
+author: Your Name <your_github_username>
 date: (When the cart was last updated, in YYYY-MM-DD format)
 ---
 
@@ -87,6 +86,19 @@ date: (When the cart was last updated, in YYYY-MM-DD format)
 Additional info can go here. It will be displayed on your game's page.
 ```
 
+### Author Format
+
+The `author` field uses the format `Name <contact>` where contact can be:
+- A GitHub username (shows profile picture): `Alice <alice>`
+- An email address: `Alice <alice@example.com>`
+- A website URL: `Alice <https://alice.dev>`
+
+For multiple authors, separate them with commas:
+
+```yaml
+author: Alice <alice>, Bob <bob@example.com>, Chris <https://chris.dev>
+```
+
 Now just commit your changes and open a pull request! As soon as it's merged, your game will appear
 on the site.
 

site/docusaurus.config.js

@@ -176,14 +176,38 @@ module.exports = {
                               throw new Error("Missing content title in markdown");
                           }
 
-                          const author = markdown.frontMatter.author;
-                          if (!author) {
+                          const authorRaw = markdown.frontMatter.author;
+                          if (!authorRaw) {
                               throw new Error("Missing author");
                           }
 
-                          const github = markdown.frontMatter.github;
-                          if (!github) {
-                              throw new Error("Missing github");
+                          // Parse author field: "Name <contact>, Name2 <contact2>"
+                          // Contact can be: GitHub username, email, or URL
+                          const authors = authorRaw.split(/,\s*(?=[^<]*(?:<|$))/).map(entry => {
+                              const match = entry.trim().match(/^(.+?)\s*<([^>]+)>$/);
+                              if (match) {
+                                  const name = match[1].trim();
+                                  const contact = match[2].trim();
+                                  let contactType, contactUrl;
+                                  if (contact.includes('@') && !contact.includes('://')) {
+                                      contactType = 'email';
+                                      contactUrl = `mailto:${contact}`;
+                                  } else if (contact.startsWith('http://') || contact.startsWith('https://')) {
+                                      contactType = 'url';
+                                      contactUrl = contact;
+                                  } else {
+                                      contactType = 'github';
+                                      contactUrl = `https://github.com/${contact}`;
+                                  }
+                                  return { name, contact, contactType, contactUrl };
+                              } else {
+                                  // No contact info, just a name
+                                  return { name: entry.trim(), contact: null, contactType: null, contactUrl: null };
+                              }
+                          });
+
+                          if (authors.length === 0) {
+                              throw new Error("No authors found");
                           }
 
                           const date = new Date(markdown.frontMatter.date).getTime();
@@ -192,7 +216,7 @@ module.exports = {
                           }
 
                           cartData = {
-                              slug, title, author, github, date, readme: readme.contents,
+                              slug, title, authors, date, readme: readme.contents,
                           };
                           allCartData.push(cartData);
 
@@ -218,7 +242,7 @@ module.exports = {
                   const indexData = allCartData.map(cartData => ({
                       slug: cartData.slug,
                       title: cartData.title,
-                      author: cartData.author,
+                      authors: cartData.authors,
                   }));
                   const cartsJsonPath = await actions.createData("carts.json", JSON.stringify(indexData));
                   actions.addRoute({

site/src/components/Carts.js

@@ -7,7 +7,14 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import PlayButton from "./PlayButton";
 
 export default function Carts ({ carts }) {
-    const cartButtons = carts.map(cart => (<PlayButton key={cart.slug} { ...cart } />));
+    const cartButtons = carts.map(cart => (
+        <PlayButton
+            key={cart.slug}
+            slug={cart.slug}
+            title={cart.title}
+            author={cart.authors.map(a => a.name).join(', ')}
+        />
+    ));
     return (
         <Layout title="Play">
             <main>

site/src/components/PlayButton.js

@@ -4,7 +4,7 @@ import Layout from '@theme/Layout';
 import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 
-export default function PlayButton ({ slug, title, author, github, colWidth }) {
+export default function PlayButton ({ slug, title, author, colWidth }) {
     return (
         <div className={`col col--${colWidth || 2} margin-vert--md col-cart`}>
           <div className="cart card">

site/src/components/PlayCart.js

@@ -60,19 +60,37 @@ export default function PlayCart ({ cart }) {
                         </RWebShare>
                     </span>
                 </h1>
-                <div className="avatar">
-                  <a
-                    className="avatar__photo-link avatar__photo avatar__photo--lg"
-                    href={`https://github.com/${cart.github}`} target="_blank"
-                  >
-                    <img src={`https://github.com/${cart.github}.png?size=128`} />
-                  </a>
-                  <div className="avatar__intro">
-                    <div className="avatar__name"><a href={`https://github.com/${cart.github}`} target="_blank">{cart.author}</a></div>
-                    <small className="avatar__subtitle">
-                      {dateString}
-                    </small>
-                  </div>
+                <div className="avatar-group">
+                  {cart.authors.map((author, index) => (
+                    <div className="avatar" key={index}>
+                      {author.contactType === 'github' ? (
+                        <a
+                          className="avatar__photo-link avatar__photo avatar__photo--lg"
+                          href={author.contactUrl} target="_blank"
+                        >
+                          <img src={`https://github.com/${author.contact}.png?size=128`} />
+                        </a>
+                      ) : (
+                        <div className="avatar__photo avatar__photo--lg avatar__photo--placeholder">
+                          {author.name.charAt(0).toUpperCase()}
+                        </div>
+                      )}
+                      <div className="avatar__intro">
+                        <div className="avatar__name">
+                          {author.contactUrl ? (
+                            <a href={author.contactUrl} target="_blank">{author.name}</a>
+                          ) : (
+                            author.name
+                          )}
+                        </div>
+                        {index === 0 && (
+                          <small className="avatar__subtitle">
+                            {dateString}
+                          </small>
+                        )}
+                      </div>
+                    </div>
+                  ))}
                 </div>
 
                 <div className="margin-top--lg">

site/src/css/custom.css

@@ -114,3 +114,24 @@ html[data-theme='dark'] .header-github-link:before {
   margin-left: 0.5em;
   vertical-align: middle;
 }
+
+/* Multiple authors support */
+.avatar-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.avatar-group .avatar {
+  flex: 0 0 auto;
+}
+
+.avatar__photo--placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--ifm-color-primary);
+  color: white;
+  font-weight: bold;
+  font-size: 1.5rem;
+}

site/static/carts/2048.md

@@ -1,6 +1,5 @@
 ---
-author: Peter Hellberg
-github: peterhellberg
+author: Peter Hellberg <peterhellberg>
 date: 2021-10-05
 ---
 

site/static/carts/antcopter.md

@@ -1,6 +1,5 @@
 ---
-author: Eduardo Bart
-github: edubart
+author: Eduardo Bart <edubart>
 date: 2022-01-23 00:00:44 GMT
 ---
 

site/static/carts/assemblio.md

@@ -1,6 +1,5 @@
 ---
-author: Philipp Lühmann
-github: luehmann
+author: Philipp Lühmann <luehmann>
 date: 2022-01-23 00:00:27 GMT
 ---