Programmatically found broken internal links

Most appropriate sections of the p5.js website?

Other (specify if possible)

What is your operating system?

Mac OS

Web browser and version

not related to browsers

Actual Behavior

Broken links generate a 404

Expected Behavior

Links should serve the linked content

Steps to reproduce

Since I saw some reports of broken links in the website I tried a programmatic approach using broken-link-checker.

How to:

Edit: To make it easier to generate an overview I created a script that outputs GitHub flavored markdown. https://github.com/ff6347/find-broken-links

npm install broken-link-checker
npx blc -roe https://p5js.org > report-blc-prod-live.txt

# The flags do the following
# --exclude-external, -e  Will not check external links.
# --ordered, -o           Maintain the order of links as they appear in their HTML document.
# --recursive, -r         Recursively scan ("crawl") the HTML document(s).

The output needs some cleaning using regular expressions afterwards.

Remove all reports that are okay:

^├───OK───.*?$\n

Then remove all reports of urls that have no broken links:

^Getting links from:.*?$\nFinished! \d{1,1000} links found. \d{1,1000} excluded. 0 broken.

Fix some reports where there is no new line between the report and the next.

look for:

broken\.\n(\w)

Replace with:

broken.\n\n$1

These three should do most of the grunt work. There are some false positive reports about images that I removed manually at the end.

---

Here is what I've found:

Low Hanging Fruits

There are some links in footer and reference that create 301 redirects which can be avoided through small tweaks.

These are the lines that need a trailing slash:

• /src/components/Footer/index.astro#L29-L47
• /src/components/PageHeader/ItemPage.astro#L24
• /src/components/ReferenceDirectoryWithFilter/index.tsx#L127

Generally these are neglect-able, but a HEAD request against them returns a 301 HTTP response. This could be fixed since it is a low hanging fruit.

301 redirects

There are many links in the reference generated form the JSDoc comments in the source of p5.js that are lacking the trailing slash and generate a 301 HTTP redirect. These need some manual labor in the source code. This is a bit tedious work. It should not be a problem keeping this as is since the site-host + Astro take care of the redirects.

Broken Links

There are some broken links also generated from the JSDoc that need fixing and I found broken links in the tutorials. They are hard-coded into the .mdx files and need to be fixed one by one.

Next Steps

IMO the next steps should be

• creating separate issues for these since fixing it just based on this list is error prone.
• check external links as well when the internal ones are fixed.

---

Below you can find the report

report created: Fri, 13 Sep 2024 11:06:07 GMT

• https://p5js.org/contribute/friendly_error_system/

  • _friendlyFileLoadError() | https://p5js.org/contribute/friendly_error_system/fes_contribution_guide.md#_friendlyerror
  • _validateParameters() | https://p5js.org/contribute/friendly_error_system/fes_contribution_guide.md#_validateparameters
  • Dev Notes | https://p5js.org/contribute/friendly_error_system/fes_contribution_guide.md#-development-notes

• https://p5js.org/contribute/release_process/

  • “New p5.js release” | https://p5js.org/contribute/.github/workflows/release.yml

• https://p5js.org/contribute/steward_guidelines/

  • p5.js’ design principles | https://p5js.org/contribute/contributor_guidelines.md#software-design-principles
  • design principles | https://p5js.org/contribute/contributor_guidelines.md#software-design-principles
  • contributor’s guidelines | https://p5js.org/contribute/contributor_guidelines.md#working-on-p5js-codebase
  • ../tasks/build/eslint-samples.js | https://p5js.org/contribute/tasks/build/eslint-samples.js
  • ../tasks/build/browserify.js | https://p5js.org/contribute/tasks/build/browserify.js
  • ../tasks/test/mocha-chrome.js | https://p5js.org/contribute/tasks/test/mocha-chrome.js

