fix(docs): add diagrams to concepts - #3462

Merged
dhmlau merged 1 commit into
masterfrom
concepts
Aug 20, 2019
Merged

fix(docs): add diagrams to concepts#3462
dhmlau merged 1 commit into
masterfrom
concepts

Conversation

@dhmlau

@dhmlaudhmlau commented Jul 26, 2019

Copy link
Copy Markdown
Member

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:

  • added the "behind the scene" sidebar item
  • refactor some of the concepts to the "behind the scene"
  • added the diagram in the Concepts page

Related to #3383

Checklist

👉 Read and sign the CLA (Contributor License Agreement) 👈

  • npm test passes on your machine
  • New tests added or existing tests modified to cover all changes
  • Code conforms with the style guide
  • API Documentation in code was updated
  • Documentation in /docs/site was updated
  • Affected artifact templates in packages/cli were updated
  • Affected example projects in examples/* were updated

👉 Check out how to submit a PR 👈

Comment threaddocs/site/Concepts.md
![Key concepts overview diagram](imgs/key-concepts-overview-diagram.png)

- [**Application**](Application.md): The central class for setting up all of
your module’s components, controllers, servers and bindings. The Application

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We may need to refer to a lower layer that shows context, binding, and component.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LoopBack 4 defines some key building blocks to represent different responsibilities for typical API and/or Microservice applications.

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we move "interceptor" to section "Behind-the-scene" as well?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interceptor probably should stay outside of Behind-the-scene.

@dhmlaudhmlau self-assigned this Aug 6, 2019
@dhmlau
dhmlauforce-pushed the concepts branch 2 times, most recently from a69cf53 to c817eb3CompareAugust 16, 2019 02:56
@dhmlau

Copy link
Copy Markdown
MemberAuthor

This is how the sidebar looks like:

Screen Shot 2019-08-15 at 10 49 24 PM

@dhmlau
dhmlau marked this pull request as ready for review August 16, 2019 03:02
@dhmlau
dhmlau requested a review from bajtos as a code ownerAugust 16, 2019 03:02
@dhmlau

Copy link
Copy Markdown
MemberAuthor

@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.

@dhmlaudhmlau changed the title [WIP] fix(docs): add diagrams to conceptsfix(docs): add diagrams to conceptsAug 16, 2019

@jannyHoujannyHou left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left some minor suggestions. LGTM 👍 :shipit:

Comment threaddocs/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:

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

infrastructure-->insfrastructures?

Comment threaddocs/site/Concepts.md
![Key concepts overview diagram](imgs/key-concepts-overview-diagram.png)

- [**Application**](Application.md): The central class for setting up all of
your module’s components, controllers, servers and bindings. The Application

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we move "interceptor" to section "Behind-the-scene" as well?

@raymondfeng

Copy link
Copy Markdown
Contributor

@dhmlau We should re-sort key concepts. For example, move all data related ones so that they are next to each other:

  • Models (changed from Model)
  • Relations
  • DataSources
  • Repositories

@raymondfeng

Copy link
Copy Markdown
Contributor

@dhmlau Nice diagrams. Can we use smaller fonts and boxes?

Comment threaddocs/site/DataSources.md Outdated
`legacy-juggler-bridge` to power LoopBack 4 Repositories for Data operations.

![Datasource diagram](imgs/datasource.png)
<img src="imgs/datasource.png" alt="Datasource diagram" width="300">

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should highlight the DataSource box and make the rest half transparent or lower contrast.

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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. ![Datasource diagram](imgs/datasource.png) ) than to make the image to be at the center. But I don't have a very strong preference. WDYT?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can accept the left-aligned diagrams with simple markdown syntax.

@dhmlau
dhmlau merged commit 5d90653 into masterAug 20, 2019
@dhmlau
dhmlau deleted the concepts branch August 20, 2019 17:14
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@dhmlau@raymondfeng@jannyHou
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Skip to content

fix(docs): add diagrams to concepts - #3462

Merged
dhmlau merged 1 commit into
masterfrom
concepts
Aug 20, 2019
Merged

fix(docs): add diagrams to concepts#3462
dhmlau merged 1 commit into
masterfrom
concepts

Conversation

@dhmlau

@dhmlaudhmlau commented Jul 26, 2019

Copy link
Copy Markdown
Member

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:

  • added the "behind the scene" sidebar item
  • refactor some of the concepts to the "behind the scene"
  • added the diagram in the Concepts page

Related to #3383

Checklist

👉 Read and sign the CLA (Contributor License Agreement) 👈

  • npm test passes on your machine
  • New tests added or existing tests modified to cover all changes
  • Code conforms with the style guide
  • API Documentation in code was updated
  • Documentation in /docs/site was updated
  • Affected artifact templates in packages/cli were updated
  • Affected example projects in examples/* were updated

👉 Check out how to submit a PR 👈

Comment threaddocs/site/Concepts.md
![Key concepts overview diagram](imgs/key-concepts-overview-diagram.png)

- [**Application**](Application.md): The central class for setting up all of
your module’s components, controllers, servers and bindings. The Application

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We may need to refer to a lower layer that shows context, binding, and component.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LoopBack 4 defines some key building blocks to represent different responsibilities for typical API and/or Microservice applications.

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we move "interceptor" to section "Behind-the-scene" as well?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interceptor probably should stay outside of Behind-the-scene.

@dhmlaudhmlau self-assigned this Aug 6, 2019
@dhmlau
dhmlauforce-pushed the concepts branch 2 times, most recently from a69cf53 to c817eb3CompareAugust 16, 2019 02:56
@dhmlau

Copy link
Copy Markdown
MemberAuthor

This is how the sidebar looks like:

Screen Shot 2019-08-15 at 10 49 24 PM

@dhmlau
dhmlau marked this pull request as ready for review August 16, 2019 03:02
@dhmlau
dhmlau requested a review from bajtos as a code ownerAugust 16, 2019 03:02
@dhmlau

Copy link
Copy Markdown
MemberAuthor

@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.

@dhmlaudhmlau changed the title [WIP] fix(docs): add diagrams to conceptsfix(docs): add diagrams to conceptsAug 16, 2019

@jannyHoujannyHou left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left some minor suggestions. LGTM 👍 :shipit:

Comment threaddocs/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:

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

infrastructure-->insfrastructures?

Comment threaddocs/site/Concepts.md
![Key concepts overview diagram](imgs/key-concepts-overview-diagram.png)

- [**Application**](Application.md): The central class for setting up all of
your module’s components, controllers, servers and bindings. The Application

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we move "interceptor" to section "Behind-the-scene" as well?

@raymondfeng

Copy link
Copy Markdown
Contributor

@dhmlau We should re-sort key concepts. For example, move all data related ones so that they are next to each other:

  • Models (changed from Model)
  • Relations
  • DataSources
  • Repositories

@raymondfeng

Copy link
Copy Markdown
Contributor

@dhmlau Nice diagrams. Can we use smaller fonts and boxes?

Comment threaddocs/site/DataSources.md Outdated
`legacy-juggler-bridge` to power LoopBack 4 Repositories for Data operations.

![Datasource diagram](imgs/datasource.png)
<img src="imgs/datasource.png" alt="Datasource diagram" width="300">

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should highlight the DataSource box and make the rest half transparent or lower contrast.

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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. ![Datasource diagram](imgs/datasource.png) ) than to make the image to be at the center. But I don't have a very strong preference. WDYT?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can accept the left-aligned diagrams with simple markdown syntax.

@dhmlau
dhmlau merged commit 5d90653 into masterAug 20, 2019
@dhmlau
dhmlau deleted the concepts branch August 20, 2019 17:14
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@dhmlau@raymondfeng@jannyHou
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

fix(docs): add diagrams to concepts - #3462

Merged
dhmlau merged 1 commit into
masterfrom
concepts
Aug 20, 2019
Merged

fix(docs): add diagrams to concepts#3462
dhmlau merged 1 commit into
masterfrom
concepts

Conversation

@dhmlau

@dhmlaudhmlau commented Jul 26, 2019

Copy link
Copy Markdown
Member

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:

  • added the "behind the scene" sidebar item
  • refactor some of the concepts to the "behind the scene"
  • added the diagram in the Concepts page

Related to #3383

Checklist

👉 Read and sign the CLA (Contributor License Agreement) 👈

  • npm test passes on your machine
  • New tests added or existing tests modified to cover all changes
  • Code conforms with the style guide
  • API Documentation in code was updated
  • Documentation in /docs/site was updated
  • Affected artifact templates in packages/cli were updated
  • Affected example projects in examples/* were updated

👉 Check out how to submit a PR 👈

Comment threaddocs/site/Concepts.md
![Key concepts overview diagram](imgs/key-concepts-overview-diagram.png)

- [**Application**](Application.md): The central class for setting up all of
your module’s components, controllers, servers and bindings. The Application

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We may need to refer to a lower layer that shows context, binding, and component.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LoopBack 4 defines some key building blocks to represent different responsibilities for typical API and/or Microservice applications.

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we move "interceptor" to section "Behind-the-scene" as well?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interceptor probably should stay outside of Behind-the-scene.

@dhmlaudhmlau self-assigned this Aug 6, 2019
@dhmlau
dhmlauforce-pushed the concepts branch 2 times, most recently from a69cf53 to c817eb3CompareAugust 16, 2019 02:56
@dhmlau

Copy link
Copy Markdown
MemberAuthor

This is how the sidebar looks like:

Screen Shot 2019-08-15 at 10 49 24 PM

@dhmlau
dhmlau marked this pull request as ready for review August 16, 2019 03:02
@dhmlau
dhmlau requested a review from bajtos as a code ownerAugust 16, 2019 03:02
@dhmlau

Copy link
Copy Markdown
MemberAuthor

@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.

@dhmlaudhmlau changed the title [WIP] fix(docs): add diagrams to conceptsfix(docs): add diagrams to conceptsAug 16, 2019

@jannyHoujannyHou left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left some minor suggestions. LGTM 👍 :shipit:

Comment threaddocs/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:

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

infrastructure-->insfrastructures?

Comment threaddocs/site/Concepts.md
![Key concepts overview diagram](imgs/key-concepts-overview-diagram.png)

- [**Application**](Application.md): The central class for setting up all of
your module’s components, controllers, servers and bindings. The Application

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we move "interceptor" to section "Behind-the-scene" as well?

@raymondfeng

Copy link
Copy Markdown
Contributor

@dhmlau We should re-sort key concepts. For example, move all data related ones so that they are next to each other:

  • Models (changed from Model)
  • Relations
  • DataSources
  • Repositories

@raymondfeng

Copy link
Copy Markdown
Contributor

@dhmlau Nice diagrams. Can we use smaller fonts and boxes?

Comment threaddocs/site/DataSources.md Outdated
`legacy-juggler-bridge` to power LoopBack 4 Repositories for Data operations.

![Datasource diagram](imgs/datasource.png)
<img src="imgs/datasource.png" alt="Datasource diagram" width="300">

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should highlight the DataSource box and make the rest half transparent or lower contrast.

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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. ![Datasource diagram](imgs/datasource.png) ) than to make the image to be at the center. But I don't have a very strong preference. WDYT?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can accept the left-aligned diagrams with simple markdown syntax.

@dhmlau
dhmlau merged commit 5d90653 into masterAug 20, 2019
@dhmlau
dhmlau deleted the concepts branch August 20, 2019 17:14
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@dhmlau@raymondfeng@jannyHou
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

fix(docs): add diagrams to concepts - #3462

Merged
dhmlau merged 1 commit into
masterfrom
concepts
Aug 20, 2019
Merged

fix(docs): add diagrams to concepts#3462
dhmlau merged 1 commit into
masterfrom
concepts

Conversation

@dhmlau

@dhmlaudhmlau commented Jul 26, 2019

Copy link
Copy Markdown
Member

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:

  • added the "behind the scene" sidebar item
  • refactor some of the concepts to the "behind the scene"
  • added the diagram in the Concepts page

Related to #3383

Checklist

👉 Read and sign the CLA (Contributor License Agreement) 👈

  • npm test passes on your machine
  • New tests added or existing tests modified to cover all changes
  • Code conforms with the style guide
  • API Documentation in code was updated
  • Documentation in /docs/site was updated
  • Affected artifact templates in packages/cli were updated
  • Affected example projects in examples/* were updated

👉 Check out how to submit a PR 👈

Comment threaddocs/site/Concepts.md
![Key concepts overview diagram](imgs/key-concepts-overview-diagram.png)

- [**Application**](Application.md): The central class for setting up all of
your module’s components, controllers, servers and bindings. The Application

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We may need to refer to a lower layer that shows context, binding, and component.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LoopBack 4 defines some key building blocks to represent different responsibilities for typical API and/or Microservice applications.

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we move "interceptor" to section "Behind-the-scene" as well?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interceptor probably should stay outside of Behind-the-scene.

@dhmlaudhmlau self-assigned this Aug 6, 2019
@dhmlau
dhmlauforce-pushed the concepts branch 2 times, most recently from a69cf53 to c817eb3CompareAugust 16, 2019 02:56
@dhmlau

Copy link
Copy Markdown
MemberAuthor

This is how the sidebar looks like:

Screen Shot 2019-08-15 at 10 49 24 PM

@dhmlau
dhmlau marked this pull request as ready for review August 16, 2019 03:02
@dhmlau
dhmlau requested a review from bajtos as a code ownerAugust 16, 2019 03:02
@dhmlau

Copy link
Copy Markdown
MemberAuthor

@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.

@dhmlaudhmlau changed the title [WIP] fix(docs): add diagrams to conceptsfix(docs): add diagrams to conceptsAug 16, 2019

@jannyHoujannyHou left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left some minor suggestions. LGTM 👍 :shipit:

Comment threaddocs/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:

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

infrastructure-->insfrastructures?

Comment threaddocs/site/Concepts.md
![Key concepts overview diagram](imgs/key-concepts-overview-diagram.png)

- [**Application**](Application.md): The central class for setting up all of
your module’s components, controllers, servers and bindings. The Application

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we move "interceptor" to section "Behind-the-scene" as well?

@raymondfeng

Copy link
Copy Markdown
Contributor

@dhmlau We should re-sort key concepts. For example, move all data related ones so that they are next to each other:

  • Models (changed from Model)
  • Relations
  • DataSources
  • Repositories

@raymondfeng

Copy link
Copy Markdown
Contributor

@dhmlau Nice diagrams. Can we use smaller fonts and boxes?

Comment threaddocs/site/DataSources.md Outdated
`legacy-juggler-bridge` to power LoopBack 4 Repositories for Data operations.

![Datasource diagram](imgs/datasource.png)
<img src="imgs/datasource.png" alt="Datasource diagram" width="300">

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should highlight the DataSource box and make the rest half transparent or lower contrast.

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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. ![Datasource diagram](imgs/datasource.png) ) than to make the image to be at the center. But I don't have a very strong preference. WDYT?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can accept the left-aligned diagrams with simple markdown syntax.

@dhmlau
dhmlau merged commit 5d90653 into masterAug 20, 2019
@dhmlau
dhmlau deleted the concepts branch August 20, 2019 17:14
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@dhmlau@raymondfeng@jannyHou
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
Skip to content

fix(docs): add diagrams to concepts - #3462

Merged
dhmlau merged 1 commit into
masterfrom
concepts
Aug 20, 2019
Merged

fix(docs): add diagrams to concepts#3462
dhmlau merged 1 commit into
masterfrom
concepts

Conversation

@dhmlau

@dhmlaudhmlau commented Jul 26, 2019

Copy link
Copy Markdown
Member

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:

  • added the "behind the scene" sidebar item
  • refactor some of the concepts to the "behind the scene"
  • added the diagram in the Concepts page

Related to #3383

Checklist

👉 Read and sign the CLA (Contributor License Agreement) 👈

  • npm test passes on your machine
  • New tests added or existing tests modified to cover all changes
  • Code conforms with the style guide
  • API Documentation in code was updated
  • Documentation in /docs/site was updated
  • Affected artifact templates in packages/cli were updated
  • Affected example projects in examples/* were updated

👉 Check out how to submit a PR 👈

Comment threaddocs/site/Concepts.md
![Key concepts overview diagram](imgs/key-concepts-overview-diagram.png)

- [**Application**](Application.md): The central class for setting up all of
your module’s components, controllers, servers and bindings. The Application

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We may need to refer to a lower layer that shows context, binding, and component.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LoopBack 4 defines some key building blocks to represent different responsibilities for typical API and/or Microservice applications.

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we move "interceptor" to section "Behind-the-scene" as well?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interceptor probably should stay outside of Behind-the-scene.

@dhmlaudhmlau self-assigned this Aug 6, 2019
@dhmlau
dhmlauforce-pushed the concepts branch 2 times, most recently from a69cf53 to c817eb3CompareAugust 16, 2019 02:56
@dhmlau

Copy link
Copy Markdown
MemberAuthor

This is how the sidebar looks like:

Screen Shot 2019-08-15 at 10 49 24 PM

@dhmlau
dhmlau marked this pull request as ready for review August 16, 2019 03:02
@dhmlau
dhmlau requested a review from bajtos as a code ownerAugust 16, 2019 03:02
@dhmlau

Copy link
Copy Markdown
MemberAuthor

@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.

@dhmlaudhmlau changed the title [WIP] fix(docs): add diagrams to conceptsfix(docs): add diagrams to conceptsAug 16, 2019

@jannyHoujannyHou left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left some minor suggestions. LGTM 👍 :shipit:

Comment threaddocs/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:

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

infrastructure-->insfrastructures?

Comment threaddocs/site/Concepts.md
![Key concepts overview diagram](imgs/key-concepts-overview-diagram.png)

- [**Application**](Application.md): The central class for setting up all of
your module’s components, controllers, servers and bindings. The Application

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we move "interceptor" to section "Behind-the-scene" as well?

@raymondfeng

Copy link
Copy Markdown
Contributor

@dhmlau We should re-sort key concepts. For example, move all data related ones so that they are next to each other:

  • Models (changed from Model)
  • Relations
  • DataSources
  • Repositories

@raymondfeng

Copy link
Copy Markdown
Contributor

@dhmlau Nice diagrams. Can we use smaller fonts and boxes?

Comment threaddocs/site/DataSources.md Outdated
`legacy-juggler-bridge` to power LoopBack 4 Repositories for Data operations.

![Datasource diagram](imgs/datasource.png)
<img src="imgs/datasource.png" alt="Datasource diagram" width="300">

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should highlight the DataSource box and make the rest half transparent or lower contrast.

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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. ![Datasource diagram](imgs/datasource.png) ) than to make the image to be at the center. But I don't have a very strong preference. WDYT?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can accept the left-aligned diagrams with simple markdown syntax.

@dhmlau
dhmlau merged commit 5d90653 into masterAug 20, 2019
@dhmlau
dhmlau deleted the concepts branch August 20, 2019 17:14
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@dhmlau@raymondfeng@jannyHou
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

fix(docs): add diagrams to concepts - #3462

Merged
dhmlau merged 1 commit into
masterfrom
concepts
Aug 20, 2019
Merged

fix(docs): add diagrams to concepts#3462
dhmlau merged 1 commit into
masterfrom
concepts

Conversation

@dhmlau

@dhmlaudhmlau commented Jul 26, 2019

Copy link
Copy Markdown
Member

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:

  • added the "behind the scene" sidebar item
  • refactor some of the concepts to the "behind the scene"
  • added the diagram in the Concepts page

Related to #3383

Checklist

👉 Read and sign the CLA (Contributor License Agreement) 👈

  • npm test passes on your machine
  • New tests added or existing tests modified to cover all changes
  • Code conforms with the style guide
  • API Documentation in code was updated
  • Documentation in /docs/site was updated
  • Affected artifact templates in packages/cli were updated
  • Affected example projects in examples/* were updated

👉 Check out how to submit a PR 👈

Comment threaddocs/site/Concepts.md
![Key concepts overview diagram](imgs/key-concepts-overview-diagram.png)

- [**Application**](Application.md): The central class for setting up all of
your module’s components, controllers, servers and bindings. The Application

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We may need to refer to a lower layer that shows context, binding, and component.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LoopBack 4 defines some key building blocks to represent different responsibilities for typical API and/or Microservice applications.

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we move "interceptor" to section "Behind-the-scene" as well?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interceptor probably should stay outside of Behind-the-scene.

@dhmlaudhmlau self-assigned this Aug 6, 2019
@dhmlau
dhmlauforce-pushed the concepts branch 2 times, most recently from a69cf53 to c817eb3CompareAugust 16, 2019 02:56
@dhmlau

Copy link
Copy Markdown
MemberAuthor

This is how the sidebar looks like:

Screen Shot 2019-08-15 at 10 49 24 PM

@dhmlau
dhmlau marked this pull request as ready for review August 16, 2019 03:02
@dhmlau
dhmlau requested a review from bajtos as a code ownerAugust 16, 2019 03:02
@dhmlau

Copy link
Copy Markdown
MemberAuthor

@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.

@dhmlaudhmlau changed the title [WIP] fix(docs): add diagrams to conceptsfix(docs): add diagrams to conceptsAug 16, 2019

@jannyHoujannyHou left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left some minor suggestions. LGTM 👍 :shipit:

Comment threaddocs/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:

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

infrastructure-->insfrastructures?

Comment threaddocs/site/Concepts.md
![Key concepts overview diagram](imgs/key-concepts-overview-diagram.png)

- [**Application**](Application.md): The central class for setting up all of
your module’s components, controllers, servers and bindings. The Application

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we move "interceptor" to section "Behind-the-scene" as well?

@raymondfeng

Copy link
Copy Markdown
Contributor

@dhmlau We should re-sort key concepts. For example, move all data related ones so that they are next to each other:

  • Models (changed from Model)
  • Relations
  • DataSources
  • Repositories

@raymondfeng

Copy link
Copy Markdown
Contributor

@dhmlau Nice diagrams. Can we use smaller fonts and boxes?

Comment threaddocs/site/DataSources.md Outdated
`legacy-juggler-bridge` to power LoopBack 4 Repositories for Data operations.

![Datasource diagram](imgs/datasource.png)
<img src="imgs/datasource.png" alt="Datasource diagram" width="300">

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should highlight the DataSource box and make the rest half transparent or lower contrast.

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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. ![Datasource diagram](imgs/datasource.png) ) than to make the image to be at the center. But I don't have a very strong preference. WDYT?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can accept the left-aligned diagrams with simple markdown syntax.

@dhmlau
dhmlau merged commit 5d90653 into masterAug 20, 2019
@dhmlau
dhmlau deleted the concepts branch August 20, 2019 17:14
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@dhmlau@raymondfeng@jannyHou
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

fix(docs): add diagrams to concepts - #3462

Merged
dhmlau merged 1 commit into
masterfrom
concepts
Aug 20, 2019
Merged

fix(docs): add diagrams to concepts#3462
dhmlau merged 1 commit into
masterfrom
concepts

Conversation

@dhmlau

@dhmlaudhmlau commented Jul 26, 2019

Copy link
Copy Markdown
Member

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:

  • added the "behind the scene" sidebar item
  • refactor some of the concepts to the "behind the scene"
  • added the diagram in the Concepts page

Related to #3383

Checklist

👉 Read and sign the CLA (Contributor License Agreement) 👈

  • npm test passes on your machine
  • New tests added or existing tests modified to cover all changes
  • Code conforms with the style guide
  • API Documentation in code was updated
  • Documentation in /docs/site was updated
  • Affected artifact templates in packages/cli were updated
  • Affected example projects in examples/* were updated

👉 Check out how to submit a PR 👈

Comment threaddocs/site/Concepts.md
![Key concepts overview diagram](imgs/key-concepts-overview-diagram.png)

- [**Application**](Application.md): The central class for setting up all of
your module’s components, controllers, servers and bindings. The Application

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We may need to refer to a lower layer that shows context, binding, and component.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LoopBack 4 defines some key building blocks to represent different responsibilities for typical API and/or Microservice applications.

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we move "interceptor" to section "Behind-the-scene" as well?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interceptor probably should stay outside of Behind-the-scene.

@dhmlaudhmlau self-assigned this Aug 6, 2019
@dhmlau
dhmlauforce-pushed the concepts branch 2 times, most recently from a69cf53 to c817eb3CompareAugust 16, 2019 02:56
@dhmlau

Copy link
Copy Markdown
MemberAuthor

This is how the sidebar looks like:

Screen Shot 2019-08-15 at 10 49 24 PM

@dhmlau
dhmlau marked this pull request as ready for review August 16, 2019 03:02
@dhmlau
dhmlau requested a review from bajtos as a code ownerAugust 16, 2019 03:02
@dhmlau

Copy link
Copy Markdown
MemberAuthor

@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.

@dhmlaudhmlau changed the title [WIP] fix(docs): add diagrams to conceptsfix(docs): add diagrams to conceptsAug 16, 2019

@jannyHoujannyHou left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left some minor suggestions. LGTM 👍 :shipit:

Comment threaddocs/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:

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

infrastructure-->insfrastructures?

Comment threaddocs/site/Concepts.md
![Key concepts overview diagram](imgs/key-concepts-overview-diagram.png)

- [**Application**](Application.md): The central class for setting up all of
your module’s components, controllers, servers and bindings. The Application

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we move "interceptor" to section "Behind-the-scene" as well?

@raymondfeng

Copy link
Copy Markdown
Contributor

@dhmlau We should re-sort key concepts. For example, move all data related ones so that they are next to each other:

  • Models (changed from Model)
  • Relations
  • DataSources
  • Repositories

@raymondfeng

Copy link
Copy Markdown
Contributor

@dhmlau Nice diagrams. Can we use smaller fonts and boxes?

Comment threaddocs/site/DataSources.md Outdated
`legacy-juggler-bridge` to power LoopBack 4 Repositories for Data operations.

![Datasource diagram](imgs/datasource.png)
<img src="imgs/datasource.png" alt="Datasource diagram" width="300">

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should highlight the DataSource box and make the rest half transparent or lower contrast.

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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. ![Datasource diagram](imgs/datasource.png) ) than to make the image to be at the center. But I don't have a very strong preference. WDYT?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can accept the left-aligned diagrams with simple markdown syntax.

@dhmlau
dhmlau merged commit 5d90653 into masterAug 20, 2019
@dhmlau
dhmlau deleted the concepts branch August 20, 2019 17:14
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@dhmlau@raymondfeng@jannyHou
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
Skip to content

fix(docs): add diagrams to concepts - #3462

Merged
dhmlau merged 1 commit into
masterfrom
concepts
Aug 20, 2019
Merged

fix(docs): add diagrams to concepts#3462
dhmlau merged 1 commit into
masterfrom
concepts

Conversation

@dhmlau

@dhmlaudhmlau commented Jul 26, 2019

Copy link
Copy Markdown
Member

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:

  • added the "behind the scene" sidebar item
  • refactor some of the concepts to the "behind the scene"
  • added the diagram in the Concepts page

Related to #3383

Checklist

👉 Read and sign the CLA (Contributor License Agreement) 👈

  • npm test passes on your machine
  • New tests added or existing tests modified to cover all changes
  • Code conforms with the style guide
  • API Documentation in code was updated
  • Documentation in /docs/site was updated
  • Affected artifact templates in packages/cli were updated
  • Affected example projects in examples/* were updated

👉 Check out how to submit a PR 👈

Comment threaddocs/site/Concepts.md
![Key concepts overview diagram](imgs/key-concepts-overview-diagram.png)

- [**Application**](Application.md): The central class for setting up all of
your module’s components, controllers, servers and bindings. The Application

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We may need to refer to a lower layer that shows context, binding, and component.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LoopBack 4 defines some key building blocks to represent different responsibilities for typical API and/or Microservice applications.

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we move "interceptor" to section "Behind-the-scene" as well?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interceptor probably should stay outside of Behind-the-scene.

@dhmlaudhmlau self-assigned this Aug 6, 2019
@dhmlau
dhmlauforce-pushed the concepts branch 2 times, most recently from a69cf53 to c817eb3CompareAugust 16, 2019 02:56
@dhmlau

Copy link
Copy Markdown
MemberAuthor

This is how the sidebar looks like:

Screen Shot 2019-08-15 at 10 49 24 PM

@dhmlau
dhmlau marked this pull request as ready for review August 16, 2019 03:02
@dhmlau
dhmlau requested a review from bajtos as a code ownerAugust 16, 2019 03:02
@dhmlau

Copy link
Copy Markdown
MemberAuthor

@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.

@dhmlaudhmlau changed the title [WIP] fix(docs): add diagrams to conceptsfix(docs): add diagrams to conceptsAug 16, 2019

@jannyHoujannyHou left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left some minor suggestions. LGTM 👍 :shipit:

Comment threaddocs/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:

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

infrastructure-->insfrastructures?

Comment threaddocs/site/Concepts.md
![Key concepts overview diagram](imgs/key-concepts-overview-diagram.png)

- [**Application**](Application.md): The central class for setting up all of
your module’s components, controllers, servers and bindings. The Application

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we move "interceptor" to section "Behind-the-scene" as well?

@raymondfeng

Copy link
Copy Markdown
Contributor

@dhmlau We should re-sort key concepts. For example, move all data related ones so that they are next to each other:

  • Models (changed from Model)
  • Relations
  • DataSources
  • Repositories

@raymondfeng

Copy link
Copy Markdown
Contributor

@dhmlau Nice diagrams. Can we use smaller fonts and boxes?

Comment threaddocs/site/DataSources.md Outdated
`legacy-juggler-bridge` to power LoopBack 4 Repositories for Data operations.

![Datasource diagram](imgs/datasource.png)
<img src="imgs/datasource.png" alt="Datasource diagram" width="300">

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should highlight the DataSource box and make the rest half transparent or lower contrast.

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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. ![Datasource diagram](imgs/datasource.png) ) than to make the image to be at the center. But I don't have a very strong preference. WDYT?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can accept the left-aligned diagrams with simple markdown syntax.

@dhmlau
dhmlau merged commit 5d90653 into masterAug 20, 2019
@dhmlau
dhmlau deleted the concepts branch August 20, 2019 17:14
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@dhmlau@raymondfeng@jannyHou