Initial Commit

.babelrc.json

@@ -0,0 +1,3 @@
+{
+	"presets": ["@babel/env"]
+}

.editorconfig

@@ -0,0 +1,17 @@
+# http://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.hbs]
+insert_final_newline = false
+
+[*.md]
+trim_trailing_whitespace = false

.github/workflows/deploy-theme.yml

@@ -0,0 +1,16 @@
+name: Deploy Theme
+on:
+  push:
+    branches:
+      - master
+      - main
+jobs:
+  deploy:
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v3
+      - name: Deploy Ghost Theme
+        uses: TryGhost/action-deploy-theme@v1
+        with:
+          api-url: ${{ secrets.GHOST_ADMIN_API_URL }}
+          api-key: ${{ secrets.GHOST_ADMIN_API_KEY }}

.gitignore

@@ -0,0 +1,24 @@
+b-cov
+*.seed
+*.log
+*.csv
+*.dat
+*.out
+*.pid
+*.gz
+*.zip
+
+pids
+logs
+results
+
+npm-debug.log
+node_modules
+
+.idea/*
+*.iml
+projectFilesBackup
+
+.DS_Store
+
+dist/

README.md

@@ -0,0 +1,5 @@
+![Medium Format Theme](https://github.com/JoeeGrigg/MediumFormat/blob/main/assets/screenshot-destop.jpg?raw=true)
+
+# Medium Format - A Portfolio Ghost Theme
+
+This is a theme designed for photographers to show off their work.

assets/css/index.css

@@ -0,0 +1,66 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  .btn-base {
+    @apply px-4 py-2 rounded-md text-white bg-ghost-accent;
+  }
+
+  .btn-hover {
+    @apply hover:brightness-105;
+  }
+
+  .btn {
+    @apply btn-base btn-hover;
+  }
+
+  .navigation-item {
+    @apply uppercase text-zinc-950 hover:text-zinc-600;
+
+    &.nav-current {
+      @apply text-zinc-600;
+    }
+  }
+
+  .post-header {
+    height: 100vw;
+  }
+
+  @media (min-aspect-ratio: 1/1) {
+    .post-header {
+        @apply h-screen;
+    }
+  }
+}
+
+@layer utilities {
+  .text-ghost-accent {
+    color: var(--ghost-accent-color);
+  }
+
+  .bg-ghost-accent {
+    background-color: var(--ghost-accent-color);
+  }
+
+  .default-flex-row {
+    @apply flex flex-row items-center space-x-4;
+  }
+}
+
+body {
+  font-family: 'Helvetica', 'Arial', sans-serif;
+}
+
+.post-hidden {
+  display: none;
+}
+
+.kg-width-wide {
+  /* width: 150%;
+  max-width: 100vw;
+  margin-left: -25%; */
+}
+
+.kg-width-full {
+}

assets/js/index.js

@@ -0,0 +1,12 @@
+// JavaScript files are compiled and minified during the build process to the assets/built folder. See available scripts in the package.json file.
+
+// Import JS
+import macyFeed from "./macy";
+import infiniteScroll from "./infiniteScroll";
+import lightbox from "./lightbox";
+import mobileMenu from "./mobileMenu";
+
+let macy = macyFeed();
+infiniteScroll(macy);
+lightbox();
+mobileMenu();

assets/js/infiniteScroll.js

@@ -0,0 +1,100 @@
+/*
+This script continously loads post as the user scrolls the page. It uses the IntersectionObserver API to detect when the last post is in view. When the last post is in view, it fetches the next page and appends the posts to the page. It then checks if there is a next page and if there is, it continues to observe the last post. If there is no next page, it disconnects the observer.
+
+Importantly, for this script to work, it requires that each card have the `post` class and that the card container have the `gh-postfeed` class
+*/
+
+let link = document.querySelector('link[rel="next"]')?.getAttribute('href');
+
+// Fetch and parse next page
+async function getNextPage(url) {
+    try {
+        const res = await fetch(url);
+
+        if (!res.ok) {
+            throw new Error('Failed to fetch page')
+        }
+
+        const nextPageHtml = await res.text();
+        const parser = new DOMParser();
+        const parsed = parser.parseFromString(nextPageHtml, 'text/html');
+        const posts = parsed.querySelectorAll('.post');
+
+        posts.forEach(post => {
+            post.classList.add('post-hidden');
+        });
+
+        const nextLink = parsed.querySelector('link[rel="next"]')?.getAttribute('href');
+
+        return {posts, nextLink}
+
+    } catch (error) {
+        throw new Error(error)
+    }
+}
+
+function onAllPostImagesLoaded(posts, callback) {
+    try {
+      const images = Array.from(posts).map(post => {
+        return post.querySelector('img');
+      })
+      const promises = images.map(image => {
+          return new Promise((resolve, reject) => {
+              image.onload = resolve;
+              image.onerror = reject;
+          })
+      })
+
+      Promise.all(promises).then(() => {
+        callback();
+      });
+    } catch (error) {
+      throw new Error(error)
+    }
+}
+
+export default function infiniteScroll(macy) {
+
+    if (!link) { return; }
+
+    const options = {
+        // When the last card is within a 150px of the viewport, fetch the next page. This provides a smoother transition between pages
+       rootMargin: '150px',
+    }
+
+    const callback = (entries, observer) => {
+        try {
+            entries.forEach(entry => {
+
+                if (entry.isIntersecting) {
+
+                    if (link) {
+                        getNextPage(link).then(({posts, nextLink}) => {
+                            posts.forEach(post => {
+                                document.querySelector('.gh-postfeed').append(post)
+                            })
+                            onAllPostImagesLoaded(posts, () => {
+                              posts.forEach(post => { post.classList.remove('post-hidden') });
+                              macy.recalculate(true);
+                            });
+
+                            if (nextLink) {
+                                link = nextLink;
+                                observer.observe(document.querySelector('.post:last-of-type'))
+                            } else {
+                                observer.disconnect()
+                            }
+                        })
+                    }
+                }
+            })
+        } catch (error) {
+            console.log(error)
+        }
+    }
+
+    let observer = new IntersectionObserver(callback, options);
+
+    observer.observe(document.querySelector('.post:last-of-type'))
+
+}