• https://p5js.org/contribute/webgl_mode_architecture/

  • null | https://p5js.org/contribute/webgl_mode_architecture/images/line-diagram.svg
  • null | https://p5js.org/contribute/webgl_mode_architecture/images/joins.svg
  • null | https://p5js.org/contribute/webgl_mode_architecture/images/caps.svg
  • null | https://p5js.org/contribute/webgl_mode_architecture/images/flags.svg

• https://p5js.org/examples/imported-media-video-canvas/

  • Video | https://p5js.org/examples/dom-video.html

• https://p5js.org/examples/imported-media-video-capture/

  • Video | https://p5js.org/examples/dom-video.html
  • Video Canvas | https://p5js.org/examples/dom-video-canvas.html

• https://p5js.org/examples/imported-media-video/

  • Video Canvas | https://p5js.org/examples/dom-video-canvas.html

• https://p5js.org/people/

  • Ryan Slade | https://p5js.org/people/rdslade.github.io

• https://p5js.org/reference/console/log/

  • console.log | https://p5js.org/reference/p5/console/log
  • string | https://p5js.org/reference/p5/string

• https://p5js.org/reference/JSON/stringify/

  • string | https://p5js.org/reference/p5/string

• https://p5js.org/reference/p5.sound/p5.Oscillator/

  • p5.SinOsc | https://p5js.org/reference/p5.SinOsc
  • p5.TriOsc | https://p5js.org/reference/p5.TriOsc
  • p5.SqrOsc | https://p5js.org/reference/p5.SqrOsc
  • p5.SawOsc | https://p5js.org/reference/p5.SawOsc

• https://p5js.org/reference/p5.Table/addColumn/

  • addColumn() | https://p5js.org/reference/p5/addColumn

• https://p5js.org/reference/p5.Table/addRow/

  • addRow() | https://p5js.org/reference/p5/addRow

• https://p5js.org/reference/p5.Table/removeColumn/

  • removeColumn() | https://p5js.org/reference/p5/removeColumn

• https://p5js.org/reference/p5.Table/rows/

  • getRows() | https://p5js.org/reference/p5/getRows

• https://p5js.org/reference/p5/blue/

  • colorMode() | https://p5js.org/reference/colorMode

• https://p5js.org/reference/p5/brightness/

  • colorMode() | https://p5js.org/reference/colorMode

• https://p5js.org/reference/p5/createFilterShader/

  • Introduction to Shaders | https://p5js.org/learn/getting-started-in-webgl-shaders.html

• https://p5js.org/reference/p5/describe/

  • Writing accessible canvas descriptions | https://p5js.org/learn/accessible-labels.html

• https://p5js.org/reference/p5/describeElement/

  • Writing accessible canvas descriptions | https://p5js.org/learn/accessible-labels.html

• https://p5js.org/reference/p5/endShape/

  • writing a custom shader | https://p5js.org/learn/getting-started-in-webgl-shaders.html

• https://p5js.org/reference/p5/green/

  • colorMode() | https://p5js.org/reference/colorMode

• https://p5js.org/reference/p5/gridOutput/

  • Writing accessible canvas descriptions | https://p5js.org/learn/accessible-labels.html

• https://p5js.org/reference/p5/gt/

  • > | https://p5js.org/reference/p5/%3E

• https://p5js.org/reference/p5/gte/

  • >= | https://p5js.org/reference/p5/%3E=

• https://p5js.org/reference/p5/hue/

  • colorMode() | https://p5js.org/reference/colorMode

• https://p5js.org/reference/p5/image/

  • p5.Texture | https://p5js.org/reference/p5/p5.Texture
  • p5.FramebufferTexture | https://p5js.org/reference/p5/p5.FramebufferTexture

• https://p5js.org/reference/p5/lerpColor/

  • lerp | https://p5js.org/reference/lerp
  • colorMode() | https://p5js.org/reference/colorMode

• https://p5js.org/reference/p5/lightness/

  • colorMode() | https://p5js.org/reference/colorMode

• https://p5js.org/reference/p5/lt/

  • << a=""> evaluates to true if the left value is less than the right value. | https://p5js.org/reference/p5/%3C

