Skip to content

Commit ed301b4

Browse files
kirti763kirti763
committed
Merge branch 'add-cncf-awards-news' of https://github.com/kirti763/layer5 into add-cncf-awards-news
2 parents d6e6f4b + 783639d commit ed301b4

5 files changed

Lines changed: 189 additions & 41 deletions

File tree

‎gatsby-node.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -715,8 +715,10 @@ exports.onCreateWebpackConfig = ({ actions, stage, getConfig }) => {
715715
},
716716
});
717717

718-
if (stage === "build-javascript") {
718+
// Reduce memory pressure by disabling sourcemaps in dev and build
719+
if (stage === "develop" || stage === "develop-html" || stage === "build-javascript" || stage === "build-html") {
719720
const config = getConfig();
721+
config.devtool = false;
720722
const miniCssExtractPlugin = config.plugins.find(
721723
(plugin) => plugin.constructor.name === "MiniCssExtractPlugin"
722724
);

‎package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
"dependencies": {
2929
"@emotion/is-prop-valid": "^1.4.0",
3030
"@emotion/react": "^11.14.0",
31-
"@emotion/styled": "^11.14.0",
31+
"@emotion/styled": "^11.14.1",
3232
"@fullcalendar/core": "^6.1.8",
3333
"@fullcalendar/daygrid": "^6.1.8",
3434
"@fullcalendar/google-calendar": "^6.0.2",

‎src/sections/Pricing/feature_data.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1085,7 +1085,7 @@
10851085
"teamOperator": "x",
10861086
"enterprise": "x"
10871087
},
1088-
"docs": ""
1088+
"docs": "https://docs.layer5.io/cloud/getting-started/support/"
10891089
},
10901090
{
10911091
"theme": "",
@@ -1101,7 +1101,7 @@
11011101
"teamOperator": "x",
11021102
"enterprise": "x"
11031103
},
1104-
"docs": ""
1104+
"docs": "https://docs.layer5.io/cloud/getting-started/support/"
11051105
},
11061106
{
11071107
"theme": "",
@@ -1117,7 +1117,7 @@
11171117
"teamOperator": "",
11181118
"enterprise": "x"
11191119
},
1120-
"docs": ""
1120+
"docs": "https://docs.layer5.io/cloud/getting-started/support/"
11211121
},
11221122
{
11231123
"theme": "",
@@ -1133,7 +1133,7 @@
11331133
"teamOperator": "",
11341134
"enterprise": "x"
11351135
},
1136-
"docs": ""
1136+
"docs": "https://docs.layer5.io/cloud/getting-started/support/"
11371137
},
11381138
{
11391139
"theme": "",

‎src/sections/Projects/Sistent/getting-started/about/index.js‎

Lines changed: 180 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,32 @@ import React from "react";
22
import { Container } from "../../../../../reusecore/Layout";
33
import SistentWrapper from "../../sistent.style";
44
import TOC from "../../../../../components/SistentNavigation";
5-
import IntraPage from "../../../../../components/handbook-navigation/intra-page";
5+
import IntraPage from "../../../../../components/SistentNavigation/intra-page";
66
import SistentPagination from "../../../../../components/SistentNavigation/pagination";
7+
78
import { Link } from "gatsby";
9+
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
10+
import { CodeBlock } from "../../components/button/code-block";
11+
import Code from "../../../../../components/CodeBlock";
12+
import { SistentThemeProvider, Button } from "@sistent/sistent";
13+
14+
const contents = [{ id: 0, link: "#About Sistent", text: "About Sistent" }];
815

9-
const contents = [
10-
{ id: 0, link: "#About Sistent", text: "About Sistent" },
11-
{ id: 1, link: "#Key Features", text: "Key Features" },
12-
{ id: 2, link: "#Brand Resources", text: "Brand Resources" }
16+
const codes = [
17+
"npm i @sistent/sistent",
18+
` import { SistentThemeProvider } from "@sistent/sistent";
19+
import { Button } from "@sistent/sistent";
20+
21+
<SistentThemeProvider>
22+
<Button variant="contained">Filled</Button>
23+
<Button variant="outlined">Outlined</Button>
24+
<Button variant="text">Text</Button>
25+
</SistentThemeProvider>`,
1326
];
1427

1528
const SistentAbout = () => {
29+
const { isDark } = useStyledDarkMode();
30+
1631
return (
1732
<SistentWrapper>
1833
<div className="page-header-section">
@@ -23,13 +38,22 @@ const SistentAbout = () => {
2338
<Container>
2439
<div className="content">
2540
<a id="About Sistent">
26-
<h2>Overview</h2>
41+
<h2>About Sistent</h2>
2742
</a>
2843
<p>
29-
Sistent is an open source design system that offers building blocks
30-
to create consistent, accessible, and user-friendly interfaces. It's
31-
aimed at developers who want to design applications aligned with the
32-
same brand and ensure a uniform user experience across different products.
44+
Sistent an open source design system
45+
that offers building blocks to create consistent, accessible, and
46+
user-friendly interfaces. It's aimed at developers who want to
47+
design applications aligned with the same brand and ensure a
48+
uniform user experience across different products.
49+
</p>
50+
<p>
51+
Sistent leverages Material UI libraries and provides a custom
52+
theme on top of it for a consistent look and feel. It includes
53+
components, icons, and design tokens that developers can readily
54+
integrate into their applications. By using Sistent, developers
55+
can save time and effort while maintaining a high-quality user
56+
experience.
3357
</p>
3458
<p>
3559
<b>
@@ -41,41 +65,163 @@ const SistentAbout = () => {
4165
'Sistent' is a play on words to ensure that we have a{" "}
4266
<i>consistent</i> theme, components, design tokens, etc across all
4367
of the apps that will be using this library. Sistent is a design
44-
system that uses <b>MUI v5 components</b> with a{" "}
45-
<b>custom theme provider</b> instead of using the default theme
68+
system that uses the <b>MUI v5 components</b> and a{" "}
69+
<b>custom theme provider </b> instead of using the default theme
4670
from MUI v5.
4771
</p>
48-
<br/>
49-
<a id="Key Features">
50-
<h2>Key Features</h2>
51-
</a>
72+
5273
<p>
53-
Sistent leverages Material UI libraries and provides a custom
54-
theme on top of it for a consistent look and feel. Key features include:
74+
Sistent is built with Typescript and Reactjs and contains
75+
components and a large collection of icons that can be reused
76+
across projects. If you’re interested in joining the project
77+
(please do!), let us know, and we will help you get started on
78+
contributing.
5579
</p>
80+
<h3>Layer5 Brand Resources</h3>
5681
<ul>
57-
<li><strong>Consistent Design System:</strong> Unified components, icons, and design tokens across all Layer5 projects</li>
58-
<li><strong>Material UI Foundation:</strong> Built on top of MUI v5 with custom theming</li>
59-
<li><strong>Comprehensive Token System:</strong> Color, typography, and spacing tokens for consistent design</li>
60-
<li><strong>Accessibility First:</strong> Components designed with accessibility in mind</li>
61-
<li><strong>Large Icon Collection:</strong> Extensive collection of icons for various use cases</li>
62-
<li><strong>Theme Flexibility:</strong> Light and dark mode support with customizable themes</li>
82+
<li><Link to="/brand/brand-guide.pdf">Brand Guide</Link></li>
83+
<li><Link to="/brand">Logos and Brand Kits</Link></li>
6384
</ul>
64-
<br/>
65-
<a id="Brand Resources">
66-
<h2>Brand Resources</h2>
85+
<a id="Installation">
86+
<h2>Installation and Quickstart</h2>
6787
</a>
88+
<p>To install the Sistent NPM package, run:</p>
89+
<div className="showcase">
90+
<CodeBlock name="installation" code={codes[0]} />
91+
</div>
6892
<p>
69-
Layer5 provides comprehensive brand resources to ensure consistent
70-
branding across all applications and materials:
93+
After installation, you can import Sistent theme and any Sistent
94+
component from "@sistent/sistent". The component needs to be
95+
included inside "SistentThemeProvider".
7196
</p>
97+
<p>Taking button as an example:</p>
98+
<div className="showcase">
99+
<div className="items">
100+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
101+
<Button variant="contained">Filled</Button>
102+
<Button variant="outlined">Outlined</Button>
103+
<Button variant="text">Text</Button>
104+
</SistentThemeProvider>
105+
</div>
106+
<CodeBlock name="checkbox" code={codes[1]} />
107+
</div>
108+
109+
<a id="Using local Sistent">
110+
<h2>Using your Local Sistent Fork in a Project</h2>
111+
</a>
112+
<br />
72113
<ul>
73-
<li><Link to="/brand/brand-guide.pdf">Brand Guide</Link> - Complete brand guidelines and usage instructions</li>
74-
<li><Link to="/brand">Logos and Brand Kits</Link> - Official logos, colors, and brand assets</li>
114+
<li>
115+
<h3>Method 1: File Installation</h3>
116+
</li>
117+
<ol>
118+
<li>
119+
<b>Install your local Sistent package in the project</b>
120+
<Code codeString="npm install &lt;path-to-sistent-on-local-machine&gt;" />
121+
<p>Example:</p>
122+
<Code
123+
codeString={"# relative path\n npm install ../../sistent\n\n# absolute path\n npm install /home/five/code/sistent"}
124+
/>
125+
<p>This will update your Sistent dependency to:</p>
126+
<Code codeString={"\"@sistent/sistent\" : \"file:../../sistent\""} />
127+
</li>
128+
<li>
129+
<b>Build your local Sistent fork</b>
130+
<p>
131+
After making changes to your fork, run this command in your local Sistent package.
132+
</p>
133+
<Code codeString="make build" />
134+
</li>
135+
<li>
136+
<b>
137+
Run the build command in the project where your local Sistent fork is installed
138+
</b>
139+
<p>Example for Meshery UI:</p>
140+
<Code codeString="make ui-build" />
141+
</li>
142+
</ol>
143+
<p>
144+
Now, your project should reflect changes from your local Sistent fork.
145+
</p>
146+
<p>
147+
If you want to remove the local Sistent fork from your project, run:
148+
</p>
149+
<Code codeString="npm uninstall @sistent/sistent" />
150+
<p>
151+
This will remove the local Sistent package from your project. You will have to install the standard package again after running this command:
152+
</p>
153+
<Code codeString="npm install @sistent/sistent" />
154+
155+
156+
<li>
157+
<h3>Method 2: Using npm link</h3>
158+
<p>
159+
This method allows you to link your local Sistent fork globally for easier development. Follow these steps:
160+
</p>
161+
<ol>
162+
<li>
163+
<b>Link your local Sistent package globally</b>
164+
<p>In your local Sistent repo, run the following command:</p>
165+
<Code codeString={"cd <path-to-sistent-on-local-machine>\n npm link"} />
166+
</li>
167+
<li>
168+
<b>Link Sistent in your project</b>
169+
<p>In the project where you want to use your local Sistent fork, run:</p>
170+
<Code codeString="npm link @sistent/sistent" />
171+
<p>This will create a symlink in your project's node_modules, pointing to your local Sistent package.</p>
172+
</li>
173+
<li>
174+
<b>Build your local Sistent fork</b>
175+
<p>After making changes to your fork, run this command in your local Sistent package.</p>
176+
<Code codeString="make build" />
177+
</li>
178+
<li>
179+
<b>Run the build command in the project where your local Sistent fork is installed</b>
180+
<p>Example for Meshery-UI:</p>
181+
<Code codeString="make ui-build" />
182+
</li>
183+
<li>
184+
<p>
185+
Verify that your local fork is correctly linked by running:
186+
</p>
187+
<Code codeString={"npm ls -g\n\n# expected output:\n├── @sistent/sistent@0.14.11 -> ./../../../../<path-to-local-sistent-fork>"} />
188+
<p>
189+
You can also try this command to verify that your fork is correctly linked:
190+
</p>
191+
<Code codeString={"ls -l node_modules/@sistent/sistent\n\n# expected output:\nnode_modules/@sistent/sistent -> ../../../../../sistent"} />
192+
</li>
193+
<li>
194+
<p>
195+
To revert back to the official version of Sistent, run:
196+
</p>
197+
<Code codeString="npm unlink @sistent/sistent" />
198+
<p>
199+
Then reinstall the official version, using this command:
200+
</p>
201+
<Code codeString="npm install @sistent/sistent" />
202+
</li>
203+
</ol>
204+
</li>
75205
</ul>
206+
76207
<p>
77-
These resources work hand-in-hand with Sistent to maintain brand
78-
consistency across the entire Layer5 ecosystem.
208+
To contribute to projects using Sistent e.g.{" "}
209+
<a href="https://github.com/meshery/meshery/issues?q=is%3Aissue%20state%3Aopen%20label%3Acomponent%2Fui">
210+
meshery-ui
211+
</a>{" "}
212+
and others, you can refer to the {" "}
213+
<a href="https://github.com/layer5io/sistent?tab=readme-ov-file#installation">
214+
Sistent set-up guide
215+
</a>, {" "}
216+
<a href="https://discuss.layer5.io/t/hands-on-training-session-migrating-components-to-mui-v5-and-sistent/6589">Hands-on Training Session: Migrating Components to MUI v5 and Sistent</a>, {" "}
217+
<a href="https://www.youtube.com/live/lsw9KA__iu4?si=o8gpZdSHcqO2OKxE">
218+
Training: contributing to Sistent,
219+
</a>{" "}
220+
and{" "}
221+
<a href="https://www.youtube.com/live/yiXkxbibLUU?si=Dybj5qr0VLhLWEpl">
222+
Websites call
223+
</a>{" "}
224+
, where experienced contributors demonstrate how to use Sistent in various projects.
79225
</p>
80226
</div>
81227
<SistentPagination />
@@ -86,4 +232,4 @@ const SistentAbout = () => {
86232
);
87233
};
88234

89-
export default SistentAbout;
235+
export default SistentAbout;

0 commit comments

Comments
 (0)