From a602fa9d016aee5bc55aa4cbded47a15b50e0fdb Mon Sep 17 00:00:00 2001 From: EscapedGibbon Date: Wed, 19 Jun 2024 12:55:04 +0200 Subject: [PATCH 01/16] docs: add a text to the front page --- src/components/HomepageFeatures/index.tsx | 75 ------------------- .../HomepageFeatures/styles.module.css | 11 --- src/pages/index.tsx | 20 +++-- 3 files changed, 15 insertions(+), 91 deletions(-) delete mode 100644 src/components/HomepageFeatures/index.tsx delete mode 100644 src/components/HomepageFeatures/styles.module.css diff --git a/src/components/HomepageFeatures/index.tsx b/src/components/HomepageFeatures/index.tsx deleted file mode 100644 index 9cf884bb..00000000 --- a/src/components/HomepageFeatures/index.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import MountainIcon from '@site/static/img/undraw_docusaurus_mountain.svg'; -import ReactIcon from '@site/static/img/undraw_docusaurus_react.svg'; -import TreeIcon from '@site/static/img/undraw_docusaurus_tree.svg'; -import clsx from 'clsx'; -import React, { ComponentProps, ComponentType } from 'react'; - -import styles from './styles.module.css'; - -type FeatureItem = { - title: string; - Svg: ComponentType>; - description: JSX.Element; -}; - -const FeatureList: FeatureItem[] = [ - { - title: 'Easy to Use', - Svg: MountainIcon, - description: ( - <> - Docusaurus was designed from the ground up to be easily installed and - used to get your website up and running quickly. - - ), - }, - { - title: 'Focus on What Matters', - Svg: TreeIcon, - description: ( - <> - Docusaurus lets you focus on your docs, and we'll do the chores. Go - ahead and move your docs into the docs directory. - - ), - }, - { - title: 'Powered by React', - Svg: ReactIcon, - description: ( - <> - Extend or customize your website layout by reusing React. Docusaurus can - be extended while reusing the same header and footer. - - ), - }, -]; - -function Feature({ title, Svg, description }: FeatureItem) { - return ( -
-
- -
-
-

{title}

-

{description}

-
-
- ); -} - -export default function HomepageFeatures(): JSX.Element { - return ( -
-
-
- {FeatureList.map((props, idx) => ( - // eslint-disable-next-line react/no-array-index-key - - ))} -
-
-
- ); -} diff --git a/src/components/HomepageFeatures/styles.module.css b/src/components/HomepageFeatures/styles.module.css deleted file mode 100644 index b248eb2e..00000000 --- a/src/components/HomepageFeatures/styles.module.css +++ /dev/null @@ -1,11 +0,0 @@ -.features { - display: flex; - align-items: center; - padding: 2rem 0; - width: 100%; -} - -.featureSvg { - height: 200px; - width: 200px; -} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index d5c586ac..3950beaf 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,6 +1,5 @@ import Link from '@docusaurus/Link'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; -import HomepageFeatures from '@site/src/components/HomepageFeatures'; import Layout from '@theme/Layout'; import clsx from 'clsx'; import React from 'react'; @@ -14,12 +13,24 @@ function HomepageHeader() {

{siteConfig.title}

{siteConfig.tagline}

+

+ ImageJS is a JavaScript library designed to facilitate image + processing and manipulation.ImageJS provides a wide range of features + for developers to enhance, analyze, and transform images seamlessly. + It includes functions for common tasks such as resizing, cropping, + filtering, and color adjustments, all performed client-side without + the need for server-side processing. This makes it an ideal tool for + web applications that require real-time image editing capabilities. + ImageJS is optimized for performance, ensuring quick and efficient + operations even with high-resolution images, and is easy to integrate + into existing projects with its intuitive API. +

- Docusaurus Tutorial - 5min ⏱️ + Let's get started.
@@ -31,12 +42,11 @@ export default function Home(): JSX.Element { const { siteConfig } = useDocusaurusContext(); return ( -
- +
); From b5d4a617a94dc88681100846c4d9ae93f88ebbfb Mon Sep 17 00:00:00 2001 From: EscapedGibbon Date: Wed, 19 Jun 2024 16:37:04 +0200 Subject: [PATCH 02/16] docs: remove unnecessary links --- docusaurus.config.js | 18 ------------------ 1 file changed, 18 deletions(-) diff --git a/docusaurus.config.js b/docusaurus.config.js index 4a499d45..12511d6a 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -141,23 +141,6 @@ const config = { }, ], }, - { - title: 'Community', - items: [ - { - label: 'Stack Overflow', - href: 'https://stackoverflow.com/questions/tagged/docusaurus', - }, - { - label: 'Discord', - href: 'https://discordapp.com/invite/docusaurus', - }, - { - label: 'Twitter', - href: 'https://twitter.com/docusaurus', - }, - ], - }, { title: 'More', items: [ @@ -168,7 +151,6 @@ const config = { ], }, ], - copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`, }, prism: { theme: lightCodeTheme, From ae343fb3f25ca3c16a0bbf5a3d5cdf266bfb624a Mon Sep 17 00:00:00 2001 From: EscapedGibbon Date: Wed, 19 Jun 2024 16:46:46 +0200 Subject: [PATCH 03/16] docs wip add css to footer and header --- src/css/custom.css | 10 ++++++++++ src/pages/index.tsx | 7 +++++-- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/src/css/custom.css b/src/css/custom.css index c5228bbe..e9dfae7e 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -28,6 +28,16 @@ --ifm-color-primary-lightest: #4fddbf; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); } +#frontPage { + min-height: 85vh; + width: 100%; + height: 100%; +} +.footer { + min-height: 15vh; + width: 100%; + height: auto; +} button { background: none; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 3950beaf..917b3b2f 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -9,7 +9,10 @@ import styles from './index.module.css'; function HomepageHeader() { const { siteConfig } = useDocusaurusContext(); return ( -
+

{siteConfig.title}

{siteConfig.tagline}

@@ -45,7 +48,7 @@ export default function Home(): JSX.Element { title={`Welcome to ${siteConfig.title}`} description="Description will go into a meta tag in " > -
+
From ac32cd96e7dc6e8c73acf6b9fe747be1c5577f43 Mon Sep 17 00:00:00 2001 From: EscapedGibbon Date: Tue, 25 Jun 2024 20:15:35 +0200 Subject: [PATCH 04/16] docs: add links to front page --- src/pages/index.module.css | 2 ++ src/pages/index.tsx | 19 +++++++++++++++++-- 2 files changed, 19 insertions(+), 2 deletions(-) diff --git a/src/pages/index.module.css b/src/pages/index.module.css index 9f71a5da..7d3fbfb1 100644 --- a/src/pages/index.module.css +++ b/src/pages/index.module.css @@ -18,6 +18,8 @@ .buttons { display: flex; + flex-direction: column; align-items: center; justify-content: center; + gap: 10px; } diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 917b3b2f..684dc371 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -18,7 +18,7 @@ function HomepageHeader() {

{siteConfig.tagline}

ImageJS is a JavaScript library designed to facilitate image - processing and manipulation.ImageJS provides a wide range of features + processing and manipulation. ImageJS provides a wide range of features for developers to enhance, analyze, and transform images seamlessly. It includes functions for common tasks such as resizing, cropping, filtering, and color adjustments, all performed client-side without @@ -28,12 +28,27 @@ function HomepageHeader() { operations even with high-resolution images, and is easy to integrate into existing projects with its intuitive API.

+
- Let's get started. + Getting started + + + + Tutorials + + + + Features
From dcc4f07f768b87c89ef546cef8f8c5464ff93075 Mon Sep 17 00:00:00 2001 From: EscapedGibbon Date: Tue, 25 Jun 2024 20:34:48 +0200 Subject: [PATCH 05/16] docs: add tagline --- docusaurus.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docusaurus.config.js b/docusaurus.config.js index 12511d6a..224099e3 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -42,7 +42,7 @@ async function demoLoaderPlugin() { /** @type {import('@docusaurus/types').Config} */ const config = { title: 'ImageJS', - tagline: 'Dinosaurs are cool', + tagline: 'Advanced image processing and manipulation in JavaScript.', favicon: 'img/favicon.ico', // Set the production url of your site here From cce1ffaefd36fbad7e39b5da76c17af141b4ef12 Mon Sep 17 00:00:00 2001 From: EscapedGibbon Date: Tue, 25 Jun 2024 21:00:54 +0200 Subject: [PATCH 06/16] docs: resolve broken links --- src/pages/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 684dc371..5ed25749 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -32,21 +32,21 @@ function HomepageHeader() {
Getting started Tutorials Features From 9bf581ccc299e4b1b95ea692b765d8f615ecfbde Mon Sep 17 00:00:00 2001 From: EscapedGibbon Date: Wed, 26 Jun 2024 10:15:39 +0200 Subject: [PATCH 07/16] docs: add links to main parts of documentation --- docusaurus.config.js | 24 ++++++++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/docusaurus.config.js b/docusaurus.config.js index 224099e3..71da799f 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -136,9 +136,29 @@ const config = { title: 'Docs', items: [ { - label: 'Tutorial', + label: 'Getting started', to: '/docs/Getting started', }, + { + label: 'Basics', + to: '/docs/Basics', + }, + { + label: 'Features', + to: '/docs/Features', + }, + { + label: 'Tutorials', + to: '/docs/Tutorials', + }, + { + label: 'Useful tips', + to: '/docs/Useful tips', + }, + { + label: 'Glossary', + to: '/docs/Glossary', + }, ], }, { @@ -146,7 +166,7 @@ const config = { items: [ { label: 'GitHub', - href: 'https://github.com/facebook/docusaurus', + href: 'https://github.com/image-js/image-js-typescript', }, ], }, From ba8de3057a2216f203d80fdae7cb2fce95d79612 Mon Sep 17 00:00:00 2001 From: EscapedGibbon Date: Wed, 26 Jun 2024 10:16:27 +0200 Subject: [PATCH 08/16] docs: edit the text --- src/css/custom.css | 5 +++++ src/pages/index.tsx | 22 ++++------------------ 2 files changed, 9 insertions(+), 18 deletions(-) diff --git a/src/css/custom.css b/src/css/custom.css index e9dfae7e..5d1cfb68 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -38,6 +38,11 @@ width: 100%; height: auto; } +p { + padding: 1rem; + max-width: 70%; + margin: auto; +} button { background: none; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 5ed25749..333f1cb9 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -21,9 +21,9 @@ function HomepageHeader() { processing and manipulation. ImageJS provides a wide range of features for developers to enhance, analyze, and transform images seamlessly. It includes functions for common tasks such as resizing, cropping, - filtering, and color adjustments, all performed client-side without - the need for server-side processing. This makes it an ideal tool for - web applications that require real-time image editing capabilities. + filtering, and color adjustments. +

+

ImageJS is optimized for performance, ensuring quick and efficient operations even with high-resolution images, and is easy to integrate into existing projects with its intuitive API. @@ -34,21 +34,7 @@ function HomepageHeader() { className="button button--secondary button--lg" to="docs/Getting started" > - Getting started - - - - Tutorials - - - - Features + Let's get started

From a13d72c6488fc9964fe5f87e2651175d1f78145c Mon Sep 17 00:00:00 2001 From: EscapedGibbon Date: Wed, 26 Jun 2024 10:19:47 +0200 Subject: [PATCH 09/16] docs: minor text fix --- src/pages/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 333f1cb9..d9f72ccb 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -18,9 +18,9 @@ function HomepageHeader() {

{siteConfig.tagline}

ImageJS is a JavaScript library designed to facilitate image - processing and manipulation. ImageJS provides a wide range of features - for developers to enhance, analyze, and transform images seamlessly. - It includes functions for common tasks such as resizing, cropping, + processing and manipulation. It provides a wide range of features for + developers to enhance, analyze, and transform images seamlessly. It + includes functions for common tasks such as resizing, cropping, filtering, and color adjustments.

From 5b589de0c406e5c29f3016125caa153d170e0a2a Mon Sep 17 00:00:00 2001 From: EscapedGibbon Date: Thu, 27 Jun 2024 23:57:39 +0200 Subject: [PATCH 10/16] docs: reformat text --- src/css/custom.css | 9 ++++++--- src/pages/index.tsx | 7 +------ 2 files changed, 7 insertions(+), 9 deletions(-) diff --git a/src/css/custom.css b/src/css/custom.css index 5d1cfb68..8bbb78a3 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -29,20 +29,23 @@ --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); } #frontPage { - min-height: 85vh; + min-height: 80vh; width: 100%; height: 100%; } .footer { - min-height: 15vh; + min-height: 20vh; width: 100%; height: auto; } p { padding: 1rem; - max-width: 70%; + max-width: 65%; margin: auto; } +.front_page__text { + font-size: 18px; +} button { background: none; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index d9f72ccb..3b30fe12 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -16,18 +16,13 @@ function HomepageHeader() {

{siteConfig.title}

{siteConfig.tagline}

-

+

ImageJS is a JavaScript library designed to facilitate image processing and manipulation. It provides a wide range of features for developers to enhance, analyze, and transform images seamlessly. It includes functions for common tasks such as resizing, cropping, filtering, and color adjustments.

-

- ImageJS is optimized for performance, ensuring quick and efficient - operations even with high-resolution images, and is easy to integrate - into existing projects with its intuitive API. -

Date: Fri, 28 Jun 2024 13:45:17 +0200 Subject: [PATCH 11/16] docs: add extra column to footer --- docusaurus.config.js | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/docusaurus.config.js b/docusaurus.config.js index 71da799f..c8cadfbd 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -147,6 +147,11 @@ const config = { label: 'Features', to: '/docs/Features', }, + ], + }, + { + title: 'Learn', + items: [ { label: 'Tutorials', to: '/docs/Tutorials', @@ -165,8 +170,12 @@ const config = { title: 'More', items: [ { - label: 'GitHub', - href: 'https://github.com/image-js/image-js-typescript', + label: 'API', + href: 'https://image-js.github.io/image-js-typescript/', + }, + { + label: 'Zakodium', + href: 'https://www.zakodium.com/', }, ], }, From b129005f9e1b023738984b25cd650b6c4f8c290b Mon Sep 17 00:00:00 2001 From: EscapedGibbon Date: Fri, 28 Jun 2024 13:46:41 +0200 Subject: [PATCH 12/16] docs: change css of the front page --- src/css/custom.css | 17 ++++++----------- src/pages/index.tsx | 2 +- 2 files changed, 7 insertions(+), 12 deletions(-) diff --git a/src/css/custom.css b/src/css/custom.css index 8bbb78a3..d0e051d6 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -29,22 +29,17 @@ --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); } #frontPage { - min-height: 80vh; width: 100%; height: 100%; } -.footer { - min-height: 20vh; - width: 100%; - height: auto; -} -p { - padding: 1rem; - max-width: 65%; +.frontPage__text { margin: auto; + max-width: 45%; + padding: 1em; } -.front_page__text { - font-size: 18px; + +.main-wrapper { + flex: 1 0 0; } button { diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 3b30fe12..efa68f5a 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -16,7 +16,7 @@ function HomepageHeader() {

{siteConfig.title}

{siteConfig.tagline}

-

+

ImageJS is a JavaScript library designed to facilitate image processing and manipulation. It provides a wide range of features for developers to enhance, analyze, and transform images seamlessly. It From 02c3d91d1bf2d9fdfac0bb98ee2c792de092829b Mon Sep 17 00:00:00 2001 From: EscapedGibbon Date: Fri, 28 Jun 2024 15:26:15 +0200 Subject: [PATCH 13/16] docs: return the github link --- docusaurus.config.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docusaurus.config.js b/docusaurus.config.js index c8cadfbd..83453968 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -170,8 +170,8 @@ const config = { title: 'More', items: [ { - label: 'API', - href: 'https://image-js.github.io/image-js-typescript/', + label: 'Github', + href: 'https://github.com/image-js/image-js-typescript', }, { label: 'Zakodium', From 2f895bc71ae51307ce3f44543f66cce52521c344 Mon Sep 17 00:00:00 2001 From: EscapedGibbon <101188881+EscapedGibbon@users.noreply.github.com> Date: Fri, 28 Jun 2024 15:57:51 +0200 Subject: [PATCH 14/16] docs: fix GitHub label Co-authored-by: Daniel Kostro --- docusaurus.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docusaurus.config.js b/docusaurus.config.js index 83453968..68b33d0c 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -170,7 +170,7 @@ const config = { title: 'More', items: [ { - label: 'Github', + label: 'GitHub', href: 'https://github.com/image-js/image-js-typescript', }, { From c472e7eed9a1ba7caec36befbeebb83a31be2045 Mon Sep 17 00:00:00 2001 From: EscapedGibbon Date: Mon, 1 Jul 2024 09:29:20 +0200 Subject: [PATCH 15/16] docs: add api reference link --- docusaurus.config.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docusaurus.config.js b/docusaurus.config.js index 68b33d0c..a53fdd35 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -173,6 +173,10 @@ const config = { label: 'GitHub', href: 'https://github.com/image-js/image-js-typescript', }, + { + label: 'API reference', + href: 'https://image-js.github.io/image-js-typescript/', + }, { label: 'Zakodium', href: 'https://www.zakodium.com/', From 65e9be7ec39ac480edd9e46a7872cd40404c7eb3 Mon Sep 17 00:00:00 2001 From: EscapedGibbon Date: Mon, 1 Jul 2024 18:37:23 +0200 Subject: [PATCH 16/16] docs: move API header link to the left --- docusaurus.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docusaurus.config.js b/docusaurus.config.js index a53fdd35..043517d0 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -125,7 +125,7 @@ const config = { { href: 'https://image-js.github.io/image-js-typescript/', label: 'API reference', - position: 'right', + position: 'left', }, ], },