this repo has no description
www.baileykane.co/
Migrate Homepage content from Netlify CMS to Google Sheets CMS
+23
-28
+23
-28
pages/index.js
+23
-28
pages/index.js
···
1
1
import Head from "next/head";
2
2
import { Component } from "react";
3
-
import { attributes } from "../content/home.md";
4
3
import HomeSectionItem from "../components/HomeSectionItem";
5
4
import BaseLayout from "../components/BaseLayout";
6
5
import SectionList from "../components/SectionList";
7
-
import { micromark } from "micromark";
8
6
import PageHeading from "../components/PageHeading";
7
+
import { importCSVDataAsJson } from "../lib/sheetsConnector";
9
8
10
9
export default class Home extends Component {
10
+
static async getInitialProps() {
11
+
const sectionsList = await importCSVDataAsJson(
12
+
process.env.NEXT_PUBLIC_HOME_DATA_URL
13
+
);
14
+
15
+
console.log(sectionsList);
16
+
17
+
return { sectionsList };
18
+
}
19
+
11
20
render() {
12
-
const { subtitle, sections, content } = attributes;
21
+
const { sectionsList } = this.props;
13
22
return (
14
23
<>
15
24
<Head>
···
22
31
<div className="w-full flex flex-col relative -mt-4">
23
32
<div className="w-full flex flex-col items-center absolute z-10 mt-4">
24
33
<div className="h-full w-full max-w-md space-y-4">
25
-
<PageHeading>{subtitle}</PageHeading>
26
-
<div
27
-
className="prose prose-stone dark:prose-invert"
28
-
dangerouslySetInnerHTML={{ __html: micromark(content) }}
29
-
>
30
-
{/* <HomeContent /> */}
34
+
<PageHeading>Hello hello, this is Bailey speaking.</PageHeading>
35
+
<div className="prose prose-stone dark:prose-invert">
36
+
Welcome to the home of my many interests, half-baked projects,
37
+
and digital representations of myself.
38
+
<br />
39
+
<br />
40
+
Hope you enjoy.
31
41
</div>
32
42
<SectionList>
33
-
{/* <HomeSectionItem
34
-
link="https://example.com/" // {"/" + section.name.toLowerCase()}
35
-
name="Books" // {section.name}
36
-
description="Bookety books" // {section.description}
37
-
icon="img/external-link-outline-svgrepo-com.svg" // {section.icon}
38
-
key="1" //{k}
39
-
/> */}
40
-
{sections.map((section, k) => (
43
+
{sectionsList.data.map((section, k) => (
41
44
<HomeSectionItem
42
-
link={section.link ? section.link : section.name.toLowerCase()}
45
+
link={
46
+
section.link ? section.link : section.name.toLowerCase()
47
+
}
43
48
name={section.name}
44
49
description={section.description}
45
50
icon={section.icon}
···
49
54
</SectionList>
50
55
</div>
51
56
</div>
52
-
{/* <div className="h-[28rem] rounded-lg overflow-hidden">
53
-
<Image
54
-
src={BackgroundImage}
55
-
placeholder="blur"
56
-
priority
57
-
className="rounded-lg"
58
-
layout="fill"
59
-
objectFit="cover"
60
-
/>
61
-
</div> */}
62
57
</div>
63
58
</BaseLayout>
64
59
</>