Add new docs

docs/Text.jsx

@@ -0,0 +1,9 @@
+"use client";
+
+export const Red = ({text}) => {
+  return (
+    <>
+      <span style={{color: "red", fontWeight: "bold"}}>{text}</span>
+    </>
+  );
+};

docs/biome.json

@@ -0,0 +1,15 @@
+{
+  "formatter": {
+    "formatWithErrors": true,
+    "indentStyle": "space",
+    "lineWidth": 78,
+    "lineEnding": "lf",
+    "ignore": []
+  },
+  "javascript": {
+    "formatter": {
+      "bracketSpacing": false,
+      "arrowParentheses": "asNeeded"
+    }
+  }
+}

docs/next.config.js

@@ -0,0 +1,14 @@
+const withNextra = require('nextra')({
+  theme: 'nextra-theme-docs',
+  themeConfig: './theme.config.jsx',
+})
+
+const config = {
+  output: "export",
+  distDir: "dist",
+  images: {unoptimized: true},
+  ...withNextra()
+};
+
+// module.exports = withNextra()
+module.exports = config;

docs/package.json

@@ -0,0 +1,17 @@
+{
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "^14.0.4",
+    "nextra": "^2.13.2",
+    "nextra-theme-docs": "^2.13.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "1.5.1"
+  }
+}

docs/pages/_meta.json

@@ -0,0 +1,7 @@
+{
+  "index": "Introduction",
+  "core-concepts": "Core Concepts",
+  "basic-usage": "Usage",
+  "options": "Options",
+  "more": "More"
+}

docs/pages/basic-usage.mdx

@@ -0,0 +1,2 @@
+# Basic usage.
+### under development...

docs/pages/basic-usage/_meta.json

@@ -0,0 +1,7 @@
+{
+  "installation": "Installation",
+  "usage": "Quick Start",
+  "quick-recipes": "Quick Recipes",
+  "analyzing-a-path": "Analyzing a Path",
+  "understanding-output": "Dynamic Output"
+}

docs/pages/basic-usage/analyzing-a-path.mdx

