Showcase analysis: most common site customizations

[slorber]

Analyzing our site showcase

Let's use this issue to analyze our site showcase open-source sites and their CSS / swizzle customizations.

Interesting customizations can be reported here: #5468

Here's an exhaustive list to track progress and be able to split the work more easily.

We probably don't need to analyze deeply all those sites (particularly custom CSS), but if we can at least find some common patterns, that can be useful)

---

Sites with dedicated customization issues

For some sites, it's simpler to open an issue on the doc site directly so that a discussion can start with site maintainers.

• Ionic (source) ISSUE
• AgileTs (source) ISSUE

---

Exhaustive list

Not every site needs to be analyzed deeply, and we don't need to analyze all of them either.

Feel free to skip sites using an older version of Docusaurus, as the customizations are harder to inspect and less relevant.

• Algolia Docsearch (source)
• Datagit (source)
• Dyte (source)
• Eightshift (source)
• Ionic (source)
• IOTA-Wiki (source)
• Jest (source)
• QuestDB (source)
• React Native (source)
• Redis Labs Developer Site (source)
• Refine (source)
• Relay (source)
• Supabase (source)
• Verdaccio (source)
• WebdriverIO (source)
• 404Lab.Wiki (source)
• AgileTs (source)
• AI-Speaker (source)
• Apache APISIX (source)
• Apex FP (source)
• Astronomer (source)
• AttoBot (source)
• Awe framework (source)
• Axioms (source)
• Bandwidth (source)
• Benthos (source)
• Blink Shell (source)
• Blog Matheus Brunelli (source)
• blog.johnnyreilly.com (source)
• Blogasaurus (source)
• Botonic (source)
• BoxyHQ (source)
• Build Tracker (source)
• Butterfly (source)
• ClarityChallenge (source)
• Clutch (source)
• CodeYourFuture (source)
• ConfigCat Feature Flags (source)
• Console Table (source)
• Country State City API (source)
• Create React App (source)
• CryptoDevHub (source)
• CyberDrain Improved Partner Portal (CIPP) (source)
• Daily Digest - COVID-19 IN FRANCE (source)
• Darklang (source)
• Dart Code Metrics (source)
• DevSpace (source)
• Digital Support Services Notes (source)
• Dime.Scheduler (source)
• Discord Resources (source)
• Divine Web Service Framework (source)
• Djamaile Rahamat (source)
• Draft.js (source)
• Drayman (source)
• easy-dates (source)
• Easyjwt (source)
• Enarx (source)
• Eric JiuRan (source)
• Erxes (source)
• Eta (source)
• FBT (source)
• FireCMS (source)
• FirelordJS (source)
• Flagsmith (source)
• FlatifyCSS (source)
• FlexIt Analytics (source)
• Flipper (source)
• Flux (source)
• FoalTS (source)
• FormatJS (source)
• Froggit (source)
• Full Stack Chronicles (source)
• Ghostly (source)
• Gladys Assistant (source)
• Gotenberg (source)
• GTFS-to-HTML (source)
• Gulp (source)
• Haochen (source)
• Hashnode Support (source)
• Hermes (source)
• Home Assistant (source)
• icodex (source)
• Idb (source)
• IntelAGENT Billing (source)
• Joel PO (source)
• K3ai (source)
• KayaFolio (source)
• Khyron Realm (source)
• Kosko (source)
• Kotest (source)
• kube-green (source)
• KubeVela (source)
• Kuizuo's Personal Website (source)
• kwatch (source)
• LabVIEW 编程经验 (source)
• Leedom (source)
• Leon (source)
• Liqvid (source)
• LiveKit (source)
• Mailgo (source)
• MapillaryJS (source)
• Meli (source)
• Metro (source)
• MikroORM (source)
• moja global (source)
• Molecule (source)
• Motion Layout (source)
• nanos world (source)
• netboot.xyz (source)
• Netdata Learn (source)
• Neutron JS (source)
• NextAuth.js (source)
• Nocalhost (source)
• Node SerialPort (source)
• Nodify (source)
• Orbit.js (source)
• Orca (source)
• Ory (source)
• Oxidizer (source)
• Patrik Mäsiar (source)
• PcapPlusPlus (source)
• pdfme (source)
• Pearl UI (source)
• Pglet (source)
• Pipeline UI (source)
• Plausible Analytics (source)
• pnpm (source)
• Postgres.ai – Database Lab (source)
• Power's Wiki (source)
• PptxGenJS (source)
• PREFS (source)
• Profilo (source)
• Pyre (source)
• QA-Board (source)
• QuantCDN (source)
• Rainbond (source)
• React Complex Tree (source)
• React Native ARIA (source)
• React Native Boilerplate (source)
• React Native Elements (source)
• React Native iOS Kit (source)
• React Native Reanimated (source)
• React Native Render HTML (source)
• React Native Testing Library (source)
• React Navigation (source)
• React Redux (source)
• React-Leaflet (source)
• Realtime Web Applications Workshop (source)
• Redux (source)
• Redux Cool (source)
• Rematch (source)
• Remirror (source)
• Remotion (source)
• Repeater.js (source)
• replicad (source)
• Resoto (source)
• Rivalis (source)
• Rooks (source)
• RSocket (source)
• Runiac (source)
• Runlet (source)
• Saleor (source)
• SAP Cloud SDK (source)
• Sapphire (source)
• Sass Fairy (source)
• SCI WP Framework (source)
• SeaORM - 🐚 An async & dynamic ORM for Rust (source)
• Seven-innovation-base official website (source)
• Shabad OS (source)
• Shotstack (source)
• SICOPE Model (source)
• Single SPA (source)
• Smart Docs (source)
• smash.gg (source)
• social-embed (source)
• SODA for SPARC (source)
• Some Engineering Inc. (source)
• Spicetify (source)
• SpotifyAPI-NET (source)
• Stryker Mutator (source)
• Stylable (source)
• Synergies (source)
• T-Regx (source)
• TalentBrick (source)
• Taro (source)
• Tasit (source)
• TechHarvesting (source)
• Testing Library (source)
• Tinaël Devresse (source)
• ToolJet (source)
• Tremor (source)
• TRPG Engine (source)
• Tuist (source)
• uniforms (source)
• Unleash (source)
• Verida (source)
• Vue NodeGui (source)
• Wasp (source)
• Webiny (source)
• Whirl (source)
• WoodpeckerCI (source)
• Zowe (source)

