made navbar ssr
This commit is contained in:
@@ -2,91 +2,145 @@ import { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify';
|
||||
import * as fs from 'fs';
|
||||
import * as path from 'path';
|
||||
|
||||
let cachedNavbar: string | null = null;
|
||||
|
||||
function getNavbarHTML(activePage: string, showSearch: boolean = true): string {
|
||||
if (!cachedNavbar) {
|
||||
const navbarPath = path.join(__dirname, '..', '..', 'views', 'components', 'navbar.html');
|
||||
cachedNavbar = fs.readFileSync(navbarPath, 'utf-8');
|
||||
}
|
||||
|
||||
let navbar = cachedNavbar;
|
||||
|
||||
const pages = ['anime', 'books', 'gallery', 'schedule', 'my-list', 'marketplace'];
|
||||
pages.forEach(page => {
|
||||
const regex = new RegExp(`(<button class="nav-button[^"]*)"\\s+data-page="${page}"`, 'g');
|
||||
if (page === activePage) {
|
||||
navbar = navbar.replace(regex, `$1 active" data-page="${page}"`);
|
||||
}
|
||||
});
|
||||
|
||||
if (!showSearch) {
|
||||
navbar = navbar.replace(
|
||||
'<div class="search-wrapper">',
|
||||
'<div class="search-wrapper" style="visibility: hidden;">'
|
||||
);
|
||||
}
|
||||
|
||||
return navbar;
|
||||
}
|
||||
|
||||
function injectNavbar(htmlContent: string, activePage: string, showSearch: boolean = true): string {
|
||||
const navbar = getNavbarHTML(activePage, showSearch);
|
||||
|
||||
return htmlContent.replace(/<body[^>]*>/, `$&\n${navbar}`);
|
||||
}
|
||||
|
||||
async function viewsRoutes(fastify: FastifyInstance) {
|
||||
|
||||
fastify.get('/', (req: FastifyRequest, reply: FastifyReply) => {
|
||||
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'users.html'));
|
||||
reply.type('text/html').send(stream);
|
||||
const htmlPath = path.join(__dirname, '..', '..', 'views', 'users.html');
|
||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
||||
reply.type('text/html').send(html);
|
||||
});
|
||||
|
||||
fastify.get('/anime', (req: FastifyRequest, reply: FastifyReply) => {
|
||||
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'anime', 'animes.html'));
|
||||
reply.type('text/html').send(stream);
|
||||
const htmlPath = path.join(__dirname, '..', '..', 'views', 'anime', 'animes.html');
|
||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
||||
const htmlWithNavbar = injectNavbar(html, 'anime', true);
|
||||
reply.type('text/html').send(htmlWithNavbar);
|
||||
});
|
||||
|
||||
fastify.get('/my-list', (req: FastifyRequest, reply: FastifyReply) => {
|
||||
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'list.html'));
|
||||
reply.type('text/html').send(stream);
|
||||
const htmlPath = path.join(__dirname, '..', '..', 'views', 'list.html');
|
||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
||||
const htmlWithNavbar = injectNavbar(html, 'my-list', false);
|
||||
reply.type('text/html').send(htmlWithNavbar);
|
||||
});
|
||||
|
||||
fastify.get('/books', (req: FastifyRequest, reply: FastifyReply) => {
|
||||
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'books', 'books.html'));
|
||||
reply.type('text/html').send(stream);
|
||||
const htmlPath = path.join(__dirname, '..', '..', 'views', 'books', 'books.html');
|
||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
||||
const htmlWithNavbar = injectNavbar(html, 'books', true);
|
||||
reply.type('text/html').send(htmlWithNavbar);
|
||||
});
|
||||
|
||||
fastify.get('/schedule', (req: FastifyRequest, reply: FastifyReply) => {
|
||||
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'schedule.html'));
|
||||
reply.type('text/html').send(stream);
|
||||
const htmlPath = path.join(__dirname, '..', '..', 'views', 'schedule.html');
|
||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
||||
const htmlWithNavbar = injectNavbar(html, 'schedule', false);
|
||||
reply.type('text/html').send(htmlWithNavbar);
|
||||
});
|
||||
|
||||
fastify.get('/gallery', (req: FastifyRequest, reply: FastifyReply) => {
|
||||
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'gallery', 'gallery.html'));
|
||||
reply.type('text/html').send(stream);
|
||||
const htmlPath = path.join(__dirname, '..', '..', 'views', 'gallery', 'gallery.html');
|
||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
||||
const htmlWithNavbar = injectNavbar(html, 'gallery', true);
|
||||
reply.type('text/html').send(htmlWithNavbar);
|
||||
});
|
||||
|
||||
fastify.get('/marketplace', (req: FastifyRequest, reply: FastifyReply) => {
|
||||
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'marketplace.html'));
|
||||
reply.type('text/html').send(stream);
|
||||
const htmlPath = path.join(__dirname, '..', '..', 'views', 'marketplace.html');
|
||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
||||
const htmlWithNavbar = injectNavbar(html, 'marketplace', false);
|
||||
reply.type('text/html').send(htmlWithNavbar);
|
||||
});
|
||||
|
||||
fastify.get('/gallery/:extension/*', (req: FastifyRequest, reply: FastifyReply) => {
|
||||
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'gallery', 'image.html'));
|
||||
reply.type('text/html').send(stream);
|
||||
const htmlPath = path.join(__dirname, '..', '..', 'views', 'gallery', 'image.html');
|
||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
||||
const htmlWithNavbar = injectNavbar(html, 'gallery', true);
|
||||
reply.type('text/html').send(htmlWithNavbar);
|
||||
});
|
||||
|
||||
fastify.get('/gallery/favorites/*', (req: FastifyRequest, reply: FastifyReply) => {
|
||||
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'gallery', 'image.html'));
|
||||
reply.type('text/html').send(stream);
|
||||
const htmlPath = path.join(__dirname, '..', '..', 'views', 'gallery', 'image.html');
|
||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
||||
const htmlWithNavbar = injectNavbar(html, 'gallery', true);
|
||||
reply.type('text/html').send(htmlWithNavbar);
|
||||
});
|
||||
|
||||
fastify.get('/anime/:id', (req: FastifyRequest, reply: FastifyReply) => {
|
||||
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'anime', 'anime.html'));
|
||||
reply.type('text/html').send(stream);
|
||||
const htmlPath = path.join(__dirname, '..', '..', 'views', 'anime', 'anime.html');
|
||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
||||
reply.type('text/html').send(html);
|
||||
});
|
||||
|
||||
fastify.get('/anime/:extension/*', (req: FastifyRequest, reply: FastifyReply) => {
|
||||
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'anime', 'anime.html'));
|
||||
reply.type('text/html').send(stream);
|
||||
const htmlPath = path.join(__dirname, '..', '..', 'views', 'anime', 'anime.html');
|
||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
||||
reply.type('text/html').send(html);
|
||||
});
|
||||
|
||||
fastify.get('/watch/:id/:episode', (req: FastifyRequest, reply: FastifyReply) => {
|
||||
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'anime', 'watch.html'));
|
||||
reply.type('text/html').send(stream);
|
||||
const htmlPath = path.join(__dirname, '..', '..', 'views', 'anime', 'watch.html');
|
||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
||||
reply.type('text/html').send(html);
|
||||
});
|
||||
|
||||
fastify.get('/book/:id', (req: FastifyRequest, reply: FastifyReply) => {
|
||||
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'books', 'book.html'));
|
||||
reply.type('text/html').send(stream);
|
||||
const htmlPath = path.join(__dirname, '..', '..', 'views', 'books', 'book.html');
|
||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
||||
reply.type('text/html').send(html);
|
||||
});
|
||||
|
||||
fastify.get('/book/:extension/*', (req: FastifyRequest, reply: FastifyReply) => {
|
||||
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'books', 'book.html'));
|
||||
reply.type('text/html').send(stream);
|
||||
const htmlPath = path.join(__dirname, '..', '..', 'views', 'books', 'book.html');
|
||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
||||
reply.type('text/html').send(html);
|
||||
});
|
||||
|
||||
fastify.get('/read/:provider/:chapter/*', (req: FastifyRequest, reply: FastifyReply) => {
|
||||
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'books', 'read.html'));
|
||||
reply.type('text/html').send(stream);
|
||||
const htmlPath = path.join(__dirname, '..', '..', 'views', 'books', 'read.html');
|
||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
||||
reply.type('text/html').send(html);
|
||||
});
|
||||
|
||||
fastify.setNotFoundHandler((req, reply) => {
|
||||
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', '404.html'));
|
||||
|
||||
|
||||
reply
|
||||
.code(404)
|
||||
.type('text/html')
|
||||
.send(stream)
|
||||
})
|
||||
const htmlPath = path.join(__dirname, '..', '..', 'views', '404.html');
|
||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
||||
reply.code(404).type('text/html').send(html);
|
||||
});
|
||||
}
|
||||
|
||||
export default viewsRoutes;
|
||||
Reference in New Issue
Block a user