cdnjs / static-website

🖥 New Vue/Nuxt website for cdnjs.com - The #1 free and open source CDN built to make life easier for developers.

The #1 free and open source CDN built to make life easier for developers.

---

cdnjs Website

Welcome to the cdnjs/static-website repository, the home of the new cdnjs website built with Vue & Nuxt, following the new cdnjs branding proposal from cdnjs/brand.

This website relies completely on the cdnjs API to operate, resulting in very low resource usage to serve the site and limited app logic to update data being used (only sitemaps have to be updated, everything else uses API calls when a page is loaded).

Getting Started

This project runs on Node.js. Please make sure you have a version installed that matches our defined requirement in the .nvmrc file for this project.

Included with this project is a dependency lock file. This is used to ensure that all installations of the project are using the same version of dependencies for consistency.

You can install the Node dependencies following this lock file by running:

npm ci

Once the dependencies are installed, the website is ready to run in development mode. To start Nuxt in development mode (without a custom server), run:

npm run dev

Development in Windows

Before running npm run dev, add a global npm package to resolve the 'NODE_ENV' is not recognized as an internal or external command issue:

npm install -g win-node-env

Analyzing Bundle

The website is build using Nuxt and relies on Webpack to generate the client-side bundle used to render the site and provide interactivity. Due to this, we can use Webpack's analyzer to better understand what is contributing to the size of the final bundle.

To run the analyzer, use the following package script:

npm run dev:analyze

Environment Variables

Site Base

When working with the site in development, using npm run dev or npm run dev:analyze, the SITE_HOST environment variable will be automatically set to be http://localhost:3000/, as this is where the site is made accessible by the dev script.

When deploying this site to production using the npm run build and npm run start scripts, the SITE_HOST environment variable must be set and should be the canonical base for where the site will be hosted. In production for us, this is set to https://cdnjs.com/.

Google Analytics

To enable Google Analytics for a deployment of the site, you should set the GA_ID environment variable. This should be set to the unique Google Analytics ID for your property, in the form UA-xxxxxxxxx-x.

Google Analytics is bundled with the site using the @nuxtjs/google-analytics module. If the environment variable is not specified, Google Analytics will not be bundled with the deployment.

Sentry Error Logging

To enable basic Sentry error logging, the SENTRY_DSN environment variable must be set with a valid DSN URL from Sentry.

To enable source maps & release tracking for error reporting in production, the SENTRY_ORG and SENTRY_PROJECT environment variables must be set with the correct Sentry project information, as well as SENTRY_AUTH_TOKEN being set to a valid auth token from Sentry. Source maps are used as in production we use minified, bundled JavaScript, so the sourcemaps allow Sentry to show where an error originated from in the source code.

Disallow in robots.txt

By default, during the build process a robots.txt file will be generated for the site that has User-agent: * and Allow: *. If you wish to have a more private instance of the site or want to prevent potential SEO contamination, you can set the ROBOTS_DISALLOW env var to be 1. This will change the Allow: * rule to be Disallow: /.

Sitemap generation

To enable sitemap generation for the site, NODE_ENV must be set to production. This will enable the initial sitemap generation during build as well as the background task for regenerating the sitemap during npm run start, every 30 minutes.

Further, by having NODE_ENV=production, this will also tell the robots.txt generation script, referenced above, to include a rule pointing to the sitemap index file, based on the provided SITE_HOST env var.

(Note that for npm run dev:analyze, npm run build & npm run start, NODE_ENV will be automatically set to production).

Production Deployment

To deploy this website to production, the following steps should be taken:

• Install dependencies with npm ci
• Build the site for production with npm run build
• Start the custom Express server with npm run start

For deployments to some PaaS hosts, the installation of dependencies and building the app will automatically be done, with npm run start being defined in the Procfile.

To change the port that the app binds to, set the PORT environment var when running the script.

The custom Express server is used to handle our sitemaps, as we have too many routes for Nuxt's sitemap offering to handle reliably. During the build step (npm run build) initial sitemaps will be generated. The Express server will then regenerate these every 30 minutes using the cdnjs API. A log containing the outcome of the last generation in Express is available at /sitemap-log.txt on the website.

Linting

Our full set of tests for linting can be run at any time with:

npm test

Included in this repository are an eslint config file as well as a sass-lint config file to help with ensuring a consistent style in the codebase for the JS/Vue and SCSS used in the app.

To help enforce this, we use both eslint and sass-lint in our testing. To run eslint at any time, which checks the code style of any JavaScript and Vue files, you can use:

