Feature/rebrand webnative to odd (#8)

* Chore: rename instances of webnative to odd, except imports from webnative * Feat: switch to @oddjs/odd
oddsdk · Apr 11, 2023 · 7c47558 · 7c47558 · vercel · Apr 11, 2023
1 parent 1965be3
commit 7c47558
Show file tree

Hide file tree

Showing 24 changed files with 200 additions and 199 deletions.
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -5,15 +5,15 @@ on:
       - main
 jobs:
   publish_job:
-    name: '🚀 Publish'
+    name: "🚀 Publish"
     runs-on: ubuntu-latest
     steps:
       - name: 📥 Checkout repository
         uses: actions/checkout@v2
       - name: 🧱 Setup node
         uses: actions/setup-node@v2
         with:
-          node-version: '16'
+          node-version: "16"
       - name: 📦 Install packages
         run: npm install
       - name: 🏗 Build assets
@@ -22,5 +22,5 @@ jobs:
         uses: fission-suite/publish-action@v1
         with:
           machine_key: ${{ secrets.FISSION_MACHINE_KEY }}
-          app_url: webnative-template-react.fission.app
+          app_url: odd-template-react.fission.app
           build_dir: ./build
diff --git a/README.md b/README.md
@@ -1,32 +1,32 @@
-# Webnative App Template
+# ODD App Template
 
-[![Built by FISSION](https://img.shields.io/badge/⌘-Built_by_FISSION-purple.svg)](https://fission.codes) [![Built by FISSION](https://img.shields.io/badge/webnative-v0.34.1-purple.svg)](https://github.com/fission-suite/webnative) [![Discord](https://img.shields.io/discord/478735028319158273.svg)](https://discord.gg/zAQBDEq) [![Discourse](https://img.shields.io/discourse/https/talk.fission.codes/topics)](https://talk.fission.codes)
+[![Built by FISSION](https://img.shields.io/badge/⌘-Built_by_FISSION-purple.svg)](https://fission.codes) [![Built by FISSION](https://img.shields.io/badge/ts-odd-v0.34.1-purple.svg)](https://github.com/oddsdk/ts-odd) [![Discord](https://img.shields.io/discord/478735028319158273.svg)](https://discord.gg/zAQBDEq) [![Discourse](https://img.shields.io/discourse/https/talk.fission.codes/topics)](https://talk.fission.codes)
 
-![Webnative UI Screenshot](public/webnative-ui.png)
+![ODD UI Screenshot](static/odd-ui.png)
 
-The Webnative App Template is a clone-and-go template for building a web application using Webnative, fast. Clone, customize, and deploy to have a running distributed app in mere minutes.
+The ODD App Template is a clone-and-go template for building a web application using the ODD SDK, fast. Clone, customize, and deploy to have a running distributed app in mere minutes.
 
 <div style="background-color: #FEEB80; padding: 1px 20px; border-radius: 10px;">
-    <p class="text-align: center;"><strong>❗️Webnative is alpha software.</strong></p>
-    <p>We recommend you <u>do not develop production applications using the Webnative App Template</u> at this time. We're working on making it reliable, fast, and awesome, but we're not there yet!</p>
+    <p class="text-align: center;"><strong>The ODD SDK is alpha software.</strong></p>
+    <p>We recommend you <u>do not develop production applications using the ODD App Template</u> at this time. We're working on making it reliable, fast, and awesome, but we're not there yet!</p>
 </div>
 
-## 🤔 What's Webnative?
+## 🤔 What's The ODD SDK?
 
-[The Webnative SDK](https://github.com/fission-codes/webnative) empowers developers to build fully distributed web applications without needing a complex back-end. The SDK provides:
+[The ODD SDK](https://github.com/oddsdk/ts-odd) empowers developers to build fully distributed web applications without needing a complex back-end. The SDK provides:
 
 - user accounts (via [the browser's Web Crypto API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API)),
 - authorization (using [UCAN](https://ucan.xyz))
-- encrypted file storage (via the [Webnative File System](https://guide.fission.codes/developers/webnative/file-system-wnfs), backed by the [InterPlanetary File System](https://ipfs.io/), or IPFS)
+- encrypted file storage (via the [ODD File System](https://guide.fission.codes/developers/odd/file-system-wnfs), backed by the [InterPlanetary File System](https://ipfs.io/), or IPFS)
 - and key management (via websockets and a two-factor auth-like flow).
 
-Webnative applications work offline and store data encrypted for the user by leveraging the power of the web platform. You can read more about Webnative in Fission's [Webnative Guide](https://guide.fission.codes/developers/webnative).
+ODD applications work offline and store data encrypted for the user by leveraging the power of the web platform. You can read more about the ODD SDK in Fission's [ODD SDK Guide](https://guide.fission.codes/developers/odd).
 
 ## 📦 What does this template give me?
 
 ### 🥰 Silky-smooth end-user flows
 
-The Webnative App Template provides a _silky-smooth user experience_ out of the box. Creating an account and linking a second device feels familiar, comfortable, and obvious. Webnative authentication is key-based rather than password-based, so we've focused heavily on the authentication flows, borrowing language and screens from two-factor auth flows.
+The ODD App Template provides a _silky-smooth user experience_ out of the box. Creating an account and linking a second device feels familiar, comfortable, and obvious. ODD SDK authentication is key-based rather than password-based, so we've focused heavily on the authentication flows, borrowing language and screens from two-factor auth flows.
 
 ### 🧱 Built with a modern web stack
 
@@ -37,15 +37,15 @@ The app template is built with modern web technologies:
 - [Tailwind](https://tailwindcss.com/)
 - [DaisyUI](https://daisyui.com/)
 
-### 👩‍🏫 A simple Webnative demo to learn from
+### 👩‍🏫 A simple ODD demo to learn from
 
-![WNFS Image Gallery Screenshot](public/wnfs-gallery-screenshot.png)
+![WNFS Image Gallery Screenshot](static/wnfs-gallery-screenshot.png)
 
-The app template includes a functioning application: an image gallery. Check out the image gallery code to learn how a Webnative application handles things like file uploads, directories, etc.
+The app template includes a functioning application: an image gallery. Check out the image gallery code to learn how an ODD application handles things like file uploads, directories, etc.
 
 ## 🚀 Getting Started
 
-You can try out the template yourself [here](https://webnative-template.fission.app/).
+You can try out the template yourself [here](https://odd-template-react.fission.app/).
 
 Ready? Let's go.
 
@@ -54,7 +54,7 @@ Prerequiste: ensure you are running Node 16.14 or greater, but _not_ Node 17 (18
 1. Clone the repository:
 
    ```shell
-   git clone git@github.com:webnative-examples/webnative-app-template-react.git
+   git clone git@github.com:oddsdk/odd-app-template-react.git
    ```
 
 2. Install the dependencies.
@@ -69,7 +69,7 @@ Prerequiste: ensure you are running Node 16.14 or greater, but _not_ Node 17 (18
    npm run dev
    ```
 
-4. Navigate to `http://localhost:4000` in your web browser.
+4. Navigate to `http://localhost:5173` in your web browser.
 
 ## 🛠 Customize your app
 
@@ -81,25 +81,26 @@ The app template is designed to be easy for you to _make it your own._ Here's ho
 
    - Change `appName` to the name of your app.
    - Change `appDescription` to a simple, 1-sentence description of your app.
-   - Change `webnativeNamespace` to a represent your specific project details.
+   - Update `oddNamespace` with your project details.
    - Once you [deploy](#deploy) your app, change `appURL` to the production URL.
 
    In `package.json`, change `name` to your application's name.
 
 1. Customize your app's logo.
 
-   - App Logo SVG can be customized in `/src/components/icons/Brand.tsx`. Target an image that is 35 pixels high.
-   - Replace the favicon files in `/public` by following the instructions in [this blog post](https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs)
+   - App Logo SVG can be customized in `/src/components/icons/Brand.svelte`. Target an image that is 35 pixels high.
+   - Replace the favicon files in `/static` by following the instructions in [this blog post](https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs)
    - Generate a Twitter/Social Media Embed image.
      - In `/src/lib/app-info.ts`, change `appImageURL` to match the URL of your embed image.
+     - In `/src/routes/+layout.svelte`, update `og:image:width` and `og:image:height` to the size of your embed image.
 
 1. Customize the look and feel.
 
    The app template is built using [Tailwind](https://tailwindcss.com/) and [DaisyUI](https://daisyui.com/). You can customize basic theme colors by editing `/tailwind.config.css`. Check out the [DaisyUI Theme Generator](https://daisyui.com/theme-generator/) to play around with theme colors or read the [customization guide](https://daisyui.com/docs/customize/) to customize the component appearance.
 
 1. Clear out the app's home page.
 
-   The home page content is in `/src/routes/HomeRoute.tsx`. Delete everything in the file (but don't delete the file!) to start over with a blank home page.
+   The home page content is in `/src/routes/+page.svelte`. Delete everything in the file (but don't delete the file!) to start over with a blank home page.
 
 1. Remove the image gallery demo app code.
 
@@ -110,19 +111,19 @@ The app template is designed to be easy for you to _make it your own._ Here's ho
 
 👏 You're ready to start adding custom functionality! 🚀
 
-Check out the [Webnative Guide](https://guide.fission.codes/developers/webnative) for Webnative questions or [UCAN.xyz](https://ucan.xyz) for UCAN questions.
+Check out the [ODD SDK Guide](https://guide.fission.codes/developers/odd) for ODD SDK questions or [UCAN.xyz](https://ucan.xyz) for UCAN questions.
 
 ## 📛 Usernames
 
-When you go through the registration flow in WAT, the username you type in the form field has a `#{DID}` appended to it in the background. We did this to enable discord style usernames where users can share the same usernames, but have unique identifiers attached to the end to distinguish them from one another. We then create a hash of the `fullUsername`(the one with the `#{DID}` appended to the end) that is passed to Webnative. So Webnative only has a notion of the `hashed` username currently. This should also allow users to create usernames using emojis or non-English characters. Also, this is the only username schema that currently supports our File System recovery flow.
+When you go through the registration flow in WAT, the username you type in the form field has a `#{DID}` appended to it in the background. We did this to enable discord style usernames where users can share the same usernames, but have unique identifiers attached to the end to distinguish them from one another. We then create a hash of the `fullUsername`(the one with the `#{DID}` appended to the end) that is passed to the ODD SDK. So the ODD SDK only has a notion of the `hashed` username currently. This should also allow users to create usernames using emojis or non-English characters. Also, this is the only username schema that currently supports our File System recovery flow.
 
-You don’t necessarily need to follow that same pattern though. If you were to register two of the same usernames in the app without hashing them, you would be able to call `session.authStrategy.isUsernameAvailable(username)` to ensure duplicate usernames aren't present in the app. We will be working on porting some of this functionality over to the Webnative library over the next while and we will be updating the docs to reflect that.
+You don’t necessarily need to follow that same pattern though. If you were to register two of the same usernames in the app without hashing them, you would be able to call `session.authStrategy.isUsernameAvailable(username)` to ensure duplicate usernames aren't present in the app. We will be working on porting some of this functionality over to the `ts-ODD` library over the next while and we will be updating the docs to reflect that.
 
-[Please take a look at our init function](https://github.com/webnative-examples/webnative-app-template-react/blob/main/src/lib/init.ts#L40-L44) to see how we are currently constructing the username schema.
+[Please take a look at our init function](https://github.com/oddsdk/odd-app-template-react/blob/main/src/lib/init.ts#L34-L38) to see how we are currently constructing the username schema.
 
 ## 🧨 Deploy
 
-Any static hosting platform should be supported. The Webnative App Template is currently deployed on:
+Any static hosting platform should be supported. The ODD App Template is currently deployed on:
 
 - [Fission](#fission-app-hosting)
 - [Netlify](#netlify)
@@ -131,9 +132,9 @@ Any static hosting platform should be supported. The Webnative App Template is c
 
 ### Fission App Hosting
 
-Try out [Webnative App Template on Fission](https://webnative-template.fission.app)
+Try out [ODD App Template on Fission](https://odd-template.fission.app)
 
-A Webnative application can be published to IPFS with the [Fission CLI](https://guide.fission.codes/developers/cli) or the [Fission GitHub publish action](https://github.com/fission-suite/publish-action).
+An ODD application can be published to IPFS with the [Fission CLI](https://guide.fission.codes/developers/cli) or the [Fission GitHub publish action](https://github.com/fission-suite/publish-action).
 
 **To publish with the Fission CLI:**
 
@@ -157,32 +158,32 @@ See the [Fission Guide](https://guide.fission.codes/developers/installation) and
 
 ### Netlify
 
-[![Netlify Status](https://api.netlify.com/api/v1/badges/7b7418ef-86eb-43c4-a668-0118568c7f46/deploy-status)](https://app.netlify.com/sites/webnative-app-template-react/deploys)
+[![Netlify Status](https://api.netlify.com/api/v1/badges/7b7418ef-86eb-43c4-a668-0118568c7f46/deploy-status)](https://app.netlify.com/sites/odd/deploys)
 
-In order to deploy your Webnative application on Netlify:
+In order to deploy your ODD application on Netlify:
 
 1. Create a new Netlify site and connect your app's git repository. (If you don't have your application stored in a git repository, you can upload the output of a [static build](#static-build).)
 2. Just click Deploy. Netlify takes care of the rest. No Netlify-specific configuration is needed.
 3. There is no step 3.
 
 ### Vercel
 
-Try out the [Webnative App Template on Vercel](https://webnative-app-template.vercel.app/).
+Try out the [ODD App Template on Vercel](https://odd-app-template-react.vercel.app/).
 
-In order to deploy your Webnative application on Vercel:
+In order to deploy your ODD application on Vercel:
 
 1. Create a new Vercel project and connect your app's git repository. (If you don't have your application stored in a git repository, you can upload the output of a [static build](#static-build).)
 2. Override the default output directory and set it to `build`.
 3. Deploy. That's it!
 
 ### Cloudflare Pages
 
-Try out the [Webnative App Template on Cloudflare Pages](https://webnative-template.pages.dev/).
+Try out the [ODD App Template on Cloudflare Pages](https://odd-template.pages.dev/).
 
-In order to deploy your Webnative application on Cloudflare Pages:
+In order to deploy your ODD application on Cloudflare Pages:
 
 1. Create a new Pages project and connect your app's git repository. (If you don't have your application stored in a git repository, you can upload the output of a [static build](#static-build).)
-2. Select `React (create-react-app)` from the "Framework preset".
+2. Select `SvelteKit` from the "Framework preset".
 3. Set the "Build output directory" to `build`.
 4. Under "Environment variables", add a variable with name of `NODE_VERSION` and value of `16`.
 5. Add the same environment variable to the "Preview" environment.