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

Add:Support section

Browse source
This commit is contained in:
advplyr 2021-12-15 19:26:31 -06:00
parent a8eb3ef8f5
commit f62815a339
5 changed files with 43 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

19
layouts/default.vue
View file

@ -4,23 +4,30 @@
<nuxt-link to="/" class="h-12 w-12"> <nuxt-link to="/" class="h-12 w-12">
<img src="/Logo48.png" class="h-12 w-12" /> <img src="/Logo48.png" class="h-12 w-12" />
</nuxt-link> </nuxt-link>
<nuxt-link to="/" class="text-2xl pl-2 sm:pl-4 font-book hover:underline hidden md:block">audiobookshelf</nuxt-link> <nuxt-link to="/" class="text-2xl pl-2 sm:pl-4 font-book hover:underline hidden lg:block">audiobookshelf</nuxt-link>
<!-- <div class="flex-grow" /> --> <!-- <div class="flex-grow" /> -->
<nuxt-link to="/install" class="h-full px-3 md:px-5 flex items-center ml-2 md: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="/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> <p class="text-base md:text-lg">Install</p>
</nuxt-link> </nuxt-link>
<nuxt-link to="/docs" class="h-full px-3 md: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 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 hidden md:block">Documentation</p>
<p class="text-base md:text-lg md:hidden">Docs</p> <p class="text-base md:text-lg md:hidden">Docs</p>
</nuxt-link> </nuxt-link>
<nuxt-link to="/support" class="h-full px-3 md: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'"> <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">How to Support</p> <!-- <p class="text-base md:text-lg">How to Support</p> -->
<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>
</nuxt-link> </nuxt-link>
<nuxt-link to="/showcase" class="h-full px-3 md:px-5 items-center cursor-pointer flex" :class="routeName === 'showcase' ? 'bg-bg bg-opacity-50 text-white' : 'hover:text-white hover:bg-bg hover:bg-opacity-50 text-gray-300'"> <nuxt-link to="/showcase" class="h-full px-3 lg:px-5 items-center cursor-pointer hidden md:flex" :class="routeName === 'showcase' ? '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">Showcase</p> <p class="text-base md:text-lg">Showcase</p>
</nuxt-link> </nuxt-link>
<div class="flex-grow" /> <div class="flex-grow" />
<div class="pr-4 pt-1 hidden lg:inline-block">
<a class="github-button" href="https://github.com/advplyr/audiobookshelf" data-color-scheme="no-preference: dark_high_contrast; light: light; dark: dark;" data-size="large" data-show-count="true" aria-label="Star advplyr/audiobookshelf on GitHub">Star</a>
</div>
<a :href="dockerHubUrl"> <a :href="dockerHubUrl">
<img src="/docker.svg" class="h-8 text-white" /> <img src="/docker.svg" class="h-8 text-white" />
</a> </a>

5
nuxt.config.js
View file

@ -54,6 +54,11 @@ export default {
script: [ script: [
{ {
src: '/prism.js' src: '/prism.js'
},
{
src: 'https://buttons.github.io/buttons.js',
defer: true,
async: true
} }
] ]
}, },

2
pages/index.vue
View file

@ -28,7 +28,7 @@
<div class="absolute bottom-6 right-6 md:bottom-12 md:right-12 text-right"> <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 Guides</nuxt-link> <nuxt-link to="/install" class="text-gray-200 text-lg md:text-3xl font-book py-1 md:py-2 hover:underline block">Install Guides</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="/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="/showcase" class="text-gray-200 text-lg md:text-3xl font-book py-1 md:py-2 hover:underline block">Showcase</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 pt-4 md:pt-8 text-gray-300"> <div class="flex pt-4 md:pt-8 text-gray-300">
<a :href="dockerHubUrl" class="mx-2"> <a :href="dockerHubUrl" class="mx-2">

7
pages/showcase.vue
View file

@ -1,5 +1,12 @@
<template> <template>
<div class="w-full max-w-5xl mx-auto px-2 py-8"> <div class="w-full max-w-5xl mx-auto px-2 py-8">
<div class="flex -ml-8 mb-12">
<div>
<span class="material-icons text-warning text-2xl">priority_high</span>
</div>
<p class="pl-2 text-base md:text-lg">Screenshots are out of date! You can help by emailing some screenshots of your bookshelf 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>).</p>
</div>
<div class="flex justify-between items-center mb-8"> <div class="flex justify-between items-center mb-8">
<h1 class="text-3xl">Showcase</h1> <h1 class="text-3xl">Showcase</h1>
<a href="https://github.com/advplyr/audiobookshelf/discussions/60" class="text-lg text-blue-500 hover:underline hover:text-blue-300">courtesy of Budlyte</a> <a href="https://github.com/advplyr/audiobookshelf/discussions/60" class="text-lg text-blue-500 hover:underline hover:text-blue-300">courtesy of Budlyte</a>

20
pages/support.vue
View file

@ -1,18 +1,32 @@
<template> <template>
<div class="w-full max-w-5xl mx-auto h-full px-2 py-8"> <div class="w-full max-w-5xl mx-auto h-full px-2 py-8">
<div class="flex -ml-8 mb-4">
<div>
<span class="material-icons text-success text-2xl">star</span>
</div>
<p class="pl-2 text-base md:text-lg">
The best way that <u>everyone</u> can show support is to follow/star the <a href="https://github.com/advplyr/audiobookshelf" target="_blank" class="text-blue-500 underline">github repo</a>, test new features, and open a <a href="https://github.com/advplyr/audiobookshelf/discussions" target="_blank" class="text-blue-500 underline">discussion</a> with ideas on how to improve the project.
</p>
</div>
<div class="flex -ml-8"> <div class="flex -ml-8">
<div> <div>
<span class="material-icons text-warning text-2xl">priority_high</span> <span class="material-icons text-gray-400 text-2xl">email</span>
</div> </div>
<p class="pl-2 text-base md:text-lg">Default username is "root" with no password.</p> <p class="pl-2 text-base md:text-lg"><a href="mailto:advplyr@protonmail.com" class="text-blue-500 underline">advplyr@protonmail.com</a></p>
</div> </div>
<div class="w-full bg-white bg-opacity-20 h-px my-8" /> <div class="w-full bg-white bg-opacity-20 h-px my-8" />
<p>As you can see, this documentation could really use some support.</p>
<div class="w-full bg-white bg-opacity-20 h-px my-8" />
<h1 id="docker" class="text-3xl mb-4 -ml-8"> <h1 id="docker" class="text-3xl mb-4 -ml-8">
<nuxt-link to="#docker"><span class="material-icons text-xl text-gray-400 hover:text-white cursor-pointer mr-2">tag</span></nuxt-link <nuxt-link to="#docker"><span class="material-icons text-xl text-gray-400 hover:text-white cursor-pointer mr-2">tag</span></nuxt-link
>Docker Install >Developers
</h1> </h1>
<p class="mb-2">This section will eventually give info on how to run the project locally.</p>
<p class="mb-2">PRs welcome and highly encouraged. Before working on an issue/feature you should post about it so we don't overlap.</p>
</div> </div>
</template> </template>