Move canon site outside packages

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

.dockerignore

@@ -3,6 +3,7 @@
 .yarn/install-state.gz
 docs
 microsite
+microsite-canon
 node_modules
 packages/*/src
 packages/*/node_modules

.eslintignore

@@ -7,6 +7,7 @@
 **/.git/**
 **/public/**
 **/microsite/**
+**/microsite-canon/**
 **/templates/**
 **/sample-templates/**
 playwright.config.ts

.github/vale/config/vocabularies/Backstage/accept.txt

@@ -243,6 +243,7 @@ memoized
 microservice
 microservices
 microsite
+microsite-canon
 microtasks
 middleware
 minikube

.github/workflows/ci.yml

@@ -4,6 +4,7 @@ on:
   pull_request:
     paths-ignore:
       - 'microsite/**'
+      - 'microsite-canon/**'
       - 'beps/**'
 
 concurrency:

.github/workflows/verify_e2e-linux-noop.yml

@@ -9,6 +9,7 @@ on:
       - 'contrib/**'
       - 'docs/**'
       - 'microsite/**'
+      - 'microsite-canon/**'
       - 'beps/**'
 
 concurrency:

.github/workflows/verify_e2e-linux.yml

@@ -7,6 +7,7 @@ on:
       - 'contrib/**'
       - 'docs/**'
       - 'microsite/**'
+      - 'microsite-canon/**'
       - 'beps/**'
   push:
     branches: [master]

.prettierignore

@@ -1,6 +1,7 @@
 .yarn
 dist
 microsite
+microsite-canon
 coverage
 *.hbs
 templates

microsite-canon/.prettierignore

@@ -0,0 +1 @@
+.next

microsite-canon/app/components/[slug]/page.module.css

@@ -0,0 +1,6 @@
+.container {
+  width: 100%;
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 0 24px 64px;
+}

microsite-canon/app/components/[slug]/page.tsx

@@ -0,0 +1,30 @@
+import { components } from '@/data';
+import { notFound } from 'next/navigation';
+import fs from 'fs';
+import path from 'path';
+import styles from './page.module.css';
+export default async function Page({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const slug = (await params).slug;
+  const filePath = path.resolve(process.cwd(), `content/${slug}.mdx`);
+
+  if (fs.existsSync(filePath)) {
+    const { default: Post } = await import(`@/content/${slug}.mdx`);
+    return (
+      <div className={styles.container}>
+        <Post />
+      </div>
+    );
+  } else {
+    return notFound();
+  }
+}
+
+export function generateStaticParams() {
+  return components.map(component => ({ slug: component.slug }));
+}
+
+export const dynamicParams = false;

microsite-canon/app/core-concepts/[slug]/page.module.css

@@ -0,0 +1,6 @@
+.container {
+  width: 100%;
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 0 24px 64px;
+}

microsite-canon/app/core-concepts/[slug]/page.tsx

@@ -0,0 +1,30 @@
+import { coreConcepts } from '@/data';
+import { notFound } from 'next/navigation';
+import fs from 'fs';
+import path from 'path';
+import styles from './page.module.css';
+export default async function Page({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const slug = (await params).slug;
+  const filePath = path.resolve(process.cwd(), `content/${slug}.mdx`);
+
+  if (fs.existsSync(filePath)) {
+    const { default: Post } = await import(`@/content/${slug}.mdx`);
+    return (
+      <div className={styles.container}>
+        <Post />
+      </div>
+    );
+  } else {
+    return notFound();
+  }
+}
+
+export function generateStaticParams() {
+  return coreConcepts.map(concept => ({ slug: concept.slug }));
+}
+
+export const dynamicParams = false;

microsite-canon/app/layout.tsx

@@ -1,9 +1,11 @@
 import type { Metadata } from 'next';
-import { Sidebar } from '../components/sidebar';
-import '../../src/css/core.css';
-import '../../src/css/components.css';
+import { Sidebar } from '../components/Sidebar';
 import './globals.css';
-import { CanonProvider } from '../../src/contexts/canon';
+import { CanonProvider } from '@backstage/canon';
+
+import '../../packages/canon/src/css/core.css';
+import '../../packages/canon/src/css/components.css';
+import styles from './page.module.css';
 
 export const metadata: Metadata = {
   title: 'Canon',
@@ -21,7 +23,7 @@ export default function RootLayout({
         <CanonProvider>
           <>
             <Sidebar />
-            {children}
+            <div className={styles.container}>{children}</div>
           </>
         </CanonProvider>
       </body>

microsite-canon/app/page.module.css

@@ -0,0 +1,8 @@
+.container {
+  padding-left: 280px;
+  width: 100%;
+}
+
+.page {
+  flex: 1;
+}

microsite-canon/components/Banner/Banner.tsx

@@ -0,0 +1,41 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+
+export const Banner = ({
+  children,
+  variant = 'info',
+}: {
+  children: React.ReactNode;
+  variant?: 'info' | 'warning';
+}) => {
+  return (
+    <div className={`banner ${variant}`}>
+      <div className="icon">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          width="18"
+          height="18"
+          fill="currentColor"
+        >
+          <path d="M4.00001 20V14C4.00001 9.58172 7.58173 6 12 6C16.4183 6 20 9.58172 20 14V20H21V22H3.00001V20H4.00001ZM6.00001 20H18V14C18 10.6863 15.3137 8 12 8C8.6863 8 6.00001 10.6863 6.00001 14V20ZM11 2H13V5H11V2ZM19.7782 4.80761L21.1924 6.22183L19.0711 8.34315L17.6569 6.92893L19.7782 4.80761ZM2.80762 6.22183L4.22183 4.80761L6.34315 6.92893L4.92894 8.34315L2.80762 6.22183ZM7.00001 14C7.00001 11.2386 9.23858 9 12 9V11C10.3432 11 9.00001 12.3431 9.00001 14H7.00001Z"></path>
+        </svg>
+      </div>
+      {children}
+    </div>
+  );
+};

microsite-canon/components/Banner/index.ts

@@ -0,0 +1,16 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { Banner } from './Banner';

microsite-canon/components/Banner/styles.css

@@ -0,0 +1,37 @@
+.banner {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  line-height: 28px;
+  padding: 16px;
+  border-radius: 6px;
+  margin-bottom: 16px;
+  border: 1px solid #e0e0e0;
+
+  & > p {
+    margin: 0;
+  }
+
+  &.info {
+    background-color: #f2f2f2;
+    border-color: #cdcdcd;
+    color: #888888;
+  }
+
+  &.warning {
+    background-color: #fff2b9;
+    border-color: #ffd000;
+    color: #d79927;
+  }
+
+  & .icon {
+    width: 32px;
+    height: 32px;
+    background-color: rgba(215, 153, 39, 0.2);
+    border-radius: 6px;
+    margin-right: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}

microsite-canon/components/Chip/Chip.tsx

@@ -0,0 +1,27 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+
+export const Chip = ({
+  children,
+  head = false,
+}: {
+  children: React.ReactNode;
+  head?: boolean;
+}) => {
+  return <span className={`chip ${head ? 'head' : ''}`}>{children}</span>;
+};

microsite-canon/components/Chip/index.ts

@@ -0,0 +1,16 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { Chip } from './Chip';

microsite-canon/components/Chip/styles.css

@@ -0,0 +1,33 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  font-family: monospace;
+  font-size: 13px;
+  border-radius: 6px;
+  padding: 0px 8px;
+  height: 24px;
+  margin-right: 4px;
+  background-color: #f0f0f0;
+  color: #5d5d5d;
+
+  &.head {
+    background-color: #eaf2fd;
+    color: #2563eb;
+  }
+}

microsite-canon/components/Columns/Columns.tsx

@@ -0,0 +1,31 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+
+export const Columns = ({
+  children,
+  style,
+}: {
+  children: React.ReactNode;
+  style?: React.CSSProperties;
+}) => {
+  return (
+    <div className="columns" style={style}>
+      {children}
+    </div>
+  );
+};

microsite-canon/components/Columns/index.ts

@@ -0,0 +1,16 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { Columns } from './Columns';

microsite-canon/components/Columns/styles.css

@@ -0,0 +1,22 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.columns {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  row-gap: 20px;
+  column-gap: 80px;
+}

microsite-canon/components/ComponentStatus/ComponentStatus.tsx

@@ -0,0 +1,48 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+
+export const ComponentStatus = ({
+  name,
+  status = 'notStarted',
+  style,
+  link,
+}: {
+  name: string;
+  status: 'notStarted' | 'inProgress' | 'alpha' | 'beta' | 'stable';
+  style?: React.CSSProperties;
+  link?: string;
+}) => {
+  return (
+    <div className="component-status" style={style}>
+      {link ? (
+        <a href={link} className="title">
+          {name}
+        </a>
+      ) : (
+        <span className="title">{name}</span>
+      )}
+      <span className={`pill ${status}`}>
+        {status === 'notStarted' && 'Not Started'}
+        {status === 'inProgress' && 'In Progress'}
+        {status === 'alpha' && 'Alpha'}
+        {status === 'beta' && 'Beta'}
+        {status === 'stable' && 'Stable'}
+      </span>
+    </div>
+  );
+};

microsite-canon/components/ComponentStatus/index.ts

@@ -0,0 +1,16 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { ComponentStatus } from './ComponentStatus';

microsite-canon/components/ComponentStatus/styles.css

@@ -0,0 +1,71 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.component-status {
+  display: flex;
+  justify-content: space-between;
+
+  & .title {
+    color: #3b59ff;
+    font-size: 16px;
+    font-weight: 400;
+    text-decoration: none;
+  }
+
+  & .pill {
+    display: inline-flex;
+    align-items: center;
+    color: #000;
+    border-radius: 40px;
+    padding: 0px 8px;
+    height: 24px;
+    font-size: 12px;
+    font-weight: 600;
+    border-style: solid;
+    border-width: 1px;
+    margin-left: 8px;
+
+    &.notStarted {
+      background-color: #f2f2f2;
+      border-color: #cdcdcd;
+      color: #888888;
+    }
+
+    &.inProgress {
+      background-color: #fff2b9;
+      border-color: #ffd000;
+      color: #d79927;
+    }
+
+    &.alpha {
+      background-color: #d7f9d7;
+      border-color: #4ed14a;
+      color: #3a9837;
+    }
+
+    &.beta {
+      background-color: #d7f9d7;
+      border-color: #4ed14a;
+      color: #3a9837;
+    }
+
+    &.stable {
+      background-color: #d7f9d7;
+      border-color: #4ed14a;
+      color: #3a9837;
+    }
+  }
+}

microsite-canon/components/IconLibrary/IconLibrary.tsx

@@ -0,0 +1,37 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import { Icon } from '@backstage/canon';
+import type { IconNames } from '@backstage/canon';
+import { defaultIcons } from '../../../src/components/Icon/icons';
+import { Text } from '../Text/Text';
+
+export const IconLibrary = () => {
+  const icons = Object.keys(defaultIcons);
+
+  return (
+    <div className="icon-library">
+      {icons.map(icon => (
+        <div key={icon} className="icon-library-item">
+          <div className="icon-library-item-icon">
+            <Icon name={icon as IconNames} />
+          </div>
+          <Text>{icon}</Text>
+        </div>
+      ))}
+    </div>
+  );
+};

microsite-canon/components/IconLibrary/index.ts

@@ -0,0 +1,16 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { IconLibrary } from './IconLibrary';

microsite-canon/components/IconLibrary/styles.css

@@ -0,0 +1,22 @@
+.icon-library {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 1rem;
+}
+
+.icon-library-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
+.icon-library-item-icon {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  height: 80px;
+  border: 1px solid #d3d3d3;
+  border-radius: 0.5rem;
+}

microsite-canon/components/LayoutComponents/LayoutComponents.module.css

@@ -0,0 +1,58 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.layoutComponents {
+  display: flex;
+  justify-content: flex-start;
+  gap: 1rem;
+  flex-wrap: wrap;
+
+  & .box {
+    display: flex;
+    flex-direction: column;
+    width: calc(33.33% - 0.67rem);
+    margin-bottom: 1rem;
+    align-items: flex-start;
+  }
+
+  & .content {
+    flex: none;
+    background-color: #fff;
+    border-radius: 4px;
+    width: 100%;
+    height: 180px;
+    transition: all 0.2s ease-in-out;
+    margin-bottom: 0.75rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:hover {
+      transform: translateY(-4px);
+    }
+  }
+
+  & .title {
+    font-size: 16px;
+    transition: color 0.2s ease-in-out;
+    margin-bottom: 0.25rem;
+  }
+
+  & .description {
+    font-size: 16px;
+    color: #9e9e9e;
+  }
+}

microsite-canon/components/LayoutComponents/LayoutComponents.tsx

@@ -0,0 +1,84 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { BoxSvg } from './svgs/box';
+import { StackSvg } from './svgs/stack';
+import { GridSvg } from './svgs/grid';
+import { InlineSvg } from './svgs/inline';
+import { ContainerSvg } from './svgs/container';
+import styles from './LayoutComponents.module.css';
+
+export const LayoutComponents = () => {
+  return (
+    <div className={styles.layoutComponents}>
+      <div className={styles.box}>
+        <a className={styles.content} href="/?path=/docs/components-box--docs">
+          <BoxSvg />
+        </a>
+        <div className={styles.title}>Box</div>
+        <div className={styles.description}>
+          The most basic layout component
+        </div>
+      </div>
+      <div className={styles.box}>
+        <a
+          className={styles.content}
+          href="/?path=/docs/components-stack--docs"
+        >
+          <StackSvg />
+        </a>
+        <div className={styles.title}>Stack</div>
+        <div className={styles.description}>
+          Arrange your components vertically
+        </div>
+      </div>
+      <div className={styles.box}>
+        <a className={styles.content} href="/?path=/docs/components-grid--docs">
+          <GridSvg />
+        </a>
+        <div className={styles.title}>Grid</div>
+        <div className={styles.description}>
+          Arrange your components in a grid
+        </div>
+      </div>
+      <div className={styles.box}>
+        <a
+          className={styles.content}
+          href="/?path=/docs/components-inline--docs"
+        >
+          <InlineSvg />
+        </a>
+        <div className={styles.title}>Inline</div>
+        <div className={styles.description}>
+          Arrange your components in a row
+        </div>
+      </div>
+      <div className={styles.box}>
+        <a
+          className={styles.content}
+          href="/?path=/docs/components-container--docs"
+        >
+          <ContainerSvg />
+        </a>
+        <div className={styles.title}>Container</div>
+        <div className={styles.description}>
+          A container for your components
+        </div>
+      </div>
+    </div>
+  );
+};

microsite-canon/components/LayoutComponents/index.ts

@@ -0,0 +1,16 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { LayoutComponents } from './LayoutComponents';

microsite-canon/components/LayoutComponents/svgs/box.tsx

@@ -0,0 +1,54 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+
+export const BoxSvg = () => {
+  return (
+    <svg
+      width="100"
+      height="60"
+      viewBox="0 0 100 60"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="100" height="60" rx="4" fill="black" fillOpacity="0.06" />
+      <path
+        d="M94.5 0.5H96C97.933 0.5 99.5 2.067 99.5 4V5.5"
+        stroke="#4765FF"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M99.5 54.5L99.5 56C99.5 57.933 97.933 59.5 96 59.5L94.5 59.5"
+        stroke="#4765FF"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5.5 59.5L4 59.5C2.067 59.5 0.5 57.933 0.5 56L0.5 54.5"
+        stroke="#4765FF"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M0.5 5.5L0.5 4C0.5 2.067 2.067 0.5 4 0.5L5.5 0.500001"
+        stroke="#4765FF"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};

microsite-canon/components/LayoutComponents/svgs/container.tsx

@@ -0,0 +1,372 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+
+export const ContainerSvg = () => {
+  return (
+    <svg
+      width="126"
+      height="111"
+      viewBox="0 0 126 111"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <mask
+        id="mask0_1922_1559"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="13"
+        height="111"
+      >
+        <rect width="13" height="111" fill="url(#paint0_linear_1922_1559)" />
+      </mask>
+      <g mask="url(#mask0_1922_1559)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M1 44.7563L13.0259 51.6995L12.5259 52.5655L0.5 45.6224L1 44.7563Z"
+          fill="#4765FF"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M1 50.5655L13.0259 57.5087L12.5259 58.3747L0.5 51.4316L1 50.5655Z"
+          fill="#4765FF"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M1 56.3747L13.0259 63.3179L12.5259 64.1839L0.5 57.2408L1 56.3747Z"
+          fill="#4765FF"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M1 62.1839L13.0259 69.1271L12.5259 69.9931L0.5 63.05L1 62.1839Z"
+          fill="#4765FF"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M1 67.9931L13.0259 74.9363L12.5259 75.8023L0.5 68.8592L1 67.9931Z"
+          fill="#4765FF"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M1 73.8023L13.0259 80.7455L12.5259 81.6116L0.5 74.6684L1 73.8023Z"
+          fill="#4765FF"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M1 79.6115L13.0259 86.5547L12.5259 87.4208L0.5 80.4776L1 79.6115Z"
+          fill="#4765FF"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M1 85.4208L13.0259 92.3639L12.5259 93.23L0.5 86.2868L1 85.4208Z"
+          fill="#4765FF"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M1 91.23L13.0259 98.1731L12.5259 99.0392L0.5 92.096L1 91.23Z"
+          fill="#4765FF"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M1 97.0392L13.0259 103.982L12.5259 104.848L0.5 97.9052L1 97.0392Z"
+          fill="#4765FF"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M1 102.848L13.0259 109.792L12.5259 110.658L0.5 103.714L1 102.848Z"
+          fill="#4765FF"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M1 108.658L13.0259 115.601L12.5259 116.467L0.5 109.524L1 108.658Z"
+          fill="#4765FF"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M1 38.9471L13.0259 45.8903L12.5259 46.7563L0.5 39.8131L1 38.9471Z"
+          fill="#4765FF"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M1 33.1379L13.0259 40.0811L12.5259 40.9471L0.5 34.0039L1 33.1379Z"
+          fill="#4765FF"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M1 27.3287L13.0259 34.2719L12.5259 35.1379L0.5 28.1947L1 27.3287Z"
+          fill="#4765FF"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M1 21.5195L13.0259 28.4627L12.5259 29.3287L0.5 22.3855L1 21.5195Z"
+          fill="#4765FF"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M1 15.7103L13.0259 22.6535L12.5259 23.5195L0.5 16.5763L1 15.7103Z"
+          fill="#4765FF"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M1 9.90109L13.0259 16.8443L12.5259 17.7103L0.5 10.7671L1 9.90109Z"
+          fill="#4765FF"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M1 4.09188L13.0259 11.0351L12.5259 11.9011L0.5 4.95791L1 4.09188Z"
+          fill="#4765FF"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M1 -1.71732L13.0259 5.22586L12.5259 6.09188L0.5 -0.851298L1 -1.71732Z"
+          fill="#4765FF"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M1 -7.52653L13.0259 -0.583351L12.5259 0.282675L0.5 -6.66051L1 -7.52653Z"
+          fill="#4765FF"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M0 131L0 -17H1L1 131H0Z"
+          fill="#4765FF"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M12 131L12 -17H13L13 131H12Z"
+          fill="#4765FF"
+        />
+      </g>
+      <rect
+        x="13"
+        y="25.5"
+        width="100"
+        height="60"
+        rx="4"
+        fill="black"
+        fillOpacity="0.06"
+      />
+      <mask
+        id="mask1_1922_1559"
+        // style="mask-type:alpha"
+        maskUnits="userSpaceOnUse"
+        x="113"
+        y="0"
+        width="13"
+        height="111"
+      >
+        <rect
+          x="113"
+          width="13"
+          height="111"
+          fill="url(#paint1_linear_1922_1559)"
+        />
+      </mask>
+      <g mask="url(#mask1_1922_1559)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M114 44.7563L126.026 51.6995L125.526 52.5655L113.5 45.6224L114 44.7563Z"
+          fill="#4765FF"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M114 50.5655L126.026 57.5087L125.526 58.3747L113.5 51.4316L114 50.5655Z"
+          fill="#4765FF"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M114 56.3747L126.026 63.3179L125.526 64.1839L113.5 57.2408L114 56.3747Z"
+          fill="#4765FF"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M114 62.1839L126.026 69.1271L125.526 69.9931L113.5 63.05L114 62.1839Z"
+          fill="#4765FF"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M114 67.9931L126.026 74.9363L125.526 75.8023L113.5 68.8592L114 67.9931Z"
+          fill="#4765FF"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M114 73.8023L126.026 80.7455L125.526 81.6116L113.5 74.6684L114 73.8023Z"
+          fill="#4765FF"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M114 79.6115L126.026 86.5547L125.526 87.4208L113.5 80.4776L114 79.6115Z"
+          fill="#4765FF"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M114 85.4208L126.026 92.3639L125.526 93.23L113.5 86.2868L114 85.4208Z"
+          fill="#4765FF"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M114 91.23L126.026 98.1731L125.526 99.0392L113.5 92.096L114 91.23Z"
+          fill="#4765FF"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M114 97.0392L126.026 103.982L125.526 104.848L113.5 97.9052L114 97.0392Z"
+          fill="#4765FF"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M114 102.848L126.026 109.792L125.526 110.658L113.5 103.714L114 102.848Z"
+          fill="#4765FF"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M114 108.658L126.026 115.601L125.526 116.467L113.5 109.524L114 108.658Z"
+          fill="#4765FF"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M114 38.9471L126.026 45.8903L125.526 46.7563L113.5 39.8131L114 38.9471Z"
+          fill="#4765FF"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M114 33.1379L126.026 40.0811L125.526 40.9471L113.5 34.0039L114 33.1379Z"
+          fill="#4765FF"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M114 27.3287L126.026 34.2719L125.526 35.1379L113.5 28.1947L114 27.3287Z"
+          fill="#4765FF"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M114 21.5195L126.026 28.4627L125.526 29.3287L113.5 22.3855L114 21.5195Z"
+          fill="#4765FF"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M114 15.7103L126.026 22.6535L125.526 23.5195L113.5 16.5763L114 15.7103Z"
+          fill="#4765FF"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M114 9.90109L126.026 16.8443L125.526 17.7103L113.5 10.7671L114 9.90109Z"
+          fill="#4765FF"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M114 4.09188L126.026 11.0351L125.526 11.9011L113.5 4.95791L114 4.09188Z"
+          fill="#4765FF"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M114 -1.71732L126.026 5.22586L125.526 6.09188L113.5 -0.851298L114 -1.71732Z"
+          fill="#4765FF"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M114 -7.52653L126.026 -0.583351L125.526 0.282675L113.5 -6.66051L114 -7.52653Z"
+          fill="#4765FF"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M113 131L113 -17H114L114 131H113Z"
+          fill="#4765FF"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M125 131L125 -17H126L126 131H125Z"
+          fill="#4765FF"
+        />
+      </g>
+      <defs>
+        <linearGradient
+          id="paint0_linear_1922_1559"
+          x1="6.5"
+          y1="0"
+          x2="6.5"
+          y2="111"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.05" stopColor="white" stopOpacity="0" />
+          <stop offset="0.2" stopColor="white" />
+          <stop offset="0.8" stopColor="white" />
+          <stop offset="1" stopColor="white" stopOpacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_1922_1559"
+          x1="119.5"
+          y1="0"
+          x2="119.5"
+          y2="111"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.05" stopColor="white" stopOpacity="0" />
+          <stop offset="0.2" stopColor="white" />
+          <stop offset="0.8" stopColor="white" />
+          <stop offset="1" stopColor="white" stopOpacity="0" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};

microsite-canon/components/LayoutComponents/svgs/grid.tsx

@@ -0,0 +1,91 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+
+export const GridSvg = () => {
+  return (
+    <svg
+      width="166"
+      height="61"
+      viewBox="0 0 166 61"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        x="0.5"
+        width="52"
+        height="61"
+        rx="4"
+        fill="black"
+        fillOpacity="0.06"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M53.5 30L64.5 30V31L53.5 31L53.5 30Z"
+        fill="#4765FF"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M64.5 24.5C64.5 24.2239 64.7239 24 65 24C65.2761 24 65.5 24.2239 65.5 24.5L65.5 36.5C65.5 36.7761 65.2761 37 65 37C64.7239 37 64.5 36.7761 64.5 36.5L64.5 24.5Z"
+        fill="#4765FF"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M52.5 24.5C52.5 24.2239 52.7239 24 53 24C53.2761 24 53.5 24.2239 53.5 24.5L53.5 36.5C53.5 36.7761 53.2761 37 53 37C52.7239 37 52.5 36.7761 52.5 36.5L52.5 24.5Z"
+        fill="#4765FF"
+      />
+      <rect
+        x="65.5"
+        y="0.5"
+        width="100"
+        height="24"
+        rx="4"
+        fill="black"
+        fillOpacity="0.06"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M115 36.5L115 25.5L116 25.5L116 36.5L115 36.5Z"
+        fill="#4765FF"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M109.5 25.5C109.224 25.5 109 25.2761 109 25V25C109 24.7239 109.224 24.5 109.5 24.5L121.5 24.5C121.776 24.5 122 24.7239 122 25V25C122 25.2761 121.776 25.5 121.5 25.5L109.5 25.5Z"
+        fill="#4765FF"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M109.5 36.5C109.224 36.5 109 36.2761 109 36V36C109 35.7239 109.224 35.5 109.5 35.5L121.5 35.5C121.776 35.5 122 35.7239 122 36V36C122 36.2761 121.776 36.5 121.5 36.5L109.5 36.5Z"
+        fill="#4765FF"
+      />
+      <rect
+        x="65.5"
+        y="36.5"
+        width="100"
+        height="24"
+        rx="4"
+        fill="black"
+        fillOpacity="0.06"
+      />
+    </svg>
+  );
+};

microsite-canon/components/LayoutComponents/svgs/inline.tsx

@@ -0,0 +1,92 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+
+export const InlineSvg = () => {
+  return (
+    <svg
+      width="159"
+      height="56"
+      viewBox="0 0 159 56"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="24" height="24" rx="4" fill="black" fillOpacity="0.06" />
+      <rect
+        x="32"
+        width="24"
+        height="24"
+        rx="4"
+        fill="black"
+        fillOpacity="0.06"
+      />
+      <rect
+        x="64"
+        width="24"
+        height="24"
+        rx="4"
+        fill="black"
+        fillOpacity="0.06"
+      />
+      <rect
+        x="96"
+        width="24"
+        height="24"
+        rx="4"
+        fill="black"
+        fillOpacity="0.06"
+      />
+      <rect
+        x="128"
+        width="24"
+        height="24"
+        rx="4"
+        fill="black"
+        fillOpacity="0.06"
+      />
+      <rect
+        y="32"
+        width="24"
+        height="24"
+        rx="4"
+        fill="black"
+        fillOpacity="0.06"
+      />
+      <rect
+        x="32"
+        y="32"
+        width="24"
+        height="24"
+        rx="4"
+        fill="black"
+        fillOpacity="0.06"
+      />
+      <rect
+        x="64"
+        y="32"
+        width="24"
+        height="24"
+        rx="4"
+        fill="black"
+        fillOpacity="0.06"
+      />
+      <path
+        d="M12 12H138.811C141.238 12 141.569 15.5106 139.185 15.9647L12.8145 40.0353C10.4306 40.4894 10.762 44 13.1888 44H77"
+        stroke="#4765FF"
+      />
+    </svg>
+  );
+};

microsite-canon/components/LayoutComponents/svgs/stack.tsx

@@ -0,0 +1,82 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+
+export const StackSvg = () => {
+  return (
+    <svg
+      width="100"
+      height="96"
+      viewBox="0 0 100 96"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="100" height="24" rx="4" fill="black" fillOpacity="0.06" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M49.5 36L49.5 25L50.5 25L50.5 36L49.5 36Z"
+        fill="#4765FF"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M44 25C43.7239 25 43.5 24.7761 43.5 24.5V24.5C43.5 24.2239 43.7239 24 44 24L56 24C56.2761 24 56.5 24.2239 56.5 24.5V24.5C56.5 24.7761 56.2761 25 56 25L44 25Z"
+        fill="#4765FF"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M44 36C43.7239 36 43.5 35.7761 43.5 35.5V35.5C43.5 35.2239 43.7239 35 44 35L56 35C56.2761 35 56.5 35.2239 56.5 35.5V35.5C56.5 35.7761 56.2761 36 56 36L44 36Z"
+        fill="#4765FF"
+      />
+      <rect
+        y="36"
+        width="100"
+        height="24"
+        rx="4"
+        fill="black"
+        fillOpacity="0.06"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M49.5 72L49.5 61L50.5 61L50.5 72L49.5 72Z"
+        fill="#4765FF"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M44 61C43.7239 61 43.5 60.7761 43.5 60.5V60.5C43.5 60.2239 43.7239 60 44 60L56 60C56.2761 60 56.5 60.2239 56.5 60.5V60.5C56.5 60.7761 56.2761 61 56 61L44 61Z"
+        fill="#4765FF"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M44 72C43.7239 72 43.5 71.7761 43.5 71.5V71.5C43.5 71.2239 43.7239 71 44 71L56 71C56.2761 71 56.5 71.2239 56.5 71.5V71.5C56.5 71.7761 56.2761 72 56 72L44 72Z"
+        fill="#4765FF"
+      />
+      <rect
+        y="72"
+        width="100"
+        height="24"
+        rx="4"
+        fill="black"
+        fillOpacity="0.06"
+      />
+    </svg>
+  );
+};

microsite-canon/components/PropsTable/PropsTable.tsx

@@ -0,0 +1,57 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import * as Table from '..';
+import { Chip } from '..';
+
+// Modify the PropsTable component to accept a generic type
+export const PropsTable = <T extends Record<string, any>>({
+  data,
+}: {
+  data: T;
+}) => {
+  return (
+    <Table.Root>
+      <Table.Header>
+        <Table.HeaderRow>
+          <Table.HeaderCell>Prop</Table.HeaderCell>
+          <Table.HeaderCell>Type</Table.HeaderCell>
+          <Table.HeaderCell>Responsive</Table.HeaderCell>
+        </Table.HeaderRow>
+      </Table.Header>
+      <Table.Body>
+        {Object.keys(data).map(n => (
+          <Table.Row key={n}>
+            <Table.Cell>
+              <Chip head>{n}</Chip>
+            </Table.Cell>
+            <Table.Cell>
+              {Array.isArray(data[n].type) ? (
+                data[n].type.map((t: any) => <Chip key={t}>{t}</Chip>)
+              ) : (
+                <Chip>{data[n].type}</Chip>
+              )}
+            </Table.Cell>
+            <Table.Cell>
+              <Chip>{data[n].responsive ? 'Yes' : 'No'}</Chip>
+            </Table.Cell>
+          </Table.Row>
+        ))}
+      </Table.Body>
+    </Table.Root>
+  );
+};

microsite-canon/components/PropsTable/getProps.ts

@@ -0,0 +1,43 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export function getProps(styles: Record<string, any>) {
+  return Object.keys(styles).reduce(
+    (acc: Record<string, { type: any[]; responsive: boolean }>, n) => {
+      const style = styles[n];
+
+      let values: string[] = [];
+
+      if (style.values) {
+        // If values exist, use them
+        values = Object.keys(style.values);
+      } else if (style.mappings && style.mappings.length > 0) {
+        // If mappings exist, use the first mapping's values
+        const firstMapping = style.mappings[0];
+        values = Object.keys(styles[firstMapping].values);
+      } else {
+        // Default to an empty array if neither values nor mappings exist
+        values = [];
+      }
+
+      acc[n] = {
+        type: values,
+        responsive: true,
+      };
+      return acc;
+    },
+    {} as Record<string, { type: string[]; responsive: boolean }>,
+  );
+}

microsite-canon/components/PropsTable/index.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { PropsTable } from './PropsTable';
+export { getProps } from './getProps';

microsite-canon/components/Roadmap/Roadmap.tsx

@@ -0,0 +1,53 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import { RoadmapItem } from './list';
+
+export const Roadmap = ({ list }: { list: RoadmapItem[] }) => {
+  const orderList = ['inProgress', 'notStarted', 'completed'];
+  return (
+    <div className="roadmap">
+      {list
+        .sort(
+          (a, b) => orderList.indexOf(a.status) - orderList.indexOf(b.status),
+        )
+        .map(Item)}
+    </div>
+  );
+};
+
+const Item = ({
+  title,
+  status = 'notStarted',
+}: {
+  title: string;
+  status: 'notStarted' | 'inProgress' | 'inReview' | 'completed';
+}) => {
+  return (
+    <div className={['roadmap-item', status].join(' ')}>
+      <div className="left">
+        <div className="dot" />
+        <div className="title">{title}</div>
+      </div>
+      <span className="pill">
+        {status === 'notStarted' && 'Not Started'}
+        {status === 'inProgress' && 'In Progress'}
+        {status === 'inReview' && 'Ready for Review'}
+        {status === 'completed' && 'Completed'}
+      </span>
+    </div>
+  );
+};

microsite-canon/components/Roadmap/index.ts

@@ -0,0 +1,16 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { Roadmap } from './Roadmap';

microsite-canon/components/Roadmap/list.ts

@@ -0,0 +1,62 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export type RoadmapItem = {
+  title: string;
+  status: 'notStarted' | 'inProgress' | 'inReview' | 'completed';
+};
+
+export const list: RoadmapItem[] = [
+  {
+    title: 'Remove Vanilla Extract and use pure CSS instead',
+    status: 'inProgress',
+  },
+  {
+    title: 'Add collapsing across breakpoints for the Inline component',
+    status: 'notStarted',
+  },
+  {
+    title: 'Add reversing the order for the Inline component',
+    status: 'notStarted',
+  },
+  {
+    title: 'Set up Storybook',
+    status: 'completed',
+  },
+  {
+    title: 'Set up iconography',
+    status: 'completed',
+  },
+  {
+    title: 'Set up global tokens',
+    status: 'inProgress',
+  },
+  {
+    title: 'Set up theming system',
+    status: 'inProgress',
+  },
+  {
+    title: 'Create first pass at box component',
+    status: 'completed',
+  },
+  {
+    title: 'Create first pass at stack component',
+    status: 'completed',
+  },
+  {
+    title: 'Create first pass at inline component',
+    status: 'completed',
+  },
+];

microsite-canon/components/Roadmap/styles.css

@@ -0,0 +1,100 @@
+.roadmap {
+  display: flex;
+  flex-direction: column;
+}
+
+.roadmap .roadmap-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #e0e0e0;
+  padding: 8px 0px;
+}
+
+.roadmap .roadmap-item .left {
+  display: flex;
+  align-items: center;
+  padding-left: 12px;
+  gap: 12px;
+}
+
+.roadmap .roadmap-item .dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: #e0e0e0;
+}
+
+.roadmap .roadmap-item.notStarted {
+  color: #000;
+}
+
+.roadmap .roadmap-item.inProgress {
+  color: #000;
+}
+
+.roadmap .roadmap-item.inReview {
+  color: #000;
+}
+
+.roadmap .roadmap-item.completed .title {
+  color: #a2a2a2;
+  text-decoration: line-through;
+}
+
+.roadmap .roadmap-item.notStarted .dot {
+  background-color: #d1d1d1;
+}
+
+.roadmap .roadmap-item.inProgress .dot {
+  background-color: #ffd000;
+}
+
+.roadmap .roadmap-item.inReview .dot {
+  background-color: #4ed14a;
+}
+
+.roadmap .roadmap-item.completed .dot {
+  background-color: #4ed14a;
+}
+
+.roadmap .roadmap-item .title {
+  font-size: 16px;
+}
+
+.roadmap .roadmap-item .pill {
+  display: inline-flex;
+  align-items: center;
+  height: 24px;
+  padding: 0px 8px;
+  border-radius: 40px;
+  font-size: 12px;
+  font-weight: 600;
+  margin-left: 8px;
+  border-style: solid;
+  border-width: 1px;
+}
+
+.roadmap .roadmap-item.notStarted .pill {
+  background-color: #f2f2f2;
+  border-color: #cdcdcd;
+  color: #888888;
+}
+
+.roadmap .roadmap-item.inProgress .pill {
+  background-color: #fff2b9;
+  border-color: #ffd000;
+  color: #d79927;
+}
+
+.roadmap .roadmap-item.inReview .pill {
+  background-color: #d7f9d7;
+  border-color: #4ed14a;
+  color: #3a9837;
+}
+
+.roadmap .roadmap-item.completed .pill {
+  background-color: #d7f9d7;
+  border-color: #4ed14a;
+  color: #3a9837;
+}

microsite-canon/components/Sidebar/Sidebar.module.css

@@ -1,4 +1,7 @@
 .sidebar {
+  position: fixed;
+  top: 0;
+  left: 0;
   width: 280px;
   height: 100vh;
   color: var(--canon-text-primary);

microsite-canon/components/Sidebar/index.tsx

@@ -1,8 +1,8 @@
 import styles from './Sidebar.module.css';
 import Image from 'next/image';
 import { TabsVersion, TabsTheme, TabsPages } from '../Tabs';
-import { Grid } from '../../../src/components/Grid';
 import Link from 'next/link';
+import { components, coreConcepts } from '@/data';
 
 export const Sidebar = () => {
   return (
@@ -24,15 +24,17 @@ export const Sidebar = () => {
         <TabsPages />
         <div className={styles.menu}>
           <h2 className={styles.title}>Core Concepts</h2>
-          <Link href="/docs/core-concepts/introduction">Iconography</Link>
-          <Link href="/docs/core-concepts/components">Layout</Link>
-          <Link href="/docs/core-concepts/accessibility">Responsive</Link>
-          <Link href="/docs/core-concepts/theming">Theming</Link>
+          {coreConcepts.map(concept => (
+            <Link href={`/core-concepts/${concept.slug}`} key={concept.slug}>
+              {concept.title}
+            </Link>
+          ))}
           <h2 className={styles.title}>Components</h2>
-          <Link href="/docs/components/button">Button</Link>
-          <Link href="/docs/components/card">Card</Link>
-          <Link href="/docs/components/input">Input</Link>
-          <Link href="/docs/components/select">Select</Link>
+          {components.map(component => (
+            <Link href={`/components/${component.slug}`} key={component.slug}>
+              {component.title}
+            </Link>
+          ))}
         </div>
       </div>
     </div>

microsite-canon/components/Table/Table.tsx

@@ -0,0 +1,49 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+
+export const Root = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div className="sb-table-wrapper">
+      <table className="sb-table">{children}</table>
+    </div>
+  );
+};
+
+export const Header = ({ children }: { children: React.ReactNode }) => {
+  return <thead>{children}</thead>;
+};
+
+export const Body = ({ children }: { children: React.ReactNode }) => {
+  return <tbody>{children}</tbody>;
+};
+
+export const HeaderRow = ({ children }: { children: React.ReactNode }) => {
+  return <tr>{children}</tr>;
+};
+
+export const HeaderCell = ({ children }: { children: React.ReactNode }) => {
+  return <th className="sb-table-cell sb-table-header-cell">{children}</th>;
+};
+
+export const Row = ({ children }: { children: React.ReactNode }) => {
+  return <tr className="sb-table-row">{children}</tr>;
+};
+
+export const Cell = ({ children }: { children: React.ReactNode }) => {
+  return <td className="sb-table-cell">{children}</td>;
+};

microsite-canon/components/Table/index.ts

@@ -0,0 +1,16 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { Root, Header, Body, Row, Cell, HeaderRow, HeaderCell } from './Table';

microsite-canon/components/Table/styles.css

@@ -0,0 +1,72 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.sb-table-wrapper {
+  border: 1px solid #e7e7e7;
+  border-radius: 4px;
+  overflow: hidden;
+
+  & .sb-table {
+    width: 100%;
+    margin: 0 !important;
+    padding: 0 !important;
+    border-spacing: 0px;
+    border-collapse: collapse;
+  }
+
+  & .sb-table-cell {
+    padding: 12px 16px !important;
+    border: none !important;
+    text-align: left;
+    background-color: white !important;
+    font-size: 16px;
+
+    & p {
+      margin: 0;
+    }
+  }
+
+  & .sb-table-header-cell {
+    background-color: #f5f5f5 !important;
+    border-bottom: 1px solid #e7e7e7 !important;
+    font-weight: 500;
+    font-size: 14px;
+  }
+
+  & .sb-table-row {
+    border: none;
+    border-bottom: 1px solid #e7e7e7;
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  & .sb-table-chip {
+    display: inline-block;
+    font-size: 14px !important;
+    border: 1px solid #e7e7e7;
+    border-radius: 6px;
+    padding: 0px 6px;
+    height: 24px;
+  }
+
+  & .sb-table-type {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    gap: 8px;
+  }
+}

microsite-canon/components/Tabs/index.tsx

@@ -2,7 +2,7 @@
 
 import styles from './Tabs.module.css';
 import { Tabs } from '@base-ui-components/react/tabs';
-import { Icon } from '../../../src/components/Icon';
+import { Icon } from '@backstage/canon';
 import { usePathname, useSearchParams } from 'next/navigation';
 import { useRouter } from 'next/navigation';
 

microsite-canon/content/button.mdx

@@ -0,0 +1 @@
+# Hello

microsite-canon/content/layout.mdx

@@ -0,0 +1,29 @@
+import { LayoutComponents } from '@/components/LayoutComponents';
+
+# Layout
+
+Canon is made for extensibility. We built this library to make it easy for any
+Backstage plugin creator to be able to build their ideas at speed ensuring
+consistency across the rest of your ecosystem. Each component is designed to
+be editable to match your need but sometimes you want to have more control
+over the layout of your page. To help you with that, we created a set of
+layout components that you can use to build your own layouts. All of these
+components are built to extend on our theming system, making it easy for you
+to build your own layouts. Sometimes these components are not enough so we
+created a set of helpers to be used with any CSS-in-JS library.
+
+## Layout Components
+
+We built a couple of layout components to help you build responsive elements
+that will be consistent with the rest of your Backstage instance. These
+components are opinionated and use TypeScript to ensure that the props you
+provide are the ones coming from the theme.
+
+<LayoutComponents />
+
+## Layout Helpers
+
+Sometimes you want to use global tokens dynamically outside of React
+components. To help you with that we would like to provide a set of helpers
+that you can use in your code. These helpers are not available just yet but we
+are working on it.

microsite-canon/data.ts

@@ -0,0 +1,29 @@
+export const coreConcepts = [
+  {
+    title: 'Iconography',
+    slug: 'iconography',
+  },
+  {
+    title: 'Layout',
+    slug: 'layout',
+  },
+  {
+    title: 'Responsive',
+    slug: 'responsive',
+  },
+  {
+    title: 'Theming',
+    slug: 'theming',
+  },
+];
+
+export const components = [
+  {
+    title: 'Box',
+    slug: 'box',
+  },
+  {
+    title: 'Button',
+    slug: 'button',
+  },
+];

microsite-canon/mdx-components.tsx

@@ -0,0 +1,55 @@
+import type { MDXComponents } from 'mdx/types';
+import Image, { ImageProps } from 'next/image';
+import { ReactNode } from 'react';
+
+// This file allows you to provide custom React components
+// to be used in MDX files. You can import and use any
+// React component you want, including inline styles,
+// components from other libraries, and more.
+
+export function useMDXComponents(components: MDXComponents): MDXComponents {
+  return {
+    // Allows customizing built-in components, e.g. to add styling.
+    h1: ({ children }) => (
+      <h1
+        style={{
+          color: 'var(--canon-text-primary)',
+          fontSize: '3rem',
+          marginTop: '64px',
+        }}
+      >
+        {children as ReactNode}
+      </h1>
+    ),
+    h2: ({ children }) => (
+      <h2
+        style={{
+          color: 'var(--canon-text-primary)',
+          fontSize: '1.75rem',
+          marginTop: '3rem',
+        }}
+      >
+        {children as ReactNode}
+      </h2>
+    ),
+    p: ({ children }) => (
+      <p
+        style={{
+          color: 'var(--canon-text-primary)',
+          fontSize: '1rem',
+          lineHeight: '1.5rem',
+        }}
+      >
+        {children as ReactNode}
+      </p>
+    ),
+    img: props => (
+      <Image
+        sizes="100vw"
+        style={{ width: '100%', height: 'auto' }}
+        {...(props as ImageProps)}
+      />
+    ),
+    ...components,
+  };
+}

microsite-canon/next.config.ts

@@ -0,0 +1,13 @@
+import type { NextConfig } from 'next';
+import createMDX from '@next/mdx';
+
+const nextConfig: NextConfig = {
+  pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
+};
+
+const withMDX = createMDX({
+  // Add markdown plugins here, as desired
+});
+
+// Merge MDX config with Next.js config
+export default withMDX(nextConfig);

microsite-canon/package.json

@@ -1,15 +1,23 @@
 {
-  "name": "canon-docs",
-  "version": "0.1.0",
+  "name": "canon-microsite",
+  "version": "0.0.0",
   "private": true,
+  "license": "Apache-2.0",
   "scripts": {
-    "dev": "next dev",
     "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
+    "dev": "next dev",
+    "lint": "next lint",
+    "prettier:check": "prettier --check .",
+    "prettier:fix": "prettier --write .",
+    "start": "next start"
   },
+  "prettier": "@backstage/cli/config/prettier",
   "dependencies": {
     "@base-ui-components/react": "^1.0.0-alpha.4",
+    "@mdx-js/loader": "^3.1.0",
+    "@mdx-js/react": "^3.1.0",
+    "@next/mdx": "^15.1.3",
+    "@types/mdx": "^2.0.13",
     "next": "15.1.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

packages/canon/canon-docs/app/page.module.css

@@ -1,3 +0,0 @@
-.page {
-  flex: 1;
-}

packages/canon/canon-docs/next.config.ts

@@ -1,7 +0,0 @@
-import type { NextConfig } from "next";
-
-const nextConfig: NextConfig = {
-  /* config options here */
-};
-
-export default nextConfig;

packages/canon/src/index.ts

@@ -20,6 +20,9 @@
  * @packageDocumentation
  */
 
+// Providers
+export * from './contexts/canon';
+
 // Layout components
 export * from './components/Box';
 export * from './components/Grid';