Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[LHCI] [WIP] Migrate to MDX v2 and gatsby-plugin-mdx v4 to resolve mdx import app bundle issue #4426

Closed
wants to merge 26 commits into from
Closed

[LHCI] [WIP] Migrate to MDX v2 and gatsby-plugin-mdx v4 to resolve mdx import app bundle issue #4426

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
46bba6c
added more shortcodes for mdx files to dry up code
randychilau Jun 21, 2023
f24179f
add ChapterStyle shortcode
randychilau Jun 21, 2023
c962364
removed imports that have become shortcodes
randychilau Jun 21, 2023
44b2cb6
added gatsby-plugin-mdx v4 migration for mdx2
randychilau Jun 21, 2023
ba0c632
add __contentFilePath for mdx2 migration
randychilau Jun 21, 2023
bd8db40
updated gql query and added __contentFilePath
randychilau Jun 21, 2023
66fbee7
mdx2 migration, replace html with excerpt for feed
randychilau Jun 21, 2023
9b36fa1
mdx2 migrate update templates to use children
randychilau Jun 21, 2023
155aece
mdx2 migration updated sections to use children
randychilau Jun 21, 2023
9ffc774
mdx2 migration update file to be compatible
randychilau Jun 21, 2023
c6e6ed7
mdx2 migration - need to fix import SVG component
randychilau Jun 21, 2023
f20da84
mdx2: added "published: true" to include in query
randychilau Jun 21, 2023
627d9f0
mdx2 - fixed misplaced slug query property
randychilau Jun 21, 2023
be1a997
mdx2 - empty tempate mdx file moved to discuss
randychilau Jun 22, 2023
c64319c
mdx2 - adding eslint for mdx files
randychilau Jun 22, 2023
499c905
mdx2 - empty mdx file issue
randychilau Jun 22, 2023
07acd07
mdx2 - update to clear react html errors
randychilau Jun 22, 2023
b0fdd64
mdx2-updated .mdx to be compatible g-mdx-plugin v4
randychilau Jun 22, 2023
8d348d1
mdx2 - correct resourceswrapper tag
randychilau Jun 23, 2023
8e08fde
lh updates to about page with loadable, useInView
randychilau Jun 24, 2023
c2babb1
lh changes to layout and navigation
randychilau Jun 24, 2023
29a5e95
Merge branch 'master' into mdx-migrate1
randychilau Jun 26, 2023
d96f140
eslint corrections to files from merge conflicts
randychilau Jun 26, 2023
3fe395b
added memory setting to CI build preview setting
randychilau Jun 26, 2023
f615976
update mdx page to resolve error
randychilau Jun 26, 2023
4aa7062
resolve mdx file build issue with reverted version
randychilau Jun 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 23 additions & 1 deletion .eslintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,5 +94,27 @@ module.exports = {
"space-infix-ops": [
"error"
]
}
},
"overrides": [
{
"files": ["*.mdx", "*.md"],
"extends": ["plugin:mdx/recommended"],
"settings": {
"mdx/code-blocks": true,
"mdx/language-mapper": {},
},
"rules": {
"semi": 0,
"indent": 0,
"no-trailing-spaces": 0,
"object-curly-spacing": 0,
"space-infix-ops": 0,
"no-irregular-whitespace": 0,
"no-unused-expressions": 0,
"linebreak-style": 0,
"react/jsx-no-undef": 0,
"no-unused-vars": 0,
}
}
],
Comment on lines +98 to +119
Copy link
Contributor

Choose a reason for hiding this comment

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

Any specific reason for these overrides?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

HI @Nikhil-Ladha,

I am not familiar with the interactions of eslint, vscode, and using multiple plugins.

I believe the MDX eslint plugin to be helpful in creating/updating mdx files to be compatible with MDX v2, but I was encountering an issue where it seemed like rules from other extended plugins, were not allowing commits/saves or were reformatting the mdx files on save (since I added the file type to the checklint command).

Please let me know if there is an issue with the configuration or any other thoughts on how to have the .mdx files only get linted by the plugin.

