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.

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

fix: website revamp #458

Closed
wants to merge 10 commits into from
Closed

fix: website revamp #458

wants to merge 10 commits into from

Conversation

lakshz
Copy link

@lakshz lakshz commented Jan 5, 2024

Notes for Reviewers

This PR fixes site build error.
Errors was majorly due to omitting React import in components, gatsby doesn't allow it. gatsbyjs/gatsby#28657
There were some issues because of react-router-dom v6 was used, fixed that.

Signed commits

  • Yes, I signed my commits.

Signed-off-by: Lakshya Satpal <[email protected]>
@github-actions github-actions bot added area/docs Improvements or additions to documentation area/site labels Jan 5, 2024
@sudhanshutech
Copy link
Member

@LakshyaSatpal have you confirmed the gatsby version?

@lakshz
Copy link
Author

lakshz commented Jan 5, 2024

we are on Gatsby v5.12.4, I see, still the issue persists.
There are some workarounds that I found online, nothing worked, idk why.
I thought we should go conventionally then, since the project has very less files.

@leecalcote
Copy link
Member

Running build...

Signed-off-by: Lakshya Satpal <[email protected]>
Copy link
Member

@leecalcote leecalcote left a comment

Choose a reason for hiding this comment

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

Build warning:

warn `isModuleDeclaration` has been deprecated, please migrate to `isImportOrExportDeclaration`
    at isModuleDeclaration
(/Users/lee/code/sistent/site/node_modules/@babel/types/lib/validators/generated/index.js:2748:35)
    at PluginPass.Program (/Users/lee/code/sistent/site/node_modules/babel-plugin-lodash/lib/index.js:102:44)

Copy link
Member

@leecalcote leecalcote left a comment

Choose a reason for hiding this comment

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

➜  site git:(pr/LakshyaSatpal/458) make build
gatsby build && gatsby serve
⠋ compile gatsby files
/bin/sh: line 1: 54230 Segmentation fault: 11  gatsby build
make: *** [build] Error 139

Here's what I'm using to build:

gatsby -v     
Gatsby CLI version: 5.3.1
Gatsby version: 5.12.9
  Note: this is the Gatsby version for the site at: /Users/lee/code/sistent/site

Details:

success Writing page-data.json and slice-data.json files to public directory - 0.111s - 28/29 261.85/s
naviation

 ERROR  UNKNOWN

Truncated page data information for the failed page "/identity/typography/overview/": {
  "errors": {},
  "path": "/identity/typography/overview/",
  "slicesMap": {},
  "pageContext": {}
}

failed Building static HTML for pages - 3.872s

 ERROR #95313  HTML.COMPILATION

Building static HTML failed for path "/identity/typography/overview/"
See our docs page for more info on this error: https://gatsby.dev/debug-html

  649 |     rest = _objectWithoutPropertiesLoose(_ref7, _excluded);
  650 |   let {
> 651 |     basename
      | ^
  652 |   } = React.useContext(UNSAFE_NavigationContext);
  653 |   // Rendered into <a href> for absolute URLs
  654 |   let absoluteHref;

  WebpackError: TypeError: Cannot destructure property 'basename' of 'react__WEBPACK_IMPORTED_MODULE_0__.useContext(...)
  ' as it is null.
  - index.js:651 
    [sistent]/[react-router-dom]/dist/index.js:651:1
  - router.js:48 
    [sistent]/[@remix-run]/router/dist/router.js:48:1
  - router.js:53 
    [sistent]/[@remix-run]/router/dist/router.js:53:26
  - router.js:56 
    [sistent]/[@remix-run]/router/dist/router.js:56:1
  - router.js:50 
    [sistent]/[@remix-run]/router/dist/router.js:50:1
  - router.js:56 
    [sistent]/[@remix-run]/router/dist/router.js:56:1
  - router.js:59 
    [sistent]/[@remix-run]/router/dist/router.js:59:1  
  - router.js:58 
    [sistent]/[@remix-run]/router/dist/router.js:58:1
  - router.js:56 
    [sistent]/[@remix-run]/router/dist/router.js:56:1  
  - router.js:59 
    [sistent]/[@remix-run]/router/dist/router.js:59:1  
  - router.js:51 
    [sistent]/[@remix-run]/router/dist/router.js:51:1  
  - router.js:56 
    [sistent]/[@remix-run]/router/dist/router.js:56:1  
  - router.js:59 
    [sistent]/[@remix-run]/router/dist/router.js:59:1  
  - router.js:58 
    [sistent]/[@remix-run]/router/dist/router.js:58:1  
  - router.js:56 
    [sistent]/[@remix-run]/router/dist/router.js:56:1
  - router.js:51 
    [sistent]/[@remix-run]/router/dist/router.js:51:1
  
