allow changing index

src/assets/main.css

@@ -7,6 +7,10 @@
   font-weight: normal;
 }
 
+.mono {
+  font-family: monospace;
+}
+
 a,
 .green {
   text-decoration: none;

src/components/FeedRow.vue

@@ -31,8 +31,4 @@ props.dag.then((r) => {
   </tr>
 </template>
 
-<style scoped>
-.mono {
-  font-family: monospace;
-}
-</style>
+<style scoped></style>

src/components/IndexNode.vue

@@ -33,7 +33,7 @@ onload()
   <template v-if="inode">
     <ul>
       <li v-for="c in inode.children.filter((e) => e != null)">
-        <div>{{ c![0] }} <a :href="exploreUrl(c![1])" target="_blank">cid</a></div>
+        <div><span class="mono">{{ c![0] }}</span> <a :href="exploreUrl(c![1])" target="_blank">cid</a></div>
         <div><IndexNode :key="c![1].toString()" :cid="c![1]"></IndexNode></div>
       </li>
     </ul>
@@ -41,8 +41,4 @@ onload()
   <template v-if="leaf"> leaf ({{ leaf.leaf.length }}) </template>
 </template>
 
-<style scoped>
-.mono {
-  font-family: monospace;
-}
-</style>
+<style scoped></style>

src/global.ts

-import { ref } from 'vue'
-import type { Ref } from 'vue'
+import { ref, type Ref } from 'vue'
 
 export const feed: Ref<string[]> = ref([])

src/views/FeedView.vue

 <script setup lang="ts">
 import { feed } from '@/global'
-import { ref } from 'vue'
-import type { Ref } from 'vue'
+import { ref, type Ref } from 'vue'
 import { TOPIC, pubsub } from '@/p2p'
 import type { PeerId } from '@libp2p/interface'
 import { CID } from 'multiformats'
@@ -60,4 +59,4 @@ function get_dag(cid: CID): Promise<IndexRequest> {
   </div>
 </template>
 
-<style></style>
+<style scoped></style>

src/views/HomeView.vue

@@ -8,3 +8,5 @@
     <p>This UI is optional. It aims to help understand how the indexer part work and interacts with the local IPFS node (kubo for instance).</p>
   </main>
 </template>
+
+<style scoped></style>
\ No newline at end of file

src/views/IndexView.vue

@@ -2,14 +2,23 @@
 import { kubo } from '@/kubo'
 import { emptyInode } from '../types'
 import { IPNS } from '../consts'
-import { ref } from 'vue'
 import { CID } from 'multiformats'
-import type { Ref } from 'vue'
+import { ref, type Ref, computed } from 'vue'
 import IndexNode from '../components/IndexNode.vue'
 
+const msg = ref('')
 const rootnodeipns = ref('')
 const ipnsTarget = ref('')
-const ipnsTargetCid: Ref<CID | null> = ref(null)
+const targetCid: Ref<CID | null> = ref(null)
+
+const isValid = computed(() => {
+  try {
+    CID.parse(msg.value)
+    return true
+  } catch {
+    return false
+  }
+})
 
 // inits indexing and publishes ipns entry for it
 async function initIndex() {
@@ -18,27 +27,49 @@ async function initIndex() {
   const res = await kubo.name.publish(rootcid, { ttl: '1s' })
   console.log(res)
   rootnodeipns.value = res.name
+  resolve()
 }
 
 async function resolve() {
   for await (const name of kubo.name.resolve(IPNS, { nocache: true })) {
     console.log(name)
     ipnsTarget.value = name
-    ipnsTargetCid.value = CID.parse(name.slice(6))
+    targetCid.value = CID.parse(name.slice(6))
+  }
+}
+
+function setTargetCid() {
+  if (isValid.value) {
+    const cid = CID.parse(msg.value)
+    targetCid.value = cid
+    kubo.name.publish(cid, { ttl: '1s' }).then((_) => resolve())
+  } else {
+    targetCid.value = null
   }
 }
+
+resolve()
 </script>
 
 <template>
   <div>
     <h1>Index</h1>
     <p>Info about the index</p>
-    <p>initialize index: <button @click="initIndex">initialize</button></p>
-    <p>root node ipns: /ipns/{{ rootnodeipns }}</p>
-    <p>IPNS {{ IPNS }}</p>
-    <p>pointing to <button @click="resolve">resolve</button> {{ ipnsTarget }}</p>
-    <p><IndexNode v-if="ipnsTargetCid" :key="ipnsTarget" :cid="ipnsTargetCid"></IndexNode></p>
+    <p>initialize empty index: <button @click="initIndex">reinitialize ⚠️</button></p>
+    <p>root node ipns: <span class="mono">/ipns/{{ rootnodeipns }}</span></p>
+    <p>You can use it to configure root node instead of hardcoded one:</p>
+    <p class="mono">{{ IPNS }}</p>
+    <p>which is pointing to <button @click="resolve">resolve</button></p>
+    <p class="mono">{{ ipnsTarget }}</p>
+    <p>
+      set IPNS target cid
+      <input v-model="msg" @keyup.enter="setTargetCid" />
+      <button v-on:click="setTargetCid">Set ⚠️</button>
+    </p>
+    <h2>Tree preview</h2>
+    <p class="mono">{{ targetCid }}</p>
+    <p><IndexNode v-if="targetCid" :key="ipnsTarget" :cid="targetCid"></IndexNode></p>
   </div>
 </template>
 
-<style></style>
+<style scoped></style>

src/views/KuboView.vue

@@ -5,4 +5,4 @@
   </div>
 </template>
 
-<style></style>
+<style scoped></style>