docs: Add helpful hints around how to install via VCC

2024-12-29 18:55:06 +08:00 · 2023-05-14 22:04:55 +09:00 · 2023-05-14 22:04:55 +09:00 · 342039829e
commit 342039829e
parent 0115e3946b
10 changed files with 213 additions and 9 deletions
--- a/docs/.yarnrc.yml
+++ b/docs/.yarnrc.yml
@ -3,3 +3,5 @@ plugins:
    spec: "@yarnpkg/plugin-interactive-tools"

 yarnPath: .yarn/releases/yarn-3.4.1.cjs
+
+nodeLinker: node-modules
--- a/docs/i18n/en/code.json
+++ b/docs/i18n/en/code.json
@ -20,7 +20,7 @@
  },
  "theme.ErrorPageContent.tryAgain": {
    "message": "Try again",
-    "description": "The label of the button to try again when the page crashed"
+    "description": "The label of the button to try again rendering when the React error boundary captures an error"
  },
  "theme.NotFound.title": {
    "message": "Page Not Found",
@ -283,5 +283,39 @@
  },
  "Embed modular avatar components in your prefabs to make installation a breeze!": {
    "message": "Embed modular avatar components in your prefabs to make installation a breeze!"
+  },
+  "VPM installation": {
+    "message": "VPM installation"
+  },
+  "You should have seen a prompt to add Modular Avatar to VCC. If you didn't, upgrade your copy of the VRChat Creator Companion and try again. Once you've added the repository, you can install Modular Avatar in your project by clicking the button shown here:": {
+    "message": "You should have seen a prompt to add Modular Avatar to VCC. If you didn't, upgrade your copy of the VRChat Creator Companion and try again. Once you've added the repository, you can install Modular Avatar in your project by clicking the button shown here:"
+  },
+  "Click the plus button to install": {
+    "message": "Click the plus button to install"
+  },
+  "Close": {
+    "message": "Close"
+  },
+  "Download (using VCC)": {
+    "message": "Download (using VCC)"
+  },
+  "Tutorials": {
+    "message": "Tutorials"
+  },
+  "theme.NavBar.navAriaLabel": {
+    "message": "Main",
+    "description": "The ARIA label for the main navigation"
+  },
+  "theme.docs.sidebar.navAriaLabel": {
+    "message": "Docs sidebar",
+    "description": "The ARIA label for the sidebar navigation"
+  },
+  "theme.docs.sidebar.closeSidebarButtonAriaLabel": {
+    "message": "Close navigation bar",
+    "description": "The ARIA label for close button of mobile sidebar"
+  },
+  "theme.docs.sidebar.toggleSidebarButtonAriaLabel": {
+    "message": "Toggle navigation bar",
+    "description": "The ARIA label for hamburger menu button of mobile navigation"
  }
 }
--- a/docs/i18n/en/docusaurus-plugin-content-docs/current.json
+++ b/docs/i18n/en/docusaurus-plugin-content-docs/current.json
@ -2,5 +2,17 @@
  "version.label": {
    "message": "Next",
    "description": "The label for version current"
+  },
+  "sidebar.tutorialSidebar.category.Tutorials": {
+    "message": "Tutorials",
+    "description": "The label for category Tutorials in sidebar tutorialSidebar"
+  },
+  "sidebar.tutorialSidebar.category.Component reference": {
+    "message": "Component reference",
+    "description": "The label for category Component reference in sidebar tutorialSidebar"
+  },
+  "sidebar.tutorialSidebar.category.Distributing Prefabs": {
+    "message": "Distributing Prefabs",
+    "description": "The label for category Distributing Prefabs in sidebar tutorialSidebar"
  }
 }
--- a/docs/i18n/en/docusaurus-theme-classic/navbar.json
+++ b/docs/i18n/en/docusaurus-theme-classic/navbar.json
@ -10,5 +10,9 @@
  "item.label.GitHub": {
    "message": "GitHub",
    "description": "Navbar item with label GitHub"
+  },
+  "logo.alt": {
+    "message": "Logo",
+    "description": "The alt text of navbar logo"
  }
 }
--- a/docs/i18n/ja/code.json
+++ b/docs/i18n/ja/code.json
@ -257,8 +257,20 @@
  "Documentation": {
    "message": "説明書"
  },
