first attempt

FACS01-01 · May 3, 2024 · b5150d6 · b5150d6
1 parent 805c506
commit b5150d6
Show file tree

Hide file tree

Showing 5 changed files with 512 additions and 0 deletions.
diff --git a/Website/app.js b/Website/app.js
@@ -0,0 +1,43 @@
+import { baseLayerLuminance, StandardLuminance } from 'https://unpkg.com/@fluentui/web-components';
+
+const LISTING_URL = "abc";
+
+const setTheme = () => {
+  const isDarkTheme = () => window.matchMedia("(prefers-color-scheme: dark)").matches;
+  if (isDarkTheme()) {
+    baseLayerLuminance.setValueFor(document.documentElement, StandardLuminance.DarkMode);
+  } else {
+    baseLayerLuminance.setValueFor(document.documentElement, StandardLuminance.LightMode);
+  }
+}
+
+(() => {
+  setTheme();
+
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    setTheme();
+  });
+
+  const urlBarHelpButton = document.getElementById('urlBarHelp');
+  const addListingToVccHelp = document.getElementById('addListingToVccHelp');
+  urlBarHelpButton.addEventListener('click', () => {
+    addListingToVccHelp.hidden = false;
+  });
+  const addListingToVccHelpClose = document.getElementById('addListingToVccHelpClose');
+  addListingToVccHelpClose.addEventListener('click', () => {
+    addListingToVccHelp.hidden = true;
+  });
+
+  const vccAddRepoButton = document.getElementById('vccAddRepoButton');
+  vccAddRepoButton.addEventListener('click', () => window.location.assign(`vcc://vpm/addRepo?url=${encodeURIComponent(LISTING_URL)}`));
+
+  const vccUrlFieldCopy = document.getElementById('vccUrlFieldCopy');
+  vccUrlFieldCopy.addEventListener('click', () => {
+    navigator.clipboard.writeText(LISTING_URL);
+    vccUrlFieldCopy.appearance = 'accent';
+    setTimeout(() => {
+      vccUrlFieldCopy.appearance = 'neutral';
+    }, 1000);
+  });
+
+})();
diff --git a/Website/banner.png b/Website/banner.png
diff --git a/Website/index.html b/Website/index.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en" style="--neutral-layer-card-container: #1a1a1a; --neutral-layer-floating: #333333; --neutral-layer-1: #272727; --neutral-layer-2: #1a1a1a; --neutral-layer-3: #0b0b0b; --neutral-layer-4: #000000; --fill-color: #272727; --accent-fill-rest: #60c9fc; --accent-fill-hover: #4fc0fc; --accent-fill-active: #34b0fb; --accent-fill-focus: #60c9fc; --accent-foreground-rest: #82ddfd; --accent-foreground-hover: #9eecfd; --accent-foreground-active: #3db5fb; --accent-foreground-focus: #82ddfd; --accent-stroke-control-rest: linear-gradient(#7ed3fd 90%, #4ea3cc 100%); --accent-stroke-control-hover: linear-gradient(#72cdfd 90%, #419dcf 100%); --accent-stroke-control-active: #59befc; --accent-stroke-control-focus: linear-gradient(#7ed3fd 90%, #4ea3cc 100%); --neutral-fill-rest: #333333; --neutral-fill-hover: #383838; --neutral-fill-active: #2d2d2d; --neutral-fill-focus: #333333; --neutral-fill-input-rest: #333333; --neutral-fill-input-hover: #383838; --neutral-fill-input-active: #2d2d2d; --neutral-fill-input-focus: #272727; --neutral-fill-input-alt-rest: #1a1a1a; --neutral-fill-input-alt-hover: #333333; --neutral-fill-input-alt-active: #3d3d3d; --neutral-fill-input-alt-focus: #1a1a1a; --neutral-fill-layer-rest: #333333; --neutral-fill-layer-hover: #383838; --neutral-fill-layer-active: #383838; --neutral-fill-layer-alt-rest: #212121; --neutral-fill-secondary-rest: #383838; --neutral-fill-secondary-hover: #333333; --neutral-fill-secondary-active: #2d2d2d; --neutral-fill-secondary-focus: #383838; --neutral-fill-stealth-rest: #272727; --neutral-fill-stealth-hover: #383838; --neutral-fill-stealth-active: #333333; --neutral-fill-stealth-focus: #272727; --neutral-fill-strong-rest: #8e8e8e; --neutral-fill-strong-hover: #b3b3b3; --neutral-fill-strong-active: #7a7a7a; --neutral-fill-strong-focus: #8e8e8e; --neutral-foreground-rest: #ffffff; --neutral-foreground-hover: #a8a8a8; --neutral-foreground-active: #7a7a7a; --neutral-foreground-focus: #ffffff; --neutral-foreground-hint: #8e8e8e; --neutral-stroke-rest: #505050; --neutral-stroke-hover: #636363; --neutral-stroke-active: #464646; --neutral-stroke-focus: #505050; --neutral-stroke-control-rest: linear-gradient(#505050 0%, #383838 10%); --neutral-stroke-control-hover: linear-gradient(#595959 0%, #414141 10%); --neutral-stroke-control-active: #414141; --neutral-stroke-control-focus: linear-gradient(#595959 0%, #414141 10%); --neutral-stroke-divider-rest: #3d3d3d; --neutral-stroke-input-rest: linear-gradient(#383838 calc(100% - 1px), #929292 calc(100% - 1px), #929292); --neutral-stroke-input-hover: linear-gradient(#414141 calc(100% - 1px), #9a9a9a calc(100% - 1px), #9a9a9a); --neutral-stroke-input-active: #414141; --neutral-stroke-input-focus: linear-gradient(#414141 calc(100% - 1px), #9a9a9a calc(100% - 1px), #9a9a9a); --neutral-stroke-layer-rest: #383838; --neutral-stroke-layer-hover: #383838; --neutral-stroke-layer-active: #383838; --neutral-stroke-strong-rest: #9e9e9e; --neutral-stroke-strong-hover: #9e9e9e; --neutral-stroke-strong-active: #9e9e9e; --neutral-stroke-strong-focus: #9e9e9e; --neutral-fill-inverse-rest: #ffffff; --neutral-fill-inverse-hover: #fbfbfb; --neutral-fill-inverse-active: #ffffff; --neutral-fill-inverse-focus: #ffffff; --neutral-fill-stealth-rest-on-neutral-fill-layer-rest: #333333; --neutral-fill-stealth-hover-on-neutral-fill-layer-rest: #414141; --neutral-fill-stealth-active-on-neutral-fill-layer-rest: #3d3d3d; --input-placeholder-rest: #9e9e9e; --input-placeholder-hover: #a2a2a2; --input-filled-placeholder-rest: #a2a2a2; --input-filled-placeholder-hover: #9e9e9e; --clear-button-hover: #383838; --clear-button-active: #333333; --tree-item-expand-collapse-hover: #464646; --tree-item-expand-collapse-selected-hover: #464646; --foreground-on-accent-rest: #000000; --foreground-on-accent-active: #000000; --foreground-on-accent-rest-large: #000000; --foreground-on-accent-hover: #000000; --foreground-on-accent-hover-large: #000000; --foreground-on-accent-active-large: #000000; --foreground-on-accent-focus: #000000; --foreground-on-accent-focus-large: #000000; --focus-stroke-inner: #000000; --focus-stroke-outer: #ffffff; --base-layer-luminance: 0.15;"><head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>VCC Listing</title>
+  <script type="module" src="https://unpkg.com/@fluentui/web-components"></script>
+  <link rel="stylesheet" href="styles.css">
+<style id="__web-inspector-hide-shortcut-style__">
+.__web-inspector-hide-shortcut__, .__web-inspector-hide-shortcut__ *, .__web-inspector-hidebefore-shortcut__::before, .__web-inspector-hideafter-shortcut__::after
+{
+    visibility: hidden !important;
+}
+</style></head>
+<body>
+  <div class="col align-items-center content" style="--neutral-layer-card-container: #1a1a1a; --neutral-layer-floating: #333333; --neutral-layer-1: #272727; --neutral-layer-2: #1a1a1a; --neutral-layer-3: #0b0b0b; --neutral-layer-4: #000000; --fill-color: #272727; --accent-fill-rest: #60c9fc; --accent-fill-hover: #4fc0fc; --accent-fill-active: #34b0fb; --accent-fill-focus: #60c9fc; --accent-foreground-rest: #82ddfd; --accent-foreground-hover: #9eecfd; --accent-foreground-active: #3db5fb; --accent-foreground-focus: #82ddfd; --accent-stroke-control-rest: linear-gradient(#7ed3fd 90%, #4ea3cc 100%); --accent-stroke-control-hover: linear-gradient(#72cdfd 90%, #419dcf 100%); --accent-stroke-control-active: #59befc; --accent-stroke-control-focus: linear-gradient(#7ed3fd 90%, #4ea3cc 100%); --neutral-fill-rest: #333333; --neutral-fill-hover: #383838; --neutral-fill-active: #2d2d2d; --neutral-fill-focus: #333333; --neutral-fill-input-rest: #333333; --neutral-fill-input-hover: #383838; --neutral-fill-input-active: #2d2d2d; --neutral-fill-input-focus: #272727; --neutral-fill-input-alt-rest: #1a1a1a; --neutral-fill-input-alt-hover: #333333; --neutral-fill-input-alt-active: #3d3d3d; --neutral-fill-input-alt-focus: #1a1a1a; --neutral-fill-layer-rest: #333333; --neutral-fill-layer-hover: #383838; --neutral-fill-layer-active: #383838; --neutral-fill-layer-alt-rest: #212121; --neutral-fill-secondary-rest: #383838; --neutral-fill-secondary-hover: #333333; --neutral-fill-secondary-active: #2d2d2d; --neutral-fill-secondary-focus: #383838; --neutral-fill-stealth-rest: #272727; --neutral-fill-stealth-hover: #383838; --neutral-fill-stealth-active: #333333; --neutral-fill-stealth-focus: #272727; --neutral-fill-strong-rest: #8e8e8e; --neutral-fill-strong-hover: #b3b3b3; --neutral-fill-strong-active: #7a7a7a; --neutral-fill-strong-focus: #8e8e8e; --neutral-foreground-rest: #ffffff; --neutral-foreground-hover: #a8a8a8; --neutral-foreground-active: #7a7a7a; --neutral-foreground-focus: #ffffff; --neutral-foreground-hint: #8e8e8e; --neutral-stroke-rest: #505050; --neutral-stroke-hover: #636363; --neutral-stroke-active: #464646; --neutral-stroke-focus: #505050; --neutral-stroke-control-rest: linear-gradient(#505050 0%, #383838 10%); --neutral-stroke-control-hover: linear-gradient(#595959 0%, #414141 10%); --neutral-stroke-control-active: #414141; --neutral-stroke-control-focus: linear-gradient(#595959 0%, #414141 10%); --neutral-stroke-divider-rest: #3d3d3d; --neutral-stroke-input-rest: linear-gradient(#383838 calc(100% - 1px), #929292 calc(100% - 1px), #929292); --neutral-stroke-input-hover: linear-gradient(#414141 calc(100% - 1px), #9a9a9a calc(100% - 1px), #9a9a9a); --neutral-stroke-input-active: #414141; --neutral-stroke-input-focus: linear-gradient(#414141 calc(100% - 1px), #9a9a9a calc(100% - 1px), #9a9a9a); --neutral-stroke-layer-rest: #383838; --neutral-stroke-layer-hover: #383838; --neutral-stroke-layer-active: #383838; --neutral-stroke-strong-rest: #9e9e9e; --neutral-stroke-strong-hover: #9e9e9e; --neutral-stroke-strong-active: #9e9e9e; --neutral-stroke-strong-focus: #9e9e9e; --neutral-fill-inverse-rest: #ffffff; --neutral-fill-inverse-hover: #fbfbfb; --neutral-fill-inverse-active: #ffffff; --neutral-fill-inverse-focus: #ffffff; --neutral-fill-stealth-rest-on-neutral-fill-layer-rest: #333333; --neutral-fill-stealth-hover-on-neutral-fill-layer-rest: #414141; --neutral-fill-stealth-active-on-neutral-fill-layer-rest: #3d3d3d; --input-placeholder-rest: #9e9e9e; --input-placeholder-hover: #a2a2a2; --input-filled-placeholder-rest: #a2a2a2; --input-filled-placeholder-hover: #9e9e9e; --clear-button-hover: #383838; --clear-button-active: #333333; --tree-item-expand-collapse-hover: #464646; --tree-item-expand-collapse-selected-hover: #464646;">
+    <div id="listingInfo" class="col mb-4 w-100 align-items-center">
+        <div class="bannerImage" style="background-image: url(banner.png)"></div>
+      <h1>FACS01 VCC Listing</h1>
+        <div class="caption1 mb-2">Listing for my VPM compatible packages</div>
+      <div class="col align-items-center">
+        <fluent-tooltip id="publishedByTooltip" anchor="publishedByText" delay="300" auto-update-mode="anchor">FACS01 on Discord!</fluent-tooltip>
+        <div class="caption1 mb-2" id="publishedByText">Published by <a href="https://github.com/FACS01-01" target="_blank">FACS01</a></div>
+          <div class="caption1" id="publishedByText">
+            <a href="https://github.com/FACS01-01/FACS-VPM-Listing" target="_blank">View on GitHub</a>
+          </div>
+      </div>
+    </div>
+    <div class="addToVccBlock mt-4 row align-items-center">
+      <fluent-button appearance="accent" class="ms-2 accent" id="vccAddRepoButton" current-value="">Add to VCC</fluent-button>
+      <fluent-button class="ms-2 neutral" id="vccUrlFieldCopy" current-value="" appearance="neutral">
+        <svg slot="start" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+          <path d="M8 2C6.89543 2 6 2.89543 6 4V14C6 15.1046 6.89543 16 8 16H14C15.1046 16 16 15.1046 16 14V4C16 2.89543 15.1046 2 14 2H8ZM7 4C7 3.44772 7.44772 3 8 3H14C14.5523 3 15 3.44772 15 4V14C15 14.5523 14.5523 15 14 15H8C7.44772 15 7 14.5523 7 14V4ZM4 6.00001C4 5.25973 4.4022 4.61339 5 4.26758V14.5C5 15.8807 6.11929 17 7.5 17H13.7324C13.3866 17.5978 12.7403 18 12 18H7.5C5.567 18 4 16.433 4 14.5V6.00001Z"></path>
+        </svg>
+        Copy
+      </fluent-button>
+      <fluent-tooltip id="urlBarHelpTooltip" anchor="urlBarHelp" delay="300" auto-update-mode="anchor">
+        How to add a listing to your VCC
+      </fluent-tooltip>
+      <fluent-button id="urlBarHelp" appearance="stealth" class="ms-2 stealth" current-value="">
+        <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+          <path d="M4 4V16C4 17.1046 4.89543 18 6 18H15.5C15.7761 18 16 17.7761 16 17.5C16 17.2239 15.7761 17 15.5 17H6C5.44772 17 5 16.5523 5 16H15C15.5523 16 16 15.5523 16 15V4C16 2.89543 15.1046 2 14 2H6C4.89543 2 4 2.89543 4 4ZM14 3C14.5523 3 15 3.44772 15 4V15H5V4C5 3.44772 5.44772 3 6 3H14ZM8.76069 6.40877C8.95015 6.21142 9.31074 6 10 6C10.6893 6 11.0499 6.21142 11.2393 6.40877C11.4409 6.61877 11.5 6.86546 11.5 7C11.5 7.4539 11.2301 7.69835 10.7773 7.92363C10.6657 7.97916 10.552 8.02883 10.4343 8.0797L10.4116 8.08953C10.3056 8.13534 10.1902 8.18521 10.088 8.23655C9.98257 8.28953 9.85193 8.36283 9.7433 8.46505C9.62799 8.57355 9.5 8.75189 9.5 9V9.99999C9.5 10.2761 9.72386 10.5 10 10.5C10.2761 10.5 10.5 10.2753 10.5 9.99918V9.1493C10.5111 9.14333 10.5234 9.13694 10.537 9.13009C10.6125 9.09217 10.703 9.05302 10.8197 9.00257L10.8313 8.99753C10.948 8.94704 11.0843 8.8878 11.2227 8.81894C11.7699 8.5467 12.5 8.0461 12.5 7C12.5 6.63454 12.3591 6.13123 11.9607 5.71623C11.5501 5.28858 10.9107 5 10 5C9.08926 5 8.44985 5.28858 8.03931 5.71623C7.64091 6.13123 7.5 6.63454 7.5 7C7.5 7.27614 7.72386 7.5 8 7.5C8.27614 7.5 8.5 7.27614 8.5 7C8.5 6.86546 8.55909 6.61877 8.76069 6.40877ZM10 13C10.4142 13 10.75 12.6642 10.75 12.25C10.75 11.8358 10.4142 11.5 10 11.5C9.58579 11.5 9.25 11.8358 9.25 12.25C9.25 12.6642 9.58579 13 10 13Z"></path>
+        </svg>
+      </fluent-button>
+    </div>
+    <fluent-dialog id="addListingToVccHelp" modal="" trap-focus="" hidden="">
+      <div class="col ps-4 pe-4">
+        <div class="row align-items-center justify-content-between mt-3 mb-4">
+          <div class="row align-items-center">
+            <svg class="me-2" style="fill: var(--neutral-foreground-rest)" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <path d="M4 4V16C4 17.1046 4.89543 18 6 18H15.5C15.7761 18 16 17.7761 16 17.5C16 17.2239 15.7761 17 15.5 17H6C5.44772 17 5 16.5523 5 16H15C15.5523 16 16 15.5523 16 15V4C16 2.89543 15.1046 2 14 2H6C4.89543 2 4 2.89543 4 4ZM14 3C14.5523 3 15 3.44772 15 4V15H5V4C5 3.44772 5.44772 3 6 3H14ZM8.76069 6.40877C8.95015 6.21142 9.31074 6 10 6C10.6893 6 11.0499 6.21142 11.2393 6.40877C11.4409 6.61877 11.5 6.86546 11.5 7C11.5 7.4539 11.2301 7.69835 10.7773 7.92363C10.6657 7.97916 10.552 8.02883 10.4343 8.0797L10.4116 8.08953C10.3056 8.13534 10.1902 8.18521 10.088 8.23655C9.98257 8.28953 9.85193 8.36283 9.7433 8.46505C9.62799 8.57355 9.5 8.75189 9.5 9V9.99999C9.5 10.2761 9.72386 10.5 10 10.5C10.2761 10.5 10.5 10.2753 10.5 9.99918V9.1493C10.5111 9.14333 10.5234 9.13694 10.537 9.13009C10.6125 9.09217 10.703 9.05302 10.8197 9.00257L10.8313 8.99753C10.948 8.94704 11.0843 8.8878 11.2227 8.81894C11.7699 8.5467 12.5 8.0461 12.5 7C12.5 6.63454 12.3591 6.13123 11.9607 5.71623C11.5501 5.28858 10.9107 5 10 5C9.08926 5 8.44985 5.28858 8.03931 5.71623C7.64091 6.13123 7.5 6.63454 7.5 7C7.5 7.27614 7.72386 7.5 8 7.5C8.27614 7.5 8.5 7.27614 8.5 7C8.5 6.86546 8.55909 6.61877 8.76069 6.40877ZM10 13C10.4142 13 10.75 12.6642 10.75 12.25C10.75 11.8358 10.4142 11.5 10 11.5C9.58579 11.5 9.25 11.8358 9.25 12.25C9.25 12.6642 9.58579 13 10 13Z"></path>
+            </svg>
+            <h3 class="m-0">How to add this listing to your VCC</h3> 
+          </div>
+          <fluent-button appearance="stealth" id="addListingToVccHelpClose" class="stealth" current-value="">
+            <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <path d="M4.08859 4.21569L4.14645 4.14645C4.32001 3.97288 4.58944 3.9536 4.78431 4.08859L4.85355 4.14645L10 9.293L15.1464 4.14645C15.32 3.97288 15.5894 3.9536 15.7843 4.08859L15.8536 4.14645C16.0271 4.32001 16.0464 4.58944 15.9114 4.78431L15.8536 4.85355L10.707 10L15.8536 15.1464C16.0271 15.32 16.0464 15.5894 15.9114 15.7843L15.8536 15.8536C15.68 16.0271 15.4106 16.0464 15.2157 15.9114L15.1464 15.8536L10 10.707L4.85355 15.8536C4.67999 16.0271 4.41056 16.0464 4.21569 15.9114L4.14645 15.8536C3.97288 15.68 3.9536 15.4106 4.08859 15.2157L4.14645 15.1464L9.293 10L4.14645 4.85355C3.97288 4.67999 3.9536 4.41056 4.08859 4.21569L4.14645 4.14645L4.08859 4.21569Z"></path>
+              </svg>
+          </fluent-button>
+        </div>
+        <p class="mb-1">
+          To add this listing to your VCC (VRChat Creator Companion), do the following
+        </p>
+        <ul class="mt-1 ps-5">
+          <li class="mb-2">Open your VCC and go to Settings</li>
+          <li class="mb-2">Click the "Packages" tab</li>
+          <li class="mb-2">Click "Add Repository"</li>
+          <li class="mb-2">In the field that appears - paste the corresponding url</li>
+          <li class="mb-2">Click "Add"</li>
+          <li class="mb-2">Check the repository info and click "I Understand"</li>
+          <li class="mb-2">Go to any of your projects to see the packages from the newly added listing.</li>
+        </ul>
+        <div class="caption1 mt-4">You can read more about Package Listings <a href="https://vcc.docs.vrchat.com" target="_blank">on the VCC docs</a></div>
+      </div>
+    </fluent-dialog>
+  </div>
+  <script type="module" src="app.js"></script>
+
+</body></html>
diff --git a/Website/index.json b/Website/index.json
@@ -0,0 +1,35 @@
+{
+  "name":"FACS01 VCC Listing",
+  "author":"FACS01",
+  "url":"https://FACS01-01.github.io/FACS-VCC-Listing/index.json",
+  "id":"com.facs01.facs_vcc_listing",
+  "packages":{
+    "com.facs01.facs_utilities":{
+      "versions":{
+        "24.5.3":{
+          "name":"com.facs01.facs_utilities",
+          "version":"24.5.3",
+          "description":"Tools to help you edit and repair Unity/VRChat projects",
+          "displayName":"FACS Utilities",
+          "unity":"2022.3",
+          "author":{
+            "name":"FACS01",
+            "url":"https://github.com/FACS01-01"
+          },
+          "changelogUrl":"https://github.com/FACS01-01/FACS_Utilities/releases",
+          "documentationUrl":"https://github.com/FACS01-01/FACS_Utilities/wiki",
+          "license":"OSL-3.0",
+          "licensesUrl":"https://license.md/licenses/open-software-license-3-0/",
+          "type":"Tool",
+          "vpmDependencies":{
+
+          },
+          "legacyFolders":{
+            "Assets\\FACS01 Utilities":""
+          },
+          "url":""
+        }
+      }
+    }
+  }
+}