5htp-core 0.4.9-6 → 0.4.9-7

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "5htp-core",
 	"description": "Convenient TypeScript framework designed for Performance and Productivity.",
-	"version": "0.4.9-6",
+	"version": "0.4.9-7",
 	"author": "Gaetan Le Gac (https://github.com/gaetanlegac)",
 	"repository": "git://github.com/gaetanlegac/5htp-core.git",
 	"license": "MIT",
@@ -99,9 +99,10 @@
 		"@types/universal-analytics": "^0.4.5",
 		"@types/webpack-env": "^1.16.2",
 		"@types/ws": "^7.4.7",
-		"@types/yargs-parser": "^21.0.0"
+		"@types/yargs-parser": "^21.0.0",
+		"schema-dts": "^1.1.2"
 	},
 	"peerDependencies": {
-		"5htp": "0.3.9"
+		"5htp": "0.4.5"
 	}
 }

package/src/common/router/response/page.ts

@@ -65,6 +65,7 @@ export default abstract class PageResponse<TRouter extends ClientOrServerRouter
     public description?: string;
     public bodyClass: Set<string> = new Set<string>();
     public bodyId?: string;
+    public url: string;
 
     // Resources
     public scripts: TPageResource[] = [];
@@ -82,6 +83,8 @@ export default abstract class PageResponse<TRouter extends ClientOrServerRouter
 
         this.chunkId = context.route.options["id"];
 
+        this.url = context.request.url;
+
         this.fetchers = this.createFetchers(route.options.data);
        
     }

package/src/server/app/container/config.ts

@@ -48,6 +48,7 @@ type AppIdentityConfig = {
 
     },
 
+    locale: string
     language: string
     maincolor: string, 
     iconsPack?: string,

package/src/server/services/router/response/page/document.tsx

@@ -72,22 +72,46 @@ export default class DocumentRenderer<TRouter extends Router> {
                     <meta content="IE=edge" httpEquiv="X-UA-Compatible" />
                     <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
 
-                    {/* Basique*/}
-                    <meta content={this.app.identity.web.title} name="apple-mobile-web-app-title" />
+                    {/* Mobile */}
+                    <meta name="application-name" content={this.app.identity.web.title} />
+                    <meta name="apple-mobile-web-app-title" content={this.app.identity.web.title} />
+                    <meta name="apple-mobile-web-app-title" content={this.app.identity.web.title} />
+                    <meta content={this.app.identity.author.name} name="author" />
+                    <meta name="theme-color" content={this.app.identity.maincolor} />
+                    <meta name="msapplication-TileColor" content={this.app.identity.maincolor} />
+                    <meta name="apple-mobile-web-app-capable" content="yes" />
+                    <meta name="mobile-web-app-capable" content="yes" />
+                    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
+
+                    {/* https://stackoverflow.com/questions/48956465/favicon-standard-2019-svg-ico-png-and-dimensions */}
+                    {/*<link rel="manifest" href={RES['manifest.json']} />*/}
+                    <link rel="shortcut icon" href="/public/app/favicon.ico" />
+                    <link rel="icon" type="image/png" sizes="16x16" href="/public/app/favicon-16x16.png" />
+                    <link rel="icon" type="image/png" sizes="32x32" href="/public/app/favicon-32x32.png" />
+                    <link rel="apple-touch-icon" sizes="180x180" href="/public/app/apple-touch-icon-180x180.png" />
+                    <meta name="msapplication-config" content="/public/app/browserconfig.xml" />
+
+                    {/* Page */}
                     <title>{page.title}</title>
                     <meta content={page.description} name="description" />
                     <link rel="canonical" href={canonicalUrl} />
 
-                    {this.metas( page )}
+                    {/* SEO, social medias, OG tags, ...  */}
+                    {page.head.map(({ $, ...attrs }) => (
+                        React.createElement($, attrs)
+                    ))}
 
                     {this.styles( page )}
 
                     {await this.scripts( response, page )}
 
                     {/* Rich Snippets: https://schema.org/docs/full.html + https://jsonld.com/ */}
-                    {/* <script type="application/ld+json" dangerouslySetInnerHTML={{
-                        __html: JSON.stringify( schemaGenerator(page, route) )
-                    }}/> */}
+                    <script type="application/ld+json" dangerouslySetInnerHTML={{
+                        __html: JSON.stringify({
+                            '@context': 'http://schema.org',
+                            '@graph': page.jsonld
+                        })
+                    }}/>
 
                 </head>
                 <body {...attrsBody} dangerouslySetInnerHTML={{ __html: html }}></body>
@@ -95,41 +119,6 @@ export default class DocumentRenderer<TRouter extends Router> {
         )
     }
 
