hotfixes

Develop

controllers/element.controller.js

@@ -48,10 +48,25 @@ export default class Element {
       await File.remove(dir, "cover");
       await File.write(cover, dir, `cover.${extention}`);
 
+      const metadata = await sharp(buf).metadata();
+      let { width, height } = metadata;
+      if (width > height) {
+        width = undefined;
+        height = 288;
+      } else if (width < height) {
+        width = 190;
+        height = undefined;
+      } else {
+        width = 190;
+        height = undefined;
+      }
+
       const webp288 = await sharp(buf, { animated: true })
-        .webp()
-        // .resize(190, 288, { fit: "cover", withoutEnlargement: true })
-        .resize(288, 288, { fit: "inside", withoutEnlargement: true })
+        .webp({ quality: 100, smartSubsample: true })
+        .resize(width, height, {
+          withoutEnlargement: true,
+          fastShrinkOnLoad: true,
+        })
         .toBuffer();
       await File.write(webp288, dir, "[email protected]");
     }

controllers/page.controller.js

@@ -51,10 +51,27 @@ export default class Page {
       await File.remove(dir, "cover");
       await File.write(cover, dir, `cover.${extention}`);
 
+      const metadata = await sharp(buf).metadata();
+      let { width, height } = metadata;
+      if (width > height) {
+        width = undefined;
+        height = 288;
+      } else if (width < height) {
+        width = 190;
+        height = undefined;
+      } else {
+        width = 190;
+        height = undefined;
+      }
+
       const webp288 = await sharp(buf, { animated: true })
-        .webp()
-        // .resize(190, 288, { fit: "cover", withoutEnlargement: true })
-        .resize(288, 288, { fit: "inside", withoutEnlargement: true })
+        .webp({ quality: 100, smartSubsample: true })
+        // .resize(288, 288, { fit: "outside", withoutEnlargement: true })
+        .resize(width, height, {
+          // fit: "outside",
+          withoutEnlargement: true,
+          fastShrinkOnLoad: true,
+        })
         .toBuffer();
       await File.write(webp288, dir, "[email protected]");
     }

controllers/profile.controller.js

