├── .gitignore ├── .travis.yml ├── Dockerfile ├── LICENSE ├── README.md ├── access.html ├── assets ├── css │ ├── access.css │ ├── index.css │ └── main.css ├── img │ ├── backgrounds │ │ ├── b01.png │ │ ├── b02.jpg │ │ ├── b03.jpg │ │ └── b04.png │ └── favicons │ │ ├── android-chrome-192x192.png │ │ ├── android-chrome-512x512.png │ │ ├── apple-touch-icon.png │ │ ├── browserconfig.xml │ │ ├── favicon-16x16.png │ │ ├── favicon-32x32.png │ │ ├── favicon.ico │ │ ├── manifest.json │ │ └── mstile-150x150.png └── sass │ ├── access.scss │ ├── index.scss │ └── main.scss ├── index.html ├── package-lock.json ├── package.json └── templates ├── access.json ├── access.mustache ├── index.json └── index.mustache /.gitignore: -------------------------------------------------------------------------------- 1 | ### macOS ### 2 | # General 3 | .DS_Store 4 | .AppleDouble 5 | .LSOverride 6 | 7 | # Icon must end with two \r 8 | Icon 9 | 10 | # Thumbnails 11 | ._* 12 | 13 | # Files that might appear in the root of a volume 14 | .DocumentRevisions-V100 15 | .fseventsd 16 | .Spotlight-V100 17 | .TemporaryItems 18 | .Trashes 19 | .VolumeIcon.icns 20 | .com.apple.timemachine.donotpresent 21 | 22 | # Directories potentially created on remote AFP share 23 | .AppleDB 24 | .AppleDesktop 25 | Network Trash Folder 26 | Temporary Items 27 | .apdisk 28 | 29 | ### Node ### 30 | # Logs 31 | logs 32 | *.log 33 | npm-debug.log* 34 | yarn-debug.log* 35 | yarn-error.log* 36 | lerna-debug.log* 37 | 38 | # Diagnostic reports (https://nodejs.org/api/report.html) 39 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 40 | 41 | # Runtime data 42 | pids 43 | *.pid 44 | *.seed 45 | *.pid.lock 46 | 47 | # Directory for instrumented libs generated by jscoverage/JSCover 48 | lib-cov 49 | 50 | # Coverage directory used by tools like istanbul 51 | coverage 52 | 53 | # nyc test coverage 54 | .nyc_output 55 | 56 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 57 | .grunt 58 | 59 | # Bower dependency directory (https://bower.io/) 60 | bower_components 61 | 62 | # node-waf configuration 63 | .lock-wscript 64 | 65 | # Compiled binary addons (https://nodejs.org/api/addons.html) 66 | build/Release 67 | 68 | # Dependency directories 69 | node_modules/ 70 | jspm_packages/ 71 | 72 | # TypeScript v1 declaration files 73 | typings/ 74 | 75 | # Optional npm cache directory 76 | .npm 77 | 78 | # Optional eslint cache 79 | .eslintcache 80 | 81 | # Optional REPL history 82 | .node_repl_history 83 | 84 | # Output of 'npm pack' 85 | *.tgz 86 | 87 | # Yarn Integrity file 88 | .yarn-integrity 89 | 90 | # dotenv environment variables file 91 | .env 92 | .env.test 93 | 94 | # parcel-bundler cache (https://parceljs.org/) 95 | .cache 96 | 97 | # next.js build output 98 | .next 99 | 100 | # nuxt.js build output 101 | .nuxt 102 | 103 | # vuepress build output 104 | .vuepress/dist 105 | 106 | # Serverless directories 107 | .serverless/ 108 | 109 | # FuseBox cache 110 | .fusebox/ 111 | 112 | # DynamoDB Local files 113 | .dynamodb/ 114 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "lts/*" 4 | cache: yarn 5 | before_script: 6 | - npm install -g jsonlint 7 | script: 8 | - jsonlint --quiet templates/*.json 9 | - yarn build 10 | -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | FROM nginx:alpine 2 | 3 | # Install node 4 | RUN apk update && apk add --no-cache npm 5 | 6 | # Copy all files over to www 7 | COPY . /usr/share/nginx/html 8 | 9 | # Preinstall all tools 10 | RUN rm -rf /usr/share/nginx/html/node_modules 11 | RUN cd /usr/share/nginx/html && npm install -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Ryan Johnston 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Plex Landing Page 2 | 3 | [![Build Status](https://travis-ci.org/ryjo1026/plex-landing-page.svg?branch=master)](https://travis-ci.org/ryjo1026/plex-landing-page) 4 | 5 | A simple landing page for your Plex Media Server. I made this with [bulma](https://bulma.io/) for CSS styling and [mustache.js](http://mustache.github.io/) for templating. 6 | 7 | ![Landing Page Screenshot](https://i.imgur.com/RadvB9M.jpg) 8 | 9 | ## Instructions 10 | 11 | The page is fully templated to make customization as easy as editing a JSON file. Fork the repository and replace text in `templates/index.json` and `templates/access.json` with your desired text. Template compilation, Sass compilation, and the Bulma installation are handled by npm. Install required packages using `npm install ` and use the available scripts to build the site: 12 | 13 | - `npm build`- Compile templates and Sass. 14 | - `npm build:html/npm build:css`- Compile templates only or Sass only. 15 | - `npm watch`- Automatically build when changes are detected in the directory. 16 | - `npm start`- An alias to `npm watch`. 17 | 18 | Additionally, I chose two background images for the home page and instruction page from one of my favorite movies and shows. I recommend browsing [/r/CineShots](https://www.reddit.com/r/CineShots/) for background images if you like that idea. You can change them in the respective .scss files under the `.hero` class. 19 | 20 | Editing the JSON and rendering the templates is very easy but if you'd rather just edit the raw HTML it's located in `index.html` and `access.html`. 21 | 22 | ### Docker 23 | 24 | There's a [Docker image](https://hub.docker.com/repository/docker/ryjo1026/plex-landing-page/general) for this if you would like to use that as well. The Docker comes preinstalled with node and nginx and the project is lightweight enough to just edit the json files on the container. 25 | 26 | 1. Run the container 27 | ``` 28 | docker run \ 29 | --name plex-landing-page \ 30 | -p 80:80 \ 31 | ryjo1026/plex-landing-page:latest 32 | ``` 33 | 1. Access the container 34 | ``` 35 | docker exec -it plex-landing-page /bin/sh 36 | ``` 37 | 1. Edit the json files to your liking 38 | ``` 39 | vi /usr/share/nginx/html/templates/index.json 40 | ``` 41 | 1. Compile the templates 42 | ``` 43 | npm run-script build 44 | ``` 45 | 1. Done! Your site is accessible at port 80 of the docker host. 46 | 47 | Alternatively, attach this repo as a volume and compile the templates locally with whatever local dev tools you use. The following should be run from the directory to which you cloned the repo 48 | 49 | ``` 50 | docker run \ 51 | --name plex-landing-page \ 52 | -p 80:80 \ 53 | -v .:/usr/share/nginx/html \ 54 | ryjo1026/plex-landing-page:latest 55 | ``` 56 | 57 | Note: The Dockerfile used to build the image is included in this repo if you want to build directly from that for some reason. 58 | 59 | ## Contribution 60 | 61 | This project is open-sourced under the MIT license. Feel free to make issues and pull requests for any improvements you want to see. 62 | 63 | ## Help 64 | 65 | Please feel free to open an issue even if you just need help getting it set up! I'm very responsive to new issues and actively looking to remove friction from the setup process. 66 | -------------------------------------------------------------------------------- /access.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Server Name 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 |
25 | 26 |  Home 27 | 28 |
29 |
30 |
31 |