-    private metas( page: Page ) {
-        return <>
-            {/* Réseaux sociaux */}
-            {/*page.metas.metasAdditionnelles && Object.entries(page.metas.metasAdditionnelles).map(
-                ([ cle, val ]: [ string, string ]) => (
-                    <meta name={cle} content={val} />
-                )
-                )*/}
-
-            {/* Mobile */}
-            <meta name="theme-color" content={this.app.identity.maincolor} />
-            <meta name="msapplication-TileColor" content={this.app.identity.maincolor} />
-            <meta name="apple-mobile-web-app-capable" content="yes" />
-            <meta name="apple-mobile-web-app-title" content={this.app.identity.web.title} />
-            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
-
-            {/* Identité */}
-            <meta name="mobile-web-app-capable" content="yes" />
-            <meta name="application-name" content={this.app.identity.web.title} />
-            <meta name="type" content="website" />
-
-            {/* https://stackoverflow.com/questions/48956465/favicon-standard-2019-svg-ico-png-and-dimensions */}
-            {/*<link rel="manifest" href={RES['manifest.json']} />*/}
-            <link rel="shortcut icon" href="/public/app/favicon.ico" />
-            <link rel="icon" type="image/png" sizes="16x16" href="/public/app/favicon-16x16.png" />
-            <link rel="icon" type="image/png" sizes="32x32" href="/public/app/favicon-32x32.png" />
-            <link rel="apple-touch-icon" sizes="180x180" href="/public/app/apple-touch-icon-180x180.png" />
-            <meta name="msapplication-config" content="/public/app/browserconfig.xml" />
-
-            {page.metas?.map(({ $, ...attrs }) => (
-                React.createElement($, attrs)
-            ))}
-        </>
-    }
-
     private styles( page: Page ) {
         return <>
             <link rel="stylesheet" type="text/css" href={"/public/icons.css?" + BUILD_ID} />

package/src/server/services/router/response/page/index.tsx

@@ -4,8 +4,8 @@
 
 // Npm
 import React from 'react';
-import renderToString from "preact-render-to-string";
-const safeStringify = require('fast-safe-stringify'); // remplace les références circulairs par un [Circular]
+import renderToString from "preact-render-to-string"; 
+import type { Thing } from 'schema-dts';
 
 // Core
 import { default as Router, TRouterContext } from "@server/services/router";
@@ -35,7 +35,9 @@ type TMetasList = ({ $: string } & { [key: string]: string })[]
 
 export default class Page<TRouter extends Router = Router> extends PageResponse<TRouter> {
 
-    public metas: TMetasList = [];
+    public head: TMetasList = [];
+    public metas: {[name: string]: string} = {};
+    public jsonld: Thing[] = [];
 
     public constructor(
         public route: TRoute | TErrorRoute,
@@ -75,6 +77,10 @@ export default class Page<TRouter extends Router = Router> extends PageResponse<
         if (html === undefined)
             throw new Error(`Page HTML is empty (undefined)`);
 
+        // Metas
+        this.buildMetas();
+        this.buildJsonLd();
+
         // Un chunk peut regrouper plusieurs fihciers css / js
         // L'id du chunk est injecté depuis le plugin babel
         this.addChunks();
@@ -119,52 +125,72 @@ export default class Page<TRouter extends Router = Router> extends PageResponse<
         }
     }
 
-    private getSocialMetas() {
-        /*if (page.metas.imageUrl)
-            page.metas.imageUrl = app.web.url + page.metas.imageUrl;
-
-        if (!page.metas.metasAdditionnelles)
-            page.metas.metasAdditionnelles = {};
-
-        page.metas.metasAdditionnelles = {
-            'og:locale': 'fr_FR',
-            'og:site_name': app.identity.web.title,
-            'og:title': page.title,
-            'og:description': page.description,
-            'og:url': fullUrl,
-
-            ...(page.metas.imageUrl ? {
-                'og:image': page.metas.imageUrl,
-                ...(page.metas.imageX ? {
-                    'og:image:width': page.metas.imageX.toString()
-                } : {}),
-                ...(page.metas.imageY ? {
-                    'og:image:height': page.metas.imageY.toString()
-                } : {})
-            } : {}),
+    private buildMetas() {
+
+        const metas = {
+
+            'og:type': 'website',
+            'og:locale': this.app.identity.locale,
+            'og:site_name': this.app.identity.web.title,
+            'og:url': this.context.request.req.url,
 
+            'og:title': this.title,
+            'og:description': this.description,
+
+            'twitter:url': this.context.request.req.url,
             'twitter:card': 'summary_large_image',
-            'twitter:title': page.title,
-            'twitter:description': page.description,
-            'twitter:url': fullUrl,
-            'twitter:text:title': page.title,
-
-            ...(app.identity.social?.twitter? ? {
-                'twitter:site': `@${app.identity.social?.twitter?}`,
-                'twitter:creator': `@${app.identity.social?.twitter?}`
-            } : {}),
-
-            ...(page.metas.imageUrl ? {
-                'twitter:image': page.metas.imageUrl,
-                ...(page.metas.imageX ? {
-                    'twitter:image:width': page.metas.imageX.toString()
-                } : {}),
-                ...(page.metas.imageY ? {
-                    'twitter:image:height': page.metas.imageY.toString()
-                } : {})
-            } : {}),
-
-            ...page.metas.metasAdditionnelles
-        };*/
+            'twitter:title': this.title,
+            'twitter:text:title': this.title,
+            'twitter:description': this.description,
+
+            ...this.metas
+        };
+
+        for (const key in metas) {
+            const value = metas[key];
+            if (value === "") continue;
+            this.head.push({ $: 'meta', property: key, content: value });
+        }
+    }
+
+    private buildJsonLd() {
+        this.jsonld.push({
+            '@type': 'Organization',
+            '@id': this.router.url('/#organization'),
+            name: this.app.identity.author.name,
+            url: this.app.identity.author.url,
+            logo: {
+                '@type': 'ImageObject',
+                '@id': this.router.url('/#logo'),
+                url: this.router.url('/public/app/android-chrome-512x512.png'),
+                width: "512px",
+                height: "512px",
+                caption: this.app.identity.author.name
+            },
+            sameAs: []
+        }, {
+            '@type': 'WebSite',
+            '@id': this.router.url('/#website'),
+            url: this.router.url('/'),
+            name: this.app.identity.name,
+            description: this.app.identity.description,
+            "publisher": {
+                "@id": this.router.url('/#organization'),
+            },
+            inLanguage: this.app.identity.locale,
+            potentialAction: [], 
+        }, {
+            '@type': "WebPage",
+            '@id': this.url,
+            url: this.url,
+
+            "isPartOf": {
+                "@id": this.router.url('/#website'),
+            },
+
+            name: this.title,
+            description: this.description,
+            inLanguage: this.app.identity.locale,
+        });
     }
 }

