Skip to content

Commit e044493

Browse files
leecalcoteleecalcote
committed
mdx / svg compatibility
Signed-off-by: Lee Calcote <lee.calcote@layer5.io>
1 parent 9168e1c commit e044493

130 files changed

Lines changed: 1004 additions & 790 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎CONTRIBUTING.md‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -401,10 +401,21 @@ Change image according to isDark value:
401401
/>
402402
```
403403
404-
> Note:
405-
>
406404
> - A condition `frontmatter.darkthumbnail.publicURL !== frontmatter.thumbnail.publicURL` is added so that the image only changes if there is a difference between the thumbnail publicURLs.
407405
406+
### Using SVG as Thumbnail
407+
408+
If you are using an SVG file as a thumbnail, you should use the `thumbnail_svg` and `darkthumbnail_svg` fields in the frontmatter instead of `thumbnail` and `darkthumbnail`. This prevents Gatsby's `childImageSharp` from attempting to process the SVG, which can cause build warnings and errors.
409+
410+
Example frontmatter:
411+
412+
```yaml
413+
thumbnail_svg: ./my-icon.svg
414+
darkthumbnail_svg: ./my-icon-dark.svg
415+
```
416+
417+
The components are set up to automatically check for these fields if the standard `thumbnail` fields are missing or if they need to fallback to the SVG version.
418+
408419
## Adding Images and Icons
409420

410421
1. It is recommended to use `@react-icons/all-files` instead of `react-icons` for importing icons. The Issue with react-icons is that even though we are importing a single icon from the package/folder it still imports the complete icon folder which is creating unwanted junks of JS in the build.

‎Makefile‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,10 @@ clean:
4141
lint:
4242
npm run lint
4343

44+
## Kill process running the site
45+
kill:
46+
lsof -ti:8000 | xargs kill -9 2>/dev/null || true
47+
4448
## Prepare a list of features for the pricing page.
4549
features:
4650
curl -L https://docs.google.com/spreadsheets/d/e/2PACX-1vQwzrUSKfuSRcpkp7sJTw1cSB63s4HCjYLJeGPWECsvqn222hjaaONQlN4X8auKvlaB0es3BqV5rQyz/pub\?gid\=1153419764\&single\=true\&output\=csv -o .github/build/spreadsheet.csv

‎src/collections/blog/2019/2019-07-09-Meshery-start-feat-WSL2-K3d/index.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,7 @@ While everything should run fine, it's always good to have a look at what has be
156156
In this case, we are almost exclusively working with Docker and the "inside look" should look something like this:
157157

158158
<a href={wslmesherycomplete}>
159-
<img src={wslmesherycomplete}class="thumbnail" alt="wslmesherycomplete" />
159+
<img src={wslmesherycomplete} className="thumbnail" alt="wslmesherycomplete" />
160160
</a>
161161

162162
#### Conclusion

‎src/collections/blog/2019/2019-11-15-introducing-comparative-spectrums-to-the-layer5-landscape/index.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ title: "Introducing Comparative Spectrums to the Layer5 Landscape"
33
subtitle: ""
44
date: 2019-11-15 05:43:00 +0000
55
author: Rafi Ungar
6-
thumbnail: ./landscape_green.svg
7-
darkthumbnail: ./landscape_green.svg
6+
thumbnail_svg: ./landscape_green.svg
7+
darkthumbnail_svg: ./landscape_green.svg
88
category: Internship Programs
99
tags:
1010
- Community

‎src/collections/blog/2019/2019-12-04-layer5-landscape-spectrums-revisited/index.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ title: "Layer5: Landscape Spectrums Revisited"
33
subtitle: ""
44
date: 2019-12-04 18:10:00 +0000
55
author: Rafi Ungar
6-
thumbnail: ./landscape_green.svg
7-
darkthumbnail: ./landscape_green.svg
6+
thumbnail_svg: ./landscape_green.svg
7+
darkthumbnail_svg: ./landscape_green.svg
88
category: Internship Programs
99
tags:
1010
- Community

‎src/collections/blog/2020/2020-03-11-deploying-linkerd-with-meshery/index.mdx‎

Lines changed: 84 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -32,111 +32,105 @@ import {Link} from "gatsby"
3232
<BlogWrapper>
3333

3434
<span className="starting-letter">I</span>t’s no secret that service mesh tech is boiling hot. Microservice architectures brought on as many challenges as they have advantages. With operational complexity being one of the most acute pains. Service meshes do offer solutions to a number of these operational concerns. Including but not limited to: resilience, improved observability, security and advanced service discovery.
35-
<div>
36-
<div>
37-
38-
39-
<iframe width="100%" src="https://www.youtube.com/embed/MXQV-i-Hkf8" loading="lazy" frameBorder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" style={{minHeight: "315px", minWidth: "280px"}}></iframe>
4035

36+
<div>
37+
<iframe width="100%" alt="Deploying Linkerd with Meshery" title="Deploying Linkerd with Meshery" src="https://www.youtube.com/embed/MXQV-i-Hkf8" allowFullScreen loading="lazy" frameBorder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" style={{minHeight: "315px", minWidth: "280px"}}></iframe>
4138
</div>
39+
4240
But with so many mesh options around - how do we choose, evaluate and compare them? And once we’ve chosen a solution - how do we make it accessible to all our engineers? It is to provide an answer to these questions that the Layer5 community has created <Link to="/cloud-native-management/meshery">Meshery</Link>, the open-source, service mesh management plane. Meshery already supports a number of leading mesh providers with adapters for additional meshes on the way. In today’s video, I’ll show how to use Meshery for rolling out and evaluating Linkerd.
4341

4442
Linkerd is a system that comes from the service mesh pioneers - the company called Buoyant. They were the first to realise the need for a distributed network of smart, centrally configured proxies and coin the term “service mesh” back in 2016. Today, we’ll be looking at Linkerd 2.x - the second generation of this now CNCF project.
45-
</div>
46-
<div>
43+
4744
<h5>Meshery Adapters</h5>
48-
<table className="table-adapters">
49-
<thead className="hidden">
50-
<th>Status</th>
51-
<th>Adapter</th>
52-
</thead>
53-
<tbody>
54-
<tr>
55-
<td rowspan="7" className="stable-adapters">stable</td>
56-
</tr>
57-
<tr>
58-
<td><a href="https://github.com/layer5io/meshery-istio">
59-
<img src={istio} alt='Istio Service Mesh adapter' className="adapter-logo" />Meshery adapter for Istio</a>
60-
</td>
61-
</tr>
62-
<tr>
63-
<td><a href="https://github.com/layer5io/meshery-linkerd">
64-
<img src={linkerd} alt='Linkerd' className="adapter-logo" />Meshery adapter for Linkerd</a>
65-
</td>
66-
</tr>
67-
<tr>
68-
<td><a href="https://github.com/layer5io/meshery-consul">
69-
<img src={consul} alt='Consul Connect' className="adapter-logo" />Meshery adapter for Consul</a>
70-
</td>
71-
</tr>
72-
<tr>
73-
<td><a href="https://github.com/layer5io/meshery-octarine">
74-
<img src={octarine} alt='Octarine Service Mesh' className="adapter-logo" />Meshery adapter for Octarine</a>
75-
</td>
76-
</tr>
77-
<tr>
78-
<td><a href="https://github.com/layer5io/meshery-nsm">
79-
<img src={nsm} alt='Network Mesh' className="adapter-logo" />Meshery adapter for Network Service Mesh</a>
80-
</td>
81-
</tr>
82-
<tr><td className="stable-adapters"/></tr>
83-
<tr>
84-
<td rowspan="2" className="beta-adapters">beta</td>
85-
<td><a href="https://github.com/layer5io/meshery-cpx">
86-
<img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQksHj15DkID308qQw3cmkQrRULPxyzbVquSZVev-9dj1L6sPs-rQ&s' alt='Citrix CPX Service Mesh' className="adapter-logo" />Meshery adapter for Citrix CPX</a>
87-
</td>
88-
</tr>
89-
<tr><td className="beta-adapters"/></tr>
90-
<tr>
91-
<td rowspan="6" className="alpha-adapters">alpha</td>
92-
</tr>
93-
<tr>
94-
<td><a href="https://github.com/layer5io/meshery-maesh">
95-
<img src={maesh} alt='Maesh Service Mesh' className="adapter-logo" />Meshery adapter for Maesh</a>
96-
</td>
97-
</tr>
98-
<tr>
99-
<td><a href="https://github.com/layer5io/meshery-app-mesh">
100-
<img src={awsappmesh} alt='AWS App Mesh Service Mesh' className="adapter-logo" />Meshery adapter for App Mesh </a>
101-
</td>
102-
</tr>
103-
<tr>
104-
<td><a href="https://github.com/layer5io/meshery-kuma">
105-
<img src={kuma} alt='Kuma Service Mesh' className="adapter-logo" />Meshery adapter for Kuma</a>
106-
</td>
107-
</tr><tr>
108-
</tr>
109-
<tr><td className="alpha-adapters"/></tr>
110-
</tbody>
111-
</table>
112-
</div>
45+
46+
<table className="table-adapters">
47+
<thead className="hidden">
48+
<th>Status</th>
49+
<th>Adapter</th>
50+
</thead>
51+
<tbody>
52+
<tr>
53+
<td rowspan="7" className="stable-adapters">stable</td>
54+
</tr>
55+
<tr>
56+
<td><a href="https://github.com/layer5io/meshery-istio">
57+
<img src={istio} alt='Istio Service Mesh adapter' className="adapter-logo" />Meshery adapter for Istio</a>
58+
</td>
59+
</tr>
60+
<tr>
61+
<td><a href="https://github.com/layer5io/meshery-linkerd">
62+
<img src={linkerd} alt='Linkerd' className="adapter-logo" />Meshery adapter for Linkerd</a>
63+
</td>
64+
</tr>
65+
<tr>
66+
<td><a href="https://github.com/layer5io/meshery-consul">
67+
<img src={consul} alt='Consul Connect' className="adapter-logo" />Meshery adapter for Consul</a>
68+
</td>
69+
</tr>
70+
<tr>
71+
<td><a href="https://github.com/layer5io/meshery-octarine">
72+
<img src={octarine} alt='Octarine Service Mesh' className="adapter-logo" />Meshery adapter for Octarine</a>
73+
</td>
74+
</tr>
75+
<tr>
76+
<td><a href="https://github.com/layer5io/meshery-nsm">
77+
<img src={nsm} alt='Network Mesh' className="adapter-logo" />Meshery adapter for Network Service Mesh</a>
78+
</td>
79+
</tr>
80+
<tr><td className="stable-adapters"></td></tr>
81+
<tr>
82+
<td rowspan="2" className="beta-adapters">beta</td>
83+
<td><a href="https://github.com/layer5io/meshery-cpx">
84+
Meshery adapter for Citrix CPX</a>
85+
</td>
86+
</tr>
87+
<tr><td className="beta-adapters"></td></tr>
88+
<tr>
89+
<td rowspan="6" className="alpha-adapters">alpha</td>
90+
</tr>
91+
<tr>
92+
<td><a href="https://github.com/layer5io/meshery-maesh">
93+
<img src={maesh} alt='Maesh Service Mesh' className="adapter-logo" />Meshery adapter for Maesh</a>
94+
</td>
95+
</tr>
96+
<tr>
97+
<td><a href="https://github.com/layer5io/meshery-app-mesh">
98+
<img src={awsappmesh} alt='AWS App Mesh Service Mesh' className="adapter-logo" />Meshery adapter for App Mesh </a>
99+
</td>
100+
</tr>
101+
<tr>
102+
<td><a href="https://github.com/layer5io/meshery-kuma">
103+
<img src={kuma} alt='Kuma Service Mesh' className="adapter-logo" />Meshery adapter for Kuma</a>
104+
</td>
105+
</tr>
106+
<tr><td></td></tr>
107+
<tr><td className="alpha-adapters"></td></tr>
108+
</tbody>
109+
</table>
113110

114111
Some things that Linkerd is known for:
115112

116-
<li>Purpose-built for Kubernetes</li>
117-
<li>Featuring custom-built, highly performant proxies written in Rust</li>
118-
<li>Zero-config option (works out-of-the-box)</li>
119-
<li>Network telemetry built-in (includes a pre-configured, optimised Prometheus instance)</li>
120-
<li>Low-overhead control-plane</li>
121-
<li>Operational simplicity (when compared to Istio, for example, even though Istio is getting better in this regard)</li>
113+
- Purpose-built for Kubernetes
114+
- Featuring custom-built, highly performant proxies written in Rust
115+
- Zero-config option (works out-of-the-box)
116+
- Network telemetry built-in (includes a pre-configured, optimised Prometheus instance)
117+
- Low-overhead control-plane
118+
- Operational simplicity (when compared to Istio, for example, even though Istio is getting better in this regard)
122119

123120
So what is covered in the video? More or less the following:
124121

125-
<li>What service mesh tech allows us to do</li>
126-
<li>What a typical service mesh architecture looks like</li>
127-
<li>What Layer5 is about (<i>Lookout - it may surprise you!</i> 😯)</li>
128-
<li>What Meshery is. What Linkerd is.</li>
129-
<li>How easy it is to install Meshery on your PC (be it Linux, Mac or Windows)</li>
130-
<ul><li>All it takes is:
131-
122+
- What service mesh tech allows us to do
123+
- What a typical service mesh architecture looks like
124+
- What Layer5 is about (<i>Lookout - it may surprise you!</i>)
125+
- What Meshery is. What Linkerd is.
126+
- How easy it is to install Meshery on your PC (be it Linux, Mac or Windows)
127+
- All it takes is:
132128
```sh
133129
$ curl -L https://meshery.io/install | PLATFORM=kubernetes bash -
134130
```
135-
136-
</li></ul>
137-
<li>How Meshery connects to your Kubernetes cluster (nothing to be done if it’s in your <code>kubectl config current-context</code>)</li>
138-
<li>How to correctly install and remove Linkerd on your Kubernetes cluster using Meshery</li>
139-
<li>How to install one of included Linkerd sample applications and verify the installation</li>
131+
- How Meshery connects to your Kubernetes cluster (nothing to be done if it’s in your <code>kubectl config current-context</code>)
132+
- How to correctly install and remove Linkerd on your Kubernetes cluster using Meshery
133+
- How to install one of included Linkerd sample applications and verify the installation
140134

141135
That’s quite a lot of content for a 20 minute clip. In the follow-up videos, we’ll dive deeper into many of these concepts. And also show how to use Meshery with other service mesh providers.
142136

@@ -145,8 +139,5 @@ This video is also the opening shot of Layer5's [Learn to Service Mesh](https://
145139
And let us know if there’s any specific content you want us to create. Or maybe anything you’ve created yourself and would like to share? Layer5 is all about knowledge sharing and we want to talk to you, so please [join the cloud native community](http://slack.layer5.io)!
146140

147141
Happy meshing!
148-
<br />
149-
150142

151143
</BlogWrapper>
152-

‎src/collections/blog/2020/2020-06-01-meshery-accepted-into-cncf-landscape/index.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ In no time, I had my first commits approved and merged and started joining weekl
4343

4444
Now - I won't be reviewing Meshery in this post. I've spoken about it in this video and some great introductory articles by community members can be found here and here. This post is more of a celebration, because last week...
4545

46-
<h5 style={{ textAlign: "center" }}<i>Meshery now featured in the CNCF Landscape!</i></h5>
46+
<h5 style={{ textAlign: "center" }}><i>Meshery now featured in the CNCF Landscape!</i></h5>
4747

4848
<img src={cncfmeshery} className="image-center" alt="cncf-meshery-landscape" />
4949

‎src/collections/blog/2020/2020-06-25-SMI-conformance-testing-with-meshery/index.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ title: "Starting SMI Conformance Testing with Meshery"
33
subtitle: ""
44
date: 2020-06-25 10:30:05 -0530
55
author: Naveen Kumar
6-
thumbnail: ./smi-conformance.svg
7-
darkthumbnail: ./smi-conformance.svg
6+
thumbnail_svg: ./smi-conformance.svg
7+
darkthumbnail_svg: ./smi-conformance.svg
88
category: Programs
99
tags:
1010
- Community

‎src/collections/blog/2020/2020-07-18-service-mesh-patterns-for-multitenancy/index.mdx‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ import img4 from "./image4.webp";
2828

2929
<BlogWrapper>
3030

31-
<img src={listioLayer5} className="image-left" alt="Layer5 and Istio" />
31+
<img src={listioLayer5} className="image-left" alt="Layer5 and Istio"/>
3232

3333
Recently, I started learning on Service Mesh and it was a very interesting journey as I explored the Service Mesh
3434
landscape starting with [Layer5 tutorials](https://github.com/layer5io/istio-service-mesh-workshop) and by exploring
@@ -95,10 +95,12 @@ a. Ingress Gateway in Control Plane for traffic entry point to the Control plane
9595
b. Ingress Gateway in the Worskpace 1 namespace for traffic entry point to the workspace 1 microservices.
9696
c. Ingress Gateway in the Worskpace 2 namespace for traffic entry point to the workspace 2 microservices.
9797

98-
<img src={img1} alt="kubernetes-cluster" />
98+
<img src={img1} alt="kubernetes-cluster"/>
9999
<div style={{ textAlign: "center" }}>
100+
100101
Single Control Plane with Multiple Data Plane each with separate Ingress
101102
Gateway
103+
102104
</div>
103105
- Creation of Control Plane CR and Data Plane CR
104106
A sample CR for creation of the Control plane and Data Plane CR can be referred below :
@@ -177,7 +179,7 @@ istiooperator.install.istio.io/wk2-gwconfig configured
177179
$(kubectl get pods -n istio-operator -lname=istio-operator -o jsonpath=’{.items[0].metadata.name}’)
178180
```
179181

