From 02f3829756f5ae83512a8db16e96b552686284d9 Mon Sep 17 00:00:00 2001 From: Tom Wilson Date: Mon, 21 Oct 2024 14:31:08 +0000 Subject: [PATCH] chore: remove akord as an option for deploying apps --- docs/src/.vuepress/sidebar.js | 8 +- docs/src/guides/deploying-manifests/akord.md | 171 ------------------ docs/src/kits/react/akord.md | 173 ------------------- docs/src/kits/react/index.md | 1 - 4 files changed, 2 insertions(+), 351 deletions(-) delete mode 100644 docs/src/guides/deploying-manifests/akord.md delete mode 100644 docs/src/kits/react/akord.md diff --git a/docs/src/.vuepress/sidebar.js b/docs/src/.vuepress/sidebar.js index 115f3ba..4b76f3b 100644 --- a/docs/src/.vuepress/sidebar.js +++ b/docs/src/.vuepress/sidebar.js @@ -196,10 +196,6 @@ const getI18NSidebar = (langCode) => [ text: "arseeding-js", link: get_i18n_link(langCode, "/guides/deploying-manifests/arseeding-js.html"), }, - { - text: "Akord", - link: get_i18n_link(langCode, "/guides/deploying-manifests/akord"), - }, { text: "Turbo", link: get_i18n_link(langCode, "/guides/deploying-manifests/turbo"), @@ -355,8 +351,8 @@ const getI18NSidebar = (langCode) => [ link: get_i18n_link(langCode, "/legacy/index.html"), collapsible: true, children: [ - { - text: "Concepts", + { + text: "Concepts", collapsible: true, children: [ { diff --git a/docs/src/guides/deploying-manifests/akord.md b/docs/src/guides/deploying-manifests/akord.md deleted file mode 100644 index cfb1d23..0000000 --- a/docs/src/guides/deploying-manifests/akord.md +++ /dev/null @@ -1,171 +0,0 @@ -## with Akord CLI - -You can generate manifests using [Akord CLI](https://github.com/Akord-com/akord-cli). - -### Before you get started - -> Requires NodeJS - https://nodejs.org - - - - -```console -npm install -g @akord/akord-cli -``` - - - - -```console -yarn global add @akord/akord-cli -``` - - - - -### Login to Akord (you can create an account [here](https://v2.akord.com/signup)) -Once you have the CLI installed, log in by following the prompts to authenticate with your Akord username and password. - -```console -akord login {your_email_address} -``` - -### Choose your vault -You'll need a vault id of your public vault to generate the manifest. To list your vaults: - -```console -akord vault:list -``` - -### Generate manifest -Now that you are logged in and you have a vault id, you can generate the manifest for your files and contents. \ -If you do not have "index.html" file in your vault, you can provide a custom index: - -```console -akord manifest:generate {vaultId} --index "my-custom-index.html" -``` - -After generating the manifest, a file named manifest.json will appear in your vault. Once it's confirmed on the Arweave blockchain and propagated by the gateways, your public vault will be available on the permaweb under following link: https://arweave.net/{uri} - -## with AkordJS - -Alternatively, you can generate your manifests using [AkordJS](https://github.com/Akord-com/akord-js) package. - -### Before you get started - -> Requires NodeJS - https://nodejs.org - - - - -```console -npm install @akord/akord-js -``` - - - - -```console -yarn add @akord/akord-js -``` - - - - -### Let's generate manifest - -### Generate a manifest automatically from files inside a vault -```js -import { Akord, Auth } from '@akord/akord-js' - -// First, let's initialize Akord instance -// In order to use AkordJS, you first need an Akord account. -// Sign up for Akord here: https://v2.akord.com/signup -const { wallet } = await Auth.signIn(email, password); -const akord = await Akord.init(wallet); - -// Let's create a public vault to contain our files -const { vaultId } = await akord.vault.create("My hello world app", { public: true }); - -// Let's upload a Hello world html file -const { stackId } = await akord.stack.create( - vaultId, - ["

Hello World

"], - { name: "index.html", mimeType: "text/html" } -); - -// Let's generate a manifest -const { uri } = await akord.manifest.generate(vaultId); -// In few minutes, you will be able to access your manifest here: https://arweave.net/{uri} -``` - - -### Upload your own manifest file manually -```js -import { Akord, Auth } from '@akord/akord-js' - -// First, let's initialize Akord instance -// In order to use AkordJS, you first need an Akord account. -// Sign up for Akord here: https://v2.akord.com/signup -const { wallet } = await Auth.signIn(email, password); -const akord = await Akord.init(wallet); - -// let's define our manifest -const manifest = { - "manifest": "arweave/paths", - "version": "0.2.0", - "index": { - "path": "index.html" - }, - "fallback": { - "id": "cG7Hdi_iTQPoEYgQJFqJ8NMpN4KoZ-vH_j7pG4iP7NI" - } - "paths": { - "index.html": { - "id": "cG7Hdi_iTQPoEYgQJFqJ8NMpN4KoZ-vH_j7pG4iP7NI" - }, - "js/app.js": { - "id": "fZ4d7bkCAUiXSfo3zFsPiQvpLVKVtXUKB6kiLNt2XVQ" - }, - "css/style.css": { - "id": "fZ4d7bkCAUiXSfo3zFsPiQvpLVKVtXUKB6kiLNt2XVQ" - }, - "css/mobile.css": { - "id": "fZ4d7bkCAUiXSfo3zFsPiQvpLVKVtXUKB6kiLNt2XVQ" - }, - "assets/img/logo.png": { - "id": "QYWh-QsozsYu2wor0ZygI5Zoa_fRYFc8_X1RkYmw_fU" - }, - "assets/img/icon.png": { - "id": "0543SMRGYuGKTaqLzmpOyK4AxAB96Fra2guHzYxjRGo" - } - } -}; - -// Let's create a public vault to contain the manifest -const { vaultId } = await akord.vault.create("My manifest", { public: true }); - -const { uri } = await akord.manifest.generate(vaultId, manifest); -// In few minutes, you will be able to access your manifest here: https://arweave.net/{uri} -``` - -### Congrats! - -Once the transaction is accepted on Arweave network (it takes 5-15 minutes on average), \ -you can access the permaweb URL in your web browser by replacing {uri} with your unique manifest tx id: -https://arweave.net/{uri} - -## with Akord web app - -From the [web app](https://v2.akord.com/login) it's also possible to create the manifest and add it to your vault by selecting "Add Manifest" from the "+" button inside your public permanent vault. - -The action will automatically create a manifest for all of the files & folders within the vault. - -You can download your manifest and view it in the media gallery by clicking the title in the vault. - -It's as simple as that! - -## Resources & further reading -- [Generating manifests in Akord vaults](https://docs.akord.com/nft-projects/get-the-arweave-urls) -- [Publishing a website to the permaweb](https://docs.akord.com/api-and-dev-tools/learn/publishing-a-website) -- [AkordJS manifest module](https://github.com/Akord-com/akord-js?tab=readme-ov-file#manifest) \ No newline at end of file diff --git a/docs/src/kits/react/akord.md b/docs/src/kits/react/akord.md deleted file mode 100644 index 16ba479..0000000 --- a/docs/src/kits/react/akord.md +++ /dev/null @@ -1,173 +0,0 @@ -# React Starter Kit with Vite & Akord - -This guide will walk you through in a step by step flow to configure your development environment to build and deploy a permaweb react application. - -## Prerequisites - -- Basic Typescript Knowledge (Not Mandatory) - [https://www.typescriptlang.org/docs/](Learn Typescript) -- NodeJS v16.15.0 or greater - [https://nodejs.org/en/download/](Download NodeJS) -- Knowledge of ReactJS - [https://reactjs.org/](Learn ReactJS) -- Know git and common terminal commands - -## Development Dependencies - -- TypeScript -- NPM or Yarn Package Manager - -## Steps - -### Create React App - -```sh -yarn create vite my-arweave-app --template react-ts -cd my-arweave-app -yarn -``` - -### Add React Router DOM - -```sh -yarn add react-router-dom -``` - -We need to use the hash-router to create a working app on arweave. - -### Page Components - -```sh -touch src/Home.tsx src/About.tsx -``` - -src/Home.tsx - -```tsx -import { Link } from "react-router-dom"; - -function Home() { - return ( -
- Welcome to the Permaweb! - -
About
- -
- ); -} - -export default Home; -``` - -src/About.tsx - -```tsx -import { Link } from "react-router-dom"; - -function About() { - return ( -
- Welcome to the About page! - -
Home
- -
- ); -} - -export default About; -``` - -#### Modify App.tsx - -We need to update the App.tsx to manage different pages - -```tsx -import { HashRouter } from "react-router-dom"; -import { Routes, Route } from "react-router-dom"; - -import Home from "./Home"; -import About from "./About"; - -function App() { - return ( - - - } /> - } /> - - - ); -} - -export default App; -``` - -#### Modify index.css - -Alter the `body` selector - -```css -body { - margin: 0; - padding-top: 200px; - display: flex; - flex-direction: column; - place-items: center; - min-width: 100%; - min-height: 100vh; -} -``` - -```sh -yarn dev -``` - -### Building React App - -#### Modify vite.config.ts - -```ts -import { defineConfig } from 'vite' -import react from '@vitejs/plugin-react' - -// https://vitejs.dev/config/ -export default defineConfig({ - base: "", - plugins: [react()], -}) -``` -#### Build App - -```sh -yarn build -``` - -### Publishing to Arweave - -### Install Akord CLI - -> Requires NodeJS - https://nodejs.org - -```sh -yarn global add @akord/akord-cli -``` - -### Login to Akord (you can create an account [here](https://v2.akord.com/signup)) - -```sh -akord login {your_email_address} -``` - -### Deploy your app - -```sh -akord deploy ./dist 'My perma app' -``` - -### Congrats! - -You just published a react application on the Permaweb! This app will be hosted forever! - -## Resources & further reading - -- [Recipes](https://github.com/Akord-com/recipes) - learn how to trivially interact with Arweave blockchain -- [Akord CLI](https://github.com/Akord-com/akord-cli) \ No newline at end of file diff --git a/docs/src/kits/react/index.md b/docs/src/kits/react/index.md index ca81032..aa743c4 100644 --- a/docs/src/kits/react/index.md +++ b/docs/src/kits/react/index.md @@ -8,7 +8,6 @@ React Starter Kit Guides: * [Vite](./turbo.md) - React + Vite, publish with permaweb-deploy * [Create React App](./create-react-app.md) - utilize Create React App to build a React permaweb app -* [Akord](./akord.md) - React + Vite, deploy with Akord