feat: modify docs to work with nx (#441)

* feat: modify docs to work with nx

* fix: forward port as arg

* fix: revert

---------

Co-authored-by: orig <[email protected]>

.gitignore

@@ -40,3 +40,7 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+
+# Generated Docusaurus files
+.docusaurus/
+.cache-loader/

.prettierignore

@@ -1,4 +1,2 @@
-# Add files here to ignore them from prettier formatting
-/dist
-/coverage
-README.md
+.prettierignore
+.docusaurus/

apps/docs/.gitignore

@@ -0,0 +1,14 @@
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

apps/docs/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};

apps/docs/docs/api/soon.md

@@ -0,0 +1,5 @@
+# Soon
+
+```js
+// TODO: add docs 😅
+```

apps/docs/docs/overview.md

@@ -0,0 +1,31 @@
+---
+title: Overview
+description: Overview of the project
+hide_table_of_contents: true
+---
+
+### What is Redcued.to?
+
+Reduced.to is a modern web application designed to shorten link URLs, making them easier to remember, share, and track. The project is developed using cutting-edge technologies and services, including NestJS, Redis, Novu, PostgreSQL, and Qwik.
+
+### How does it work?
+
+Simply paste a long URL into the input field and click the "Shorten" button. The application will generate a shortened URL that you can copy and share with others. When a user clicks on the shortened URL, they will be redirected to the original long URL. There is also a dashboard for registered users to view their shortened URLs and track their performance.
+
+### Technologies and Services
+
+To ensure optimal performance, the project uses Redis as a cache storage mechanism. Redis is an efficient, in-memory data structure store that enables fast retrieval of key-value pairs. By leveraging Redis, we can store and retrieve mappings between short links and their corresponding long URLs in a highly efficient manner.
+
+We uses NestJS as the backend framework for the project. NestJS is a progressive Node.js framework that offers a modular architecture and a powerful CLI. By leveraging NestJS, we can develop a robust backend that is easy to maintain and scale.
+
+For data storage, we utilize PostgreSQL, a reliable and robust open-source relational database. PostgreSQL offers excellent data integrity and powerful querying capabilities, ensuring secure storage of user-related information while enabling efficient retrieval and manipulation as needed.
+
+The frontend of the project is developed using Qwik, a cutting-edge framework known for its enhanced performance and scalability. By leveraging Qwik, we deliver a smooth and seamless user interface for an exceptional user experience.
+
+In summary, the reduced.to project is a comprehensive URL shortener that incorporates various technologies and services to ensure optimal performance, security, and user experience. With the integration of Redis, Novu, PostgreSQL, and Qwik, we provide a reliable, efficient, and user-friendly platform for generating shortened URLs.
+
+### Project Architecture Overview
+
+![Project Architecture](/images/architecture.png)
+
+Feel free to explore and contribute to this open-source project. We welcome new contributors and encourage you to join our community!

apps/docs/docusaurus.config.js

@@ -0,0 +1,89 @@
+// @ts-check
+// Note: type annotations allow type checking and IDEs autocompletion
+
+const lightCodeTheme = require('prism-react-renderer/themes/github');
+const darkCodeTheme = require('prism-react-renderer/themes/dracula');
+
+/** @type {import('@docusaurus/types').Config} */
+const config = {
+  title: 'Reduced.to',
+  staticDirectories: ['apps/docs/public', 'apps/docs/static'],
+  tagline:
+    "Reduced.to is a modern web application that reduces the length of link URL, so it's easier to remember, share and track.",
+  favicon: 'images/favicon.png',
+  url: 'https://reduced.to/',
+  baseUrl: '/',
+  projectName: 'reduced.to',
+  onBrokenLinks: 'throw',
+  onBrokenMarkdownLinks: 'warn',
+  i18n: {
+    defaultLocale: 'en',
+    locales: ['en'],
+  },
+  presets: [
+    [
+      'classic',
+      /** @type {import('@docusaurus/preset-classic').Options} */
+      ({
+        docs: {
+          sidebarPath: require.resolve('./sidebars.js'),
+          routeBasePath: '/',
+          editUrl: '/',
+          path: 'apps/docs/docs',
+        },
+        pages: {
+          path: 'apps/docs/src/pages',
+        },
+        blog: false,
+        theme: {
+          customCss: require.resolve('./src/css/custom.css'),
+        },
+      }),
+    ],
+  ],
+
+  themeConfig:
+    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
+    ({
+      navbar: {
+        logo: {
+          alt: 'Reduced.to Logo',
+          src: `images/logo.svg`,
+          //srcDark: `img/logo.svg`,
+          href: '/',
+          target: '_self',
+        },
+        items: [
+          {
+            type: 'search',
+            position: 'right',
+          },
+          {
+            position: 'right',
+            href: 'https://reduced.to',
+            label: 'Visit App',
+          },
+
+          {
+            position: 'right',
+            href: 'https://github.com/origranot/reduced.to',
+            html: `
+                <a  aria-label="GitHub" class="navbar-github-link">
+                  <img src="images/github-logo.png" alt="GitHub Logo" class="navbar-github-logo" />
+                </a>
+              `,
+          },
+        ],
+      },
+      footer: {
+        copyright: `Copyright © ${new Date().getFullYear()} Reduced.to, Inc. Built with Docusaurus.`,
+      },
+      prism: {
+        theme: lightCodeTheme,
+        darkTheme: darkCodeTheme,
+      },
+    }),
+};
+
+module.exports = config;
+

