In Dark mode, in the reference section the syntax text color should be in black

[piyushzingade]

Most appropriate sections of the p5.js website?

Reference

What is your operating system?

Windows

Web browser and version

No response

Actual Behavior

In the reference section of circle the syntax text color should also be change. Currently is it in black color

Expected Behavior

It should white in text color

Steps to reproduce

No response

Would you like to work on the issue?

Please assign me this issue. I would love to work on this issue

[piyushzingade]

Please assign me this issue

[davepagurek]

Thanks @piyushzingade!

[limzykenneth]

@piyushzingade I think you may have monochrome mode enabled as well since I'm seeing it as blue (which is still too dark) when it should be yellow. You may need to investigate a bit deeper into what's going on here.

[davepagurek]

For some context @piyushzingade, code blocks invert their colors in dark mode because syntax highlighting doesn't take dark mode into account and essentially hard-codes its colors. However, when we have a code block without syntax highlighting, it takes the text color from the page default, which does take into account dark mode. So two possible directions to go here could be:

• when there is no language for the code block, override the page text color and use e.g. black so that it's white when inverted
• when there is no language for the code block, disable the filter: invert behaviour (and adjust the background color based on dark mode to match how the text works)

[piyushzingade]

Ok @limzykenneth I will look into it more and investigate it more

[piyushzingade]

Thank you @davepagurek for the context I will solve this as per the requirements

[piyushzingade]

@davepagurek @limzykenneth Can you help me to start this repo locally? I am getting errors while running locally cause there is no guide for running locally Please help!!!.

[davepagurek]

What kinds of errors are you getting?

Also, what version of Node are you using? I've seen some errors while accidentally on earlier versions. If I run node --version, I currently am on v18.20.4.

[piyushzingade]

My node version is v23.6.0 this is the latest one

[davepagurek]

Ok, probably not that then. After having run npm install, what errors do you see when you try to run npm run dev?

[piyushzingade]

p5.js-website (main)$ npm run dev

p5.js-website@0.0.1 dev
astro dev

12:39:45 am [vite] Error when evaluating SSR module C:\Users\Piyush\gsoc\p5.js-website\astro.config.mjs: failed to import "astro-compress"
|- Error:
Something went wrong installing the "sharp" module

Cannot find module '../build/Release/sharp-win32-x64.node'
Require stack:

• C:\Users\Piyush\gsoc\p5.js-website\node_modules\astro-compress\node_modules\sharp\lib\sharp.js
• C:\Users\Piyush\gsoc\p5.js-website\node_modules\astro-compress\node_modules\sharp\lib\constructor.js
• C:\Users\Piyush\gsoc\p5.js-website\node_modules\astro-compress\node_modules\sharp\lib\index.js

Possible solutions:

• Install with verbose logging and look for errors: "npm install --ignore-scripts=false --foreground-scripts --verbose sharp"
• Install for the current win32-x64 runtime: "npm install --platform=win32 --arch=x64 sharp"
• Consult the installation documentation: https://sharp.pixelplumbing.com/install
  at Object. (C:\Users\Piyush\gsoc\p5.js-website\node_modules\astro-compress\node_modules\sharp\lib\sharp.js:37:9)
  at Module._compile (node:internal/modules/cjs/loader:1739:14)
  at Object..js (node:internal/modules/cjs/loader:1904:10)
  at Module.load (node:internal/modules/cjs/loader:1473:32)
  at Function._load (node:internal/modules/cjs/loader:1285:12)
  at TracingChannel.traceSync (node:diagnostics_channel:322:14)
  at wrapModuleLoad (node:internal/modules/cjs/loader:234:24)
  at Module.require (node:internal/modules/cjs/loader:1495:12)
  at require (node:internal/modules/helpers:135:16)
  at Object. (C:\Users\Piyush\gsoc\p5.js-website\node_modules\astro-compress\node_modules\sharp\lib\constructor.js:11:1)

[astro] Unable to load your Astro config

Something went wrong installing the "sharp" module

Cannot find module '../build/Release/sharp-win32-x64.node'
Require stack:

• C:\Users\Piyush\gsoc\p5.js-website\node_modules\astro-compress\node_modules\sharp\lib\sharp.js
• C:\Users\Piyush\gsoc\p5.js-website\node_modules\astro-compress\node_modules\sharp\lib\constructor.js
• C:\Users\Piyush\gsoc\p5.js-website\node_modules\astro-compress\node_modules\sharp\lib\index.js

