most read fixes

elitan · Nov 10, 2023 · ac36db5 · ac36db5
1 parent 8fb52dd
commit ac36db5
Show file tree

Hide file tree

Showing 6 changed files with 117 additions and 107 deletions.
diff --git a/web/src/components/MostRead.tsx b/web/src/components/MostRead.tsx
@@ -0,0 +1,50 @@
+import { getServerSideProps } from '@/pages';
+import { languages } from '@/utils/helpers';
+import { InferGetServerSidePropsType } from 'next';
+import Link from 'next/link';
+
+interface Props {
+  popularArticles: InferGetServerSidePropsType<
+    typeof getServerSideProps
+  >['popularArticles'];
+}
+
+export function MostRead(props: Props) {
+  const { popularArticles } = props;
+
+  const mostReadTranslation = languages[popularArticles[0].language].mostRead;
+
+  return (
+    <div className="lg:col-span-4 mt-12 bg-gray-50 shadow-md p-4 self-start">
+      <div className="font-bold text-xl">{mostReadTranslation}</div>
+      <div className="space-y-4 mt-4 pt-4 border-t">
+        {popularArticles.map((article) => {
+          return (
+            <Link
+              href={`/${article.language}/${article.slug}`}
+              key={article.id}
+              className="space-x-4 flex"
+            >
+              <div
+                className={`border border-gray-200 rounded-md w-20 h-20 flex-shrink-0 `}
+                style={{
+                  backgroundImage: `url(${article.imageUrl})`,
+                  backgroundPosition: 'center',
+                  backgroundSize: 'cover',
+                }}
+              />
+              <div>
+                <div className="font-semibold font-serif group-hover:text-gray-500 text-sm">
+                  {article.title}
+                </div>
+                <div className="flex mr-6 mt-3">
+                  <p className="text-cyan-700 text-xs">{article.category}</p>
+                </div>
+              </div>
+            </Link>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/web/src/pages/[lang]/index.tsx b/web/src/pages/[lang]/index.tsx
@@ -5,6 +5,7 @@ import { db } from '@/utils/db';
 import type { InferGetServerSidePropsType } from 'next';
 import { type ParsedUrlQuery } from 'querystring';
 import Link from 'next/link';
+import { MostRead } from '@/components/MostRead';
 
 interface IParams extends ParsedUrlQuery {
   lang: string;
@@ -49,21 +50,24 @@ export async function getServerSideProps({ params }: { params: IParams }) {
   sevenDaysAgo.setDate(today.getDate() - 7); // subtract 7 days
 
   const popularArticles = await db
-    .selectFrom('articles')
-    .innerJoin('articleImages', 'articles.articleImageId', 'articleImages.id')
+    .selectFrom('articleTranslations as at')
+    .innerJoin('articles as a', 'a.id', 'at.articleId')
+    .innerJoin('articleImages as ai', 'a.articleImageId', 'ai.id')
     .select([
-      'articles.id',
-      'articles.createdAt',
-      'articles.title',
-      'articles.slug',
-      'articles.body',
-      'articles.category',
-      'articleImages.imageUrl',
+      'a.id',
+      'a.createdAt',
+      'at.title',
+      'at.slug',
+      'at.body',
+      'at.category',
+      'at.language',
+      'ai.imageUrl',
     ])
-    .where('title', 'is not', null)
-    .where('isPublished', '=', true)
-    .where('articles.createdAt', '>', sevenDaysAgo)
-    .orderBy('pageViews', 'desc')
+    .where('at.title', 'is not', null)
+    .where('at.isPublished', '=', true)
+    .where('at.language', '=', lang)
+    .where('at.createdAt', '>', sevenDaysAgo)
+    .orderBy('at.pageViews', 'desc')
     .limit(8)
     .execute();
 
@@ -101,39 +105,7 @@ const Page = (
             }
           })}
         </div>
-        <div className="lg:col-span-4 mt-12 bg-gray-50 shadow-md p-4 self-start">
-          <div className="font-bold text-xl">Most Read</div>
-          <div className="space-y-4 mt-4 pt-4 border-t">
-            {popularArticles.map((article) => {
-              return (
-                <Link
-                  href={`/${lang}/${article.slug}`}
-                  key={article.id}
-                  className="space-x-4 flex"
-                >
-                  <div
-                    className={`border border-gray-200 rounded-md w-20 h-20 flex-shrink-0 `}
-                    style={{
-                      backgroundImage: `url(${article.imageUrl})`,
-                      backgroundPosition: 'center',
-                      backgroundSize: 'cover',
-                    }}
-                  />
-                  <div>
-                    <div className="font-semibold font-serif group-hover:text-gray-500 text-sm">
-                      {article.title}
-                    </div>
-                    <div className="flex mr-6 mt-3">
-                      <p className="text-cyan-700 text-xs">
-                        {article.category}
-                      </p>
-                    </div>
-                  </div>
-                </Link>
-              );
-            })}
-          </div>
-        </div>
+        <MostRead popularArticles={popularArticles} />
       </div>
     </MainContainer>
   );

diff --git a/web/src/pages/index.tsx b/web/src/pages/index.tsx
@@ -1,11 +1,14 @@
 import { ArticleSummaryLarge } from '@/components/ArticleSummaryLarge';
 import { ArticleSummarySmall } from '@/components/ArticleSummarySmall';
 import { MainContainer } from '@/components/MainContainer';
+import { MostRead } from '@/components/MostRead';
 import { db } from '@/utils/db';
 import type { InferGetServerSidePropsType } from 'next';
 import Link from 'next/link';
 
-export const getServerSideProps = async () => {
+export async function getServerSideProps() {
+  const lang = 'en';
+
   const articles = await db
     .selectFrom('articleTranslations as at')
     .innerJoin('articles as a', 'a.id', 'at.articleId')
@@ -22,7 +25,7 @@ export const getServerSideProps = async () => {
     ])
     .where('at.title', 'is not', null)
     .where('at.isPublished', '=', true)
-    .where('at.language', '=', 'en')
+    .where('at.language', '=', lang)
     .orderBy('a.createdAt', 'desc')
     .limit(25)
     .execute();
@@ -35,21 +38,24 @@ export const getServerSideProps = async () => {
   sevenDaysAgo.setDate(today.getDate() - 7); // subtract 7 days
 
   const popularArticles = await db
-    .selectFrom('articles')
-    .innerJoin('articleImages', 'articles.articleImageId', 'articleImages.id')
+    .selectFrom('articleTranslations as at')
+    .innerJoin('articles as a', 'a.id', 'at.articleId')
+    .innerJoin('articleImages as ai', 'a.articleImageId', 'ai.id')
     .select([
-      'articles.id',
-      'articles.createdAt',
-      'articles.title',
-      'articles.slug',
-      'articles.body',
-      'articles.category',
-      'articleImages.imageUrl',
+      'a.id',
+      'a.createdAt',
+      'at.title',
+      'at.slug',
+      'at.body',
+      'at.category',
+      'at.language',
+      'ai.imageUrl',
     ])
-    .where('title', 'is not', null)
-    .where('isPublished', '=', true)
-    .where('articles.createdAt', '>', sevenDaysAgo)
-    .orderBy('pageViews', 'desc')
+    .where('at.title', 'is not', null)
+    .where('at.isPublished', '=', true)
+    .where('at.language', '=', lang)
+    .where('at.createdAt', '>', sevenDaysAgo)
+    .orderBy('at.pageViews', 'desc')
     .limit(8)
     .execute();
 
@@ -59,7 +65,7 @@ export const getServerSideProps = async () => {
       popularArticles,
     },
   };
-};
+}
 
 function HeaderIndex({
   articles,
@@ -150,39 +156,7 @@ const Page = (
             }
           })}
         </div>
-        <div className="lg:col-span-4 mt-12 bg-gray-50 shadow-md p-4 self-start">
-          <div className="font-bold text-xl">Most Read</div>
-          <div className="space-y-4 mt-4 pt-4 border-t">
-            {popularArticles.map((article) => {
-              return (
-                <Link
-                  href={`/en/${article.slug}`}
-                  key={article.id}
-                  className="space-x-4 flex"
-                >
-                  <div
-                    className={`border border-gray-200 rounded-md w-20 h-20 flex-shrink-0 `}
-                    style={{
-                      backgroundImage: `url(${article.imageUrl})`,
-                      backgroundPosition: 'center',
-                      backgroundSize: 'cover',
-                    }}
-                  />
-                  <div>
-                    <div className="font-semibold font-serif group-hover:text-gray-500 text-sm">
-                      {article.title}
-                    </div>
-                    <div className="flex mr-6 mt-3">
-                      <p className="text-cyan-700 text-xs">
-                        {article.category}
-                      </p>
-                    </div>
-                  </div>
-                </Link>
-              );
-            })}
-          </div>
-        </div>
+        <MostRead popularArticles={popularArticles} />
       </div>
     </MainContainer>
   );

diff --git a/web/src/utils/helpers.ts b/web/src/utils/helpers.ts
@@ -30,44 +30,53 @@ export function isAllowedAdminUserId(userId: string) {
 interface LanguageProps {
   name: string;
   slogan: string;
+  mostRead: string;
   rtl?: boolean;
 }
 
 export const languages: Record<string, LanguageProps> = {
   en: {
     name: 'English',
     slogan: 'Swedish news in English',
+    mostRead: 'Most read',
   },
   fi: {
     name: 'Finnish',
     slogan: 'Ruotsin uutisia suomeksi',
+    mostRead: 'Luetuimmat',
   },
   ar: {
     name: 'Arabic',
     slogan: 'الأخبار السويدية باللغة العربية',
     rtl: true,
+    mostRead: 'الأكثر قراءة',
   },
   ru: {
     name: 'Russian',
     slogan: 'Шведские новости на русском языке',
+    mostRead: 'самый читаемый',
   },
   uk: {
     name: 'Ukrainian',
     slogan: 'Шведські новини українською',
+    mostRead: 'найчитаніший',
   },
   ckb: {
     name: 'Kurdish',
     slogan: 'هەواڵی سویدی بە زمانی کوردی',
     rtl: true,
+    mostRead: 'زۆربەیان دەخوێننەوە',
   },
   fa: {
     name: 'Persian',
     slogan: 'اخبار سوئدی به زبان فارسی',
     rtl: true,
+    mostRead: 'بیشترین خوانده شده',
   },
   so: {
     name: 'Somali',
     slogan: 'Wararka Swedishka ee Soomaaliga',
+    mostRead: 'inta badan akhriska',
   },
   // es: {
   //   name: 'Spanish',

diff --git a/worker/run.sh b/worker/run.sh
@@ -4,9 +4,9 @@ while true; do
     pnpm start
     pnpm transcribe
     pnpm openai
+    # pnpm translate
     pnpm images
-    pnpm tts
-    # pnpm elevenlabs (out of tokens)
+    # pnpm tts
     for (( i=1200; i>=0; i-- )); do
         echo "$i"
         sleep 1

diff --git a/worker/src/4-openai-images.ts b/worker/src/4-openai-images.ts
@@ -31,17 +31,22 @@ async function main() {
 
     console.log('Generating image for article', article.id);
 
-    const image = await openai.images.generate({
-      model: 'dall-e-3',
-      prompt: `${article.imagePrompt}. This is related to Sweden`,
-      response_format: 'b64_json',
-      n: 1,
-      quality: 'standard',
-      size: '1792x1024',
-      style: 'vivid',
-    });
+    const image = await openai.images
+      .generate({
+        model: 'dall-e-3',
+        prompt: `${article.imagePrompt}. This is related to Sweden`,
+        response_format: 'b64_json',
+        n: 1,
+        quality: 'standard',
+        size: '1792x1024',
+        style: 'vivid',
+      })
+      .catch((e) => {
+        console.log('Failed to generate image', e);
+        return null;
+      });
 
-    if (!image.data[0].b64_json) {
+    if (!image?.data[0].b64_json) {
       console.log('No image found for article', article.id);
       continue;
     }