+  "VPM installation": {
+    "message": "VPMでインストール"
+  },
+  "You should have seen a prompt to add Modular Avatar to VCC. If you didn't, upgrade your copy of the VRChat Creator Companion and try again. Once you've added the repository, you can install Modular Avatar in your project by clicking the button shown here:": {
+    "message": "VCCでインストールする確認画面が出たはずです。もし出てない場合は、VRChat Creator Companionを更新してもう一度やり直してみてください。設定したあとは、下記のボタンを押すことでプロジェクトにModular Avatarを追加できます。"
+  },
+  "Click the plus button to install": {
+    "message": "プラスボタンを押してインストール"
+  },
+  "Close": {
+    "message": "閉じる"
+  },
  "Download (using VCC)": {
-    "message": "VCCでダウンロード"
+    "message": "ダウンロード (VCC経由)"
  },
  "Modular Avatar": {
    "message": "モジュラーアバター"
--- a/docs/package.json
+++ b/docs/package.json
@ -24,6 +24,8 @@
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-loadable": "^5.5.0",
+    "react-medium-image-zoom": "^5.1.6",
+    "react-modal": "^3.16.1",
    "react-player": "^2.12.0"
  },
  "devDependencies": {
--- a/docs/src/components/install.tsx
+++ b/docs/src/components/install.tsx
@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+import { createPortal } from 'react-dom';
+import Modal from 'react-modal';
+
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Layout from '@theme/Layout';
+import Translate, {translate} from '@docusaurus/Translate';
+
+import styles from '@site/src/pages/index.module.css';
+
+const install_help = require('@site/static/img/ma-install-help.png').default;
+
+function ModalContent({closeModal}) {
+    return <div className="card card--modal">
+        <div className={"card__header"}>
+            <h3><Translate>VPM installation</Translate></h3>
+        </div>
+        <div className={"card__body"}>
+            <p>
+                <Translate>
+                    You should have seen a prompt to add Modular Avatar to VCC. If you didn't, upgrade your copy of the VRChat Creator Companion
+                    and try again. Once you've added the repository, you can install Modular Avatar in your project by clicking
+                    the button shown here:
+                </Translate>
+            </p>
+            <img src={install_help} alt={translate({message: "Click the plus button to install"})}/>
+        </div>
+        <div className={"card__footer"}>
+            <button className={"button button--secondary button--block"} onClick={closeModal}>
+                <Translate>Close</Translate>
+            </button>
+        </div>
+    </div>;
+}
+
+export default function InstallButton() {
+    const [showModal, setShowModal] = useState(false);
+    
+    /*
+                <!--{
+                showModal && createPortal(
+                    <ModalContent onClose={() => setShowModal(false)}/>,
+                    document.body
+                )
+            }-->
+     */
+    
+    return (
+        <>
+            <Link
+                className={`button button--secondary button--lg ${styles.button}`}
+                //to="vcc://vpm/addRepo?url=https://vpm.nadena.dev/vpm.json"
+                onClick={() => { setShowModal(true); return true; }}
+            >
+                <Translate>Download (using VCC)</Translate>
+            </Link>
+            { showModal && 
+            <Modal isOpen={{showModal}} onRequestClose={() => setShowModal(false)}
+                   contentLabel={"Example Modal"} className={"Modal"}>
+                <ModalContent closeModal={() => setShowModal(false)}/>
+            </Modal> }
+        </>
+    );
+}
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@ -27,4 +27,34 @@
  --ifm-color-primary-lighter: #32d8b4;
  --ifm-color-primary-lightest: #4fddbf;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+}
+
+
+.install-btn-container {
+  position: relative;
+}
+
+.Modal {
+  position: absolute;
+  margin-left: auto;
+  margin-right: auto;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%)
+}
+
+.card--modal {
+  border: 3px;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
+}
+
+.card--modal .card__header {
+  background-color: var(--ifm-color-primary);
+  color: var(--ifm-font-color-base-inverse);
+  padding-bottom: 4px;
+}
+
+.card--modal .card__header .h3 {
+  display: block;
+  top: -5px;
 }
--- a/docs/src/pages/index.tsx
+++ b/docs/src/pages/index.tsx
@ -7,6 +7,8 @@ import HomepageFeatures from '@site/src/components/HomepageFeatures';
 import styles from './index.module.css';
 import Translate, {translate} from '@docusaurus/Translate'; 

