chore(docs): Reference new ComponentModel component rather than gener…

…ic LayerModel (#23241)

* Reference new ComponentModel component rather than generic LayerModel

* Remove use of t macro from layer models

* Half-fixing lingui code

* Revert "Half-fixing lingui code"

This reverts commit 64f052a.

* Remove Lingui from layer-model

docs/contributing/docs-and-blog-components.md

@@ -124,13 +124,13 @@ Rendered, the component looks like this:
   To improve is to change, so to be perfect is to have changed often.
 </Pullquote>
 
-### Layer Model
+### Component Model
 
-The `<LayerModel />` was made to help explain concepts of how Gatsby works at a high level. It conceptually breaks Gatsby into different layers and shows how data is pulled, aggregated, and eventually rendered as an app. It's used on docs pages to help explain how Gatsby works at different levels.
+The `<ComponentModel />` was made to help explain concepts of how Gatsby works at a high level. It conceptually breaks Gatsby into different layers and shows how data is pulled, aggregated, and eventually rendered as an app. It's used on docs pages to help explain how Gatsby works at different levels.
 
 #### Usage
 
-The Layer Model component takes one prop:
+The Component Model component takes one prop:
 
 - `initialLayer` - defaults to `Content`, can be one of `Content`, `Build`, `Data`, `View`, `App` that correspond to the different layers
 
@@ -139,18 +139,16 @@ The Layer Model component takes one prop:
 title: GraphQL Concepts in Gatsby
 ---
 
-import LayerModel from "../../www/src/components/layer-model"
-
 To help understand how GraphQL works in Gatsby...
 
-<LayerModel initialLayer="Data" />
+<ComponentModel initialLayer="Data" />
 ```
 
 #### Sample
 
 When used, it looks like this:
 
-<LayerModel initialLayer="Data" />
+<ComponentModel initialLayer="Data" />
 
 ### Horizontal Navigation List
 

docs/docs/gatsby-lifecycle-apis.md

@@ -17,7 +17,7 @@ Gatsby's design principles include:
 
 The following model gives a conceptual overview of how data is sourced and transformed in the process of building a Gatsby site:
 
-<LayerModel />
+<ComponentModel />
 
 ## Bootstrap sequence
 

docs/docs/graphql-concepts.md

@@ -21,7 +21,7 @@ the browser when needed by your components.
 
 Data from any number of sources is made queryable in one unified layer, a key part of the Gatsby building process:
 
-<LayerModel initialLayer="Data" />
+<ComponentModel initialLayer="Data" />
 
 ## Why is GraphQL so cool?
 

docs/docs/overview-of-the-gatsby-build-process.md

@@ -163,7 +163,7 @@ A Node.js server process powers things behind the scenes when you run the `gatsb
 
 The following model demonstrates what is happening in different "layers" of Gatsby as content and data are gathered up and made available for your static assets.
 
-<LayerModel initialLayer="Build" />
+<ComponentModel initialLayer="Build" />
 
 Like the console output demonstrates in the section above, there are 2 main steps that take place when you run a build: the `bootstrap` phase, and the `build` phase (which can be observed finishing in the console output when you run `gatsby develop` or `gatsby build`).
 

www/src/components/layer-model/component-model/index.js

@@ -9,36 +9,33 @@ import {
   AppLayerContent,
 } from "./component-content-sections"
 
-import { t } from "@lingui/macro"
-
-
 const layers = [
   {
-    title: t`Content`,
+    title: `Content`,
     icon: `AbstractSymbol`,
     baseColor: `orange`,
     component: ContentLayerContent,
   },
   {
-    title: t`Build`,
+    title: `Build`,
     icon: `AtomicSymbol`,
     baseColor: `green`,
     component: BuildLayerContent,
   },
   {
-    title: t`Data`,
+    title: `Data`,
     icon: `GraphqlLogo`,
     baseColor: `magenta`,
     component: DataLayerContent,
   },
   {
-    title: t`View`,
+    title: `View`,
     icon: `ReactLogo`,
     baseColor: `blue`,
     component: ViewLayerContent,
   },
   {
-    title: t`App`,
+    title: `App`,
     icon: `AppWindow`,
     baseColor: `yellow`,
     component: AppLayerContent,

www/src/components/layer-model/image-model/index.js

@@ -1,5 +1,4 @@
 import React from "react"
-import { t } from "@lingui/macro"
 
 import LayerModel from "../layer-model"
 import {
@@ -11,25 +10,25 @@ import {
 
 const layers = [
   {
-    title: t`Install`,
+    title: `Install`,
     icon: `AbstractSymbol`,
     baseColor: `orange`,
     component: InstallLayerContent,
   },
   {
-    title: t`Config`,
+    title: `Config`,
     icon: `AtomicSymbol`,
     baseColor: `green`,
     component: ConfigLayerContent,
   },
   {
-    title: t`Query`,
+    title: `Query`,
     icon: `GraphqlLogo`,
     baseColor: `magenta`,
     component: QueryLayerContent,
   },
   {
-    title: t`Display`,
+    title: `Display`,
     icon: `ReactLogo`,
     baseColor: `blue`,
     component: DisplayLayerContent,

www/src/components/layer-model/layer-model.js

@@ -5,7 +5,6 @@ import hex2rgba from "hex2rgba"
 
 import { colors } from "gatsby-design-tokens/dist/theme-gatsbyjs-org"
 import LayerIcon from "../../assets/icons/layer-icon"
-import { Trans } from "@lingui/macro"
 
 const Layer = ({ buttonRef, layer, onClick, selected, index }) => {
   const { baseColor, title, icon } = layer
@@ -52,7 +51,7 @@ const Layer = ({ buttonRef, layer, onClick, selected, index }) => {
             fillColor={selected ? colors[baseColor][70] : colors.grey[50]}
           />
         </span>
-        <span><Trans>{title}</Trans></span>
+        <span>{title}</span>
       </span>
     </button>
   )