diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index 1dca4e9..b458c7b 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -22,6 +22,7 @@ jobs: - name: Install dependencies run: npm install + - name: Build website run: npm run build diff --git a/.github/workflows/test-deploy.yml b/.github/workflows/test-deploy.yml index 38dc831..347dbaa 100644 --- a/.github/workflows/test-deploy.yml +++ b/.github/workflows/test-deploy.yml @@ -20,5 +20,6 @@ jobs: - name: Install dependencies run: npm install + - name: Test build website run: npm run build diff --git a/README.md b/README.md index 3b6045d..fa1bc70 100644 --- a/README.md +++ b/README.md @@ -16,6 +16,7 @@ Each page follows a basic structure to ensure that a user can easily find metada 1. The name of the design pattern. 1. Include extra used names or alternative names used just below the title itself. + 2. Each page needs a 'description' in the config, with a funny quote or otherwise short hook to get users engaged. 2. The group the design pattern belongs to. 1. Creational, Structural or Behavioral 3. Description diff --git a/docs/behavioral/_category_.yml b/docs/behavioral/_category_.yml new file mode 100644 index 0000000..6d7a57f --- /dev/null +++ b/docs/behavioral/_category_.yml @@ -0,0 +1,11 @@ +label: Behavioral +link: + type: generated-index + title: Behavioral Design Patterns + description: > + Behavioral are focussed on communication, the assignment of responsibilities between objects and complex transactions such as algorithms. + slug: /behavioral + keywords: + - design pattern + - behavioral + - software architecture diff --git a/docs/Behavioural/chain-of-responsibility.mdx b/docs/behavioral/chain-of-responsibility.mdx similarity index 100% rename from docs/Behavioural/chain-of-responsibility.mdx rename to docs/behavioral/chain-of-responsibility.mdx diff --git a/docs/Behavioural/command.mdx b/docs/behavioral/command.mdx similarity index 100% rename from docs/Behavioural/command.mdx rename to docs/behavioral/command.mdx diff --git a/docs/Behavioural/iterator.mdx b/docs/behavioral/iterator.mdx similarity index 100% rename from docs/Behavioural/iterator.mdx rename to docs/behavioral/iterator.mdx diff --git a/docs/Behavioural/mediator.mdx b/docs/behavioral/mediator.mdx similarity index 100% rename from docs/Behavioural/mediator.mdx rename to docs/behavioral/mediator.mdx diff --git a/docs/Behavioural/memento.mdx b/docs/behavioral/memento.mdx similarity index 100% rename from docs/Behavioural/memento.mdx rename to docs/behavioral/memento.mdx diff --git a/docs/Behavioural/observer.mdx b/docs/behavioral/observer.mdx similarity index 100% rename from docs/Behavioural/observer.mdx rename to docs/behavioral/observer.mdx diff --git a/docs/Behavioural/state.mdx b/docs/behavioral/state.mdx similarity index 100% rename from docs/Behavioural/state.mdx rename to docs/behavioral/state.mdx diff --git a/docs/Behavioural/strategy.mdx b/docs/behavioral/strategy.mdx similarity index 100% rename from docs/Behavioural/strategy.mdx rename to docs/behavioral/strategy.mdx diff --git a/docs/Behavioural/template-method.mdx b/docs/behavioral/template-method.mdx similarity index 100% rename from docs/Behavioural/template-method.mdx rename to docs/behavioral/template-method.mdx diff --git a/docs/Behavioural/visitor.mdx b/docs/behavioral/visitor.mdx similarity index 100% rename from docs/Behavioural/visitor.mdx rename to docs/behavioral/visitor.mdx diff --git a/docs/creational/_category_.yml b/docs/creational/_category_.yml new file mode 100644 index 0000000..c9fb2a0 --- /dev/null +++ b/docs/creational/_category_.yml @@ -0,0 +1,15 @@ +label: Creational +link: + type: generated-index + title: Creational Design Patterns + description: > + Creational design patterns are all about class instantiation or object + creation. These patterns can be further divided into class-creation patterns + and object-creational patterns. While class-creation patterns use inheritance + effectively in the instantiation process, object-creation patterns use + delegation to get the job done. + slug: /creational + keywords: + - design pattern + - creational + - software architecture diff --git a/docs/Creational/abstract-factory.mdx b/docs/creational/abstract-factory.mdx similarity index 100% rename from docs/Creational/abstract-factory.mdx rename to docs/creational/abstract-factory.mdx diff --git a/docs/Creational/builder.mdx b/docs/creational/builder.mdx similarity index 97% rename from docs/Creational/builder.mdx rename to docs/creational/builder.mdx index 2f566f2..3703e10 100644 --- a/docs/Creational/builder.mdx +++ b/docs/creational/builder.mdx @@ -1,6 +1,8 @@ --- title: Builder hide_title: true +description: > + Can we build? Yes we can! Do we need a Director? Maybe..? --- import { CreationalPatternTag } from "@site/src/components/pattern-page-features/pattern-alias-and-tag"; @@ -411,9 +413,9 @@ function BuilderDemo() { ``` ## 🔗Relations to other patterns -- The Builder pattern is often used in conjunction with the [Factory Method](/docs/Creational/factory-method) pattern, where the factory method creates a builder instance. -- You can combine [Builder](/docs/Creational/builder) with [Bridge](/docs/Structural/bridge): the director class plays the role of the abstraction, while different builders act as implementations. -- [Abstract Factories](/docs/Creational/abstract-factory), [Builders](/docs/Creational/builder), and [Prototype](/docs/Creational/prototype) can be implemented as [Singleton](/docs/Creational/singleton). +- The Builder pattern is often used in conjunction with the [Factory Method](/docs/creational/factory-method) pattern, where the factory method creates a builder instance. +- You can combine [Builder](/docs/creational/builder) with [Bridge](/docs/structural/bridge): the director class plays the role of the abstraction, while different builders act as implementations. +- [Abstract Factories](/docs/creational/abstract-factory), [Builders](/docs/creational/builder), and [Prototype](/docs/creational/prototype) can be implemented as [Singleton](/docs/creational/singleton). --- diff --git a/docs/Creational/factory-method.mdx b/docs/creational/factory-method.mdx similarity index 100% rename from docs/Creational/factory-method.mdx rename to docs/creational/factory-method.mdx diff --git a/docs/Creational/prototype.mdx b/docs/creational/prototype.mdx similarity index 91% rename from docs/Creational/prototype.mdx rename to docs/creational/prototype.mdx index 72e9f33..4cf64eb 100644 --- a/docs/Creational/prototype.mdx +++ b/docs/creational/prototype.mdx @@ -1,6 +1,8 @@ --- title: Prototype hide_title: true +description: > + Double the copies, double the fun. --- import { CreationalPatternTag } from "@site/src/components/pattern-page-features/pattern-alias-and-tag"; @@ -198,10 +200,10 @@ function PrototypeDemo() { ``` ## 🔗Relations to other patterns -- Designs that make heavy use of [Composite](/docs/Structural/composite.mdx) and [Decorator](/docs/Structural/decorator.mdx) can often benefit from using [Prototype](/docs/Creational/prototype). Applying the pattern lets you clone complex structures instead of re-constructing them from scratch. -- [Prototypes](/docs/Creational/prototype) can help when you need to save copies of [Commands](/docs/Behavioural/command.mdx) into history. -- [Abstract Factories](/docs/Creational/abstract-factory) classes are often based on a set of [Factory Methods](/docs/Creational/factory-method.mdx), but you can also use [Prototype](/docs/Creational/prototype) to compose the methods on these classes. -- [Abstract Factories](/docs/Creational/abstract-factory), [Builders](/docs/Creational/builder), and [Prototypes](/docs/Creational/prototype) can be implemented as [Singleton](/docs/Creational/singleton). +- Designs that make heavy use of [Composite](/docs/structural/composite.mdx) and [Decorator](/docs/structural/decorator.mdx) can often benefit from using [Prototype](/docs/creational/prototype). Applying the pattern lets you clone complex structures instead of re-constructing them from scratch. +- [Prototypes](/docs/creational/prototype) can help when you need to save copies of [Commands](/docs/behavioral/command.mdx) into history. +- [Abstract Factories](/docs/creational/abstract-factory) classes are often based on a set of [Factory Methods](/docs/creational/factory-method.mdx), but you can also use [Prototype](/docs/creational/prototype) to compose the methods on these classes. +- [Abstract Factories](/docs/creational/abstract-factory), [Builders](/docs/creational/builder), and [Prototypes](/docs/creational/prototype) can be implemented as [Singleton](/docs/creational/singleton). --- diff --git a/docs/Creational/singleton.mdx b/docs/creational/singleton.mdx similarity index 92% rename from docs/Creational/singleton.mdx rename to docs/creational/singleton.mdx index ac3b758..39232ee 100644 --- a/docs/Creational/singleton.mdx +++ b/docs/creational/singleton.mdx @@ -1,6 +1,8 @@ --- title: Singleton hide_title: true +description: > + Just like God, there is only one. --- import { CreationalPatternTag } from "@site/src/components/pattern-page-features/pattern-alias-and-tag"; @@ -196,9 +198,9 @@ function SingletonDemo() { ``` ## 🔗Relations to other patterns -- [Factory Method](../Creational/factory-method.mdx), [Abstract Factory](../Creational/abstract-factory.mdx), or [Builder](../Creational/builder.mdx) may rely on Singleton to ensure a single configuration or product source is used globally. -- [Facade](../Structural/facade.mdx) objects can themselves be singletons that encapsulate a subsystem behind a single interface. -- Unlike [Flyweight](../Structural/flyweight.mdx), which manages many shared objects, Singleton restricts creation to precisely one object. +- [Factory Method](/docs/creational/factory-method.mdx), [Abstract Factory](/docs/creational/abstract-factory.mdx), or [Builder](/docs/creational/builder.mdx) may rely on Singleton to ensure a single configuration or product source is used globally. +- [Facade](/docs/structural/facade.mdx) objects can themselves be singletons that encapsulate a subsystem behind a single interface. +- Unlike [Flyweight](/docs/structural/flyweight.mdx), which manages many shared objects, Singleton restricts creation to precisely one object. --- diff --git a/docs/intro.md b/docs/intro.md deleted file mode 100644 index 88f9571..0000000 --- a/docs/intro.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -sidebar_position: 1 ---- - -# Tutorial Intro - -Let's discover **Docusaurus in less than 5 minutes**. - -## Getting Started - -Get started by **creating a new site**. - -Or **try Docusaurus immediately** with **[docusaurus.new](https://docusaurus.new)**. - -### What you'll need - -- [Node.js](https://nodejs.org/en/download/) version 20.0 or above: - - When installing Node.js, you are recommended to check all checkboxes related to dependencies. - -## Generate a new site - -Generate a new Docusaurus site using the **classic template**. - -The classic template will automatically be added to your project after you run the command: - -```bash -npm init docusaurus@latest my-website classic -``` - -You can type this command into Command Prompt, Powershell, Terminal, or any other integrated terminal of your code editor. - -The command also installs all necessary dependencies you need to run Docusaurus. - -## Start your site - -Run the development server: - -```bash -cd my-website -npm run start -``` - -The `cd` command changes the directory you're working with. In order to work with your newly created Docusaurus site, you'll need to navigate the terminal there. - -The `npm run start` command builds your website locally and serves it through a development server, ready for you to view at http://localhost:3000/. - -Open `docs/intro.md` (this page) and edit some lines: the site **reloads automatically** and displays your changes. diff --git a/docs/overview.md b/docs/overview.md new file mode 100644 index 0000000..94ed8fe --- /dev/null +++ b/docs/overview.md @@ -0,0 +1,37 @@ +--- +title: Overview +sidebar_position: 1 +--- + +# Welcome to DesignPatternPedia + +Ever come across a piece of code and thought, “Why is this written like a Sudoku puzzle?” Congratulations, you’ve found a design pattern (assuming it's not some DIY project...). + +This site is your map to the collection of reusable solutions that help developers build reliable and maintainable software across different contexts and technologies. + +## So… what even is this? + +This documentation is a structured reference for software design patterns — recurring approaches to solving frequently encountered problems in software architecture and object-oriented design. + +Each pattern here summarizes a proven solution, the problem it addresses, and the trade-offs involved in applying it. +Understanding these patterns helps you write code that is consistent, maintainable, and adaptable to change. + +## For who is this? + +It is primarily aimed at (junior) software developers, but anyone is welcome to take a look! The documents can get a bit technical at times, so a bit of programming background is strongly recommended in order to not get completely lost. + +## How does it work? + +Patterns are grouped into three core categories, each describing a different perspective on how code can be organized and behave: + +- **Creational Patterns** – Deal with object creation and instantiation logic, aiming for flexibility and control over how objects are constructed. [Explore Creational Patterns ›](/docs/creational) + +- **Structural Patterns** – Focus on how classes and objects are composed to form larger structures while maintaining efficiency and scalability. [Explore Structural Patterns ›](/docs/structural) + +- **Behavioral Patterns** – Describe how objects interact and communicate, defining responsibilities and coordination in software systems. [Explore Behavioral Patterns ›](/docs/behavioral) + +Each core group then has it's own pattern page, which describes various aspects of the pattern itself. Subjects such as when to apply it, what it means, a metaphor to really connect it to reality and so forth. Pick a page and start reading from top to bottom. + +## Why does this exist? + +Software development often faces the same challenges — managing complexity, reducing coupling, and maintaining flexibility. Design patterns offer shared language and principles that developers can rely on to design systems that are easier to extend and understand. The existing website all lack a certain flavour, some are too complex and detailed, some simply do not contain enough precision. I hope to create an overarching experience which actually focusses on helping (junior) developers learn design patterns. diff --git a/docs/structural/_category_.yml b/docs/structural/_category_.yml new file mode 100644 index 0000000..bf94c72 --- /dev/null +++ b/docs/structural/_category_.yml @@ -0,0 +1,11 @@ +label: Structural +link: + type: generated-index + title: Structural Design Patterns + description: > + Structural design patterns are concerned with how classes and objects are composed to form larger structures. + slug: /structural + keywords: + - design pattern + - structural + - software architecture diff --git a/docs/Structural/adapter.mdx b/docs/structural/adapter.mdx similarity index 100% rename from docs/Structural/adapter.mdx rename to docs/structural/adapter.mdx diff --git a/docs/Structural/bridge.mdx b/docs/structural/bridge.mdx similarity index 100% rename from docs/Structural/bridge.mdx rename to docs/structural/bridge.mdx diff --git a/docs/Structural/composite.mdx b/docs/structural/composite.mdx similarity index 100% rename from docs/Structural/composite.mdx rename to docs/structural/composite.mdx diff --git a/docs/Structural/decorator.mdx b/docs/structural/decorator.mdx similarity index 100% rename from docs/Structural/decorator.mdx rename to docs/structural/decorator.mdx diff --git a/docs/Structural/facade.mdx b/docs/structural/facade.mdx similarity index 100% rename from docs/Structural/facade.mdx rename to docs/structural/facade.mdx diff --git a/docs/Structural/flyweight.mdx b/docs/structural/flyweight.mdx similarity index 100% rename from docs/Structural/flyweight.mdx rename to docs/structural/flyweight.mdx diff --git a/docs/Structural/proxy.mdx b/docs/structural/proxy.mdx similarity index 100% rename from docs/Structural/proxy.mdx rename to docs/structural/proxy.mdx diff --git a/docs/template.mdx b/docs/template.mdx index a1fae56..490092e 100644 --- a/docs/template.mdx +++ b/docs/template.mdx @@ -95,7 +95,7 @@ This sample is to get a 'feel' for the pattern. The code itself may not reflect ``` ## 🔗Relations to other patterns -- [Another pattern](./Creational/singleton.mdx) wiki link here +- Another pattern wiki link here --- ## 📚Sources diff --git a/docusaurus.config.ts b/docusaurus.config.ts index cd74c54..6088e9d 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -60,11 +60,26 @@ const config: Config = { }, items: [ { - type: "docSidebar", - sidebarId: "tutorialSidebar", position: "left", - label: "Patterns", + to: "/docs/overview", + label: "Overview", }, + { + position: "left", + to: "docs/behavioral", + label: "Behavioral", + }, + { + position: "left", + to: "docs/creational", + label: "Creational", + }, + { + position: "left", + to: "docs/structural", + label: "Structural", + }, + { to: "/manifest", label: "Manifesto", position: "left" }, { href: "https://github.com/S7-OpenLearning-Individual/DesignPatternPedia", label: "GitHub", @@ -76,16 +91,7 @@ const config: Config = { style: "dark", links: [ { - title: "Docs", - items: [ - { - label: "Tutorial", - to: "/docs/intro", - }, - ], - }, - { - title: "More", + title: "Contribute & Feedback", items: [ { label: "GitHub", diff --git a/package-lock.json b/package-lock.json index 21ebc23..fc7791e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,7 +16,8 @@ "clsx": "^2.0.0", "prism-react-renderer": "^2.3.0", "react": "^19.0.0", - "react-dom": "^19.0.0" + "react-dom": "^19.0.0", + "swiper": "^12.0.3" }, "devDependencies": { "@docusaurus/module-type-aliases": "3.9.2", @@ -17538,6 +17539,25 @@ "node": ">= 10" } }, + "node_modules/swiper": { + "version": "12.0.3", + "resolved": "https://registry.npmjs.org/swiper/-/swiper-12.0.3.tgz", + "integrity": "sha512-BHd6U1VPEIksrXlyXjMmRWO0onmdNPaTAFduzqR3pgjvi7KfmUCAm/0cj49u2D7B0zNjMw02TSeXfinC1hDCXg==", + "funding": [ + { + "type": "patreon", + "url": "https://www.patreon.com/swiperjs" + }, + { + "type": "open_collective", + "url": "http://opencollective.com/swiper" + } + ], + "license": "MIT", + "engines": { + "node": ">= 4.7.0" + } + }, "node_modules/swr": { "version": "2.3.6", "resolved": "https://registry.npmjs.org/swr/-/swr-2.3.6.tgz", diff --git a/package.json b/package.json index 9be112d..69c167b 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,8 @@ "clsx": "^2.0.0", "prism-react-renderer": "^2.3.0", "react": "^19.0.0", - "react-dom": "^19.0.0" + "react-dom": "^19.0.0", + "swiper": "^12.0.3" }, "devDependencies": { "@docusaurus/module-type-aliases": "3.9.2", diff --git a/sidebars.ts b/sidebars.ts index 2897139..afda97f 100644 --- a/sidebars.ts +++ b/sidebars.ts @@ -1,4 +1,4 @@ -import type {SidebarsConfig} from '@docusaurus/plugin-content-docs'; +import type { SidebarsConfig } from "@docusaurus/plugin-content-docs"; // This runs in Node.js - Don't use client-side code here (browser APIs, JSX...) @@ -13,21 +13,7 @@ import type {SidebarsConfig} from '@docusaurus/plugin-content-docs'; Create as many sidebars as you want. */ const sidebars: SidebarsConfig = { - // By default, Docusaurus generates a sidebar from the docs folder structure - tutorialSidebar: [{type: 'autogenerated', dirName: '.'}], - - // But you can create a sidebar manually - /* - tutorialSidebar: [ - 'intro', - 'hello', - { - type: 'category', - label: 'Tutorial', - items: ['tutorial-basics/create-a-document'], - }, - ], - */ + sidebar: [{ type: "autogenerated", dirName: "." }], }; export default sidebars; diff --git a/src/components/HomepageFeatures/index.tsx b/src/components/HomepageFeatures/index.tsx deleted file mode 100644 index 7c5c7cb..0000000 --- a/src/components/HomepageFeatures/index.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import type { ReactNode } from "react"; -import clsx from "clsx"; -import Heading from "@theme/Heading"; -import styles from "./styles.module.css"; - -// FUTURE_WORK https://github.com/S7-OpenLearning-Individual/DesignPatternPedia/issues/5: Improve home page. - -type FeatureItem = { - title: string; - Svg: React.ComponentType>; - description: ReactNode; -}; - -const FeatureList: FeatureItem[] = [ - { - title: "Easy to Use", - Svg: require("@site/static/img/undraw_docusaurus_mountain.svg").default, - 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: require("@site/static/img/undraw_docusaurus_tree.svg").default, - 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: require("@site/static/img/undraw_docusaurus_react.svg").default, - 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(): ReactNode { - return ( -
-
-
- {FeatureList.map((props, idx) => ( - - ))} -
-
-
- ); -} diff --git a/src/components/HomepageFeatures/styles.module.css b/src/components/HomepageFeatures/styles.module.css deleted file mode 100644 index b248eb2..0000000 --- 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/components/design-pattern-carousel/index.tsx b/src/components/design-pattern-carousel/index.tsx new file mode 100644 index 0000000..4e4865d --- /dev/null +++ b/src/components/design-pattern-carousel/index.tsx @@ -0,0 +1,72 @@ +import React from "react"; +import { Swiper, SwiperSlide } from "swiper/react"; +import { A11y, Autoplay, Navigation } from "swiper/modules"; + +import "swiper/css"; +import "swiper/css/navigation"; + +import Link from "@docusaurus/Link"; +import { designPatterns } from "../../data/design-patterns"; + +const DesignPatternCarousel: React.FC = () => { + return ( + + {designPatterns.map(({ name, description, path }, idx) => ( + + +

{name}

+

+ {description} +

+ + + ))} + + ); +}; + +export default DesignPatternCarousel; diff --git a/src/components/project-details/index.tsx b/src/components/project-details/index.tsx new file mode 100644 index 0000000..b3356bb --- /dev/null +++ b/src/components/project-details/index.tsx @@ -0,0 +1,103 @@ +import type { ReactNode } from "react"; +import React from "react"; +import clsx from "clsx"; +import styles from "./styles.module.css"; +import Heading from "@theme/Heading"; +import Link from "@docusaurus/Link"; + +type ProjectDetail = { + title: string; + Svg: React.ComponentType>; + description: ReactNode; +}; + +const details: ProjectDetail[] = [ + { + title: "What is DesignPatternPedia?", + Svg: require("@site/static/icons/book-open.svg").default, + description: ( + <> + A comprehensive library to learn and explore software design patterns + with clear explanations, real-world examples, and interactive content to + accelerate your development skills. + + ), + }, + { + title: "Transparency", + Svg: require("@site/static/icons/search.svg").default, + description: ( + <> + This wiki is a personal project created by a person for a people. + Transparency is part of the gift of sharing information. The content of + this cite is not hidden beyond any paywalls, transactions, questionable + tracking nor analytical cookies. It is purely focused on delivering you + with the best information possible for free. + + ), + }, + { + title: "AI Assistance", + Svg: require("@site/static/icons/cyborg-color.svg").default, + description: ( + <> + The free content provided to you was collected with the assistance of + generative AI such as{" "} + Perplexity and{" "} + Copilot. While AI helped + gather and draft the information, all content has been reviewed and + refined by a human to ensure accuracy and clarity. Therefore this + project has been dubbed as{" "} + Cyborg level of AI + assistance. + + ), + }, + { + title: "Contribute to the Project", + Svg: require("@site/static/icons/github.svg").default, + description: ( + <> + Learning needs to be free, open and honest. Join our community and + contribute your knowledge or improvements via{" "} + + GitHub + + . Help us make DesignPatternPedia the ultimate, free and honest resource + for all developers learning design patterns! + + ), + }, +]; + +function ProjectCard({ + title, + Svg, + description, + reverse, +}: ProjectDetail & { reverse?: boolean }) { + return ( +
+
+ +
+
+ {title} +

{description}

+
+
+ ); +} + +export default function ProjectDetails(): ReactNode { + return ( +
+ {details.map((item, index) => ( + + ))} +
+ ); +} diff --git a/src/components/project-details/styles.module.css b/src/components/project-details/styles.module.css new file mode 100644 index 0000000..0bfe775 --- /dev/null +++ b/src/components/project-details/styles.module.css @@ -0,0 +1,82 @@ +.projectDetails { + display: flex; + flex-direction: column; + gap: 6rem; + margin: auto auto 6rem auto; + width: 60%; + align-items: center; +} + +.card { + display: flex; + align-items: center; + justify-content: space-between; + gap: 3rem; + width: 100%; +} + +.reverse { + flex-direction: row-reverse; +} + +.icon { + align-items: center; + justify-content: center; + margin: 0 2rem; +} + +.cardSvg { + width: 150px; + height: 150px; + object-fit: contain; +} + +.text { + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; + text-align: left; +} + +.reverse .text { + text-align: right; +} + +.text h2 { + margin-bottom: 1rem; +} + +/* Responsive adjustments for mobile screens */ +@media (max-width: 768px) { + .projectDetails { + width: 90%; + gap: 4rem; + margin: 2rem auto; + } + + .card { + flex-direction: column; + align-items: center; + gap: 2rem; + text-align: center; + } + + .reverse { + flex-direction: column; + } + + .text, + .reverse .text { + text-align: center; + } + + .cardSvg { + width: 100px; + height: 100px; + } + + .icon { + margin: 0; + } +} diff --git a/src/data/design-patterns.tsx b/src/data/design-patterns.tsx new file mode 100644 index 0000000..69ccdfb --- /dev/null +++ b/src/data/design-patterns.tsx @@ -0,0 +1,151 @@ +export interface DesignPattern { + name: string; + description: string; + category: "behavioral" | "structural" | "creational"; + path: string; +} + +export const designPatterns: DesignPattern[] = [ + // Creational Patterns + { + name: "Abstract Factory", + description: "Creates an instance of several families of classes.", + category: "creational", + path: "creational/abstract-factory", + }, + { + name: "Builder", + description: "Separates object construction from its representation.", + category: "creational", + path: "creational/builder", + }, + { + name: "Factory Method", + description: "Creates objects without specifying the exact class.", + category: "creational", + path: "creational/factory-method", + }, + { + name: "Prototype", + description: "Clones objects to create new instances.", + category: "creational", + path: "creational/prototype", + }, + { + name: "Singleton", + description: "Ensures a class has only one instance.", + category: "creational", + path: "creational/singleton", + }, + + // Structural Patterns + { + name: "Adapter", + description: "Allows incompatible interfaces to work together.", + category: "structural", + path: "structural/adapter", + }, + { + name: "Bridge", + description: "Separates abstraction from implementation.", + category: "structural", + path: "structural/bridge", + }, + { + name: "Composite", + description: + "Compose objects into tree structures to represent part-whole hierarchies.", + category: "structural", + path: "structural/composite", + }, + { + name: "Decorator", + description: "Attach additional responsibilities to an object dynamically.", + category: "structural", + path: "structural/decorator", + }, + { + name: "Facade", + description: "Provides a simplified interface to a complex subsystem.", + category: "structural", + path: "structural/facade", + }, + { + name: "Flyweight", + description: "Reduces memory usage by sharing common parts of objects.", + category: "structural", + path: "structural/flyweight", + }, + { + name: "Proxy", + description: "Provides a surrogate or placeholder for another object.", + category: "structural", + path: "structural/proxy", + }, + + // Behavioral Patterns + { + name: "Chain of Responsibility", + description: "Passes a request along a chain of objects.", + category: "behavioral", + path: "behavioral/chain-of-responsibility", + }, + { + name: "Command", + description: "Encapsulates a request as an object.", + category: "behavioral", + path: "behavioral/command", + }, + { + name: "Iterator", + description: + "Provides a way to access elements sequentially without exposing underlying representation.", + category: "behavioral", + path: "behavioral/iterator", + }, + { + name: "Mediator", + description: "Defines simplified communication between objects.", + category: "behavioral", + path: "behavioral/mediator", + }, + { + name: "Memento", + description: "Captures and restores an object's internal state.", + category: "behavioral", + path: "behavioral/memento", + }, + { + name: "Observer", + description: + "Objects subscribe to and receive notifications of state changes.", + category: "behavioral", + path: "behavioral/observer", + }, + { + name: "State", + description: "Alters an object's behavior when its internal state changes.", + category: "behavioral", + path: "behavioral/state", + }, + { + name: "Strategy", + description: "Defines a family of algorithms, encapsulates each one.", + category: "behavioral", + path: "behavioral/strategy", + }, + { + name: "Template Method", + description: + "Defines the skeleton of an algorithm, deferring steps to subclasses.", + category: "behavioral", + path: "behavioral/template-method", + }, + { + name: "Visitor", + description: + "Defines new operations without changing the classes on which they operate.", + category: "behavioral", + path: "behavioral/visitor", + }, +]; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 2e006d1..59d56b8 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,17 +1,18 @@ -import type {ReactNode} from 'react'; -import clsx from 'clsx'; -import Link from '@docusaurus/Link'; -import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; -import Layout from '@theme/Layout'; -import HomepageFeatures from '@site/src/components/HomepageFeatures'; -import Heading from '@theme/Heading'; +import type { ReactNode } from "react"; +import clsx from "clsx"; +import Link from "@docusaurus/Link"; +import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; +import Layout from "@theme/Layout"; +import Heading from "@theme/Heading"; -import styles from './index.module.css'; +import styles from "./index.module.css"; +import ProjectDetails from "../components/project-details"; +import DesignPatternCarousel from "../components/design-pattern-carousel"; function HomepageHeader() { - const {siteConfig} = useDocusaurusContext(); + const { siteConfig } = useDocusaurusContext(); return ( -
+
{siteConfig.title} @@ -20,8 +21,9 @@ function HomepageHeader() {
- Docusaurus Tutorial - 5min ⏱️ + to="/docs/overview" + > + Get started
@@ -30,14 +32,15 @@ function HomepageHeader() { } export default function Home(): ReactNode { - const {siteConfig} = useDocusaurusContext(); return ( + title={`DesignPatternPedia`} + description="Learn all your design patterns in one place." + >
- + +
); diff --git a/src/pages/manifest.tsx b/src/pages/manifest.tsx new file mode 100644 index 0000000..fec944c --- /dev/null +++ b/src/pages/manifest.tsx @@ -0,0 +1,85 @@ +import React from "react"; +import Layout from "@theme/Layout"; + +const ProjectManifest = () => { + return ( + +
+
+

+ DesignPatternPedia manifesto +

+
+

+ We shan't limit the access to knowledge of design patterns behind + paywalls, sketchy cookies, forced sign-ups, or dark patterns. + Users shan't be held in the dark regarding their data and privacy. + We believe in open access to knowledge, transparency, and user + empowerment. +

+

+ Together, we envision a digital ecosystem where learning is + democratized, trust is cultivated, and every individual is + equipped with the tools and knowledge to build with confidence and + conscience. +

+

+ This manifesto stands as a pledge to uphold these ideals in every + line of code, every shared insight, and every interaction within + our community. +

+

+ And most important of all; we mayn't let ourselves be tempted to + constantly try to force users to buy our book. +

+
+
+
+ + ); +}; + +export default ProjectManifest; diff --git a/src/pages/markdown-page.md b/src/pages/markdown-page.md deleted file mode 100644 index 9756c5b..0000000 --- a/src/pages/markdown-page.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: Markdown page example ---- - -# Markdown page example - -You don't need React to write simple standalone pages. diff --git a/static/icons/book-open.svg b/static/icons/book-open.svg new file mode 100644 index 0000000..5e0ca0a --- /dev/null +++ b/static/icons/book-open.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/icons/cyborg-color.svg b/static/icons/cyborg-color.svg new file mode 100644 index 0000000..d3a0ce2 --- /dev/null +++ b/static/icons/cyborg-color.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/icons/github.svg b/static/icons/github.svg new file mode 100644 index 0000000..ff0af48 --- /dev/null +++ b/static/icons/github.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/icons/search.svg b/static/icons/search.svg new file mode 100644 index 0000000..8710306 --- /dev/null +++ b/static/icons/search.svg @@ -0,0 +1 @@ + \ No newline at end of file