Naming convention & few website enhancements

NAMING_CONVENTION.md

@@ -0,0 +1,74 @@
+# Naming Convention
+
+## Hierarchy
+
+The foundation of the naming convention in Iconoir is:
+
+```
+[Object]-[Modifier]-[Container]
+```
+
+### [Object]
+
+Contains one or more objects.
+
+### [Modifier]
+
+It's often an additional and unique element added as a secondary object (`-minus`, `-plus`, `-warning`).
+
+### [Container]
+
+A shape used as a container for the object (`-square`, `-circle`).
+If a shape is directly part of an object, it's not considered a container.
+
+\* You could notice a difference between icons such as
+`user-minus` and `minus-square`. The second one looks different
+because in this case the minus symbol is an _[Object]_, followed
+by the _[Container]_.
+
+## Styles
+
+An optional rule is regarding icons style. Iconoir is actually offering Regular and Solid icons. With the latter, icons names end with `-solid`. An example here:
+
+- Regular\: `check-circle`
+- Solid\: `check-circle-solid`
+
+## Object-Oriented Naming
+
+Exceptions apart, icons follow an object-oriented naming and
+should not embed actions in their names.
+
+Examples:
+
+- `user-minus` is correct.
+- `remove-user` would be wrong.
+
+## Physical Actions
+
+Icons that represent a physical action or movement
+can embed that action in their name.
+
+Examples:
+
+- `walking`, `running`, `vehicle-fast`, `crane-lifting` are correct.
+
+## Most-Used Modifiers and Shapes
+
+### Modifiers
+
+`-plus`, `-minus`, `-warning`, `-check`, `-xmark`, `-tag`,
+`-ban`, `-slash`
+
+- `-plus-in` and `minus-in`: Differently from `-plus` and `-minus`, these are used when the icon
+  has a bigger plus or minus icon in the center or inside the main object.
+- `-no-access`: It's regularly used when the icon has a restrict
+  symbol in a corner.
+
+### Shapes
+
+`-square`, `-circle`
+
+## Exceptions
+
+If you spot an icon that is not following any of the rules,
+please open a [new issue](https://github.com/iconoir-icons/iconoir/issues/new/choose) on GitHub.

NAMING_CONVENTIONS.md

@@ -1,67 +0,0 @@
-# Naming Convention
-
-## Hierarchy
-
-The foundation of the naming conventions in Iconoir is:
-```txt
-[Object]-[Modifier]-[Container]
-```
-[Object]
-It contains one or more objects.
-
-[Modifier]
-It's often an additional and unique element 
-added as a secondary object (`-minus`, `-plus`, `-warning`).
-
-[Container]
-A shape used as a container for the object (`-square`, `-circle`).
-If a shape is directly part of an object, it's not considered a container.
-
-*You could notice a difference between icons such as 
-`user-minus` and `minus-square`. The second one looks different 
-because in this case the minus symbol is an [Object], followed 
-by the [Container].
-
-## Styles
-
-An optional rule is regarding icons style. Iconoir is actually offering Regular and Solid icons. With the latter, icons names end with `-solid`. An example here:
-```txt
-[Regular] check-circle
-[Solid] check-circle-solid
-```
-
-## Object-oriented naming
-
-Exceptions apart, icons follow an object-oriented naming and 
-should not embed actions in their names.
-
-Examples:
-`remove-user` would be wrong. `user-minus` is correct.
-
-## Physical actions
-
-Icons that represent a physical action or movement 
-can embed that action in their name.
-
-Examples:
-`walking`, `running`, `vehicle-fast`, `crane-lifting` are correct.
-
-## Most-used modifiers and shapes
-
-Modifiers:
-`-plus`, `-minus`, `-warning`, `-check`, `-xmark`, `-tag`,
-`-ban`, `-slash`.
-
-`-plus-in` and `minus-in`: Differently from `-plus` and `-minus`, these are used when the icon 
-has a bigger plus or minus icon in the center or inside the main object.
-
-`-no-access`: It's regularly used when the icon has a restrict 
-symbol in a corner.
-
-Shapes:
-`-square`, `-circle`.
-
-## Exceptions
-
-If you spot an icon that is not following any of the rules,
-please open a new #issue on Github.

README.md

@@ -121,4 +121,4 @@ struct ContentView: View {
 
 ## License
 
-[MIT License](./LICENSE)
+[MIT](./LICENSE)

css/README.md

@@ -19,5 +19,3 @@ The class must always be "iconoir-" and then the name of the icon. You can find
 
 The icons are `display: inline-block` and default to the current font size. You can control this
 by adjusting the `::before` styles of the element (which is where the icons are added as a mask).
-
-<SuggestLibrary />

docs/framer.md

@@ -5,5 +5,3 @@ Iconoir is happily part of [Framer](https://framer.com).
 To start using the icons: On the top menu, `Insert` > `Graphics` > `Iconoir`.
 
 You can switch between icons from the right sidebar in the editor.
-
-<SuggestLibrary />

iconoir.com/components/DocumentationNavigation.tsx

@@ -136,7 +136,7 @@ const HeaderItem = styled.div`
   }
 `;
 const NavigationItem = styled.div<{ $active?: boolean }>`
-  padding: 12px 45px 12px 75px;
+  padding: 12px 12px 12px 75px;
   transition:
     background 0.1s linear,
     color 0.1s linear;
@@ -163,7 +163,7 @@ const NavigationItem = styled.div<{ $active?: boolean }>`
     font-weight: 700;
   }
   ${media.lg} {
-    padding: 12px 45px 12px 65px;
+    padding: 12px 12px 12px 65px;
   }
 `;
 const NavigationItemLabel = styled.span`

iconoir.com/components/MDXRemote.tsx

@@ -1,7 +1,6 @@
 import { MDXRemote as CoreMDXRemote, MDXRemoteProps } from 'next-mdx-remote';
-import { SuggestLibrary } from './SuggestLibrary';
 import { Table } from './Table';
-import { Body, Code, H1, H2, H3, Pre } from './Typography';
+import { Body, Code, InlineCode, H1, H2, H3, Pre, Li } from './Typography';
 
 export function MDXRemote(props: MDXRemoteProps) {
   return (
@@ -16,7 +15,8 @@ export function MDXRemote(props: MDXRemoteProps) {
         h2: H2,
         h3: H3,
         table: Table,
-        SuggestLibrary,
+        code: InlineCode,
+        li: Li,
       }}
     />
   );

iconoir.com/components/Typography.tsx

@@ -47,6 +47,12 @@ export const Heading2 = styled.h2`
   font-weight: 700;
 `;
 
+export const InlineCode = styled.span`
+  background: var(--g6);
+  border-radius: 6px;
+  padding: 4px;
+`;
+
 export const Code = styled.div`
   background: var(--g7);
   border: solid 1px var(--g6);
@@ -110,6 +116,14 @@ export const Body = styled.p`
   line-height: 30px;
   margin: 24px 0;
 `;
+
+export const Li = styled.li`
+  font-size: 18px;
+  color: var(--g1);
+  line-height: 30px;
+  margin: 4px 0;
+`;
+
 export const CodeElement = styled.code`
   &&& {
     display: inline-block;

iconoir.com/pages/docs/[...slug].tsx

@@ -18,6 +18,7 @@ import { ReadOnGitHub } from '../../components/ReadOnGitHub';
 import { media } from '../../lib/responsive';
 import { SEO } from '../../components/SEO';
 import { getHeaderProps } from '../../lib/getHeaderProps';
+import { SuggestLibrary } from '@/components/SuggestLibrary';
 
 interface DocumentationPageProps extends HeaderProps {
   source: MDXRemoteSerializeResult;
@@ -45,10 +46,10 @@ export default function DocumentationPage({
           <ContentContainer>
             <InnerContentContainer>
               <MDXRemote {...source} />
-              {navigationItem.noReadOnGitHub ||
-              !navigationItem.filepath ? null : (
+              {!navigationItem.noReadOnGitHub && navigationItem.filepath && (
                 <ReadOnGitHub path={navigationItem.filepath} />
               )}
+              {navigationItem.suggestLibrary && <SuggestLibrary />}
             </InnerContentContainer>
           </ContentContainer>
         </Container>
@@ -95,13 +96,17 @@ export const InnerContentContainer = styled.div`
   }
 `;
 
-export interface DocumentationItem {
+interface DocumentationItemProps {
+  suggestLibrary?: boolean;
+  noReadOnGitHub?: boolean;
+}
+export interface DocumentationItem extends DocumentationItemProps {
   path: string;
   filepath?: string;
+  childrenProps?: DocumentationItemProps;
   children?: DocumentationItem[];
   title: string;
   label?: string;
-  noReadOnGitHub?: boolean;
   skip?: boolean;
 }
 export function getDocumentationStructure(): DocumentationItem[] {
@@ -117,51 +122,46 @@ export function getDocumentationStructure(): DocumentationItem[] {
           title: 'How to contribute',
         },
         {
-          path: 'naming-conventions',
-          filepath: 'NAMING_CONVENTIONS.md',
-          title: 'Naming Conventions',
+          path: 'naming-convention',
+          filepath: 'NAMING_CONVENTION.md',
+          title: 'Naming Convention',
         },
       ],
     },
     {
       path: 'packages',
       title: 'Libraries',
+      childrenProps: { suggestLibrary: true, noReadOnGitHub: true },
       children: [
         {
           path: 'iconoir-react',
           filepath: 'packages/iconoir-react/README.md',
           title: 'React',
-          noReadOnGitHub: true,
         },
         {
           path: 'iconoir-react-native',
           filepath: 'packages/iconoir-react-native/README.md',
           title: 'React Native',
-          noReadOnGitHub: true,
         },
         {
           path: 'iconoir-vue',
           filepath: 'packages/iconoir-vue/README.md',
           title: 'Vue',
-          noReadOnGitHub: true,
         },
         {
           path: 'iconoir-flutter',
           filepath: 'packages/iconoir-flutter/README.md',
           title: 'Flutter',
-          noReadOnGitHub: true,
         },
         {
           path: 'framer',
           filepath: 'docs/framer.md',
           title: 'Framer',
-          noReadOnGitHub: true,
         },
         {
           path: 'css',
           filepath: 'css/README.md',
           title: 'CSS',
-          noReadOnGitHub: true,
         },
       ],
     },
@@ -208,6 +208,7 @@ function structureItemsToPaths(
 function flattenItems(
   items: DocumentationItem[],
   prefix?: string[],
+  childrenProps?: DocumentationItemProps,
 ): DocumentationItem[] {
   return items.reduce<DocumentationItem[]>((acc, item) => {
     return [
@@ -215,6 +216,7 @@ function flattenItems(
       ...(item.filepath
         ? [
             {
+              ...childrenProps,
               ...item,
               path: [...(prefix || []), item.path].filter(Boolean).join('/'),
             },
@@ -224,6 +226,7 @@ function flattenItems(
         ? flattenItems(
             item.children,
             [...(prefix || []), item.path].filter(Boolean),
+            item.childrenProps,
           )
         : []),
     ];
@@ -235,6 +238,8 @@ function itemFromSlug(
   slug: string[],
 ): DocumentationItem {
   const flatItems = flattenItems(items);
+
+  console.log(flatItems);
   const joinedSlug = slug.filter(Boolean).join('/');
   const item = flatItems.find((flatItem) => flatItem.path === joinedSlug);
   if (!item)
@@ -260,6 +265,8 @@ function cleanSource(source: string): string {
 
 export async function getStaticProps(context: GetStaticPropsContext) {
   const items = getDocumentationStructure();
+  console.log(items);
+
   const navigationItem = itemFromSlug(items, context.params!.slug as string[]);
   const repositoryRoot = path.join(process.cwd(), '..');
   const filepath = path.join(repositoryRoot, navigationItem.filepath!);

packages/iconoir-react/README.md

@@ -68,5 +68,3 @@ return (
 ## Icon names
 
 The React components are named as PascalCase variations of their reference names (i.e. `airplane-helix-45deg` becomes `AirplaneHelix45deg`).
-
-<SuggestLibrary />

packages/iconoir-vue/README.md

@@ -91,5 +91,3 @@ import { IconoirProvider, Check } from '@iconoir/vue';
 ## Icon names
 
 The Vue components are named as PascalCase variations of their reference names (i.e. `airplane-helix-45deg` becomes `AirplaneHelix45deg`).
-
-<SuggestLibrary />