npm run test:eslint

eslint also provides automatic fixing capabilities, these can be run against the codebase with:

npm run test:eslint:fix

Similarly, sass-lint can be run at any time to check the quality of all the SCSS files used in the app, by running:

npm run test:scss

A secondary package, sass-lint-auto-fix, is available to help with automatically fixing some of the errors raised by sass-lint, which can be run with:

npm run test:scss:fix

Like with npm test, which runs both eslint & sass-lint, a shorter package script is available to automatically attempt to fix issues from both linting packages, which can be used by running:

npm run test:fix

static-website's Issues

Handle filename/version being null

Both filename and version could be missing from the package data. If this is the case the website should not show a default file (copy buttons) in search results.

Generate sitemap correctly

The sitemap generation in the app is currently disabled, we need to resolve this and correctly generate a sitemap as a background task in the Express server before we can launch the site.

Create production branch

Feature request

Feature description

Currently, the site is deployed on Heroku directly from the master branch. We should create a new production branch and set Heroku to deploy from that, so that positive action is needed to start a deploy, pushing to the production branch.

How the feature is useful

Less risk of accidental deploys.

Static site generation?

For the webServer component of this repo, there is nothing within in that is truly dynamic. Searching is already handled completely client-side with Algolia and all package/tutorial pages are simply rendered when requested from a static template and in-memory data.

This could be moved so that all library pages, tutorial pages etc. are generated as static files with a build script, which would drastically reduce the memory usage for the app and would likely also improve response times.

If we moved the app fully static, we could even consider hosting it within this repo using GitHub Actions to build and GitHub Pages to host the content.

Add "Copy Tag Without SRI"

Feature request

Feature description

How the feature is useful

Not everyone needs SRI so Please Add/Leave "Copy Wittout SRI".
It's a must since a lot of people will be forced to remove SRI again and again. But for you is just a matter of 1 minute.
THX!!

DuckDuckGo !cdnjs search not working

I love the new look of the website, although i dont like how when i search in duckduckgo !cdnjs ____ that it just takes me to the homepage, whereas before it would actually search my query on cdnjs
thank you.

CDN Uptime status link

The website under Status column links to the CDN uptime monitor to http://stats.pingdom.com/4jg86a2wqei0?utm_source=cdnjs&utm_medium=cdnjs_link&utm_campaign=cdnjs_footer.

Its better to link the secure version instead, https://secure-stats.pingdom.com/4jg86a2wqei0.

Remove references to sponsor us page

As the sponsor us page currently doesn't exist and isn't needed for the initial launch, we should simply remove all references to it in the site currently.

Get content by (npm) TAG instead of VERSION

Feature request

Feature description

I would like to get a version of library by it's tag on NPM. Or a "tag to version" mapping so that smth like this can be implemented on usage side.
See https://www.jsdelivr.com/features for a possible API

How the feature is useful

This is useful e.g. for development purposes, e.g. "always use the latest beta for qs enviroment".

Update to Node.js 20 LTS

This repo currently runs on Node.js 16. It would be great to get this updated to Node.js 20.

This should be done in two steps, first updating to Node.js 18 + updating dependencies as appropriate, and then repeating the same to update to Node.js 20 + any dependency updates needed.

SSL error on cdnjs.cloudflare.com

Information

https://whatismybrowser.com/w/3HMWJ2G

Details

Description

When navigating to https://cdnjs.cloudflare.com/, it shows an SSL error. Previously it was redirected to cdnjs.com.

Steps to reproduce

1. Go to https://cdnjs.cloudflare.com/ in your browser
2. See the ERR_SSL_VERSION_OR_CIPHER_MISMATCH error

Expected behavior

301 redirect to cdnjs.com

Screenshots

Canonical URL always points to index

Hey 👋🏻

I've noticed that your canonical URL setup might be flawed:

First, the canonicalURLmeta tag doesn't exist (so it can be removed).

static-website/nuxt.config.js

Line 52 in 488427f

{ name: 'canonicalURL', content: base },

Second (and more important), the canonical URL always points to the root page while you usually want a self-referencing canonical link per page.

static-website/nuxt.config.js

Line 72 in 488427f

{ rel: 'canonical', href: base },

Create separate staging environment

Feature request

Feature description

Currently, the only way to test code before it is sent to production is to run the site locally. This isn't great, so we should create a new staging app on Heroku and a new staging branch in git that replicates the production setup to allow for easy testing.

How the feature is useful

Testing code before shipping to production.

Add Sentry to sponsors list

Feature request

Feature description