Do .mdx files currently get linted or checked for MDX v1 compatibility in the current workflow?

Cheers,
Randy

Copy link
Contributor

@Nikhil-Ladha Nikhil-Ladha Jun 27, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

Do .mdx files currently get linted or checked for MDX v1 compatibility in the current workflow?

Good question, and I doubt that happens as of now.
While commenting, I didn't notice that the override was for .md, .mdx files only. So, this should be fine.

However, we should enable some things in the lint like:

"semi": 0,
        "indent": ["error", 2],
        "no-trailing-spaces": 1,
        "object-curly-spacing": 1,
        "space-infix-ops": 0,
        "no-irregular-whitespace": 1,
        "no-unused-expressions": 1,
        "react/jsx-no-undef": 1,
        "no-unused-vars": 1,

};
43 changes: 18 additions & 25 deletions ...tering-service-meshes-for-developers/advance-concepts-of-service-mesh/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,28 @@
---
docType: "Course"
title: "Course"
description: "A course which teaches advanced concepts of service meshes and how to use them in an application effectively."
courseTitle: "Advance Concepts of Service Meshes - Hands On"
docType: Course
title: Course
description: A course which teaches advanced concepts of service meshes and how
to use them in an application effectively.
courseTitle: Advance Concepts of Service Meshes - Hands On
themeColor: "#466BB0"
order: 2
videos: 3
lectures: 8
cardImage: "../../../src/assets/images/service-mesh-icons/istio-white.svg"
cardImage: ../../../src/assets/images/service-mesh-icons/istio-white.svg
meshesYouLearn:
[
{
imagepath: "../../../src/assets/images/service-mesh-icons/istio.svg",
name: "Istio",
},
{
imagepath: "../../../src/assets/images/service-mesh-icons/linkerd.webp",
name: "Linkerd",
}
]
- imagepath: ../../../src/assets/images/service-mesh-icons/istio.svg
name: Istio
- imagepath: ../../../src/assets/images/service-mesh-icons/linkerd.webp
name: Linkerd
toc:
[
'getting-started',
'deploy-an-application',
'expose-services',
'observability',
'traffic-management',
'service-security-capabilities',
'webassembly-and-intelligent-data-planes',
'conclusion',
]
- getting-started
- deploy-an-application
- expose-services
- observability
- traffic-management
- service-security-capabilities
- webassembly-and-intelligent-data-planes
- conclusion
---

Chapters available
2 changes: 1 addition & 1 deletion ...ice-meshes-for-developers/advance-concepts-of-service-mesh/istio/conclusion.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ lectures: 12
order: 8
---

import { ChapterStyle } from "../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js";


<ChapterStyle>

Expand Down
11 changes: 5 additions & 6 deletions ...for-developers/advance-concepts-of-service-mesh/istio/deploy-an-application.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ lectures: 12
order: 2
---

import { ChapterStyle } from "../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js";
import BookInfoOffMesh from "../../../../src/assets/images/learn-layer5/istio/bookinfo-off-mesh.webp";
import BookInfoOnMesh from "../../../../src/assets/images/learn-layer5/istio/bookinfo-on-mesh.webp";

Expand Down Expand Up @@ -61,7 +60,7 @@ If your environment **does NOT** supports either of these two APIs, then you may
As part of Istio deployment in [Previous chapter](./getting-started), you have deployed the sidecar injector.

<br />
<h2 class="chapter-sub-heading">
<h2 className="chapter-sub-heading">
<a name="auto"></a> Deploying Sample App with Automatic sidecar injection
</h2>

Expand Down Expand Up @@ -107,7 +106,7 @@ This will do 3 things:
1. Deploys all the BookInfo services in the `default` namespace.
1. Deploys the virtual service and gateway needed to expose the BookInfo's productpage application in the `default` namespace.

<h3 class="chapter-sub-heading">
<h3 className="chapter-sub-heading">
<a name="verify"></a> Verify Bookinfo deployment{" "}
</h3>