Possible solutions:

• Install with verbose logging and look for errors: "npm install --ignore-scripts=false --foreground-scripts --verbose sharp"

• Install for the current win32-x64 runtime: "npm install --platform=win32 --arch=x64 sharp"

• Consult the installation documentation: https://sharp.pixelplumbing.com/install
  Hint:
  Browser APIs are not available on the server.

  If the code is in a framework component, try to access these objects after rendering using lifecycle methods or use a client:only directive to make the component exclusively run on the client.

  See https://docs.astro.build/en/guides/troubleshooting/#document-or-window-is-not-defined for more information.

  Stack trace:
  at Object. (C:\Users\Piyush\gsoc\p5.js-website\node_modules\astro-compress\node_modules\sharp\lib\sharp.js:37:9)
  at Object..js (node:internal/modules/cjs/loader:1904:10)
  at Function._load (node:internal/modules/cjs/loader:1285:12)
  at wrapModuleLoad (node:internal/modules/cjs/loader:234:24)
  at require (node:internal/modules/helpers:135:16)

I see this error while running command npm run dev

[davepagurek]

Any luck trying this suggestion? https://stackoverflow.com/a/66995768

[piyushzingade]

Almost Done with setting up locally but having issues with scss and importing some modules

[davepagurek]

What errors are you seeing?

[piyushzingade]

