docs: add new landing page and design (#133)

* docs: upgrade to vitepress 1.alpha and create new landing page

* chore: upgrade fortawesome dependencies

* fix: paths to assets for docs

.github/contributing.md

@@ -2,26 +2,35 @@
 
 ## Issues
 
-For bug reports or feature requests, choose one of the templates provided at: https://github.com/tomosterlund/qalendar/issues/new/choose
+For bug reports or feature requests, choose one of the templates provided
+at: https://github.com/tomosterlund/qalendar/issues/new/choose
+
+Please note, that issues that adhere to the templates, and provide a clear description of the
+problem, will have a greater chance of being resolved than issues that provide less information and
+clarity.
 
 ## Developing
 
 ### Getting up and running
 
 - `npm i`
 - `husky install` - configuring the gitHooks
-- `npm run seed` - Seed the current calendar month with events, or use the [advanced seeding options](#seeding).
+- `npm run seed` - Seed the current calendar month with events, or use
+  the [advanced seeding options](#seeding).
 - `npm run dev`
 
 ### Running tests
 
 While developing, please run `vitest watch`, in order to monitor that all tests are passing.
 
-Since Qalendar is making heavy use of the native JavaScript Date-Object, which has the possibility to create difference output in different time zones, please also run `npm run test:docker` before pushing. This will spin up 3 docker containers, in 3 different time zones, and then run all tests.
+Since Qalendar is making heavy use of the native JavaScript Date-Object, which has the possibility
+to create difference output in different time zones, please also run `npm run test:docker` before
+pushing. This will spin up 3 docker containers, in 3 different time zones, and then run all tests.
 
 ### Seeding
 
-For seeding several months or even a year, you can use the following CLI: `node ./development/faker/seed.js`. Two arguments are available:
+For seeding several months or even a year, you can use the following
+CLI: `node ./development/faker/seed.js`. Two arguments are available:
 
 1. `--months`
 
@@ -47,7 +56,8 @@ Please note that all previously seeded events are deleted upon running the CLI.
 
 ### Committing
 
-This repo uses [commitlint](https://commitlint.js.org/#/) in order to enforce a consistent commit message format. Please use the following format in your commit messages:
+This repo uses [commitlint](https://commitlint.js.org/#/) in order to enforce a consistent commit
+message format. Please use the following format in your commit messages:
 
 ```
 type: subject
@@ -56,9 +66,10 @@ type: subject
 Where `type` is one of the following:
 `feat:`, `fix:`, `docs:`, `style:`, `refactor:`, `perf:`, `test:`, `build:`, `ci:` or `chore:`
 
-The subject should then be a short description of your changes. The full commit message could then for example look like:
+The subject should then be a short description of your changes. The full commit message could then
+for example look like:
 
-- ```feat: add language support for Swahili```  
-- ```fix: add library perfect-scrollbar to prevent layout shifts```  
+- ```feat: add language support for Swahili```
+- ```fix: add library perfect-scrollbar to prevent layout shifts```
 - ```fix: spacing problem in AppHeader component```
 - ```chore: update vue-tsc dependency```

docs/.vitepress/config.js

@@ -4,10 +4,16 @@ export default {
   description: "Vue 3 calendar component",
   themeConfig: {
     nav: [
-      { text: "Home", link: "/" },
+      { text: "Guide", link: "/guide" },
       { text: "v1 to v2", link: "/migration" },
       { text: "Roadmap", link: "https://github.com/tomosterlund/qalendar/projects/1" },
       { text: "Github", link: "https://github.com/tomosterlund/qalendar" },
     ],
+    footer: {
+      message: 'Released under the MIT License.',
+      copyright: 'Copyright © 2022-present Tom Österlund'
+    }
   },
+  outline: [2, 3],
+  appearance: false,
 };

docs/.vitepress/theme/custom.css

@@ -0,0 +1,18 @@
+/* .vitepress/theme/custom.css */
+:root {
+  --vp-c-brand: #646cff;
+  --vp-c-brand-light: #747bff;
+}
+
+.VPDoc:not(.has-sidebar) .content[data-v-10119189] {
+  max-width: 52rem;
+}
+
+.VPDoc:not(.has-sidebar) .content[data-v-10119189] .content-container {
+  max-width: initial;
+}
+
+.image .image-container img {
+  max-width: 100%;
+  max-height: 100%;
+}

docs/.vitepress/theme/index.js

@@ -0,0 +1,5 @@
+// .vitepress/theme/index.js
+import DefaultTheme from 'vitepress/theme'
+import './custom.css'
+
+export default DefaultTheme