Added Recommendations support (#13)

TryGhost · Oct 20, 2023 · 6cd3396 · 6cd3396
1 parent ea08ce4
commit 6cd3396
Show file tree

Hide file tree

Showing 3 changed files with 122 additions and 21 deletions.
diff --git a/assets/built/source.js b/assets/built/source.js
diff --git a/assets/css/screen.css b/assets/css/screen.css
@@ -1830,15 +1830,18 @@ Search                         LOGO                    Login Subscribe
 /* 13. Sidebar
 /* ---------------------------------------------------------- */
 
-.gh-about {
+.gh-sidebar-inner {
     position: sticky;
     top: calc(var(--grid-gap) / 2);
+}
+
+.gh-about {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     padding: 48px 24px;
-    min-height: 400px;
+    min-height: 380px;
     text-align: center;
     background-color: var(--color-lighter-gray);
 }
@@ -1866,6 +1869,95 @@ Search                         LOGO                    Login Subscribe
     margin-top: 32px;
 }
 
+.gh-recommendations {
+    margin-top: 48px;
+}
+
+.gh-recommendations .recommendations {
+    display: flex;
+    flex-direction: column;
+    gap: 26px;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+}
+
+.gh-recommendations .recommendation:first-child {
+    margin-top: 4px;
+}
+
+.gh-recommendations .recommendation a {
+    display: grid;
+    grid-template-columns: 24px auto;
+    gap: 4px 12px;
+}
+
+.gh-recommendations .recommendation a:hover {
+    opacity: 1;
+}
+
+.gh-recommendations .recommendation-favicon {
+    grid-row: span 2;
+    width: 100%;
+    border-radius: 4px;
+}
+
+.gh-recommendations .recommendation-title {
+    margin-top: -2px;
+    font-size: 1.5rem;
+    font-weight: 650;
+    letter-spacing: -0.009em;
+}
+
+.gh-recommendations .recommendation a:hover .recommendation-title {
+    opacity: 0.8;
+}
+
+.gh-recommendations .recommendation-url {
+    order: 1;
+    overflow: hidden;
+    font-size: 1.4rem;
+    line-height: 1.25;
+    color: var(--color-secondary-text);
+    text-overflow: ellipsis;
+}
+
+.gh-recommendations .recommendation-description {
+    display: -webkit-box;
+    display: none;
+    overflow-y: hidden;
+    grid-column: 2;
+    font-size: 1.4rem;
+    line-height: 1.4;
+    color: var(--color-secondary-text);
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+
+.gh-recommendations button {
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+    margin-top: 24px;
+    padding: 0;
+    cursor: pointer;
+    font-size: 1.2rem;
+    font-weight: 550;
+    letter-spacing: 0.025em;
+    text-transform: uppercase;
+    background-color: transparent;
+    border: 0;
+}
+
+.gh-recommendations button svg {
+    margin-top: -1px;
+    width: 12px;
+}
+
+.gh-recommendations button:hover {
+    opacity: 0.8;
+}
+
 /* 14. Post/page
 /* ---------------------------------------------------------- */
 

diff --git a/partials/components/post-list.hbs b/partials/components/post-list.hbs
@@ -81,26 +81,35 @@
 
         {{#if showSidebar}}
             <aside class="gh-sidebar">
-                <section class="gh-about">
-                    {{#if @site.icon}}
-                        <img class="gh-about-icon" src="{{@site.icon}}" alt="{{@site.title}}" loading="lazy">
-                    {{/if}}
-                    <h3 class="gh-about-title is-title">{{@site.title}}</h3>
-                    {{#if @site.description}}
-                        <p class="gh-about-description is-body">{{@site.description}}</p>
-                    {{/if}}
-                    {{#if @site.members_enabled}}
-                        {{#unless @member}}
-                            <button class="gh-button" data-portal="signup">Subscribe</button>
-                        {{else}}
-                            {{#if @site.paid_members_enabled}}
-                                {{#unless @member.paid}}
-                                    <button class="gh-button" data-portal="upgrade">Upgrade</button>
-                                {{/unless}}
-                            {{/if}}
-                        {{/unless}}
+                <div class="gh-sidebar-inner">
+                    <section class="gh-about">
+                        {{#if @site.icon}}
+                            <img class="gh-about-icon" src="{{@site.icon}}" alt="{{@site.title}}" loading="lazy">
+                        {{/if}}
+                        <h3 class="gh-about-title is-title">{{@site.title}}</h3>
+                        {{#if @site.description}}
+                            <p class="gh-about-description is-body">{{@site.description}}</p>
+                        {{/if}}
+                        {{#if @site.members_enabled}}
+                            {{#unless @member}}
+                                <button class="gh-button" data-portal="signup">Subscribe</button>
+                            {{else}}
+                                {{#if @site.paid_members_enabled}}
+                                    {{#unless @member.paid}}
+                                        <button class="gh-button" data-portal="upgrade">Upgrade</button>
+                                    {{/unless}}
+                                {{/if}}
+                            {{/unless}}
+                        {{/if}}
+                    </section>
+                    {{#if @site.recommendations_enabled}}
+                        <section class="gh-recommendations">
+                            <h4 class="gh-container-title">Recommendations</h4>
+                            {{recommendations}}
+                            <button data-portal="recommendations">See all {{> "icons/arrow"}}</button>
+                        </section>
                     {{/if}}
-                </section>
+                </div>
             </aside>
         {{/if}}