@cntrl-site/sdk-nextjs 0.0.1 → 0.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +6 -5
- package/src/components/Page.tsx +67 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cntrl-site/sdk-nextjs",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.2",
|
|
4
4
|
"description": "SDK for Next.js",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"types": "src/index.js",
|
|
@@ -22,17 +22,18 @@
|
|
|
22
22
|
"homepage": "https://github.com/cntrl-site/sdk-nextjs#readme",
|
|
23
23
|
"dependencies": {
|
|
24
24
|
"@cntrl-site/core": "^1.0.6",
|
|
25
|
-
"@cntrl-site/sdk": "^0.0.
|
|
25
|
+
"@cntrl-site/sdk": "^0.0.2",
|
|
26
|
+
"html-react-parser": "^3.0.1",
|
|
26
27
|
"styled-jsx": "^5.0.2"
|
|
27
28
|
},
|
|
28
29
|
"peerDependencies": {
|
|
29
|
-
"
|
|
30
|
-
"react
|
|
30
|
+
"next": "^12.2.3",
|
|
31
|
+
"react": "^18.2.0",
|
|
32
|
+
"react-dom": "^18.2.0"
|
|
31
33
|
},
|
|
32
34
|
"devDependencies": {
|
|
33
35
|
"@tsconfig/node16": "^1.0.3",
|
|
34
36
|
"@tsconfig/recommended": "^1.0.1",
|
|
35
|
-
"@types/isomorphic-fetch": "^0.0.36",
|
|
36
37
|
"@types/react": "^18.0.15",
|
|
37
38
|
"typescript": "^4.7.4"
|
|
38
39
|
},
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import React, { FC } from 'react';
|
|
2
|
+
import HTMLReactParser, { domToReact } from 'html-react-parser';
|
|
3
|
+
import { TArticle, TProject, TMeta } from '@cntrl-site/core';
|
|
4
|
+
import Head from 'next/head';
|
|
5
|
+
import { Article } from './Article';
|
|
6
|
+
|
|
7
|
+
interface Props {
|
|
8
|
+
article: TArticle;
|
|
9
|
+
project: TProject;
|
|
10
|
+
meta: TMeta;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
const Page: FC<Props> = ({ article, project, meta }) => {
|
|
14
|
+
const googleFonts: ReturnType<typeof domToReact> = HTMLReactParser(project.fonts.google);
|
|
15
|
+
const adobeFonts: ReturnType<typeof domToReact> = HTMLReactParser(project.fonts.adobe);
|
|
16
|
+
const parsedFonts = {
|
|
17
|
+
...(typeof googleFonts === 'object' ? googleFonts : {}),
|
|
18
|
+
...(typeof adobeFonts === 'object' ? adobeFonts : {})
|
|
19
|
+
};
|
|
20
|
+
const customFonts = project.fonts.custom;
|
|
21
|
+
const htmlHead = HTMLReactParser(project.html.head);
|
|
22
|
+
const afterBodyOpen = HTMLReactParser(project.html.afterBodyOpen);
|
|
23
|
+
const beforeBodyClose = HTMLReactParser(project.html.beforeBodyClose);
|
|
24
|
+
return (
|
|
25
|
+
<>
|
|
26
|
+
<Head>
|
|
27
|
+
<title>{meta.title}</title>
|
|
28
|
+
<meta name="description" content={meta.description} />
|
|
29
|
+
<meta name="keywords" content={meta.keywords} />
|
|
30
|
+
<meta property="og:url" content={meta.opengraphThumbnail} />
|
|
31
|
+
<link rel="icon" href={meta.favicon} />
|
|
32
|
+
{customFonts.length > 0 && (
|
|
33
|
+
<style
|
|
34
|
+
dangerouslySetInnerHTML={{
|
|
35
|
+
__html: customFonts.map((font) => (
|
|
36
|
+
`
|
|
37
|
+
@font-face {
|
|
38
|
+
font-family: ${font.name};
|
|
39
|
+
font-weight: ${font.weight};
|
|
40
|
+
src: ${font.files.map(file => `url('${file.url}') format('${file.type}')`).join(', ')};
|
|
41
|
+
}
|
|
42
|
+
`
|
|
43
|
+
)).join('\n')
|
|
44
|
+
}}
|
|
45
|
+
/>
|
|
46
|
+
)}
|
|
47
|
+
{project.fonts.adobe}
|
|
48
|
+
{Object.values(parsedFonts as ReturnType<typeof domToReact>).map((value, i) => {
|
|
49
|
+
if (!value) return undefined;
|
|
50
|
+
const rel = value.props?.rel;
|
|
51
|
+
const href = value.props?.href;
|
|
52
|
+
if (!rel || !href) return undefined;
|
|
53
|
+
return (
|
|
54
|
+
<link key={i} rel={rel} href={href} />
|
|
55
|
+
);
|
|
56
|
+
})}
|
|
57
|
+
{htmlHead}
|
|
58
|
+
|
|
59
|
+
</Head>
|
|
60
|
+
{afterBodyOpen}
|
|
61
|
+
<Article article={article} layouts={project.layouts} />
|
|
62
|
+
{beforeBodyClose}
|
|
63
|
+
</>
|
|
64
|
+
);
|
|
65
|
+
};
|
|
66
|
+
|
|
67
|
+
export default Page;
|