diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml new file mode 100644 index 000000000000..ff9913a19db4 --- /dev/null +++ b/.github/workflows/checks.yml @@ -0,0 +1,25 @@ +name: Checks +on: + pull_request: + branches: [ master ] + types: [opened, synchronize, reopened] + + +jobs: + checks: + runs-on: ubuntu-latest + steps: + - name: Checkout 🛎️ + uses: actions/checkout@master + with: + persist-credentials: false + fetch-depth: 1 + + - name: NPM Install + run: npm install + + - name: Build + run: npm run build + + - name: Run Eslint + run: npm run checklint diff --git a/.github/workflows/meshmap.yml b/.github/workflows/meshmap.yml index ea1f3ba433c9..49dfc91cacce 100644 --- a/.github/workflows/meshmap.yml +++ b/.github/workflows/meshmap.yml @@ -32,8 +32,8 @@ jobs: run: | export pull_number=$(jq --raw-output .pull_request.number "$GITHUB_EVENT_PATH") echo "PULL_NO=$pull_number" >> $GITHUB_ENV - - uses: actions/checkout@v3 - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 + - uses: actions/checkout@v4 with: path: action repository: layer5labs/meshmap-snapshot @@ -41,7 +41,7 @@ jobs: uses: ${GITHUB_REF/refs/tags//} with: githubToken: ${{ secrets.GITHUB_TOKEN }} - providerToken: ${{ secrets.PROVIDER_TOKEN }} + mesheryToken: ${{ secrets.MESHERY_TOKEN }} prNumber: ${{ env.PULL_NO }} application_type: Kubernetes Manifest - filePath: ${{ inputs.fileName == '' && 'lkjh' || inputs.fileName }} + filePath: ${{ inputs.fileName == '' && '.gitpod.yml' || inputs.fileName }} diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 96f3a58c74b3..5b54053833db 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -12,7 +12,7 @@ We are beyond excited to see that you want to contribute! We would love to accep ⚠️ Cloning this repository ⚠️ -Cloning the repo with all its history results in a ~6 GB download. If you don't need the whole history you can use the depth parameter to significantly reduce download size. +Cloning the repo with all its history results in a ~6 GB download. To contribute to this site, you don't need its entire history. Use the `--depth=1` flag to significantly reduce the footprint this repo creates in your environment. ```bash git clone --depth=1 https://github.com/layer5io/layer5.git @@ -558,6 +558,18 @@ git push -u origin **15.** Once you’ve committed and pushed all of your changes to GitHub, go to the page for your fork on GitHub, select your development branch, and click the pull request button. Please ensure that you compare your feature branch to the desired branch of the repo you are supposed to make a PR to. If you need to make any adjustments to your pull request, just push the updates to GitHub. Your pull request will automatically track the changes in your development branch and update it. +### Lint Rules + +Layer5 uses ESLint to maintain code quality and consistency in our UI code. Use this command to trigger a lint check: + +```sh +make lint +``` + +> Note: +> - Eslint in Gatsby requires generating config files from CLI. Run `gatsby build` or `gatsby develop` if you face this error during linting. + + ## Signing-off on Commits To contribute to this project, you must agree to the **Developer Certificate of diff --git a/Makefile b/Makefile index 78c65c399da0..9dbf266c3c6e 100644 --- a/Makefile +++ b/Makefile @@ -37,4 +37,8 @@ build: clean: gatsby clean && make site -.PHONY: setup build site clean site-fast \ No newline at end of file +## Run Eslint on your local machine. +lint: + npm run lint + +.PHONY: setup build site clean site-fast lint diff --git a/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/istio/getting-started.mdx b/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/istio/getting-started.mdx index 2c0698a5f935..83b8badaa503 100644 --- a/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/istio/getting-started.mdx +++ b/content-learn/mastering-service-meshes-for-developers/introduction-to-service-meshes/istio/getting-started.mdx @@ -45,7 +45,6 @@ In the Istio management page: 3. Click the `Deploy` button on the confirmation modal. - {" "} diff --git a/gatsby-node.js b/gatsby-node.js index 838d06780192..76e47087e289 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -266,6 +266,12 @@ exports.createPages = async ({ actions, graphql, reporter }) => { redirectInBrowser: true, isPermanent: true, }); + createRedirect({ + fromPath: "/blog/announcements/meshery-5000-star-milestone", + toPath: "/blog/announcements/mesherys-5000-star-milestone", + redirectInBrowser: true, + isPermanent: true, + }); //**** // External Resource Redirects diff --git a/package-lock.json b/package-lock.json index 308fd21be0f7..040e331e8ccd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,7 +24,7 @@ "@sideway/address": "^5.0.0", "@svgr/webpack": "^8.0.1", "@types/mui-datatables": "^4.3.12", - "axios": "^1.6.7", + "axios": "^1.7.3", "babel-plugin-styled-components": "^2.1.4", "babel-preset-gatsby": "^2.22.0", "cytoscape": "^3.28.1", @@ -7202,11 +7202,11 @@ } }, "node_modules/axios": { - "version": "1.6.7", - "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.7.tgz", - "integrity": "sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==", + "version": "1.7.3", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.3.tgz", + "integrity": "sha512-Ar7ND9pU99eJ9GpoGQKhKf58GpUOgnzuaB7ueNQ5BMi0p+LZ5oaEnfF999fAArcTIBwXTCHAmGcHOZJaWPq9Nw==", "dependencies": { - "follow-redirects": "^1.15.4", + "follow-redirects": "^1.15.6", "form-data": "^4.0.0", "proxy-from-env": "^1.1.0" } @@ -12337,9 +12337,9 @@ "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==" }, "node_modules/follow-redirects": { - "version": "1.15.5", - "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz", - "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==", + "version": "1.15.6", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz", + "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==", "funding": [ { "type": "individual", diff --git a/package.json b/package.json index 4a9a4fe87a0e..a33f3fe6d733 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,7 @@ "@sideway/address": "^5.0.0", "@svgr/webpack": "^8.0.1", "@types/mui-datatables": "^4.3.12", - "axios": "^1.6.7", + "axios": "^1.7.3", "babel-plugin-styled-components": "^2.1.4", "babel-preset-gatsby": "^2.22.0", "cytoscape": "^3.28.1", diff --git a/src/assets/images/app/projects/sistent/confirmation-dark.png b/src/assets/images/app/projects/sistent/confirmation-dark.png new file mode 100644 index 000000000000..b8bdedaf826a Binary files /dev/null and b/src/assets/images/app/projects/sistent/confirmation-dark.png differ diff --git a/src/assets/images/app/projects/sistent/confirmation.png b/src/assets/images/app/projects/sistent/confirmation.png new file mode 100644 index 000000000000..9f4fd30bd846 Binary files /dev/null and b/src/assets/images/app/projects/sistent/confirmation.png differ diff --git a/src/assets/images/code-cleanup-crew/code-cleanup-crew.svg b/src/assets/images/code-cleanup-crew/code-cleanup-crew.svg new file mode 100644 index 000000000000..4042aef9b5b3 --- /dev/null +++ b/src/assets/images/code-cleanup-crew/code-cleanup-crew.svg @@ -0,0 +1,77 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/continuous-contributor/continuous-contributor.svg b/src/assets/images/continuous-contributor/continuous-contributor.svg new file mode 100644 index 000000000000..0a0e019b398a --- /dev/null +++ b/src/assets/images/continuous-contributor/continuous-contributor.svg @@ -0,0 +1,79 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/longevity-legend/longevity-legend.svg b/src/assets/images/longevity-legend/longevity-legend.svg new file mode 100644 index 000000000000..840fe0e12718 --- /dev/null +++ b/src/assets/images/longevity-legend/longevity-legend.svg @@ -0,0 +1,63 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/meshmap-snapshot/meshmap-snapshot.svg b/src/assets/images/meshmap-snapshot/meshmap-snapshot.svg new file mode 100644 index 000000000000..694ca086fcd4 --- /dev/null +++ b/src/assets/images/meshmap-snapshot/meshmap-snapshot.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/review-rockstar/review-rockstar.svg b/src/assets/images/review-rockstar/review-rockstar.svg new file mode 100644 index 000000000000..30a054fd1f40 --- /dev/null +++ b/src/assets/images/review-rockstar/review-rockstar.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/security-sentinel/security-sentinel.png b/src/assets/images/security-sentinel/security-sentinel.png new file mode 100644 index 000000000000..77a4b7064e02 Binary files /dev/null and b/src/assets/images/security-sentinel/security-sentinel.png differ diff --git a/src/collections/blog/2023/08-21-layer5-badge-program/index.mdx b/src/collections/blog/2023/08-21-layer5-badge-program/index.mdx index 7f130b72b80a..f783a2532dc6 100644 --- a/src/collections/blog/2023/08-21-layer5-badge-program/index.mdx +++ b/src/collections/blog/2023/08-21-layer5-badge-program/index.mdx @@ -78,6 +78,9 @@ Earning Layer5 Badges is both exciting and achievable. As you continue to contri

Achievement Badges

+
+ Design Pioneer

This badge is awarded upon creating your first design.

+
Bring a Buddy

This badge is awarded to the users who invite someone to Layer5 cloud.

diff --git a/src/collections/blog/2024/03-27-models-designs-legos/index.mdx b/src/collections/blog/2024/03-27-models-designs-legos/index.mdx index 65743c0ea302..eaa6205ad54f 100644 --- a/src/collections/blog/2024/03-27-models-designs-legos/index.mdx +++ b/src/collections/blog/2024/03-27-models-designs-legos/index.mdx @@ -41,7 +41,7 @@ On the other hand,
  • Definition: Building blocks for infrastructure definition.
    • -
  • Focus: Describe how to manage specific infrastructure types and their interactions.
    • +
  • Focus: Describe how to manage specific infrastructure types and their interactions.
  • Content: Define properties, capabilities, and relationships for infrastructure components.
  • Usability: Not directly deployable, but used as building blocks within Designs.
  • Sharing: Can be packaged and shared for others to use in their Designs.
    • @@ -52,7 +52,7 @@ On the other hand,     Meshery Designs (similar to Lego instructions)

    Meshery Designs provide a collaborative blueprint for building a specific model using Lego bricks (Meshery Models). Designs define the structure and placement of the bricks to achieve the desired outcome. Desan be shared, versioned, and used as reference for building the same model.

    -In essence: +In essence:     + +

    How can I Earn Badges?

    +     +

    + Earning Layer5 badges is both rewarding and straightforward. As you continue to contribute to our projects, your accomplishments will be recognized with badges that reflect your dedication and expertise. + Each badge is tied to specific activities. Here are some ways you can earn Layer5 Badges: +

    +

    + For users, badges for activities such as using our projects, talking about the projects, sharing your successes and what you like about them. For contributors, badges include activities such as submitting code, reviewing Pull Requests, assisting with documentation, participating in community events, and more. As you accumulate contributions in various areas, you'll begin to unlock badges that showcase your multifaceted involvement. These badges will be prominently displayed on your Layer5 Cloud profile, visually representing your journey. Not only does this serve as a source of personal pride, but it also helps others in the community recognize your expertise and dedication. +

    + +

    The description and criteria for all the badges are listed above.

    +

    + +

    How can I Share My Badge On My Profile?

    +     +

    + To share your badges on other social profiles, utilize the provided embedded code and direct share functionality. Access your badges from the Layer5 Cloud profile badges section, and then use it to post your achievements on social media platforms seamlessly. This enables you to showcase your Layer5 contributions and milestones to a wider audience: +

    +

    To display badge on your GitHub profile, follow below steps:

    +

    Recognition on Social Media Platforms

    - We highly encourage you to share your engagement and contributions to the Layer5 community on social media like LinkedIn and Twitter. We support every contribution by liking your posts and retweeting them. Your contributions and engagement in different ways are what make us a successful and collaborative open-source community. We love celebrating your every accomplishment with Layer5 publicly and encourage you in every way we can. + We highly encourage you to share your engagement and contributions to the Layer5 community on social media like LinkedIn and Twitter. We support every contribution by liking your posts and retweeting them. Your contributions and engagement in different ways are what make us a successful and collaborative open-source community. We love celebrating your every accomplishment with Layer5 publicly and encourage you in every way we can.

    diff --git a/src/sections/Community/Handbook/repo-data.js b/src/sections/Community/Handbook/repo-data.js index 3ad7d3dbbcfb..65dd16a62234 100644 --- a/src/sections/Community/Handbook/repo-data.js +++ b/src/sections/Community/Handbook/repo-data.js @@ -138,7 +138,7 @@ export const repo_data = [ site: "https://badges.layer5.io/", language: "Gatsby", maintainers_name: ["Vacant"], - link: ["https://badges.layer5.io"], + link: [""], repository: "https://github.com/layer5labs/meshery-extensions-packages/", }, @@ -164,8 +164,8 @@ export const repo_data = [ image: five, site: "https://docs.layer5.io/", language: "Hugo", - maintainers_name: ["Archit Sharma"], - link: ["https://layer5.io/community/members/archit-sharma"], + maintainers_name: ["Vacant"], + link: [""], repository: "https://github.com/layer5io/docs", }, @@ -264,6 +264,7 @@ export const repo_data = [ "A utility for validating the conformance of service mesh implementations and their adherence to the Service Mesh Interface specifications.", repository: "https://github.com/layer5io/meshery-smi-conformance-action", + accessRequired: "*archived", }, { project: "Meshery Operator", diff --git a/src/sections/Community/Handbook/repository.js b/src/sections/Community/Handbook/repository.js index 353a8eff9716..88be857bbb42 100644 --- a/src/sections/Community/Handbook/repository.js +++ b/src/sections/Community/Handbook/repository.js @@ -208,7 +208,7 @@ const Repository = () => { {backendProject.subdata.map((subdata) => { - const { project,image,language,description,repository,link,maintainers_name } = subdata; + const { project,image,language,description,repository,link,maintainers_name,accessRequired } = subdata; const smpClass = project === "SMP Action"; const siteIconClasses = smpClass ? "site-icon inline smp-action" : "site-icon inline"; return ( @@ -236,6 +236,7 @@ const Repository = () => { > github-icon +
    { accessRequired != "" ? accessRequired : ""}
    diff --git a/src/sections/Community/Handbook/security-vulnerabilities.js b/src/sections/Community/Handbook/security-vulnerabilities.js index 93f3b589f951..012dcda3f24a 100644 --- a/src/sections/Community/Handbook/security-vulnerabilities.js +++ b/src/sections/Community/Handbook/security-vulnerabilities.js @@ -141,32 +141,36 @@ const SecurityVulnerabilitiesPage = () => {

    As much as possible this announcement will be actionable, and include any mitigating steps customers can take prior to upgrading to a fixed version.

    List of Announced Vulnerabilities:

    - - - - - - - - - - - - - - - - - - - - - - - - - -
    DATE ANNOUNCEDCVE IDDESCRIPTIONAFFECTED COMPONENTVULNERABLE VERSIONPATCHED VERSIONFIX DETAILSLINKS
    2021-04-28CVE-2021-31856A SQL Injection vulnerability in the REST API in Layer5 Meshery 0.5.2 allows an attacker to execute arbitrary SQL commands via the /experimental/patternfiles endpoint (order parameter in GetMesheryPatterns in models/meshery_pattern_persister.go).REST APIv0.5.2v0.5.3fix pullmitre, details
    + +
    + + + + + + + + + + + + + + + + + + + + + + + + + +
    DATE ANNOUNCEDCVE IDDESCRIPTIONAFFECTED COMPONENTVULNERABLE VERSIONPATCHED VERSIONFIX DETAILSLINKS
    2021-04-28CVE-2021-31856A SQL Injection vulnerability in the REST API in Layer5 Meshery 0.5.2 allows an attacker to execute arbitrary SQL commands via the /experimental/patternfiles endpoint (order parameter in GetMesheryPatterns in models/meshery_pattern_persister.go).REST APIv0.5.2v0.5.3fix pullmitre, details
    +
    + @@ -175,4 +179,4 @@ const SecurityVulnerabilitiesPage = () => { ); }; -export default SecurityVulnerabilitiesPage; \ No newline at end of file +export default SecurityVulnerabilitiesPage; diff --git a/src/sections/Community/Handbook/writing-program/content-form.js b/src/sections/Community/Handbook/writing-program/content-form.js index 7f3229a14988..ac1d7cf2a9b5 100644 --- a/src/sections/Community/Handbook/writing-program/content-form.js +++ b/src/sections/Community/Handbook/writing-program/content-form.js @@ -24,7 +24,7 @@ const ContentForm = () => { useEffect(() => { if (submit) { - axios.post("https://hook.us1.make.com/x4crqi16j8wfhctosk8y47fj6gknyvvh", { + axios.post("https://hook.us1.make.com/7c1op88rysnmeitovt35fxzcv2spspp0", { memberFormOne, }); } diff --git a/src/sections/Community/Member-single/memberSingle.style.js b/src/sections/Community/Member-single/memberSingle.style.js index 6181563ed9e6..ad3fa15be608 100644 --- a/src/sections/Community/Member-single/memberSingle.style.js +++ b/src/sections/Community/Member-single/memberSingle.style.js @@ -30,7 +30,7 @@ export const MemberSingleWrapper = styled.div` font-size: 1.75rem; line-height: 1.75rem; color: ${(props) => props.theme.primaryColor}; - text-align: right; + text-align: left; font-weight: 400; } ul { diff --git a/src/sections/Community/Meshmates/index.js b/src/sections/Community/Meshmates/index.js index c39d40e3da63..8314125625d8 100644 --- a/src/sections/Community/Meshmates/index.js +++ b/src/sections/Community/Meshmates/index.js @@ -17,7 +17,7 @@ const Meshmates = () => { graphql`query meshmates { allMdx( sort: {fields: [frontmatter___name], order: ASC} - filter: {fields: {collection: {eq: "members"}}, frontmatter: {meshmate: {eq: "yes"}, emeritus: {ne: "yes"}}} + filter: {fields: {collection: {eq: "members"}}, frontmatter: {meshmate: {eq: "yes"}, emeritus: {ne: "yes"}, status: { ne: "Inactive" }}} ) { nodes { id diff --git a/src/sections/Company/Brand/Brand-components/community.js b/src/sections/Company/Brand/Brand-components/community.js index df98297d3585..211245498602 100644 --- a/src/sections/Company/Brand/Brand-components/community.js +++ b/src/sections/Company/Brand/Brand-components/community.js @@ -43,9 +43,9 @@ const CommunityBrand = () => { -

    +

    Logos -

    + @@ -58,9 +58,9 @@ const CommunityBrand = () => { -

    +

    Colors -

    +

    diff --git a/src/sections/Company/Brand/Brand-components/meshery-operator.js b/src/sections/Company/Brand/Brand-components/meshery-operator.js index 2d5b04734886..53d4a1d9e22d 100644 --- a/src/sections/Company/Brand/Brand-components/meshery-operator.js +++ b/src/sections/Company/Brand/Brand-components/meshery-operator.js @@ -44,9 +44,9 @@ const MesheryOperatorBrand = () => { -

    +

    Logos -

    + @@ -61,9 +61,9 @@ const MesheryOperatorBrand = () => { -

    +

    Colors -

    +

    diff --git a/src/sections/Company/Brand/Brand-components/meshmap.js b/src/sections/Company/Brand/Brand-components/meshmap.js index d506eda88e2d..53632bfb0c03 100644 --- a/src/sections/Company/Brand/Brand-components/meshmap.js +++ b/src/sections/Company/Brand/Brand-components/meshmap.js @@ -45,9 +45,9 @@ const MeshMapBrand = () => { -

    +

    Logos -

    + @@ -65,9 +65,9 @@ const MeshMapBrand = () => { -

    +

    Colors -

    +

    diff --git a/src/sections/Company/Brand/Brand-components/meshsync.js b/src/sections/Company/Brand/Brand-components/meshsync.js index 5ac89b9db67a..7fb6b83b70cb 100644 --- a/src/sections/Company/Brand/Brand-components/meshsync.js +++ b/src/sections/Company/Brand/Brand-components/meshsync.js @@ -44,9 +44,9 @@ const MeshSyncBrand = () => { -

    +

    Logos -

    + @@ -61,9 +61,9 @@ const MeshSyncBrand = () => { -

    +

    Colors -

    +

    diff --git a/src/sections/Company/Brand/brandPage.style.js b/src/sections/Company/Brand/brandPage.style.js index 62dce7e8ddf7..45748ee0605f 100644 --- a/src/sections/Company/Brand/brandPage.style.js +++ b/src/sections/Company/Brand/brandPage.style.js @@ -176,9 +176,19 @@ const BrandPageWrapper = styled.section` } @media screen and (max-width: 575px) { - .ImgDiv, .color-code-wrapper { + .color-code-wrapper{ margin-left: 0px; } + .ImgDiv img { + margin: auto; + width: auto; + max-width: 100%; + height: auto; + max-height: 200px; + display: flex; + justify-content: center; + flex-wrap: wrap; + } img.Layer5Icon { width: auto; height: 80px; diff --git a/src/sections/Company/News-grid/press.js b/src/sections/Company/News-grid/press.js index 67528f8cf682..0e523337f36a 100644 --- a/src/sections/Company/News-grid/press.js +++ b/src/sections/Company/News-grid/press.js @@ -16,18 +16,24 @@ const PressWrapper = styled.div` padding: 2rem 0; background: ${props => props.theme.secondaryLightColor}; transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); +.heading { + display: flex; + justify-content: center; +} + h2{ text-align: center; border-top: 4px solid #00b39f; border-bottom: 4px solid #00b39f; - margin: 1rem 40% 2rem; + margin: 1rem 0 2rem 0; padding: 1rem 0; + max-width: 12rem; } h4, h5{ text-align: center; } -.press_card { +.press_card { background: ${props => props.theme.grey212121ToWhite}; transition: 450ms all; height: 15rem; @@ -66,7 +72,9 @@ const Press = () => { return ( -

    Media Resources

    +
    +

    Media Resources

    +

    For any press or analyst inquiries, please reach out:

    diff --git a/src/sections/Home/Playground-home/index.js b/src/sections/Home/Playground-home/index.js index 8fd172161627..bd2df1029335 100644 --- a/src/sections/Home/Playground-home/index.js +++ b/src/sections/Home/Playground-home/index.js @@ -107,7 +107,7 @@ const ViewsSectionWrapper = styled.div` .overlay { width: 483px; - height: 680x; + height: 680px; } .container { @@ -115,24 +115,50 @@ const ViewsSectionWrapper = styled.div` justify-content: center; } - .line1 { + .line { display: flex; flex-direction: column; align-items: center; margin-right: 2rem; - transform: translateY(50px); flex-wrap: wrap; } + .position-line-down{ + transform: translateY(-20em); + } + .position-line-up{ + transform: translateY(20em); + } - .line2 { - display: flex; - flex-direction: column; - align-items: center; - margin-right: 2rem; - transform: translateY(-50px); - flex-wrap: wrap; + .line-primary, .line-secondary { + width: 100%; + display: flex; + flex-direction: column; + } + + .animation-up-scroll { + animation: scroll-up-animation 15s linear infinite; + + @keyframes scroll-up-animation { + 0% { + transform: translateY(0%); + } + 100% { + transform: translateY(-100%); + } + } + } + .animation-down-scroll { + + animation: scroll-down-animation 15s linear infinite; + @keyframes scroll-down-animation { + 0% { + transform: translateY(0); + } + 100% { + transform: translateY(100%); + } + } } - .box { display: flex; flex-direction: column; @@ -179,7 +205,7 @@ const ViewsSectionWrapper = styled.div` `; const MeshmapVisualizerViews = () => { - const [imageRef, inView] = useInView({ threshold: 0.4 }); + const [imageRef, inView] = useInView({ threshold: 0.3 }); const [imageInView, setimageInView] = useState(false); if (inView && !imageInView) setimageInView(true); @@ -195,44 +221,50 @@ const MeshmapVisualizerViews = () => { alt="" /> */}
    -
    -
    - -
    Argo CD
    -
    -
    - -
    Cilium
    -
    -
    - -
    Prometheus
    -
    -
    - -
    Prometheus
    +
    +
    +
    + +
    Prometheus
    +
    +
    + +
    Argo CD
    +
    +
    + +
    Cilium
    +
    +
    + +
    Prometheus
    +
    +
    -
    -
    - -
    Kubernetes
    -
    -
    - -
    Keda
    -
    -
    - -
    Linkerd
    -
    -
    - -
    Kubernetes
    +
    +
    +
    + +
    Kubernetes
    +
    +
    + +
    Keda
    +
    +
    + +
    Linkerd
    +
    +
    + +
    Kubernetes
    +
    @@ -248,7 +280,7 @@ const MeshmapVisualizerViews = () => {

    +
    ); }; diff --git a/src/sections/Projects/Sistent/components/button/code-block.js b/src/sections/Projects/Sistent/components/button/code-block.js index 6851f07e56b9..b3e4945c40e5 100644 --- a/src/sections/Projects/Sistent/components/button/code-block.js +++ b/src/sections/Projects/Sistent/components/button/code-block.js @@ -1,12 +1,10 @@ import React, { useState } from "react"; - +import Code from "../../../../../components/CodeBlock"; export const CodeBlock = ({ name, code }) => { const [showCode, setShowCode] = useState(false); - const onChange = () => { setShowCode((prev) => !prev); }; - return (
    @@ -14,9 +12,7 @@ export const CodeBlock = ({ name, code }) => { Show Code {showCode && ( - 
    -          {code}
-
    + )}
    ); diff --git a/src/sections/Projects/Sistent/components/button/code.js b/src/sections/Projects/Sistent/components/button/code.js index a7d2b1f2e733..89363d64a8c9 100644 --- a/src/sections/Projects/Sistent/components/button/code.js +++ b/src/sections/Projects/Sistent/components/button/code.js @@ -40,7 +40,7 @@ export const ButtonCode = () => { const { isDark } = useStyledDarkMode(); return ( - +

    Button

    diff --git a/src/sections/Projects/Sistent/components/button/index.js b/src/sections/Projects/Sistent/components/button/index.js index e93b0bda000d..525ea276897d 100644 --- a/src/sections/Projects/Sistent/components/button/index.js +++ b/src/sections/Projects/Sistent/components/button/index.js @@ -13,7 +13,7 @@ const SistentButton = () => { const { isDark } = useStyledDarkMode(); return ( - +

    Button

    diff --git a/src/sections/Projects/Sistent/components/index.js b/src/sections/Projects/Sistent/components/index.js index 14ac2ffbdf19..8bb294655b0f 100644 --- a/src/sections/Projects/Sistent/components/index.js +++ b/src/sections/Projects/Sistent/components/index.js @@ -6,6 +6,7 @@ import TOC from "../../../../components/SistentNavigation"; import SearchBox from "../../../../reusecore/Search"; import useDataList from "../../../../utils/usedataList"; import { FaArrowRight } from "@react-icons/all-files/fa/FaArrowRight"; +import { Link } from "gatsby"; const componentsData = [ { @@ -22,6 +23,13 @@ const componentsData = [ "A text input is made up of multiple elements that combine to form a component that helps users to read, write, and edit text in an interface.", url: "/projects/sistent/components/text-input", }, + { + id: 3, + name: "Modal", + description: + "A text input is made up of multiple elements that combine to form a component that helps users to read, write, and edit text in an interface.", + url: "/projects/sistent/components/modal", + }, ]; const SistentComponents = () => { @@ -34,6 +42,8 @@ const SistentComponents = () => { "id" ); + const compArray = queryResults; + return (
    @@ -60,26 +70,29 @@ const SistentComponents = () => {
    - {queryResults.map((comp) => ( - diff --git a/src/sections/Projects/Sistent/components/modal/code.js b/src/sections/Projects/Sistent/components/modal/code.js new file mode 100644 index 000000000000..b71e2b8962bb --- /dev/null +++ b/src/sections/Projects/Sistent/components/modal/code.js @@ -0,0 +1,231 @@ +import React from "react"; +import { SistentLayout } from "../../sistent-layout"; +import { useState } from "react"; +import { + Box, + Button, + Modal, + ModalBody, + ModalButtonDanger, + ModalButtonPrimary, + ModalButtonSecondary, + ModalFooter, + SistentThemeProvider, + TextField, + Typography, +} from "@layer5/sistent"; +import TabButton from "../../../../../reusecore/Button"; +import { useLocation } from "@reach/router"; +import { navigate } from "gatsby"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; +import { CodeBlock } from "../button/code-block"; +import { ActionBox } from "../../sistent.style"; + +const CustomInput = ({ label, text, style }) => ( + + + {label} + + + +); + +const codes = [ + ` + + +
    + This action is irreversible! Are you sure you want to delete this team? +
    +     + + + Cancel + + + Delete + + +     `, + ` + + + + + + + + + Cancel + + + Save + + + `, +]; + +export const ModalCode = () => { + const [open, setOpen] = useState(false); + const [actionOpen, setActionOpen] = useState(false); + const location = useLocation(); + const { isDark } = useStyledDarkMode(); + + const handleOpen = () => { + setOpen(true); + }; + + const handleClose = () => { + setOpen(false); + }; + + const handleActionOpen = () => { + setActionOpen(true); + }; + + const handleActionClose = () => { + setActionOpen(false); + }; + + return ( + +
    + +

    Modal

    +     +

    + A modal is a dialog box or popup, displayed over the current page. + Modals are used to grab the user's attention and provide important + information. +

    +
    + navigate("/projects/sistent/components/modal")} + title="Overview" + /> + {/* + navigate("/projects/sistent/components/modal/guidance") + } + title="Guidance" + /> */} + navigate("/projects/sistent/identity/color/code")} + title="Code" + /> +
    +
    + +

    + Buttons communicate actions to users and they can be placed at + several places throughout the user interface. +

    + +

    Confirmation Modal

    +     +
    +
    + + + +
    + This action is irreversible! Are you sure you want to + delete this team? +
    +     + + + + Cancel + + + Delete + + + +     +
    + +
    +

    Action Modal

    +

    + Action modals help users carry out specific tasks. These would + naturally involve more steps than just confirming or rejecting an + action. They may include forms, links, and feature specific + elements that ensure that users complete crucial tasks along their + given flow. They will usually have an icon at the top left corner + of the modal to signify what the purpose of this modal is in + relation to the given flow as well as help users familiarize with + said custom icons for easy identification across our solutions + however, this might not be applicable in all cases. +

    +
    +
    + + + + + + + + + + + Cancel + + + Save + + + + +
    + +
    +     +
    +
    +     + ); +}; + +export default ModalCode; diff --git a/src/sections/Projects/Sistent/components/modal/guidance.js b/src/sections/Projects/Sistent/components/modal/guidance.js new file mode 100644 index 000000000000..99dba2bd4dd7 --- /dev/null +++ b/src/sections/Projects/Sistent/components/modal/guidance.js @@ -0,0 +1,53 @@ +import React from "react"; +import { SistentLayout } from "../../sistent-layout"; +import TabButton from "../../../../../reusecore/Button"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; + +export const ModalGuidance = () => { + const location = useLocation(); + return ( + +
    +

    + A button is an interactive element that triggers a specific action, + takes users where they need to go, and points out what happens next in a + given flow. +

    +
    +
    + navigate("/projects/sistent/components/modal")} + title="Overview" + /> + {/* + navigate("/projects/sistent/components/modal/guidance") + } + title="Guidance" + /> */} + navigate("/projects/sistent/identity/color/code")} + title="Code" + /> +
    +     + ); +}; +export default ModalGuidance; diff --git a/src/sections/Projects/Sistent/components/modal/index.js b/src/sections/Projects/Sistent/components/modal/index.js new file mode 100644 index 000000000000..b62eccfcc11b --- /dev/null +++ b/src/sections/Projects/Sistent/components/modal/index.js @@ -0,0 +1,115 @@ +import React from "react"; +import { SistentLayout } from "../../sistent-layout"; +import TabButton from "../../../../../reusecore/Button"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; +import ConfirmationBg from "../../../../../assets/images/app/projects/sistent/confirmation.png"; +import ConfirmationDarkBg from "../../../../../assets/images/app/projects/sistent/confirmation-dark.png"; +import { Col, Row } from "../../../../../reusecore/Layout"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; + +export const SistentModal = () => { + const location = useLocation(); + const { isDark } = useStyledDarkMode(); + return ( + +
    + +

    Modal

    +     +

    + A modal is a container that appears in front of the main content on a + page, providing important information or an actionable piece of + content for users to execute. +

    + +
    + navigate("/projects/sistent/components/modal")} + title="Overview" + /> + {/* + navigate("/projects/sistent/components/modal/guidance") + } + title="Guidance" + /> */} + navigate("/projects/sistent/components/modal/code")} + title="Code" + /> +
    +
    +

    + A modal is an interface element that assists users by providing + added information in the form of a message or prompting an action as + users interact with and navigate a solution. +

    + +

    Types

    +     +

    + Modals can be used for various purposes. From conveying information + that does not require much action to having a series of other + components embedded in them to ensure that users are able to begin + tasks and successfully complete them, modals can provide versatility + to interfaces while ensuring a simple, intuitive, and efficient + design. +

    +

    Basic

    +

    + The basic modal is one that helps users carry out common actions + while navigating our solutions. These modals help to pass across + important messages to the user, or assist them in completing common + actions that do not require intricate knowledge of the subject + matter. Some examples of basic modals can be share links, + confirmation messages, feedback prompts and other similarly common + actions. These type of modals can be easily identified by the lack + of an icon at the top left corner of the modal. They may sometimes + include form fields but mostly will just require users to either + confirm and cancel actions or make progress while carrying out a + particular task. +

    + + + confirmation + + +

    Action

    +

    + Action modals help users carry out specific tasks. These would + naturally involve more steps than just confirming or rejecting an + action. They may include forms, links, and feature specific elements + that ensure that users complete crucial tasks along their given + flow. They will usually have an icon at the top left corner of the + modal to signify what the purpose of this modal is in relation to + the given flow as well as help users familiarize with said custom + icons for easy identification across our solutions however, this + might not be applicable in all cases. +

    +
    +
    +     + ); +}; +export default SistentModal; diff --git a/src/sections/Projects/Sistent/components/text-input/guidance.js b/src/sections/Projects/Sistent/components/text-input/guidance.js index 765ab2ebe418..7694fb5bb814 100644 --- a/src/sections/Projects/Sistent/components/text-input/guidance.js +++ b/src/sections/Projects/Sistent/components/text-input/guidance.js @@ -80,7 +80,7 @@ export const TextInputGuidance = () => {

    - +

    Multiline

    @@ -91,7 +91,7 @@ export const TextInputGuidance = () => {

    - + diff --git a/src/sections/Projects/Sistent/sistent.style.js b/src/sections/Projects/Sistent/sistent.style.js index cd402324c8df..9a47166d03fc 100644 --- a/src/sections/Projects/Sistent/sistent.style.js +++ b/src/sections/Projects/Sistent/sistent.style.js @@ -1,5 +1,13 @@ +import { Box } from "@layer5/sistent"; import styled from "styled-components"; +export const ActionBox = styled(Box)(() => ({ + display: "flex", + justifyContent: "end", + width: "100%", + gap: "1rem" +})); + const SistentWrapper = styled.div` position: relative; .content > a:first-of-type > h2:first-of-type { @@ -621,10 +629,6 @@ const SistentWrapper = styled.div` margin-bottom: 0.5rem; } - .components-container { - margin-left: 1rem; - } - .search-container { display: flex; justify-content: center; @@ -671,6 +675,7 @@ const SistentWrapper = styled.div` .card_head .title { font-size: 32px; font-weight: 700; + color: ${props => props.theme.text}; } .card .text { @@ -682,6 +687,17 @@ const SistentWrapper = styled.div` color: ${(props) => props.theme.whiteToBlack}; } + .card { + box-shadow: 0px 2px 6px 0px ${props => props.theme.green00D3A9ToBlackTwo}; + transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0s; + + &:hover { + box-shadow: 0px 2px 15px 4px ${props => props.theme.whiteNineToBlackOne}; + transform: scale(1.045); + } + } + + .card_bottom { border-top: 2px solid #2c2c2c; display: flex; diff --git a/src/sections/app.style.js b/src/sections/app.style.js index 12cec3163611..c09e58973553 100644 --- a/src/sections/app.style.js +++ b/src/sections/app.style.js @@ -43,6 +43,7 @@ const GlobalStyle = createGlobalStyle` } html{ + overflow-x: hidden; box-sizing: border-box; -ms-overflow-style: scrollbar; }