package/src/server/services/router/response/page/schemaGenerator.ts

@@ -1,70 +0,0 @@
-// Types
-
-
-export default (page: TInfosPage, route: TInfosRoute) => {
-    //const isSubPage = pageTitle && url.pathname !== '/';
-
-    let schemaPage = {
-        '@type': "WebPage",
-        '@id': route.requete.url,
-        name: page.title,
-        url: route.requete.url,
-        description: page.description,
-        potentialAction: [{
-            "@type": "SearchAction"
-        }],
-
-        ...(page.metas.richSnippetsPage === undefined ? {} : page.metas.richSnippetsPage)
-    }
-
-    /*if (isSubPage)
-        schemaPage.breadcrumb = {
-            '@context': 'http://schema.org',
-            '@type': 'BreadcrumbList',
-            itemListElement: [
-                {
-                    '@type': 'ListItem',
-                    position: 1,
-                    item: {
-                        '@id': siteUrl,
-                        name: siteTitle,
-                    },
-                },
-                {
-                    '@type': 'ListItem',
-                    position: 2,
-                    item: {
-                        '@id': canonical,
-                        name: pageTitle,
-                    },
-                },
-            ],
-        }*/
-
-    let schemaFinal = page.metas.richSnippets === undefined ? schemaPage : {
-        ...page.metas.richSnippets,
-        mainEntityOfPage: schemaPage
-    };
-
-    return {
-        '@context': 'http://schema.org',
-        ...schemaFinal
-    }
-
-    /*
-    '@type': 'WebSite',
-    url: SEO.url,
-    name: SEO.titre.site,
-    inLanguage: 'French',
-    about: [{
-        "@type": "Thing",
-        name: "Gagner de l'argent sur internet"
-    }, {
-        "@type": "Thing",
-        name: "Développer son business en ligne"
-    }, {
-        "@type": "Thing",
-        name: "Marketing"
-    }]
-     */
-};