From eda9a02428e5ae88287c6853d2069b505bf44f05 Mon Sep 17 00:00:00 2001 From: advplyr Date: Sun, 26 Sep 2021 11:45:07 -0500 Subject: [PATCH] Install page --- assets/app.css | 27 ++++++ assets/prism.css | 191 +++++++++++++++++++++++++++++++++++++++++ layouts/blank.vue | 23 +++++ layouts/default.vue | 82 ++++++++++++++++-- nuxt.config.js | 21 ++--- pages/docs.vue | 16 ++++ pages/index.vue | 118 +++++++++++++++++++++---- pages/install.vue | 90 +++++++++++++++++++ static/docker.svg | 2 + static/github.svg | 6 ++ static/prism.js | 12 +++ static/wood_panels.jpg | Bin 116707 -> 112099 bytes 12 files changed, 551 insertions(+), 37 deletions(-) create mode 100644 assets/prism.css create mode 100644 layouts/blank.vue create mode 100644 pages/docs.vue create mode 100644 pages/install.vue create mode 100644 static/docker.svg create mode 100644 static/github.svg create mode 100644 static/prism.js diff --git a/assets/app.css b/assets/app.css index 2e7b802..b3fa652 100644 --- a/assets/app.css +++ b/assets/app.css @@ -1,5 +1,32 @@ @import "./fonts.css"; +@import "./prism.css"; .bg-gradient { background-image: linear-gradient(to right bottom, #2e2e2e, #303030, #313131, #333333, #353535, #343434, #323232, #313131, #2c2c2c, #282828, #232323, #1f1f1f); +} + +/* override prism padding */ +pre[class*="language-"] { + /* padding: 0.25em 1em; */ + white-space:pre-line; +} + +/* custom scrollbar */ +::-webkit-scrollbar { + width: 24px; +} + +::-webkit-scrollbar-track { + background-color: transparent; +} + +::-webkit-scrollbar-thumb { + background-color: #525252; + border-radius: 20px; + border: 6px solid transparent; + background-clip: content-box; +} + +::-webkit-scrollbar-thumb:hover { + background-color: #6b6b6b; } \ No newline at end of file diff --git a/assets/prism.css b/assets/prism.css new file mode 100644 index 0000000..5949ec2 --- /dev/null +++ b/assets/prism.css @@ -0,0 +1,191 @@ +/* PrismJS 1.25.0 +https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+clike+javascript+bash+json+json5&plugins=highlight-keywords+toolbar+copy-to-clipboard */ +/** + * okaidia theme for JavaScript, CSS and HTML + * Loosely based on Monokai textmate theme by http://www.monokai.nl/ + * @author ocodia + */ + +code[class*="language-"], +pre[class*="language-"] { + color: #f8f8f2; + background: none; + text-shadow: 0 1px rgba(0, 0, 0, 0.3); + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + font-size: 1em; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; + border-radius: 0.3em; +} + +:not(pre) > code[class*="language-"], +pre[class*="language-"] { + background: #272822; +} + +/* Inline code */ +:not(pre) > code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: #8292a2; +} + +.token.punctuation { + color: #f8f8f2; +} + +.token.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.constant, +.token.symbol, +.token.deleted { + color: #f92672; +} + +.token.boolean, +.token.number { + color: #ae81ff; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #a6e22e; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string, +.token.variable { + color: #f8f8f2; +} + +.token.atrule, +.token.attr-value, +.token.function, +.token.class-name { + color: #e6db74; +} + +.token.keyword { + color: #66d9ef; +} + +.token.regex, +.token.important { + color: #fd971f; +} + +.token.important, +.token.bold { + font-weight: bold; +} +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} + +div.code-toolbar { + position: relative; +} + +div.code-toolbar > .toolbar { + position: absolute; + top: .3em; + right: .2em; + transition: opacity 0.3s ease-in-out; + opacity: 0; +} + +div.code-toolbar:hover > .toolbar { + opacity: 1; +} + +/* Separate line b/c rules are thrown out if selector is invalid. + IE11 and old Edge versions don't support :focus-within. */ +div.code-toolbar:focus-within > .toolbar { + opacity: 1; +} + +div.code-toolbar > .toolbar > .toolbar-item { + display: inline-block; +} + +div.code-toolbar > .toolbar > .toolbar-item > a { + cursor: pointer; +} + +div.code-toolbar > .toolbar > .toolbar-item > button { + background: none; + border: 0; + color: inherit; + font: inherit; + line-height: normal; + overflow: visible; + padding: 0; + -webkit-user-select: none; /* for button */ + -moz-user-select: none; + -ms-user-select: none; +} + +div.code-toolbar > .toolbar > .toolbar-item > a, +div.code-toolbar > .toolbar > .toolbar-item > button, +div.code-toolbar > .toolbar > .toolbar-item > span { + color: #bbb; + font-size: .8em; + padding: 0 .5em; + background: #f5f2f0; + background: rgba(224, 224, 224, 0.2); + box-shadow: 0 2px 0 0 rgba(0,0,0,0.2); + border-radius: .5em; +} + +div.code-toolbar > .toolbar > .toolbar-item > a:hover, +div.code-toolbar > .toolbar > .toolbar-item > a:focus, +div.code-toolbar > .toolbar > .toolbar-item > button:hover, +div.code-toolbar > .toolbar > .toolbar-item > button:focus, +div.code-toolbar > .toolbar > .toolbar-item > span:hover, +div.code-toolbar > .toolbar > .toolbar-item > span:focus { + color: inherit; + text-decoration: none; +} + diff --git a/layouts/blank.vue b/layouts/blank.vue new file mode 100644 index 0000000..264ea12 --- /dev/null +++ b/layouts/blank.vue @@ -0,0 +1,23 @@ + + + + + \ No newline at end of file diff --git a/layouts/default.vue b/layouts/default.vue index af26f19..68c92d2 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -1,16 +1,84 @@ \ No newline at end of file + + + \ No newline at end of file diff --git a/nuxt.config.js b/nuxt.config.js index 6208b8e..1463895 100644 --- a/nuxt.config.js +++ b/nuxt.config.js @@ -1,9 +1,8 @@ export default { target: 'static', - // Global page headers: https://go.nuxtjs.dev/config-head head: { - title: 'audiobookshelf-web', + title: 'AudioBookshelf', htmlAttrs: { lang: 'en' }, @@ -14,33 +13,31 @@ export default { { name: 'format-detection', content: 'telephone=no' } ], link: [ - { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } + { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }, + { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Fira+Mono&family=Ubuntu+Mono&family=Open+Sans:wght@400;600&family=Gentium+Book+Basic&family=Material+Icons' } + ], + script: [ + { + src: '/prism.js' + } ] }, - // Global CSS: https://go.nuxtjs.dev/config-css css: [ '@/assets/app.css' ], - // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins - plugins: [ - ], + plugins: [], - // Auto import components: https://go.nuxtjs.dev/config-components components: true, - // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules buildModules: [ - // https://go.nuxtjs.dev/tailwindcss '@nuxtjs/tailwindcss', ], - // Modules: https://go.nuxtjs.dev/config-modules modules: [ ], - // Build Configuration: https://go.nuxtjs.dev/config-build build: { } } diff --git a/pages/docs.vue b/pages/docs.vue new file mode 100644 index 0000000..b82ac53 --- /dev/null +++ b/pages/docs.vue @@ -0,0 +1,16 @@ + + + \ No newline at end of file diff --git a/pages/index.vue b/pages/index.vue index 5976dbc..de4cfac 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -1,10 +1,10 @@