development to production

backend/src/packages/articles/article.repository.ts

@@ -327,6 +327,8 @@ class ArticleRepository implements IArticleRepository {
           }
         : null,
       coverUrl: article.cover?.url ?? null,
+      commentCount: EMPTY_COMMENT_COUNT,
+      viewCount: EMPTY_VIEW_COUNT,
     });
   }
 

backend/src/packages/articles/article.service.ts

@@ -382,9 +382,11 @@ class ArticleService implements IService {
       }),
     );
 
-    void this.articleSocketService.handleNewArticle(
-      article.toObjectWithRelationsAndCounts(),
-    );
+    if (payload.publishedAt) {
+      void this.articleSocketService.handleNewArticle(
+        article.toObjectWithRelationsAndCounts(),
+      );
+    }
 
     const countOfOwnArticles =
       await this.articleRepository.countArticlesByUserId(payload.userId);
@@ -442,6 +444,12 @@ class ArticleService implements IService {
       }),
     );
 
+    if (payload.publishedAt && !article.publishedAt) {
+      void this.articleSocketService.handleNewArticle(
+        updatedArticle.toObjectWithRelationsAndCounts(),
+      );
+    }
+
     return updatedArticle.toObjectWithRelationsAndCounts();
   }
 

backend/src/packages/articles/libs/helpers/get-article-improvement-suggestions-completion-config.helper.ts

@@ -4,7 +4,7 @@ const getArticleImprovementSuggestionsCompletionConfig = (
   text: string,
 ): CompletionConfig => {
   return {
-    prompt: `You'll be given a html markup of article and your task is to identify some points that you would suggest to change to make the article better. Ignore any html related issues - focus on article content. Provide the result in JSON format as an array of objects where each object has keys: title (title of suggestion), description (description of suggestion), and priority (can be 1, 2, or 3, it identifies the importance of suggestion, 1 - lowest priority, 3 - highest priority). Here's the article: ${text}`,
+    prompt: `You'll be given a html markup of article and your task is to identify some points that you would suggest to change to make the article better. Ignore any html related issues - focus on article content. Provide the result in JSON format as an array of objects where each object has keys: title (title of suggestion), description (description of suggestion), and priority (can be 1, 2, or 3, it identifies the importance of suggestion, 1 - lowest priority, 3 - highest priority).Provide no more than 5 suggestions. Here's the article: ${text}`,
   };
 };
 

backend/src/packages/articles/libs/helpers/get-detect-article-genre-completion-config.helper.ts

@@ -4,7 +4,7 @@ import { UNKNOWN_GENRE_KEY } from '~/packages/genres/genre.js';
 const getDetectArticleGenreCompletionConfig = (
   text: string,
 ): CompletionConfig => ({
-  prompt: `You will be provided with a html markup of an article, and your task is to extract a list of possible genres of that article. Provide your output in json format as an array of objects with keys name and key, where name is a readble name of the genre and key - a short snake cased representation of genre name. Place the most relevant genre at the 0 index. In case you can't indentify the genre put an object { key: "${UNKNOWN_GENRE_KEY}", name: "Unknown" } as the last item in resulting array. Here is the text: ${text}.`,
+  prompt: `You will be provided with a html markup of an article, and your task is to extract a list of possible genres (no more than 5) of that article. Provide your output in json format as an array of objects with keys name and key, where name is a readble name of the genre and key - a short snake cased representation of genre name. Place the most relevant genre at the 0 index. In case you can't indentify the genre put an object { key: "${UNKNOWN_GENRE_KEY}", name: "Unknown" } as the last item in resulting array. Here is the text: ${text}.`,
 });
 
 export { getDetectArticleGenreCompletionConfig };

backend/src/packages/prompts/libs/enums/article-prompt-completion-config.enum.ts

@@ -1,6 +1,6 @@
 const ArticlePromptCompletionConfig = {
   MESSAGE:
-    'Your task is to generate a prompt for writing an article which will consist of the following components: genre, character, prop, situation and setting. You should generate a unique random value for each, so all of the elements create a consise and interesting article concept. Genre is any possible category of writing or literature. Provide your output in json format with the keys: genre, prop, character, situation, setting.',
+    'Your task is to generate a prompt for writing an article which will consist of the following components: genre, character, prop, situation and setting. You should generate a unique random value no longer than 4 words for each, so all of the elements create a consise and interesting article concept. Genre is any possible category of writing or literature. Provide your output in json format with the keys: genre, prop, character, situation, setting.',
   TEMPERATURE: 1.5,
 } as const;
 

frontend/index.html

@@ -2,8 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/feather-pen.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/png" href="/favicon.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#2e453b" />
+    <meta name="msapplication-TileColor" content="#da532c" />
+    <meta name="theme-color" content="#2e453b" />
     <title>Writorium</title>
   </head>
   <body>

frontend/package.json