Expand Down Expand Up @@ -139,7 +138,7 @@ Follow this if the above steps did not work for you
<br />
<br />

<h4 class="chapter-alt-heading"> Label namespace for injection</h4>
<h4 className="chapter-alt-heading"> Label namespace for injection</h4>

Label the default namespace with istio-injection=enabled

Expand All @@ -161,7 +160,7 @@ kube-public Active 1h
kube-system Active 1h
```

<h4 class="chapter-alt-heading"> Deploy BookInfo</h4>
<h4 className="chapter-alt-heading"> Deploy BookInfo</h4>
<br />

Applying this yaml file included in the Istio package you collected in [Getting Started](./getting-started) will deploy the BookInfo app in you cluster.
Expand All @@ -170,7 +169,7 @@ Applying this yaml file included in the Istio package you collected in [Getting
kubectl apply -f samples/bookinfo/platform/kube/bookinfo.yaml
```

<h4 class="chapter-alt-heading">
<h4 className="chapter-alt-heading">
Deploy Gateway and Virtual Service for BookInfo app
</h4>

Expand Down
24 changes: 11 additions & 13 deletions ...eshes-for-developers/advance-concepts-of-service-mesh/istio/expose-services.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,13 @@ lectures: 12
order: 3
---

import { ChapterStyle } from "../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js";

<ChapterStyle>
The components deployed on the service mesh by default are not exposed outside the cluster. An Ingress Gateway is deployed as a Kubernetes service of type LoadBalancer (or NodePort). To make Bookinfo accessible external to the cluster, you have to create an `Istio Gateway` for the Bookinfo application and also define an `Istio VirtualService` with the routes we need.

<br />
<br />

<h2 class="chapter-sub-heading"> Inspecting the Istio Ingress Gateway</h2>
<h2 className="chapter-sub-heading"> Inspecting the Istio Ingress Gateway</h2>

<br />
The ingress gateway gets exposed as a normal Kubernetes service of type LoadBalancer
Expand Down Expand Up @@ -63,10 +61,10 @@ Now let us find the ingress pod and output the log:
kubectl logs istio-ingressgateway-... -n istio-system
```

<h2 class="chapter-sub-heading">View Istio Ingress Gateway for Bookinfo</h2>
<h2 className="chapter-sub-heading">View Istio Ingress Gateway for Bookinfo</h2>
<br />

<h3 class="chapter-sub-heading"> View the Gateway and VirtualServices</h3>
<h3 className="chapter-sub-heading"> View the Gateway and VirtualServices</h3>

Check the created `Istio Gateway` and `Istio VirtualService` to see the changes deployed:

Expand All @@ -78,7 +76,7 @@ kubectl get virtualservices
kubectl get virtualservices -o yaml
```

<h3 class="chapter-sub-heading">
<h3 className="chapter-sub-heading">
Find the external port of the Istio Ingress Gateway by running:
</h3>

Expand All @@ -92,7 +90,7 @@ To just get the first port of istio-ingressgateway service, we can run this:
kubectl get service istio-ingressgateway -n istio-system --template='{{(index .spec.ports 1).nodePort}}'
```

<h3 class="chapter-sub-heading"> Create a DNS entry:</h3>
<h3 className="chapter-sub-heading"> Create a DNS entry:</h3>

Modify your local `/etc/hosts` file to add an entry for your sample application.

Expand All @@ -108,7 +106,7 @@ echo "http://$(kubectl get nodes --selector=kubernetes.io/role!=master -o jsonpa

Docker Desktop users please use `http://localhost/productpage` to access product page in your browser.

<h2 class="chapter-sub-heading"> Apply default destination rules</h2>
<h2 className="chapter-sub-heading"> Apply default destination rules</h2>

Before we start playing with Istio's traffic management capabilities we need to define the available versions of the deployed services. They are called subsets, in destination rules.

