feat: adding index html

.gitignore

@@ -85,3 +85,7 @@ bit.json
 
 # turbo
 .turbo
+
+# feeds articles
+
+apps/feeds/public/feeds/

.gitmodules

@@ -1,3 +1,3 @@
 [submodule "apps/feeds/public/feeds"]
 	path = apps/feeds/public/feeds
-	url = https://github.com/wasedatime/feeds.git
+	url = git@github.com:wasedatime/feeds.git

apps/feeds/next.config.js

@@ -8,17 +8,18 @@ const nextConfig = {
     config.module.rules.push({
       test: /\.md$/,
       use: "raw-loader",
-    });
-    return config;
+    })
+    return config
   },
   images: {
-    unoptimized: true
+    unoptimized: true,
   },
-  assetPrefix: process.env.APP_ENV === 'production' ? "/feeds" : "",
+  assetPrefix: process.env.APP_ENV === "production" ? "/feeds" : "",
   env: {
-    APP_ENV: process.env.APP_ENV || 'development',
-    MF_FEEDS_DOMAIN: process.env.MF_FEEDS_DOMAIN || ''
-  }
+    APP_ENV: process.env.APP_ENV || "development",
+    MF_FEEDS_DOMAIN: process.env.MF_FEEDS_DOMAIN || "",
+  },
+  distDir: "dist",
 }
 
 module.exports = nextConfig

apps/feeds/tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -15,11 +19,25 @@
     "jsx": "preserve",
     "incremental": true,
     "baseUrl": ".",
