docs(:pencil:) Docs docs docs

docs/docs/radio.md

@@ -34,7 +34,7 @@ Our basic checkbox can take on three different shapes: square, `p-curve`, `p-rou
 
 <div class="pretty p-default p-round">
     <input type="radio" name="a" />
-    <div class="state">
+    <div className="state">
         <label>Regular Radio</label>
     </div>
 </div>

docs/docusaurus.config.js

@@ -14,6 +14,20 @@ module.exports = {
     themes: ['@docusaurus/theme-live-codeblock'],
     plugins: ['docusaurus-plugin-sass'],
     themeConfig: {
+        // switchConfig: {
+        //     darkIcon: '🌙',
+        //     darkIconStyle: {
+        //         marginLeft: '2px',
+        //     },
+        //     lightIcon: '\u2600',
+        //     lightIconStyle: {
+        //         marginLeft: '1px',
+        //     },
+        // },
+        prism: {
+            theme: require('prism-react-renderer/themes/github'),
+            darkTheme: require('prism-react-renderer/themes/palenight'),
+        },
         navbar: {
             title: 'Pretty Checkbox',
             logo: {
@@ -46,8 +60,8 @@ module.exports = {
                         },
                         {
                             label: 'Basic Concepts',
-                            to: 'docs/basic-concepts/intro/'
-                        }
+                            to: 'docs/basic-concepts/intro/',
+                        },
                     ],
                 },
                 {

docs/src/css/custom.scss

@@ -64,14 +64,17 @@ header.hero {
     }
 }
 
-html[data-theme="dark"] {
+html[data-theme='dark'] {
     a > code {
         color: var(--ifm-color-primary-lightest);
     }
 }
 
-html[data-theme="light"] {
+html[data-theme='light'] {
     a > code {
         color: var(--ifm-color-primary-darkest);
     }
+    .docusaurus-highlight-code-line {
+        background-color: #fffbdd;
+    }
 }

docs/src/pages/index.js

@@ -4,43 +4,42 @@ import Layout from '@theme/Layout';
 import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import preview from '../../static/img/preview.gif';
 import styles from './styles.module.css';
 
 const features = [
     {
         title: <>Easy to Use</>,
-        imageUrl: 'img/undraw_docusaurus_mountain.svg',
         description: (
             <>
-                Docusaurus was designed from the ground up to be easily installed and used to get
-                your website up and running quickly.
+                Simple CSS selectors makes pretty checkbox a breeze to use. Mix- n' match colors,
+                animations, and icons to create your perfect checkbox, radio, or switch control.
             </>
         ),
     },
     {
-        title: <>Focus on What Matters</>,
-        imageUrl: 'img/undraw_docusaurus_tree.svg',
+        title: <>Customization Ready</>,
         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.
+                Pretty Checkbox is powered by Sass and allows you to easily customize colors so it
+                integrates nicely into your design system.
             </>
         ),
     },
     {
-        title: <>Powered by React</>,
-        imageUrl: 'img/undraw_docusaurus_react.svg',
+        title: <>Powered by HTML</>,
         description: (
             <>
-                Extend or customize your website layout by reusing React. Docusaurus can be extended
-                while reusing the same header and footer.
+                Pretty Checkbox is not a soft control. All inputs are powered by regular HTML which
+                means it's accessible by default. Show all users of the world-wide web some love ❤️
             </>
         ),
     },
 ];
 
 function Feature({ imageUrl, title, description }) {
     const imgUrl = useBaseUrl(imageUrl);
+
     return (
         <div className={clsx('col col--4', styles.feature)}>
             {imgUrl && (
@@ -89,6 +88,9 @@ function Home() {
                         </div>
                     </section>
                 )}
+                <div className="text--center">
+                    <img src={preview} alt="preview" />
+                </div>
             </main>
         </Layout>
     );