docs(website): add gh-pages (#1395)

This commit is contained in:
ReenigneArcher 2023-07-20 11:44:02 -04:00 committed by GitHub
parent f245f777f7
commit f541f22137
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 471 additions and 0 deletions

View File

@ -6,6 +6,7 @@
# ignore repo directories and files
docs/
gh-pages-template/
scripts/
tools/
crowdin.yml

62
.github/workflows/update-pages.yml vendored Normal file
View File

@ -0,0 +1,62 @@
---
name: Build GH-Pages
on:
pull_request:
branches: [master, nightly]
types: [opened, synchronize, reopened]
push:
branches: [master]
workflow_dispatch:
concurrency:
group: ${{ github.workflow }}-${{ github.ref }}
cancel-in-progress: true
jobs:
update_pages:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v3
- name: Checkout gh-pages
uses: actions/checkout@v3
with:
ref: gh-pages
path: gh-pages
persist-credentials: false # otherwise, the token used is the GITHUB_TOKEN, instead of the personal token
fetch-depth: 0 # otherwise, will fail to push refs to dest repo
- name: Prepare gh-pages
run: |
# empty contents
rm -f -r ./gh-pages/*
# copy template back to pages
cp -f -r ./gh-pages-template/. ./gh-pages/
- name: Upload Artifacts
if: ${{ github.event_name == 'pull_request' || github.event_name == 'workflow_dispatch' }}
uses: actions/upload-artifact@v3
with:
name: gh-pages
if-no-files-found: error # 'warn' or 'ignore' are also available, defaults to `warn`
path: |
${{ github.workspace }}/gh-pages
!**/*.git
- name: Deploy to gh-pages
if: >-
(github.event_name == 'push' && github.ref == 'refs/heads/master') ||
(github.event_name == 'workflow_dispatch')
uses: actions-js/push@v1.4
with:
github_token: ${{ secrets.GH_BOT_TOKEN }}
author_email: ${{ secrets.GH_BOT_EMAIL }}
author_name: ${{ secrets.GH_BOT_NAME }}
directory: gh-pages
branch: gh-pages
force: false
message: sync gh-pages to ${{ github.sha }}

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.9 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

View File

@ -0,0 +1,408 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>LizardByte - Sunshine</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="Self-hosted game stream host for Moonlight." />
<meta name="author" content="" />
<!-- Open Graph/Twitter metadata -->
<meta property="og:site_name" content="LizardByte" />
<meta property="og:title" content="LizardByte | Sunshine" />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://app.lizardbyte.dev/uno/github/openGraphImages/Sunshine_624x312.png" />
<meta property="og:url" content="https://app.lizardbyte.dev/Sunshine" />
<meta property="og:description" content="Self-hosted game stream host for Moonlight." />
<meta property="og:locale" content="en-US" />
<meta property="twitter:card" content="summary_large_image" />
<meta property="og:twitter_site" content="@lizardbytedev" />
<meta property="og:twitter_site:id" content="@lizardbytedev" />
<meta property="og:twitter_creator" content="@lizardbytedev" />
<meta property="og:twitter_creator:id" content="@lizardbytedev" />
<meta property="twitter:image" content="https://app.lizardbyte.dev/uno/github/openGraphImages/Sunshine_624x312.png" />
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="https://app.lizardbyte.dev/assets/images/favicon.ico" />
<!-- FontAwesome-->
<link href="https://app.lizardbyte.dev/node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" />
<!-- Bootstrap theme-->
<link href="https://app.lizardbyte.dev/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<!-- Custom css-->
<link href="https://app.lizardbyte.dev/css/custom.css" rel="stylesheet" />
<script src="https://app.lizardbyte.dev/node_modules/jquery/dist/jquery.min.js"></script>
<script src="https://app.lizardbyte.dev/node_modules/@popperjs/core/dist/umd/popper.min.js"></script>
</head>
<body class="d-flex flex-column h-100 bg-dark-gray">
<main class="flex-shrink-0 overflow-hidden">
<!-- Navigation-->
<nav id="nav-container"></nav>
<!-- Header-->
<header class="bg-dark py-0">
<section class="offset-anchor" id="Top">
<div id="carousel1" class="carousel slide carousel-fade" data-bs-ride="carousel"
style="height:50vh">
<!--Indicators-->
<div class="carousel-indicators">
<button type="button" data-bs-target="#carousel1" data-bs-slide-to="0" class="active"
aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carousel1" data-bs-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carousel1" data-bs-slide-to="2"
aria-label="Slide 3"></button>
</div>
<!--/.Indicators-->
<!--Slides-->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="view">
<img src="assets/images/AdobeStock_305732536_1920x1280.jpg" alt="">
<div class="mask rgba-black-light"></div>
</div>
<!-- <div class="carousel-caption">-->
<!-- <h3 class="h3-responsive">1</h3>-->
<!-- <p>First text</p>-->
<!-- </div>-->
</div>
<div class="carousel-item">
<!--Mask color-->
<div class="view">
<img src="assets/images/AdobeStock_231616343_1920x1280.jpg" alt="">
<div class="mask rgba-black-strong"></div>
</div>
<!-- <div class="carousel-caption">-->
<!-- <h3 class="h3-responsive">2</h3>-->
<!-- <p>Secondary text</p>-->
<!-- </div>-->
</div>
<div class="carousel-item">
<!--Mask color-->
<div class="view">
<img src="assets/images/AdobeStock_303330124_1920x1280.jpg" alt="">
<div class="mask rgba-black-slight"></div>
</div>
<!-- <div class="carousel-caption">-->
<!-- <h3 class="h3-responsive">3</h3>-->
<!-- <p>Third text</p>-->
<!-- </div>-->
</div>
</div>
<!--/.Slides-->
<div>
<h1 class="carousel-overlay-title display-5 fw-bolder text-white mb-2">Sunshine</h1>
<p class="carousel-overlay-subtitle lead fw-bolder text-white-50 mb-4">
A LizardByte project</p>
</div>
<!--Controls-->
<button class="carousel-control-prev" type="button" data-bs-target="#carousel1"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carousel1"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
<!--/.Controls-->
</div>
</section>
</header>
<!-- About section-->
<section class="offset-anchor py-5" id="About">
<div class="container px-auto">
<p class="lead text-center text-white mx-auto mt-0 mb-5">
Sunshine is a self-hosted game stream host for Moonlight. Offering low latency, cloud gaming
server capabilities with support for AMD, Intel, and Nvidia GPUs for hardware encoding. Software
encoding is also available. You can connect to Sunshine from any Moonlight client on a variety
of devices. A web UI is provided to allow configuration, and client pairing, from your favorite
web browser. Pair from the local server or any mobile device.
</p>
</div>
</section>
<!-- Features section-->
<section class="offset-anchor bg-dark py-5" id="Features">
<div class="container px-auto">
<h2 class="text-center text-white fw-bolder my-5">Features</h2>
<!-- Create a card for each feature -->
<div class="row gx-5">
<div class="col-md-6 col-lg-4 mb-5">
<div class="card bg-dark-gray text-white rounded-0">
<div class="card-body p-4">
<div class="d-flex align-items-center">
<div class="icon text-white">
<i class="fa-fw fa-2x fas fa-server"></i>
</div>
<div class="ms-3">
<h5 class="fw-bolder mb-0">Self-hosted</h5>
<p class="mb-0">
Run Sunshine on your own hardware. No need to pay monthly fees to a
cloud gaming provider.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-5">
<div class="card bg-dark-gray text-white rounded-0">
<div class="card-body p-4">
<div class="d-flex align-items-center">
<div class="icon text-white">
<img height="40" src="https://moonlight-stream.org/images/moonlight.svg">
</div>
<div class="ms-3">
<h5 class="fw-bolder mb-0">Moonlight Support</h5>
<p class="mb-0">
Connect to Sunshine from any Moonlight client. Moonlight is available
for Windows, macOS, Linux, Android, iOS, Xbox, and more.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-5">
<div class="card bg-dark-gray text-white rounded-0">
<div class="card-body p-4">
<div class="d-flex align-items-center">
<div class="icon text-white">
<i class="fa-fw fa-2x fas fa-microchip"></i>
</div>
<div class="ms-3">
<h5 class="fw-bolder mb-0">Hardware Encoding</h5>
<p class="mb-0">
Sunshine supports AMD, Intel, and Nvidia GPUs for hardware encoding.
Software encoding is also available.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-5 mb-lg-0">
<div class="card bg-dark-gray text-white rounded-0">
<div class="card-body p-4">
<div class="d-flex align-items-center">
<div class="icon text-white">
<i class="fa-fw fa-2x fas fa-globe"></i>
</div>
<div class="ms-3">
<h5 class="fw-bolder mb-0">Low Latency</h5>
<p class="mb-0">
Sunshine is designed to provide the lowest latency possible to achieve optimal gaming performance.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-5 mb-lg-0">
<div class="card bg-dark-gray text-white rounded-0">
<div class="card-body p-4">
<div class="d-flex align-items-center">
<div class="icon text-white">
<i class="fa-fw fa-2x fas fa-gamepad"></i>
</div>
<div class="ms-3">
<h5 class="fw-bolder mb-0">Control</h5>
<p class="mb-0">
Sunshine emulates an Xbox 360 or DS4 controller. Use nearly any
controller on your Moonlight client!<br>
<small>
<ul>
<li>DS4 emulation is only available on Windows.</li>
<li>Gamepad emulation is not currently supported on macOS.</li>
</ul>
</small>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-5 mb-lg-0">
<div class="card bg-dark-gray text-white rounded-0">
<div class="card-body p-4">
<div class="d-flex align-items-center">
<div class="icon text-white">
<i class="fa-fw fa-2x fas fa-gear"></i>
</div>
<div class="ms-3">
<h5 class="fw-bolder mb-0">Configurable</h5>
<p class="mb-0">
Sunshine offers many configuration options to customize your experience.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- More cards -->
<div class="container py-5 px-auto">
<div class="container col-md-10">
<!-- Docs section -->
<section class="offset-anchor py-4" id="Docs">
<div class="card bg-dark text-white rounded-0">
<div class="card-body p-4">
<div class="d-flex align-items-center">
<i class="fa-fw fa-2x fas fa-book"></i>
<div class="ms-3">
<h2 class="fw-bolder mb-0">Documentation</h2>
<p class="mb-0">
Read the documentation to learn how to install, use, and configure Sunshine.
</p>
</div>
</div>
</div>
<div class="card-footer p-3 ms-3">
<a class="btn btn-outline-light me-3 mb-3" href="https://docs.lizardbyte.dev/projects/sunshine" target="_blank">
<i class="fa-fw fas fa-book"></i>
Read the Docs
</a>
</div>
</div>
</section>
<!-- Download section -->
<section class="offset-anchor py-4" id="Download">
<div class="card bg-dark text-white rounded-0">
<div class="card-body p-4">
<div class="d-flex align-items-center">
<i class="fa-fw fa-2x fas fa-download"></i>
<div class="ms-3">
<h2 class="fw-bolder mb-0">Download</h2>
<p class="mb-0">
Download Sunshine for your platform.
</p>
</div>
</div>
</div>
<div class="card-footer p-3 ms-3">
<a class="btn btn-outline-light me-3 mb-3" href="https://github.com/LizardByte/Sunshine/releases/latest" target="_blank">
<i class="fa-fw fab fa-github"></i>
Latest
</a>
<a class="btn btn-outline-light me-3 mb-3" href="https://github.com/LizardByte/Sunshine/releases/tag/nightly-dev" target="_blank">
<i class="fa-fw fas fa-infinity"></i>
Nightly
</a>
<a class="btn btn-outline-light me-3 mb-3" href="https://hub.docker.com/r/lizardbyte/sunshine" target="_blank">
<i class="fa-fw fab fa-docker"></i>
Docker
</a>
</div>
</div>
</section>
</div>
</div>
<!-- Donate section -->
<section class="offset-anchor bg-dark p-5" id="Donate">
<div class="container mb-5 shadow border-0 bg-dark-gray rounded-0 col-md-7">
<div class="d-table-row g-0 text-white">
<div class="d-table-cell px-3 align-middle text-center">
<h1>
<i class="fa-fw fas fa-coins"></i>
</h1>
</div>
<div class="col-sm-auto border-white my-3 px-3 py-2 border-start">
<div class="container">
<h4 class="card-title mb-3 fw-bolder">Donate</h4>
</div>
<a
class="text-decoration-none"
href="https://github.com/sponsors/LizardByte"
target="_blank">
<img class="m-3"
alt="GitHub Sponsors"
src="https://img.shields.io/github/sponsors/lizardbyte?label=Github%20Sponsors&style=for-the-badge&color=green&logo=githubsponsors"
>
</a>
<a
class="text-decoration-none"
href="https://mee6.xyz/m/804382334370578482"
target="_blank">
<img class="m-3"
alt="MEE6"
src="https://img.shields.io/static/v1?style=for-the-badge&label=MEE6&message=Donate&color=green&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAklEQVR4AewaftIAAAG6SURBVJXBPWgTARiA4fe7H/WKCGoo0qAcIhUJHCSnoIgZYiq4ugk6BEuEimRxk04SwcEhU0pMDY5xcnSK0N22XCexYHSxkpBCB69gc58ntHCcEerzCCmVIMyjVEFLCi4xgT5ID6HV8Zw1EoR9D4LQMQwav8Y6DwiTqW1KO4qoLXtOSMwkNr8ROmON3kfKHUD4N4kUX9Eblx8tdleb9T2D2Fi1AVLk0KQ4Vm0Qk0oQ5lX1IyD8HxUR31DVKiDsU43YHQ1I290eolFEgqhq1RAokbDx+iXd8nl2vm1y4OfgO2/nLrC+9JwkgZKl4JIwc/Um4WCLqeksB46dzJC7/5izxdskKbgWKZlcgUyuQJJh2fi1Z0xiCfQVZkkJhz/Y+fqZP+zjJzh10SNNoG8p9IBZUkafAjaf3OW0bTO6doviizekKfQsEWmp6kNASMhen6O89I6Z7QEfrpSJ+IuKSMtcb9a38gtPs4BPyvDMOb64l9AjR0kTod3xpl4ZxEyRGugKh6YrpkiNmElstVnf8xcWu5Yp05FSAITJ1DalLci9Zc8JiQkplSDMo1RBSwouMYE+SA+h1fGcNRJ+A8xgoQAar6IXAAAAAElFTkSuQmCC"
>
</a>
<a
class="text-decoration-none"
href="https://www.patreon.com/LizardByte"
target="_blank">
<img class="m-3"
alt="Patreon"
src="https://img.shields.io/badge/dynamic/json?color=green&label=Patreon&style=for-the-badge&query=patron_count&url=https%3A%2F%2Fapp.lizardbyte.dev%2Funo%2Fpatreon%2FLizardByte.json&logo=patreon"
>
</a>
<a
class="text-decoration-none"
href="https://www.paypal.com/paypalme/ReenigneArcher"
target="_blank">
<img class="m-3"
alt="PayPal"
src="https://img.shields.io/static/v1?style=for-the-badge&label=PayPal&message=Donate&color=green&logo=paypal"
>
</a>
</div>
</div>
</div>
</section>
<!-- Support -->
<section class="offset-anchor bg-dark p-5" id="Support">
<div class="col-md-7 mx-auto mb-5">
<div class="container shadow border-0 bg-primary rounded-0">
<div class="d-table-row g-0 text-white">
<div class="d-table-cell px-4 align-middle text-center">
<div class="fs-3 fw-bold text-white">Support Center</div>
<div class="text-white">Find answers and ask questions.</div>
</div>
<div class="col-sm-auto border-white my-3 px-4 py-2 border-start">
<p class="card-text">
<em>The one who knows all the answers has not been asked all the questions.</em>
Confucius.
</p>
<div class="input-group mb-2">
<a href="support">
<button class="btn btn-outline-light rounded-0"
id="button-support"
type="button"
>Support</button>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Footer-->
<footer class="bg-dark py-4 mt-auto" id="footer-container"></footer>
<!-- Audio player bottom navbar -->
<nav id="player-navbar"></nav>
<!-- Bootstrap core JS-->
<script src="https://app.lizardbyte.dev/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Get navbar -->
<script src="https://app.lizardbyte.dev/js/navbar.js"></script>
<!-- Get footer -->
<script src="https://app.lizardbyte.dev/js/footer.js"></script>
<!-- Discord WidgetBot -->
<script src="https://app.lizardbyte.dev/js/discord.js"></script>
</body>
</html>