aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/config/seo.ts8
-rw-r--r--src/pages/index.tsx80
-rw-r--r--src/services/graphql/client.ts12
-rw-r--r--src/services/graphql/homepage.ts36
-rw-r--r--src/styles/Home.module.css116
-rw-r--r--src/styles/base/_typography.scss9
-rw-r--r--src/ts/types/app.ts2
-rw-r--r--src/ts/types/homepage.ts19
8 files changed, 100 insertions, 182 deletions
diff --git a/src/config/seo.ts b/src/config/seo.ts
new file mode 100644
index 0000000..afccfe5
--- /dev/null
+++ b/src/config/seo.ts
@@ -0,0 +1,8 @@
+import { t } from '@lingui/macro';
+
+export const seo = {
+ homepage: {
+ title: t`Armand Philippot | Front-end developer`,
+ description: t`Armand Philippot is a front-end developer located in France. He codes, he writes and he plays. Discover is website.`,
+ },
+};
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 615fe0a..6654617 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,75 +1,22 @@
+import type { ReactElement } from 'react';
+import { GetStaticProps } from 'next';
+import Head from 'next/head';
import Layout from '@components/Layouts/Layout';
+import { seo } from '@config/seo';
+import { getHomePage } from '@services/graphql/homepage';
import { NextPageWithLayout } from '@ts/types/app';
+import { HomePage, HomePageProps } from '@ts/types/homepage';
import { loadTranslation } from '@utils/helpers/i18n';
-import { GetStaticProps } from 'next';
-import Head from 'next/head';
-import Image from 'next/image';
-import type { ReactElement } from 'react';
-import styles from '../styles/Home.module.css';
-const Home: NextPageWithLayout = () => {
+const Home: NextPageWithLayout<HomePageProps> = ({ data }) => {
return (
- <div className={styles.container}>
+ <>
<Head>
- <title>Create Next App</title>
- <meta name="description" content="Generated by create next app" />
- <link rel="icon" href="/favicon.ico" />
+ <title>{seo.homepage.title}</title>
+ <meta name="description" content={seo.homepage.description} />
</Head>
-
- <main className={styles.main}>
- <h1 className={styles.title}>
- Welcome to <a href="https://nextjs.org">Next.js!</a>
- </h1>
-
- <p className={styles.description}>
- Get started by editing{' '}
- <code className={styles.code}>pages/index.tsx</code>
- </p>
-
- <div className={styles.grid}>
- <a href="https://nextjs.org/docs" className={styles.card}>
- <h2>Documentation &rarr;</h2>
- <p>Find in-depth information about Next.js features and API.</p>
- </a>
-
- <a href="https://nextjs.org/learn" className={styles.card}>
- <h2>Learn &rarr;</h2>
- <p>Learn about Next.js in an interactive course with quizzes!</p>
- </a>
-
- <a
- href="https://github.com/vercel/next.js/tree/master/examples"
- className={styles.card}
- >
- <h2>Examples &rarr;</h2>
- <p>Discover and deploy boilerplate example Next.js projects.</p>
- </a>
-
- <a
- href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
- className={styles.card}
- >
- <h2>Deploy &rarr;</h2>
- <p>
- Instantly deploy your Next.js site to a public URL with Vercel.
- </p>
- </a>
- </div>
- </main>
-
- <footer className={styles.footer}>
- <a
- href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
- target="_blank"
- rel="noopener noreferrer"
- >
- Powered by{' '}
- <span className={styles.logo}>
- <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
- </span>
- </a>
- </footer>
- </div>
+ <div dangerouslySetInnerHTML={{ __html: data.content }}></div>
+ </>
);
};
@@ -83,8 +30,11 @@ export const getStaticProps: GetStaticProps = async (ctx) => {
process.env.NODE_ENV === 'production'
);
+ const data: HomePage = await getHomePage();
+
return {
props: {
+ data,
translation,
},
};
diff --git a/src/services/graphql/client.ts b/src/services/graphql/client.ts
new file mode 100644
index 0000000..160021b
--- /dev/null
+++ b/src/services/graphql/client.ts
@@ -0,0 +1,12 @@
+import { GraphQLClient } from 'graphql-request';
+
+export const getGraphQLClient = () => {
+ const apiUrl: string = process.env.NEXT_PUBLIC_GRAPHQL_API || '';
+ console.log(apiUrl);
+
+ if (!apiUrl) throw new Error('API URL not defined.');
+
+ const graphQLClient = new GraphQLClient(apiUrl);
+
+ return graphQLClient;
+};
diff --git a/src/services/graphql/homepage.ts b/src/services/graphql/homepage.ts
new file mode 100644
index 0000000..6ea71ac
--- /dev/null
+++ b/src/services/graphql/homepage.ts
@@ -0,0 +1,36 @@
+import { gql } from 'graphql-request';
+import {
+ fetchHomePageReturn,
+ getHomePageReturn,
+ HomePage,
+ HomePageResponse,
+} from '@ts/types/homepage';
+import { getGraphQLClient } from './client';
+
+export const fetchHomepage: fetchHomePageReturn = async () => {
+ const client = getGraphQLClient();
+ const query = gql`
+ query HomePage {
+ nodeByUri(uri: "/") {
+ ... on Page {
+ id
+ content
+ }
+ }
+ }
+ `;
+
+ try {
+ const response: HomePageResponse = await client.request(query);
+ return response;
+ } catch (error) {
+ console.error(JSON.stringify(error, undefined, 2));
+ process.exit(1);
+ }
+};
+
+export const getHomePage: getHomePageReturn = async () => {
+ const rawHomePage = await fetchHomepage();
+ const homePage: HomePage = rawHomePage.nodeByUri;
+ return homePage;
+};
diff --git a/src/styles/Home.module.css b/src/styles/Home.module.css
deleted file mode 100644
index eb806ad..0000000
--- a/src/styles/Home.module.css
+++ /dev/null
@@ -1,116 +0,0 @@
-.container {
- padding: 0 2rem;
-}
-
-.main {
- min-height: 100vh;
- padding: 4rem 0;
- flex: 1;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
-}
-
-.footer {
- display: flex;
- flex: 1;
- padding: 2rem 0;
- border-top: 1px solid #eaeaea;
- justify-content: center;
- align-items: center;
-}
-
-.footer a {
- display: flex;
- justify-content: center;
- align-items: center;
- flex-grow: 1;
-}
-
-.title a {
- color: #0070f3;
- text-decoration: none;
-}
-
-.title a:hover,
-.title a:focus,
-.title a:active {
- text-decoration: underline;
-}
-
-.title {
- margin: 0;
- line-height: 1.15;
- font-size: 4rem;
-}
-
-.title,
-.description {
- text-align: center;
-}
-
-.description {
- margin: 4rem 0;
- line-height: 1.5;
- font-size: 1.5rem;
-}
-
-.code {
- background: #fafafa;
- border-radius: 5px;
- padding: 0.75rem;
- font-size: 1.1rem;
- font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
- Bitstream Vera Sans Mono, Courier New, monospace;
-}
-
-.grid {
- display: flex;
- align-items: center;
- justify-content: center;
- flex-wrap: wrap;
- max-width: 800px;
-}
-
-.card {
- margin: 1rem;
- padding: 1.5rem;
- text-align: left;
- color: inherit;
- text-decoration: none;
- border: 1px solid #eaeaea;
- border-radius: 10px;
- transition: color 0.15s ease, border-color 0.15s ease;
- max-width: 300px;
-}
-
-.card:hover,
-.card:focus,
-.card:active {
- color: #0070f3;
- border-color: #0070f3;
-}
-
-.card h2 {
- margin: 0 0 1rem;
- font-size: 1.5rem;
-}
-
-.card p {
- margin: 0;
- font-size: 1.25rem;
- line-height: 1.5;
-}
-
-.logo {
- height: 1em;
- margin-left: 0.5rem;
-}
-
-@media (max-width: 600px) {
- .grid {
- width: 100%;
- flex-direction: column;
- }
-}
diff --git a/src/styles/base/_typography.scss b/src/styles/base/_typography.scss
index 61d7616..39f0bfa 100644
--- a/src/styles/base/_typography.scss
+++ b/src/styles/base/_typography.scss
@@ -1,3 +1,4 @@
+.greetings,
h1 {
font-size: var(--font-size-3xl);
}
@@ -23,6 +24,7 @@ h6 {
font-size: var(--font-size-md);
}
+.greetings,
h1,
h2,
h3,
@@ -33,7 +35,14 @@ h6 {
font-family: var(--font-family-secondary);
font-weight: 500;
margin: 0 0 var(--spacing-sm);
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
* + {
h2,
h3,
diff --git a/src/ts/types/app.ts b/src/ts/types/app.ts
index b663812..488fe6e 100644
--- a/src/ts/types/app.ts
+++ b/src/ts/types/app.ts
@@ -2,7 +2,7 @@ import { NextPage } from 'next';
import { AppProps } from 'next/app';
import { ReactElement, ReactNode } from 'react';
-export type NextPageWithLayout = NextPage & {
+export type NextPageWithLayout<P = {}> = NextPage<P> & {
getLayout?: (page: ReactElement) => ReactNode;
};
diff --git a/src/ts/types/homepage.ts b/src/ts/types/homepage.ts
new file mode 100644
index 0000000..404aa38
--- /dev/null
+++ b/src/ts/types/homepage.ts
@@ -0,0 +1,19 @@
+export type fetchHomePageReturn = () => Promise<HomePageResponse>;
+
+export type HomePageResponse = {
+ nodeByUri: {
+ id: string;
+ content: string;
+ };
+};
+
+export type getHomePageReturn = () => Promise<HomePage>;
+
+export type HomePage = {
+ id: string;
+ content: string;
+};
+
+export type HomePageProps = {
+ data: HomePage;
+};
generated by cgit v1.2.3 (git 2.39.1) at 2025-10-27 06:53:09 +0000