add website

Author: nasdan

examples/styled/README.md

@@ -13,14 +13,13 @@ import { ImageFocalPoint } from '@lemoncode/react-image-focal-point';
 const App = () => {
   return (
     <ImageFocalPoint
-       src="your-image-src"
-       onChange={(newFocalPoint) => {
-         // Whatever you want to do when the user clicks on the image
-       }}
-     />
+      src="your-image-src"
+      onChange={newFocalPoint => {
+        // Whatever you want to do when the user clicks on the image
+      }}
+    />
   );
-}
-
+};
 ```
 
 Create a css file and provide some styles to the root component:
@@ -32,7 +31,6 @@ _app.css_
   width: 500px;
   height: 500px;
 }
-
 ```
 
 Use it:
@@ -119,4 +117,3 @@ const App = () => {
     height="36"
     />
   </a>
-

package.json

@@ -4,12 +4,12 @@
   "workspaces": [
     "packages/**/*",
     "examples/**/*",
-    "docs/**/*"
+    "website"
   ],
   "scripts": {
     "build": "turbo run build",
     "start": "turbo run start --continue --filter=./examples/**/* --filter=./packages/**/*",
-    "start:e2e": "turbo run start --continue --filter=./packages/**/*",
+    "start:docs": "turbo run start --continue --filter=./website",
     "test": "turbo run test",
     "test:e2e": "turbo run test:e2e",
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",

packages/react-image-focal-point/src/index.ts

@@ -1,2 +1,2 @@
-export * from './image-focal-point.component';
-export * from './image-focal-point.vm';
+export { ImageFocalPoint, type ImageFocalPointProps } from './image-focal-point.component';
+export type { FocalPoint } from './image-focal-point.vm';

website/.gitignore

@@ -0,0 +1,20 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# 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*

website/babel.config.js

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

website/docusaurus.config.js

@@ -0,0 +1,120 @@
+// @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: 'React Image Focal Point',
+  tagline: 'Image focal point component for React',
+  favicon: 'img/favicon.ico',
+
+  // Set the production url of your site here
+  // TODO.
+  url: 'https://your-docusaurus-test-site.com',
+  baseUrl: '/',
+  organizationName: 'lemoncode',
+  projectName: 'react-image-focal-point',
+  onBrokenLinks: 'throw',
+  onBrokenMarkdownLinks: 'warn',
+  i18n: {
+    defaultLocale: 'en',
+    locales: ['en'],
+  },
+  presets: [
+    [
+      'classic',
+      /** @type {import('@docusaurus/preset-classic').Options} */
+      ({
+        docs: {
+          path: '../docs',
+          sidebarPath: require.resolve('./sidebars.js'),
+          remarkPlugins: [require('@docusaurus/remark-plugin-npm2yarn')],
+          showLastUpdateTime: true,
+        },
+        blog: false,
+        theme: {
+          customCss: require.resolve('./src/css/custom.css'),
+        },
+      }),
+    ],
+  ],
+
+  themeConfig:
+    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
+    ({
+      // TODO: Update image
+      image: 'img/docusaurus-social-card.jpg',
+      navbar: {
+        title: 'React Image Focal Point',
+        logo: {
+          alt: 'React Image Focal Point Logo',
+          src: 'img/logo.svg',
+        },
+        items: [
+          {
+            type: 'doc',
+            docId: 'getting-started',
+            position: 'left',
+            label: 'Docs',
+          },
+          {
+            type: 'doc',
+            docId: 'examples/basic',
+            position: 'left',
+            label: 'Examples',
+          },
+          {
+            href: 'https://github.com/Lemoncode/react-image-focal-point',
+            label: 'GitHub',
+            position: 'right',
+          },
+        ],
+      },
+      footer: {
+        style: 'dark',
+        links: [
+          {
+            title: 'Docs',
+            items: [
+              {
+                label: 'Getting Started',
+                to: '/docs/getting-started',
+              },
+            ],
+          },
+          {
+            title: 'Community',
+            items: [
+              {
+                label: 'Twitter',
+                href: 'https://twitter.com/lemoncoders',
+              },
+            ],
+          },
+          {
+            title: 'More',
+            items: [
+              {
+                // TODO: Update blog link
+                label: 'Blog',
+                to: '/',
+              },
+              {
+                label: 'GitHub',
+                href: 'https://github.com/Lemoncode/react-image-focal-point',
+              },
+            ],
+          },
+        ],
+        copyright: `Copyright © ${new Date().getFullYear()} Lemoncode S.L.`,
+      },
+      prism: {
+        theme: lightCodeTheme,
+        darkTheme: darkCodeTheme,
+      },
+    }),
+};
+
+module.exports = config;