✨ setup remark and render the readme as the home page

setup remark and render the readme as the home page

✨ New feature

README.md

@@ -18,7 +18,7 @@ npx degit TimMikeladze/next-apollo-joy-starter my-app
 yarn && yarn dev
 ```
 
-❗Important note: This project uses [yarn](https://yarnpkg.com/) for managing dependencies. If you want to use another package manager, remove the `yarn.lock` and control-f for usages of `yarn` in the project and replace them with your package manager of choice.
+> ❗ Important note: This project uses [yarn](https://yarnpkg.com/) for managing dependencies. If you want to use another package manager, remove the `yarn.lock` and control-f for usages of `yarn` in the project and replace them with your package manager of choice.
 
 ## What's included?
 

package.json

@@ -80,6 +80,8 @@
     "react-hook-form": "7.41.2",
     "react-hot-toast": "2.4.0",
     "react-i18next": "12.1.1",
+    "remark": "14.0.2",
+    "remark-html": "15.0.1",
     "unfetch": "4.2.0"
   },
   "devDependencies": {

public/locales/en/common.json

@@ -4,13 +4,9 @@
   "signIn": "Sign in",
   "signIntoApp": "Sign into {{ appName }}",
   "signOut": "Sign out",
-  "turnDark": "Turn dark",
-  "turnLight": "Turn light",
   "switchToLightMode": "Switch to light mode",
   "switchToDarkMode": "Switch to dark mode",
   "home": "Home",
-  "helloThere": "\uD83D\uDC4B Hello there!",
-  "learnMore": "Learn more about this project at: {{ url }}",
   "learnMoreUrl": "https://github.com/TimMikeladze/next-apollo-joy-starter",
   "providers" : {
     "github": "GitHub"

src/components/AppPage.tsx

@@ -1,14 +1,22 @@
-import { Box, Button, Divider, Sheet, Stack, Typography } from '@mui/joy';
+import {
+  Box,
+  Button,
+  Divider,
+  IconButton,
+  Sheet,
+  Stack,
+  Typography,
+} from '@mui/joy';
 import { PropsWithChildren, useState } from 'react';
 import { useTranslation } from 'next-i18next';
 import ThemeModeToggle from './ThemeModeToggle';
 import { useSession } from 'next-auth/react';
 import Link from 'next/link';
 import Head from 'next/head';
-
 import UserMenu from './UserMenu';
 import { getHomeRoute } from '@/util/routes';
 import dynamic from 'next/dynamic';
+import { GitHub } from '@mui/icons-material';
 
 const AppToaster = dynamic(() => import(`@/components/AppToaster`), {
   ssr: true,
@@ -28,9 +36,9 @@ const AppPage = (props: PropsWithChildren) => {
         <title>{t(`appName`)}</title>
       </Head>
       <Sheet
-        sx={() => ({
-          height: `100vh`,
-        })}
+        sx={{
+          minHeight: `100vh`,
+        }}
       >
         <AppToaster />
         <SignInDialog
@@ -55,12 +63,7 @@ const AppPage = (props: PropsWithChildren) => {
                   p: 2,
                 })}
               >
-                <Stack
-                  direction="row"
-                  flexWrap="wrap"
-                  spacing={1}
-                  alignItems="center"
-                >
+                <Stack direction="row" flexWrap="wrap" alignItems="center">
                   <Link href={getHomeRoute()}>
                     <Typography
                       level="h4"
@@ -75,6 +78,16 @@ const AppPage = (props: PropsWithChildren) => {
                   <Box sx={{ flex: 1 }} />
 
                   <ThemeModeToggle />
+
+                  <IconButton
+                    onClick={() => {
+                      window.open(t(`learnMoreUrl`), `_blank`);
+                    }}
+                    variant="plain"
+                  >
+                    <GitHub />
+                  </IconButton>
+
                   {session.status !== `authenticated` && (
                     <>
                       <Button onClick={() => setSignInDialogOpen(true)}>

src/pages/index.tsx

@@ -1,29 +1,44 @@
 import { GetStaticProps } from 'next';
-import { Stack, Typography } from '@mui/joy';
-import Link from 'next/link';
-import { useTranslation } from 'next-i18next';
+import { Stack } from '@mui/joy';
 import { withTranslations } from '@/util/i18n/withTranslations';
+import { join } from 'path';
+import { readFileSync } from 'fs';
+import { remark } from 'remark';
+import html from 'remark-html';
 
-const Home = () => {
-  const { t } = useTranslation();
+export interface HomePageProps {
+  contentHtml: string;
+}
+
+const HomePage = (props: HomePageProps) => {
   return (
     <Stack spacing={1}>
-      <Typography level="h5">{t(`helloThere`)}</Typography>
-      <Typography level="body2">
-        <Link href="https://github.com/TimMikeladze/next-apollo-joy-starter">
-          {t(`learnMore`, {
-            url: t(`learnMoreUrl`),
-          })}
-        </Link>
-      </Typography>
+      <div dangerouslySetInnerHTML={{ __html: props.contentHtml }} />
     </Stack>
   );
 };
 
-export default Home;
+export default HomePage;
+
+export const getStaticProps: GetStaticProps = withTranslations(async () => {
+  const fullPath = join(`.`, `README.md`);
+  let fileContents = readFileSync(fullPath, `utf8`);
+
+  fileContents = fileContents
+    .split(
+      `
+`,
+    )
+    .splice(2, fileContents.length)
+    .join(`\n`);
+
+  const processedContent = await remark().use(html).process(fileContents);
+
+  const contentHtml = processedContent.toString();
 
-export const getStaticProps: GetStaticProps = withTranslations(() => {
   return {
-    props: {},
+    props: {
+      contentHtml,
+    },
   };
 });