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

Better public sharing page

app/Resources/static/themes/_global/share.js

@@ -0,0 +1 @@
+import './share.scss';

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;
+  }
+}

app/config/webpack/common.js

@@ -9,8 +9,8 @@ module.exports = function() {
     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'),
+      },
     },
   };
 };

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'
-          ]
+            'sass-loader',
+          ],
         },
         {
           test: /\.(jpg|png|gif|svg|eot|ttf|woff|woff2)$/,
-          use: 'url-loader'
+          use: 'url-loader',
         },
-      ]
+      ],
     },
-  })
+  });
 };

app/config/webpack/prod.js

@@ -8,31 +8,31 @@ const commonConfig = require('./common.js');
 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]',
-            }
-          }
-        }
-      ]
             },
-  })
+          },
+        },
+      ],
+    },
+  });
 };

src/Wallabag/CoreBundle/Resources/translations/messages.da.yml

@@ -159,6 +159,7 @@ config:
         #         and: 'One rule AND another'
         #         matches: 'Tests that a <i>subject</i> is matches a <i>search</i> (case-insensitive).<br />Example: <code>title matches "football"</code>'
         #         notmatches: 'Tests that a <i>subject</i> is not matches a <i>search</i> (case-insensitive).<br />Example: <code>title notmatches "football"</code>'
+
 entry:
     page_titles:
         # unread: 'Unread entries'
@@ -244,7 +245,7 @@ entry:
         url_label: 'Url'
         save_label: 'Gem'
     public:
-        # shared_by_wallabag: "This article has been shared by <a href=%wallabag_instance%'>wallabag</a>"
+        # shared_by_wallabag: "This article has been shared by %username% with <a href='%wallabag_instance%'>wallabag</a>"
     confirm:
         # delete: "Are you sure you want to remove that article?"
         # delete_tag: "Are you sure you want to remove that tag from that article?"

src/Wallabag/CoreBundle/Resources/translations/messages.de.yml

@@ -245,7 +245,7 @@ entry:
         url_label: 'URL'
         save_label: 'Speichern'
     public:
-        shared_by_wallabag: "Dieser Artikel wurde mittels <a href='%wallabag_instance%'>wallabag</a> geteilt"
+        shared_by_wallabag: "Dieser Artikel wurde von %username% mittels <a href='%wallabag_instance%'>wallabag</a> geteilt"
     confirm:
         delete: "Bist du sicher, dass du diesen Artikel löschen möchtest?"
         delete_tag: "Bist du sicher, dass du diesen Tag vom Artikel entfernen möchtest?"

src/Wallabag/CoreBundle/Resources/translations/messages.en.yml

@@ -245,7 +245,7 @@ entry:
         url_label: 'Url'
         save_label: 'Save'
     public:
-        shared_by_wallabag: "This article has been shared by <a href='%wallabag_instance%'>wallabag</a>"
+        shared_by_wallabag: "This article has been shared by %username% with <a href='%wallabag_instance%'>wallabag</a>"
     confirm:
         delete: "Are you sure you want to remove that article?"
         delete_tag: "Are you sure you want to remove that tag from that article?"

src/Wallabag/CoreBundle/Resources/translations/messages.fa.yml

@@ -245,7 +245,7 @@ entry:
         url_label: 'نشانی'
         save_label: 'ذخیره'
     public:
-        # shared_by_wallabag: "This article has been shared by <a href='%wallabag_instance%'>wallabag</a>"
+        # shared_by_wallabag: "This article has been shared by %username% with <a href='%wallabag_instance%'>wallabag</a>"
     confirm:
         # delete: "Are you sure you want to remove that article?"
         # delete_tag: "Are you sure you want to remove that tag from that article?"

src/Wallabag/CoreBundle/Resources/translations/messages.fr.yml

@@ -245,7 +245,7 @@ entry:
         url_label: "Adresse"
         save_label: "Enregistrer"
     public:
-        shared_by_wallabag: "Cet article a été partagé par <a href=\"%wallabag_instance%\">wallabag</a>"
+        shared_by_wallabag: "Cet article a été partagé par %username% avec <a href=\"%wallabag_instance%\">wallabag</a>"
     confirm:
         delete: "Voulez-vous vraiment supprimer cet article ?"
         delete_tag: "Voulez-vous vraiment supprimer ce tag de cet article ?"

