feat: change logo and theme

docs/Basics/cannyEdgeMask.demo.tsx

@@ -1,6 +1,6 @@
-import { Image } from 'image-js';
+import type { Image } from 'image-js';
 
 export default function maskDemo(image: Image) {
-  let mask = image.grey().cannyEdgeDetector();
+  const mask = image.grey().cannyEdgeDetector();
   return mask;
 }

docs/Basics/image.demo.tsx

@@ -1,6 +1,6 @@
-import { Image } from 'image-js';
+import type { Image } from 'image-js';
 
 export default function ImageDemo(image: Image) {
-  let mask = image.invert();
+  const mask = image.invert();
   return mask;
 }

docs/Basics/thresholdMask.demo.tsx

@@ -1,6 +1,6 @@
-import { Image } from 'image-js';
+import type { Image } from 'image-js';
 
 export default function maskDemo(image: Image) {
-  let mask = image.grey().threshold();
+  const mask = image.grey().threshold();
   return mask;
 }

docs/Features/Filters/demos/blur.demo.tsx

@@ -1,4 +1,4 @@
-import { Image } from 'image-js';
+import type { Image } from 'image-js';
 
 export default function blur(image: Image) {
   return image.blur({ width: 3, height: 3 });

docs/Features/Filters/demos/derivative.demo.tsx

@@ -1,4 +1,4 @@
-import { Image } from 'image-js';
+import type { Image } from 'image-js';
 
 export default function derivativeFilter(image: Image) {
   image = image.grey();

docs/Features/Filters/demos/gaussianBlur.demo.tsx

@@ -1,4 +1,4 @@
-import { Image } from 'image-js';
+import type { Image } from 'image-js';
 
 export default function blur(image: Image) {
   return image.gaussianBlur({ sigma: 2 });

docs/Features/Filters/demos/gradient.demo.tsx

@@ -1,4 +1,4 @@
-import { Image } from 'image-js';
+import type { Image } from 'image-js';
 
 export default function gradientFilter(image: Image) {
   image = image.grey();

docs/Features/Filters/demos/grayscale.demo.tsx

@@ -1,4 +1,4 @@
-import { Image } from 'image-js';
+import type { Image } from 'image-js';
 
 export default function grey(image: Image) {
   return image.grey({ algorithm: 'luma601' });

docs/Features/Filters/demos/invert.demo.tsx

@@ -1,4 +1,4 @@
-import { Image } from 'image-js';
+import type { Image } from 'image-js';
 
 export default function invert(image: Image) {
   return image.invert();

docs/Features/Filters/demos/invert.mask.demo.tsx

@@ -1,4 +1,4 @@
-import { Mask } from 'image-js';
+import type { Mask } from 'image-js';
 
 export default function invert(mask: Mask) {
   return mask.invert();

docs/Features/Filters/demos/level.demo.tsx

@@ -1,4 +1,4 @@
-import { Image } from 'image-js';
+import type { Image } from 'image-js';
 
 export default function level(image: Image) {
   image = image.grey();

docs/Features/Filters/demos/median.demo.tsx

@@ -1,4 +1,4 @@
-import { Image } from 'image-js';
+import type { Image } from 'image-js';
 
 export default function median(image: Image) {
   return image.medianFilter({ borderType: 'constant', cellSize: 3 });

docs/Features/Filters/demos/pixelate.demo.tsx

@@ -1,4 +1,4 @@
-import { Image } from 'image-js';
+import type { Image } from 'image-js';
 
 export default function pixelate(image: Image) {
   return image.pixelate({ cellSize: 7 });

docs/Features/Geometry/demos/flip.demo.tsx

@@ -1,4 +1,4 @@
-import { Image } from 'image-js';
+import type { Image } from 'image-js';
 
 export default function derivativeFilter(image: Image) {
   return image.flip();

docs/Features/Geometry/demos/resize.demo.tsx

@@ -1,4 +1,4 @@
-import { Image } from 'image-js';
+import type { Image } from 'image-js';
 
 export default function resize(image: Image) {
   return image.resize({ xFactor: 2 });

docs/Features/Geometry/demos/rotate.demo.tsx

@@ -1,4 +1,4 @@
-import { Image } from 'image-js';
+import type { Image } from 'image-js';
 
 export default function resize(image: Image) {
   return image.rotate(90);

docs/Features/Geometry/demos/transform.demo.tsx

@@ -1,4 +1,4 @@
-import { Image } from 'image-js';
+import type { Image } from 'image-js';
 
 export default function transform(image: Image) {
   const imageMatrix = [

docs/Features/Geometry/demos/transformRotate.demo.tsx

@@ -1,4 +1,4 @@
-import { Image } from 'image-js';
+import type { Image } from 'image-js';
 
 export default function transformRotate(image: Image) {
   return image.transformRotate(25);

docs/Features/Morphology/demos/bottomHat.demo.tsx

@@ -1,4 +1,4 @@
-import { Image } from 'image-js';
+import type { Image } from 'image-js';
 
 export default function bottomHat(image: Image) {
   image = image.grey();

docs/Features/Morphology/demos/bottomHat.mask.demo.tsx

@@ -1,4 +1,4 @@
-import { Mask } from 'image-js';
+import type { Mask } from 'image-js';
 
 export default function bottomHat(mask: Mask) {
   return mask.bottomHat();

docs/Features/Morphology/demos/cannyEdgeDetector.demo.tsx

@@ -1,4 +1,4 @@
-import { Image } from 'image-js';
+import type { Image } from 'image-js';
 
 export default function cannyEdgeDetector(image: Image) {
   image = image.grey();

docs/Features/Morphology/demos/cannyEdgeDetector.mask.demo.tsx

@@ -1,4 +1,4 @@
-import { Mask } from 'image-js';
+import type { Mask } from 'image-js';
 
 export default function cannyEdgeDetector(mask: Mask) {
   return mask.morphologicalGradient();

docs/Features/Morphology/demos/close.demo.tsx

@@ -1,4 +1,4 @@
-import { Image } from 'image-js';
+import type { Image } from 'image-js';
 
 export default function close(image: Image) {
   image = image.grey();

docs/Features/Morphology/demos/close.mask.demo.tsx

@@ -1,4 +1,4 @@
-import { Mask } from 'image-js';
+import type { Mask } from 'image-js';
 
 export default function close(mask: Mask) {
   return mask.close();

docs/Features/Morphology/demos/dilate.demo.tsx

@@ -1,4 +1,4 @@
-import { Image } from 'image-js';
+import type { Image } from 'image-js';
 
 export default function dilate(image: Image) {
   image = image.grey();

docs/Features/Morphology/demos/dilate.mask.demo.tsx

@@ -1,4 +1,4 @@
-import { Mask } from 'image-js';
+import type { Mask } from 'image-js';
 
 export default function dilate(mask: Mask) {
   return mask.dilate();

docs/Features/Morphology/demos/erode.demo.tsx

@@ -1,4 +1,4 @@
-import { Image } from 'image-js';
+import type { Image } from 'image-js';
 
 export default function erode(image: Image) {
   image = image.grey();

docs/Features/Morphology/demos/erode.mask.demo.tsx

@@ -1,4 +1,4 @@
-import { Mask } from 'image-js';
+import type { Mask } from 'image-js';
 
 export default function erode(mask: Mask) {
   return mask.erode();

docs/Features/Morphology/demos/morphologicalGradient.demo.tsx

@@ -1,4 +1,4 @@
-import { Image } from 'image-js';
+import type { Image } from 'image-js';
 
 export default function morphologicalGradient(image: Image) {
   image = image.grey();

docs/Features/Morphology/demos/morphologicalGradient.mask.demo.tsx

@@ -1,4 +1,4 @@
-import { Mask } from 'image-js';
+import type { Mask } from 'image-js';
 
 export default function morphologicalGradient(mask: Mask) {
   return mask.morphologicalGradient();

docs/Features/Morphology/demos/open.demo.tsx

@@ -1,4 +1,4 @@
-import { Image } from 'image-js';
+import type { Image } from 'image-js';
 
 export default function open(image: Image) {
   image = image.grey();

docs/Features/Morphology/demos/open.mask.demo.tsx

@@ -1,4 +1,4 @@
-import { Mask } from 'image-js';
+import type { Mask } from 'image-js';
 
 export default function open(mask: Mask) {
   return mask.open();

docs/Features/Morphology/demos/topHat.demo.tsx

@@ -1,4 +1,4 @@
-import { Image } from 'image-js';
+import type { Image } from 'image-js';
 
 export default function topHat(image: Image) {
   image = image.grey();

docs/Features/Morphology/demos/topHat.mask.demo.tsx

@@ -1,4 +1,4 @@
-import { Mask } from 'image-js';
+import type { Mask } from 'image-js';
 
 export default function topHat(mask: Mask) {
   return mask.topHat();

docs/Features/Operations/demos/threshold.demo.tsx

@@ -1,4 +1,4 @@
-import { Image } from 'image-js';
+import type { Image } from 'image-js';
 
 export default function threshold(image: Image) {
   image = image.grey();

docusaurus.config.js

@@ -44,7 +44,7 @@ async function createConfig() {
   return {
     title: 'ImageJS',
     tagline: 'Advanced image processing and manipulation in JavaScript.',
-    favicon: 'img/favicon.ico',
+    favicon: 'img/image-js-favicon.svg',
 
     // Set the production url of your site here
     url: 'https://image-js-docs.pages.dev/',
@@ -123,11 +123,12 @@ async function createConfig() {
       ({
         // Replace with your project's social card
         image: 'img/docusaurus-social-card.jpg',
+        colorMode: {},
         navbar: {
           title: 'ImageJS',
           logo: {
             alt: 'ImageJS',
-            src: 'img/logo.svg',
+            src: 'img/image-js-favicon.svg',
           },
           items: [
             {

package.json

@@ -8,7 +8,7 @@
     "deploy": "docusaurus deploy",
     "docusaurus": "docusaurus",
     "cspell": "cspell lint \"**/*.md\"",
-    "eslint": "eslint --cache ./src",
+    "eslint": "eslint --cache ./src ./docs",
     "eslint-fix": "npm run eslint -- --fix",
     "prettier": "prettier --check ./",
     "prettier-write": "prettier --write ./",

src/css/custom.css

@@ -6,26 +6,26 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #2e8555;
-  --ifm-color-primary-dark: #29784c;
-  --ifm-color-primary-darker: #277148;
-  --ifm-color-primary-darkest: #205d3b;
-  --ifm-color-primary-light: #33925d;
-  --ifm-color-primary-lighter: #359962;
-  --ifm-color-primary-lightest: #3cad6e;
+  --ifm-color-primary: #1d4ed8;
+  --ifm-color-primary-dark: #1e40af;
+  --ifm-color-primary-darker: #1e3a8a;
+  --ifm-color-primary-darkest: #172554;
+  --ifm-color-primary-light: #2563eb;
+  --ifm-color-primary-lighter: #3b82f6;
+  --ifm-color-primary-lightest: #60a5fa;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
-  --ifm-color-primary: #25c2a0;
-  --ifm-color-primary-dark: #21af90;
-  --ifm-color-primary-darker: #1fa588;
-  --ifm-color-primary-darkest: #1a8870;
-  --ifm-color-primary-light: #29d5b0;
-  --ifm-color-primary-lighter: #32d8b4;
-  --ifm-color-primary-lightest: #4fddbf;
+  --ifm-color-primary: #0891b2;
+  --ifm-color-primary-dark: #0e7490;
+  --ifm-color-primary-darker: #155e75;
+  --ifm-color-primary-darkest: #083344;
+  --ifm-color-primary-light: #06b6d4;
+  --ifm-color-primary-lighter: #22d3ee;
+  --ifm-color-primary-lightest: #67e8f9;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
 #frontPage {

src/demo/components/ImageDemo.tsx

@@ -34,7 +34,7 @@ export default function ImageDemo({
     >
       <div style={{ display: 'inline-flex', flexDirection: 'column', gap: 4 }}>
         <div
-          className="filter-demo alert--success"
+          className="filter-demo alert--info"
           style={{
             margin: 4,
             borderRadius: 4,

src/demo/contexts/demo/demoReducer.ts

@@ -88,7 +88,7 @@ function getInitialState(initial: DemoInitialConfig): DemoState {
   return {
     selectedImage: null,
     selectedDevice: null,
-    addon: null,
+    addon: 'code',
     code: initial.initialCode,
     noAutoRun: initial.noAutoRun || false,
     name: initial.name,

src/pages/index.tsx

@@ -14,7 +14,12 @@ function HomepageHeader() {
       className={clsx('hero hero--primary', styles.heroBanner)}
     >
       <div className="container">
-        <h1 className="hero__title">{siteConfig.title}</h1>
+        <img
+          alt="image-js logo"
+          src="/img/image-js.svg"
+          width={200}
+          height={200}
+        />
         <p className="hero__subtitle">{siteConfig.tagline}</p>
         <p className="frontPage__text">
           ImageJS is a JavaScript library designed to facilitate image