• https://p5js.org/reference/p5/lte/

  • <=< a=""> evaluates to true if the left value is less than or equal to the right value. | https://p5js.org/reference/p5/%3C=

• https://p5js.org/reference/p5/model/

  • loadGeometry() | https://p5js.org/reference/p5/loadGeometry

• https://p5js.org/reference/p5/p5.Table/

  • getRows() | https://p5js.org/reference/p5/getRows
  • addRow() | https://p5js.org/reference/p5/addRow
  • addColumn() | https://p5js.org/reference/p5/addColumn
  • removeColumn() | https://p5js.org/reference/p5/removeColumn

• https://p5js.org/reference/p5/red/

  • colorMode() | https://p5js.org/reference/colorMode

• https://p5js.org/reference/p5/saturation/

  • colorMode() | https://p5js.org/reference/colorMode

• https://p5js.org/reference/p5/textOutput/

  • Writing accessible canvas descriptions | https://p5js.org/learn/accessible-labels.html

• https://p5js.org/reference/p5/WEBGL/

  • the learn page about coordinates and transformations | https://p5js.org/learn/getting-started-in-webgl-coords-and-transform.html
  • the learn page about custom geometry | https://p5js.org/learn/getting-started-in-webgl-custom-geometry.html
  • the learn page for styling and appearance | https://p5js.org/learn/getting-started-in-webgl-appearance.html
  • the learn page section about cameras | https://p5js.org/learn/getting-started-in-webgl-appearance.html#camera
  • introduction to shaders | https://p5js.org/learn/getting-started-in-webgl-shaders.html
  • all the interactive WEBGL tutorials | https://p5js.org/learn/#:~:text=Getting%20Started%20in%20WebGL

• https://p5js.org/tutorials/color-gradients/

  • createButton() | https://p5js.org/reference/p5/createbutton/
  • Color Radial Gradient Example | https://p5js.org/examples/color-radial-gradient.html

• https://p5js.org/tutorials/conditionals-and-interactivity/

  • Variables and Motion Tutorial | https://p5js.org/tutorials/variables-and-motion/
  • logical operators | https://p5js.org/examples/control-logical-operators.html

• https://p5js.org/tutorials/custom-geometry/

  • Styling and Appearance | https://p5js.org/tutorials/styling-and-appearance/

• https://p5js.org/tutorials/custom-shapes-and-smooth-curves/

  • Melody App | https://p5js.org/tutorials/melody-app-with-nodejs/

• https://p5js.org/tutorials/data-structure-garden/

  • Organizing Code with Functions | https://p5js.org/tutorials-organizing-code-with-functions/
  • Melody App | https://p5js.org/tutorials/melody-app/

• https://p5js.org/tutorials/get-started/

  • string | https://p5js.org/reference/p5/string/
  • Strings | https://p5js.org/reference/p5/string/
  • string | https://p5js.org/reference/p5/string/
  • strings | https://p5js.org/reference/p5/string/
  • string | https://p5js.org/reference/p5/string/

• https://p5js.org/tutorials/getting-started-with-nodejs/

  • Melody App | https://p5js.org/tutorials/melody-app-with-nodejs/
  • p5.Oscillator | https://p5js.org/reference/p5.Oscillator

• https://p5js.org/tutorials/how-to-optimize-your-sketches/

  • p5.Vector | https://p5js.org/reference/p5.Vector
  • p5.Vector | https://p5js.org/reference/p5.Vector

• https://p5js.org/tutorials/layered-rendering-with-framebuffers/

  • the createFramebuffer() documentation | https://p5js.org/reference/en/p5/createFramebuffer/
  • an example of Framebuffer depth blur | https://p5js.org/examples/3d-blur-using-framebuffer-depth.html
  • createFramebuffer() | https://p5js.org/reference/en/p5/createFramebuffer/