+import InstallButton from '@site/src/components/install';
+
 let logo;
 try {
  logo = require('@site/static/img/logo/ma_logo.png');
@ -28,16 +30,13 @@ function HomepageHeader() {
            <Translate>Drag-and-Drop Avatar Assembly</Translate>
        </p>
        <div className={styles.buttons}>
+          <InstallButton/>
          <Link
            className={`button button--secondary button--lg ${styles.button}`}
-            to="/docs/intro">
+            to="/docs/intro"
+          >
            <Translate>Documentation</Translate>
          </Link>
-          <Link
-              className={`button button--secondary button--lg ${styles.button}`}
-              to="vcc://vpm/addRepo?url=https://vpm.nadena.dev/vpm.json">
-              <Translate>Download (using VCC)</Translate>
-          </Link>
          <Link
            className={`button button--secondary button--lg ${styles.button}`}
            to="/docs/tutorials/">
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@ -5209,6 +5209,13 @@ __metadata:
  languageName: node
  linkType: hard

+"exenv@npm:^1.2.0":
+  version: 1.2.2
+  resolution: "exenv@npm:1.2.2"
+  checksum: a894f3b60ab8419e0b6eec99c690a009c8276b4c90655ccaf7d28faba2de3a6b93b3d92210f9dc5efd36058d44f04098f6bbccef99859151104bfd49939904dc
+  languageName: node
+  linkType: hard
+
 "express@npm:^4.17.3":
  version: 4.18.2
  resolution: "express@npm:4.18.2"
@ -7369,6 +7376,8 @@ __metadata:
    react: ^17.0.2
    react-dom: ^17.0.2
    react-loadable: ^5.5.0
+    react-medium-image-zoom: ^5.1.6
+    react-modal: ^3.16.1
    react-player: ^2.12.0
    typescript: ^5.0.4
  languageName: unknown
@ -8741,7 +8750,7 @@ __metadata:
  languageName: node
  linkType: hard

-"react-lifecycles-compat@npm:^3.0.4":
+"react-lifecycles-compat@npm:^3.0.0, react-lifecycles-compat@npm:^3.0.4":
  version: 3.0.4
  resolution: "react-lifecycles-compat@npm:3.0.4"
  checksum: a904b0fc0a8eeb15a148c9feb7bc17cec7ef96e71188280061fc340043fd6d8ee3ff233381f0e8f95c1cf926210b2c4a31f38182c8f35ac55057e453d6df204f
@ -8771,6 +8780,31 @@ __metadata:
  languageName: node
  linkType: hard

+"react-medium-image-zoom@npm:^5.1.6":
+  version: 5.1.6
+  resolution: "react-medium-image-zoom@npm:5.1.6"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 4df975a80e9244764de600b64e26df114643365ecc1c1c122fb1c1cf638cbf01999dd46b67c11cf01d0c26cfe94a38fa4e0554be30a54555dab5a8103b1f9139
+  languageName: node
+  linkType: hard
+
+"react-modal@npm:^3.16.1":
+  version: 3.16.1
+  resolution: "react-modal@npm:3.16.1"
+  dependencies:
+    exenv: ^1.2.0
+    prop-types: ^15.7.2
+    react-lifecycles-compat: ^3.0.0
+    warning: ^4.0.3
+  peerDependencies:
+    react: ^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18
+    react-dom: ^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18
+  checksum: 978936e9320fad839c039b9ee4de55d40888156cb40e093615d6fbc2ff07139d5db06f14782cb7767f780bd5fb57956778669426c535ebc0068a7a03882c7e75
+  languageName: node
+  linkType: hard
+
 "react-player@npm:^2.12.0":
  version: 2.12.0
  resolution: "react-player@npm:2.12.0"
@ -10547,6 +10581,15 @@ __metadata:
  languageName: node
  linkType: hard

+"warning@npm:^4.0.3":
+  version: 4.0.3
+  resolution: "warning@npm:4.0.3"
+  dependencies:
+    loose-envify: ^1.0.0
+  checksum: 4f2cb6a9575e4faf71ddad9ad1ae7a00d0a75d24521c193fa464f30e6b04027bd97aa5d9546b0e13d3a150ab402eda216d59c1d0f2d6ca60124d96cd40dfa35c
+  languageName: node
+  linkType: hard
+
 "watchpack@npm:^2.4.0":
  version: 2.4.0
  resolution: "watchpack@npm:2.4.0"