make: *** [build] Error 1

@lakshz lakshz requested a review from leecalcote January 6, 2024 12:05
@lakshz
Copy link
Author

lakshz commented Jan 6, 2024

react-router-dom's routing features were probably clashing with gatsby, and we don't need them both.

Removed react-router-dom and build should run now.

@iArchitSharma
Copy link

iArchitSharma commented Jan 8, 2024

LGTM i don't see any build errors
image

@sudhanshutech
Copy link
Member

yes the site is building properly @LakshyaSatpal good work. I wonder there quite few pages or components in there why they are been not shown , is there any routing did you discover @LakshyaSatpal ?

@lakshz
Copy link
Author

lakshz commented Jan 10, 2024

@sudhanshutech yes, actually pages of site are still incomplete and need some work. This is not due to my changes in the PR.

@leecalcote
Copy link
Member

@LakshyaSatpal thanks for this.

@iArchitSharma @sudhanshutech I'm not sure that it's worth publishing in its current state.

Copy link
Member

@leecalcote leecalcote left a comment

Choose a reason for hiding this comment

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

@iArchitSharma and @sudhanshutech this branch builds for you? I have pulled the latest commits and get this:

➜  site git:(pr/LakshyaSatpal/458) make setup
npm install

removed 3 packages, and audited 1363 packages in 4s

252 packages are looking for funding
  run `npm fund` for details

9 moderate severity vulnerabilities

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
➜  site git:(pr/LakshyaSatpal/458) make site
gatsby develop
⠙ compile gatsby files
make: *** [site] Segmentation fault: 11
➜  site git:(pr/LakshyaSatpal/458) give
➜  site git:(pr/LakshyaSatpal/458) make build
gatsby build && gatsby serve
⠙ compile gatsby files
/bin/sh: line 1: 60907 Segmentation fault: 11  gatsby build
make: *** [build] Error 139

@sudhanshutech
Copy link
Member

@iArchitSharma and @sudhanshutech this branch builds for you? I have pulled the latest commits and get this:

➜  site git:(pr/LakshyaSatpal/458) make setup
npm install

removed 3 packages, and audited 1363 packages in 4s

252 packages are looking for funding
  run `npm fund` for details

9 moderate severity vulnerabilities

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
➜  site git:(pr/LakshyaSatpal/458) make site
gatsby develop
⠙ compile gatsby files
make: *** [site] Segmentation fault: 11
➜  site git:(pr/LakshyaSatpal/458) give
➜  site git:(pr/LakshyaSatpal/458) make build
gatsby build && gatsby serve
⠙ compile gatsby files
/bin/sh: line 1: 60907 Segmentation fault: 11  gatsby build
make: *** [build] Error 139

@iArchitSharma and @sudhanshutech this branch builds for you? I have pulled the latest commits and get this:

➜  site git:(pr/LakshyaSatpal/458) make setup
npm install

removed 3 packages, and audited 1363 packages in 4s

252 packages are looking for funding
  run `npm fund` for details

