Cont: Additional customization and content adds

blog/authors.yml

@@ -4,7 +4,7 @@ adamj:
   url: https://github.com/adamj
   image_url: https://github.com/AdamJ/AdamJ.github.io/blob/main/src/img/avatar.png?raw=true
   page:
-    permalink: '/all-adam-articles'
+    permalink: '/adam'
   socials:
     threads: https://www.threads.net/mindreeper
     github: adamj

blog/template.md

@@ -0,0 +1,20 @@
+---
+title: Welcome Docusaurus
+authors:
+  - adamj
+  - name: Adam jolicoeur
+    title: Co-creator of Docusaurus 1
+    url: https://github.com/AdamJ
+    image_url: https://github.com/AdamJ.png
+    socials:
+      x: mindreeper
+      github: AdamJ
+      threads: mindreeper
+tags: [design, hello, general, development, tips & tricks, resources, css, html, javascript]
+description: This is my first post on Docusaurus.
+image: https://i.imgur.com/mErPwqL.png
+hide_table_of_contents: false
+unlisted: true
+pagination_next: null
+pagination_prev: null
+---

docs/icons-and-images/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "Icons and Images",
-  "position": 5,
+  "position": 3,
   "link": {
     "type": "generated-index",
     "description": "Favorite icon libraries and image sources that I use."

docs/icons-and-images/custom.md

@@ -0,0 +1,12 @@
+---
+sidebar_position: 2
+---
+
+# Custom icons
+
+Based on requirements where the default libraries did not contain desired icons, I created custom ones to meet the stated requirements.
+
+[View on Figma](https://www.figma.com/AdamJ)
+[Download from GitHub](https://www.github.com/AdamJ)
+
+![Sample of custom icons](https://www.github.com/AdamJ)

docs/icons-and-images/libraries.mdx

@@ -0,0 +1,14 @@
+---
+sidebar_position: 1
+---
+
+# Icon Libraries
+
+Below is a table of the various icon libraries that I use within my projects.
+
+| Library | Link | Paid |
+|:--      | :--  | :--  |
+| Font Awesome Pro | [View Plans](https://fontawesome.com/plans) | Yes |
+| Font Awesome Free | [Link](https://fontawesome.com/) | No |
+| Bootstrap icons | [Link](https://icons.getbootstrap.com/) | No |
+| Material Design icons | [Link](https://m3.material.io/styles/icons/overview) | No |

docs/intro.mdx

@@ -2,8 +2,13 @@
 sidebar_position: 1
 ---
 
-# Start Here
+# Welcome
 
 Welcome to my documentation site! I've attempted to consolidate all of my various documents, scripts, and resources here to not only make it easier for myself to find, but potentially help out others across the web.
 
-<a href="./category/the-basics" style={{backgroundColor: '#005d93', padding: '12px 8px', borderRadius: '8px', color: '#fff', fontWeight: 'bold'}}>START</a>
+<Button label="The Basics" link="/docs/category/the-basics" variant="link" />
+<Button label="Icons and Images" link="/docs/category/icons-and-images" variant="link" />
+<Button label="Scripts and Configs" link="/docs/category/scripts-and-configs" variant="link" />
+
+<Icon variant="solid" icon="coffee" />
+<Icon variant="brands" icon="facebook" />

docs/scripts-and-configs/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "Scripts and Configs",
-  "position": 5,
+  "position": 4,
   "link": {
     "type": "generated-index",
     "description": "Various scripts and configuration files from over the years."

docs/the-basics/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "The Basics",
-  "position": 1,
+  "position": 2,
   "link": {
     "type": "generated-index",
     "description": "The basics to do what I do."

docs/the-basics/site.mdx

@@ -0,0 +1,50 @@
+---
+tags: [general, development]
+---
+
+# Site Configuration
+
+This site was built using `.mdx` files vs regular `.md` files in order to utilize the benefits provided by React.
+
+In using `.mdx` syntax, I was able to create reusable React components that allowed me to simplify the code process and without requiring large amounts of customization.
+
+## Examples
+
+A few examples are included below:
+
+### Icons
+
+A simplistic React component that utilizes Font Awesome styles.
+
+```javascript
+<Icon variant="solid" icon="coffee" />
+<Icon variant="brands" icon="facebook" size="xxl" />
+```
+
+<Icon variant="solid" icon="coffee" />
+<Icon variant="brands" icon="facebook" size="xxl" />
+
+### Buttons
+
+```javascript
+<Button label="Primary" link="#site" variant="primary" size="lg" />
+<Button label="Secondary" link="#site" variant="secondary" size="lg" externalID="no" outline />
+<Button label="Link" link="#site" variant="link" />
+<Button label="Disabled" link="#site" disabled />
+<Button label="Block" link="#site" block />
+<Button label="Danger" link="#site" variant="danger" size="sm" outline block />
+```
+
+<Button label="Primary / Large" link="#site" variant="primary" size="lg" />
+<br />
+<Button label="Secondary / Small" link="#using" variant="secondary" size="sm" externalID="no" outline />
+<br />
+<Button label="Link" link="#site" variant="link" />
+<br />
+<Button label="Link w/External Icon" link="#site" variant="link" external />
+<br />
+<Button label="Disabled" link="#site" disabled />
+<br />
+<Button label="Block" link="#site" block />
+<br />
+<Button label="Danger / Outline" link="#site" variant="danger" size="sm" outline />

docs/the-basics/software.md

@@ -8,19 +8,20 @@ What I prefer to use, and have installed, on all of my machines.
 
 ## General
 
-- Arc browser
-- iTerm 2 (check out my [custom configuration](https://github.com/AdamJ/config/iterm "Link to my config repo"))
-- Discord
-- Handbrake
-- Steam
+- [Arc browser](https://www.arc.net)
+- [iTerm 2](https://www.iterm2.com)
+  - [custom configuration](https://github.com/AdamJ/config/iterm "Link to my config repo")
+- [Discord](https://www.discordapp.com)
+- [Handbrake](https://www.handbrake.fr)
+- [Steam](https://store.steampowered.com)
 - PWAs for [GitHub](https://www.github.com/AdamJ), [Threads](https://www.threads.net), and [Linear](https://www.linear.app)
 
 ## Design
 
-- Figma
-- Zeplin
+- [Figma](https://www.figma.com)
+- [Zeplin](https://www.zeplin.io)
 
 ## Development
 
-- VSCode
-- Parallels Desktop (Mac)
+- [VSCode](https://code.visualstudio.com)
+- [Parallels Desktop (Mac)](https://parallels.com)