File size: 13,758 Bytes
f91a684 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 | import { motion } from 'motion/react';
export default function FileSystemDiagram() {
return (
<motion.div initial={{ opacity: 0, y: 24, scale: 0.97 }} animate={{ opacity: 1, y: 0, scale: 1 }} transition={{ duration: 0.7, ease: [0.25,0.1,0.25,1] as const, delay: 0.2 }} className="mt-10 mb-4">
<div className="text-center mb-6"><span className="text-lg font-bold uppercase tracking-widest text-violet-400" style={{ filter: 'drop-shadow(0 0 10px rgba(139,92,246,0.5))' }}>FILE SYSTEMS</span></div>
<svg viewBox="0 0 900 640" className="w-full max-w-6xl mx-auto" style={{ filter: 'drop-shadow(0 0 30px rgba(139,92,246,0.1))' }}>
<defs>
<marker id="fsArr" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0,8 3,0 6" fill="#a855f7"/></marker>
<linearGradient id="fsHdr" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stopColor="rgba(139,92,246,0.2)"/><stop offset="100%" stopColor="rgba(139,92,246,0.05)"/></linearGradient>
</defs>
<rect x="20" y="10" width="860" height="44" rx="12" fill="url(#fsHdr)" stroke="rgba(139,92,246,0.4)" strokeWidth="2"/>
<text x="45" y="28" fill="#c084fc" fontSize="10" fontWeight="700" fontFamily="'Inter',sans-serif">File System:</text>
<text x="145" y="28" fill="#d8b4fe" fontSize="9" fontFamily="'Inter',sans-serif">The OS's method of organizing, storing, naming, and retrieving data on storage devices.</text>
<text x="45" y="42" fill="#64748b" fontSize="8" fontFamily="'Inter',sans-serif">Examples: ext4 (Linux), NTFS (Windows), APFS (macOS), FAT32, ZFS, Btrfs</text>
{/* Directory Tree */}
<rect x="20" y="65" width="340" height="310" rx="12" fill="rgba(59,130,246,0.05)" stroke="rgba(59,130,246,0.35)" strokeWidth="1.5"/>
<text x="190" y="83" textAnchor="middle" fill="#60a5fa" fontSize="10" fontWeight="800" fontFamily="'Inter',sans-serif">DIRECTORY STRUCTURE</text>
<text x="30" y="98" fill="#94a3b8" fontSize="7.5" fontFamily="'Inter',sans-serif">Hierarchical tree. Every file has a full path from root.</text>
{/* Tree viz */}
<text x="180" y="118" textAnchor="middle" fill="#fbbf24" fontSize="9" fontWeight="700" fontFamily="'Inter',sans-serif">/ (root)</text>
<line x1="180" y1="122" x2="100" y2="140" stroke="rgba(59,130,246,0.4)" strokeWidth="1.2"/>
<line x1="180" y1="122" x2="260" y2="140" stroke="rgba(59,130,246,0.4)" strokeWidth="1.2"/>
<text x="90" y="153" textAnchor="middle" fill="#60a5fa" fontSize="8" fontWeight="700" fontFamily="'Inter',sans-serif">📁 home</text>
<text x="260" y="153" textAnchor="middle" fill="#60a5fa" fontSize="8" fontWeight="700" fontFamily="'Inter',sans-serif">📁 etc</text>
<line x1="90" y1="157" x2="60" y2="175" stroke="rgba(59,130,246,0.35)" strokeWidth="1"/>
<line x1="90" y1="157" x2="120" y2="175" stroke="rgba(59,130,246,0.35)" strokeWidth="1"/>
<text x="50" y="188" textAnchor="middle" fill="#c084fc" fontSize="7.5" fontFamily="'Inter',sans-serif">📁 user1</text>
<text x="120" y="188" textAnchor="middle" fill="#c084fc" fontSize="7.5" fontFamily="'Inter',sans-serif">📁 user2</text>
<line x1="50" y1="192" x2="30" y2="210" stroke="rgba(168,85,247,0.3)" strokeWidth="1"/>
<line x1="50" y1="192" x2="70" y2="210" stroke="rgba(168,85,247,0.3)" strokeWidth="1"/>
<text x="30" y="222" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">📄 notes.txt</text>
<text x="70" y="222" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">📁 docs</text>
<line x1="70" y1="226" x2="70" y2="240" stroke="rgba(168,85,247,0.25)" strokeWidth="1"/>
<text x="70" y="252" textAnchor="middle" fill="#64748b" fontSize="7" fontFamily="'Inter',sans-serif">📄 resume.pdf</text>
<text x="30" y="280" fill="#60a5fa" fontSize="8" fontWeight="700" fontFamily="'Inter',sans-serif">Path types:</text>
<text x="30" y="293" fill="#94a3b8" fontSize="7.5" fontFamily="'Inter',sans-serif">Absolute: /home/user1/docs/resume.pdf</text>
<text x="30" y="306" fill="#94a3b8" fontSize="7.5" fontFamily="'Inter',sans-serif">Relative: ../docs/resume.pdf (from user2)</text>
<text x="30" y="322" fill="#60a5fa" fontSize="8" fontWeight="700" fontFamily="'Inter',sans-serif">Special entries:</text>
<text x="30" y="335" fill="#94a3b8" fontSize="7.5" fontFamily="'Inter',sans-serif">. = current directory | .. = parent directory</text>
<text x="30" y="349" fill="#fbbf24" fontSize="7.5" fontFamily="'Inter',sans-serif">Hard link: same inode, different directory entry</text>
<text x="30" y="362" fill="#fbbf24" fontSize="7.5" fontFamily="'Inter',sans-serif">Soft link (symlink): pointer to another file path</text>
{/* Inode */}
<rect x="375" y="65" width="505" height="310" rx="12" fill="rgba(245,158,11,0.05)" stroke="rgba(245,158,11,0.35)" strokeWidth="1.5"/>
<text x="627" y="83" textAnchor="middle" fill="#fbbf24" fontSize="10" fontWeight="800" fontFamily="'Inter',sans-serif">INODE STRUCTURE (Linux ext4)</text>
<text x="385" y="98" fill="#94a3b8" fontSize="7.5" fontFamily="'Inter',sans-serif">Every file has an inode containing metadata. Directory entry maps filename → inode number.</text>
{/* Inode box */}
<rect x="385" y="106" width="220" height="240" rx="8" fill="rgba(245,158,11,0.08)" stroke="rgba(245,158,11,0.3)" strokeWidth="1.5"/>
<text x="495" y="122" textAnchor="middle" fill="#fbbf24" fontSize="8" fontWeight="700" fontFamily="'Inter',sans-serif">INODE #{'\u00A0'}1234</text>
{[
{field:'File type',val:'Regular file / dir / link'},
{field:'Permissions',val:'rwxr-xr-- (owner/grp/other)'},
{field:'Owner UID/GID',val:'1000 / 1000'},
{field:'File size',val:'4,096 bytes'},
{field:'Link count',val:'2 (hard links)'},
{field:'atime',val:'Last accessed'},
{field:'mtime',val:'Last modified'},
{field:'ctime',val:'Last changed (inode)'},
{field:'Data block ptrs',val:'12 direct + indirect'},
].map(({field,val},i)=>(
<g key={i}>
<rect x="390" y={128+i*23} width="210" height="20" rx="2" fill={i%2===0?'rgba(245,158,11,0.05)':'rgba(245,158,11,0.02)'}/>
<text x="396" y={141+i*23} fill="#fbbf24" fontSize="7" fontWeight="700" fontFamily="'Inter',sans-serif">{field}</text>
<text x="480" y={141+i*23} fill="#94a3b8" fontSize="6.5" fontFamily="'Inter',sans-serif">{val}</text>
</g>
))}
{/* Data block layout */}
<text x="620" y="122" fill="#fbbf24" fontSize="8" fontWeight="700" fontFamily="'Inter',sans-serif">Data Block Addressing:</text>
<text x="620" y="136" fill="#94a3b8" fontSize="7.5" fontFamily="'Inter',sans-serif">12 direct pointers → data blocks</text>
<text x="620" y="149" fill="#94a3b8" fontSize="7.5" fontFamily="'Inter',sans-serif">1 single indirect → block of pointers</text>
<text x="620" y="162" fill="#94a3b8" fontSize="7.5" fontFamily="'Inter',sans-serif">1 double indirect → 2 levels of ptrs</text>
<text x="620" y="175" fill="#94a3b8" fontSize="7.5" fontFamily="'Inter',sans-serif">1 triple indirect → 3 levels of ptrs</text>
{/* Block diagram */}
<rect x="620" y="185" width="50" height="30" rx="4" fill="rgba(245,158,11,0.15)" stroke="rgba(245,158,11,0.4)" strokeWidth="1"/>
<text x="645" y="204" textAnchor="middle" fill="#fbbf24" fontSize="6.5" fontFamily="'Inter',sans-serif">Inode</text>
{[0,1,2].map(i=>(
<g key={i}>
<line x1="670" y1={195+i*10} x2="700" y2={195+i*10} stroke="rgba(245,158,11,0.4)" strokeWidth="1" markerEnd="url(#fsArr)"/>
<rect x="700" y={190+i*10} width="40" height="8" rx="2" fill="rgba(245,158,11,0.1)" stroke="rgba(245,158,11,0.3)" strokeWidth="0.5"/>
<text x="720" y={197+i*10} textAnchor="middle" fill="#94a3b8" fontSize="5.5" fontFamily="'Inter',sans-serif">Data{i+1}</text>
</g>
))}
<line x1="670" y1="215" x2="700" y2="240" stroke="rgba(59,130,246,0.4)" strokeWidth="1" markerEnd="url(#fsArr)"/>
<rect x="700" y="236" width="50" height="16" rx="3" fill="rgba(59,130,246,0.1)" stroke="rgba(59,130,246,0.3)" strokeWidth="1"/>
<text x="725" y="247" textAnchor="middle" fill="#60a5fa" fontSize="6" fontFamily="'Inter',sans-serif">Indirect Block</text>
<text x="620" y="278" fill="#fbbf24" fontSize="7.5" fontWeight="700" fontFamily="'Inter',sans-serif">Key insight:</text>
<text x="620" y="291" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">Filename NOT stored in inode.</text>
<text x="620" y="303" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">Directory entry maps name → inode#.</text>
<text x="620" y="316" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">Multiple names → same inode = hard links.</text>
<text x="620" y="332" fill="#4ade80" fontSize="7.5" fontFamily="'Inter',sans-serif">Deleting file = unlink (decrement count).</text>
<text x="620" y="344" fill="#4ade80" fontSize="7.5" fontFamily="'Inter',sans-serif">Data freed when link count hits 0.</text>
<text x="620" y="358" fill="#64748b" fontSize="7" fontFamily="'Inter',sans-serif">ls -i shows inode numbers.</text>
{/* Allocation methods + FS types */}
<rect x="20" y="388" width="420" height="230" rx="12" fill="rgba(168,85,247,0.05)" stroke="rgba(168,85,247,0.3)" strokeWidth="1.5"/>
<text x="230" y="406" textAnchor="middle" fill="#c084fc" fontSize="10" fontWeight="800" fontFamily="'Inter',sans-serif">FILE ALLOCATION METHODS</text>
{[
{m:'Contiguous',d:'File blocks stored consecutively. Fast sequential access. Suffers external fragmentation. Used in CD-ROM.',c:'#fbbf24',pros:'Fast reads',cons:'External frag'},
{m:'Linked List',d:'Each block has pointer to next block. No fragmentation. Slow random access (must traverse links).',c:'#60a5fa',pros:'No ext frag',cons:'Slow random access'},
{m:'Indexed (FAT/Inode)',d:'Index block holds all data block pointers. Supports direct + indirect addressing. Used in ext4.',c:'#4ade80',pros:'Fast random access',cons:'Index block overhead'},
].map(({m,d,c,pros,cons},i)=>(
<g key={i}>
<rect x="25" y={415+i*65} width="405" height="58" rx="7" fill={`${c}06`} stroke={`${c}25`} strokeWidth="1"/>
<text x="32" y={431+i*65} fill={c} fontSize="9" fontWeight="700" fontFamily="'Inter',sans-serif">{m}</text>
<text x="32" y={444+i*65} fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">{d.slice(0,60)}</text>
<text x="32" y={455+i*65} fill="#64748b" fontSize="7" fontFamily="'Inter',sans-serif">{d.slice(60)}</text>
<text x="32" y={467+i*65} fill="#4ade80" fontSize="7" fontFamily="'Inter',sans-serif">✓ {pros}</text>
<text x="130" y={467+i*65} fill="#f87171" fontSize="7" fontFamily="'Inter',sans-serif">✗ {cons}</text>
</g>
))}
<rect x="460" y="388" width="420" height="230" rx="12" fill="rgba(34,197,94,0.04)" stroke="rgba(34,197,94,0.3)" strokeWidth="1.5"/>
<text x="670" y="406" textAnchor="middle" fill="#4ade80" fontSize="10" fontWeight="800" fontFamily="'Inter',sans-serif">FILE SYSTEM TYPES COMPARISON</text>
<rect x="465" y="412" width="410" height="14" rx="3" fill="rgba(34,197,94,0.15)"/>
{['FS','OS','Max File','Journal','Features'].map((h,i)=><text key={i} x={[470,520,575,640,700][i]} y="422" fill="#4ade80" fontSize="7" fontWeight="700" fontFamily="'Inter',sans-serif">{h}</text>)}
{[
{fs:'ext4',os:'Linux',max:'16TB',j:'Yes',feat:'Most common Linux FS',c:'#4ade80'},
{fs:'NTFS',os:'Windows',max:'16EB',j:'Yes',feat:'ACLs, encryption, compression',c:'#60a5fa'},
{fs:'APFS',os:'macOS',max:'8EB',j:'CoW',feat:'Snapshots, clones, SSD-opt',c:'#94a3b8'},
{fs:'FAT32',os:'Universal',max:'4GB',j:'No',feat:'Wide compatibility, USB drives',c:'#fbbf24'},
{fs:'ZFS',os:'Linux/BSD',max:'256ZB',j:'CoW',feat:'Snapshots, RAID, self-healing',c:'#c084fc'},
{fs:'Btrfs',os:'Linux',max:'16EB',j:'CoW',feat:'Snapshots, compression, RAID',c:'#f97316'},
].map(({fs,os,max,j,feat,c},i)=>(
<g key={i}>
<rect x="465" y={427+i*27} width="410" height="25" rx="2" fill={i%2===0?'rgba(255,255,255,0.01)':'rgba(255,255,255,0.025)'}/>
<text x="470" y={443+i*27} fill={c} fontSize="7.5" fontWeight="700" fontFamily="'Inter',sans-serif">{fs}</text>
<text x="520" y={443+i*27} fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">{os}</text>
<text x="575" y={443+i*27} fill="#e2e8f0" fontSize="7" fontFamily="'Inter',sans-serif">{max}</text>
<text x="640" y={443+i*27} fill={j==='Yes'?'#4ade80':j==='CoW'?'#fbbf24':'#f87171'} fontSize="7" fontFamily="'Inter',sans-serif">{j}</text>
<text x="700" y={443+i*27} fill="#64748b" fontSize="6.5" fontFamily="'Inter',sans-serif">{feat}</text>
</g>
))}
<text x="465" y="596" fill="#fbbf24" fontSize="7.5" fontFamily="'Inter',sans-serif">Journaling: logs changes before writing → fast crash recovery. CoW (Copy-on-Write): safer, enables snapshots.</text>
<text x="465" y="610" fill="#4ade80" fontSize="7.5" fontFamily="'Inter',sans-serif">Virtual FS (VFS): Linux abstraction layer — same API for all FS types (ext4, NTFS, NFS, procfs, etc.)</text>
</svg>
</motion.div>
);
}
|