Move code component starter template documentation from inline comments to online docs

Not sure if this would be a design nightmare or not, but it could be nice to have the documentation accessible from within a pane in the editor so it's still obvious and accessible once the component author has deleted the initial code containing the link in the comment

What I'd recommend we'd do is provide an API that allows customizing the template. Different organizations may want to provide different starting point. By default, the template should be really simple and should point out to an external URL with documentation.

I'm proposing this as the default contents for the component:

// Get Started: http://drupal.org/docs/experience-builder/code-components

import { cn } from "@/lib/utils";

const Component = ({
  text = "Component",
}) => {
  return (
    <div className={cn('text-3xl')}>
      {text}
    </div>
  );
};

export default Component;

#3: Nice, I like that. I would even remove the use of the cn() utility function, because it's for composition, and what it does is only obvious (without reading docs) for people who are familiar with shadcn/ui.

// Get started: http://drupal.org/docs/experience-builder/code-components

const Component = ({
  text = "Component",
}) => {
  return (
    <div className="text-3xl">
      {text}
    </div>
  );
};

export default Component;

Your proposed template had a drupal.org URL as the link — does that mean you prefer that over a Markdown file in the repo's docs folder?

I'd use whatever link we want to provide as the link to docs there. Ideally it should be a link we can keep working permanently even if we decide to move docs elsewhere so that if there are instances of that lingering around, users can still find the docs.

@justafish proposed using GitLab Pages, so we'll get something like https://project.pages.drupalcode.org/api_client, which would be really nice. +1 from @lauriii and me, too.

I updated the issue summary based on the comments.

The API to customize the starter template has been split into a new issue https://www.drupal.org/project/experience_builder/issues/3536387 📌 Introduce an API to customize the starter template for code components Active

The new documentation site is looking amazing! 👏 I left a few comments.

wim leers → made their first commit to this issue’s fork.

Use the pages job from the GitLab template for Drupal.org's GitLab CI integration.

Wow! 🤩

Where can I see the docs deployed for an MR? None of the CI jobs in https://git.drupalcode.org/project/experience_builder/-/pipelines/549435 link to it?! (Boohh, GitLab! 👎)

Is it https://project.pages.drupalcode.org/experience_builder/? If so, that fails to load due to its HTML containing

    <script type="module" crossorigin src="/assets/index.js"></script>

which should be

    <script type="module" crossorigin src="assets/index.js"></script>

or

    <script type="module" crossorigin src="/experience_builder/assets/index.js"></script>

What am I missing? 😇🙈

#16: I think that's the deployed version of the XB app from the early days. 🙂 That will be taken over by the new docs site once the MR is merged. For MRs the docs are published at, e.g., https://project.pages.drupalcode.org/experience_builder/mr-1291.

@justafish: This is looking fantastic, I just left a few final minor comments.

Look what we have! 🤩 https://project.pages.drupalcode.org/experience_builder

Fantastic work, @justafish!

Automatically closed - issue fixed for 2 weeks with no activity.