Update docs to use markdown files

components/docs/Introduction.vue

@@ -1,28 +0,0 @@
-<template>
-  <div id="intro" class="py-10 md:py-40">
-    <div class="flex md:-ml-8 mb-8">
-      <div>
-        <span class="material-icons text-success text-2xl">priority_high</span>
-      </div>
-      <p class="pl-2 text-sm md:text-lg">
-        Help needed writing documentation! This website is on <a href="https://github.com/advplyr/audiobookshelf-web" target="_blank" class="text-blue-500 underline">github</a>. Join the <a href="https://github.com/advplyr/audiobookshelf/discussions" target="_blank" class="text-blue-500 underline">discussion</a>,
-        <a href="https://github.com/advplyr/audiobookshelf/issues" target="_blank" class="text-blue-500 underline">report an issue</a> or contact me directly at <a href="mailto:advplyr@protonmail.com" class="text-blue-500 underline">advplyr@protonmail.com</a>.
-      </p>
-    </div>
-
-    <p class="px-2 text-sm md:text-lg">
-      Audiobookshelf works best when you have an organized directory structure like shown below. This is because information is taken from your folder names. This includes the author name, series name, book title, publish year, volume number, and subtitle. However, you can enable scanner settings to prefer using your audio file ID3 tags or an OPF file over using folder names.
-    </p>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {}
-  },
-  computed: {},
-  methods: {},
-  mounted() {}
-}
-</script>

components/docs/book/AdditionalMetadataFiles.vue

@@ -1,10 +1,5 @@
 <template>
-  <div id="book-additional-metadata" class="py-10 md:py-20">
+  <div id="book-additional-metadata" class="not-prose">
-    <h1 class="text-xl md:text-3xl mb-4 md:-ml-8">
-      <nuxt-link to="#book-additional-metadata"><span class="material-icons text-lg md:text-xl text-gray-400 hover:text-white cursor-pointer mr-2">tag</span></nuxt-link
-      >Additional Metadata Files
-    </h1>
-
     <p class="my-4">If you have a file named <span class="bg-white bg-opacity-10 text-gray-100 rounded-md p-1 font-mono">desc.txt</span> in the library item folder it will be used as the description.</p>
     <p class="my-4">If you have a file named <span class="bg-white bg-opacity-10 text-gray-100 rounded-md p-1 font-mono">reader.txt</span> in the library item folder it will be used as the narrator.</p>
     <p class="mt-4">If you have an <a href="https://docs.fileformat.com/ebook/opf/" target="_blank" class="text-blue-500 hover:text-blue-300 underline">OPF file</a> with extension <span class="bg-white bg-opacity-10 text-gray-100 rounded-md p-1 font-mono">.opf</span> in the library item folder it will be parsed.<br />Details extracted from OPF:</p>

components/docs/book/AudioMetadata.vue

@@ -1,10 +1,5 @@
 <template>
-  <div id="book-audio-metadata" class="py-10 md:py-20">
+  <div id="book-audio-metadata" class="not-prose">
-    <h1 class="text-xl md:text-3xl mb-4 md:-ml-8">
-      <nuxt-link to="#book-audio-metadata"><span class="material-icons text-lg md:text-xl text-gray-400 hover:text-white cursor-pointer mr-2">tag</span></nuxt-link
-      >Audio File Metadata
-    </h1>
-
     <p class="mb-4 text-sm md:text-base">Audiobookshelf uses the ID3 metadata tags in audio files to populate data.</p>
 
     <div class="flex -ml-8 mb-4">

components/docs/book/AudioTracks.vue

@@ -1,10 +1,5 @@
 <template>
-  <div id="book-tracks" class="py-10 md:py-20">
+  <div id="book-tracks" class="not-prose">
-    <h1 class="text-xl md:text-3xl mb-4 md:-ml-8">
-      <nuxt-link to="#book-tracks"><span class="material-icons text-lg md:text-xl text-gray-400 hover:text-white cursor-pointer mr-2">tag</span></nuxt-link
-      >Audio Tracks
-    </h1>
-
     <p class="text-sm md:text-base">An audiobook contains tracks. Tracks are audio files assigned a track number. <br />The track number is parsed from the audio filename and from the ID3 tags of the audio file.<br />Audiobooks that are made up of multiple discs or cd's will be ordered first by disc number then by track number.</p>
 
     <table class="my-4">

components/docs/book/AuthorFolderNaming.vue

@@ -1,10 +1,5 @@
 <template>
-  <div id="book-author-folder" class="py-10 md:py-20">
+  <div id="book-author-folder" class="not-prose">
-    <h1 class="text-xl md:text-3xl mb-4 md:-ml-8">
-      <nuxt-link to="#book-author-folder"><span class="material-icons text-lg text-gray-400 hover:text-white cursor-pointer mr-2">tag</span></nuxt-link
-      >Author Folder Naming
-    </h1>
-
     <p class="mb-4 text-sm md:text-base">Supports "Last, First" author naming as well as multiple authors separated by "," or "&".<br /><br />Valid author folder names:</p>
 
     <div class="p-4 border border-opacity-10 bg-primary bg-opacity-20 font-mono">