@@ -0,0 +1,142 @@
+import {Callout, FileTree, Steps} from "nextra/components";
+
+# File Path vs Directory Path
+Consider the following file structure:
+
+<FileTree>
+  <FileTree.Folder name="src" defaultOpen>
+    <FileTree.File name="A.jsx" />
+    <FileTree.File name="B.jsx" />
+  </FileTree.Folder>
+</FileTree>
+
+The `src` folder houses two components, `A` and `B`.
+Let's say we're about to create a new component `C`, without any prior
+knowledge of the contents of `A` and `B`.
+
+After 20 minutes, component `C` is ready.
+
+<Callout type="warning">
+Note that while developing `C`, there was no need to consider abstraction or
+use Klassco. The development workflow remained **unchanged**.
+</Callout>
+
+Now, it's time to review and improve our code.
+
+<Steps>
+### Step 1
+Start by analyzing `C.jsx` independently.
+
+```bash
+$ klassco C.jsx
+```
+
+We can begin by modifying `C` and removing duplicates. However, it may be
+beneficial to hold off on these modifications until we perform the next step.
+Klassco can provide us with an overview of other duplications that may be
+occurring in nearby components.
+
+
+### Step 2
+After analyzing `C.jsx`, it's time to get a broader view of all components
+within the `src` folder.
+
+```bash
+$ klassco src
+```
+
+This step helps identify duplications in nearby components and provides
+insights into potential duplication patterns that may arise in the future.
+
+Now, we're equipped to make meaningful changes to `C.jsx`.
+
+### Step 3
+The bonus step involves instructing Klassco to perform a comprehensive scan of
+all files **in relation to each other**.
+
+```bash
+$ klassco -g src
+```
+
+By extracting only the repetitions that are present across `A`, `B`, and `C`,
+we can address these duplications and create better abstractions for future
+components.
+</Steps>
+
+
+<br />
+## Keep in Mind
+As you write more code, the process will be repeated multiple times. The
+advantage of Klassco is that it aids in making informed decisions by providing
+the ability to **zoom in** and **out** before finalizing a decision.
+
+
+<br />
+## Excluding Specific Files
+<FileTree>
+  <FileTree.Folder name="components" defaultOpen>
+    <FileTree.File name="Hero.jsx" />
+    <FileTree.File name="Team.jsx" />
+    <FileTree.File name="Pricing.jsx" />
+    <FileTree.File name="Contact.jsx" />
+    <br />
+
+    <FileTree.Folder name="foundation" defaultOpen>
+      <FileTree.File name="Modal.jsx" />
+      <FileTree.File name="Table.jsx" />
+      <FileTree.File name="Form.jsx" />
+
+      <br />
+      <FileTree.Folder name="elementary" defaultOpen>
+        <FileTree.File name="Button.jsx" />
+        <FileTree.File name="Checkbox.jsx" />
+        <FileTree.File name="Radio.jsx" />
+
+        <br />
+        <FileTree.Folder name="base" defaultOpen>
+          <FileTree.File name="Text.jsx" />
+          <FileTree.File name="Image.jsx" />
+          <FileTree.File name="Link.jsx" />
+        </FileTree.Folder>
+      </FileTree.Folder>
+    </FileTree.Folder>
+  </FileTree.Folder>
+</FileTree>
+
+
+The file structure above uses nested folders to represent a hierarchy flow,
+with higher-level components at the top and lower-level components at the
+bottom. Each abstracted layer can only access the layer underneath it, meaning
+that `Hero`, `Team`, `Pricing`, and `Contact` were only built by the
+components found in `foundation`, and they are not allowed to go two layers
+deep. The same rule applies to the rest.
+
+The aim is to create highly modular components, broken down into smaller
+pieces for reuse by higher-level components. Therefore, every time you create
+a new abstraction layer, you need to abstract it well, so that the future
+layer that will come next will never need to go two layers deep.
+
+Klassco encourages this file structure that supports layering, and by not
+offering an option to exclude files or folders from the search, when this
+structure is used, you are forced to make good design. If a directory path
+includes files you wish to exclude from the scan, it’s an indication that they
+should be relocated.
+
+For more information, please read [How to abstract
+[&#8599;]](../core-concepts/how-to-abstract).
+
+
+<Callout type="warning">
+Please note that you can use any file structure you
+want. However, once you start nesting folders, Klassco will switch to the
+modular mode that’s explained above.
+</Callout>
+
+<Callout type="info">
+The `dev` branch of Klassco includes a `--no-recursive` feature, allowing you to scan only the contents of a folder, excluding its subfolders.
+</Callout>
+
+
+<br />
+## Next Steps
+[How to abstract [&#8599;]](../core-concepts/how-to-abstract).

docs/pages/basic-usage/understanding-output.mdx

@@ -0,0 +1,67 @@
+import {Callout} from "nextra/components"
+
+
+# Interpreting the Output
+The output of Klassco can change depending on the flags used. This might be
+confusing if you're not accustomed to composable flags.
+
+In this brief guide, we'll explore a small example to give you a basic
+understanding. However, for a comprehensive understanding, please refer to
+[Composable Flags [↗]](../core-concepts/key-features).
+
+
+Consider the following code:
+
+```html {1,2,5,6} filename="index.html"
+<div className="classB classD classE classA classC">
+  <p className="classE">Three</p>
+</div>
+
+<div className="classD classE classD">
+  <p className="classE classD">Four</p>
+</div>
+```
+
+Scanning `index.html` with Klassco will yield the following results:
+
+```bash {5}
+$ klassco index.html
+
++ index.html:
+        classD, classE
+        duplicated 3 times.
+```
+
+Here, `classD` and `classE` are duplicated 3 times within `index.html`.
+However, in larger files or projects, you might be more interested in the
+number of unique duplicates rather than the total number of duplications. For
+this, you can use the summary flag `-s` or `--summary`.
+
+```bash {4}
+$ klassco index.html
+
++ index.html:
+        found 1 duplicate.
+```
+
+Klassco now reports only one duplicate, as there's only one unique class
+combination duplicated in the file. But don't mistake this for a single
+duplication; the unique combination could be repeated numerous times.
+
+The `--summary` flag is designed to help identify the number of unique
+duplications, which can be useful in different scenarios.
+
+Returning to our `index.html` example, `classD`, `classE` is duplicated three
+times. Even if it were duplicated **1000 times**, it's a relatively simple fix
+because it's just one class combination that needs to be abstracted and
+replaced throughout the file.
+
+However, if there are 1000 **unique** class combination duplications, it's a
+different story. That's where `-s` comes in handy, helping you distinguish
+between files that are easier to refactor and those that are more challenging.
+
+In practice, you'll often use `-s` and `-t` against directories to quickly
+assess which directory is more challenging to refactor.
+
+## Next steps
+[Composable Flags [&#8599;]](../core-concepts/key-features)

docs/pages/core-concepts.mdx

@@ -0,0 +1,4 @@
+# Core concepts
+### under development...
+
+you can browse other pages

docs/pages/core-concepts/_meta.json

@@ -0,0 +1,5 @@
+{
+  "why-klassco": "Why Klassco",
+  "how-to-abstract": "How to Abstract",
+  "key-features": "Composable Flags"
+}

docs/pages/core-concepts/how-to-abstract.mdx

@@ -0,0 +1 @@
+### under development...

docs/pages/core-concepts/key-features.mdx

@@ -0,0 +1 @@
+### under development...