feat(app): add layout html tags (#368)

AdiPol1359 · web-flow · commit f4463cc670cc · 2022-12-04T01:41:19.000+01:00
* feat(app): add layout html tags

* refactor(app): remove title attributes

* refactor(app): remove key attribute

* feat(app): add head for index page

* feat(app): add example page

* refactor(app): move common html tags into DefaultTags component

* refactor(app): change component name and move to components folder
diff --git a/apps/app/app/foo/head.tsx b/apps/app/app/foo/head.tsx
@@ -0,0 +1,9 @@
+import { HeadTags } from "../../components/HeadTags";
+
+export default function Head() {
+	return (
+		<>
+			<HeadTags title="foo" />
+		</>
+	);
+}
diff --git a/apps/app/app/foo/page.tsx b/apps/app/app/foo/page.tsx
@@ -0,0 +1,3 @@
+export default function FooPage() {
+	return <div>siema</div>;
+}
diff --git a/apps/app/app/head.tsx b/apps/app/app/head.tsx
@@ -0,0 +1,9 @@
+import { HeadTags } from "../components/HeadTags";
+
+export default function Head() {
+	return (
+		<>
+			<HeadTags title="Strona główna" />
+		</>
+	);
+}
diff --git a/apps/app/app/layout.tsx b/apps/app/app/layout.tsx
@@ -5,7 +5,6 @@ import "./globals.css";
 export default function RootLayout({ children }: { children: React.ReactNode }) {
 	return (
 		<html lang="pl">
-			<head></head>
 			<body>
 				{children}
 				<AnalyticsWrapper />
diff --git a/apps/app/app/page.tsx b/apps/app/app/page.tsx
@@ -1,3 +1,5 @@
+import Link from "next/link";
+
 export default function Page() {
 	return (
 		<div className="m-2 p-2">
@@ -7,6 +9,7 @@ export default function Page() {
 				<li>NEXT_PUBLIC_API_URL: {process.env.NEXT_PUBLIC_API_URL}</li>
 				<li>NEXT_PUBLIC_APP_URL: {process.env.NEXT_PUBLIC_APP_URL}</li>
 			</ul>
+			<Link href="/foo">foo</Link>
 		</div>
 	);
 }
diff --git a/apps/app/components/HeadTags.tsx b/apps/app/components/HeadTags.tsx
@@ -0,0 +1,14 @@
+type DefaultHeadTags = Readonly<{
+	title?: string;
+	description?: string;
+}>;
+
+export const HeadTags = ({ title = "", description = "" }: DefaultHeadTags) => (
+	<>
+		<title>{`DevFAQ.pl • ${title}`}</title>
+		<meta name="description" content={description} />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+		<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+	</>
+);
diff --git a/apps/app/public/favicon-16x16.png b/apps/app/public/favicon-16x16.png
diff --git a/apps/app/public/favicon-32x32.png b/apps/app/public/favicon-32x32.png

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export default function FooPage() {`
	`2`	`+ return <div>siema</div>;`
	`3`	`+}`