@@ -29,7 +29,7 @@ export default class Profile {
       await File.write(avatar, dir, `avatar.${extention}`);
 
       const webp64 = await sharp(buf, { animated: true })
-        .webp()
+        .webp({ quality: 100, smartSubsample: true })
         .resize(64, 64, { fit: "cover", withoutEnlargement: true })
         .toBuffer();
       await File.write(webp64, dir, "[email protected]");

controllers/static.controller.js

@@ -3,16 +3,14 @@ import File from "../middleware/file.middleware";
 export default class Static {
   static send(c) {
     let path;
+    // 5min cache
+    c.headers["Cache-Control"] = "public, max-age=300, must-revalidate";
     if (c.url.pathname === "/favicon.ico") path = "./public/favicon.ico";
     else path = "." + c.url.pathname;
     const file = Bun.file(path);
     if (c.url.pathname.split("/").at(2) === "data_uploads") {
-      // FIX cache for user uploads none!
-      // поставить минимальный кеш, или как-нибудь его обновлять.
-      // console.log(c.url.pathname.split("/").at(2));
-    } else {
-      // 12 hours cache
-      c.headers["Cache-Control"] = "public, max-age=432000, must-revalidate";
+      // 1min cache
+      c.headers["Cache-Control"] = "public, max-age=60, must-revalidate";
     }
     return new Response(file, { headers: c.headers });
   }

public/favicon/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

templates/About.css

@@ -21,10 +21,8 @@ a.about__me {
   .about__text-container {
     grid-column: 1 / -1;
   }
-}
-
-@media screen and (max-width: 360px) {
   .autograph-container {
+    grid-column: 1 / -1;
     align-items: flex-start;
   }
 }

templates/About.eta

@@ -11,7 +11,9 @@
 				 target="_blank">MARKDOWN</a>.
 		</p>
 		<p>
-			На каждую страницу можно разместить собственные скрипты и стили.
+			На каждую страницу можно разместить собственные <a href="https://ru.wikipedia.org/wiki/JavaScript"
+				 target="_blank">СКРИПТЫ</a> и
+			<a href="https://ru.wikipedia.org/wiki/CSS" target="_blank">СТИЛИ</a>.
 		</p>
 		<p>На домашней странице собирается случайный контент со всего сайта, в оптимизированых превью. На всех остальных
 			страницах изображения загружаются в оригинальном размере, поэтому думайте над весом ваших изображений.<br>

templates/LO.css

@@ -1,6 +1,9 @@
 :root {
   --gap-v: 6px;
   --gap-h: 4px;
+
+  --gap-outter-v: 24px;
+  --gap-outter-h: 16px;
 }
 
 .grid,

templates/LO.eta

@@ -8,6 +8,11 @@
 	<meta name="theme-color" content="#e0e0e0" />
 	<title>OWWO</title>
 
+	<link rel="apple-touch-icon" sizes="180x180" href="/public/favicon/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="/public/favicon/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="/public/favicon/favicon-16x16.png">
+	<link rel="manifest" href="/public/favicon/site.webmanifest">
+
 	<link rel="stylesheet" href="/public/style/reset.css" />
 	<link rel="stylesheet" href="/public/style/style.css" />
 	<link rel="stylesheet" href="/public/style/scrollbar.css" />

templates/Login.css

@@ -1,7 +1,13 @@
-.login {
+.login__form {
   grid-column: 1 / span 2;
 
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
+form > p {
+  margin: 0;
+}
+.login__signup-container {
+  grid-column: 1 / span 2;
+}

templates/Login.eta

@@ -4,7 +4,7 @@
 	<form
 				method="POST"
 				action="/login"
-				class="login">
+				class="login__form">
 
 		<%~ include("input/inputText", {
 		name: 'username',
@@ -24,9 +24,14 @@
 		<%~ include("button/button", {
 		text: 'Войти'
 		})%>
+
 	</form>
 
-	<h6>
-		<a href="/signup">Регистрация</a>
-	</h6>
+	<span class="login__signup-container">
+		<%~ include("button/button_url", {
+		text: 'Регистрация',
+		url: '/signup'
+		})%>
+	</span>
+
 </div>

templates/Page.css

@@ -3,3 +3,6 @@
   flex-direction: column;
   gap: 8px;
 }
+.page__cover {
+  width: fit-content;
+}

templates/Page.eta

@@ -30,7 +30,10 @@
 
 	<%if (data.elements && data.elements.length) { %>
 	<% data.elements.forEach(function (element) { %>
-	<%~ include("card/cardElement", { element, mode: 'original' }) %>
+	<%~ include("card/cardElement", { 
+		element, 
+		mode: data.markup === 'grid' ? 'webp288' : 'original'
+		}) %>
 	<% }) %>
 	<% } else { %>
 	<h2 style="color: var(--grey-light);">(●´⌓`●)</h2>

templates/Profile.eta

@@ -24,7 +24,10 @@
 
 	<% if (data.pages && !!data.pages.length) { %>
 	<% data.pages.forEach(function (page) { %>
-	<%~ include("card/cardPage", {page, mode: 'original'}) %>
+	<%~ include("card/cardPage", {
+		page,
+		mode: data.markup === 'grid' ? 'webp288' : 'original'
+		}) %>
 	<% }) %>
 	<% } else { %>
 	<h2 style="color: var(--grey-light);">(●´⌓`●)</h2>

templates/Signup.eta

@@ -5,7 +5,7 @@
 	<form
 				method="POST"
 				action="/signup"
-				class="login">
+				class="login__form">
 
 		<%~ include("input/inputText", {
 		name: 'username',

templates/button/button.css

@@ -18,15 +18,22 @@
 .button * {
   margin: 0;
 }
+.button_url__container:hover {
+  text-decoration: none;
+}
+.button_url {
+  --color: var(--blue);
+}
 .button_delete {
   --color: var(--red);
 }
 .button_download a {
   color: inherit;
 }
 .button_plus {
-  padding: 32px;
+  /* padding: 32px; */
   height: 100%;
+  min-height: 102px;
 }
 .button_plus path {
   fill: var(--grey-dark);

templates/button/button_url.eta

@@ -0,0 +1,5 @@
+<a href="<%= it.url %>" class="button_url__container">
+	<button class="button button_url border-outter <%= it.className || '' %>">
+		<p><%=  it.text || 'default-text' %></p>
+	</button>
+</a>

templates/card/card.css

@@ -114,7 +114,8 @@
 
   flex-wrap: wrap;
   flex-direction: row;
-  gap: var(--gap-h);
+  column-gap: var(--gap-outter-h);
+  row-gap: var(--gap-outter-v);
 }
 
 /* IMG */
@@ -162,7 +163,7 @@
   height: fit-content;
 }
 .grid .card-element__text {
-  opacity: 0.2;
+  opacity: 0.1;
   /* mix-blend-mode: luminosity; */
 }
 
@@ -175,7 +176,7 @@
 
 /* HOVER */
 .grid .card-element:hover .card-element__text {
-  opacity: 0.64;
+  opacity: 0.32;
 }
 .card-element:hover .card-element__blank {
   color: var(--grey-dark);

templates/input/input.css

@@ -49,6 +49,7 @@
   position: relative;
   width: 100%;
   height: 100%;
+  min-height: 102px;
 
   display: flex;
   justify-content: center;
@@ -73,6 +74,7 @@
 .input-radio_label {
   width: 100%;
   height: 100%;
+  min-height: 102px;
   padding: 8px 4px;
 
   display: flex;
@@ -120,4 +122,5 @@
 
 .input-radio:checked + label .circle::before {
   content: "●";
+  color: var(--white);
 }