-    "plugins": [{ "name": "next" }],
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
     "paths": {
-      "@/*": ["./*"]
+      "@/*": [
+        "./*"
+      ]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    "dist/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }

apps/forum/src/components/App.tsx

@@ -119,7 +119,7 @@ const InnerApp = () => {
               <Route element={<NotFound />} path="*" />
             </Routes>
           </div>
-          <div className="flex flex-col sm:w-1/5 ">
+          <div className="flex flex-col lg:w-1/5 ">
             <div className="hidden md:h-[500px] md:w-[250px] justify-self-end">
               <h1></h1>
             </div>

apps/forum/src/components/Board.tsx

@@ -132,7 +132,7 @@ const Board = ({ triggerRefresh, setBoard }: any) => {
 
   return (
     // <div className="max-w-2/5 w-5/6 mx-auto h-full">
-    <div className="mx-auto rounded-xl shadow-lg px-2 h-full lg:w-5/6 max-w-[5/6] standard-style">
+    <div className="mx-auto px-2 h-full lg:w-5/6 max-w-[5/6] standard-style">
       <CreateThread onNewThread={handleNewThread} />
       <div
         className="overflow-auto h-[calc(100%-44px)] mt-4 md:mt-8 lg:mt-12"

apps/forum/src/components/Comment.tsx

@@ -129,14 +129,15 @@ const Comment = ({ comment, thread, setComments, setThread }: Props) => {
   };
 
   const time = timeFormatter(comment);
-  console.log(comment);
 
   return (
     <Block actions={actions}>
       <div className="border-2 rounded-xl px-4 py-2 text-light-text2 mt-4 standard-style flex flex-row justify-between items-center">
         <div>
-          <h2 className="text-2xl p-2">{convertUrlsToLinks(comment.body)}</h2>
-          <h2 className="text-xs my-auto">Posted at {time}</h2>
+          <h2 className="text-2xl p-2 text-left">
+            {convertUrlsToLinks(comment.body)}
+          </h2>
+          <h2 className="text-sm my-auto p-2">{time}</h2>
         </div>
         {comment.mod === true && (
           <div className="justify-end">

apps/forum/src/components/CreateThread.tsx

@@ -272,12 +272,12 @@ const CreateThread = ({ onNewThread }: CreateThreadProps) => {
           onChange={handleBodyChange}
         />
       </div>
-      <h1
+      <button
         className="absolute top-0 right-2 m-1 p-1 hover:text-light-main cursor-pointer"
         onClick={() => setIsExpanded(false)}
       >
         <CloseIcon />
-      </h1>
+      </button>
       <div className="absolute bottom-0 left-2 w-full flex mb-3 mt-3 text-sm justify-between">
         <div className="my-auto flex flex-row gap-x-2">
           {/* {selectedBoard && (

apps/forum/src/components/Thread.tsx

@@ -37,7 +37,6 @@ const Thread = () => {
         headers: {
           "x-api-key": "0PaO2fHuJR9jlLLdXEDOyUgFXthoEXv8Sp0oNsb8",
           "Content-Type": "application/json",
-          // Authorization: idToken,
         },
         response: true,
       }
@@ -78,7 +77,7 @@ const Thread = () => {
   };
 
   return (
-    <div className="border-2 mt-12 mx-auto rounded-xl shadow-lg py-6 h-fit px-4 standard-style max-w-2/5 w-5/6">
+    <div className="border-2 mt-12 mx-1 md:mx-auto rounded-xl shadow-lg py-6 h-fit px-4 standard-style max-w-[290px] lg:max-w-[900px]">
       {/* <CreateThread /> */}
 
       <ThreadBlock isPreview={false} thread={thread} />

apps/forum/src/components/ThreadBlock.tsx

@@ -204,10 +204,11 @@ const ThreadBlock = ({ isPreview, fromRoot, thread, onDelete }: Props) => {
         {/* ^ This line goes to parent board on click while in thread */}
         <div className={`px-2`}>
           <div className="flex justify-between mt-2">
-            <div className="flex items-center justify-center mb-auto gap-x-4">
+            <div className="flex items-center text-center justify-center mb-auto gap-x-4">
               <h1 className="text-4xl font-bold  text-light-main dark:text-dark-main text-3xl">
                 {getTitleBySlug(thread.board_id)}
               </h1>
+              <h2 className="text-lg">{time}</h2>
 
               <ImageIcon
                 color={thread.obj_key || thread.url ? "success" : "inherit"}
@@ -237,6 +238,7 @@ const ThreadBlock = ({ isPreview, fromRoot, thread, onDelete }: Props) => {
                   ) */}
             </div>
           </div>
+
           {thread.url ? (
             <img
               src={thread.url}
@@ -250,7 +252,6 @@ const ThreadBlock = ({ isPreview, fromRoot, thread, onDelete }: Props) => {
           >
             {convertUrlsToLinks(isPreview, thread.body)}
           </h2>
-          <h2 className="text-lg mt-5">Posted at {time}</h2>
         </div>
         {/* <div className="inline-block text-blue-600 rounded-lg pl-2 pt-2">
               {" "}

apps/forum/src/components/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/wasedatime-forum.ts"></script>
+  </body>
+</html>

apps/forum/src/utils/timeFormatter.tsx

@@ -6,23 +6,25 @@ type threadOrComment = CommentType | ThreadType;
 export function timeFormatter(newComment: threadOrComment): string {
   const utcTimestamp = newComment.created_at;
   const date = new Date(utcTimestamp);
+  const now = new Date(); // Get the current date and time
 
-  // Add 9 hours to UTC time
+  // Convert both to JST
   date.setUTCHours(date.getUTCHours() + 9);
+  now.setUTCHours(now.getUTCHours() + 9);
 
-  // Extract year, month, date, hours, and minutes
-  const year = date.getUTCFullYear();
-  const month = date.getUTCMonth() + 1; // Months are 0-based, so add 1
-  const day = date.getUTCDate();
-  const hours = date.getUTCHours();
-  const minutes = date.getUTCMinutes();
+  // Calculate time difference in milliseconds
+  const diff = now.getTime() - date.getTime();
 
-  // Format the components as a string
-  const formattedTimestamp = `${year}-${month.toString().padStart(2, "0")}-${day
-    .toString()
-    .padStart(2, "0")} ${hours.toString().padStart(2, "0")}:${minutes
-    .toString()
-    .padStart(2, "0")}`;
+  // Convert to minutes and hours
+  const minutesDiff = Math.floor(diff / 60000); // 60 * 1000
+  const hoursDiff = Math.floor(minutesDiff / 60);
 
-  return formattedTimestamp;
+  if (minutesDiff < 60) {
+    return minutesDiff === 1 ? "1 minute ago" : `${minutesDiff} minutes ago`;
+  } else if (hoursDiff < 24) {
+    return hoursDiff === 1 ? "1 hour ago" : `${hoursDiff} hours ago`;
+  } else {
+    const daysDiff = Math.floor(hoursDiff / 24);
+    return daysDiff === 1 ? "1 day ago" : `${daysDiff} days ago`;
+  }
 }

apps/root/src/components/frame/Nav.tsx

@@ -90,18 +90,18 @@ const Nav = () => {
       icon: <ForumIcon />,
       iconHovered: <ForumIconHovered />,
     },
-    {
-      name: t("navigation.campus"),
-      path: "/campus",
-      icon: <CampusIcon />,
-      iconHovered: <CampusIconHovered />,
-    },
-    {
-      name: t("navigation.feeds"),
-      path: "/feeds",
-      icon: <FeedsIcon />,
-      iconHovered: <FeedsIconHovered />,
-    },
+    // {
+    //   name: t("navigation.campus"),
+    //   path: "/campus",
+    //   icon: <CampusIcon />,
+    //   iconHovered: <CampusIconHovered />,
+    // },
+    // {
+    //   name: t("navigation.feeds"),
+    //   path: "/feeds",
+    //   icon: <FeedsIcon />,
+    //   iconHovered: <FeedsIconHovered />,
+    // },
   ]
 
   return (

packages/ui/lib/base/Modal.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type ModalProps = {
     isOpen: boolean;
     children: any;
@@ -8,5 +7,5 @@ type ModalProps = {
     className?: string;
     onRequestClose?: () => void;
 };
-export declare const Modal: ({ isOpen, children, closeTimeoutMS, style, overlayClassName, className, onRequestClose, }: ModalProps) => JSX.Element;
+export declare const Modal: ({ isOpen, children, closeTimeoutMS, style, overlayClassName, className, onRequestClose, }: ModalProps) => import("react/jsx-runtime").JSX.Element;
 export default Modal;

packages/ui/lib/icons/CrossIcon.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
-export declare const CrossIcon: () => JSX.Element;
+export declare const CrossIcon: () => import("react/jsx-runtime").JSX.Element;

packages/ui/lib/icons/GoogleIcon.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
-export declare const GoogleIcon: () => JSX.Element;
+export declare const GoogleIcon: () => import("react/jsx-runtime").JSX.Element;

packages/ui/lib/layout/Header.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ThemeType } from '../constants/type/theme';
 type HeaderProps = {
     title: string;
@@ -11,5 +10,5 @@ type HeaderProps = {
     theme?: ThemeType;
     setTheme: (theme: ThemeType) => void;
 };
-export declare const Header: ({ title, onInputChange, placeholder, inputText, disabled, isBlur, changeLang, theme, setTheme, }: HeaderProps) => JSX.Element;
+export declare const Header: ({ title, onInputChange, placeholder, inputText, disabled, isBlur, changeLang, theme, setTheme, }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

packages/ui/lib/layout/LanguageMenu.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import { ThemeType } from '../constants/type/theme';
 interface LanguageMenuProps {
     theme: ThemeType;
     changeLang: (lang: string) => void;
 }
-export declare const LanguageMenu: ({ theme, changeLang }: LanguageMenuProps) => JSX.Element;
+export declare const LanguageMenu: ({ theme, changeLang }: LanguageMenuProps) => import("react/jsx-runtime").JSX.Element;
 export {};

packages/ui/lib/layout/LoadingSpinner.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import { ThemeType } from '../constants/type/theme';
 interface LoadingSpinnerProps {
     message: string;
     theme: ThemeType;
 }
-export declare const LoadingSpinner: ({ message, theme }: LoadingSpinnerProps) => JSX.Element;
+export declare const LoadingSpinner: ({ message, theme }: LoadingSpinnerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

packages/ui/lib/layout/SignInModal.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import { WithTranslation } from "react-i18next";
 interface Props extends WithTranslation {
     isModalOpen: boolean;
     closeModal: () => void;
 }
-declare const SignInModal: ({ isModalOpen, closeModal, t }: Props) => JSX.Element;
+declare const SignInModal: ({ isModalOpen, closeModal, t }: Props) => import("react/jsx-runtime").JSX.Element;
 export default SignInModal;

packages/ui/lib/layout/ThemeToggle.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import { ThemeType } from '../constants/type/theme';
 interface ThemeToggleProps {
     theme: ThemeType;
     setTheme: (theme: ThemeType) => void;
 }
-export declare const ThemeToggle: ({ theme, setTheme }: ThemeToggleProps) => JSX.Element;
+export declare const ThemeToggle: ({ theme, setTheme }: ThemeToggleProps) => import("react/jsx-runtime").JSX.Element;
 export {};

packages/ui/lib/theme/Logo.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-export declare const Logo: () => JSX.Element;
-export declare const LogoJp: () => JSX.Element;
-export declare const SmallLogo: () => JSX.Element;
-export declare const SmallLogoJp: () => JSX.Element;
+export declare const Logo: () => import("react/jsx-runtime").JSX.Element;
+export declare const LogoJp: () => import("react/jsx-runtime").JSX.Element;
+export declare const SmallLogo: () => import("react/jsx-runtime").JSX.Element;
+export declare const SmallLogoJp: () => import("react/jsx-runtime").JSX.Element;