diff --git a/src/content/config.ts b/src/content/config.ts index aef013a..e1380b5 100644 --- a/src/content/config.ts +++ b/src/content/config.ts @@ -53,6 +53,7 @@ const sketchnotesCollection = defineCollection({ schema: z.object({ title: z.string(), sort: z.number().optional(), + coverSize: z.enum(['small', 'medium', 'large']).default('small'), images: z.array( z.object({ src: z.string(), diff --git a/src/content/sketchnotes/being-a-good-listener.mdx b/src/content/sketchnotes/being-a-good-listener.mdx index 2478fcc..fecc783 100644 --- a/src/content/sketchnotes/being-a-good-listener.mdx +++ b/src/content/sketchnotes/being-a-good-listener.mdx @@ -1,6 +1,7 @@ --- title: Being a Good Listener sort: 100 +coverSize: medium images: - src: /assets/images/sketchnotes/being-a-good-listener.jpg aspectRatio: 1.35 diff --git a/src/content/sketchnotes/bikablo-practice.mdx b/src/content/sketchnotes/bikablo-practice.mdx index d6aebd2..e256d2b 100644 --- a/src/content/sketchnotes/bikablo-practice.mdx +++ b/src/content/sketchnotes/bikablo-practice.mdx @@ -1,6 +1,7 @@ --- title: Bikablo Practice sort: 80 +coverSize: large images: - src: /assets/images/sketchnotes/bikablo-practice-1.jpg aspectRatio: 0.75 diff --git a/src/content/sketchnotes/random-sketches.mdx b/src/content/sketchnotes/random-sketches.mdx index 47ab82d..5a6d38e 100644 --- a/src/content/sketchnotes/random-sketches.mdx +++ b/src/content/sketchnotes/random-sketches.mdx @@ -1,6 +1,7 @@ --- title: Random Sketches sort: 60 +coverSize: large images: - src: /assets/images/sketchnotes/random-sketches-1.jpg aspectRatio: 0.75 diff --git a/src/content/sketchnotes/self-actualization-vs-self-image-actualization.mdx b/src/content/sketchnotes/self-actualization-vs-self-image-actualization.mdx index d3e1db6..3173bb5 100644 --- a/src/content/sketchnotes/self-actualization-vs-self-image-actualization.mdx +++ b/src/content/sketchnotes/self-actualization-vs-self-image-actualization.mdx @@ -1,6 +1,7 @@ --- title: Self-Actualization vs. Self-Image Actualization sort: 50 +coverSize: medium images: - src: /assets/images/sketchnotes/self-actualization.jpg aspectRatio: 1.35 diff --git a/src/content/sketchnotes/this-is-water.mdx b/src/content/sketchnotes/this-is-water.mdx index f5bbfe7..4329dd6 100644 --- a/src/content/sketchnotes/this-is-water.mdx +++ b/src/content/sketchnotes/this-is-water.mdx @@ -1,6 +1,7 @@ --- title: This is Water sort: 110 +coverSize: large images: - src: /assets/images/sketchnotes/this-is-water-1.jpg aspectRatio: 1.35 diff --git a/src/content/sketchnotes/weight-idea.mdx b/src/content/sketchnotes/weight-idea.mdx index 9c17f3b..d75ca39 100644 --- a/src/content/sketchnotes/weight-idea.mdx +++ b/src/content/sketchnotes/weight-idea.mdx @@ -1,6 +1,7 @@ --- title: Weight Idea sort: 20 +coverSize: medium images: - src: /assets/images/sketchnotes/weight-idea.jpg aspectRatio: 1.35 diff --git a/src/pages/sketchnotes.astro b/src/pages/sketchnotes.astro new file mode 100644 index 0000000..f57e1b0 --- /dev/null +++ b/src/pages/sketchnotes.astro @@ -0,0 +1,66 @@ +--- +import cx from 'classnames'; + +import { getCollection } from 'astro:content'; + +import { sortBySortKey } from '../utils/sort-by-sortkey'; + +import GridLayout from '../layouts/GridLayout.astro'; +import PageTitle from '../components/PageTitle.astro'; +import Picture from '../components/Picture.astro'; +import { Link } from '../components'; +import { Content as Intro } from '../text/sketchnotes/intro.mdx'; + +import { mapping } from '../mdx-components'; + +const allSketchnotes = await getCollection('sketchnotes'); +allSketchnotes.sort(sortBySortKey); +--- + + + Sketchnotes + +
+ +
+ + + diff --git a/src/text/sketchnotes/intro.mdx b/src/text/sketchnotes/intro.mdx new file mode 100644 index 0000000..56fba2f --- /dev/null +++ b/src/text/sketchnotes/intro.mdx @@ -0,0 +1 @@ +I started learning Sketchnotes in 2015. Sketchnotes are a way to visualize notes with text and images. I use them to take notes at conferences, meetings, and when I’m reading books. I’ve found that they help me to remember things better, and they are more fun to look at than a page full of text. diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 5206e9d..75a713b 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -53,11 +53,16 @@ module.exports = { 'haiku-xl': 'repeat(auto-fit, minmax(25rem, 1fr)', 'haiku-list': 'repeat(auto-fill, minmax(3rem, 1fr))', toolbox: 'repeat(auto-fit, minmax(80px, 1fr))', + gallery: 'repeat(auto-fit, minmax(50px, 1fr))', }, gridTemplateRows: ({ theme }) => ({ layout: `clamp(3rem, ${theme('spacing.column')}, 9rem)`, haiku: `clamp(3rem, ${theme('spacing.column')}, 9rem) 1fr`, + gallery: '50px', }), + gridAutoRows: { + gallery: '50px', + }, columns: { 13: '13', 14: '14',