Start docs site. (jsonnull#113)

.gitignore

@@ -1,6 +1,7 @@
 node_modules
 dist/
 dist-electron/
+docs/.vitepress/cache/
 coverage/
 packages/electron-trpc/renderer.d.ts
 packages/electron-trpc/main.d.ts

.prettierrc.js

@@ -3,4 +3,12 @@ module.exports = {
   tabWidth: 2,
   singleQuote: true,
   printWidth: 100,
+  overrides: [
+    {
+        "files": "docs/index.md",
+        "options": {
+            "printWidth": 60
+        }
+    }
+  ]
 };

README.md

@@ -70,10 +70,10 @@ npm install --save electron-trpc
 3. When creating the client in the render process, use the `ipcLink` (instead of the HTTP or batch HTTP links):
 
    ```ts
-   import * as trpc from '@trpc/client';
+   import { createTRPCProxyClient } from '@trpc/client';
    import { ipcLink } from 'electron-trpc/renderer';
 
-   export const trpcClient = trpc.createTRPCClient({
+   export const client = createTRPCProxyClient({
      links: [ipcLink()],
    });
    ```

docs/.vitepress/ExamplesButton.vue

@@ -0,0 +1,10 @@
+<template>
+  <div class="flex flex-col items-center pt-8">
+    <a
+      class="py-2 px-6 block rounded-full font-600 text-4 bg-[var(--vp-button-alt-bg)] border border-solid border-[var(--vp-button-alt-border)]"
+      href="https://github.com/jsonnull/electron-trpc/tree/main/examples/"
+      target="_blank"
+      >See more examples</a
+    >
+  </div>
+</template>

docs/.vitepress/Features.vue

@@ -0,0 +1,36 @@
+<script setup>
+import { ref } from 'vue';
+
+const features = ref([
+  {
+    title: 'Main <-> Renderer',
+    description: "Expose APIs from electron's main process to one or more renderer processes.",
+  },
+  {
+    title: 'Fully type-safe IPC',
+    description:
+      'Build electron IPC with all the benefits of tRPC, including inferred client types.',
+  },
+  {
+    title: 'Secure platform alternative to localhost',
+    description: 'Electron IPC is faster and more secure than opening local servers for IPC.',
+  },
+  {
+    title: 'Queries, mutations, and subscriptions',
+    description:
+      'Supports all tRPC features. No need to write complicated bi-directional IPC schemes.',
+  },
+]);
+</script>
+
+<template>
+  <div class="flex flex-col md-flex-row gap-4 pt-16 w-full">
+    <div
+      v-for="feature in features"
+      class="flex flex-col flex-1 p-4 rounded bg-[var(--vp-c-bg-soft)]"
+    >
+      <h2 class="font-500">{{ feature.title }}</h2>
+      <p class="pt-1 text-[var(--vp-c-text-2)]">{{ feature.description }}</p>
+    </div>
+  </div>
+</template>

docs/.vitepress/Hero.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="flex flex-col items-center">
+    <h1
+      class="text-12 md-text-16 font-700 tracking-tighter leading-none pb-8 color-[var(--vp-home-hero-name-color)]"
+    >
+      electron-trpc
+    </h1>
+
+    <p class="text-5 md-text-7 font-500 md-tracking-tight leading-normal text-center">
+      Ergonomic and type-safe solution for building IPC in Electron
+    </p>
+
+    <div class="flex flex-row pt-8 gap-4">
+      <a
+        class="py-2 px-6 block rounded-full font-600 text-4 color-white bg-[var(--vp-button-brand-bg)] border border-solid border-[var(--vp-button-brand-border)]"
+        href="/getting-started.html"
+        >Get Started</a
+      >
+
+      <a
+        class="py-2 px-6 block rounded-full font-600 text-4 bg-[var(--vp-button-alt-bg)] border border-solid border-[var(--vp-button-alt-border)]"
+        href="https://github.com/jsonnull/electron-trpc"
+        target="_blank"
+        >View on Github</a
+      >
+    </div>
+  </div>
+</template>

docs/.vitepress/config.ts

@@ -0,0 +1,24 @@
+import { defineConfig } from 'vitepress';
+import UnoCSS from 'unocss/vite';
+
+export default defineConfig({
+  title: 'electron-trpc',
+  description: 'Just playing around.',
+  themeConfig: {
+    repo: 'jsonnull/electron-trpc',
+    nav: [{ text: 'Guide', link: '/getting-started' }],
+    sidebar: [
+      {
+        text: 'Guide',
+        items: [{ text: 'Getting Started', link: '/getting-started' }],
+      },
+    ],
+    footer: {
+      message: 'Released under the MIT License.',
+      copyright: 'Copyright © 2023-present Jason Nall',
+    },
+  },
+  vite: {
+    plugins: [UnoCSS({})],
+  },
+});

docs/.vitepress/theme/custom.css

@@ -0,0 +1,7 @@
+:root {
+  --vp-c-brand: #9a5cb6;
+  --vp-c-brand-light: #ac7dce;
+  --vp-c-brand-lighter: #b790da;
+  --vp-c-brand-dark: #8a439d;
+  --vp-c-brand-darker: #793085;
+}

docs/.vitepress/theme/index.ts

@@ -0,0 +1,5 @@
+import DefaultTheme from 'vitepress/theme';
+import 'uno.css';
+import './custom.css';
+
+export default DefaultTheme;

docs/getting-started.md

@@ -0,0 +1,91 @@
+# Getting Started
+
+## Installation
+
+Follow installation instructions for [trpc](https://trpc.io/docs/quickstart#installation) to build your router and client of choice.
+
+#### pnpm
+
+```sh
+pnpm add electron-trpc
+```
+
+#### yarn
+
+```sh
+yarn add electron-trpc
+```
+
+#### npm
+
+```sh
+npm install --save electron-trpc
+```
+
+## TypeScript
+
+It's worth noting that you'll need to figure out how to get TypeScript working on both the main process and render process client code. For one example of how to do this with a good developer experience (minimal configuration, fast bundling, client hot-reloading) see our [basic example](https://github.com/jsonnull/electron-trpc/tree/main/examples/basic).
+
+## Preload
+
+`electron-trpc` depends on Electron's [Context Isolation](https://www.electronjs.org/docs/latest/tutorial/context-isolation) feature, and exposes the electron-trpc IPC channel to render processes using a [preload file](https://www.electronjs.org/docs/latest/tutorial/process-model#preload-scripts).
+
+Some familiarization with these concepts can be helpful in case of unexpected issues during setup.
+
+This is the most minimal working preload file for using `electron-trpc`. Depending on your application, you may need to add this to an existing preload file or customize it later.
+
+::: code-group
+
+```ts [preload.ts]
+import { exposeElectronTRPC } from 'electron-trpc/main';
+
+process.once('loaded', async () => {
+  exposeElectronTRPC();
+});
+```
+
+:::
+
+## Main
+
+In the main electron process, you will want to expose a tRPC router to one or more windows. These windows need to use the preload file you created.
+
+::: code-group
+
+```ts{7-10,13} [main.ts]
+import { app } from 'electron';
+import { createIPCHandler } from 'electron-trpc/main';
+import { router } from './api';
+
+app.on('ready', () => {
+  const win = new BrowserWindow({
+    webPreferences: {
+      // Replace this path with the path to your BUILT preload file
+      preload: 'path/to/preload.js',
+    },
+  });
+
+  createIPCHandler({ router, windows: [win] });
+});
+```
+
+:::
+
+## Renderer
+
+Windows you construct with the preload file and the IPC handler can reach the tRPC router in the main process over IPC. To do this, a script in the window needs to create a tRPC client using the IPC link:
+
+::: code-group
+
+```ts [renderer.ts]
+import { createTRPCProxyClient } from '@trpc/client';
+import { ipcLink } from 'electron-trpc/renderer';
+
+export const client = createTRPCProxyClient({
+  links: [ipcLink()],
+});
+```
+
+:::
+
+To use a different client, follow the appropriate usage instructions in the tRPC docs, ensuring that you substitute any HTTP or websocket links with the `ipcLink`.

docs/index.md

@@ -0,0 +1,77 @@
+---
+layout: home
+---
+
+<script setup>
+import ExamplesButton from './.vitepress/ExamplesButton.vue'
+import Features from './.vitepress/Features.vue'
+import Hero from './.vitepress/Hero.vue'
+</script>
+
+<style type="text/css">
+.custom-home .vp-code-group {
+    margin: 0;
+}
+.custom-home .vp-doc div[class*='language-'] {
+    margin: 0;
+}
+.custom-home .vp-code-group .tabs {
+    margin-left: 0;
+    margin-right: 0;
+}
+</style>
+
+<div class="custom-home flex flex-col max-w-[1152px] mx-4 md-mx-auto px-0 sm-px-8 pt-16">
+
+<Hero />
+
+<div class="vp-doc pt-16">
+
+<div class="flex flex-col lg-flex-row gap-4 w-full">
+<div class="flex-1 min-w-0">
+
+::: code-group
+
+```ts [renderer.tsx]
+function HelloElectron() {
+  const { data } = trpcReact.greeting.useQuery({
+    name: 'Electron',
+  });
+
+  if (!data) return null;
+
+  return <div>{data.text}</div>; // Hello Electron
+}
+```
+
+:::
+
+</div>
+<div class="flex-1 min-w-0">
+
+::: code-group
+
+```ts [main.ts]
+export const router = t.router({
+  greeting: t.procedure
+    .input(z.object({ name: z.string() }))
+    .query(({ input }) => {
+      return {
+        text: `Hello ${input.name}`,
+      };
+    }),
+});
+```
+
+:::
+
+</div>
+</div>
+
+</div>
+
+<ExamplesButton />
+
+<Features />
+
+</div>

package.json

@@ -7,12 +7,18 @@
     "prepublish": "yarn build",
     "changeset": "changeset",
     "changeset:version": "changeset version && pnpm install --no-frozen-lockfile",
-    "release": "changeset publish"
+    "release": "changeset publish",
+    "docs:start": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs"
   },
   "devDependencies": {
     "@changesets/changelog-github": "^0.4.6",
     "@changesets/cli": "^2.24.1",
     "prettier": "^2.5.1",
-    "typescript": "^4.5.5"
+    "typescript": "^4.5.5",
+    "unocss": "^0.49.4",
+    "vitepress": "1.0.0-alpha.45",
+    "vue": "^3.2.45"
   }
 }