From f0b79c9186b9db4a34f58eea554ae57b51e6bd71 Mon Sep 17 00:00:00 2001
From: Gleb <gleb@stellar.org>
Date: Thu, 13 Jul 2023 15:34:27 -0700
Subject: [PATCH] Add README for wallet docs (#180)

* Add README

* Rename and explude README
---
 docs/building-apps/wallet/README.md           | 100 ++++++++++++++++++
 .../{kt_install.mdx => kt/install.mdx}        |   0
 .../{ts_install.mdx => ts/install.mdx}        |   0
 docs/building-apps/wallet/intro.mdx           |   4 +-
 docusaurus.config.js                          |   4 +-
 5 files changed, 104 insertions(+), 4 deletions(-)
 create mode 100644 docs/building-apps/wallet/README.md
 rename docs/building-apps/wallet/component/{kt_install.mdx => kt/install.mdx} (100%)
 rename docs/building-apps/wallet/component/{ts_install.mdx => ts/install.mdx} (100%)

diff --git a/docs/building-apps/wallet/README.md b/docs/building-apps/wallet/README.md
new file mode 100644
index 000000000..48d0c0ccc
--- /dev/null
+++ b/docs/building-apps/wallet/README.md
@@ -0,0 +1,100 @@
+---
+draft: true
+---
+
+## Contributing guide
+
+Thank you for contributing to the Stellar Wallet documentation! To get started,
+please first read [main README](../../../README.md) guide.
+
+This documentation is mainly for the Wallet SDK and it's usages to integrate
+with various SEPs.
+
+The document is structured to be language-agnostic, but with the components
+listed below we can add language-specific logic into the document.
+
+Generally, text should be applicable to all of supported programming languages,
+but for differences special `<LanguageSpecific/>` component can be used (read
+more below)
+
+### Wallet guide components
+
+#### Header
+
+Header is a special .mdx file that should be included on all pages. It contains:
+
+- Language buttons
+- A general guide on using this buttons
+- Optional warning for languages in progress
+
+On all new pages, Header should be the first element. Optionally, provide list
+of languages that are work in progress:
+
+```mdxjs
+<Header WIPLangs={["ts", "dart"]}/>
+```
+
+#### LanguageButtons
+
+This component is a part of the header. It allows to switch between programming
+languages. Current language is stored as a cookie.
+
+#### WalletGuideWarn
+
+This component puts a warning if language is in progress for this section.
+Please use `WIPLangs` property to enable it for a language for the page.
+
+#### WalletCodeExample
+
+This is improved `CodeExample` component. It currently supports dynamic
+switching between TypeScript, Kotlin and Flutter code snippets (depending on the
+user selected language). It will also generate placeholder if code snippet is
+missing. Here's an example on how to use it:
+
+````mdxjs
+<CodeExample>
+
+​```kotlin
+// Kotlin example here
+​```
+
+
+​```ts
+// TypeScript example here
+​```
+
+// Flutter example is replaced with an auto-generated notice
+
+</CodeExample>
+````
+
+For a regular code examples (non Wallet SDK) please use vanilla `CodeExample`
+component.
+
+#### LanguageSpecific
+
+This component allows to render parts of documentation based on selected code.
+To get started, crete 2 files in `component` directory:
+
+```md
+// ./component/kt/hello.mdx Hello, Kotlin!
+```
+
+```md
+// ./component/ts/hello.mdx Hello, TypeScript!
+```
+
+Then, in the main document import both files and LanguageSpecific component:
+
+```mdxjs
+// main.mdx
+import {LanguageSpecific} from "@site/src/components/LanguageSpecific";
+import KtHello from "./component/kt/hello.mdx";
+import TsHello from "./component/ts/hello.mdx";
+
+<LanguageSpecific kt={<KtHello/>} ts={<TsHello/>} /
+```
+
+When user selects Kotlin, "Hello, Kotlin!" is going to be rendered, when
+TypeScript is selected — "Hello, TypeScript!". Finally, for Flutter, nothing
+would be rendered.
diff --git a/docs/building-apps/wallet/component/kt_install.mdx b/docs/building-apps/wallet/component/kt/install.mdx
similarity index 100%
rename from docs/building-apps/wallet/component/kt_install.mdx
rename to docs/building-apps/wallet/component/kt/install.mdx
diff --git a/docs/building-apps/wallet/component/ts_install.mdx b/docs/building-apps/wallet/component/ts/install.mdx
similarity index 100%
rename from docs/building-apps/wallet/component/ts_install.mdx
rename to docs/building-apps/wallet/component/ts/install.mdx
diff --git a/docs/building-apps/wallet/intro.mdx b/docs/building-apps/wallet/intro.mdx
index 9eb60c729..4c3680973 100644
--- a/docs/building-apps/wallet/intro.mdx
+++ b/docs/building-apps/wallet/intro.mdx
@@ -6,8 +6,8 @@ sidebar_position: 20
 import { LanguageSpecific } from "@site/src/components/LanguageSpecific";
 import { WalletCodeExample as CodeExample } from "@site/src/components/WalletCodeExample";
 import Header from "./component/header.mdx";
-import KtInstall from "./component/kt_install.mdx";
-import TsInstall from "./component/ts_install.mdx";
+import KtInstall from "./component/kt/install.mdx";
+import TsInstall from "./component/ts/install.mdx";
 
 <Header WIPLangs={["ts", "dart"]} />
 
diff --git a/docusaurus.config.js b/docusaurus.config.js
index 2c47ef028..8b7c8f671 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -93,7 +93,7 @@ const config = {
           rehypePlugins: [require('rehype-katex')],
           sidebarPath: require.resolve("./sidebars.js"),
           editUrl: "https://github.com/stellar/stellar-docs/tree/main",
-          exclude: ['**/component/**'],
+          exclude: ['**/component/**', '**/README.md'],
         },
         theme: {
           customCss: [require.resolve("./src/css/custom.scss")],
@@ -257,7 +257,7 @@ const config = {
           "python",
           "docker",
           "kotlin",
-            "dart"
+          "dart"
         ],
       },
     }),