9 moderate severity vulnerabilities

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
➜  site git:(pr/LakshyaSatpal/458) make site
gatsby develop
⠙ compile gatsby files
make: *** [site] Segmentation fault: 11
➜  site git:(pr/LakshyaSatpal/458) give
➜  site git:(pr/LakshyaSatpal/458) make build
gatsby build && gatsby serve
⠙ compile gatsby files
/bin/sh: line 1: 60907 Segmentation fault: 11  gatsby build
make: *** [build] Error 139

Yes it does.
While running make build

success compile gatsby files - 14.195s
success load gatsby config - 0.064s
success load plugins - 0.385s
success onPreInit - 0.002s
success delete worker cache from previous builds - 0.012s
success initialize cache - 0.079s
success copy gatsby files - 0.489s
success Compiling Gatsby Functions - 0.543s
success onPreBootstrap - 0.570s
success createSchemaCustomization - 0.002s
success Clean up stale nodes - 0.043s - 28/0 0.00/s
success Checking for changed pages - 0.001s
success source and transform nodes - 0.142s
info Writing GraphQL type definitions to /home/shivam/layer5/sistent/site/.cache/schema.gql
success building schema - 0.609s
success createPages - 0.015s
success createPagesStatefully - 0.428s
info Total nodes: 50, SitePage nodes: 28 (use --verbose for breakdown)
success Checking for changed pages - 0.002s
success Cleaning up stale page-data - 0.008s
success onPreExtractQueries - 0.001s
success extract queries from components - 0.272s
success write out redirect data - 0.002s
success onPostBootstrap - 0.001s
info bootstrap finished - 37.641s
success write out requires - 0.037s
success Building production JavaScript and CSS bundles - 2.588s
success Building HTML renderer - 4.955s
success Execute page configs - 0.112s
success Caching Webpack compilations - 0.001s
success run queries in workers - 0.009s - 0/0 0.00/s
success Merge worker state - 0.003s
success Rewriting compilation hashes - 0.002s
naviation
naviation
naviation
success Building static HTML for pages - 131.620s - 28/28 0.21/s
info There are no new or changed slice html files to build.
success stitching slices - 0.184s
success onPostBuild - 0.002s
info Done building in 178.145494373 sec


Pages

┌ src/pages/404.js
│ ├   /404/
│ └   /404.html
├ src/pages/index.js
│ └   /
├ src/pages/components/index.js
│ └   /components/
├ src/pages/home/index.js
│ └   /home/
├ src/pages/identity/Content.js
│ └   /identity/Content/
├ src/pages/identity/Heading.js
│ └   /identity/Heading/
├ src/pages/identity/Navigation.js
│ └   /identity/Navigation/
├ src/pages/identity/Next.js
│ └   /identity/Next/
├ src/pages/identity/Previous.js
│ └   /identity/Previous/
├ src/pages/identity/Sidebar.js
│ └   /identity/Sidebar/
├ src/pages/identity/SubContent.js
│ └   /identity/SubContent/
├ src/pages/identity/SubHeading.js
│ └   /identity/SubHeading/
├ src/pages/identity/SubText.js
│ └   /identity/SubText/
├ src/pages/identity/Text.js
│ └   /identity/Text/
├ src/pages/patterns/index.js
│ └   /patterns/
├ src/pages/visualise/index.js
│ └   /visualise/
├ src/pages/identity/color/code.js
│ └   /identity/color/code/
├ src/pages/identity/color/guidance.js
│ └   /identity/color/guidance/
├ src/pages/identity/color/index.js
│ └   /identity/color/
├ src/pages/identity/color/overview.js
│ └   /identity/color/overview/
├ src/pages/identity/elevation/index.js
│ └   /identity/elevation/
├ src/pages/identity/page-layouts/index.js
│ └   /identity/page-layouts/
├ src/pages/identity/spacing/index.js
│ └   /identity/spacing/
├ src/pages/identity/typography/code.js
│ └   /identity/typography/code/
├ src/pages/identity/typography/guidance.js
│ └   /identity/typography/guidance/
├ src/pages/identity/typography/index.js
│ └   /identity/typography/
└ src/pages/identity/typography/overview.js
  └   /identity/typography/overview/

  ╭────────────────────────────────────────────────────────────────╮
  │                                                                │
  │   (SSG) Generated at build time                                │
  │ D (DSG) Deferred static generation - page generated at runtime │
  │ ∞ (SSR) Server-side renders at runtime (uses getServerData)    │
  │ λ (Function) Gatsby function                                   
  │                                                                │
  ╰────────────────────────────────────────────────────────────────╯

