Add CapacityUnit and new docs format (#5)

docs/README.md

@@ -1,54 +1,5 @@
-# Astro Starter Kit: Basics
+# Add MeasurementsTool to your project:
 
 ```sh
-npm create astro@latest -- --template basics
+dotnet add package MeasurementsTool
 ```
-
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
-[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)
-[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json)
-
-> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
-
-![just-the-basics](https://github.com/withastro/astro/assets/2244813/a0a5533c-a856-4198-8470-2d67b1d7c554)
-
-## 🚀 Project Structure
-
-Inside of your Astro project, you'll see the following folders and files:
-
-```text
-/
-├── public/
-│   └── favicon.svg
-├── src/
-│   ├── components/
-│   │   └── Card.astro
-│   ├── layouts/
-│   │   └── Layout.astro
-│   └── pages/
-│       └── index.astro
-└── package.json
-```
-
-Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
-
-There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
-
-Any static assets, like images, 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?
-
-Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

docs/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "",
+  "name": "MeasurementsTool-Docs",
   "type": "module",
   "version": "0.0.1",
   "scripts": {
@@ -12,6 +12,7 @@
   "dependencies": {
     "@astrojs/check": "^0.5.4",
     "@astrojs/tailwind": "^5.1.0",
+    "@fontsource-variable/maven-pro": "^5.0.16",
     "astro": "^4.3.7",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.3.3"

docs/src/components/Footer/footer.astro

@@ -0,0 +1,18 @@
+---
+const year = (new Date()).getFullYear();
+---
+
+<section class="flex justify-center">
+    <button class="bg-violet-700">Api</button>
+    <button>GitHub</button>
+    <button>About</button>
+</section>
+<section class="my-5 flex justify-center">
+    {year} MeasurementsTool
+</section>
+
+<style>
+    button {
+        @apply py-1 px-3 m-1 font-semibold rounded-full shadow-md bg-violet-700 hover:bg-violet-800;
+    }
+</style>

docs/src/components/Header/Header.astro

@@ -0,0 +1,46 @@
+---
+var darkMode = true;
+---
+
+<nav
+    class="py-3 px-4 bg-violet-700 flex flex-row items-center align-middle justify-between"
+>
+    <h1 class="font-medium">MeasurementsTool</h1>
+    <button theme-button>
+        {
+            darkMode ? (
+                <svg
+                    class="w-6 h-6 text-gray-800 dark:text-white"
+                    aria-hidden="true"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                >
+                    <path
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M12 21a9 9 0 0 1-.5-18v0A9 9 0 0 0 20 15h.5a9 9 0 0 1-8.5 6Z"
+                    />
+                </svg>
+            ) : (
+                <svg
+                    class="w-6 h-6 text-gray-800 dark:text-white"
+                    aria-hidden="true"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                >
+                    <path
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M12 5V3m0 18v-2M7 7 5.7 5.7m12.8 12.8L17 17M5 12H3m18 0h-2M7 17l-1.4 1.4M18.4 5.6 17 7.1M16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"
+                    />
+                </svg>
+            )
+        }
+    </button>
+</nav>

docs/src/components/Index/WelcomeCard.astro

@@ -0,0 +1,21 @@
+---
+
+---
+
+<card class="bg-img bg-scroll flex flex-col justify-center text-center mx-3 my-16 py-5 md:m-5 md:p-4 bg-indigo-400 rounded-xl shadow-lg">
+    <h1 class="text-3xl font-bold">
+        Welcome to the <strong>MeasurementsTool</strong> C# library
+    </h1>
+    <p class="my-5 text-lg">
+        A C# library for interacting with measures. It is designed to be easy to
+        use and provide a great experience for developers.
+    </p> 
+</card>
+
+<style>
+    .bg-img {
+        background-image: url(public/card-bg.webp);
+        background-repeat: no-repeat;
+        background-size: cover;
+    }
+</style>

docs/src/layouts/Layout.astro

@@ -1,4 +1,6 @@
 ---
+import "@fontsource-variable/maven-pro";
+
 interface Props {
 	title: string;
 }
@@ -12,40 +14,19 @@ const { title } = Astro.props;
 		<meta charset="UTF-8" />
 		<meta name="description" content="Astro description" />
 		<meta name="viewport" content="width=device-width" />
-		<!-- <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> -->
+		<link rel="icon" type="image/svg+xml" href="/MeasurementsTool/measurementstool.ico" />
 		<meta name="generator" content={Astro.generator} />
 		<title>{title}</title>
 	</head>
 	<body>
 		<slot />
 	</body>
 </html>
+
 <style is:global>
-	:root {
-		--accent: 136, 58, 234;
-		--accent-light: 224, 204, 250;
-		--accent-dark: 49, 10, 101;
-		--accent-gradient: linear-gradient(
-			45deg,
-			rgb(var(--accent)),
-			rgb(var(--accent-light)) 30%,
-			white 60%
-		);
-	}
-	html {
-		font-family: system-ui, sans-serif;
-		background: #13151a;
-		background-size: 224px;
-	}
-	code {
-		font-family:
-			Menlo,
-			Monaco,
-			Lucida Console,
-			Liberation Mono,
-			DejaVu Sans Mono,
-			Bitstream Vera Sans Mono,
-			Courier New,
-			monospace;
+	body {
+		font-family: 'Maven Pro Variable', sans-serif;
+		background-color: #161019;
+		color: white;
 	}
 </style>

docs/src/pages/docs.astro

@@ -0,0 +1,7 @@
+---
+import Layout from '../layouts/Layout.astro'
+---
+
+<Layout title='Measurements Tool - Docs'>
+
+</Layout>

docs/src/pages/index.astro

@@ -1,56 +1,15 @@
 ---
 import Layout from '../layouts/Layout.astro';
-import Card from '../components/Card.astro';
+import Header from '../components/Header/Header.astro'
+import Footer from '../components/Footer/footer.astro'
+import WelcomeCard from '../components/Index/WelcomeCard.astro'
 ---
 
-<Layout title="MeasurementsTool">
+<Layout title="Measurements Tool">
 	<main>
-		<h1 class="my-20"><span class="text-gradient">MeasurementsTool</span></h1>
-		<h2 class="py-5 text-5xl text-center">work in progress ⚒</h2>
-		<p class="p-5 my-36 instructions">
-			Just type:
-			<br />
-			<code>WeightUnitType.KG.ConvertTo(WeightUnitType.G, 50.5);</code>
-		</p>
+		<Header/>
+		<WelcomeCard/>
+		<h1 class="flex justify-center m-72">WORK IN PROGRESS</h1>
+		<Footer/>
 	</main>
 </Layout>
-
-<style>
-	main {
-		margin: auto;
-		padding: 1rem;
-		width: 800px;
-		max-width: calc(60% - 2rem);
-		color: white;
-		font-size: 20px;
-		line-height: 1.6;
-	}
-	h1 {
-		font-size: 4rem;
-		font-weight: 700;
-		line-height: 1;
-		text-align: center;
-		margin-bottom: 1em;
-	}
-	.text-gradient {
-		background-image: var(--accent-gradient);
-		-webkit-background-clip: text;
-		-webkit-text-fill-color: transparent;
-		background-size: 400%;
-		background-position: 0%;
-	}
-	.instructions {
-		margin-bottom: 2rem;
-		border: 1px solid rgba(var(--accent-light), 25%);
-		background: linear-gradient(rgba(var(--accent-dark), 66%), rgba(var(--accent-dark), 33%));
-		border-radius: 8px;
-	}
-	.instructions code {
-		font-size: 0.8em;
-		font-weight: bold;
-		background: rgba(var(--accent-light), 12%);
-		color: rgb(var(--accent-light));
-		border-radius: 4px;
-		padding: 0.3em 0.4em;
-	}
-</style>