diff --git a/package-lock.json b/package-lock.json
index d85cde4..a74f62e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,16 +1,28 @@
 {
-  "name": "src",
+  "name": "andifes-isf",
   "version": "0.0.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "src",
+      "name": "andifes-isf",
       "version": "0.0.1",
       "dependencies": {
         "@astrojs/check": "^0.9.3",
         "astro": "^4.15.8",
+        "datatables.net-buttons-dt": "^3.1.2",
+        "datatables.net-colreorder-dt": "^2.0.4",
+        "datatables.net-dt": "^2.1.7",
+        "datatables.net-fixedheader-dt": "^4.0.1",
+        "datatables.net-responsive-dt": "^3.0.3",
+        "datatables.net-searchbuilder-dt": "^1.8.0",
+        "jquery": "^3.7.1",
+        "papaparse": "^5.4.1",
         "typescript": "^5.6.2"
+      },
+      "devDependencies": {
+        "@types/jquery": "^3.5.30",
+        "@types/papaparse": "^5.3.14"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -1721,6 +1733,16 @@
         "@types/unist": "*"
       }
     },
+    "node_modules/@types/jquery": {
+      "version": "3.5.30",
+      "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.30.tgz",
+      "integrity": "sha512-nbWKkkyb919DOUxjmRVk8vwtDb0/k8FKncmUKFi+NY+QXqWltooxTrswvz4LspQwxvLdvzBN1TImr6cw3aQx2A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/sizzle": "*"
+      }
+    },
     "node_modules/@types/mdast": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
@@ -1745,6 +1767,33 @@
         "@types/unist": "*"
       }
     },
+    "node_modules/@types/node": {
+      "version": "22.5.5",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.5.5.tgz",
+      "integrity": "sha512-Xjs4y5UPO/CLdzpgR6GirZJx36yScjh73+2NlLlkFRSoQN8B0DpfXPdZGnvVmLRLOsqDpOfTNv7D9trgGhmOIA==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.19.2"
+      }
+    },
+    "node_modules/@types/papaparse": {
+      "version": "5.3.14",
+      "resolved": "https://registry.npmjs.org/@types/papaparse/-/papaparse-5.3.14.tgz",
+      "integrity": "sha512-LxJ4iEFcpqc6METwp9f6BV6VVc43m6MfH0VqFosHvrUgfXiFe6ww7R3itkOQ+TCK6Y+Iv/+RnnvtRZnkc5Kc9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/sizzle": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.8.tgz",
+      "integrity": "sha512-0vWLNK2D5MT9dg0iOo8GlKguPAU02QjmZitPEsXRuJXU/OGIOt9vT9Fc26wtYuavLxtO45v9PGleoL9Z0k1LHg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/unist": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
@@ -2596,6 +2645,130 @@
         "node": ">=4"
       }
     },
