From 697127e8bb4963ce1495253aef096ccc1cde605b Mon Sep 17 00:00:00 2001
From: saberzero1 <github@emilebangma.com>
Date: Wed, 14 Aug 2024 16:38:27 +0200
Subject: [PATCH] Add tablet layout

---
 quartz.layout.ts                 |  3 +++
 quartz/components/TabletOnly.tsx | 18 ++++++++++++++++++
 quartz/components/index.ts       |  2 ++
 quartz/components/types.ts       |  2 +-
 quartz/styles/base.scss          | 17 +++++++----------
 5 files changed, 31 insertions(+), 11 deletions(-)
 create mode 100644 quartz/components/TabletOnly.tsx

diff --git a/quartz.layout.ts b/quartz.layout.ts
index 4a78256aa..e76fdaee4 100644
--- a/quartz.layout.ts
+++ b/quartz.layout.ts
@@ -27,6 +27,8 @@ export const defaultContentPageLayout: PageLayout = {
     Component.MobileOnly(Component.Spacer()),
     Component.Search(),
     Component.Darkmode(),
+    Component.TabletOnly(Component.TableOfContents()),
+    Component.TabletOnly(Component.Explorer()),
     Component.DesktopOnly(Component.Explorer()),
   ],
   right: [
@@ -44,6 +46,7 @@ export const defaultListPageLayout: PageLayout = {
     Component.MobileOnly(Component.Spacer()),
     Component.Search(),
     Component.Darkmode(),
+    Component.TabletOnly(Component.Explorer()),
     Component.DesktopOnly(Component.Explorer()),
   ],
   right: [],
diff --git a/quartz/components/TabletOnly.tsx b/quartz/components/TabletOnly.tsx
new file mode 100644
index 000000000..be11828a8
--- /dev/null
+++ b/quartz/components/TabletOnly.tsx
@@ -0,0 +1,18 @@
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
+
+export default ((component?: QuartzComponent) => {
+  if (component) {
+    const Component = component
+    const TabletOnly: QuartzComponent = (props: QuartzComponentProps) => {
+      return <Component displayClass="tablet-only" {...props} />
+    }
+
+    TabletOnly.displayName = component.displayName
+    TabletOnly.afterDOMLoaded = component?.afterDOMLoaded
+    TabletOnly.beforeDOMLoaded = component?.beforeDOMLoaded
+    TabletOnly.css = component?.css
+    return TabletOnly
+  } else {
+    return () => <></>
+  }
+}) satisfies QuartzComponentConstructor
diff --git a/quartz/components/index.ts b/quartz/components/index.ts
index 5b197941c..646f265a5 100644
--- a/quartz/components/index.ts
+++ b/quartz/components/index.ts
@@ -16,6 +16,7 @@ import Backlinks from "./Backlinks"
 import Search from "./Search"
 import Footer from "./Footer"
 import DesktopOnly from "./DesktopOnly"
+import TabletOnly from "./TabletOnly"
 import MobileOnly from "./MobileOnly"
 import RecentNotes from "./RecentNotes"
 import Breadcrumbs from "./Breadcrumbs"
@@ -39,6 +40,7 @@ export {
   Search,
   Footer,
   DesktopOnly,
+  TabletOnly,
   MobileOnly,
   RecentNotes,
   NotFound,
diff --git a/quartz/components/types.ts b/quartz/components/types.ts
index a6b90d3b2..8d31149b7 100644
--- a/quartz/components/types.ts
+++ b/quartz/components/types.ts
@@ -13,7 +13,7 @@ export type QuartzComponentProps = {
   children: (QuartzComponent | JSX.Element)[]
   tree: Node
   allFiles: QuartzPluginData[]
-  displayClass?: "mobile-only" | "desktop-only"
+  displayClass?: "mobile-only" | "tablet-only" | "desktop-only"
 } & JSX.IntrinsicAttributes & {
     [key: string]: any
   }
diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
index 7a3722c50..e904fe3b5 100644
--- a/quartz/styles/base.scss
+++ b/quartz/styles/base.scss
@@ -109,13 +109,15 @@ a {
 
 .desktop-only {
   display: initial;
-  @media all and ($mobile) {
+  @media all and ($desktop) {
     display: none;
   }
-  &.toc {
-    @media all and ($tablet) {
-      display: none;
-    }
+}
+
+.tablet-only {
+  display: none;
+  @media all and ($desktop) and (not ($mobile)) {
+    display: initial;
   }
 }
 
@@ -124,11 +126,6 @@ a {
   @media all and ($mobile) {
     display: initial;
   }
-  &.toc {
-    @media all and ($tablet) {
-      display: initial;
-    }
-  }
 }
 
 .page {