assets/js/lightbox.js

@@ -0,0 +1,16 @@
+import SimpleLightbox from "simplelightbox";
+
+let lightboxContainer = document.querySelector('.lightbox');
+
+export default function macyFeed() {
+
+    if (!lightboxContainer) { return; }
+
+    console.log(lightboxContainer)
+
+    let lightbox = new SimpleLightbox(
+      '.lightbox a',
+      {}
+    );
+
+}

assets/js/macy.js

@@ -0,0 +1,22 @@
+import Macy from 'macy';
+
+let container = document.querySelector('.gh-postfeed');
+
+export default function macyFeed() {
+
+    if (!container) { return; }
+
+    const macy = new Macy({
+      container: container,
+      trueOrder: false,
+      waitForImages: false,
+      margin: 16,
+      columns: 3,
+      breakAt: {
+        1300: 2,
+        700: 1
+      }
+    });
+
+    return macy;
+}

assets/js/mobileMenu.js

@@ -0,0 +1,28 @@
+export default function mobileMenu() {
+  const openToggle = document.getElementById('mobile-menu-open');
+  const closeToggle = document.getElementById('mobile-menu-close');
+  const mobileMenu = document.getElementById('mobile-menu');
+
+  const open = () => {
+    mobileMenu.classList.remove('hidden');
+    document.body.style.overflow = 'hidden';
+  }
+
+  const close = () => {
+    mobileMenu.classList.add('hidden');
+    document.body.style.overflow = 'auto';
+  }
+
+  openToggle.addEventListener('click', () => {
+    open();
+  });
+
+  closeToggle.addEventListener('click', () => {
+    close();
+  });
+
+
+  window.addEventListener('resize', function() {
+    close();
+  });
+}

default.hbs

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="{{@site.locale}}">
+<head>
+
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="{{asset "built/index.css"}}" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/simple-lightbox.min.css">
+  <script src="{{asset "built/index.js"}}" defer></script>
+
+  <title>{{meta_title}}</title>
+
+  {{ghost_head}}
+
+</head>
+<body class="{{body_class}}">
+
+  {{> header}}
+
+  <main>
+    {{{body}}}
+  </main>
+
+  {{> footer}}
+
+  {{ghost_foot}}
+
+</body>
+</html>

error.hbs

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="{{@site.locale}}">
+<head>
+
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="{{asset "built/index.css"}}" />
+    <script src="{{asset "built/index.js"}}" defer></script>
+
+    <title>{{meta_title}}</title>
+
+    {{ghost_head}}
+
+</head>
+
+<body class="{{body_class}}">
+
+  <main class="prose text-center mx-auto my-10">
+    <h1>{{statusCode}}</h1>
+    <p>{{message}}</p>
+    <p><a href="{{@site.url}}">Go to the home page →</a></p>
+
+    {{#if errorDetails}}
+      <section>
+          <h4>Theme errors:</h4>
+          <ul>
+            {{#foreach errorDetails}}
+              <li>
+                <h5>{{{rule}}}</h5>
+
+                {{#foreach failures}}
+                  <span><strong>Ref:</strong> {{ref}}</span><br>
+                  <span><strong>Message:</strong> {{message}}</span>
+                {{/foreach}}
+              </li>
+            {{/foreach}}
+          </ul>
+      </section>
+    {{/if}}
+  </main>
+
+  {{ghost_foot}}
+
+</body>
+</html>