mirror/audiobookshelf.audiobookshelf-web
1
0
Fork 0
mirror of https://github.com/audiobookshelf/audiobookshelf-web.git synced 2025-08-31 15:09:31 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update docs to use markdown files

Browse source
This commit is contained in:
advplyr 2022-12-24 11:04:20 -06:00
parent 205f761a08
commit 7735bf57f0
35 changed files with 390 additions and 240 deletions
Download patch file Download diff file Expand all files Collapse all files

28
components/docs/Introduction.vue
View file

@ -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>

7
components/docs/book/AdditionalMetadataFiles.vue
View file

@ -1,10 +1,5 @@
<template>
<div id="book-additional-metadata" class="py-10 md:py-20">
<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>
<div id="book-additional-metadata" class="not-prose">
<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>

7
components/docs/book/AudioMetadata.vue
View file

@ -1,10 +1,5 @@
<template>
<div id="book-audio-metadata" class="py-10 md:py-20">
<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>
<div id="book-audio-metadata" class="not-prose">
<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">

7
components/docs/book/AudioTracks.vue
View file

@ -1,10 +1,5 @@
<template>
<div id="book-tracks" class="py-10 md:py-20">
<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>
<div id="book-tracks" class="not-prose">
<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">

7
components/docs/book/AuthorFolderNaming.vue
View file

@ -1,10 +1,5 @@
<template>
<div id="book-author-folder" class="py-10 md:py-20">
<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>
<div id="book-author-folder" class="not-prose">
<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">

9
components/docs/book/DirectoryStructure.vue
View file

@ -1,11 +1,6 @@
<template>
<div id="book-structure" class="py-10 md:py-20">
<h1 class="text-xl md:text-3xl mb-4 md:-ml-8">
<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="not-prose">
<p class="mb-4 text-sm md:text-base">Here is an example supported directory structure for Books</p>
<div class="p-4 border border-opacity-10 bg-primary bg-opacity-20 font-mono">
<div class="flex py-1 max-w-2xl">

23
components/docs/book/TitleFolderNaming.vue
View file

@ -1,10 +1,5 @@
<template>
<div id="book-title-folder" class="py-10 md:py-20">
<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>
<div id="book-title-folder" class="not-prose">
<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>
@ -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"><strong><u>Volume Number</u>:</strong> Case insensitive & decimals supported.</li>
<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">
<strong><u>Volume Number</u>:</strong> Case insensitive & decimals supported.
</li>
<ul>
<li style="padding-left: 3em">The volume number can be placed anywhere in the folder name.</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>
<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>

9
components/docs/podcast/DirectoryStructure.vue
View file

@ -1,11 +1,6 @@
<template>
<div id="podcast-structure" class="py-10 md:py-20">
<h1 class="text-xl md:text-3xl mb-4 md:-ml-8">
<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 id="podcast-structure" class="not-prose">
<p class="mb-4 text-sm md:text-base">Here is an example supported directory structure for Podcasts</p>
<div class="p-4 border border-opacity-10 bg-primary bg-opacity-20 font-mono">
<div class="flex py-1 max-w-2xl">

13
content/docs/0.introduction.md Normal file
View file

@ -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/).

10
content/docs/books/10.audio-metadata.md Normal file
View file

@ -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>

10
content/docs/books/11.audio-tracks.md Normal file
View file

@ -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>

10
content/docs/books/12.additional-metadata-files.md Normal file
View file

@ -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>

10
content/docs/books/7.directory-structure.md Normal file
View file

@ -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>

10
content/docs/books/8.author-folder-naming.md Normal file
View file

@ -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>

10
content/docs/books/9.title-folder-naming.md Normal file
View file

@ -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>

34
content/docs/install/1.docker-install.md Normal file
View file

@ -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 &lt;/path/to/config>:/config \
-v &lt;/path/to/metadata>:/metadata \
-v &lt;/path/to/audiobooks>:/audiobooks \
-v &lt;/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)

34
content/docs/install/2.docker-compose-install.md Normal file
View file

@ -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:
- &lt;/path/to/audiobooks>:/audiobooks
- &lt;/path/to/podcasts>:/podcasts
- &lt;/path/to/config>:/config
- &lt;/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)

48
content/docs/install/3.linux-install.md Normal file
View file

@ -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
```

15
content/docs/install/4.windows-install.md Normal file
View file

@ -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!**
>

13
content/docs/install/5.reverse-proxy-setup.md Normal file
View file

@ -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>

16
content/docs/install/6.mobile-apps.md Normal file
View file

@ -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>

10
content/docs/podcasts/13.directory-structure.md Normal file
View file

@ -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>

0
content/0.index.md → content/guides/0.index.md
View file

0
content/1.docker-windows.md → content/guides/1.docker-windows.md
View file

0
content/2.library_creation.md → content/guides/2.library_creation.md
View file

0
content/3.collections.md → content/guides/3.collections.md
View file

8
layouts/default.vue
View file

@ -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'">
<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'">
<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 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>

132
layouts/docs.vue
View file

@ -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,
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'
}
],
content: [],
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
// this.lastScrollTop = evt.target.scrollTop
const clientHeight = evt.target.clientHeight
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
for (let i = 0; i < allItems.length; i++) {
const item = allItems[i]
var div = document.querySelector(item.hash)
var box = div.getBoundingClientRect()
return
}
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

9
layouts/guides.vue
View file

@ -9,8 +9,9 @@
</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 class="flex items-center py-6 px-8">
<div id="guides-content" class="overflow-y-auto max-w-full overflow-x-hidden" style="scrollbar-gutter: stable">
<div class="w-full max-w-5xl mx-auto px-2 py-8">
<div class="flex items-center py-1">
<nuxt-link to="/" class="h-8 w-8 md:hidden mx-1.5">
<img src="/favicon.ico" class="h-full w-full" />
</nuxt-link>
@ -34,7 +35,6 @@
<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="/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="/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>
@ -42,12 +42,13 @@
<Nuxt />
</div>
</div>
</div>
</template>
<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() {

1
nuxt.config.js
View file

@ -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)
}
},

71
pages/docs.vue
View file

@ -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 />
<div class="w-full bg-white bg-opacity-20 h-px my-8" />
<docs-install-docker />
<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 />
<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">
<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
>{{ page.title }}
</h1>
<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>

2
pages/guides/_id.vue
View file

@ -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]
}

2
pages/index.vue
View file

@ -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">

3
pages/install.vue
View file

@ -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 {}
},

2
pages/showcase.vue
View file

@ -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">