180-
<img src={img2} alt="image" />
182+
<img src={img2} alt="image"/>
181183

182184
- Observe the created objects in istio-system and the workspace namespaces for all pods to be in running state.
183185

@@ -241,7 +243,10 @@ istiooperator.install.istio.io/wk2-gwconfig configured
241243
- “*”
242244
```
243245

244-
Deploy the applications in workspace-1 and workspace-2 and deploy the Gateway,VirtualService and DestinationRules.
246+
247+
Deploy the applications in workspace-1 and workspace-2 and deploy the Gateway, VirtualService and DestinationRules.
248+
249+
{/* */}
245250

246251
```sh
247252
$kubectl apply -f samples/bookinfo/platform/kube/bookinfo.yaml -n workspace-1
@@ -264,6 +269,7 @@ Shortly, we will go over the 3rd scenario which is to run multiple Istio Control
264269
Special thanks to the [Istio Community](https://istio.slack.com/) for helping me understand the concepts and also answering my queries and of course to [Lee Calcote](https://calcotestudios.com/talks/), who helped me embark on my Istio journey.
265270

266271
<div>
272+
267273
<b>
268274
Connect with Sudeep Batra on
269275
<a href="https://www.linkedin.com/in/sudeep-batra"> LinkedIn</a>,<a href="https://github.com/sb1975">
@@ -272,6 +278,7 @@ Special thanks to the [Istio Community](https://istio.slack.com/) for helping me
272278
</a>, or
273279
<a href="https://twitter.com/sudeepbatra"> Twitter</a>.
274280
</b>
281+
275282
</div>
276283

277284
</BlogWrapper>

‎src/collections/blog/2020/2020-08-04-how-i-schooled-my-seniors/index.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ title: "How I schooled my seniors"
33
subtitle: "and why I swear by the experience"
44
date: 2020-08-04 10:15:05 +0000
55
author: Nupur Thakur
6-
thumbnail: ./feature-image.svg
7-
darkthumbnail: ./feature-image.svg
6+
thumbnail_svg: ./feature-image.svg
7+
darkthumbnail_svg: ./feature-image.svg
88
category: Community
99
tags:
1010
- Community

0 commit comments

Comments
 (0)