Add css on share public page

[github/wallabag/wallabag.git] / src / Wallabag / CoreBundle / Resources / views / themes / common / Entry / share.html.twig
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/common/Entry/share.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/common/Entry/share.html.twig

index b82b3d3d86c7f75e64fcd264210ca29173c3a81a..2e8fe65c64bc6be83f30cf7498e9fde5eeb3b325 100644 (file)
--- a/src/Wallabag/CoreBundle/Resources/views/themes/common/Entry/share.html.twig
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/common/Entry/share.html.twig
@@ -1,37 +1,34 @@
  <html>
      <head>
-        <title>{{ entry.title | raw }}</title>
-        <style>
-            body {
-                margin: 10px;
-                font-family: 'Roboto',Verdana,Geneva,sans-serif;
-                font-size: 16px;
-                color: #000;
-            }
-            header {
-                text-align: center;
-            }
+        <title>{{ entry.title|e|raw }}</title>
+        <meta property="og:title" content="{{ entry.title|e|raw }}" />
+        <meta property="og:type" content="article" />
+        <meta property="og:url" content="{{ app.request.uri }}" />
+        {% set picturePath = app.request.schemeAndHttpHost ~ asset('bundles/wallabagcore/themes/_global/img/logo-other_themes.png') %}
+        {% if entry.previewPicture is not null %}
+            {% set picturePath = entry.previewPicture %}
+        {% endif %}
+        <meta property="og:image" content="{{ picturePath }}" />
+        <meta name="twitter:card" content="summary" />
+        <meta name="twitter:image" content="{{ picturePath }}" />
+        <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 not app.debug %}
+            <link rel="stylesheet" href="{{ asset('bundles/wallabagcore/public.css') }}">
+        {% endif %}
  
-            header h1 {
-                font-size: 1.3em;
-            }
-
-            a,
-            a:hover,
-            a:visited {
-                color: #000;
-            }
-
-            article {
-                margin: 0 auto;
-                width: 600px;
-            }
-        </style>
+        <script src="{{ asset('bundles/wallabagcore/public' ~ (app.debug ? '.dev' : '') ~ '.js') }}"></script>
      </head>
      <body>
          <header>
-            <h1>{{ entry.title | raw }}</h1>
-            <span><a href="{{ entry.url|e }}" target="_blank" title="{{ 'entry.view.original_article'|trans }} : {{ entry.title|e }}" class="tool">{{ entry.domainName|removeWww }}</a></span>
+            <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'), '%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 }}