• https://p5js.org/tutorials/lights-camera-materials/

  • orbitControl() | https://p5js.org/reference/en/p5/orbitControl/
  • ambientLight() | https://p5js.org/reference/en/p5/ambientLight/
  • directionalLight() | https://p5js.org/reference/en/p5/directionalLight/
  • pointLight() | https://p5js.org/reference/en/p5/pointLight/
  • spotLight() | https://p5js.org/reference/en/p5/spotLight/
  • imageLight() | https://p5js.org/reference/en/p5/imageLight/
  • noLight() | https://p5js.org/reference/en/p5/noLight/
  • fill() | https://p5js.org/reference/en/p5/fill/
  • ambientMaterial() | https://p5js.org/reference/en/p5/ambientMaterial/
  • specularMaterial() | https://p5js.org/reference/en/p5/specularMaterial/
  • shininess() | https://p5js.org/reference/en/p5/shininess/
  • emissiveMaterial() | https://p5js.org/reference/en/p5/emissiveMaterial/

• https://p5js.org/tutorials/repeating-with-loops/

  • Variables and Motion | https://p5js.org/tutorials/variables-and-motion/

• https://p5js.org/tutorials/responding-to-inputs/

  • Conditions and Interactivity | https://p5js.org/tutorials/conditions-and-interactivity/

• https://p5js.org/tutorials/setting-up-your-environment/

  • 2D Primitive shapes | https://p5js.org/referencegroup-Shape/
  • using the p5.js Web Editor with a screen reader. | https://p5js.org/tutorials/using-web-editor-with-screen-reader/
  • How to Use the p5.js Web Editor with a Screen Reader | https://p5js.org/tutorials/using-web-editor-with-screen-reader/
  • color | https://p5js.org/referencegroup-Color/

• https://p5js.org/tutorials/simple-melody-app/

  • p5.Oscillator | https://p5js.org/reference/p5.Oscillator
  • p5.Oscillator | https://p5js.org/reference/p5.Oscillator
  • p5.Oscillator | https://p5js.org/reference/p5.Oscillator
  • p5.Oscillator | https://p5js.org/reference/p5.Oscillator
  • p5.Oscillator | https://p5js.org/reference/p5.Oscillator
  • p5.Oscillator | https://p5js.org/reference/p5.Oscillator
  • p5.Oscillator | https://p5js.org/reference/p5.Oscillator
  • p5.Oscillator | https://p5js.org/reference/p5.Oscillator
  • p5.Oscillator | https://p5js.org/reference/p5.Oscillator
  • p5.Oscillator | https://p5js.org/reference/p5.Oscillator
  • p5.Oscillator | https://p5js.org/reference/p5.Oscillator
  • p5.Oscillator | https://p5js.org/reference/p5.Oscillator
  • p5.Oscillator | https://p5js.org/reference/p5.Oscillator
  • p5.Oscillator | https://p5js.org/reference/p5.Oscillator
  • p5.Element | https://p5js.org/reference/p5.Element
  • DOM objects | https://p5js.org/referencegroup-DOM/

• https://p5js.org/tutorials/speak-with-your-hands/

  • Recursive Tree | https://p5js.org/examples/07_Repetition/05_Recursive_Tree/
  • Smoke Particles | https://p5js.org/examples/15_Math_And_Physics/03_Smoke_Particle_System/
  • Interactivity in p5.js | https://p5js.org/tutorial/conditionals-and-interactivity/

• https://p5js.org/tutorials/variables-and-change/

  • frameCount | https://p5js.org/reference/p5/framecount/
  • frameCount | https://p5js.org/reference/p5/framecount/

Would you like to work on the issue?

yes

Start with the broken-link-checker report and the referenced files: src/components/Footer/index.astro, src/components/PageHeader/ItemPage.astro, and src/components/ReferenceDirectoryWithFilter/index.tsx. Review the unchecked links in the documentation and tutorial sources, then run the reported npx blc command against https://p5js.org. Done means the assigned internal links serve their intended content without 404 responses.