feat: blog style update

TryGhost · Mar 8, 2023 · a522d7e · a522d7e
1 parent f16a756
commit a522d7e
Show file tree

Hide file tree

Showing 18 changed files with 164 additions and 29 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,5 @@
 yarn.lock
 node_modules
 .idea
-dist
+dist
+assets/built/*
diff --git a/assets/built/main.min.js b/assets/built/main.min.js
diff --git a/assets/built/main.min.js.map b/assets/built/main.min.js.map
diff --git a/assets/built/screen.css b/assets/built/screen.css
diff --git a/assets/built/screen.css.map b/assets/built/screen.css.map
diff --git a/assets/css/blog/social-media.css b/assets/css/blog/social-media.css
@@ -0,0 +1,88 @@
+.social-media {
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 20;
+  display: flex;
+  background-color: rgba(255, 255, 255, 0.95);
+  justify-content: space-around;
+  align-items: center;
+  border-radius: 24px;
+  padding: 0px 8px;
+  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.12);
+  backdrop-filter: blur(2px);
+}
+.social-media-item {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  gap: 8px;
+  color: rgba(29, 33, 41, 1);
+}
+.social-media span{
+  margin-left: 3px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 22px;
+}
+.social-media-separator {
+  width: 1px;
+  height: 16px;
+  background: #E5E6EB;
+  border-radius: 1px;
+}
+.social-media-item:hover path[fill="#1D2129"]{
+  fill:#654AEC;
+}
+.social-media-item:hover path[stroke="#1D2129"] {
+  stroke: #654AEC;
+}
+.social-media-item:hover span {
+  color: #654AEC;
+}
+.social-media-share {
+  position: relative;
+}
+.share-list {
+  display: none;
+  width: 15rem;
+  padding: 1rem;
+  font-size: 1rem;
+  line-height: 1.25rem;
+  font-weight: 600;
+  list-style: none;
+  position: absolute;
+  bottom: 50px;
+  right: 0;
+  border-radius: 0.25rem;
+  background-color: rgba(255, 255, 255, 0.95);
+  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.12);
+  backdrop-filter: blur(2px);
+}
+.share-list li {
+  width: 100%;
+  align-items: center;
+  padding: 0 16px;
+  line-height: 32px;
+  display: flex;
+  font-weight: 400;
+  cursor: pointer;
+  color: rgba(29, 33, 41, 1);
+}
+.share-list a {
+  display: block;
+  width: 100%;
+}
+.share-list li:hover {
+  background-color: rgb(243, 243, 245);
+}
+
+@media (max-width: 767px) {
+  .social-media {
+    width: 221px;
+  }
+  .social-media-item span {
+    display: none;
+  }
+}
diff --git a/assets/css/screen.css b/assets/css/screen.css
@@ -12,3 +12,4 @@
 @import "blog/comment.css";
 @import "blog/related.css";
 @import "misc/utilities.css";
+@import "blog/social-media.css"
diff --git a/assets/js/main.js b/assets/js/main.js
@@ -1,3 +1,16 @@
 (function () {
     pagination(true);
+    const share = document.querySelector('.social-media-share')
+    const shareList = document.querySelector('.share-list')
+
+    share &&  share.addEventListener('click', (event) => {
+        shareList.style.display = 'block'
+        event.stopPropagation()
+    })
+    window.addEventListener('click', () => {
+        if(!shareList) return
+        if(shareList.style.display === 'block')  {
+            shareList.style.display = 'none'
+        }
+    })
 })();
diff --git a/default.hbs b/default.hbs
@@ -17,7 +17,7 @@
         <div class="gh-head-inner gh-inner">
             <div class="gh-head-brand">
                 <div class="gh-head-brand-wrapper">
-                    <a class="gh-head-logo" href="{{@site.url}}">
+                    <a class="gh-head-logo" href="https://www.illacloud.com/">
                         {{#if @site.logo}}
                             <img src="{{@site.logo}}" alt="{{@site.title}}">
                         {{else}}
@@ -39,25 +39,10 @@
             </nav>
 
             <div class="gh-head-actions">
-                {{#unless @site.members_enabled}}
                     {{^match @custom.navigation_layout "Stacked"}}
                         <button class="gh-search gh-icon-btn" aria-label="Search this site" data-ghost-search>{{> "icons/search"}}</button>
                     {{/match}}
-                {{else}}
-                    <button class="gh-search gh-icon-btn" aria-label="Search this site" data-ghost-search>{{> "icons/search"}}</button>
-                    <div class="gh-head-members">
-                        {{#unless @member}}
-                            {{#unless @site.members_invite_only}}
-                                <a class="gh-head-link" href="#/portal/signin" data-portal="signin">Sign in</a>
-                                <a class="gh-head-btn gh-btn gh-primary-btn" href="#/portal/signup" data-portal="signup">Subscribe</a>
-                            {{else}}
-                                <a class="gh-head-btn gh-btn gh-primary-btn" href="#/portal/signin" data-portal="signin">Sign in</a>
-                            {{/unless}}
-                        {{else}}
-                            <a class="gh-head-btn gh-btn gh-primary-btn" href="#/portal/account" data-portal="account">Account</a>
-                        {{/unless}}
-                    </div>
-                {{/unless}}
+                    <a class="gh-head-btn gh-btn gh-primary-btn" href="https://www.illacloud.com/" target="_blank" >SIGN IN</a>
             </div>
         </div>
     </header>
@@ -67,7 +52,7 @@
     </div>
 
     <footer class="gh-foot gh-outer">
-        <div class="gh-foot-inner gh-inner">
+        {{!-- <div class="gh-foot-inner gh-inner">
             <div class="gh-copyright">
                 {{@site.title}} © {{date format="YYYY"}}
             </div>
@@ -77,7 +62,7 @@
             <div class="gh-powered-by">
                 <a href="https://ghost.org/" target="_blank" rel="noopener">Powered by Ghost</a>
             </div>
-        </div>
+        </div> --}}
     </footer>
 
 </div>

diff --git a/index.hbs b/index.hbs
@@ -8,6 +8,7 @@
             {{> "loop"}}
         {{/foreach}}
     </div>
+    {{> "social-media-index"}}
 
 </main>
 </div>
diff --git a/partials/icons/discord.hbs b/partials/icons/discord.hbs
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" >
+<path d="M20.2475 4.49344C20.2409 4.48067 20.23 4.47067 20.2167 4.46522C18.6794 3.75992 17.0572 3.25699 15.3906 2.96901C15.3755 2.96619 15.3598 2.96822 15.3459 2.97481C15.332 2.9814 15.3205 2.99221 15.3131 3.0057C15.0922 3.40662 14.8917 3.81844 14.7123 4.23957C12.9158 3.96686 11.0884 3.96686 9.29187 4.23957C9.11129 3.81737 8.90755 3.40545 8.68158 3.0057C8.67383 2.9925 8.66229 2.98194 8.64845 2.9754C8.63461 2.96885 8.61912 2.96662 8.604 2.96901C6.93722 3.25638 5.3149 3.75935 3.77787 4.46526C3.76472 4.47084 3.75361 4.48036 3.7461 4.49252C0.67235 9.08276 -0.169666 13.5601 0.243398 17.9821C0.24456 17.9929 0.24789 18.0034 0.253189 18.0129C0.258488 18.0225 0.265649 18.0308 0.274245 18.0375C2.06406 19.3627 4.06599 20.3743 6.19461 21.029C6.2096 21.0335 6.22561 21.0333 6.24048 21.0284C6.25535 21.0236 6.26837 21.0142 6.27779 21.0018C6.73497 20.3797 7.14007 19.721 7.48896 19.0323C7.49376 19.0229 7.49649 19.0125 7.49699 19.0019C7.49749 18.9913 7.49575 18.9808 7.49186 18.9709C7.48798 18.961 7.48205 18.9521 7.47447 18.9447C7.46689 18.9373 7.45782 18.9316 7.44787 18.928C6.80907 18.6835 6.19063 18.3889 5.59836 18.0468C5.5876 18.0405 5.57856 18.0316 5.57205 18.0209C5.56553 18.0103 5.56174 17.9982 5.561 17.9858C5.56027 17.9733 5.56261 17.9609 5.56782 17.9495C5.57304 17.9382 5.58096 17.9283 5.5909 17.9207C5.71553 17.8277 5.83799 17.7317 5.9582 17.633C5.96874 17.6243 5.9815 17.6187 5.99503 17.6169C6.00857 17.6151 6.02235 17.6171 6.03481 17.6226C9.91501 19.3935 14.1159 19.3935 17.9501 17.6226C17.9626 17.6167 17.9766 17.6144 17.9903 17.6161C18.004 17.6178 18.017 17.6233 18.0277 17.632C18.1481 17.7313 18.2708 17.8276 18.3959 17.9207C18.4059 17.9282 18.4139 17.938 18.4192 17.9493C18.4245 17.9606 18.427 17.9731 18.4263 17.9855C18.4257 17.998 18.422 18.0101 18.4155 18.0208C18.4091 18.0315 18.4001 18.0404 18.3894 18.0468C17.7985 18.3918 17.1795 18.6862 16.539 18.927C16.5291 18.9308 16.52 18.9367 16.5125 18.9442C16.505 18.9517 16.4991 18.9607 16.4953 18.9707C16.4915 18.9806 16.4898 18.9912 16.4904 19.0018C16.491 19.0125 16.4938 19.0229 16.4987 19.0323C16.8534 19.7171 17.2579 20.375 17.7089 21.0007C17.7181 21.0135 17.731 21.0231 17.746 21.0282C17.7609 21.0333 17.777 21.0335 17.7921 21.0289C19.9245 20.3764 21.93 19.3647 23.722 18.0375C23.7308 18.0311 23.738 18.023 23.7433 18.0136C23.7487 18.0042 23.7519 17.9938 23.7529 17.983C24.2474 12.8708 22.925 8.4301 20.2475 4.49344V4.49344ZM8.06844 15.2896C6.90021 15.2896 5.93763 14.2175 5.93763 12.9009C5.93763 11.5843 6.88154 10.5122 8.06844 10.5122C9.26461 10.5122 10.2179 11.5936 10.1992 12.9008C10.1992 14.2175 9.25525 15.2896 8.06844 15.2896V15.2896ZM15.9467 15.2896C14.7785 15.2896 13.8159 14.2175 13.8159 12.9009C13.8159 11.5843 14.7598 10.5122 15.9467 10.5122C17.1429 10.5122 18.0961 11.5936 18.0775 12.9008C18.0775 14.2175 17.1429 15.2896 15.9467 15.2896Z" fill="#1D2129"/>
+</svg>
diff --git a/partials/icons/github.hbs b/partials/icons/github.hbs
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 11.8048C0 16.9607 3.35822 21.3444 8.0387 22.9537C8.66931 23.1113 8.57322 22.6681 8.57322 22.3687V20.3231C4.93373 20.7426 4.78859 18.373 4.54235 17.9781C4.04788 17.1478 2.88276 16.9361 3.2301 16.5411C4.05889 16.1216 4.9037 16.6475 5.88064 18.0707C6.58831 19.1018 7.96864 18.9275 8.67031 18.7551C8.82089 18.1445 9.14355 17.5881 9.6012 17.1498C5.83159 16.486 4.25908 14.2217 4.25908 11.5281C4.25908 10.2221 4.6975 9.02154 5.55532 8.05241C5.0088 6.45493 5.60637 5.0889 5.68545 4.88601C7.24494 4.74813 8.86249 5.98416 8.98861 6.08068C9.87446 5.84529 10.8844 5.72119 12.0145 5.72119C13.1506 5.72119 14.1666 5.84923 15.0574 6.08757C15.3577 5.86105 16.8612 4.80033 18.3105 4.93033C18.3876 5.13322 18.9712 6.46773 18.4577 8.04256C19.3275 9.01366 19.7699 10.2251 19.7699 11.535C19.7699 14.2326 18.1884 16.4988 14.4078 17.1547C14.7316 17.4685 14.9886 17.8426 15.1639 18.2552C15.3392 18.6678 15.4293 19.1106 15.4288 19.5578V22.5273C15.4498 22.7646 15.4288 23 15.8322 23C20.5807 21.4252 24 17.0089 24 11.8068C24 5.28292 18.6258 1.23853e-06 12.0015 1.23853e-06C5.36914 -0.00295341 0 5.28095 0 11.8048Z" fill="#1D2129"/>
+</svg>
diff --git a/partials/icons/share.hbs b/partials/icons/share.hbs
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" >
+<path d="M7.5 10.5L13.5 6.75" stroke="#1D2129" stroke-width="1.5"/>
+<path d="M7.5 13.5L13.5 16.5" stroke="#1D2129" stroke-width="1.5"/>
+<path d="M15.75 9C17.4069 9 18.75 7.65685 18.75 6H17.25C17.25 6.82843 16.5784 7.5 15.75 7.5V9ZM12.75 6C12.75 7.65685 14.0931 9 15.75 9V7.5C14.9216 7.5 14.25 6.82843 14.25 6H12.75ZM15.75 3C14.0931 3 12.75 4.34315 12.75 6H14.25C14.25 5.17157 14.9216 4.5 15.75 4.5V3ZM18.75 6C18.75 4.34315 17.4069 3 15.75 3V4.5C16.5784 4.5 17.25 5.17157 17.25 6H18.75ZM15.75 20.25C17.4069 20.25 18.75 18.9069 18.75 17.25H17.25C17.25 18.0784 16.5784 18.75 15.75 18.75V20.25ZM12.75 17.25C12.75 18.9069 14.0931 20.25 15.75 20.25V18.75C14.9216 18.75 14.25 18.0784 14.25 17.25H12.75ZM15.75 14.25C14.0931 14.25 12.75 15.5931 12.75 17.25H14.25C14.25 16.4216 14.9216 15.75 15.75 15.75V14.25ZM18.75 17.25C18.75 15.5931 17.4069 14.25 15.75 14.25V15.75C16.5784 15.75 17.25 16.4216 17.25 17.25H18.75ZM7.5 12C7.5 12.8284 6.82843 13.5 6 13.5V15C7.65685 15 9 13.6569 9 12H7.5ZM6 10.5C6.82843 10.5 7.5 11.1716 7.5 12H9C9 10.3431 7.65685 9 6 9V10.5ZM4.5 12C4.5 11.1716 5.17157 10.5 6 10.5V9C4.34315 9 3 10.3431 3 12H4.5ZM6 13.5C5.17157 13.5 4.5 12.8284 4.5 12H3C3 13.6569 4.34315 15 6 15V13.5Z" fill="#1D2129"/>
+</svg>
diff --git a/partials/related-posts.hbs b/partials/related-posts.hbs
@@ -1,4 +1,4 @@
-<div class="related-wrapper gh-outer">
+{{!-- <div class="related-wrapper gh-outer">
     {{#get "posts" limit="4" filter="tags:[{{post.tags}}]+id:-{{post.id}}" include="tags,authors" as |related|}}
         {{#if related}}
         <section class="related-posts gh-inner">
@@ -13,4 +13,4 @@
         </section>
         {{/if}}
     {{/get}}
-</div>
+</div> --}}
diff --git a/partials/social-media-index.hbs b/partials/social-media-index.hbs
@@ -0,0 +1,3 @@
+<div class="social-media" style="bottom: 60px"> 
+  {{> "social-media"}}
+</div>
diff --git a/partials/social-media-post.hbs b/partials/social-media-post.hbs
@@ -0,0 +1,29 @@
+<div class="social-media post-social-media" style="bottom: 60px"> 
+  {{> "social-media"}}
+  <div class="social-media-separator"></div>
+  <div class="social-media-item social-media-share">
+    {{> "icons/share"}}
+    <span>Share</span>
+    <ul class="share-list">
+      {{!-- 比较tricky, 但当前仅能使用这种方式去定义list, 没办法去操作数据层定义变量 --}}
+      <li>
+        <a href="https://twitter.com/share?url={{encode url}}&text={{encode title}}" target="_blank">Twitter</a>
+      </li>
+      <li>
+        <a href="http://www.reddit.com/submit?url={{encode url}}&title={{encode title}}"  target="_blank">Reddit</a>
+      </li>
+      <li>
+        <a data-url="https://www.linkedin.com/cws/share?url={{encode url}}" target="_blank">LinkedIn</a>
+      </li>
+      <li>
+        <a href="http://news.ycombinator.com/submitlink?u={{encode url}}&t={{encode title}}" target="_blank">Hacker News</a>
+      </li>
+      <li>
+        <a href="https://www.facebook.com/sharer/sharer.php?u={{encode url}}" target="_blank">Facebook</a>
+      </li>
+      <li>
+        <a href="https://api.whatsapp.com/send?text={{encode title}} {{encode url}}&" target="_blank">WhatsApp</a>
+      </li>
+    </ul>
+  </div>
+</div>
diff --git a/partials/social-media.hbs b/partials/social-media.hbs
@@ -0,0 +1,9 @@
+<a class="social-media-item" href="https://github.com/illacloud/illa-builder" target="_blank">
+  {{> "icons/github"}}
+  <span>Star us</span>
+</a>
+<div class="social-media-separator"></div>
+<a class="social-media-item" href="https://discord.gg/illacloud" target="_blank">
+  {{> "icons/discord"}}
+  <span>Join Discord</span>
+</a>
diff --git a/post.hbs b/post.hbs
@@ -31,7 +31,7 @@
         </div>
 
     </article>
-
+    {{> "social-media-post"}}
     {{> "post-navigation"}}
 
     {{#if comments}}