@@ -58,6 +58,7 @@
     "stylelint-config-standard-scss": "10.0.0",
     "typescript-plugin-css-modules": "5.0.1",
     "vite": "4.4.9",
+    "vite-plugin-pwa": "0.16.5",
     "vite-plugin-rewrite-all": "1.0.1",
     "vite-plugin-svgr": "3.2.0",
     "vite-tsconfig-paths": "4.2.0"

frontend/public/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

frontend/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:

frontend/src/pages/article/article-page.tsx

@@ -68,7 +68,7 @@ const ArticlePage: React.FC = () => {
 
   useArticleRoom(Number(id));
 
-  useEffect(() => {
+  const scrollToComments = useCallback(() => {
     const { hash } = location;
     const element = hash ? document.querySelector(hash) : null;
 
@@ -81,13 +81,14 @@ const ArticlePage: React.FC = () => {
   }, [location]);
 
   useEffect(() => {
-    void dispatch(articleActions.getArticle(Number(id)));
+    void dispatch(articleActions.getArticle(Number(id))).then(scrollToComments);
+
     void dispatch(articleActions.fetchAllCommentsToArticle(Number(id)));
 
     return () => {
       void dispatch(articleActions.resetComments());
     };
-  }, [dispatch, id]);
+  }, [dispatch, id, scrollToComments]);
 
   const handleCreateComment = useCallback(
     (payload: Omit<CommentBaseRequestDto, 'articleId'>): void => {

frontend/src/pages/articles/components/article-card/article-card.tsx

@@ -191,7 +191,9 @@ const ArticleCard: React.FC<Properties> = ({
           <h4 className={styles.title}>{title}</h4>
           <article
             className={getValidClassNames(styles.text, 'text-overflow')}
-            dangerouslySetInnerHTML={{ __html: sanitizeHtml(text) }}
+            dangerouslySetInnerHTML={{
+              __html: sanitizeHtml(text),
+            }}
           ></article>
         </div>
         {coverUrl && (

frontend/src/pages/articles/components/article-card/styles.module.scss

@@ -102,6 +102,10 @@
   overflow-wrap: break-word;
 }
 
+.body .text * {
+  font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .coverWrapper {
   grid-area: cover;
   flex-shrink: 0;

frontend/src/pages/libs/components/confirm-article-delete-dialog/styles.module.scss

@@ -15,7 +15,7 @@ div.confirmModal {
 
 .message {
   margin-bottom: 20px;
-  padding: 24px 16px;
+  padding: 34px 24px 16px;
   font-size: 20px;
   border-bottom: 2px solid var(--light-gray-15);
 }

frontend/src/pages/profile/components/user-articles-genres-stats/user-articles-genres-stats.tsx

@@ -83,7 +83,7 @@ const UserArticlesGenresStats: React.FC<Properties> = ({ className }) => {
                   options={articleStatusOptions}
                   control={control}
                   errors={errors}
-                  isDisabled={!hasArticles}
+                  isDisabled={!hasArticles && !filters.articlePublishedStatus}
                 />
               </div>
             </form>

frontend/vite.config.ts

@@ -4,6 +4,37 @@ import tsconfigPathsPlugin from 'vite-tsconfig-paths';
 import svgr from 'vite-plugin-svgr';
 import path from 'path';
 import pluginRewriteAll from 'vite-plugin-rewrite-all';
+import { VitePWA, VitePWAOptions } from 'vite-plugin-pwa';
+
+const pwaOptions: Partial<VitePWAOptions> = {
+  registerType: 'autoUpdate',
+  includeAssets: ['favicon.ico', 'favicon.svg', 'apple-touch-icon.png'],
+  manifest: {
+    name: 'Writorium',
+    short_name: 'Writorium',
+    description: 'Unbounded space for freedom of your feather',
+    theme_color: '#2e453b',
+    start_url: '/',
+    icons: [
+      {
+        src: '/android-chrome-192x192.png',
+        sizes: '192x192',
+        type: 'image/png',
+      },
+      {
+        src: '/android-chrome-512x512.png',
+        sizes: '512x512',
+        type: 'image/png',
+      },
+      {
+        src: '/maskable_icon_x512.png',
+        sizes: '512x512',
+        type: 'image/png',
+        purpose: 'maskable',
+      },
+    ],
+  },
+};
 
 const config = ({ mode }: ConfigEnv): ReturnType<typeof defineConfig> => {
   const {
@@ -18,7 +49,13 @@ const config = ({ mode }: ConfigEnv): ReturnType<typeof defineConfig> => {
     build: {
       outDir: 'build',
     },
-    plugins: [tsconfigPathsPlugin(), reactPlugin(), svgr(), pluginRewriteAll()],
+    plugins: [
+      tsconfigPathsPlugin(),
+      reactPlugin(),
+      svgr(),
+      pluginRewriteAll(),
+      VitePWA(pwaOptions),
+    ],
     server: {
       port: Number(VITE_APP_DEVELOPMENT_PORT),
       proxy: {