---

Script used to generate this list:

console.log(
  sortedUsers
    .filter((user) => user.source)
    .map(
      (user) =>
        `- [ ] [${user.title}](${user.website}) ([source](${user.source}))`,
    )
    .join('\n'),
);

[Josh-Cena]

Made a little script to crawl these sites. Not sure how useful it is, but helped my make #6293

import Crawler from 'crawler';
import pico from 'picocolors';

const c = new Crawler({
  maxConnections: 10,
  callback(error, res, done) {
    if (error) {
    } else {
      const $ = res.$;
      if (!($("#__docusaurus").text())) {
        console.log(pico.red('FAIL: ' + res.options.uri));
      } else {
        console.log(pico.green('PASS: ' + res.options.uri));
      }
    }
    done();
  }
});

c.queue(sortedUsers.map((user) => user.website))

How are we going to do this? Should we just look into src/css/custom.css and src/theme and ignore sites that have neither?

[slorber]

Made a little script to crawl these sites. Not sure how useful it is, but helped my make #6293

Not strictly related to this issue but having such a script is definitively something we could maintain in the future. Being able to extract a static json from our showcase list could help to detect and maintain currently used version, language and a few features... probably worth opening a dedicated issue to brainstorm ideas.

---

How are we going to do this? Should we just look into src/css/custom.css and src/theme and ignore sites that have neither?

A good first step could be to check all sites that have neither of those yes 🤪

The remaining sites would have to be handled one by one.

We probably don't need to go through 100% of them for now, and just focus on the low hanging fruits

[slorber]

Started analyzing a few of those sites and started to open dedicated issues on site repos directly to start a discussion.

The original issue will be edited to link to those opened sub-issues.

For example here's one opened on the Ionic doc: ionic-team/ionic-docs#2295