fix(docs): add diagrams to concepts #3462
Conversation
| LoopBack 4 introduces some new concepts that are important to understand: | ||
| LoopBack 4 introduces some new concepts that are important to understand. | ||
|
|
||
|  | ||
|
|
||
| - [**Application**](Application.md): The central class for setting up all of | ||
| your module’s components, controllers, servers and bindings. The Application |
There was a problem hiding this comment.
We may need to refer to a lower layer that shows context, binding, and component.
There was a problem hiding this comment.
LoopBack 4 defines some key building blocks to represent different responsibilities for typical API and/or Microservice applications.
There was a problem hiding this comment.
We may need to refer to a lower layer that shows context, binding, and component.
@raymondfeng , do you want to move those to the "behind the scene" sidebar?
There was a problem hiding this comment.
Should we move "interceptor" to section "Behind-the-scene" as well?
There was a problem hiding this comment.
Interceptor probably should stay outside of Behind-the-scene.
dhmlau
force-pushed
the
concepts
branch
2 times, most recently
from
a69cf53 to
c817eb3
Compare
|
This is how the sidebar looks like:
|
|
@raymondfeng, i think ideally we can include a diagram for the "behind the scene" section. But I don't think I understand enough to create such diagram to illustrate how context/binding/DI/Components work together. Perhaps we can work on that in a separate PR? Thanks. |
dhmlau
changed the title
docs/site/Behind-the-scene.md
Outdated
| permalink: /doc/en/lb4/Behind-the-scene.html | ||
| --- | ||
|
|
||
| Here are the infrastructure that get all the artifacts working together: |
There was a problem hiding this comment.
infrastructure-->insfrastructures?
| LoopBack 4 introduces some new concepts that are important to understand: | ||
| LoopBack 4 introduces some new concepts that are important to understand. | ||
|
|
||
|  | ||
|
|
||
| - [**Application**](Application.md): The central class for setting up all of | ||
| your module’s components, controllers, servers and bindings. The Application |
There was a problem hiding this comment.
Should we move "interceptor" to section "Behind-the-scene" as well?
|
@dhmlau We should re-sort key concepts. For example, move all data related ones so that they are next to each other:
|
|
@dhmlau Nice diagrams. Can we use smaller fonts and boxes? |
docs/site/DataSources.md
Outdated
| @@ -12,7 +12,7 @@ A `DataSource` in LoopBack 4 is a named configuration for a Connector instance | |||
| that represents data in an external system. The Connector is used by | |||
| `legacy-juggler-bridge` to power LoopBack 4 Repositories for Data operations. | |||
|
|
|||
|  | |||
| <img src="imgs/datasource.png" alt="Datasource diagram" width="300"> | |||
There was a problem hiding this comment.
Should the image be aligned to the center?
What if we change the font/shape size in the original diagram instead of having the browser resizing it?
There was a problem hiding this comment.
I think we should highlight the DataSource box and make the rest half transparent or lower contrast.
There was a problem hiding this comment.
The font and shape size is small because I just do a screen cap of the overview diagram, but somehow the image got expanded.
There seems to be problems in displaying the image when I'm testing it locally. So I'm trying to resize the image itself.
There was a problem hiding this comment.
@raymondfeng , it seems like making the image at the center is harder than I thought. :-)
We can use the html snippet to specify the alignment, i.e.
<center>
<img src="pages/en/lb4/imgs/datasource.png">
</center>
The image appears fine when testing locally, however, the image will appear to be broken if you view within loopback-next.
I think it's better to be able to view it within github or within the loopback-next repo (i.e.  ) than to make the image to be at the center. But I don't have a very strong preference. WDYT?
There was a problem hiding this comment.
I can accept the left-aligned diagrams with simple markdown syntax.
Got an overview diagram from @raymondfeng and I'm trying to get a snippet for some of the LB concepts.
This PR implements some of the proposal items discussed in: #3164. Changes in this PR:
Related to #3383
Checklist
👉 Read and sign the CLA (Contributor License Agreement) 👈
npm testpasses on your machinepackages/cliwere updatedexamples/*were updated👉 Check out how to submit a PR 👈