Merge pull request #3204 from wallabag/better-export-page

Better public sharing page

5 files changed, 449 insertions, 42 deletions

diff --git a/app/Resources/static/themes/_global/share.js b/app/Resources/static/themes/_global/share.js
new file mode 100644
index 00000000..d7078616
--- /dev/null
+++ b/app/Resources/static/themes/_global/share.js
@@ -0,0 +1 @@
+import './share.scss';
diff --git a/app/Resources/static/themes/_global/share.scss b/app/Resources/static/themes/_global/share.scss
new file mode 100644
index 00000000..5a853324
--- /dev/null
+++ b/app/Resources/static/themes/_global/share.scss
@@ -0,0 +1,407 @@
+/* -------------------------- Reset ------------------- */
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+b,
+u,
+i,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  vertical-align: baseline;
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+
+body {
+  line-height: 1;
+}
+
+blockquote,
+q {
+  quotes: none;
+}
+
+blockquote::before,
+blockquote::after,
+q::before,
+q::after {
+  content: '';
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* -------------------------- General properties ------------------- */
+
+body {
+  background-color: white;
+  color: #444;
+  font-family: Georgia;
+  line-height: 1.7;
+  -ms-content-zooming: none;
+  margin-bottom: 64px;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 600;
+  margin: 0.2em 0;
+}
+
+article h1,
+article h2,
+article h3,
+article h4,
+article h5,
+article h6 {
+  text-align: left !important;
+  line-height: 1.3;
+}
+
+h1 {
+  font-size: 1.4em;
+}
+
+h2 {
+  font-size: 1.3em;
+}
+
+h3,
+h4 {
+  font-size: 1.2em;
+}
+
+h5,
+h6 {
+  font-size: 1.1em;
+}
+
+p {
+  margin-bottom: 0.75em;
+}
+
+b,
+strong {
+  font-weight: bold;
+}
+
+i,
+em {
+  font-style: italic;
+}
+
+a {
+  color: #444;
+  text-decoration: underline;
+}
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+p,
+ul,
+ol,
+dl {
+  margin: 0 0 1.75em;
+}
+
+ul,
+ol {
+  padding-left: 1.25em;
+}
+
+li {
+  padding-bottom: 0.2em;
+  line-height: 1.6;
+}
+
+li p:last-child,
+li li:last-child {
+  margin-bottom: -0.2em;
+}
+
+ul li:last-child,
+ol li:last-child {
+  padding-bottom: 0;
+}
+
+mark {
+  padding: 0 0.2em;
+}
+
+mark a {
+  text-decoration: none;
+}
+
+blockquote {
+  font-style: italic;
+  border-left: 0.25em solid black;
+  margin-left: -20px;
+  padding-left: 17px;
+  margin-bottom: 0.5em;
+  margin-top: 0.5em;
+}
+
+blockquote cite {
+  text-transform: uppercase;
+  font-size: 0.8em;
+  font-style: normal;
+}
+
+blockquote cite::before {
+  content: "—";
+  margin-right: 0.5em;
+}
+
+img {
+  display: block;
+  height: auto;
+  margin-bottom: 0.5em;
+  max-width: 100%;
+}
+
+figure {
+  margin: 0;
+}
+
+figure figcaption {
+  display: block;
+  margin-top: 0.3em;
+  font-style: italic;
+  font-size: 0.8em;
+}
+
+button {
+  display: none !important;
+}
+
+hr {
+  display: block;
+  height: 1px;
+  border: solid #666;
+  border-width: 1px 0 0;
+  margin: 1.6em 0;
+  padding: 0;
+}
+
+small {
+  font-size: 0.7em;
+}
+
+dl {
+  margin: 1.6em 0;
+}
+
+dl dt {
+  float: left;
+  width: 11.25em;
+  overflow: hidden;
+  clear: left;
+  text-align: right;
+  -ms-text-overflow: ellipsis;
+  -o-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: bold;
+  margin-bottom: 1em;
+}
+
+dl dd {
+  margin-left: 12.5em;
+  margin-bottom: 1em;
+}
+
+pre {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  margin: 4em 0;
+  border: 0.0625em solid #efefef;
+  width: 100%;
+  padding: 1em;
+  font-family: Consolas, monospace;
+  white-space: pre;
+  overflow: auto;
+}
+
+pre code {
+  font-size: 0.8em;
+  line-height: 1.6em;
+  white-space: pre-wrap;
+  background: transparent;
+  border: none;
+  padding: 0;
+  vertical-align: inherit;
+}
+
+code {
+  padding: 0.125em 0.375em;
+  margin: 0 0.2em;
+  font-family: Consolas, monospace;
+  font-size: 0.8em;
+  white-space: pre;
+  border: 1px solid lightgray;
+  overflow: auto;
+}
+
+audio,
+video {
+  max-width: 43.75em;
+}
+
+::selection,
+mark {
+  background: #666;
+  color: white;
+}
+
+table {
+  border-collapse: collapse;
+  margin-bottom: 2em;
+  width: 100%;
+}
+
+th,
+td {
+  padding: 0.25em;
+  text-align: left;
+}
+
+thead tr {
+  text-transform: uppercase;
+  font-size: 0.85em;
+  letter-spacing: 1px;
+  font-family: "Segoe UI", sans-serif;
+  font-weight: 600;
+}
+
+tbody tr:nth-child(2n+1) {
+  background: rgba(0, 0, 0, 0.1);
+}
+
+tbody {
+  border: solid #999;
+  border-width: 1px 0;
+}
+
+article {
+  padding: 0 1em;
+}
+
+/* --------------------- Responsive design ------------------------- */
+
+@media (min-width: 720px) {
+  blockquote {
+    margin-left: -1.4375em;
+    padding-left: 1.25em;
+  }
+
+  article {
+    margin: 0 auto;
+    max-width: 43.75em;
+    padding: 0 1.25em;
+  }
+
+  header {
+    max-width: 43.75em;
+    margin: 0 auto;
+    margin-top: 32px;
+    text-align: center;
+  }
+}
diff --git a/app/config/webpack/common.js b/app/config/webpack/common.js
index 4f5739f0..c497689a 100644
--- a/app/config/webpack/common.js
+++ b/app/config/webpack/common.js
@@ -4,13 +4,13 @@ const StyleLintPlugin = require('stylelint-webpack-plugin');
 
 const rootDir = path.resolve(__dirname, '../../../');
 
-module.exports = function() {
+module.exports = function () {
   return {
     entry: {
       material: path.join(rootDir, './app/Resources/static/themes/material/index.js'),
       baggy: path.join(rootDir, './app/Resources/static/themes/baggy/index.js'),
+      public: path.join(rootDir, './app/Resources/static/themes/_global/share.js'),
     },
-
     output: {
       filename: '[name].js',
       path: path.resolve(rootDir, 'web/bundles/wallabagcore'),
@@ -21,7 +21,7 @@ module.exports = function() {
         $: 'jquery',
         jQuery: 'jquery',
         'window.$': 'jquery',
-        'window.jQuery': 'jquery'
+        'window.jQuery': 'jquery',
       }),
       new StyleLintPlugin({
         configFile: '.stylelintrc',
@@ -33,8 +33,8 @@ module.exports = function() {
     ],
     resolve: {
       alias: {
-        jquery: path.join(rootDir, 'node_modules/jquery/dist/jquery.js')
-      }
+        jquery: path.join(rootDir, 'node_modules/jquery/dist/jquery.js'),
+      },
     },
   };
 };
diff --git a/app/config/webpack/dev.js b/app/config/webpack/dev.js
index 771df65b..b6551152 100644
--- a/app/config/webpack/dev.js
+++ b/app/config/webpack/dev.js
@@ -1,13 +1,12 @@
 const webpackMerge = require('webpack-merge');
 const webpack = require('webpack');
-const path = require('path');
 const commonConfig = require('./common.js');
 
 module.exports = function () {
   return webpackMerge(commonConfig(), {
     devtool: 'eval-source-map',
     output: {
-      filename: '[name].dev.js'
+      filename: '[name].dev.js',
     },
 
     devServer: {
@@ -34,9 +33,9 @@ module.exports = function () {
           use: {
             loader: 'babel-loader',
             options: {
-              presets: ['env']
-            }
-          }
+              presets: ['env'],
+            },
+          },
         },
         {
           test: /\.(s)?css$/,
@@ -46,17 +45,17 @@ module.exports = function () {
               loader: 'css-loader',
               options: {
                 importLoaders: 1,
-              }
+              },
             },
-          'postcss-loader',
-          'sass-loader'
-          ]
+            'postcss-loader',
+            'sass-loader',
+          ],
         },
         {
           test: /\.(jpg|png|gif|svg|eot|ttf|woff|woff2)$/,
-          use: 'url-loader'
+          use: 'url-loader',
         },
-      ]
+      ],
     },
