首页 发现 帮助
登录
herton
/
server
关注 1
点赞 0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

Fixing styles and adding html comments and making it cooler

Herton 4 年之前
父节点
1f43a8646f
当前提交
060cb9dcbe
共有 5 个文件被更改，包括 16 次插入 和 7 次删除
合并视图 显示文件统计
  1. 8 2
      public/index.html
  2. 1 1
      public/manifest.json
  3. 二进制
      public/preview.jpg
  4. 6 4
      public/styles.css
  5. 1 0
      server.js

+ 8 - 2
public/index.html
查看文件 

@@ -4,19 +4,25 @@
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <title>Basic single file HTML</title>
 
+    <title>Single page node server with no dependencies</title>
 
     <meta name="description" content="Simgle file page basic page">
 
     <meta name="description" content="Simgle file page basic page">
 
+    <!-- Above the fold styles -->
 
+    <style>.wrapper {max-width:500px;margin:1rem auto;text-align:center;padding:0 1rem;}</style>
 
+    <!-- Non blocking styles -->
 
     <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
 
     <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
 
     <noscript><link rel="stylesheet" href="styles.css"></noscript>
 
     <noscript><link rel="stylesheet" href="styles.css"></noscript>
 
+    <!-- Assync scripts -->
 
     <script type="text/javascript" src="scripts.js" async></script>
 
     <script type="text/javascript" src="scripts.js" async></script>
 
+    <!-- PWA stuff -->
 
     <link rel="manifest" href="manifest.json">
 
     <link rel="manifest" href="manifest.json">
 
     <meta name="theme-color" content="white">
 
     <meta name="theme-color" content="white">
 
     <link rel="apple-touch-icon" href="apple-touch-icon.png">
 
     <link rel="apple-touch-icon" href="apple-touch-icon.png">
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
     <div class="wrapper">
 
     <div class="wrapper">
 
-        <img src="favicon-32x32.png" width="16" height="16" alt="icon"/>
 
+        <img src="apple-touch-icon.png" width="90" height="90" alt="icon"/>
 
         <h2>Simple Node Server For A Single Page App</h2>
 
         <h2>Simple Node Server For A Single Page App</h2>
 
+        <img src="preview.jpg" width="500" height="258" alt="preview"/>
 
     </div>
 
     </div>
 
 </body>
 
 </body>
 
 </html>
 
 </html>

+ 1 - 1
public/manifest.json
查看文件 

@@ -20,7 +20,7 @@
 
       }
 
       }
 
     ],
 
     ],
 
     "start_url": "/?source=pwa",
 
     "start_url": "/?source=pwa",
 
-    "background_color": "#3367D6",
 
+    "background_color": "#607d8b",
 
     "display": "standalone",
 
     "display": "standalone",
 
     "scope": "/",
 
     "scope": "/",
 
     "prefer_related_applications": false,
 
     "prefer_related_applications": false,

二进制
public/preview.jpg
查看文件


+ 6 - 4
public/styles.css
查看文件 

@@ -1,5 +1,7 @@
 
-.wrapper {
 
-    max-width: 300px;
 
-    margin: 1rem auto;
 
-    text-align: center;
 
+h2 {
 
+    color: #607d8b;
 
+}
 
+img {
 
+    max-width: 100%; 
+    height: auto;
 
 }
 
 }

+ 1 - 0
server.js
查看文件 

@@ -30,6 +30,7 @@ const server = http.createServer((req, res) => {
 
     const mediaType = getType(path);
 
     const mediaType = getType(path);
 
     if (! mediaType) res.writeHead(404).end('Not found');
 
     if (! mediaType) res.writeHead(404).end('Not found');
 
     res.writeHead(200, {
 
     res.writeHead(200, {
 
+        'Cache-Control': 'max-age=31536000',
 
         'Content-Type': mediaType == 'html' ? 'text/html' : types[mediaType]
 
         'Content-Type': mediaType == 'html' ? 'text/html' : types[mediaType]
 
     });
 
     });
 
     const filePath = mediaType == 'html' ? htmlFile : public + path;
 
     const filePath = mediaType == 'html' ? htmlFile : public + path;