Use html-webpack-template

neiesc · Jun 20, 2020 · 99b8fce · 99b8fce
1 parent ab968b0
commit 99b8fce
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 8 deletions.
diff --git a/config/webpack.common.js b/config/webpack.common.js
@@ -7,6 +7,18 @@ const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
 const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin')
 const StyleExtHtmlWebpackPlugin = require('style-ext-html-webpack-plugin')
 
+const fs = require('fs')
+const filePath = path.join(__dirname, '../src/shared/head.html')
+let head = ''
+
+fs.readFile(filePath, { encoding: 'utf-8' }, function (err, data) {
+  if (!err) {
+    head = data
+  } else {
+    console.log(err)
+  }
+})
+
 const minifyOptions = {
   html5: true,
   collapseWhitespace: true,
@@ -26,17 +38,24 @@ const minifyOptions = {
 const title = 'Edinei Cavalcanti'
 
 const HtmlWebpackPluginConfigIndex = new HtmlWebpackPlugin({
-  template: path.join(__dirname, '../src/index.html'),
+  inject: false,
+  template: require('html-webpack-template'),
   filename: 'index.html',
   minify: minifyOptions,
   title,
-  keywords: `neiesc,Edinei,developer,desenvolvedor,programador,programmer,
-  dotnet,dotnetcore,csharp,nodejs,python`,
-  description: `Olá sou Edinei aka neiesc.
-  Começei profissionalmente em 2010 minha carreira, sólido conhecimente em TI,
-  mais especificamente em desenvolvimento de software em C#, .NET, .NET Core, Node.js e Python
-  com experiência em grandes aplicações.`,
-  author: 'Edinei aka neiesc'
+  meta: [
+    {
+      name: 'keywords',
+      content: `neiesc,Edinei,developer,desenvolvedor,programador,programmer,
+      dotnet,dotnetcore,csharp,nodejs,python`
+    },
+    {
+      name: 'author',
+      content: 'Edinei aka neiesc'
+    }
+  ],
+  headHtmlSnippet: head,
+  bodyHtmlSnippet: 'teste'
 })
 
 const HtmlWebpackPluginConfigPalestras = new HtmlWebpackPlugin({

diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
     "eslint-plugin-standard": "^4.0.1",
     "html-loader": "^1.1.0",
     "html-webpack-plugin": "^4.3.0",
+    "html-webpack-template": "^6.2.0",
     "mini-css-extract-plugin": "^0.9.0",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
     "prettier": "^2.0.5",

diff --git a/src/shared/head.html b/src/shared/head.html
@@ -0,0 +1,72 @@
+<head>
+  <meta charset="utf-8" />
+  <title><%=htmlWebpackPlugin.options.title%></title>
+  <meta name="keywords" content="<%=htmlWebpackPlugin.options.keywords%>" />
+  <meta
+    name="description"
+    content="<%=htmlWebpackPlugin.options.description%>"
+  />
+  <meta name="author" content="<%=htmlWebpackPlugin.options.author%>" />
+  <meta
+    name="viewport"
+    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
+  />
+
+  <link rel="manifest" href="/manifest.json" />
+
+  <link
+    rel="preload"
+    media="screen"
+    as="style"
+    onload="this.onload=null;this.rel='stylesheet'"
+    href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css"
+  />
+
+  <link
+    rel="preload"
+    media="screen"
+    as="style"
+    onload="this.onload=null;this.rel='stylesheet'"
+    href="https://fonts.googleapis.com/css?family=Roboto+Slab"
+  />
+  <link
+    rel="preload"
+    media="screen"
+    as="style"
+    onload="this.onload=null;this.rel='stylesheet'"
+    href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
+    integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
+    crossorigin="anonymous"
+  />
+
+  <!-- favicon -->
+  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+  <link rel="manifest" href="/site.webmanifest" />
+  <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
+  <meta name="msapplication-TileColor" content="#da532c" />
+  <meta name="theme-color" content="#ffffff" />
+
+  <!-- Twitter Card data -->
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content="<%=htmlWebpackPlugin.options.title%>" />
+  <meta
+    name="twitter:description"
+    content="<%=htmlWebpackPlugin.options.description%>"
+  />
+  <meta name="twitter:image" content="https://edinei.dev/mstile-150x150.png" />
+
+  <!-- Open Graph data -->
+  <meta property="og:title" content="<%=htmlWebpackPlugin.options.title%>" />
+  <meta property="og:type" content="website" />
+  <meta property="og:image" content="https://edinei.dev/mstile-150x150.png" />
+  <meta
+    property="og:image:secure_url"
+    content="https://edinei.dev/mstile-150x150.png"
+  />
+  <meta
+    property="og:description"
+    content="<%=htmlWebpackPlugin.options.description%>"
+  />
+</head>
diff --git a/yarn.lock b/yarn.lock
@@ -3625,6 +3625,11 @@ html-webpack-plugin@^4.3.0:
     tapable "^1.1.3"
     util.promisify "1.0.0"
 
+html-webpack-template@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/html-webpack-template/-/html-webpack-template-6.2.0.tgz#3c9f15f616f4500927909d34adfbccb20d37943c"
+  integrity sha512-wyzIjbe9yXGyQ6yAeFjWmku7YOlW85w1dxqLnAQ564uRNNoBhpZVTQl7ouROoyQrfZUSoPUJiw7oWn31NDiuQQ==
+
 htmlparser2@^3.3.0:
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.10.1.tgz#bd679dc3f59897b6a34bb10749c855bb53a9392f"