+    "node_modules/datatables.net": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/datatables.net/-/datatables.net-2.1.7.tgz",
+      "integrity": "sha512-ZSsBmYN9m++WHm+nfJm2cPfC0I25CBRx358qebzEW9WWXYjPZFJs8iRs9+nzv8P7HgvqQu8kKBmQzW1+ByhuUA==",
+      "license": "MIT",
+      "dependencies": {
+        "jquery": ">=1.7"
+      }
+    },
+    "node_modules/datatables.net-buttons": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/datatables.net-buttons/-/datatables.net-buttons-3.1.2.tgz",
+      "integrity": "sha512-D7xjmXR4P056JAD6skjKYcSvQxRslt69n5dgw8KX/6nmkSJirt3iFlhKo69GzHTFTOBN49WyPvStxpbUFgzc2A==",
+      "license": "MIT",
+      "dependencies": {
+        "datatables.net": "^2",
+        "jquery": ">=1.7"
+      }
+    },
+    "node_modules/datatables.net-buttons-dt": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/datatables.net-buttons-dt/-/datatables.net-buttons-dt-3.1.2.tgz",
+      "integrity": "sha512-ctGWFZ1kmkCfRqEzFLJAe5FDk0wu01XmHM828JzargIs1FO34P9Cj4k+LqP5YNAHC55oaCVRVy715e86wvR+wQ==",
+      "license": "MIT",
+      "dependencies": {
+        "datatables.net-buttons": "3.1.2",
+        "datatables.net-dt": "^2",
+        "jquery": ">=1.7"
+      }
+    },
+    "node_modules/datatables.net-colreorder": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/datatables.net-colreorder/-/datatables.net-colreorder-2.0.4.tgz",
+      "integrity": "sha512-j2d2uObivMaMLX+VTsIu9XEfucMPuS+OYurezQtPNHo0LgdXdgKvouEAUghVtlkTxW+jX7tjiSbagH2YWIS5Jg==",
+      "license": "MIT",
+      "dependencies": {
+        "datatables.net": "^2",
+        "jquery": ">=1.7"
+      }
+    },
+    "node_modules/datatables.net-colreorder-dt": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/datatables.net-colreorder-dt/-/datatables.net-colreorder-dt-2.0.4.tgz",
+      "integrity": "sha512-vsGn1GETv9tJO1fUZMA96mQ/baXPdoF3qB/tADPD83+1VMGFQijuBtUOxBx3wd/Bm6SmL03GV0Ug1lB7MazKkQ==",
+      "license": "MIT",
+      "dependencies": {
+        "datatables.net-colreorder": "2.0.4",
+        "datatables.net-dt": "^2",
+        "jquery": ">=1.7"
+      }
+    },
+    "node_modules/datatables.net-dt": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/datatables.net-dt/-/datatables.net-dt-2.1.7.tgz",
+      "integrity": "sha512-+JLzOH+atnWsZNc+w1gsi/WV7WprJUznVb/vxVN1+2li1vVocvljjLAWxrTJBGOs0n6hfIomkK9rX/H2M5tSkw==",
+      "license": "MIT",
+      "dependencies": {
+        "datatables.net": "2.1.7",
+        "jquery": ">=1.7"
+      }
+    },
+    "node_modules/datatables.net-fixedheader": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/datatables.net-fixedheader/-/datatables.net-fixedheader-4.0.1.tgz",
+      "integrity": "sha512-jdwvGvI/WBKjNDJ5JwcTqmh7ehLkzXmTqvVCWJ6ig3+P9EHasoTq6Ys08WfICXpCHZgDKwDYLiW2rqVLK5TWOg==",
+      "license": "MIT",
+      "dependencies": {
+        "datatables.net": "^2",
+        "jquery": ">=1.7"
+      }
+    },
+    "node_modules/datatables.net-fixedheader-dt": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/datatables.net-fixedheader-dt/-/datatables.net-fixedheader-dt-4.0.1.tgz",
+      "integrity": "sha512-9Fzmue2d4ld1xQL5t8GDqoOOTWkEhyLa15TevS9na57qC60e1B+K3U+mxLUSyBJ08eJ2kaOXskOptwQ2GzSvfw==",
+      "license": "MIT",
+      "dependencies": {
+        "datatables.net-dt": "^2",
+        "datatables.net-fixedheader": "4.0.1",
+        "jquery": ">=1.7"
+      }
+    },
+    "node_modules/datatables.net-responsive": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/datatables.net-responsive/-/datatables.net-responsive-3.0.3.tgz",
+      "integrity": "sha512-/VU5U3P+l3GSdo92Mclt5YlrETNkfIZZU1MOk0aHNt0VqQOE0dORhx5Nwa8pYVsBuQBYzzyROZLru6UivEWv3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "datatables.net": "^2",
+        "jquery": ">=1.7"
+      }
+    },
+    "node_modules/datatables.net-responsive-dt": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/datatables.net-responsive-dt/-/datatables.net-responsive-dt-3.0.3.tgz",
+      "integrity": "sha512-9Q3Ka8JFzLWfzAVpEePkIehQqjo0JkZiqh8r63wGzmnd/H10LmMNsTQIL5CxoKHFVMuUiWHSW3TS4Xga5E4bOg==",
+      "license": "MIT",
+      "dependencies": {
+        "datatables.net-dt": "^2",
+        "datatables.net-responsive": "3.0.3",
+        "jquery": ">=1.7"
+      }
+    },
+    "node_modules/datatables.net-searchbuilder": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/datatables.net-searchbuilder/-/datatables.net-searchbuilder-1.8.0.tgz",
+      "integrity": "sha512-NQ8dkXImmOfANAffnDdkUE4rSFrBx+rvVI0ohBlPrC0I9mvMzUgpMEvmjjj5NuusV1k4ibhOHnqGjdDPyjExCw==",
+      "license": "MIT",
+      "dependencies": {
+        "datatables.net": "^2.1",
+        "jquery": ">=1.7"
+      }
+    },
+    "node_modules/datatables.net-searchbuilder-dt": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/datatables.net-searchbuilder-dt/-/datatables.net-searchbuilder-dt-1.8.0.tgz",
+      "integrity": "sha512-KQylT/H7d0n428VKfI4a9oznz7yBaOmGo05B6ETxeSyu/w9qavomT5Kbg0HZCB2itP16k13H8XVJ4No9zPuw1g==",
+      "license": "MIT",
+      "dependencies": {
+        "datatables.net-dt": "^2.1",
+        "datatables.net-searchbuilder": "1.8.0",
+        "jquery": ">=1.7"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
@@ -3430,6 +3603,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/jquery": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
+      "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
+      "license": "MIT"
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -4696,6 +4875,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/papaparse": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/papaparse/-/papaparse-5.4.1.tgz",
+      "integrity": "sha512-HipMsgJkZu8br23pW15uvo6sib6wne/4woLZPlFf3rpDyMe9ywEXUsuD7+6K9PRkJlVT51j/sCOYDKGGS3ZJrw==",
+      "license": "MIT"
+    },
     "node_modules/parse-latin": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/parse-latin/-/parse-latin-7.0.0.tgz",
