fix: replace dead AlgoExplorer with Lora, real screenshot, demo README

- demo/App.vue: testnet.algoexplorer.io (sunset) → lora.algokit.io
- demo/App.vue: rename column AlgoExplorer → Transaction, open links in new tab, fix typo demostration → demonstration
- demo/README.md: replace vue-cli scaffold with real description of the demo
- assets/demo-screenshot.png: capture of the live demo (was missing, README link was broken on GitHub)

Author: redcpp

assets/demo-screenshot.png

@@ -1,24 +1,46 @@
-# demo
+# algo-ipfs demo
 
-## Project setup
-```
+Vue 2.7 front-end for the [Algorand-IPFS Integration](https://github.com/redcpp/algorand-ipfs-js) library. Lists every file registered on-chain for a given Algorand address (using zero-Algo note transactions as a public index), and links each entry to its IPFS gateway and explorer page.
+
+**Live:** [algo-ipfs.surge.sh](https://algo-ipfs.surge.sh/)
+
+## How it works
+
+1. On load, queries the AlgoNode **indexer** for all transactions sent by the demo address (hardcoded as a TestNet account in `src/components/Algorand.vue`).
+2. Decodes each transaction's note field into `{ filename, cid }`.
+3. Renders the list with links to:
+   - **IPFS gateway** (`ipfs.io`) — to fetch the file content
+   - **Lora explorer** (`lora.algokit.io`) — to inspect the on-chain transaction
+
+The encrypted file in the list (`algorand_white_paper.pdf`) is downloadable but its contents are AES-encrypted — you need the CLI in the parent repo with the matching `ENCRYPTION_PASSWORD` to decrypt.
+
+## Stack
+
+- Vue 2.7 + Vue CLI 5
+- `algosdk` v2 (browser indexer client)
+- AlgoNode public indexer — no API key needed
+- Deployed as static SPA on [Surge](https://surge.sh)
+
+## Run locally
+
+```bash
 npm install
+npm run serve         # dev server with hot reload on :8080
+npm run build         # production bundle to dist/
+npm run lint
 ```
 
-### Compiles and hot-reloads for development
-```
-npm run serve
-```
+## Deploy
 
-### Compiles and minifies for production
-```
+```bash
 npm run build
+npx surge dist algo-ipfs.surge.sh
 ```
 
-### Lints and fixes files
-```
-npm run lint
-```
+## Configuration
+
+The AlgoNode endpoint and demo address live in `src/components/Algorand.vue`. To point at MainNet or a different account, edit the constants at the top of that file.
+
+## Why Vue 2
 
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+The original 2020 project was Vue 2. The 2026 migration kept Vue 2.7 (the LTS final of the v2 line) rather than rewriting in Vue 3 — same component code works under Vue CLI 5 on modern Node, with much smaller diff. Vue 3 + Vite would be a sensible next refactor if anyone wants it.

demo/README.md

@@ -9,7 +9,7 @@
     <div class="container">
       <p style="margin: 50px auto 10px auto;">
         <small>
-          For demostration purposes the algorand_white_paper.pdf is the only encrypted file. Use the
+          For demonstration purposes the algorand_white_paper.pdf is the only encrypted file. Use the
           <a href="https://github.com/redcpp/algorand-ipfs-js">Algorand-IPFS Integration</a>
           to visualize its contents.
         </small>
@@ -18,15 +18,15 @@
         <li class="table-header">
           <div class="col col-1">Filename</div>
           <div class="col col-2">IPFS Hash</div>
-          <div class="col col-3">AlgoExplorer</div>
+          <div class="col col-3">Transaction</div>
         </li>
         <li v-for="file in files" :key="file.filename" class="table-row">
           <div class="col col-1">{{ file.filename }}</div>
           <div class="col col-2 small">
-            <a :href="`https://ipfs.io/ipfs/${file.cid}`">{{ file.cid }}</a>
+            <a :href="`https://ipfs.io/ipfs/${file.cid}`" target="_blank" rel="noopener">{{ file.cid }}</a>
           </div>
           <div class="col col-3 small">
-            <a :href="`https://testnet.algoexplorer.io/tx/${file.txn}`">{{ file.txn }}</a>
+            <a :href="`https://lora.algokit.io/testnet/transaction/${file.txn}`" target="_blank" rel="noopener">{{ file.txn }}</a>
           </div>
         </li>
       </ul>