- Add Helia and related dependencies for IPFS integration. - Create IPFS service module for core IPFS operations. - Create IPFS context provider for application-wide access. - Modify MarkdownContent component to fetch from IPFS. - Create IPFS uploader component for content upload. - Create IPFS gateway fallback for offline access. - Modify NavDataProvider to load from IPFS. - Implement offline support and local caching. - Create Network Status Service to monitor network status. - Create Offline Status Component to display offline status. - Implement Service Worker for caching app assets. - Create Offline page.
108 lines
3.5 KiB
Svelte
108 lines
3.5 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from "svelte";
|
|
import { ipfsService } from "../services/ipfs.service";
|
|
|
|
let initialized = false;
|
|
let initializing = true;
|
|
let error: string | null = null;
|
|
let mockMode = false;
|
|
|
|
onMount(async () => {
|
|
try {
|
|
initializing = true;
|
|
initialized = await ipfsService.initialize();
|
|
console.log("IPFS initialization status:", initialized);
|
|
|
|
// Even if initialization returns true, check if IPFS is actually initialized
|
|
if (!ipfsService.isInitialized()) {
|
|
console.warn(
|
|
"IPFS service reports success but is not fully initialized",
|
|
);
|
|
mockMode = true;
|
|
}
|
|
} catch (err: any) {
|
|
error = err.message || "Unknown error during IPFS initialization";
|
|
console.error("Failed to initialize IPFS:", err);
|
|
mockMode = true;
|
|
} finally {
|
|
initializing = false;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
{#if initializing}
|
|
<div
|
|
class="fixed top-0 left-0 right-0 bg-black/70 text-white py-2 px-4 z-50 flex justify-center"
|
|
>
|
|
<div class="flex items-center gap-2">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="animate-spin"
|
|
>
|
|
<path d="M21 12a9 9 0 1 1-6.219-8.56"></path>
|
|
</svg>
|
|
<span>Initializing IPFS...</span>
|
|
</div>
|
|
</div>
|
|
{:else if error}
|
|
<div
|
|
class="fixed top-0 left-0 right-0 bg-red-600/90 text-white py-2 px-4 z-50 flex justify-center"
|
|
>
|
|
<div class="flex items-center gap-2">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<circle cx="12" cy="12" r="10"></circle>
|
|
<line x1="12" y1="8" x2="12" y2="12"></line>
|
|
<line x1="12" y1="16" x2="12.01" y2="16"></line>
|
|
</svg>
|
|
<span
|
|
>IPFS initialization issue: {error} - Running in demo mode</span
|
|
>
|
|
</div>
|
|
</div>
|
|
{:else if mockMode}
|
|
<div
|
|
class="fixed top-0 left-0 right-0 bg-amber-500/90 text-white py-2 px-4 z-50 flex justify-center"
|
|
>
|
|
<div class="flex items-center gap-2">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path
|
|
d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
|
|
></path>
|
|
<line x1="12" y1="9" x2="12" y2="13"></line>
|
|
<line x1="12" y1="17" x2="12.01" y2="17"></line>
|
|
</svg>
|
|
<span>IPFS running in demo mode with mock functionality</span>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<slot />
|