diff --git a/docs/.yarnrc.yml b/docs/.yarnrc.yml index 86ab4238..f0b6364d 100644 --- 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 \ No newline at end of file diff --git a/docs/i18n/en/code.json b/docs/i18n/en/code.json index 0e8e33cb..222575ff 100644 --- 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" } } diff --git a/docs/i18n/en/docusaurus-plugin-content-docs/current.json b/docs/i18n/en/docusaurus-plugin-content-docs/current.json index dd30528d..c17e75a0 100644 --- 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" } } diff --git a/docs/i18n/en/docusaurus-theme-classic/navbar.json b/docs/i18n/en/docusaurus-theme-classic/navbar.json index d9f45dce..af164d93 100644 --- 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" } } diff --git a/docs/i18n/ja/code.json b/docs/i18n/ja/code.json index 55519be1..d16c965f 100644 --- 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": "モジュラーアバター" diff --git a/docs/package.json b/docs/package.json index ad0fac0d..07702089 100644 --- 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": { diff --git a/docs/src/components/install.tsx b/docs/src/components/install.tsx new file mode 100644 index 00000000..01711755 --- /dev/null +++ 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
+
+

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: + +

+ {translate({message: +
+
+ +
+
; +} + +export default function InstallButton() { + const [showModal, setShowModal] = useState(false); + + /* + + */ + + return ( + <> + { setShowModal(true); return true; }} + > + Download (using VCC) + + { showModal && + setShowModal(false)} + contentLabel={"Example Modal"} className={"Modal"}> + setShowModal(false)}/> + } + + ); +} \ No newline at end of file diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css index 272993b9..7c0f90a8 100644 --- 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; } \ No newline at end of file diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx index ac7d3167..50dd02de 100644 --- 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() { Drag-and-Drop Avatar Assembly

+ + to="/docs/intro" + > Documentation - - Download (using VCC) - diff --git a/docs/yarn.lock b/docs/yarn.lock index 2a60d792..2fffc007 100644 --- 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"