components/docs/book/DirectoryStructure.vue

@@ -1,11 +1,6 @@
 <template>
-  <div id="book-structure" class="py-10 md:py-20">
+  <div class="not-prose">
-    <h1 class="text-xl md:text-3xl mb-4 md:-ml-8">
+    <p class="mb-4 text-sm md:text-base">Here is an example supported directory structure for Books</p>
-      <nuxt-link to="#book-structure"><span class="material-icons text-lg md:text-xl text-gray-400 hover:text-white cursor-pointer mr-2">tag</span></nuxt-link
-      >Book Directory Structure
-    </h1>
-
-    <p class="mb-4 text-sm md:text-base">Here is an example supported directory structure</p>
 
     <div class="p-4 border border-opacity-10 bg-primary bg-opacity-20 font-mono">
       <div class="flex py-1 max-w-2xl">

components/docs/book/TitleFolderNaming.vue

@@ -1,10 +1,5 @@
 <template>
-  <div id="book-title-folder" class="py-10 md:py-20">
+  <div id="book-title-folder" class="not-prose">
-    <h1 class="text-xl md:text-3xl mb-4 md:-ml-8">
-      <nuxt-link to="#book-title-folder"><span class="material-icons text-lg md:text-xl text-gray-400 hover:text-white cursor-pointer mr-2">tag</span></nuxt-link
-      >Title Folder Naming
-    </h1>
-
     <p class="mb-4">In addition to the book title, the title folder can include the publish year, volume number, the subtitle, and the narrator.</p>
     <p class="mb-4">Here are a bunch of ways the same book could be named:</p>
 
@@ -43,7 +38,7 @@
       </div>
       <div class="flex py-1">
         <img src="/folder.svg" class="h-6" />
-        <p class="pl-2">Vol. 1 - 1994 - Wizards First Rule - A Really Good Subtitle  {Sam Tsoutsouvas}</p>
+        <p class="pl-2">Vol. 1 - 1994 - Wizards First Rule - A Really Good Subtitle {Sam Tsoutsouvas}</p>
       </div>
       <div class="flex py-1">
         <img src="/folder.svg" class="h-6" />
@@ -60,15 +55,23 @@
     </div>
 
     <ul class="list-outside md:list-inside px-6 md:px-0 list-disc my-4 text-sm md:text-base">
-      <li class="py-1"><strong><u>Subtitle</u>:</strong> Parsing out subtitles into a separate field is optional and must be enabled in settings. Subtitle must be separated by " - ".</li>
+      <li class="py-1">
-      <li class="py-1"><strong><u>Volume Number</u>:</strong> Case insensitive & decimals supported.</li>
+        <strong><u>Subtitle</u>:</strong> Parsing out subtitles into a separate field is optional and must be enabled in settings. Subtitle must be separated by " - ".
-        <ul>
+      </li>
-          <li style="padding-left: 3em">The volume number can be placed anywhere in the folder name.</li>
+      <li class="py-1">
-          <li style="padding-left: 3em">It must be followed by " - " or ". "</li>
+        <strong><u>Volume Number</u>:</strong> Case insensitive & decimals supported.
-          <li style="padding-left: 3em">If it is not at the beginning of the folder name, it must be preceded by " - " and "Vol" "Vol." "Volume" or "Book"</li>
+      </li>
-        </ul>
+      <ul>
-      <li class="py-1"><strong><u>Publish Year</u>:</strong> The publish year must be the first part of the name OR directly after a volume number, and separated by " - " on both sides.</li>
+        <li style="padding-left: 3em">The volume number can be placed anywhere in the folder name.</li>
-      <li class="py-1"><strong><u>Discs and Disc Numbers</u>:</strong> You have to name each folder in the format of CD1, CD01, or CD001; Disk Folder support is not fully supported yet.</li>
+        <li style="padding-left: 3em">It must be followed by " - " or ". "</li>
+        <li style="padding-left: 3em">If it is not at the beginning of the folder name, it must be preceded by " - " and "Vol" "Vol." "Volume" or "Book"</li>
+      </ul>
+      <li class="py-1">
+        <strong><u>Publish Year</u>:</strong> The publish year must be the first part of the name OR directly after a volume number, and separated by " - " on both sides.
+      </li>
+      <li class="py-1">
+        <strong><u>Discs and Disc Numbers</u>:</strong> You have to name each folder in the format of CD1, CD01, or CD001; Disk Folder support is not fully supported yet.
+      </li>
     </ul>
   </div>
 </template>

components/docs/podcast/DirectoryStructure.vue

@@ -1,11 +1,6 @@
 <template>