Add Sentry.io to the list of sponsors for cdnjs.

How the feature is useful

Sentry now sponsor cdnjs, they should be added.

Google Analytics

Feature request

Feature description

Remove Google Analytics

Hello! I regularly use CDNJS, so I felt like this is an issue I really should speak on.

I'm quite confused as to why this brilliant resource uses Google Analytics, which tracks people across the internet, becoming the subject of million-dollar lawsuits. I'm quite worried that we are setting a bad example here.

Personally, I think we, as a community, should research alternatives to Google Analytics.

Thanks! :D

Split API docs into individual pages

Feature request

Feature description

Currently the API docs are rather cumbersome to read through, being all on a single page. We should split the API docs into a page for each endpoint. A sidebar can then be provided on all the pages that allows for navigation through each endpoint.

The API docs homepage can then become a nice intro page, providing a summary for each endpoint we offer and links out to the pages. Further, it can also house the existing error response documentation.

How the feature is useful

Allows the API docs to be read and navigated far more easily.

Homepage utility

Hey guys, great work, much more consistent with some cool new UI tweaks.

I'd just add that I think the homepage experience has become less easy to use. I'd wager that the growth of cdnjs over the years was from making the homepage super minimal and focussed on utility.

The search bar is no longer the focus because the hero distracts from it and almost pushes the search bar below the fold on small laptops. (the search bar is also not autofoccused)

When searching on the new beta the results are definitely after the fold.

I've also personally always copied the url directly so displaying it in full I would personally prefer.

And then when looking at an individual library, it's harder to get a feel for the contents of the library and the line wraps on the url's make it a harder to scan.

I think you can drop Tutorials back below again because they aren't overly used.

In essence it looks and feels more like a product than a developer utility.

Keep it up!

Improve site responsiveness on tablet/mobile

Feature request

Feature description

The site works great but isn't overly responsive. We should improve the responsiveness of the site so that it works well on mobile devices as well as tablet devices and different desktop sizes.

How the feature is useful

Allows more folks to easily access and use the site.

Sponsors and members are displayed weirdly on the about page

Information

https://www.whatismybrowser.com/w/D9W69X9

Help request

Problem

The about page looks a bit weird, especially on tablets. It's just a long line of members and sponsors with a lot of space left on the right hand side (820x1180)

What I have tried

I tried using devtools to see if this is the case for other similar viewports as well and it seems like that's the case for screen width between $mobile: 768px; and $breakpoint: 960px;

Screenshots

Possible fixes(?)

I tried working on the issue and came up with a few changes for the website. Do let me know if it's acceptable so I can make a pr for it

• normal desktop
  
• breakpoint
  
• phones
  
  
• slight animation on hover
  

or:

something that's a bit more subtle than an entire bg color update

border: 1px solid $primary;

Code changes

