feat: inject links to head

* feat: inject links to head * refactor: keep flat structure of meta * style: meta * style: remove brackets * chore: increase size limit --------- Co-authored-by: Mikhail Tsipotan <[email protected]>
rambler-digital-solutions · Dec 7, 2023 · 6a521dc · 6a521dc
1 parent d0478d4
commit 6a521dc
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 9 deletions.
diff --git a/.size-limit.json b/.size-limit.json
@@ -1,10 +1,10 @@
 [
   {
     "path": "dist/client/index.js",
-    "limit": "6.9 KB"
+    "limit": "6.95 KB"
   },
   {
     "path": "dist/server/index.js",
-    "limit": "6.9 KB"
+    "limit": "6.97 KB"
   }
 ]
diff --git a/README.md b/README.md
@@ -8,7 +8,7 @@ Toolkit for server-side rendered route based apps built with React and React Rou
 npm install @rambler-tech/react-toolkit
 ```
 
-or 
+or
 
 ```sh
 yarn add @rambler-tech/react-toolkit
@@ -118,7 +118,9 @@ const MainPage: PageComponent = () => (
 
 MainPage.getMetaData = () => ({
   title: 'Main page',
-  description: '...'
+  description: '...',
+  'og:image': '...'
+  canonical: '...'
 })
 
 export default MainPage
@@ -144,8 +146,7 @@ MainPage.getInitialData = async () => {
 }
 
 MainPage.getMetaData = ({data}) => ({
-  title: `Main page: ${data.someProp}`,
-  description: '...'
+  title: `Main page: ${data.someProp}`
 })
 
 export default MainPage
@@ -257,7 +258,13 @@ For adding custom styles, scripts, meta tags and for more flexible customization
 ```tsx
 // src/document.tsx
 import React, {FC, ReactNode} from 'react'
-import {Meta, Preloads, Styles, Scripts, State} from '@rambler-tech/react-toolkit/client'
+import {
+  Meta,
+  Preloads,
+  Styles,
+  Scripts,
+  State
+} from '@rambler-tech/react-toolkit/client'
 
 export interface MyDocumentProps {
   children: ReactNode
@@ -364,7 +371,10 @@ export const routes = [
 
 ```ts
 // src/client.ts
-import {hydrateFromStream, TransitionMode} from '@rambler-tech/react-toolkit/client'
+import {
+  hydrateFromStream,
+  TransitionMode
+} from '@rambler-tech/react-toolkit/client'
 import {routes} from './routes'
 
 hydrateFromStream({

diff --git a/src/common/types.ts b/src/common/types.ts
@@ -59,7 +59,9 @@ export type GetMetaData = Loader<MetaData, {data: InitialData}>
  *
  * MainPage.getMetaData = () => ({
  *   title: 'Main page',
- *   description: '...'
+ *   description: '...',
+ *   'og:image': '...'
+ *   canonical: '...'
  * })
  *
  * MainPage.getInitialData = async () => {

diff --git a/src/components/meta.tsx b/src/components/meta.tsx
@@ -10,6 +10,8 @@ export const Meta: React.FC = () => {
       {Object.entries(meta).map(([name, content = '']) =>
         name === 'title' ? (
           <title key={name}>{content}</title>
+        ) : HEAD_LINKS_RELS.includes(name) ? (
+          <link key={`${name}${content}`} rel={name} href={content} />
         ) : name.startsWith('og:') ? (
           <meta key={name} property={name} content={content} />
         ) : (
@@ -19,3 +21,16 @@ export const Meta: React.FC = () => {
     </>
   )
 }
+
+const HEAD_LINKS_RELS = [
+  'canonical',
+  'alternate',
+  'icon',
+  'license',
+  'manifest',
+  'dns-prefetch',
+  'prefetch',
+  'preconnect',
+  'preload',
+  'stylesheet'
+]