chore: moving from docz to docusaurus

Author: tnovau

docs/.eslintrc

@@ -1,2 +1,20 @@
-.docz
-node_modules
+# 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*

docs/.gitignore

@@ -0,0 +1,41 @@
+# Website
+
+This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
+
+## Installation
+
+```bash
+yarn
+```
+
+## Local Development
+
+```bash
+yarn start
+```
+
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+
+## Build
+
+```bash
+yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+## Deployment
+
+Using SSH:
+
+```bash
+USE_SSH=true yarn deploy
+```
+
+Not using SSH:
+
+```bash
+GIT_USER=<Your GitHub username> yarn deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

docs/README.md

@@ -0,0 +1,12 @@
+---
+sidebar_position: 2
+title: Gallery
+---
+
+import { Gallery } from '@site/src/components/Gallery';
+
+# Gallery
+
+Browse all available country flags:
+
+<Gallery />

docs/docs/gallery.mdx

@@ -0,0 +1,45 @@
+---
+slug: /
+sidebar_position: 1
+title: Getting Started
+---
+
+import { CircleFlag } from 'react-circle-flags';
+
+# react-circle-flags
+
+A React component with a collection of 300+ minimal circular SVG country flags.
+
+## Install
+
+```bash
+npm install --save react-circle-flags
+```
+
+## Basic usage
+
+```jsx live
+function FlagExample() {
+  return <CircleFlag countryCode="ar" height="100" />;
+}
+```
+
+You can pass all the React `React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>` props to CircleFlag.
+
+## With custom CDN
+
+```jsx
+import { CircleFlag } from 'react-circle-flags'
+
+export const ArgentinianFlag = () => (
+  <CircleFlag countryCode="ar" height="35" cdnUrl="https://magic-cdn.com/flags/" />
+)
+```
+
+## Language flags
+
+```jsx live
+function LanguageFlagExample() {
+  return <CircleFlagLanguage languageCode="en-us" height="100" />;
+}
+```

docs/docs/getting-started.mdx

@@ -0,0 +1,107 @@
+// @ts-check
+// `@type` JSDoc annotations allow editor autocompletion and type checking
+// (when paired with `@ts-check`).
+// There are various equivalent ways to declare your Docusaurus config.
+// See: https://docusaurus.io/docs/api/docusaurus-config
+
+import {themes as prismThemes} from 'prism-react-renderer';
+
+// This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
+
+/** @type {import('@docusaurus/types').Config} */
+const config = {
+  title: 'My Site',
+  tagline: 'Dinosaurs are cool',
+  favicon: 'img/favicon.ico',
+
+  // Future flags, see https://docusaurus.io/docs/api/docusaurus-config#future
+  future: {
+    v4: true, // Improve compatibility with the upcoming Docusaurus v4
+  },
+
+  // Set the production url of your site here
+  url: 'https://on-the-edge-cloud.github.io/',
+  // Set the /<baseUrl>/ pathname under which your site is served
+  // For GitHub pages deployment, it is often '/<projectName>/'
+  baseUrl: '/react-circle-flags/',
+
+  // GitHub pages deployment config.
+  // If you aren't using GitHub pages, you don't need these.
+  organizationName: 'on-the-edge-cloud', // Usually your GitHub org/user name.
+  projectName: 'react-circle-flags', // Usually your repo name.
+
+  onBrokenLinks: 'throw',
+
+  // Even if you don't use internationalization, you can use this field to set
+  // useful metadata like html lang. For example, if your site is Chinese, you
+  // may want to replace "en" with "zh-Hans".
+  i18n: {
+    defaultLocale: 'en',
+    locales: ['en'],
+  },
+
+  presets: [
+    [
+      'classic',
+      /** @type {import('@docusaurus/preset-classic').Options} */
+      ({
+        docs: {
+          sidebarPath: './sidebars.js',
+          // Please change this to your repo.
+          // Remove this to remove the "edit this page" links.
+          editUrl:
+            'https://github.com/on-the-edge-cloud/react-circle-flags/tree/master/documentation/',
+        },
+        blog: false,
+        theme: {
+          customCss: './src/css/custom.css',
+        },
+      }),
+    ],
+  ],
+
+  themeConfig:
+    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
+    ({
+      // Replace with your project's social card
+      image: 'img/docusaurus-social-card.jpg',
+      colorMode: {
+        respectPrefersColorScheme: true,
+      },
+      navbar: {
+        title: 'react-circle-flags',
+        logo: {
+          alt: 'react-circle-flags Logo',
+          src: 'img/logo.svg',
+        },
+        items: [
+          {
+            href: 'https://github.com/on-the-edge-cloud/react-circle-flags',
+            label: 'GitHub',
+            position: 'right',
+          },
+        ],
+      },
+      footer: {
+        style: 'dark',
+        links: [
+          {
+            title: 'More',
+            items: [
+              {
+                label: 'GitHub',
+                href: 'https://github.com/on-the-edge-cloud/react-circle-flags',
+              },
+            ],
+          },
+        ],
+        copyright: `Copyright © ${new Date().getFullYear()} react-circle-flags. Built with Docusaurus.`,
+      },
+      prism: {
+        theme: prismThemes.github,
+        darkTheme: prismThemes.dracula,
+      },
+    }),
+};
+
+export default config;