-  <div id="podcast-structure" class="py-10 md:py-20">
+  <div id="podcast-structure" class="not-prose">
-    <h1 class="text-xl md:text-3xl mb-4 md:-ml-8">
+    <p class="mb-4 text-sm md:text-base">Here is an example supported directory structure for Podcasts</p>
-      <nuxt-link to="#podcast-structure"><span class="material-icons text-lg md:text-xl text-gray-400 hover:text-white cursor-pointer mr-2">tag</span></nuxt-link
-      >Podcast Directory Structure
-    </h1>
-
-    <p class="mb-4 text-sm md:text-base">Here is an example supported directory structure</p>
 
     <div class="p-4 border border-opacity-10 bg-primary bg-opacity-20 font-mono">
       <div class="flex py-1 max-w-2xl">

content/docs/0.introduction.md

@@ -0,0 +1,13 @@
+---
+title: Introduction
+category: Introduction
+slug: 0.introduction
+hash: "#intro"
+fullpath: /docs
+---
+
+Audiobookshelf works best when you have an organized directory structure like shown below. This is because information is taken from your folder names. This includes the author name, series name, book title, publish year, volume number, and subtitle. However, you can enable scanner settings to prefer using your audio file ID3 tags or an OPF file over using folder names.
+
+Join our [Discord server](https://discord.gg/pJsjuNCKRq) or [Matrix space](https://matrix.to/#/#audiobookshelf:matrix.org).
+
+API documentation can be found [here](https://api.audiobookshelf.org/).

content/docs/books/10.audio-metadata.md

@@ -0,0 +1,10 @@
+---
+title: Audio Metadata
+category: Books
+slug: 10.book-audio-metadata
+hash: "#book-audio-metadata"
+fullpath: /docs#book-audio-metadata
+---
+
+<docs-book-audio-metadata></docs-book-audio-metadata>
+

content/docs/books/11.audio-tracks.md

@@ -0,0 +1,10 @@
+---
+title: Audio Tracks
+category: Books
+slug: 11.book-audio-tracks
+hash: "#book-audio-tracks"
+fullpath: /docs#book-audio-tracks
+---
+
+<docs-book-audio-tracks></docs-book-audio-tracks>
+

content/docs/books/12.additional-metadata-files.md

@@ -0,0 +1,10 @@
+---
+title: Additional Metadata
+category: Books
+slug: 12.book-additional-metadata
+hash: "#book-additional-metadata"
+fullpath: /docs#book-additional-metadata
+---
+
+<docs-book-additional-metadata-files></docs-book-additional-metadata-files>
+

content/docs/books/7.directory-structure.md

@@ -0,0 +1,10 @@
+---
+title: Directory Structure
+category: Books
+slug: 7.book-directory-structure
+hash: "#book-directory-structure"
+fullpath: /docs#book-directory-structure
+---
+
+<docs-book-directory-structure></docs-book-directory-structure>
+

content/docs/books/8.author-folder-naming.md

@@ -0,0 +1,10 @@
+---
+title: Author Folder Naming
+category: Books
+slug: 8.book-author-folder-naming
+hash: "#book-author-folder-naming"
+fullpath: /docs#book-author-folder-naming
+---
+
+<docs-book-author-folder-naming></docs-book-author-folder-naming>
+

content/docs/books/9.title-folder-naming.md

@@ -0,0 +1,10 @@
+---
+title: Title Folder Naming
+category: Books
+slug: 9.book-title-folder-naming
+hash: "#book-title-folder-naming"
+fullpath: /docs#book-title-folder-naming
+---
+
+<docs-book-title-folder-naming></docs-book-title-folder-naming>
+

content/docs/install/1.docker-install.md

@@ -0,0 +1,34 @@
+---
+title: Docker
+category: Install
+slug: 1.docker-install
+hash: "#docker-install"
+fullpath: /docs#docker-install
+---
+
+```bash
+docker pull ghcr.io/advplyr/audiobookshelf
+
+docker run -d \
+  -e AUDIOBOOKSHELF_UID=99 \
+  -e AUDIOBOOKSHELF_GID=100 \
+  -p 13378:80 \
+  -v </path/to/config>:/config \
+  -v </path/to/metadata>:/metadata \
+  -v </path/to/audiobooks>:/audiobooks \
+  -v </path/to/podcasts>:/podcasts \
+  --name audiobookshelf \
+  --rm ghcr.io/advplyr/audiobookshelf
+```
+
+  > 
+  > <small class="text-error block">\* Remember to change the path to your actual directory and remove the <> symbols</small>
+  > <small class="text-error block">\* Volume mappings should all be separate directories that are not contained in eachother</small>
+  > <small class="text-error block">\* Windows users will need to remove the \ and run this as a single line</small>
+  > 
+
+**Volume mappings**
+- /config will contain the database (users/books/libraries/settings)
+- /metadata will contain cache, streams, covers, downloads, backups and logs
+- Map any other directories you want to use for your book and podcast collections (ebooks supported as experimental)
+

content/docs/install/2.docker-compose-install.md

@@ -0,0 +1,34 @@
+---
+title: Docker Compose
+category: Install
+slug: 2.docker-compose-install
+hash: "#docker-compose-install"
+fullpath: /docs#docker-compose-install
+---
+
+```bash
+version: "3.7"
+services:
+  audiobookshelf:
+    image: ghcr.io/advplyr/audiobookshelf:latest
+    environment:
+      - AUDIOBOOKSHELF_UID=99
+      - AUDIOBOOKSHELF_GID=100
+    ports:
+      - 13378:80
+    volumes:
+      - </path/to/audiobooks>:/audiobooks
+      - </path/to/podcasts>:/podcasts
+      - </path/to/config>:/config
+      - </path/to/metadata>:/metadata
+```
+
+  > 
+  > <small class="text-error block">\* Remember to change the path to your actual directory and remove the &#60;&#62; symbols</small>
+  > <small class="text-error block">\* Volume mappings should all be separate directories that are not contained in eachother</small>
+  > 
+
+  **Volume mappings**
+- /config will contain the database (users/books/libraries/settings)
+- /metadata will contain cache, streams, covers, downloads, backups and logs
+- Map any other directories you want to use for your book and podcast collections (ebooks supported as experimental)

content/docs/install/3.linux-install.md

@@ -0,0 +1,48 @@
+---
+title: Linux
+category: Install
+slug: 3.linux-install
+hash: "#linux-install"
+fullpath: /docs#linux-install
+---
+
+<small class="text-error block">\* Only for amd64 architecture</small>
+
+Will use config file `/etc/default/audiobookshelf` if exists or create the following default config:
+
+```bash
+METADATA_PATH=/usr/share/audiobookshelf/metadata
+CONFIG_PATH=/usr/share/audiobookshelf/config
+FFMPEG_PATH=/usr/lib/audiobookshelf-ffmpeg/ffmpeg
+FFPROBE_PATH=/usr/lib/audiobookshelf-ffmpeg/ffprobe
+TONE_PATH=/usr/lib/audiobookshelf-ffmpeg/tone
+PORT=13378
+```
+
+## PPA Install (recommended)
+
+```bash
+curl -s --compressed "https://advplyr.github.io/audiobookshelf-ppa/KEY.gpg" | sudo apt-key add - 
+
+sudo curl -s --compressed -o /etc/apt/sources.list.d/audiobookshelf.list "https://advplyr.github.io/audiobookshelf-ppa/audiobookshelf.list" 
+
+sudo apt update 
+
+sudo apt install audiobookshelf
+```
+
+or use this one liner
+
+```bash
+curl -s --compressed "https://advplyr.github.io/audiobookshelf-ppa/KEY.gpg" | sudo apt-key add - && sudo curl -s --compressed -o /etc/apt/sources.list.d/audiobookshelf.list "https://advplyr.github.io/audiobookshelf-ppa/audiobookshelf.list" && sudo apt update && sudo apt install audiobookshelf
+```
+
+## Debian Install
+
+You can get the latest Debian package from the [audiobookshelf-ppa](https://github.com/advplyr/audiobookshelf-ppa) github repo.
+
+```bash
+wget https://advplyr.github.io/audiobookshelf-ppa/audiobookshelf_2.2.11_amd64.deb
+
+sudo apt install ./audiobookshelf_2.2.11_amd64.deb
+```

content/docs/install/4.windows-install.md

@@ -0,0 +1,15 @@
+---
+title: Windows
+category: Install
+slug: 4.windows-install
+hash: "#windows-install"
+fullpath: /docs#windows-install
+---
+
+**Windows installer is not yet available.** However...
+
+You can install audiobookshelf on Windows using Docker. Check out [this](/guides/docker-install) user-contributed guide for installing on Windows and join our Discord/Matrix server for support.
+
+  > 
+  > **We are looking for a .NET developer familiar with building Windows installers to help!**
+  > 

content/docs/install/5.reverse-proxy-setup.md

@@ -0,0 +1,13 @@
+---
+title: Reverse Proxy
+category: Install
+slug: 5.reverse-proxy-setup
+hash: "#reverse-proxy-setup"
+fullpath: /docs#reverse-proxy-setup
+---
+
+
+[See Github readme](https://github.com/advplyr/audiobookshelf#reverse-proxy-set-up) for user-contributed reverse proxy configs
+
+
+<small class="text-error block">\* Please join the discord or matrix server before reporting an issue with your reverse proxy setup on Github.</small>

content/docs/install/6.mobile-apps.md

@@ -0,0 +1,16 @@
+---
+title: Mobile Apps
+category: Install
+slug: 6.mobile-apps-install
+hash: "#mobile-apps-install"
+fullpath: /docs#mobile-apps-install
+---
+
+The mobile apps are open source on [Github](https://github.com/advplyr/audiobookshelf-app). Report bugs and suggest features there.
+
+### Android
+<a href="https://play.google.com/store/apps/details?id=com.audiobookshelf.app" class="text-blue-500 hover:text-blue-300 underline" target="_blank">Install from the Google Play Store.</a>
+
+### iOS
+<a href="https://testflight.apple.com/join/wiic7QIW" class="text-blue-500 hover:text-blue-300 underline" target="_blank">Join Test Flight beta testing and install the app.</a>
+

content/docs/podcasts/13.directory-structure.md

@@ -0,0 +1,10 @@
+---
+title: Directory Structure
+category: Podcasts
+slug: 13.podcast-directory-structure
+hash: "#podcast-directory-structure"
+fullpath: /docs#podcast-directory-structure
+---
+
+<docs-podcast-directory-structure></docs-podcast-directory-structure>
+

layouts/default.vue

@@ -6,13 +6,13 @@
       </nuxt-link>
       <nuxt-link to="/" class="text-2xl pl-2 sm:pl-4 font-book hover:underline hidden lg:block">audiobookshelf</nuxt-link>
 
-      <nuxt-link to="/install" class="h-full px-3 lg:px-5 flex items-center ml-2 lg:ml-12 cursor-pointer" :class="routeName === 'install' ? 'bg-bg bg-opacity-50 text-white' : 'hover:text-white hover:bg-bg hover:bg-opacity-50 text-gray-300'">
+      <nuxt-link to="/docs" class="h-full px-3 lg:px-5 ml-2 lg:ml-12 flex items-center cursor-pointer" :class="routeName === 'docs' ? 'bg-bg bg-opacity-50 text-white' : 'hover:text-white hover:bg-bg hover:bg-opacity-50 text-gray-300'">
-        <p class="text-base md:text-lg">Install</p>
-      </nuxt-link>
-      <nuxt-link to="/docs" class="h-full px-3 lg:px-5 flex items-center cursor-pointer" :class="routeName === 'docs' ? 'bg-bg bg-opacity-50 text-white' : 'hover:text-white hover:bg-bg hover:bg-opacity-50 text-gray-300'">
         <p class="text-base md:text-lg hidden md:block">Documentation</p>
         <p class="text-base md:text-lg md:hidden">Docs</p>
       </nuxt-link>
+      <nuxt-link to="/guides" class="h-full px-3 lg:px-5 flex items-center cursor-pointer" :class="routeName === 'guides' ? 'bg-bg bg-opacity-50 text-white' : 'hover:text-white hover:bg-bg hover:bg-opacity-50 text-gray-300'">
+        <p class="text-base md:text-lg">Guides</p>
+      </nuxt-link>
       <nuxt-link to="/support" class="h-full px-3 lg:px-5 items-center cursor-pointer flex" :class="routeName === 'support' ? 'bg-bg bg-opacity-50 text-white' : 'hover:text-white hover:bg-bg hover:bg-opacity-50 text-gray-300'">
         <p class="text-base md:text-lg hidden md:block">How to Support</p>
         <p class="text-base md:text-lg md:hidden">Support</p>

layouts/docs.vue

@@ -1,5 +1,4 @@
 <template>
-
   <div class="w-screen h-screen max-w-full max-h-screen text-white bg-gradient overflow-hidden">
     <div id="sidebar" class="hidden md:block fixed top-0 left-0 h-full bg-primary border-r border-white border-opacity-25">
       <div class="flex justify-center items-center py-4 mb-6">
@@ -9,23 +8,14 @@
         <nuxt-link to="/" class="text-2xl pl-2 sm:pl-4 font-book hover:underline">audiobookshelf</nuxt-link>
       </div>
 
-      <sidebar-nav-item v-for="item in introItems" :key="item.hash" :hash="item.hash" :text="item.text" :selected="currentHash === item.hash" />
+      <template v-for="category in pageGrouping">
+        <div :key="category.title">
+          <p v-if="category.title !== 'Introduction'" class="px-4 py-1 text-xs font-bold text-white uppercase mt-6 mb-1">{{ category.title }}</p>
 
-      <p class="px-4 py-1 text-xs font-bold text-white uppercase mt-6 mb-1">Install</p>
+          <sidebar-nav-item v-for="item in category.pages" :key="item.slug" :hash="item.hash" :text="item.title" :selected="currentHash === item.hash" />
+        </div>
+      </template>
 
-      <sidebar-nav-item v-for="item in installItems" :key="item.hash" :hash="item.hash" :text="item.text" :selected="currentHash === item.hash" />
-
-      <p class="px-4 py-1 text-xs font-bold text-white uppercase mt-6 mb-1">Updating</p>
-
-      <sidebar-nav-item v-for="item in updateItems" :key="item.hash" :hash="item.hash" :text="item.text" :selected="currentHash === item.hash" />
-
-      <p class="px-4 py-1 text-xs font-bold text-white uppercase mt-6 mb-1">Books</p>
-
-      <sidebar-nav-item v-for="item in bookItems" :key="item.hash" :hash="item.hash" :text="item.text" :selected="currentHash === item.hash" />
-
-      <p class="px-4 py-1 text-xs font-bold text-white uppercase mt-6 mb-1">Podcasts</p>
-
-      <sidebar-nav-item v-for="item in podcastItems" :key="item.hash" :hash="item.hash" :text="item.text" :selected="currentHash === item.hash" />
     </div>
     <div id="docs-content" class="overflow-y-auto max-w-full overflow-x-hidden">
       <Nuxt />
@@ -35,70 +25,38 @@
 
 <script>
 export default {
+  async fetch() {
+    this.content = await this.$content('docs', { deep: true }).fetch()
+    this.content.sort((a, b) => Number(a.slug.split('.').shift()) - Number(b.slug.split('.').shift()))
+
+    if (process.env.NODE_ENV === 'development') console.log('CONTENT', this.content)
+  },
   data() {
     return {
-      lastScrollTop: 0,
+      content: [],
-      introItems: [
-        {
-          hash: '#intro',
-          text: 'Introduction'
-        }
-      ],
-      installItems: [
-        {
-          hash: '#install-docker',
-          text: 'Docker'
-        },
-        {
-          hash: '#install-docker-compose',
-          text: 'Docker-compose'
-        }
-      ],
-      updateItems: [
-        {
-          hash: '#updating-docker',
-          text: 'Docker'
-        }
-      ],
-      bookItems: [
-        {
-          hash: '#book-structure',
-          text: 'Directory Structure'
-        },
-        {
-          hash: '#book-author-folder',
-          text: 'Author Folder Naming'
-        },
-        {
-          hash: '#book-title-folder',
-          text: 'Title Folder Naming'
-        },
-        {
-          hash: '#book-audio-metadata',
-          text: 'Audio Metadata'
-        },
-        {
-          hash: '#book-additional-metadata',
-          text: 'Additional Metadata'
-        },
-        {
-          hash: '#book-tracks',
-          text: 'Audio Tracks'
-        }
-      ],
-      podcastItems: [
-        {
-          hash: '#podcast-structure',
-          text: 'Directory Structure'
-        }
-      ],
       currentHash: null
     }
   },
-  computed: {},
+  computed: {
+    pageGrouping() {
+      const group = {}
+      this.content.forEach((c) => {
+        if (!group[c.category]) {
+          group[c.category] = {
+            title: c.category,
+            pages: [c]
+          }
+        } else {
+          group[c.category].pages.push(c)
+        }
+      })
+      return group
+    }
+  },
   watch: {
     '$route.hash'(newVal) {
       if (newVal) {
+        console.log('Hash changed', newVal)
         this.scrollTo(newVal)
         this.currentHash = newVal
       }
@@ -109,17 +67,31 @@ export default {
       location.href = hashtag
     },
     onScroll(evt) {
-      // const scrollingUp = evt.target.scrollTop - this.lastScrollTop < 0
+      const clientHeight = evt.target.clientHeight
-      // this.lastScrollTop = evt.target.scrollTop
+      const scrollTop = evt.target.scrollTop
+      const scrollHeight = evt.target.scrollHeight
 
-      const allItems = this.introItems.concat(this.installItems).concat(this.updateItems).concat(this.bookItems).concat(this.podcastItems)
+      // Bottom of page
+      const bottomY = scrollHeight - scrollTop - clientHeight
+      if (bottomY < 200) {
+        const lastItem = this.content[this.content.length - 1]
+        if (lastItem.hash !== this.currentHash) {
+          history.pushState({}, '', lastItem.hash)
+          this.currentHash = lastItem.hash
+        }
 
-      var closestItem = null
+        return
-      for (let i = 0; i < allItems.length; i++) {
+      }
-        const item = allItems[i]
-        var div = document.querySelector(item.hash)
-        var box = div.getBoundingClientRect()
 
+      let closestItem = null
+      for (let i = 0; i < this.content.length; i++) {
+        const item = this.content[i]
+        const div = document.querySelector(item.hash)
+        if (!div) {
+          console.error('Item not found', item)
+          return
+        }
+        const box = div.getBoundingClientRect()
         if (box.top > 0 && box.top < 100) {
           closestItem = item
           break

layouts/guides.vue

@@ -9,37 +9,38 @@
       </div>
       <nuxt-link v-for="item in content" :key="item.slug" :to="item.fullpath" class="px-4 py-1.5 text-sm font-semibold block mr-6 mb-2" :class="item.fullpath === routePath ? 'bg-white bg-opacity-10 rounded-r-full text-yellow-400' : 'text-gray-300 hover:text-white'">{{ item.title }}</nuxt-link>
     </div>
-    <div id="guides-content" class="overflow-y-auto max-w-full overflow-x-hidden">
+    <div id="guides-content" class="overflow-y-auto max-w-full overflow-x-hidden" style="scrollbar-gutter: stable">
-      <div class="flex items-center py-6 px-8">
+      <div class="w-full max-w-5xl mx-auto px-2 py-8">
-        <nuxt-link to="/" class="h-8 w-8 md:hidden mx-1.5">
+        <div class="flex items-center py-1">
-          <img src="/favicon.ico" class="h-full w-full" />
+          <nuxt-link to="/" class="h-8 w-8 md:hidden mx-1.5">
-        </nuxt-link>
+            <img src="/favicon.ico" class="h-full w-full" />
+          </nuxt-link>
 
-        <a :href="discordUrl" class="mx-2 hidden md:block">
+          <a :href="discordUrl" class="mx-2 hidden md:block">
-          <img src="/discord.svg" class="h-5 md:h-7 hover:scale-110 transform duration-100" />
+            <img src="/discord.svg" class="h-5 md:h-7 hover:scale-110 transform duration-100" />
-        </a>
+          </a>
-        <a :href="dockerHubUrl" class="mx-2 hidden md:block">
+          <a :href="dockerHubUrl" class="mx-2 hidden md:block">
-          <img src="/docker.svg" class="h-8 hover:scale-110 transform duration-100" />
+            <img src="/docker.svg" class="h-8 hover:scale-110 transform duration-100" />
-        </a>
+          </a>
-        <a :href="githubUrl" class="hidden md:block">
+          <a :href="githubUrl" class="hidden md:block">
-          <img src="/github.svg" class="h-7 hover:scale-110 transform duration-100 mx-1 sm:mx-2" />
+            <img src="/github.svg" class="h-7 hover:scale-110 transform duration-100 mx-1 sm:mx-2" />
-        </a>
+          </a>
-        <a :href="playStoreUrl" class="hidden lg:block">
+          <a :href="playStoreUrl" class="hidden lg:block">
-          <img src="/GetGooglePlayStore.png" class="h-7 ml-2" />
+            <img src="/GetGooglePlayStore.png" class="h-7 ml-2" />
-        </a>
+          </a>
-        <a :href="appStoreUrl" class="hidden lg:block">
+          <a :href="appStoreUrl" class="hidden lg:block">
-          <img src="/AppleAppStoreDark.svg" class="h-7 ml-2" />
+            <img src="/AppleAppStoreDark.svg" class="h-7 ml-2" />
-        </a>
+          </a>
 
-        <div class="flex-grow" />
+          <div class="flex-grow" />
 
-        <nuxt-link to="/docs" class="text-base md:text-lg font-semibold text-gray-200 hover:text-white hover:underline mx-1.5 md:mx-4">Docs</nuxt-link>
+          <nuxt-link to="/docs" class="text-base md:text-lg font-semibold text-gray-200 hover:text-white hover:underline mx-1.5 md:mx-4">Docs</nuxt-link>
-        <nuxt-link to="/install" class="text-base md:text-lg font-semibold text-gray-200 hover:text-white hover:underline mx-1.5 md:mx-4">Install</nuxt-link>
+          <nuxt-link to="/support" class="text-base md:text-lg font-semibold text-gray-200 hover:text-white hover:underline mx-1.5 md:mx-4">Support</nuxt-link>
-        <nuxt-link to="/support" class="text-base md:text-lg font-semibold text-gray-200 hover:text-white hover:underline mx-1.5 md:mx-4">Support</nuxt-link>
+          <nuxt-link to="/showcase" class="text-base md:text-lg font-semibold text-gray-200 hover:text-white hover:underline mx-1.5 md:mx-4">Showcase</nuxt-link>
-        <nuxt-link to="/showcase" class="text-base md:text-lg font-semibold text-gray-200 hover:text-white hover:underline mx-1.5 md:mx-4">Showcase</nuxt-link>
+        </div>
+
+        <Nuxt />
       </div>
-
-      <Nuxt />
     </div>
   </div>
 </template>
@@ -47,7 +48,7 @@
 <script>
 export default {
   async fetch() {
-    this.content = await this.$content().fetch()
+    this.content = await this.$content('guides').fetch()
     if (process.env.NODE_ENV === 'development') console.log('CONTENT', this.content)
   },
   data() {

nuxt.config.js

@@ -83,7 +83,6 @@ export default {
     async routes() {
       const { $content } = require('@nuxt/content')
       const files = await $content({ deep: true }).fetch()
-      console.log('FILES', files)
       return files.map(file => file.fullpath)
     }
   },

pages/docs.vue

@@ -23,61 +23,37 @@
 
       <div class="flex-grow" />
 
-      <nuxt-link to="/install" class="text-base md:text-lg font-semibold text-gray-200 hover:text-white hover:underline mx-1.5 md:mx-4">Install</nuxt-link>
+      <nuxt-link to="/guides" class="text-base md:text-lg font-semibold text-gray-200 hover:text-white hover:underline mx-1.5 md:mx-4">Guides</nuxt-link>
       <nuxt-link to="/support" class="text-base md:text-lg font-semibold text-gray-200 hover:text-white hover:underline mx-1.5 md:mx-4">Support</nuxt-link>
       <nuxt-link to="/showcase" class="text-base md:text-lg font-semibold text-gray-200 hover:text-white hover:underline mx-1.5 md:mx-4">Showcase</nuxt-link>
     </div>
 
-    <docs-introduction />
+    <article v-for="page in content" :key="page.slug" :id="page.hash.slice(1)" class="prose prose-invert prose-sm md:prose-base max-w-5xl flex items-center" style="min-height: 60vh">
-
+      <div class="px-2 py-8 md:py-20 max-w-full">
-    <div class="w-full bg-white bg-opacity-20 h-px my-8" />
+        <h1 class="text-xl md:text-3xl mb-4 md:-ml-8">
-
+          <nuxt-link :to="page.hash"><span class="material-icons text-lg md:text-xl text-gray-400 hover:text-white cursor-pointer mr-2">tag</span></nuxt-link
-    <docs-install-docker />
+          >{{ page.title }}
-
+        </h1>
-    <div class="w-full bg-white bg-opacity-20 h-px my-8" />
-
-    <docs-install-docker-compose />
-
-    <div class="w-full bg-white bg-opacity-20 h-px my-8" />
-
-    <docs-updating-docker />
-
-    <div class="w-full bg-white bg-opacity-20 h-px my-8" />
-
-    <docs-book-directory-structure />
-
-    <div class="w-full bg-white bg-opacity-20 h-px my-8" />
-
-    <docs-book-author-folder-naming />
-
-    <div class="w-full bg-white bg-opacity-20 h-px my-8" />
-
-    <docs-book-title-folder-naming />
-
-    <div class="w-full bg-white bg-opacity-20 h-px my-8" />
-
-    <docs-book-audio-metadata />
-
-    <div class="w-full bg-white bg-opacity-20 h-px my-8" />
-
-    <docs-book-additional-metadata-files />
-
-    <div class="w-full bg-white bg-opacity-20 h-px my-8" />
-
-    <docs-book-audio-tracks />
-
-    <div class="w-full bg-white bg-opacity-20 h-px my-8" />
-
-    <docs-podcast-directory-structure />
 
+        <nuxt-content :document="page" />
+      </div>
+    </article>
   </div>
 </template>
 
 <script>
 export default {
   layout: 'docs',
+  async fetch() {
+    this.content = await this.$content('docs', { deep: true }).fetch()
+    // this.content.sort((a, b) => a.slug.localeCompare(b.slug, undefined, { sensitivity: 'base' }))
+    this.content.sort((a, b) => Number(a.slug.split('.').shift()) - Number(b.slug.split('.').shift()))
+
+    if (process.env.NODE_ENV === 'development') console.log('CONTENT', this.content)
+  },
   data() {
     return {
+      content: null,
       appStoreUrl: 'https://testflight.apple.com/join/wiic7QIW',
       dockerHubUrl: 'https://hub.docker.com/r/advplyr/audiobookshelf',
       playStoreUrl: 'https://play.google.com/store/apps/details?id=com.audiobookshelf.app',
@@ -106,4 +82,15 @@ table td,
 th {
   padding: 5px 15px;
 }
+
+.prose :where(code):not(:where([class~='not-prose']*))::before {
+  content: '';
+}
+.prose :where(code):not(:where([class~='not-prose']*))::after {
+  content: '';
+}
+.prose :where(blockquote):not(:where([class~='not-prose'] *)) {
+  quotes: none;
+  font-style: normal;
+}
 </style>

pages/guides/_id.vue

@@ -10,7 +10,7 @@ export default {
   layout: 'guides',
   async asyncData({ $content, params }) {
     const slug = params.id || 'index'
-    const results = await $content().where({ slug }).fetch()
+    const results = await $content('guides').where({ slug }).fetch()
     return {
       page: results[0]
     }

pages/index.vue

@@ -25,8 +25,8 @@
       </div>
 
       <div class="absolute bottom-6 right-6 md:bottom-12 md:right-12 text-right">
-        <nuxt-link to="/install" class="text-gray-200 text-lg md:text-3xl font-book py-1 md:py-2 hover:underline block">Install Guide</nuxt-link>
         <nuxt-link to="/docs" class="text-gray-200 text-lg md:text-3xl font-book py-1 md:py-2 hover:underline block">Documentation</nuxt-link>
+        <nuxt-link to="/guides" class="text-gray-200 text-lg md:text-3xl font-book py-1 md:py-2 hover:underline block">User Guides</nuxt-link>
         <nuxt-link to="/support" class="text-gray-200 text-lg md:text-3xl font-book py-1 md:py-2 hover:underline block">How to Support</nuxt-link>
 
         <div class="flex items-center pt-4 md:pt-8 text-gray-300">

pages/install.vue

@@ -209,6 +209,9 @@ docker compose --file &lt;/path/to/config>/docker-compose.yml up -d</code>
 
 <script>
 export default {
+  asyncData({ redirect }) {
+    return redirect('/docs')
+  },
   data() {
     return {}
   },

pages/showcase.vue

@@ -4,7 +4,7 @@
       <div>
         <span class="material-icons text-warning text-2xl">priority_high</span>
       </div>
-      <p class="pl-2 text-base md:text-lg">Consider sending screenshots of your collection to <a href="mailto:advplyr@protonmail.com" class="text-blue-500 underline">advplyr@protonmail.com</a> (or <a href="https://github.com/advplyr/audiobookshelf-web" target="_blank" class="text-blue-500 underline">submit a PR</a>) so we can show it off!</p>
+      <p class="pl-2 text-base md:text-lg">Consider sending screenshots of your audiobookshelf to <a href="mailto:advplyr@protonmail.com" class="text-blue-500 underline">advplyr@protonmail.com</a> (or <a href="https://github.com/advplyr/audiobookshelf-web" target="_blank" class="text-blue-500 underline">submit a PR</a>) so we can show it off!</p>
     </div>
 
     <div class="py-8">