• members

              .member {
                background: $primary;
                border-radius: $radius;
                display: flex;
                flex-direction: row;
                flex:  calc(50% - #{$whitespace});
                margin: 0 $whitespace $whitespace 0;
                padding: $whitespace;
                transition: all $transition-duration $transition-timing-function;
                
                &:hover {
                  background: $primary-hover;
                  transform: translateY(- calc($whitespace / 2));
                }

                @media screen and (max-width: $breakpoint) {
                  margin: 0 0 $whitespace 0;
                  &:nth-child(odd) {
                    margin-right: $whitespace;
                  }
                }

                @media screen and (max-width: $mobile-sm) {
                  flex-basis: 100%;
                  margin: 0 0 $whitespace 0;
                  &:nth-child(odd) {
                    margin-right: 0;
                  }
                }
              }

• sponsors

              @media screen and (max-width: $breakpoint) and (min-width: $mobile) {
                height: 200px;
                width: 200px;
                display: inline-flex;
                margin: 0 $whitespace $whitespace 0;
                img {
                  height: 100%;
                  object-fit: contain;
                  width: 100%;
                }
              }

I'm quite new to this so do let me know if I can make changes to suit your needs

Handle large (many files) libraries

Feature request

Feature description

On the library page for a library that has many files (such as material-design-icons, click at your own peril) we should not automatically load all the files in a version (server-side already has this logic) and instead should first show a warning to the user that the library has many files, and that loading them could cause performance issues for them. We should then provide a button to let them trigger loading the files for the version.

How the feature is useful

On the library page for a library that has many files (such as material-design-icons, click at your own peril) browsers often struggle to load the page, either locking up the tab and becoming unresponsive or sometimes the entire browser.

Not loadnig scripts

https://cdnjs.cloudflare.com/
net::ERR_SSL_VERSION_OR_CIPHER_MISMATCH

all sites do not work

Information

Details

Description

Steps to reproduce

Expected behavior

Screenshots

Build the sponsor us page

The sponsor us page is currently blank.
This should contain the basic info about how to sponsor us in two categories:

As an individual:

Donate via patreon or open collective, get involved on GitHub

As a company:

Donate, get involved on github, or email us if you have services you can offer that we might be interested in.

Animations are distracting

Please keep your website as it was. The new design has too much going and the UX is a little harder.

Add sourcemaps to production build

Feature request

Feature description

Add sourcemaps to the production build, so that they are publicly available on the website.

How the feature is useful

Some errors are being captured by Sentry in production, but due to the bundled code we can't get an understanable stack trace for where they are happening. Adding sourcemaps should help with this.

invalid link to snyk.io

Hello !
Sorry if I'm reporting this in the wrong place.
The page for sql.js displays "1 vulnerabilities" : https://cdnjs.com/libraries/sql.js

However, this information is incorrect, and the link is to the snyk.io page for the npm package sql, not sql.js : https://snyk.io/advisor/npm-package/sql?utm_medium=referral&utm_source=cdnjs&utm_campaign=snyk-widget

[Feature request] Not to index specific package

Feature request

Feature description

Not to index specific package

How the feature is useful

As an author of the package, I'd like to tell cdnjs that a certain package is obsolete, replaced, or just the author doesn't want it to be indexed by the search engines. This might be useful for the dev. experience so certain (obsolete, unmaintained, replaced...) packages won't be included in the search engine results. Therefore, there is a higher chance developer will use the best and up to date package for his/her needs.

Discussion: cdnjs/cdnjs#14062

Disable SRI for .map files

The website seems to display the ability to copy an SRI for .map files, however we don't generate the hash for .map files

Design changes/updates round 2

The initial design created by @AmNotADev is what is currently live in master and featured in cdnjs/brand.

Design work has begun on the second round of design changes to the site, though these are currently still being created in Figma.

Once ready, these changes can be developed in the design-v2 branch and eventually pulled into master once ready. This issue is simply to track progress on the design & then the implementation.

There is an Issue with user interface.

Information

https://www.whatismybrowser.com/w/DMTLL9Y
this link show that i have JavaScript enabled: No

as a proof
http://www.bom.gov.au/australia/radar/about/clickme.shtml

Details

There is an Issue with user interface.

Description

I searched for bootstrap 5 alpha and the list on "https://cdnjs.com/libraries/twitter-bootstrap/5.0.0-alpha1" page was not showing correct list.

Steps to reproduce

1. go to https://cdnjs.com/
2. search for "bootstrap" in search bar
3. select first option in results named "twitter-bootstrap @ 4.5.1"
4. select version "5.0.0-alpha 1" from version dropdown that go to "https://cdnjs.com/libraries/twitter-bootstrap/5.0.0-alpha1" link
5. then on that page click on "5.0.0-alpha1" from breadcrumb 'Home / Libraries / twitter-bootstrap / 5.0.0-alpha1'
6. after clicking when the page showed up the list on that page was not showing correctly.

this issue appear on all pages when u click on version from breadcrumb

Expected behavior

what i think the cdnJs link list should be displayed like this page "https://cdnjs.com/libraries/twitter-bootstrap"

Screenshots

Error page screenshot

Expected result screenshot

Move homepage searchbar higher up

Feature request

Feature description

Per #17, the searchbar on small screens is below the fold, which makes the site less usable than the old one. We can address this by moving the search bar higher up on the screen.

Apply a margin below the searchbox in its "resting" state, to help force the content up.

When focused, hide CTA text and move searchbar to top, showing more results.

How the feature is useful

Searchbar on homepage becomes far more useful.

Update 'Request Package' Links on Search Page

At /blob/master/components/search/primary_search.vue and therefore when searching, the links at the bottom point to this repository instead of cdnjs/packages for suggesting new packages and searching for package requests.

website responsiveness

hey just saw this issue in your website's responsiveness. peace out! 👍

new issue

Information

Help request

Problem

What I have tried

Screenshots

Move SITE_HOST & GA to env vars for production

Currently, the SITE_HOST environment variable is set in the package.json file as part of the scripts. As we move to deploy this site to production on cdnjs.com, we should move this to be an environment variable that needs to be set when the site is built/run.

Further, currently, we have a set GA code that is for cdnjs.dev. This needs to be different for the cdnjs.com deployment, so we should also pull this out into an environment variable. If this is not set, GA should be disabled.

Move website to use API data

We should look at moving the webServer part of this repostiory to using the cdnjs API when fetching library data. This can all be done client-side and means that the site could run without the need for the entire cdnjs package collection being in memory.

Encourage the usage of SRIs

We should encourage people to be secure, we often show the raw URLs and not the script tag with the SRI

d3 v4

Feature request

Feature description

How the feature is useful

update API field descriptions

• some reference package.min.js generation, which we are trying to move away from

Improve page load times

Feature request

Feature description

Improve the load times for uncached pages (not hitting Cloudflare cache) served by the Nuxt app.

How the feature is useful

Currently, page load speed is pretty slow and Google does not like this, nor do our users that have slower internet connections.

We can look at improving the cache configuration in Cloudflare, but this will only affect cached page requests. Uncached page requests will still make it through to the Nuxt app, which is incredibly slow.

Some ideas may be to add caching in front of Nuxt that caches rendered pages. Also, it may be worth looking at what API requests happen during the server-side render, and look at moving them to being client-side if they aren't needed for page meta data (which must be done server-side).

Update logos used in website background

Details

Description

The background graphic on the website currently uses some logos that we might not have correct permissions for. We should replace them with logos we know we are okay to use.

Steps to reproduce

View website.

Expected behavior

Assorted logo permissions:

• Vue.js: Unsure - https://forum.vuejs.org/t/logo-brand-source-of-truth-licensing/97873
• Bulma: Okay - jgthms/bulma#3003
• jQuery: Okay - https://brand.jquery.org/logos/
• Bootstrap: Okay - https://getbootstrap.com/docs/4.0/about/brand/
• FontAwesome: Okay - https://github.com/FortAwesome/Font-Awesome#license
• Angular: Okay - https://angular.io/presskit
• GSAP: Needs reaching out

Screenshots

https://github.com/cdnjs/static-website/blob/master/assets/img/bg.svg
https://github.com/cdnjs/brand/tree/master/illustrations/background

Document infrastructure and deployment logic

Hi

Looking at the code, I can't figure out where this is hosted and how new versions is deployed. I think CDNJS should be as transparent as possible, and documenting the infrastructure and deployment logic is part of that.

Investigate sitemap loading issues

Information

N/A

Details

Description

When requesting sitemap pages like https://cdnjs.com/sitemap-index.xml they aren't functioning as expected.

Steps to reproduce

Request https://cdnjs.com/sitemap-index.xml

Expected behavior

Valid XML is returned

Screenshots

N/A

Add author strip to bottom of tutorials

At the bottom of a tutorial currently, there is nothing. We should add an author stripe with the same info about the author as is in the header.

We should also link back to the library page (CTA: "Get started with ").

Eg: https://cdnjs.dev/libraries/vue/tutorials/wtf-is-vuex

Not loading website

Information

Help request

Problem

What I have tried

Screenshots

Race condition in suggest on the main page

Information

https://whatismybrowser.com/w/LG56TPW

Details

Description

When I quickly type library name in the main text form, the input is garbled.

Steps to reproduce

Open https://cdnjs.com/ and quickly type some library name like marked.
If the problem does not reproduce, add random latencies in the network communication.
Refresh the page and try again. Ensure you type the text quickly enough but don't copy-pasted it.

Expected behavior

No issue exists

Bad SEO

Hello,

The problem is SEO. There is missing description in Google but in Bing there is. When I browse your code I see:

<meta data-n-head="ssr" data-hid="description" name="description" content="Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 10% of websites, powered by Cloudflare. We make it faster and easier to load library files on your websites.">

So I don’t know where is the problem.

Status tooltip

The new site has a status indicator in the navbar. We should add a tooltip to this that shows the status description from the status page.

Search box autofocus

Feature request

Feature description

The search box should be focused automatically when you open the homepage

How the feature is useful

On the old version (if I remember correctly), I always open it up and start typing a query right away, it makes it way faster to do a search

Add Tyler to team list

Feature request

Feature description

@tc80 is now a core contributor to cdnjs, they should be added to the team list on /about.

@tc80, could you share the following info for the site:

• Image to use (profile, avatar, etc.)
• Name to display
• Twitter (if applicable)

How the feature is useful

Informational.

Please, make a "search" input in top of CNDjs Website (on any page)

It's frustrating, that when we enter on any specific page on site, we have at first to go to homepage, to make a search. In any decent site, there should be searchbar available on any page, not only on homepage.
please add that.
thanks