@@ -4823,16 +5008,17 @@
       }
     },
     "node_modules/prettier": {
-      "version": "2.8.7",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.7.tgz",
-      "integrity": "sha512-yPngTo3aXUUmyuTjeTUT75txrf+aMh9FiD7q9ZE/i6r0bPb22g4FsE6Y338PQX1bmfy08i9QQCB7/rcUAVntfw==",
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
+      "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
       "license": "MIT",
       "optional": true,
+      "peer": true,
       "bin": {
-        "prettier": "bin-prettier.js"
+        "prettier": "bin/prettier.cjs"
       },
       "engines": {
-        "node": ">=10.13.0"
+        "node": ">=14"
       },
       "funding": {
         "url": "https://github.com/prettier/prettier?sponsor=1"
@@ -5568,6 +5754,13 @@
         "semver": "^7.3.8"
       }
     },
+    "node_modules/undici-types": {
+      "version": "6.19.8",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
+      "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
+      "devOptional": true,
+      "license": "MIT"
+    },
     "node_modules/unified": {
       "version": "11.0.5",
       "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz",
@@ -6274,6 +6467,22 @@
         "prettier": "2.8.7"
       }
     },
+    "node_modules/yaml-language-server/node_modules/prettier": {
+      "version": "2.8.7",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.7.tgz",
+      "integrity": "sha512-yPngTo3aXUUmyuTjeTUT75txrf+aMh9FiD7q9ZE/i6r0bPb22g4FsE6Y338PQX1bmfy08i9QQCB7/rcUAVntfw==",
+      "license": "MIT",
+      "optional": true,
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/yaml-language-server/node_modules/request-light": {
       "version": "0.5.8",
       "resolved": "https://registry.npmjs.org/request-light/-/request-light-0.5.8.tgz",
diff --git a/package.json b/package.json
index 4bcd465..ba8e684 100644
--- a/package.json
+++ b/package.json
@@ -10,8 +10,20 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^4.15.8",
     "@astrojs/check": "^0.9.3",
+    "astro": "^4.15.8",
+    "datatables.net-buttons-dt": "^3.1.2",
+    "datatables.net-colreorder-dt": "^2.0.4",
+    "datatables.net-dt": "^2.1.7",
+    "datatables.net-fixedheader-dt": "^4.0.1",
+    "datatables.net-responsive-dt": "^3.0.3",
+    "datatables.net-searchbuilder-dt": "^1.8.0",
+    "jquery": "^3.7.1",
+    "papaparse": "^5.4.1",
     "typescript": "^5.6.2"
+  },
+  "devDependencies": {
+    "@types/jquery": "^3.5.30",
+    "@types/papaparse": "^5.3.14"
   }