apps/docs/project.json

@@ -0,0 +1,21 @@
+{
+  "name": "docs",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "sourceRoot": "apps/docs/",
+  "targets": {
+    "build": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "npx docusaurus build --out-dir ../../dist/apps/docs --config apps/docs/docusaurus.config.js"
+      }
+    },
+    "serve": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "npx docusaurus start --port 5100 --no-open --config apps/docs/docusaurus.config.js"
+      }
+    }
+  },
+  "tags": []
+}

apps/docs/sidebars.js

@@ -0,0 +1,26 @@
+/**
+ * Creating a sidebar enables you to:
+ - create an ordered group of docs
+ - render a sidebar for each doc of that group
+ - provide next/previous navigation
+
+ The sidebars can be generated from the filesystem, or explicitly defined here.
+
+ Create as many sidebars as you want.
+ */
+
+// @ts-check
+
+/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
+const sidebars = {
+  tutorialSidebar: [
+    'overview',
+    {
+      type: 'category',
+      label: 'API',
+      items: ['api/soon'],
+    },
+  ],
+};
+
+module.exports = sidebars;

apps/docs/src/components/home-page-features/index.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+type FeatureItem = {
+  title: string;
+  Svg: React.ComponentType<React.ComponentProps<'svg'>>;
+  description: JSX.Element;
+};
+
+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&apos;ll do the chores. Go ahead and move your docs into the <code>docs</code>{' '}
+        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 (
+    <div className={clsx('col col--4')}>
+      <div className="text--center">
+        <Svg className={styles.featureSvg} role="img" />
+      </div>
+      <div className="text--center padding-horiz--md">
+        <h3>{title}</h3>
+        <p>{description}</p>
+      </div>
+    </div>
+  );
+}
+
+export default function HomepageFeatures(): JSX.Element {
+  return (
+    <section className={styles.features}>
+      <div className="container">
+        <div className="row">
+          {FeatureList.map((props, idx) => (
+            <Feature key={idx} {...props} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

apps/docs/src/components/home-page-features/styles.module.css

@@ -0,0 +1,11 @@
+.features {
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
+}
+
+.featureSvg {
+  height: 200px;
+  width: 200px;
+}

apps/docs/src/css/custom.css

@@ -0,0 +1,48 @@
+:root {
+  --ifm-color-primary: #478fff;
+  --ifm-color-primary-dark: #478fff;
+  --ifm-color-primary-darker: #478fff;
+  --ifm-color-primary-darkest: #478fff;
+  --ifm-color-primary-light: #478fff;
+  --ifm-color-primary-lighter: #478fff;
+  --ifm-color-primary-lightest: #478fff;
+  --ifm-code-font-size: 95%;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
+    'Helvetica Neue', sans-serif;
+}
+
+/* For readability concerns, you should choose a lighter palette in dark mode. */
+[data-theme='dark'] {
+  background-color: #000000;
+  --ifm-color-primary: #478fff;
+  --ifm-color-primary-dark: #478fff;
+  --ifm-color-primary-darker: #000000;
+  --ifm-color-primary-darkest: #000000;
+  --ifm-color-primary-light: #000000;
+  --ifm-color-primary-lighter: #478fff;
+  --ifm-color-primary-lightest: #478fff;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.798);
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
+    'Helvetica Neue', sans-serif;
+}
+.navbar {
+  background-color: transparent;
+}
+.footer {
+  background-color: transparent;
+}
+
+.navbar-github-link {
+  display: flex;
+  align-items: center;
+}
+
+.navbar-github-logo {
+  height: 24px;
+
+  margin-left: 6px;
+}
+[data-theme='dark'] .navbar-github-logo {
+  filter: brightness(0) invert(1) sepia(1) saturate(5) hue-rotate(180deg);
+}

apps/docs/src/pages/index.module.css

@@ -0,0 +1,23 @@
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+.heroBanner {
+  padding: 4rem 0;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+@media screen and (max-width: 996px) {
+  .heroBanner {
+    padding: 2rem;
+  }
+}
+
+.buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

apps/docs/src/pages/index.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Redirect } from 'react-router-dom';
+
+export default function Home() {
+  return <Redirect to="/overview" />;
+}

apps/docs/src/pages/markdown-page.md

@@ -0,0 +1,7 @@
+---
+title: Markdown page example
+---
+
+# Markdown page example
+
+You don't need React to write simple standalone pages.