32 | Access Instructions 33 |

34 |
35 |
36 |
37 | 38 |
39 |
40 |

Step One

41 |

Create a plex account through plex.tv. There are also options sign up using your Google or Facebook account. You don't need to buy a Plex Pass or pay for anything.

42 |
43 |

Step Two

44 |

Go to your profile and send either your username or email to me.

45 |
46 |

Step Three

47 |

Wait for me to add you as a friend. You should receive an email, follow the directions in the email and accept the invitation.

48 |
49 |

Step Four

50 |

You're all set you can watch movies through the web player at plex.tv or use your Xbox, Smart TV, etc. (iOS requires a one time $5 payment). Feel free to make requests for new content through Ombi, you can sign in using your plex username.

51 |
52 |
53 |
54 | 55 | 56 | -------------------------------------------------------------------------------- /assets/css/access.css: -------------------------------------------------------------------------------- 1 | .hero { 2 | background: url(../img/backgrounds/b04.png); 3 | background-repeat: no-repeat; 4 | background-attachment: fixed; 5 | background-size: contain; 6 | background-color: #999; } 7 | 8 | .hero-head .button { 9 | margin: 10px; } 10 | -------------------------------------------------------------------------------- /assets/css/index.css: -------------------------------------------------------------------------------- 1 | .hero { 2 | background-image: url(../img/backgrounds/b03.jpg); 3 | background-position: center center; 4 | background-repeat: no-repeat; 5 | background-attachment: fixed; 6 | background-size: cover; 7 | background-color: #999; } 8 | -------------------------------------------------------------------------------- /assets/img/backgrounds/b01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ryjo1026/plex-landing-page/e2b85ad455e68cb6285407ea217aceb6e557f13c/assets/img/backgrounds/b01.png -------------------------------------------------------------------------------- /assets/img/backgrounds/b02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ryjo1026/plex-landing-page/e2b85ad455e68cb6285407ea217aceb6e557f13c/assets/img/backgrounds/b02.jpg -------------------------------------------------------------------------------- /assets/img/backgrounds/b03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ryjo1026/plex-landing-page/e2b85ad455e68cb6285407ea217aceb6e557f13c/assets/img/backgrounds/b03.jpg -------------------------------------------------------------------------------- /assets/img/backgrounds/b04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ryjo1026/plex-landing-page/e2b85ad455e68cb6285407ea217aceb6e557f13c/assets/img/backgrounds/b04.png -------------------------------------------------------------------------------- /assets/img/favicons/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ryjo1026/plex-landing-page/e2b85ad455e68cb6285407ea217aceb6e557f13c/assets/img/favicons/android-chrome-192x192.png -------------------------------------------------------------------------------- /assets/img/favicons/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ryjo1026/plex-landing-page/e2b85ad455e68cb6285407ea217aceb6e557f13c/assets/img/favicons/android-chrome-512x512.png -------------------------------------------------------------------------------- /assets/img/favicons/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ryjo1026/plex-landing-page/e2b85ad455e68cb6285407ea217aceb6e557f13c/assets/img/favicons/apple-touch-icon.png -------------------------------------------------------------------------------- /assets/img/favicons/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #da532c 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /assets/img/favicons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ryjo1026/plex-landing-page/e2b85ad455e68cb6285407ea217aceb6e557f13c/assets/img/favicons/favicon-16x16.png -------------------------------------------------------------------------------- /assets/img/favicons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ryjo1026/plex-landing-page/e2b85ad455e68cb6285407ea217aceb6e557f13c/assets/img/favicons/favicon-32x32.png -------------------------------------------------------------------------------- /assets/img/favicons/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ryjo1026/plex-landing-page/e2b85ad455e68cb6285407ea217aceb6e557f13c/assets/img/favicons/favicon.ico -------------------------------------------------------------------------------- /assets/img/favicons/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "icons": [ 4 | { 5 | "src": "/android-chrome-192x192.png", 6 | "sizes": "192x192", 7 | "type": "image/png" 8 | }, 9 | { 10 | "src": "/android-chrome-512x512.png", 11 | "sizes": "512x512", 12 | "type": "image/png" 13 | } 14 | ], 15 | "theme_color": "#ffffff", 16 | "background_color": "#ffffff", 17 | "display": "standalone" 18 | } -------------------------------------------------------------------------------- /assets/img/favicons/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ryjo1026/plex-landing-page/e2b85ad455e68cb6285407ea217aceb6e557f13c/assets/img/favicons/mstile-150x150.png -------------------------------------------------------------------------------- /assets/sass/access.scss: -------------------------------------------------------------------------------- 1 | // Add background image to Hero 2 | .hero { 3 | background: url(../img/backgrounds/b04.png); 4 | background-repeat: no-repeat; 5 | background-attachment: fixed; 6 | background-size: contain; 7 | background-color: #999; 8 | } 9 | 10 | .hero-head .button { 11 | margin: 10px; 12 | } -------------------------------------------------------------------------------- /assets/sass/index.scss: -------------------------------------------------------------------------------- 1 | // Add background image to Hero 2 | .hero { 3 | background-image: url(../img/backgrounds/b03.jpg); 4 | background-position: center center; 5 | background-repeat: no-repeat; 6 | background-attachment: fixed; 7 | background-size: cover; 8 | background-color: #999; 9 | } -------------------------------------------------------------------------------- /assets/sass/main.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | @import url('https://fonts.googleapis.com/css?family=Nunito:400,700'); 4 | 5 | $orange: #E5A00D; 6 | $title-color: #fff; 7 | $subtitle-color: #fff; 8 | 9 | $family-sans-serif: "Nunito", sans-serif; 10 | $primary: $orange; 11 | 12 | @import "../../node_modules/bulma/bulma.sass"; 13 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Server Name 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 16 | 17 | 18 | 19 | 20 |
21 |
22 |
23 |

Server Name

24 |

25 | The complete library of over 1000 Movies & 100 Shows available instantly. 26 |

27 | Access the Server 28 |
29 |
30 |
31 | 32 |
33 |
34 |
35 |

Get Access

36 |

Read the instructions on how to get access to the server. You'll be watching movies and television in no time.

37 |
38 |
39 |

Request Media

40 |

Use Ombi to request new content for the server. Just sign in with the same Plex account you use for the server. Your request will be reviewed by the administrator and your content will get added as soon as possible.

41 |
42 |
43 |

SyncLounge

44 |

Want to watch a movie with other members of the server? Create a SyncLounge Room and you'll be able to watch media off the server while synced up to each other.The SyncLounge player provides a chat window for discussing the movie or you can use any of your plex devices(XBox, Roku, etc.).

45 |
46 |
47 | 48 |
49 |
50 | Instructions   51 |
52 |
53 | Request   54 |
55 |
56 | SyncLounge   57 |
58 |
59 |
60 | 61 | 62 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "plex-landing-page", 3 | "version": "0.2.0", 4 | "description": "A landing page for your Plex media server", 5 | "repository": "git@github.com:ryjo1026/plex-landing-page.git", 6 | "author": "Ryan Johnston ", 7 | "license": "MIT", 8 | "dependencies": { 9 | "bulma": "^0.9.3" 10 | }, 11 | "devDependencies": { 12 | "mustache": "^4.2.0", 13 | "node-sass": "^6.0.1", 14 | "npm-run-all": "^4.1.5", 15 | "watch": "^0.13.0" 16 | }, 17 | "scripts": { 18 | "build": "run-s build:*", 19 | "build:css": "node-sass --omit-source-map-url assets/sass --output assets/css", 20 | "build:html": "run-s build:html:*", 21 | "build:html:html": "mustache templates/index.json templates/index.mustache > index.html", 22 | "build:html:access": "mustache templates/access.json templates/access.mustache > access.html", 23 | "watch": "run-p watch:*", 24 | "watch:css": "$npm_execpath run build:css --watch", 25 | "watch:html": "watch 'run-s build:html' ./templates", 26 | "start": "run-s watch" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /templates/access.json: -------------------------------------------------------------------------------- 1 | { 2 | "server-name": "Server Name", 3 | "instructions": [ 4 | { 5 | "step-title": "Step One", 6 | "step-body": "Create a plex account through plex.tv. There are also options sign up using your Google or Facebook account. You don't need to buy a Plex Pass or pay for anything." 7 | }, 8 | { 9 | "step-title": "Step Two", 10 | "step-body": "Go to your profile and send either your username or email to me." 11 | }, 12 | { 13 | "step-title": "Step Three", 14 | "step-body": "Wait for me to add you as a friend. You should receive an email, follow the directions in the email and accept the invitation." 15 | }, 16 | { 17 | "step-title": "Step Four", 18 | "step-body": "You're all set you can watch movies through the web player at plex.tv or use your Xbox, Smart TV, etc. (iOS requires a one time $5 payment). Feel free to make requests for new content through Ombi, you can sign in using your plex username." 19 | } 20 | ] 21 | } -------------------------------------------------------------------------------- /templates/access.mustache: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{server-name}} 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 |
25 | 26 |  Home 27 | 28 |
29 |
30 |
31 |

32 | Access Instructions 33 |

34 |
35 |
36 |
37 | 38 |
39 |
40 | {{#instructions}} 41 |

{{step-title}}

42 |

{{&step-body}}

43 |
44 | {{/instructions}} 45 |
46 |
47 | 48 | 49 | -------------------------------------------------------------------------------- /templates/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "server-name": "Server Name", 3 | "server-link": "https://app.plex.tv/web/app", 4 | "num-movies": 1000, 5 | "num-shows": 100, 6 | "info": [ 7 | { 8 | "title": "Get Access", 9 | "body": "Read the instructions on how to get access to the server. You'll be watching movies and television in no time.", 10 | "button-text": "Instructions", 11 | "button-icon": "fas fa-list", 12 | "button-link": "/access" 13 | }, 14 | { 15 | "title": "Request Media", 16 | "body": "Use Ombi to request new content for the server. Just sign in with the same Plex account you use for the server. Your request will be reviewed by the administrator and your content will get added as soon as possible.", 17 | "button-text": "Request", 18 | "button-icon": "fas fa-plus-square", 19 | "button-link": "https://ombi.example.com" 20 | }, 21 | { 22 | "title": "SyncLounge", 23 | "body": "Want to watch a movie with other members of the server? Create a SyncLounge Room and you'll be able to watch media off the server while synced up to each other.The SyncLounge player provides a chat window for discussing the movie or you can use any of your plex devices(XBox, Roku, etc.).", 24 | "button-text": "SyncLounge", 25 | "button-icon": "fas fa-users", 26 | "button-link": "https://synclounge.tv/" 27 | } 28 | ] 29 | } 30 | -------------------------------------------------------------------------------- /templates/index.mustache: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{server-name}} 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 16 | 17 | 18 | 19 | 20 |
21 |
22 |
23 |

{{server-name}}

24 |

25 | The complete library of over {{num-movies}} Movies & {{num-shows}} Shows available instantly. 26 |

27 | Access the Server 28 |
29 |
30 |
31 | 32 |
33 |
34 | {{#info}} 35 |
36 |

{{title}}

37 |

{{body}}

38 |
39 | {{/info}} 40 |
41 | 42 |
43 | {{#info}} 44 |
45 | {{button-text}}   46 |
47 | {{/info}} 48 |
49 |
50 | 51 | 52 | --------------------------------------------------------------------------------