Add components

Author: 1ilit

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "arrowParens": "always",
+  "bracketSpacing": false,
+  "bracketSameLine": true,
+  "printWidth": 80,
+  "proseWrap": "never",
+  "singleQuote": true,
+  "trailingComma": "all"
+}

docs/create-diagram.md

@@ -0,0 +1,20 @@
+import ThemedImage from '../src/components/ThemedImage';
+
+# Create a diagram
+
+You can create custom diagrams for MySQL, PostgreSQL, SQLite, MariaDB, or SQL Server. 
+
+<ThemedImage 
+    lightImageSrc="/img/logo.png"
+    darkImageSrc="/img/docusaurus.png"
+/>
+
+### Create a new blank diagram
+
+### Define tables
+
+### Create relationships
+
+### Organize with subject areas
+
+### Add notes

docs/intro.md

@@ -3,46 +3,14 @@ sidebar_position: 1
 slug: /
 ---
 
-# Tutorial Intro
+import Card from '../src/components/Card'; 
+import Flex from '../src/components/Flex';
 
-Let's discover **Docusaurus in less than 5 minutes**.
+# Get started
 
-## Getting Started
+Welcome to DrawDB! Start designing, visualizing, and generating SQL scripts for your database schema in just a few steps – no sign-up required.
 
-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 18.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.
+<Flex>
+  <Card title="📄 Create a new diagram" link='/create-diagram'>Create a new diagram</Card>
+  <Card title="📄 Create a new diagram" link='/create-diagram'>Create a new diagram</Card>
+</Flex>

docs/tutorial-basics/create-a-document.md

@@ -49,7 +49,7 @@ export default {
     'hello',
     {
       type: 'category',
-      label: 'Tutorial',
+      label: 'Docs',
       items: ['tutorial-basics/create-a-document'],
     },
   ],

docusaurus.config.js

@@ -64,14 +64,14 @@ const config = {
         title: 'drawDB',
         logo: {
           alt: 'drawDB logo',
-          src: 'img/icon-dark.png',
+          src: 'img/logo.png',
         },
         items: [
           {
             type: 'docSidebar',
             sidebarId: 'tutorialSidebar',
             position: 'left',
-            label: 'Tutorial',
+            label: 'Docs',
           },
           {
             href: 'https://github.com/drawdb-io/drawdb',
@@ -91,7 +91,7 @@ const config = {
             title: 'Docs',
             items: [
               {
-                label: 'Tutorial',
+                label: 'Docs',
                 to: '/docs/intro',
               },
             ],

src/components/Card/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import styles from './styles.module.css';
+
+export default function Card({title, link, children}) {
+    
+  return (
+    <a className={styles.card} href={link}>
+      <div className={styles.card__title}>{title}</div>
+      <div className={styles.card__body}>{children}</div>
+    </a>
+  );
+}

src/components/Card/styles.module.css

@@ -0,0 +1,21 @@
+.card {
+  display: block;
+  text-decoration: none !important;
+  padding: 20px;
+  border-radius: 8px;
+  border: 1px solid var(--border-color);
+  background-color: var(--bg-color-2);
+  color: var(--color-1);
+}
+
+.card:hover {
+  color: var(--color-1);
+}
+
+.card__title {
+  font-weight: 500;
+}
+
+.card__body {
+  font-size: small;
+}

src/components/Flex/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import styles from './styles.module.css';
+
+export default function Flex({children}) {
+  return (
+    <div className={styles.flex}>
+      {React.Children.map(children, (child) => (
+        <div className={styles.flex__item}>{child}</div>
+      ))}
+    </div>
+  );
+}

src/components/Flex/styles.module.css

@@ -0,0 +1,29 @@
+.flex {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.flex__item {
+  flex: 1;
+}
+
+@media (max-width: 768px) {
+  .flex {
+    gap: 8px;
+  }
+  
+  .flex__item {
+    flex-basis: 100%;
+  }
+}
+
+@media (max-width: 480px) {
+  .flex {
+    gap: 4px;
+  }
+
+  .flex__item {
+    flex-basis: 100%;
+  }
+}

src/components/ThemedImage/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import {useColorMode} from '@docusaurus/theme-common';
+
+export default function ThemedImage({lightImageSrc, darkImageSrc}) {
+  const {isDarkTheme} = useColorMode();
+
+  return (
+    <img
+      src={isDarkTheme ? darkImageSrc : lightImageSrc}
+      alt="Example banner"
+    />
+  );
+}