-}
\ No newline at end of file
+}
diff --git a/public/site.webmanifest b/public/site.webmanifest
index e200a83..14881cb 100644
--- a/public/site.webmanifest
+++ b/public/site.webmanifest
@@ -3,12 +3,12 @@
     "short_name": "IsF",
     "icons": [
         {
-            "src": "/android-chrome-192x192.png",
+            "src": "/assets/img/android-chrome-192x192.png",
             "sizes": "192x192",
             "type": "image/png"
         },
         {
-            "src": "/android-chrome-512x512.png",
+            "src": "/assets/img/android-chrome-512x512.png",
             "sizes": "512x512",
             "type": "image/png"
         }
diff --git a/src/components/Carregando.astro b/src/components/Carregando.astro
new file mode 100644
index 0000000..f576db6
--- /dev/null
+++ b/src/components/Carregando.astro
@@ -0,0 +1,53 @@
+---
+interface Props {
+	id: string;
+}
+
+const { id } = Astro.props;
+---
+<div class="holder" id={id}>
+    <div class="loader"></div>
+</div>
+
+<style>
+.holder {
+    margin: 20px auto;
+    height: calc(40px * 2.33);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+/* Créditos: https://css-loaders.com/colorful/ */
+.loader {
+    width: 40px;
+    aspect-ratio: 1;
+    border-radius: 50%;
+    margin-top: -30px;
+    display: flex;
+    justify-content: center;
+    overflow: hidden;
+    transform-origin: 50% 116.5%;
+    animation: l17 2s infinite linear; 
+}
+.loader:before {
+    content:"";
+    min-width: 233%;
+    height: 233%;
+    /* background: 
+        radial-gradient(farthest-side,#00DA3C 90%,#0000) top,
+        radial-gradient(farthest-side,#00CBE7 90%,#0000) left,
+        radial-gradient(farthest-side,#FD8603 90%,#0000) bottom,
+        radial-gradient(farthest-side,#F4F328 90%,#0000) right;
+    background-size: 43% 43%; */
+    background: url(/assets/img/andifes-isf-400x200.png);
+    background-size: 284px 141px;
+    background-position: -187px 3px;
+    background-repeat: no-repeat;
+    animation: inherit;
+    animation-direction: reverse;
+}
+@keyframes l17 {
+    100% {transform: rotate(360deg)}
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Observacao.astro b/src/components/Observacao.astro
new file mode 100644
index 0000000..72f3068
--- /dev/null
+++ b/src/components/Observacao.astro
@@ -0,0 +1,53 @@
+---
+interface Props {
+	title: string;
+}
+
+const { title } = Astro.props;
+---
+<aside aria-label={title}>
+    <p aria-hidden="true">
+        <svg
+            viewBox="0 0 24 24"
+            width="16"
+            height="16"
+            fill="currentColor"
+            class="starlight-aside__icon"
+            ><path
+                d="M12 11C11.7348 11 11.4804 11.1054 11.2929 11.2929C11.1054 11.4804 11 11.7348 11 12V16C11 16.2652 11.1054 16.5196 11.2929 16.7071C11.4804 16.8946 11.7348 17 12 17C12.2652 17 12.5196 16.8946 12.7071 16.7071C12.8946 16.5196 13 16.2652 13 16V12C13 11.7348 12.8946 11.4804 12.7071 11.2929C12.5196 11.1054 12.2652 11 12 11ZM12.38 7.08C12.1365 6.97998 11.8635 6.97998 11.62 7.08C11.4973 7.12759 11.3851 7.19896 11.29 7.29C11.2017 7.3872 11.1306 7.49882 11.08 7.62C11.024 7.73868 10.9966 7.86882 11 8C10.9992 8.13161 11.0245 8.26207 11.0742 8.38391C11.124 8.50574 11.1973 8.61656 11.29 8.71C11.3872 8.79833 11.4988 8.86936 11.62 8.92C11.7715 8.98224 11.936 9.00632 12.099 8.99011C12.2619 8.97391 12.4184 8.91792 12.5547 8.82707C12.691 8.73622 12.8029 8.61328 12.8805 8.46907C12.9582 8.32486 12.9992 8.16378 13 8C12.9963 7.73523 12.8927 7.48163 12.71 7.29C12.6149 7.19896 12.5028 7.12759 12.38 7.08ZM12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7363 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM12 20C10.4178 20 8.87104 19.5308 7.55544 18.6518C6.23985 17.7727 5.21447 16.5233 4.60897 15.0615C4.00347 13.5997 3.84504 11.9911 4.15372 10.4393C4.4624 8.88743 5.22433 7.46197 6.34315 6.34315C7.46197 5.22433 8.88743 4.4624 10.4393 4.15372C11.9911 3.84504 13.5997 4.00346 15.0615 4.60896C16.5233 5.21447 17.7727 6.23984 18.6518 7.55544C19.5308 8.87103 20 10.4177 20 12C20 14.1217 19.1572 16.1566 17.6569 17.6569C16.1566 19.1571 14.1217 20 12 20Z"
+            ></path></svg
+        >{title}
+    </p>
+    <section>
+        <slot />
+    </section>
+</aside>
+
+<style>
+aside {
+    padding: 1rem;
+    border-inline-start: 0.25rem solid #999999;
+    margin-block-start: 0.5em;
+    margin-block-end: 0.5em;
+    color: #17181c;
+    background-color: #e6e6e6;
+}
+aside > p {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    font-size: 1.125rem;
+    font-weight: 600;
+    line-height: 1.2;
+    color: #4d4d4d;
+    margin: 0;
+}
+aside > p > svg {
+    font-size: 1.333em;
+    width: 1em;
+    height: 1em;
+}
+aside > section {
+    margin-top: 0.5rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index da32a9e..dfd0940 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -19,6 +19,7 @@ const { title, description } = Astro.props;
 		<link rel="manifest" href="/site.webmanifest">
 		<meta name="generator" content={Astro.generator} />
 		<title>{title}</title>
+		<slot name="head" />
 	</head>
 	<body>
 		<header>
@@ -34,7 +35,7 @@ const { title, description } = Astro.props;
 				</nav>
 			</div>
 		</header>
-		<main>
+		<main class="container">
 			<slot />
 		</main>
 	</body>
@@ -42,7 +43,8 @@ const { title, description } = Astro.props;
 
 <style>
 	:root {
-		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+		font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+		line-height: 1.75;
 	}
 	body {
 		margin: 0;
diff --git a/src/pages/biblioteca.astro b/src/pages/biblioteca.astro
new file mode 100644
index 0000000..a92dc2a
--- /dev/null
+++ b/src/pages/biblioteca.astro
@@ -0,0 +1,179 @@
+---
+import Carregando from '../components/Carregando.astro';
+import Observacao from '../components/Observacao.astro';
+import Layout from '../layouts/Layout.astro';
+---
+<Layout title="Biblioteca IsF - Idiomas sem Fronteiras">
+    <link rel="stylesheet" href="https://cdn.datatables.net/v/dt/jq-3.7.0/dt-2.1.6/b-3.1.2/cr-2.0.4/fh-4.0.1/r-3.0.3/sb-1.8.0/datatables.min.css" slot="head" />
+    
+	<Observacao title="Colabore!">
+		Possui material que gostaria de compartilhar? Colabore enviando-o <a href="https://forms.gle/d4KfCsrDfZC4dnkM6" target="_blank">aqui</a>.
+	</Observacao>
+
+	<Carregando id="data-table-loader" />
+	
+	<table id="data">
+	</table>
+</Layout>
+
+<style is:global>
+main {
+	background: #fff;
+    border: 1px solid #bbb;
+    border-radius: 10px;
+    padding: 20px;
+    margin: 30px auto 60px;
+	box-shadow: 0px 2px 8px 2px lightgrey;
+}
+
+div.dt-button-collection.dtb-collection-closeable div.dtsb-titleRow,
+div.dt-button-collection.dtb-collection-closeable div.dtsb-group {
+    padding-right: 50px;
+}
+div.dt-container div.dt-layout-row:first-child {
+	margin-top: 0;
+}
+div.dt-container div.dt-layout-row:last-child {
+	margin-bottom: 0;
+}
+
+.tag {
+	border-radius: 16px;
+	padding: 4px 8px 5px 8px;
+	font-size: 12px;
+	white-space: nowrap;
+    display: inline-block;
+	max-width: 120px;
+    overflow: hidden;
+	text-overflow: ellipsis;
+}
+</style>
+
+<script>
+import DataTable from 'datatables.net-dt'
+import 'datatables.net-buttons-dt'
+import 'datatables.net-colreorder-dt'
+import 'datatables.net-fixedheader-dt'
+import 'datatables.net-responsive-dt'
+import 'datatables.net-searchbuilder-dt'
+import Papa from 'papaparse'
+
+const ID_DA_PLANILHA = '1zL6CXcemierW0aKoGgYMJ2U0iAn_89QF9EVOPniPk34'
+const ID_DA_ABA = 1622766549
+const URL_DA_PLANILHA = `https://docs.google.com/spreadsheets/d/${ID_DA_PLANILHA}/pub?gid=${ID_DA_ABA}&single=true&output=csv&t=${Date.now()}`
+
+const TAGS = {
+	// [text_color, bg_color]
+	
+	// == CATEGORIA ==
+	"Artigo": ['#666666', '#E5E5E5'],
+	"Monografia": ['#437406', '#CAF0CC'],
+	"Dissertação": ['#8F6200', '#FFEBC0'],
+	"Tese": ['#0068B8', '#D4E7F6'],
+	"Entrevista": ['#FFFFFF', '#BE79B3'],
+	"TCC": ['#FFFFFF', '#4F6BED'],
+	"Capítulo": ['#FFFFFF', '#9E6C00'],
+	"Livro": ['#FFFFFF', '#CA5010'],
+	"Palestra": ['#FFFFFF', '#005E50'],
+	// == CATEGORIA ==
+	
+	// == IDIOMA ==
+	"alemão": ['#8F6200', '#FFEBC0'],
+	"espanhol": ['#437406', '#CAF0CC'],
+	"francês": ['#FFFFFF', '#0078D4'],
+	"inglês": ['#FFFFFF', '#373277'],
+	"italiano": ['#AA272B', '#F5CCCF'],
+	"japonês": ['#FFFFFF', '#D13438'],
+	"português para estrangeiros": ['#FFFFFF', '#038387'],
+	"TODOS": ['#FFFFFF', '#BE79B3'],
+	// == IDIOMA ==
+}
+
+type LibraryRecord = {
+	Ano: number
+	Categoria: string
+	Idioma: string
+	Referência: string
+	Arquivo: string
+}
+
+Papa.parse<LibraryRecord>(URL_DA_PLANILHA, {
+	download: true,
+	header: true,
+	complete: function(results) {
+		if (results.errors.length) {
+			console.error(results);
+			window.alert("Erro ao carregar dados.")
+		} else {
+			new DataTable('#data', {
+				language: {
+					url: '//cdn.datatables.net/plug-ins/2.1.6/i18n/pt-BR.json',
+					searchBuilder: {
+						button: {
+							0: 'Busca avançada',
+							_: 'Busca avançada (%d)'
+						}
+					}
+				},
+				layout: {
+					topStart: {
+						buttons: [
+							{
+								extend: 'searchBuilder',
+								config: {
+                					greyscale: true,
+								}
+							}
+						],
+						pageLength: {}
+					},
+					topEnd: {
+						search: {
+							processing: true,
+							placeholder: "Buscar na biblioteca"
+						}
+					}
+				},
+				responsive: true,
+				columnDefs: [
+					{ responsivePriority: 1, targets: -2 },
+					{ responsivePriority: 2, targets: -1 },
+					{ responsivePriority: 3, targets: -3 },
+				],
+				fixedHeader: true,
+				data: results.data,
+				columns: Object.keys(results.data[0]).map(x => ({
+					data: x,
+					title: x,
+					render: (d, t) =>
+						t === 'display' ?
+							['Categoria', 'Idioma'].includes(x) ?
+								createTag(d)
+								: replaceUrlsWithLinks(d, x === 'Arquivo' ? 'Link' : undefined)
+									: d,
+				})),
+				initComplete: function() {
+					document.querySelector("#data-table-loader")?.remove()
+				}
+			});
+		}
+	}
+});
+
+function replaceUrlsWithLinks(text: string, label: string | undefined = undefined) {
+	var urlRegex = /((http|https):\/\/[^\s]+)(?=\s|\.|$)/gi;
+	return text.replace(urlRegex, function(url) {
+        const cleanedUrl = url.replace(/[\.,!?;:)>]+$/, '');
+		const trailingPunctuation = url.slice(cleanedUrl.length);
+        return `<a href="${cleanedUrl}" target="_blank" rel="noopener noreferrer">${label || cleanedUrl}</a>${trailingPunctuation}`;
+    });
+}
+
+function createTag(text: string) {
+	return text
+		.split(";")
+		.map(t => t.trim())
+		.map(t => t in TAGS ? `<span class="tag" style="color: ${TAGS[t as keyof typeof TAGS][0]}; background-color: ${TAGS[t as keyof typeof TAGS][1]}" title="${t}">${t}</span>` : t)
+		.join(" ")
+}
+</script>