docs: added documentation website (#159)

* docs: added documentation website

* docs: added documentation link to pubspec.yaml

* added configuration options in docs

* added documentation for how to use modes

README.md

@@ -7,6 +7,11 @@ A CLI tool for generating Figma styles for Flutter
 [![melos](https://img.shields.io/badge/maintained%20with-melos-f700ff.svg)](https://github.com/invertase/melos)
 
 
+## Documentation 📝
+Figmage comes with a comprehensive documentation, which you can find [here](https://figmage.netlify.app/)
+
+If this is your first time here, check out our [Getting Started Guide](https://figmage.netlify.app/guides/getting-started/)!
+
 ## What's in the box 🎁
 Figmage is a magical CLI tool that helps you generate a flutter package from your Figma Design System. It uses the Figma APIs to fetch your design tokens from published **styles**, as well as **variables**, with full **modes** support.
 
@@ -60,145 +65,7 @@ extension ColorsMyCollectionBuildContextX on BuildContext {
 }
 ```
 
-### Features
-- ✨ Generate a Flutter package from your Figma Design System
-- 🎨 Supports many types of tokens:
-  - 🌈 **Color** styles and variables
-  - 🖋️ **Typography** styles (with optional `google_fonts` support!)
-  - 🔢 **Number** variables, which can be generated as Paddings, and Spacers as well
-- 🌓 **Modes** support for variables: Generate different tokens for different themes (e.g. dark/light)
-- 📦 **Package** generation: All your tokens end up in one convenient package. Depend on it from your app, and update it whenever neccessary!
-- 🤝 **Seamless** integration with `Theme`s from `material.dart`: Generated classes are `ThemeExtension`s, so they can be integrated into your app's theme easily!
-- 🎯 **Quick access** using `BuildContext` extensions.
-- 🔮 **Portable**: figmage is a pure dart package, so it can easily be integrated into your CI/CD pipelines, to automatically fetch the latest tokens of your project for you!
-
-
-## Installation 💻
-
-**❗ In order to start using Figmage you must have the [Dart SDK][dart_install_link] installed on your machine.**
-
-For the easiest usage, install figmage via `dart pub global activate`:
-
-```sh
-dart pub global activate figmage
-```
-
-## How to generate 🏭
-
-### 🚀 Quick start
-
-Create a folder in which you want your generated package to live. For example:
-
-```sh
-mkdir packages/my_design_system
-cd packages/my_design_system
-```
-
-This command will generate a new package at the specified output path using the provided Figma API token and file ID:
-
-```sh
-figmage forge --token <token> --fileId <fileId>
-```
-
-> [!NOTE] 
-> **🤔 Wait, what's a token? And what's this file ID? Where do I get them?**
->
-> To interact with the Figma API, you'll need an **access token**. Check out the [Figma Docs](https://www.figma.com/developers/api#access-tokens) to learn how to create yours.
->
-> The **fileId** is part of the URL when you open a Figma file. Just look in your browser's address bar when you have your design system file open, it's usually structured like this:
-> ➡ figma.com/design/**your-file-id-is-here**/more-not-so-interesting-stuff
-
-
-### 🎨 Details
-
-If you require more control over the generated code, create a `figmage.yaml` file in the directory in which you want the package to be generated. This file will then always live **next to the `pubspec.yaml`** of the generated package.
-
-Below is an example, along with descriptions of what each flag accomplishes:
-
-```yaml
-# The Figma file ID from which to generate tokens. If you set this here, you won't need to pass it as a flag.
-fileId: "YOUR_FIGMA_FILE_ID"
-# The name of the generated Dart package. Will use the current directory name if not provided.
-packageName: "my_design_system"
-# Description of the generated package. No description will be generated by default.
-packageDescription: "A package generated from Figma designs."
-# Default: true. Determines whether to drop unresolvable values. When true, values that cannot be resolved (e.g., an alias pointing to a missing variable) are omitted, ensuring all tokens are resolvable in all modes (e.g., light and dark mode). When false, unresolved variables are included but will return null. Defaults to false.
-dropUnresolved: true
-# Whether to fetch only the styles that were published to the library.
-# Defaults to false, meaning the file's local styles will be fetched.
-stylesFromLibrary: false
-colors:
-  # Default: true. Whether to generate color tokens.
-  generate: true
-  # Default: []. Specific paths to generate color tokens from.
-  from:
-    - "colors/path"
-typography:
-  # Default: true. Whether to generate typography tokens.
-  generate: true
-  # Default: []. Specific paths to generate typography tokens from.
-  from:
-    - "typography/path"
-  # Default: true. Whether to use Google Fonts for font families.
-  useGoogleFonts: true
-numbers:
-  # Default: false. Whether to generate number tokens (for spacers, paddings, borders).
-  generate: false
-  # Default: []. Specific paths to generate number tokens from.
-  from:
-    - "numbers/path"
-spacers:
-  # Default: false. Whether to generate spacer tokens from all generated number tokens (see above).
-  generate: false
-paddings:
-  # Default: false. Whether to generate padding tokens from all generated number tokens (see above).
-  generate: false
-```
-> [!WARNING]
-> Spacers and Paddings will always be generated for **all** included number tokens for now. Any `from` paths specified for `spacers` and `paddings` will be ignored. See [this issue](https://github.com/whynotmake-it/figmage/issues/76) for more information.
-
-
-## How to use 📲
-Next, let's see how you can integrate the generated package into your Flutter app.
-
-### 🚀 Quick start
-
-To integrate your newly minted token package into your app, simply add it to your `pubspec.yaml` file:
-
-```yaml
-figmage_package:
-  path: path/to/your/package
-```
-
-You can now add the generated `ThemeExtension`s to your app's theme.
-Incorporate design tokens into your code as follows:
-
-```dart
-  @override
-  Widget build(BuildContext context) {
-    return MaterialApp(
-      theme: ThemeData.light().copyWith(
-        extensions: <ThemeExtension<dynamic>>[
-          ColorsDesignSystem.dark(), // <- added
-          TypographyDesignSystem.standard(), // <- added
-        ],
-      ),
-      darkTheme: ThemeData.dark().copyWith(
-        extensions: <ThemeExtension<dynamic>>[
-          ColorsDesignSystem.dark(), // <- added
-          TypographyDesignSystem.standard(), // <- added
-        ],
-      ),
-      themeMode: isLightTheme ? ThemeMode.light : ThemeMode.dark,
-      home: Home(
-        isLightTheme: isLightTheme,
-        toggleTheme: toggleTheme,
-      ),
-    );
-  }
-```
-
-Leverage the tokens within your widgets like so:
+And you can use it like this:
 
 ```dart
   @override
@@ -210,12 +77,22 @@ Leverage the tokens within your widgets like so:
         color: colors.primary,
         child: Text('Hello world!', style: typography.body1),
     )
-    ...
+    // ...
 ```
 
-### 🎨 Details
+### Features
+- ✨ Generate a Flutter package from your Figma Design System
+- 🎨 Supports many types of tokens:
+  - 🌈 **Color** styles and variables
+  - 🖋️ **Typography** styles (with optional `google_fonts` support!)
+  - 🔢 **Number** variables, which can be generated as Paddings, and Spacers as well
+- 🌓 **Modes** support for variables: Generate different tokens for different themes (e.g. dark/light)
+- 📦 **Package** generation: All your tokens end up in one convenient package. Depend on it from your app, and update it whenever neccessary!
+- 🤝 **Seamless** integration with `Theme`s from `material.dart`: Generated classes are `ThemeExtension`s, so they can be integrated into your app's theme easily!
+- 🎯 **Quick access** using `BuildContext` extensions.
+- 🔮 **Portable**: figmage is a pure dart package, so it can easily be integrated into your CI/CD pipelines, to automatically fetch the latest tokens of your project for you!
+
 
-Design tokens are encapsulated within classes based on their type and collection for variable-based tokens or style group name for style-based tokens. Each class implements `BuildContext` extension which can be used to propagate the design tokens through your app.
 
 [dart_install_link]: https://dart.dev/get-dart
 [github_actions_link]: https://docs.github.com/en/actions/learn-github-actions

pubspec.yaml

@@ -4,6 +4,7 @@ version: 0.1.0-dev.11
 repository: https://github.com/whynotmake-it/figmage
 issue_tracker: https://github.com/whynotmake-it/figmage/issues
 website: https://whynotmake.it/figmage
+documentation: https://figmage.netlify.app
 
 topics: 
   - code-generation

website/.gitignore

@@ -0,0 +1,21 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store

website/README.md

@@ -0,0 +1,55 @@
+# Starlight Starter Kit: Basics
+
+[![Built with Starlight](https://astro.badg.es/v2/built-with-starlight/tiny.svg)](https://starlight.astro.build)
+
+```
+npm create astro@latest -- --template starlight
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/starlight/tree/main/examples/basics)
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/starlight/tree/main/examples/basics)
+[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/withastro/starlight&create_from_path=examples/basics)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fwithastro%2Fstarlight%2Ftree%2Fmain%2Fexamples%2Fbasics&project-name=my-starlight-docs&repository-name=my-starlight-docs)
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+## 🚀 Project Structure
+
+Inside of your Astro + Starlight project, you'll see the following folders and files:
+
+```
+.
+├── public/
+├── src/
+│   ├── assets/
+│   ├── content/
+│   │   ├── docs/
+│   │   └── config.ts
+│   └── env.d.ts
+├── astro.config.mjs
+├── package.json
+└── tsconfig.json
+```
+
+Starlight looks for `.md` or `.mdx` files in the `src/content/docs/` directory. Each file is exposed as a route based on its file name.
+
+Images can be added to `src/assets/` and embedded in Markdown with a relative link.
+
+Static assets, like favicons, can be placed in the `public/` directory.
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command                   | Action                                           |
+| :------------------------ | :----------------------------------------------- |
+| `npm install`             | Installs dependencies                            |
+| `npm run dev`             | Starts local dev server at `localhost:4321`      |
+| `npm run build`           | Build your production site to `./dist/`          |
+| `npm run preview`         | Preview your build locally, before deploying     |
+| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
+| `npm run astro -- --help` | Get help using the Astro CLI                     |
+
+## 👀 Want to learn more?
+
+Check out [Starlight’s docs](https://starlight.astro.build/), read [the Astro documentation](https://docs.astro.build), or jump into the [Astro Discord server](https://astro.build/chat).

website/astro.config.mjs

@@ -0,0 +1,27 @@
+// @ts-check
+import { defineConfig } from 'astro/config';
+import starlight from '@astrojs/starlight';
+
+// https://astro.build/config
+export default defineConfig({
+	integrations: [
+		starlight({
+			title: 'Figmage',
+			social: {
+				github: 'https://github.com/whynotmake-it/figmage',
+			},
+			sidebar: [
+				{
+					label: 'Guides',
+					autogenerate: { directory: 'guides' },
+
+				},
+				{
+					label: 'Reference',
+					autogenerate: { directory: 'reference' },
+				},
+			],
+
+		}),
+	],
+});