bookofnotes/index.html at main · rishaps/bookofnotes · GitHub

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
<!DOCTYPE html>
<html lang="it" class="scroll-smooth dark">

<head>
  <!-- Critical Meta Tags First -->
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />

  <!-- SEO Meta -->
  <title>Book of Notes</title>
  <meta name="description"
    content="Appunti universitari di alta qualità per studenti di ingegneria. Analisi, Geometria, Informatica ed Economia." />
  <meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)" />
  <meta name="theme-color" content="#FFFFFF" media="(prefers-color-scheme: light)" />

  <!-- Favicon - Multiple formats for best compatibility -->
  <link rel="icon" type="image/x-icon" href="/favicon.ico" />
  <link rel="icon" type="image/png" sizes="512x512" href="/favicon.png" />
  <link rel="apple-touch-icon" sizes="512x512" href="/favicon.png" />

  <!-- DNS Prefetch for External Resources -->
  <link rel="dns-prefetch" href="https://fonts.googleapis.com" />
  <link rel="dns-prefetch" href="https://fonts.gstatic.com" />
  <link rel="dns-prefetch" href="https://cdn.jsdelivr.net" />
  <link rel="dns-prefetch" href="https://images.unsplash.com" />

  <!-- Preconnect for Critical Origins (faster than dns-prefetch) -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap"
    rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,1..1000&display=swap"
    rel="stylesheet">

  <!-- Preload Critical Fonts (subset for faster loading) -->
  <link rel="preload" as="style"
    href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap" />

  <!-- Font Stylesheets with display=swap for non-blocking -->
  <link
    href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap"
    rel="stylesheet" media="print" onload="this.media='all'" />
  <!-- Fallback for no-JS -->
  <noscript>
    <link
      href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap"
      rel="stylesheet" />
  </noscript>

  <!-- KaTeX CSS - Load synchronously for proper math rendering -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.25/dist/katex.min.css" crossorigin="anonymous" />


  <!-- Main CSS - Preload for Critical Rendering Path -->
  <link rel="preload" href="/index.css" as="style" />
  <link rel="stylesheet" href="/index.css" />


</head>

<body>
  <!-- Critical inline styles for instant LCP -->
  <style>
    /* Prevent FOUC */
    html {
      background: #000;
    }

    html:not(.dark) {
      background: #fff;
    }

    /* Skeleton loader for root */
    #root:empty {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background: inherit;
    }

    #root:empty::after {
      content: '';
      width: 40px;
      height: 40px;
      border: 3px solid transparent;
      border-top-color: currentColor;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }

    .dark #root:empty::after {
      color: rgba(255, 255, 255, 0.3);
    }

    html:not(.dark) #root:empty::after {
      color: rgba(0, 0, 0, 0.3);
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }
  </style>

  <div id="root"></div>

  <!-- SVG Filters for Pencil/Paper CSS Effect -->
  <svg style="position: absolute; width: 0; height: 0; overflow: hidden;" aria-hidden="true">
    <defs>
      <filter id="paperGrain">
        <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" result="noise" />
        <feColorMatrix type="saturate" values="0" in="noise" result="grayNoise" />
        <feDiffuseLighting in="grayNoise" lighting-color="#fff" surfaceScale="1">
          <feDistantLight azimuth="45" elevation="60" />
        </feDiffuseLighting>
      </filter>
      <filter id="inkSketch">
        <feTurbulence type="fractalNoise" baseFrequency="0.02" numOctaves="3" result="noise" />
        <feDisplacementMap in="SourceGraphic" in2="noise" scale="3" />
      </filter>
    </defs>
  </svg>

  <script type="module" src="/index.tsx"></script>
</body>

</html>