🚚 fix: rename examples to starters (#101)

README.md

@@ -2,21 +2,21 @@
 
 Using Drupal as a headless CMS with a Decoupled front-end implementation is a great way to get an enterprise-quality CMS, paired with a great modern development experience using Remix, Next.js, Astro and/or others.
 
-Discover the power of Drupal as a headless CMS with our quickstart ready to use and step-by-step guides and examples.
+Discover the power of Drupal as a headless CMS with our quickstart ready to use and step-by-step guides.
 
 ## Getting Started
 
 Visit the [docs](https://drupal-decoupled.octahedroid.com/) to see how to use this project.
 
 ### Quickstart
-- [Decoupled Drupal GraphQL Example](https://drupal-decoupled.octahedroid.com/docs/getting-started/examples/drupal-graphql)
-- [Integration: Remix](https://drupal-decoupled.octahedroid.com/docs/getting-started/examples/remix-graphql)
-- [Integration: Next.js](https://drupal-decoupled.octahedroid.com/docs/getting-started/examples/next-graphql)
+- [Drupal](https://drupal-decoupled.octahedroid.com/docs/getting-started/quickstart/drupal)
+- [Remix](https://drupal-decoupled.octahedroid.com/docs/getting-started/quickstart/remix)
+- [Next.js](https://drupal-decoupled.octahedroid.com/docs/getting-started/quickstart/next)
 
 ### Step by step
-- [Drupal](https://drupal-decoupled.octahedroid.com/docs/category/drupal)
-- [Remix](https://drupal-decoupled.octahedroid.com/docs/getting-started/frontend/remix)
-- [Next.js](https://drupal-decoupled.octahedroid.com/docs/getting-started/frontend/next)
+- [Drupal](https://drupal-decoupled.octahedroid.com/docs/getting-started/step-by-step/drupal)
+- [Remix](https://drupal-decoupled.octahedroid.com/docs/getting-started/step-by-step/starters/remix)
+- [Next.js](https://drupal-decoupled.octahedroid.com/docs/getting-started/step-by-step/starters/next)
 
 ## Supporting organizations
 

examples/next-graphql/.env.example → starters/next/.env.example

@@ -1,8 +1,8 @@
 # use your site url and comment adding # to the orther
 # ddev
-DRUPAL_AUTH_URI=http://drupal-graphql-example.ddev.site
+DRUPAL_AUTH_URI=http://drupal-decoupled.ddev.site
 # lando
-# DRUPAL_AUTH_URI=http://drupal-graphql-example.lndo.site
+# DRUPAL_AUTH_URI=http://drupal-decoupled.lndo.site
 
 # You can use the previously generated `DRUPAL_CLIENT_ID` and `DRUPAL_CLIENT_SECRET` values shown on the CLI or as a warning message.
 # You can reuse the previously generated Consumers at the site by visiting `admin/config/services/consumer` to edit the consumers labeled as `Viewer` & `Previewer` and assigning them a new secret value.
@@ -12,12 +12,9 @@ DRUPAL_CLIENT_SECRET=
 
 # use your site url and comment adding # to the orther
 # ddev
-DRUPAL_GRAPHQL_URI=http://drupal-graphql-example.ddev.site/graphql
+DRUPAL_GRAPHQL_URI=http://drupal-decoupled.ddev.site/graphql
 # lando
-# DRUPAL_GRAPHQL_URI=http://drupal-graphql-example.lndo.site/graphql
+# DRUPAL_GRAPHQL_URI=http://drupal-decoupled.lndo.site/graphql
 
 # use preview or production
 ENVIRONMENT=preview
-
-# use your node version
-NODE_VERSION=v20.10.0

examples/next-graphql/README.md → starters/next/README.md

@@ -2,7 +2,7 @@
 
 ## Getting Started
 
-Visit the docs to see how to use this [Next.js](https://drupal-decoupled.octahedroid.com/docs/getting-started/examples/next-graphql) project.
+Visit the docs to see how to use this [Next.js](https://drupal-decoupled.octahedroid.com/docs/getting-started/quickstart/next) starter.
 
 ## Supporting organizations
 

examples/remix-graphql/.dev.vars.example → starters/remix/.dev.vars.example

@@ -1,8 +1,8 @@
 # use your site url and comment adding # to the orther
 # ddev
-DRUPAL_AUTH_URI=http://drupal-graphql-example.ddev.site
+DRUPAL_AUTH_URI=http://drupal-decoupled.ddev.site
 # lando
-# DRUPAL_AUTH_URI=http://drupal-graphql-example.lndo.site
+# DRUPAL_AUTH_URI=http://drupal-decoupled.lndo.site
 
 # You can use the previously generated `DRUPAL_CLIENT_ID` and `DRUPAL_CLIENT_SECRET` values shown on the CLI or as a warning message.
 # You can reuse the previously generated Consumers at the site by visiting `admin/config/services/consumer` to edit the consumers labeled as `Viewer` & `Previewer` and assigning them a new secret value.
@@ -12,12 +12,9 @@ DRUPAL_CLIENT_SECRET=
 
 # use your site url and comment adding # to the orther
 # ddev
-DRUPAL_GRAPHQL_URI=http://drupal-graphql-example.ddev.site/graphql
+DRUPAL_GRAPHQL_URI=http://drupal-decoupled.ddev.site/graphql
 # lando
-# DRUPAL_GRAPHQL_URI=http://drupal-graphql-example.lndo.site/graphql
+# DRUPAL_GRAPHQL_URI=http://drupal-decoupled.lndo.site/graphql
 
 # use preview or production
 ENVIRONMENT=preview
-
-# use your node version
-NODE_VERSION=v20.10.0

examples/remix-graphql/README.md → starters/remix/README.md

@@ -2,7 +2,7 @@
 
 ## Getting Started
 
-Visit the docs to see how to use this [Remix](https://drupal-decoupled.octahedroid.com/docs/getting-started/examples/remix-graphql) project.
+Visit the docs to see how to use this [Remix](https://drupal-decoupled.octahedroid.com/docs/getting-started/quickstart/remix) starter.
 
 ## Supporting organizations
 

starters/remix/app/components/drupal/paragraph/ViewReference.tsx

@@ -0,0 +1,31 @@
+import BlogTeaser from "~/components/drupal/view/BlogTeaser";
+
+export type ViewReferenceProps = {
+  view: string;
+  display: string;
+  results?: [];
+}
+
+export const ViewReferenceDefaultProps: ViewReferenceProps = {
+  view: '',
+  display: '',
+  results: [] || null, 
+}
+
+export default function ViewReference({ view, display, results = [] } : ViewReferenceProps) {
+
+  if (view === 'blog' && display === 'blog_teaser') {
+    return (
+      <BlogTeaser results={results} />
+    );
+  }
+
+  return (
+    <>
+      <h2>ViewReference</h2>
+      <pre>
+        {JSON.stringify({ view, display, results }, null, 2)}
+      </pre>
+    </>
+  );
+}

examples/remix-graphql/app/components/drupal/view/BlogTeaser.tsx → starters/remix/app/components/drupal/view/BlogTeaser.tsx

@@ -3,7 +3,7 @@ import { NodeArticleFragment, NodeArticleTeaserFragment } from "~/graphql/drupal
 import NodeArticleTeaser from "~/components/drupal/node/NodeArticleTeaser";
 
 interface BlogTeaserProps {
-  results: Array<FragmentOf<typeof NodeArticleTeaserFragment>>
+  results: []
 }
 
 export default function BlogTeaser(

examples/remix-graphql/app/components/helpers/ComponentRenderer.tsx → starters/remix/app/components/helpers/ComponentRenderer.tsx

@@ -11,11 +11,14 @@ export function ComponentRenderer({ components, environment } : ComponentsProps)
   // If we are in preview mode, render the VisualEditor
   if (environment === 'preview') {
     const ids = components.map((component) => {
-      return component.props.paragraph.id;
+      const id = component.props.paragraph ? component.props.paragraph.id : component.key;
+
+      return id;
     });
 
     const componentMapping = components.reduce((acc, component) => {
-      acc[component.props.paragraph.id] = component;
+      const id = component.props.paragraph ? component.props.paragraph.id : component.key;
+      acc[id] = component;
       return acc;
     }, {} as { [key: string]: JSX.Element });