embed.blade.php 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. <!DOCTYPE html>
  2. <html lang="{{ app()->getLocale() }}">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <meta name="mobile-web-app-capable" content="yes">
  8. <title>{{ $title ?? config('app.name', 'Pixelfed') }}</title>
  9. <meta property="og:site_name" content="{{ config('app.name', 'pixelfed') }}">
  10. <meta property="og:title" content="{{ $title ?? config('app.name', 'pixelfed') }}">
  11. <meta property="og:type" content="article">
  12. <meta property="og:url" content="{{$profile['url']}}">
  13. <meta name="medium" content="image">
  14. <meta name="theme-color" content="#10c5f8">
  15. <meta name="apple-mobile-web-app-capable" content="yes">
  16. <link rel="shortcut icon" type="image/png" href="{{url('/img/favicon.png?v=2')}}">
  17. <link rel="apple-touch-icon" type="image/png" href="{{url('/img/favicon.png?v=2')}}">
  18. <link href="{{ mix('css/app.css') }}" rel="stylesheet">
  19. <style type="text/css">
  20. body.embed-card {
  21. background: #fff !important;
  22. margin: 0;
  23. padding-bottom: 0;
  24. }
  25. .status-card-embed {
  26. box-shadow: none;
  27. border-radius: 4px;
  28. overflow: hidden;
  29. }
  30. </style>
  31. </head>
  32. <body class="bg-white">
  33. <div class="embed-card">
  34. <div class="card status-card-embed card-md-rounded-0 border">
  35. <div class="card-header d-inline-flex align-items-center justify-content-between bg-white">
  36. <div>
  37. <img src="{{$profile['avatar']}}" width="32px" height="32px" style="border-radius: 32px;">
  38. <a class="username font-weight-bold pl-2 text-dark" target="_blank" href="{{$profile['url']}}">
  39. {{$profile['username']}}
  40. </a>
  41. </div>
  42. <div>
  43. <a class="small font-weight-bold text-muted pr-1" href="{{config('app.url')}}" target="_blank">{{config('pixelfed.domain.app')}}</a>
  44. <img src="/img/pixelfed-icon-color.svg" width="26px">
  45. </div>
  46. </div>
  47. <div class="card-body pb-1">
  48. <div class="d-flex justify-content-between align-items-center">
  49. <div class="text-center">
  50. <p class="mb-0 font-weight-bold prettyCount" data-count="{{$profile['statuses_count']}}"></p>
  51. <p class="mb-0 text-muted text-uppercase small font-weight-bold">Posts</p>
  52. </div>
  53. <div class="text-center">
  54. <p class="mb-0 font-weight-bold prettyCount" data-count="{{$profile['followers_count']}}"></p>
  55. <p class="mb-0 text-muted text-uppercase small font-weight-bold">Followers</p>
  56. </div>
  57. <div class="text-center">
  58. <p class="mb-0"><a href="/i/intent/follow?user={{$profile['username']}}" class="btn btn-primary btn-sm py-1 px-4 text-uppercase font-weight-bold" target="_blank">Follow</a></p>
  59. </div>
  60. </div>
  61. <div class="row mt-4 mb-1 embed-row"></div>
  62. </div>
  63. <div class="card-footer bg-white">
  64. <p class="text-center mb-0">
  65. <a href="{{$profile['url']}}" class="font-weight-bold" target="_blank">View More Posts</a>
  66. </p>
  67. </div>
  68. </div>
  69. </div>
  70. <script type="text/javascript" src="{{mix('js/manifest.js')}}"></script>
  71. <script type="text/javascript" src="{{mix('js/vendor.js')}}"></script>
  72. <script type="text/javascript" src="{{mix('js/app.js')}}"></script>
  73. <script type="text/javascript">
  74. window.addEventListener("message", e=>{const t=e.data||{};});
  75. </script>
  76. <script type="text/javascript">document.querySelectorAll('.caption-container a').forEach(function(i) {i.setAttribute('target', '_blank');});</script>
  77. <script type="text/javascript">
  78. document.querySelectorAll('.prettyCount').forEach(function(i) {
  79. i.innerText = App.util.format.count(i.getAttribute('data-count'));
  80. });
  81. </script>
  82. <script type="text/javascript">
  83. axios.get('/api/pixelfed/v1/accounts/{{$profile['id']}}/statuses', {
  84. params: {
  85. only_media: true,
  86. limit: 24
  87. }
  88. })
  89. .then(res => {
  90. let parent = $('.embed-row');
  91. res.data
  92. .filter(res => res.pf_type == 'photo')
  93. .filter(res => !res.sensitive)
  94. .slice(0, 9)
  95. .forEach(post => {
  96. let el = `<div class="col-4 mt-2 px-0">
  97. <a class="card info-overlay card-md-border-0 px-1 shadow-none" href="${post.url}" target="_blank">
  98. <div class="square">
  99. <div class="square-content" style="background-image: url('${post.media_attachments[0].url}')">
  100. </div>
  101. </div>
  102. </a>
  103. </div>`;
  104. parent.append(el);
  105. })
  106. })
  107. .finally(() => {
  108. window.parent.postMessage({type:"setHeight",id:0,height:document.getElementsByTagName("html")[0].scrollHeight},"*");
  109. setTimeout(() => {
  110. window.parent.postMessage({type:"setHeight",id:0,height:document.getElementsByTagName("html")[0].scrollHeight},"*");
  111. }, 5000);
  112. })
  113. </script>
  114. </body>
  115. </html>