Deprecation Warning [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

More info and automated migrator: https://sass-lang.com/d/import

╷
1 │ @import "variables.scss";
│ ^^^^^^^^^^^^^^^^
╵
styles\global.scss 1:9 @import
src\components\Nav\styles.module.scss 2:9 root stylesheet

Deprecation Warning [legacy-js-api]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.

More info: https://sass-lang.com/d/legacy-js-api

Deprecation Warning [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

More info and automated migrator: https://sass-lang.com/d/import

╷
1 │ @import "./variables.scss";
│ ^^^^^^^^^^^^^^^^^^
╵
styles\base.scss 1:9 root stylesheet

Deprecation Warning [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

More info and automated migrator: https://sass-lang.com/d/import

╷
2 │ @import "./global.scss";
│ ^^^^^^^^^^^^^^^
╵
styles\base.scss 2:9 root stylesheet

Deprecation Warning [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

More info and automated migrator: https://sass-lang.com/d/import

╷
3 │ @import "./code-editor.scss";
│ ^^^^^^^^^^^^^^^^^^^^
╵
styles\base.scss 3:9 root stylesheet

Deprecation Warning [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

More info and automated migrator: https://sass-lang.com/d/import

╷
4 │ @import "./markdown.scss";
│ ^^^^^^^^^^^^^^^^^
╵
styles\base.scss 4:9 root stylesheet

Deprecation Warning [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

More info and automated migrator: https://sass-lang.com/d/import

╷
1 │ @import "variables.scss";
│ ^^^^^^^^^^^^^^^^
╵
styles\global.scss 1:9 @import
styles\base.scss 2:9 root stylesheet

Deprecation Warning [mixed-decls]: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in & {}.

More info: https://sass-lang.com/d/mixed-decls

╷
29 │ ┌ @media (min-width: $breakpoint-tablet) {
30 │ │ min-width: 220px;
31 │ │ }
│ └─── nested rule
32 │ color: var(--sidebar-type-color);
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
╵
styles\markdown.scss 32:5 @import
styles\base.scss 4:9 root stylesheet

Warning: 1 repetitive deprecation warnings omitted.

Deprecation Warning [legacy-js-api]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.

More info: https://sass-lang.com/d/legacy-js-api

01:15:48 [ERROR] Cannot find module 'C:\Users\Piyush\gsoc\p5.js-website\node_modules@uiw\react-codemirror\esm\useCodeMirror' imported from C:\Users\Piyush\gsoc\p5.js-website\node_modules@uiw\react-codemirror\esm\index.js
Stack trace:
at finalizeResolution (node:internal/modules/esm/resolve:275:11)
at defaultResolve (node:internal/modules/esm/resolve:984:11)
at #cachedDefaultResolve (node:internal/modules/esm/loader:640:25)
at ModuleLoader.getModuleJobForImport (node:internal/modules/esm/loader:276:38)
01:15:48 [ERROR] Cannot find module 'C:\Users\Piyush\gsoc\p5.js-website\node_modules@uiw\react-codemirror\esm\useCodeMirror' imported from C:\Users\Piyush\gsoc\p5.js-website\node_modules@uiw\react-codemirror\esm\index.js
Stack trace:
at finalizeResolution (node:internal/modules/esm/resolve:275:11)
at defaultResolve (node:internal/modules/esm/resolve:984:11)
at #cachedDefaultResolve (node:internal/modules/esm/loader:640:25)
at ModuleLoader.getModuleJobForImport (node:internal/modules/esm/loader:276:38)

[davepagurek]

Looks like those are all just warnings except for the last one, so we can ignore all those others. I haven't seen an error like that before, @limzykenneth have you?

[limzykenneth]

It looks like an incorrect module resolution, specifically some custom resolution is not running or code that needs custom resolution is not running through it. Try deleting node_modules and install again.

Also it is probably unlikely but maybe it being on Windows and uses backslash for folders may be confusing it, not sure though as I haven't tried running the site on a Windows machine before.

[piyushzingade]

So any suggestion on to solve this error ?

[piyushzingade]

Cannot find module 'C:\Users\Piyush\gsoc\p5.js-website\node_modules@uiw\react-codemirror\esm\useCodeMirror' imported from C:\Users\Piyush\gsoc\p5.js-website\node_modules@uiw\react-codemirror\esm\index.js

Now getting this error . I have remove the node_modules 2 to 3 times but still getting the same error and I have install @uiw/react-codemirror/esm locally many times but still not working @davepagurek @limzykenneth

[limzykenneth]

Might be related to this I'm not sure: uiwjs/react-codemirror#710

Can you try running on node 20, specifically I'm on 20.11.1 and it's working for me.

[piyushzingade]

Ok I will try

[piyushzingade]

C:\Users\Piyush\gsoc\p5.js-website\node_modules@uiw\react-codemirror\esm\index.js:1
import _extends from "@babel/runtime/helpers/extends";

Now getting this error
using 20.11.1 node version
@limzykenneth

[limzykenneth]

That doesn't look like the full error message, can you share more of what it shows?

[piyushzingade]

It is an syntax error

Stack Trace
C:\Users\Piyush\gsoc\p5.js-website\node_modules@uiw\react-codemirror\esm\index.js:1
import _extends from "@babel/runtime/helpers/extends";
^^^^^^

SyntaxError: Cannot use import statement outside a module
at wrapSafe (node:internal/modules/cjs/loader:1378:20)
at Module._compile (node:internal/modules/cjs/loader:1428:41)
at Module._extensions..js (node:internal/modules/cjs/loader:1548:10)
at Module.load (node:internal/modules/cjs/loader:1288:32)
at Module._load (node:internal/modules/cjs/loader:1104:12)
at cjsLoader (node:internal/modules/esm/translators:346:17)
at ModuleWrap. (node:internal/modules/esm/translators:286:7)
at ModuleJob.run (node:internal/modules/esm/module_job:234:25)
at async ModuleLoader.import (node:internal/modules/esm/loader:473:24)
at async nodeImport (file:///C:/Users/Piyush/gsoc/p5.js-website/node_modules/vite/dist/node/chunks/dep-CHZK6zbr.js:53058:15)
at async ssrImport (file:///C:/Users/Piyush/gsoc/p5.js-website/node_modules/vite/dist/node/chunks/dep-CHZK6zbr.js:52916:16)
at async eval (C:/Users/Piyush/gsoc/p5.js-website/src/components/CodeEmbed/index.jsx:5:31)
at async instantiateModule (file:///C:/Users/Piyush/gsoc/p5.js-website/node_modules/vite/dist/node/chunks/dep-CHZK6zbr.js:52974:5)

[piyushzingade]

@limzykenneth @davepagurek please
help

[limzykenneth]

I'm not entirely sure what is going on here as the errors don't make much sense to me. All of them seem to come from some modules in node_modules and not from any code we have directly. It might be to do with some local setup issue but I'm not sure what exactly.

[limzykenneth]

@davepagurek @ksen0 I've just tried to install and build the site on a Windows machine but I'm still unable to replicate the setup problem here, both npm install and then npm run dev works without problem for me. I'm on Windows 10 with a Winget installed node.js at version 22.

[limzykenneth]

@piyushzingade I think I'll fix this as we couldn't figure out how to get the build running on your machine. Feel free to report any more issues you found and checkout the main p5.js repo if you'd like to work on something else. Thanks!