# fauzan-rizky/libraryofdait architecture

> Architecture diagram of the GitHub repository fauzan-rizky/libraryofdait, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/fauzan-rizky/libraryofdait
- Repository: https://github.com/fauzan-rizky/libraryofdait

## Overview

Library of DAIT is a public, no-login SvelteKit learning site. Visitors enter through the home page, open the learning catalogue, then read individual lessons; shared navigation and layouts support browsing. The lessons cover introductory computing and IT, programming concepts and setup/tutorials, and Linux. The README also documents responsive UI and typing animation, represented in the sampled home and shared UI components. Routes and imports provide evidence for the principal links; unsampled route wiring is left unspecified.

Main entry points: [`src/routes/belajar/+page.svelte`](https://github.com/fauzan-rizky/libraryofdait/blob/master/src/routes/belajar/%2Bpage.svelte) (Learning catalogue), [`src/routes/+page.svelte`](https://github.com/fauzan-rizky/libraryofdait/blob/master/src/routes/%2Bpage.svelte) (Home page), [`src/routes/belajar/linux/sidebar-linux.svelte`](https://github.com/fauzan-rizky/libraryofdait/blob/master/src/routes/belajar/linux/sidebar-linux.svelte) (Linux sidebar), [`src/routes/belajar/mulprog/sidebar-mulprog.svelte`](https://github.com/fauzan-rizky/libraryofdait/blob/master/src/routes/belajar/mulprog/sidebar-mulprog.svelte) (Programming sidebar)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_presentation["Site navigation"]
  node_home["Home page<br/>[+page.svelte]"]
  node_navbar["Navbar<br/>[navbar.svelte]"]
  node_typing_animation["Typing animation<br/>[+page.svelte]"]
end

subgraph group_learning["Learning content"]
  node_learning_index["Learning catalogue<br/>[+page.svelte]"]
  node_learning_layout["Learning layout<br/>[+layout.svelte]"]
  node_linux_layout["Linux layout<br/>[+layout.svelte]"]
  node_linux_sidebar["Linux sidebar"]
  node_linux_intro["Linux introduction<br/>[+page.svelte]"]
  node_linux_install["Linux install<br/>[+page.svelte]"]
  node_linux_commandline["Linux command line<br/>[+page.svelte]"]
  node_mulprog_layout["Programming layout<br/>[+layout.svelte]"]
  node_mulprog_sidebar["Programming sidebar"]
  node_mulprog_setup["Programming setup<br/>[+page.svelte]"]
  node_mulprog_concepts["Programming concepts<br/>[+page.svelte]"]
  node_mulprog_tutorial["Programming tutorial<br/>[+page.svelte]"]
  node_ikti_layout["IT intro layout<br/>[+layout.svelte]"]
  node_ikti_sidebar["IT intro sidebar"]
  node_ikti_intro["IT introduction<br/>[+page.svelte]"]
  node_computer_basics["Computer basics<br/>[+page.svelte]"]
end

subgraph group_community["Community information"]
  node_about["About DAIT<br/>[+page.svelte]"]
  node_dait_animation["DAIT animation<br/>[daitanimate.svelte]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_home
node_home -->|"renders"| node_navbar
node_home -->|"runs"| node_typing_animation
node_home -->|"links to"| node_learning_index
node_visitor -->|"browses"| node_learning_index
node_learning_index -->|"links to"| node_linux_intro
node_learning_index -->|"links to"| node_ikti_intro
node_learning_index -->|"links to"| node_mulprog_setup
node_learning_index -->|"links to"| node_linux_layout
node_learning_index -->|"links to"| node_mulprog_layout
node_learning_index -->|"links to"| node_ikti_layout
node_linux_layout -->|"renders"| node_linux_sidebar
node_linux_sidebar -->|"navigates"| node_linux_intro
node_linux_sidebar -->|"navigates"| node_linux_install
node_linux_sidebar -->|"navigates"| node_linux_commandline
node_mulprog_layout -->|"renders"| node_mulprog_sidebar
node_mulprog_sidebar -->|"navigates"| node_mulprog_setup
node_mulprog_sidebar -->|"navigates"| node_mulprog_concepts
node_mulprog_sidebar -->|"navigates"| node_mulprog_tutorial
node_ikti_layout -->|"renders"| node_ikti_sidebar
node_ikti_sidebar -->|"navigates"| node_ikti_intro
node_ikti_sidebar -->|"navigates"| node_computer_basics
node_visitor -->|"opens"| node_about
node_about -->|"renders"| node_navbar
node_about -->|"renders"| node_dait_animation

click node_home "https://github.com/fauzan-rizky/libraryofdait/blob/master/src/routes/%2Bpage.svelte"
click node_navbar "https://github.com/fauzan-rizky/libraryofdait/blob/master/src/components/navbar.svelte"
click node_learning_index "https://github.com/fauzan-rizky/libraryofdait/blob/master/src/routes/belajar/%2Bpage.svelte"
click node_learning_layout "https://github.com/fauzan-rizky/libraryofdait/blob/master/src/routes/belajar/%2Blayout.svelte"
click node_linux_layout "https://github.com/fauzan-rizky/libraryofdait/blob/master/src/routes/belajar/linux/%2Blayout.svelte"
click node_linux_sidebar "https://github.com/fauzan-rizky/libraryofdait/blob/master/src/routes/belajar/linux/sidebar-linux.svelte"
click node_linux_intro "https://github.com/fauzan-rizky/libraryofdait/blob/master/src/routes/belajar/linux/pengenalan/%2Bpage.svelte"
click node_linux_install "https://github.com/fauzan-rizky/libraryofdait/blob/master/src/routes/belajar/linux/install/%2Bpage.svelte"
click node_linux_commandline "https://github.com/fauzan-rizky/libraryofdait/blob/master/src/routes/belajar/linux/commandline/%2Bpage.svelte"
click node_mulprog_layout "https://github.com/fauzan-rizky/libraryofdait/blob/master/src/routes/belajar/mulprog/%2Blayout.svelte"
click node_mulprog_sidebar "https://github.com/fauzan-rizky/libraryofdait/blob/master/src/routes/belajar/mulprog/sidebar-mulprog.svelte"
click node_mulprog_setup "https://github.com/fauzan-rizky/libraryofdait/blob/master/src/routes/belajar/mulprog/setup/%2Bpage.svelte"
click node_mulprog_concepts "https://github.com/fauzan-rizky/libraryofdait/blob/master/src/routes/belajar/mulprog/ddp/%2Bpage.svelte"
click node_mulprog_tutorial "https://github.com/fauzan-rizky/libraryofdait/blob/master/src/routes/belajar/mulprog/progpel/%2Bpage.svelte"
click node_ikti_layout "https://github.com/fauzan-rizky/libraryofdait/blob/master/src/routes/belajar/pengantar-ikti/%2Blayout.svelte"
click node_ikti_sidebar "https://github.com/fauzan-rizky/libraryofdait/blob/master/src/routes/belajar/pengantar-ikti/sidebar-ikti.svelte"
click node_ikti_intro "https://github.com/fauzan-rizky/libraryofdait/blob/master/src/routes/belajar/pengantar-ikti/pengenalan/%2Bpage.svelte"
click node_computer_basics "https://github.com/fauzan-rizky/libraryofdait/blob/master/src/routes/belajar/pengantar-ikti/komputer/%2Bpage.svelte"
click node_about "https://github.com/fauzan-rizky/libraryofdait/blob/master/src/routes/tentang/%2Bpage.svelte"
click node_typing_animation "https://github.com/fauzan-rizky/libraryofdait/blob/master/src/routes/%2Bpage.svelte"
click node_dait_animation "https://github.com/fauzan-rizky/libraryofdait/blob/master/src/components/daitanimate.svelte"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_home,node_navbar,node_typing_animation toneBlue
class node_learning_index,node_learning_layout,node_linux_layout,node_linux_sidebar,node_linux_intro,node_linux_install,node_linux_commandline,node_mulprog_layout,node_mulprog_sidebar,node_mulprog_setup,node_mulprog_concepts,node_mulprog_tutorial,node_ikti_layout,node_ikti_sidebar,node_ikti_intro,node_computer_basics toneAmber
class node_about,node_dait_animation toneMint
class node_visitor toneIndigo
```

## Components

### Site navigation

- [Home page](https://github.com/fauzan-rizky/libraryofdait/blob/master/src/routes/%2Bpage.svelte): `src/routes/+page.svelte`
- [Navbar](https://github.com/fauzan-rizky/libraryofdait/blob/master/src/components/navbar.svelte): `src/components/navbar.svelte`
- [Typing animation](https://github.com/fauzan-rizky/libraryofdait/blob/master/src/routes/%2Bpage.svelte): `src/routes/+page.svelte`

### Learning content

- [Learning catalogue](https://github.com/fauzan-rizky/libraryofdait/blob/master/src/routes/belajar/%2Bpage.svelte): `src/routes/belajar/+page.svelte`
- [Learning layout](https://github.com/fauzan-rizky/libraryofdait/blob/master/src/routes/belajar/%2Blayout.svelte): `src/routes/belajar/+layout.svelte`
- [Linux layout](https://github.com/fauzan-rizky/libraryofdait/blob/master/src/routes/belajar/linux/%2Blayout.svelte): `src/routes/belajar/linux/+layout.svelte`
- [Linux sidebar](https://github.com/fauzan-rizky/libraryofdait/blob/master/src/routes/belajar/linux/sidebar-linux.svelte): `src/routes/belajar/linux/sidebar-linux.svelte`
- [Linux introduction](https://github.com/fauzan-rizky/libraryofdait/blob/master/src/routes/belajar/linux/pengenalan/%2Bpage.svelte): `src/routes/belajar/linux/pengenalan/+page.svelte`
- [Linux install](https://github.com/fauzan-rizky/libraryofdait/blob/master/src/routes/belajar/linux/install/%2Bpage.svelte): `src/routes/belajar/linux/install/+page.svelte`
- [Linux command line](https://github.com/fauzan-rizky/libraryofdait/blob/master/src/routes/belajar/linux/commandline/%2Bpage.svelte): `src/routes/belajar/linux/commandline/+page.svelte`
- [Programming layout](https://github.com/fauzan-rizky/libraryofdait/blob/master/src/routes/belajar/mulprog/%2Blayout.svelte): `src/routes/belajar/mulprog/+layout.svelte`
- [Programming sidebar](https://github.com/fauzan-rizky/libraryofdait/blob/master/src/routes/belajar/mulprog/sidebar-mulprog.svelte): `src/routes/belajar/mulprog/sidebar-mulprog.svelte`
- [Programming setup](https://github.com/fauzan-rizky/libraryofdait/blob/master/src/routes/belajar/mulprog/setup/%2Bpage.svelte): `src/routes/belajar/mulprog/setup/+page.svelte`
- [Programming concepts](https://github.com/fauzan-rizky/libraryofdait/blob/master/src/routes/belajar/mulprog/ddp/%2Bpage.svelte): `src/routes/belajar/mulprog/ddp/+page.svelte`
- [Programming tutorial](https://github.com/fauzan-rizky/libraryofdait/blob/master/src/routes/belajar/mulprog/progpel/%2Bpage.svelte): `src/routes/belajar/mulprog/progpel/+page.svelte`
- [IT intro layout](https://github.com/fauzan-rizky/libraryofdait/blob/master/src/routes/belajar/pengantar-ikti/%2Blayout.svelte): `src/routes/belajar/pengantar-ikti/+layout.svelte`
- [IT intro sidebar](https://github.com/fauzan-rizky/libraryofdait/blob/master/src/routes/belajar/pengantar-ikti/sidebar-ikti.svelte): `src/routes/belajar/pengantar-ikti/sidebar-ikti.svelte`
- [IT introduction](https://github.com/fauzan-rizky/libraryofdait/blob/master/src/routes/belajar/pengantar-ikti/pengenalan/%2Bpage.svelte): `src/routes/belajar/pengantar-ikti/pengenalan/+page.svelte`
- [Computer basics](https://github.com/fauzan-rizky/libraryofdait/blob/master/src/routes/belajar/pengantar-ikti/komputer/%2Bpage.svelte): `src/routes/belajar/pengantar-ikti/komputer/+page.svelte`

### Community information

- [About DAIT](https://github.com/fauzan-rizky/libraryofdait/blob/master/src/routes/tentang/%2Bpage.svelte): `src/routes/tentang/+page.svelte`
- [DAIT animation](https://github.com/fauzan-rizky/libraryofdait/blob/master/src/components/daitanimate.svelte): `src/components/daitanimate.svelte`

### Other components

- **Visitor**

## Connections

- Visitor → Home page: opens
- Home page → Navbar: renders
- Home page → Typing animation: runs
- Home page → Learning catalogue: links to
- Visitor → Learning catalogue: browses
- Learning catalogue → Linux introduction: links to
- Learning catalogue → IT introduction: links to
- Learning catalogue → Programming setup: links to
- Learning catalogue → Linux layout: links to
- Learning catalogue → Programming layout: links to
- Learning catalogue → IT intro layout: links to
- Linux layout → Linux sidebar: renders
- Linux sidebar → Linux introduction: navigates
- Linux sidebar → Linux install: navigates
- Linux sidebar → Linux command line: navigates
- Programming layout → Programming sidebar: renders
- Programming sidebar → Programming setup: navigates
- Programming sidebar → Programming concepts: navigates
- Programming sidebar → Programming tutorial: navigates
- IT intro layout → IT intro sidebar: renders
- IT intro sidebar → IT introduction: navigates
- IT intro sidebar → Computer basics: navigates
- Visitor → About DAIT: opens
- About DAIT → Navbar: renders
- About DAIT → DAIT animation: renders