src/Wallabag/CoreBundle/Resources/translations/messages.it.yml

@@ -245,7 +245,7 @@ entry:
         url_label: 'Url'
         save_label: 'Salva'
     public:
-        # shared_by_wallabag: "This article has been shared by <a href='%wallabag_instance%'>wallabag</a>"
+        shared_by_wallabag: "Questo articolo è stato condiviso da %username% con <a href='%wallabag_instance%'>wallabag</a>"
     confirm:
         delete: "Vuoi veramente rimuovere quell'articolo?"
         delete_tag: "Vuoi veramente rimuovere quell'etichetta da quell'articolo?"

src/Wallabag/CoreBundle/Resources/translations/messages.ro.yml

@@ -245,7 +245,7 @@ entry:
         url_label: 'Url'
         save_label: 'Salvează'
     public:
-        # shared_by_wallabag: "This article has been shared by <a href='%wallabag_instance%'>wallabag</a>"
+        # shared_by_wallabag: "This article has been shared by %username% with <a href='%wallabag_instance%'>wallabag</a>"
     confirm:
         # delete: "Are you sure you want to remove that article?"
         # delete_tag: "Are you sure you want to remove that tag from that article?"

src/Wallabag/CoreBundle/Resources/translations/messages.tr.yml

@@ -243,7 +243,7 @@ entry:
         url_label: 'Url'
         save_label: 'Kaydet'
     public:
-        # shared_by_wallabag: "This article has been shared by <a href='%wallabag_instance%'>wallabag</a>"
+        # shared_by_wallabag: "This article has been shared by %username% with <a href='%wallabag_instance%'>wallabag</a>"
     confirm:
         # delete: "Are you sure you want to remove that article?"
         # delete_tag: "Are you sure you want to remove that tag from that article?"

src/Wallabag/CoreBundle/Resources/views/themes/common/Entry/share.html.twig

@@ -1,32 +1,6 @@
 <html>
     <head>
         <title>{{ entry.title|e|raw }}</title>
-        <style>
-            body {
-                margin: 10px;
-                font-family: 'Roboto',Verdana,Geneva,sans-serif;
-                font-size: 16px;
-                color: #000;
-            }
-            header {
-                text-align: center;
-            }
-
-            header h1 {
-                font-size: 1.3em;
-            }
-
-            a,
-            a:hover,
-            a:visited {
-                color: #000;
-            }
-
-            article {
-                margin: 0 auto;
-                width: 600px;
-            }
-        </style>
         <meta property="og:title" content="{{ entry.title|e|raw }}" />
         <meta property="og:type" content="article" />
         <meta property="og:url" content="{{ app.request.uri }}" />
@@ -40,12 +14,22 @@
         <meta name="twitter:site" content="@wallabagapp" />
         <meta name="twitter:title" content="{{ entry.title|e|raw }}" />
         <meta name="twitter:description" content="{{ entry.content|striptags|slice(0, 300)|raw }}&hellip;" />
+        {% if app.debug %}
+            <script src="{{ asset('bundles/wallabagcore/public.dev.js') }}"></script>
+        {% else %}
+            <link rel="stylesheet" href="{{ asset('bundles/wallabagcore/public.css') }}">
+        {% endif %}
+
     </head>
     <body>
         <header>
             <h1>{{ entry.title|e|raw }}</h1>
             <div><a href="{{ entry.url|e }}" target="_blank" title="{{ 'entry.view.original_article'|trans }} : {{ entry.title|e|raw }}" class="tool">{{ entry.domainName|removeWww }}</a></div>
-            <div>{{ "entry.public.shared_by_wallabag"|trans({'%wallabag_instance%': url('homepage')})|raw }}</div>
+            <div>{{ "entry.public.shared_by_wallabag"|trans({'%wallabag_instance%': url('homepage'), '%username%': entry.user.username})|raw }}.</div>
+
+            {% if entry.previewPicture is not null %}
+                <div><img class="preview" src="{{ entry.previewPicture }}" alt="{{ entry.title|striptags|e('html_attr') }}" /></div>
+            {% endif %}
         </header>
         <article>
             {{ entry.content | raw }}