Expand Down Expand Up @@ -189,16 +187,16 @@ kubectl get destinationrules
kubectl get destinationrules -o yaml
```

<h2 class="chapter-sub-heading"> Browse to BookInfo</h2>
<h2 className="chapter-sub-heading"> Browse to BookInfo</h2>

Browse to the website of the Bookinfo. To view the product page, you will have to append
`/productpage` to the url.

<h3 class="chapter-sub-heading"> Reload Page</h3>
<h3 className="chapter-sub-heading"> Reload Page</h3>

Now, reload the page multiple times and notice how it round robins between v1, v2 and v3 of the reviews service.

<h2 class="chapter-sub-heading">
<h2 className="chapter-sub-heading">
Inspect the Istio proxy of the productpage pod
</h2>

Expand Down Expand Up @@ -232,15 +230,15 @@ Follow this if the above steps did not work for you
<br />
<br />

<h4 class="chapter-alt-heading"> Default destination rules</h4>
<h4 className="chapter-alt-heading"> Default destination rules</h4>

Run the following command to create default destination rules for the Bookinfo services:

```sh
kubectl apply -f samples/bookinfo/networking/destination-rule-all-mtls.yaml
```

<h4 class="chapter-alt-heading">
<h4 className="chapter-alt-heading">
Configure the Bookinfo route with the Istio Ingress gateway
</h4>

Expand Down
17 changes: 8 additions & 9 deletions ...eshes-for-developers/advance-concepts-of-service-mesh/istio/getting-started.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,16 @@ lectures: 12
order: 1
---

import { ChapterStyle } from "../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js";
import InstallIstio from "../../../../src/assets/images/learn-layer5/istio/install-istio.webp";
import IstioAdapter from "../../../../src/assets/images/learn-layer5/istio/istio-adapter.webp";

<ChapterStyle>

<h2 class="chapter-sub-heading">Setup Istio </h2>
<h2 className="chapter-sub-heading">Setup Istio </h2>

Now that we have a Kubernetes cluster and Meshery, we are ready to download and deploy Istio resources.

<h2 class="chapter-sub-heading">Steps</h2>
<h2 className="chapter-sub-heading">Steps</h2>

1. [Install Istio](#1)
1. [Verify install](#2)
Expand All @@ -28,7 +27,7 @@ Optional (manual install of Istio):
1. [Setup `istioctl`](#1.2)
1. [Install istio](#1.3)

<h3 class="chapter-sub-heading">
<h3 className="chapter-sub-heading">
<a name="1">Install Istio</a>
</h3>

Expand All @@ -53,7 +52,7 @@ Perform the below steps if the above steps doesn't work for you.
<br />
<br />

<h4 class="chapter-alt-heading">
<h4 className="chapter-alt-heading">
<a name="1.1">Download Istio</a>
</h4>

Expand All @@ -67,7 +66,7 @@ On your local machine, execute:
curl -L https://git.io/getLatestIstio | ISTIO_VERSION=1.7.3 sh -
```

<h4 class="chapter-alt-heading">
<h4 className="chapter-alt-heading">
<a name="1.2">Setting up istioctl</a>
</h4>

Expand Down Expand Up @@ -96,7 +95,7 @@ Check if the cluster is ready for installation:
istioctl verify-install
```

<h4 class="chapter-alt-heading">
<h4 className="chapter-alt-heading">
<a name="1.3">Install Istio</a>
</h4>

Expand All @@ -112,7 +111,7 @@ Alternatively, with Envoy logging enabled:
istioctl install --set profile=demo --set meshConfig.accessLogFile=/dev/stdout
```

<h3 class="chapter-sub-heading">
<h3 className="chapter-sub-heading">
<a name="2">Verify install</a>
</h3>

Expand All @@ -121,7 +120,7 @@ In the Istio management page:
1. Click the (+) icon on the `Validate Service Mesh Configuration` card.
1. Select `Verify Installation` to verify the installation of Istio.

<h4 class="chapter-alt-heading">Alternatively:</h4>
<h4 className="chapter-alt-heading">Alternatively:</h4>

Istio is deployed in a separate Kubernetes namespace `istio-system`. To check if Istio is deployed, and also, to see all the pieces that are deployed, execute the following:

Expand Down
Loading