Something is already running at port 9000

⠀
You can now view sistent in the browser.
⠀
  http://localhost:9002/

@sudhanshutech
Copy link
Member

@LakshyaSatpal thanks for this.

@iArchitSharma @sudhanshutech I'm not sure that it's worth publishing in its current state.

Yeah i agree, the current state is just raw format:
image

@sudhanshutech
Copy link
Member

sudhanshutech commented Jan 10, 2024

My suggestion is make to the above page as comming soon or under development type message(commenting out the footer and unnecessary body) including in this pr so we can move forward with the @LakshyaSatpal changes so that after we can start building pages. Make sense @leecalcote @nebula-aac ? In this way this will not be hanging

// @LakshyaSatpal @ritiksaxena124 @Rexford74

Signed-off-by: Lakshya Satpal <[email protected]>
Signed-off-by: Lakshya Satpal <[email protected]>
Signed-off-by: Lakshya Satpal <[email protected]>
@saurabh100ni
Copy link

Hi @LakshyaSatpal ,
Thanks for your PR! I encourage you to share this in the Website Meeting tomorrow at 6:30 PM IST. Share your screen, and walk us through it. It's cool to take and share feedback. Check the Doc here to include this PR.

You're welcome at the meeting

Check to community calendar for more details of meetings at Layers.

@lakshz lakshz changed the title fix: site build error fix: sistent website revamp Jan 14, 2024
@lakshz lakshz changed the title fix: sistent website revamp fix: website revamp Jan 14, 2024
@sudhanshutech
Copy link
Member

@LakshyaSatpal what is the status here, i pinged you in slack too. Are you working on this , what the plan here.

@leecalcote
Copy link
Member

merge conflict

@leecalcote
Copy link
Member

@lakshz what would you like to do with this one (this PR) going forward?

@lakshz
Copy link
Author

lakshz commented May 8, 2024

@leecalcote I'm unsure, if the work done in this PR is usable further or not. I am adding a screenshot of the website in this PR.
Screenshot 2024-05-08 at 10 52 26

The problem which was stated before, stays, that how do we make the design components reusable from existing layer5 or meshery sites?
If we wish to "not completely go with the figma design" and go by reusability of existing sites, the steps will be:

  1. Add the reusable components to @layer5/sistent package
  2. Import and use the components to build the sistent site.

I'm happy to work on both of the above steps.

@Rexford74
Copy link
Contributor

Good suggestions, @lakshz. I'd like to add that some of the current assets are being improved in the process, from buttons to modals and so on. So even when components are being reused, which is a major part of what we are aiming to achieve with Sistent, these improvements should be accounted for.
I'll do a review of all the assets you will need to begin working on this and confirm the availability status from other contributors working on Sistent. I'll give a progress report this week so that with the appropriate approval, you can begin something and possibly have something to present by Monday's websites call.
How does that sound @lakshz?

@lakshz
Copy link
Author

lakshz commented May 8, 2024

Sounds good. Once the reusable assets are more clear, I'll try to have something by next Monday.

@Rexford74
Copy link
Contributor

Cool! I'll be in touch, @lakshz.

@ritiksaxena124
Copy link
Contributor

Merge conflicts @lakshz

@lakshz
Copy link
Author

lakshz commented May 8, 2024

@ritiksaxena124 Resolved.

@leecalcote leecalcote closed this Jul 15, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area/docs Improvements or additions to documentation area/site
Development

Successfully merging this pull request may close these issues.

7 participants