new style

elitan · Oct 5, 2023 · 1d91513 · 1d91513
1 parent 4a99226
commit 1d91513
Show file tree

Hide file tree

Showing 8 changed files with 84 additions and 31 deletions.
diff --git a/web/package.json b/web/package.json
@@ -34,7 +34,7 @@
     "eslint": "8.46.0",
     "eslint-config-next": "13.4.12",
     "fb": "^2.0.0",
-    "kysely": "^0.26.1",
+    "kysely": "^0.26.3",
     "kysely-codegen": "^0.10.1",
     "next": "13.4.12",
     "next-plausible": "^3.10.2",

diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
diff --git a/web/src/components/ArticleSummaryLarge.tsx b/web/src/components/ArticleSummaryLarge.tsx
@@ -20,23 +20,20 @@ export function ArticleSummaryLarge({ article }: { article: any }) {
   return (
     <div
       key={article.id}
-      className={`flex my-2 space-x-4 md:col-span-1 col-span-2 border-b-2 border-gray-200 py-2`}
+      className={`flex space-x-4 md:col-span-1 col-span-2 border-b-1 border-gray-200 my-0 py-0 `}
     >
-      <Link
-        className="w-full rounded-lg p-1 "
-        href={`/nyheter/${article.slug}`}
-      >
+      <Link className="w-full" href={`/nyheter/${article.slug}`}>
         <div
-          className={`border border-gray-200 rounded-md h-64`}
+          className={`border border-gray-200 h-80`}
           style={{
             backgroundImage: `url(${article.imageUrl})`,
             backgroundPosition: 'center',
             backgroundSize: 'cover',
           }}
         />
 
-        <div className="py-3">
-          <h1 className="w-full text-3xl lg:text-4xl mb-1 font-semibold font-serif">
+        <div className="p-4">
+          <h1 className="w-full text-2xl lg:text-4xl mb-1 font-semibold font-serif">
             {article.title}
           </h1>
           <p className="text-gray-700 line-clamp-2 font-serif">{summary}</p>

diff --git a/web/src/components/ArticleSummarySmall.tsx b/web/src/components/ArticleSummarySmall.tsx
@@ -20,18 +20,18 @@ export function ArticleSummarySmall({ article }: { article: any }) {
   return (
     <div
       key={article.id}
-      className={`flex space-x-4 md:col-span-1 col-span-2 py-1 lg:py-4 group`}
+      className={`flex space-x-4 md:col-span-1 col-span-2 py-1 lg:py-4 group px-4`}
     >
       <Link
         className="w-full rounded-lg p-1 flex justify-between space-x-4 items-start"
         href={`/nyheter/${article.slug}`}
       >
-        <div className="py-1 lg:py-3">
+        <div className="py-1 lg:py-2">
           <h1 className="w-full text-lg lg:text-xl mb-1 font-semibold font-serif group-hover:text-gray-500">
             {article.title}
           </h1>
           <p className="text-gray-700 line-clamp-2 font-serif">{summary}</p>
-          <div className="flex mr-6 mt-3 ">
+          <div className="flex mr-6 mt-3">
             <div>
               <p className="text-gray-500 text-xs">
                 {renderAgo(article.createdAt as Date)}

diff --git a/web/src/components/Layout.tsx b/web/src/components/Layout.tsx
@@ -33,7 +33,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
     <>
       {/* <TopBanner /> */}
       <div className="bg-slate-200">
-        <div className="bg-white">
+        <div className="bg-white top-0 sticky">
           <MainContainer>
             <div className="flex flex-col md:flex-row space-y-4 text-left justify-between py-4 items-center">
               <Link className="space-x-4 flex items-center" href="/">

diff --git a/web/src/components/MainContainer.tsx b/web/src/components/MainContainer.tsx
@@ -7,7 +7,7 @@ interface Props {
 export function MainContainer(props: Props) {
   const { children, className } = props;
 
-  const classNames = twMerge(`max-w-6xl mx-auto px-2`, className);
+  const classNames = twMerge(`max-w-5xl mx-auto px-2`, className);
 
   return <div className={classNames}>{children}</div>;
 }
diff --git a/web/src/pages/index.tsx b/web/src/pages/index.tsx
@@ -24,11 +24,36 @@ export const getServerSideProps = async () => {
     .limit(25)
     .execute();
 
+  let today = new Date(); // get the current date
+  let sevenDaysAgo = new Date(today); // create a copy of the current date
+
+  sevenDaysAgo.setDate(today.getDate() - 7); // subtract 7 days
+
+  const popularArticles = await db
+    .selectFrom('articles')
+    .innerJoin('articleImages', 'articles.articleImageId', 'articleImages.id')
+    .select([
+      'articles.id',
+      'articles.createdAt',
+      'articles.title',
+      'articles.slug',
+      'articles.body',
+      'articles.category',
+      'articleImages.imageUrl',
+    ])
+    .where('title', 'is not', null)
+    .where('isPublished', '=', true)
+    .where('articles.createdAt', '>', sevenDaysAgo)
+    .orderBy('pageViews', 'desc')
+    .limit(8)
+    .execute();
+
   console.log(articles);
 
   return {
     props: {
       articles,
+      popularArticles,
     },
   };
 };
@@ -101,17 +126,17 @@ const Page = (
   props: InferGetServerSidePropsType<typeof getServerSideProps>,
 ) => {
   // get first three articles
-  const firstThreeArticles = props.articles.slice(0, 3);
+  // const firstThreeArticles = props.articles.slice(0, 3);
 
-  const remainingArticles = props.articles.slice(3);
+  const { articles, popularArticles } = props;
 
   return (
     <MainContainer>
-      <HeaderIndex articles={firstThreeArticles} />
-      <div className="grid grid-cols-11">
-        <div className="col-span-11 lg:col-span-7 lg:col-start-3 bg-gray-50 shadow-md p-4 mb-12 divide-y divide-slate-200 first:pt-0 last:pb-0">
-          {remainingArticles.map((article, i) => {
-            if (i !== 0 && i % 5 === 0) {
+      {/* <HeaderIndex articles={firstThreeArticles} /> */}
+      <div className="grid grid-cols-11 gap-6">
+        <div className="col-span-11 lg:col-span-7 bg-gray-50 shadow-md mb-12 divide-y divide-slate-200 last:pb-0 mt-12">
+          {articles.map((article, i) => {
+            if (i % 5 === 0) {
               return (
                 <ArticleSummaryLarge article={article} key={article.slug} />
               );
@@ -122,8 +147,39 @@ const Page = (
             }
           })}
         </div>
-
-        <div className="hidden">asd</div>
+        <div className="lg:col-span-4 mt-12 bg-gray-50 shadow-md p-4 self-start">
+          <div className="font-bold text-xl">Mest lästa</div>
+          <div className="space-y-4 mt-4 pt-4 border-t">
+            {popularArticles.map((article) => {
+              return (
+                <Link
+                  href={`/nyheter/${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>
       </div>
     </MainContainer>
   );

diff --git a/web/src/utils/helpers.ts b/web/src/utils/helpers.ts
@@ -16,7 +16,7 @@ export function renderAgo(date: Date) {
   } else if (minutes < 60 * 24 * 2) {
     return `Yesterday`;
   } else {
-    return format(date, 'd MMMM, HH:mm');
+    return format(date, `d MMMM, HH:mm`);
   }
 }