-  })
+  });
 };
diff --git a/app/config/webpack/prod.js b/app/config/webpack/prod.js
index ef41ab99..44961cc5 100644
--- a/app/config/webpack/prod.js
+++ b/app/config/webpack/prod.js
@@ -5,34 +5,34 @@ const ManifestPlugin = require('webpack-manifest-plugin');
 
 const commonConfig = require('./common.js');
 
-module.exports = function() {
+module.exports = function () {
   return webpackMerge(commonConfig(), {
     output: {
-      filename: '[name].js'
+      filename: '[name].js',
     },
     devtool: 'source-map',
     plugins: [
       new webpack.DefinePlugin({
         'process.env': {
-          'NODE_ENV': JSON.stringify('production')
-        }
+          'NODE_ENV': JSON.stringify('production'),
+        },
       }),
       new webpack.optimize.UglifyJsPlugin({
         beautify: false,
         mangle: {
           screw_ie8: true,
-          keep_fnames: true
+          keep_fnames: true,
         },
         compress: {
           screw_ie8: true,
-          warnings: false
+          warnings: false,
         },
-        comments: false
+        comments: false,
       }),
       new ExtractTextPlugin('[name].css'),
       new ManifestPlugin({
         fileName: 'manifest.json',
-      })
+      }),
     ],
     module: {
       rules: [
@@ -48,9 +48,9 @@ module.exports = function() {
           use: {
             loader: 'babel-loader',
             options: {
-              presets: ['env']
-            }
-          }
+              presets: ['env'],
+            },
+          },
         },
         {
           test: /\.(s)?css$/,
@@ -63,17 +63,17 @@ module.exports = function() {
                   importLoaders: 1,
                   minimize: {
                     discardComments: {
-                      removeAll: true
+                      removeAll: true,
                     },
                     core: true,
-                    minifyFontValues: true
-                  }
-                }
+                    minifyFontValues: true,
+                  },
+                },
               },
               'postcss-loader',
-              'sass-loader'
-            ]
-          })
+              'sass-loader',
+            ],
+          }),
         },
         {
           test: /\.(jpg|png|gif|svg)$/,
@@ -81,8 +81,8 @@ module.exports = function() {
             loader: 'file-loader',
             options: {
               name: 'img/[name].[ext]',
-            }
-          }
+            },
+          },
         },
         {
           test: /\.(eot|ttf|woff|woff2)$/,
@@ -90,10 +90,10 @@ module.exports = function() {
             loader: 'file-loader',
             options: {
               name: 'fonts/[name].[ext]',
-            }
-          }
-        }
-      ]
+            },
+          },
+        },
+      ],
     },
-  })
+  });
 };