web/bundles/wallabagcore/manifest.json

@@ -67,5 +67,8 @@
   "img/unmark-icon--black.png": "img/unmark-icon--black.png",
   "material.css": "material.css",
   "material.css.map": "material.css.map",
-  "material.js": "material.js"
+  "material.js": "material.js",
+  "public.css": "public.css",
+  "public.css.map": "public.css.map",
+  "public.js": "public.js"
 }

web/bundles/wallabagcore/public.css

@@ -0,0 +1,2 @@
+a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,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:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-spacing:0}body{background-color:#fff;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:.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:.75em}b,strong{font-weight:700}em,i{font-style:italic}a{color:#444;text-decoration:underline}a:active,a:hover{outline:0}dl,ol,p,ul{margin:0 0 1.75em}ol,ul{padding-left:1.25em}li{padding-bottom:.2em;line-height:1.6}li li:last-child,li p:last-child{margin-bottom:-.2em}ol li:last-child,ul li:last-child{padding-bottom:0}mark{padding:0 .2em}mark a{text-decoration:none}blockquote{font-style:italic;border-left:.25em solid #000;margin-left:-20px;padding-left:17px;margin-bottom:.5em;margin-top:.5em}blockquote cite{text-transform:uppercase;font-size:.8em;font-style:normal}blockquote cite:before{content:"\2014";margin-right:.5em}img{display:block;height:auto;margin-bottom:.5em;max-width:100%}figure{margin:0}figure figcaption{display:block;margin-top:.3em;font-style:italic;font-size:.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:.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:700}dl dd,dl dt{margin-bottom:1em}dl dd{margin-left:12.5em}pre{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;margin:4em 0;border:.0625em solid #efefef;width:100%;padding:1em;font-family:Consolas,monospace;white-space:pre;overflow:auto}pre code{line-height:1.6em;white-space:pre-wrap;background:transparent;border:none;padding:0;vertical-align:inherit}code,pre code{font-size:.8em}code{padding:.125em .375em;margin:0 .2em;font-family:Consolas,monospace;white-space:pre;border:1px solid #d3d3d3;overflow:auto}audio,video{max-width:43.75em}::selection,mark{background:#666;color:#fff}table{border-collapse:collapse;margin-bottom:2em;width:100%}td,th{padding:.25em;text-align:left}thead tr{text-transform:uppercase;font-size:.85em;letter-spacing:1px;font-family:Segoe UI,sans-serif;font-weight:600}tbody tr:nth-child(odd){background:rgba(0,0,0,.1)}tbody{border:solid #999;border-width:1px 0}article{padding:0 1em}@media (min-width:720px){blockquote{margin-left:-1.4375em;padding-left:1.25em}article{padding:0 1.25em}article,header{margin:0 auto;max-width:43.75em}header{margin-top:32px;text-align:center}}
+/*# sourceMappingURL=public.css.map*/

web/bundles/wallabagcore/public.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"public.css","sourceRoot":""}

web/bundles/wallabagcore/public.js

@@ -0,0 +1 @@
+!function(e){function __webpack_require__(r){if(_[r])return _[r].exports;var u=_[r]={i:r,l:!1,exports:{}};return e[r].call(u.exports,u,u.exports,__webpack_require__),u.l=!0,u.exports}var _={};__webpack_require__.m=e,__webpack_require__.c=_,__webpack_require__.i=function(e){return e},__webpack_require__.d=function(e,_,r){__webpack_require__.o(e,_)||Object.defineProperty(e,_,{configurable:!1,enumerable:!0,get:r})},__webpack_require__.n=function(e){var _=e&&e.__esModule?function(){return e.default}:function(){return e};return __webpack_require__.d(_,"a",_),_},__webpack_require__.o=function(e,_){return Object.prototype.hasOwnProperty.call(e,_)},__webpack_require__.p="/bundles/wallabagcore/",__webpack_require__(__webpack_require__.s=51)}({46:function(e,_){},51:function(e,_,r){"use strict";r(46)}});