-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #298 from jermspeaks/content/blurbs-2
Intro to curations and adding a few more book blurbs
- Loading branch information
Showing
23 changed files
with
334 additions
and
226 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,118 +1,73 @@ | ||
| --- | ||
| export interface Props { | ||
| type?: 'note' | 'tip' | 'caution' | 'danger'; | ||
| title?: string; | ||
| type?: "note" | "tip" | "caution" | "danger"; | ||
| title?: string; | ||
| } | ||
| const { type = 'note', title = `aside.${type}` } = Astro.props as Props; | ||
| const { type = "note", title = `aside.${type}` } = Astro.props as Props; | ||
| // SVG icon paths based on GitHub Octicons | ||
| const icons: Record<NonNullable<Props['type']>, { viewBox: string; d: string }> = { | ||
| note: { | ||
| viewBox: '0 0 18 18', | ||
| d: 'M0 3.75C0 2.784.784 2 1.75 2h12.5c.966 0 1.75.784 1.75 1.75v8.5A1.75 1.75 0 0114.25 14H1.75A1.75 1.75 0 010 12.25v-8.5zm1.75-.25a.25.25 0 00-.25.25v8.5c0 .138.112.25.25.25h12.5a.25.25 0 00.25-.25v-8.5a.25.25 0 00-.25-.25H1.75zM3.5 6.25a.75.75 0 01.75-.75h7a.75.75 0 010 1.5h-7a.75.75 0 01-.75-.75zm.75 2.25a.75.75 0 000 1.5h4a.75.75 0 000-1.5h-4z', | ||
| }, | ||
| tip: { | ||
| viewBox: '0 0 18 18', | ||
| d: 'M14 0a8.8 8.8 0 0 0-6 2.6l-.5.4-.9 1H3.3a1.8 1.8 0 0 0-1.5.8L.1 7.6a.8.8 0 0 0 .4 1.1l3.1 1 .2.1 2.4 2.4.1.2 1 3a.8.8 0 0 0 1 .5l2.9-1.7a1.8 1.8 0 0 0 .8-1.5V9.5l1-1 .4-.4A8.8 8.8 0 0 0 16 2v-.1A1.8 1.8 0 0 0 14.2 0h-.1zm-3.5 10.6-.3.2L8 12.3l.5 1.8 2-1.2a.3.3 0 0 0 .1-.2v-2zM3.7 8.1l1.5-2.3.2-.3h-2a.3.3 0 0 0-.3.1l-1.2 2 1.8.5zm5.2-4.5a7.3 7.3 0 0 1 5.2-2.1h.1a.3.3 0 0 1 .3.3v.1a7.3 7.3 0 0 1-2.1 5.2l-.5.4a15.2 15.2 0 0 1-2.5 2L7.1 11 5 9l1.5-2.3a15.3 15.3 0 0 1 2-2.5l.4-.5zM12 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-8.4 9.6a1.5 1.5 0 1 0-2.2-2.2 7 7 0 0 0-1.1 3 .2.2 0 0 0 .3.3c.6 0 2.2-.4 3-1.1z', | ||
| }, | ||
| caution: { | ||
| viewBox: '-1 1 18 18', | ||
| d: 'M8.9 1.5C8.7 1.2 8.4 1 8 1s-.7.2-.9.5l-7 12a1 1 0 0 0 0 1c.2.3.6.5 1 .5H15c.4 0 .7-.2.9-.5a1 1 0 0 0 0-1l-7-12zM9 13H7v-2h2v2zm0-3H7V6h2v4z', | ||
| }, | ||
| danger: { | ||
| viewBox: '0 1 14 17', | ||
| d: 'M5 .3c.9 2.2.5 3.4-.5 4.3C3.5 5.6 2 6.5 1 8c-1.5 2-1.7 6.5 3.5 7.7-2.2-1.2-2.6-4.5-.3-6.6-.6 2 .6 3.3 2 2.8 1.4-.4 2.3.6 2.2 1.7 0 .8-.3 1.4-1 1.8A5.6 5.6 0 0 0 12 10c0-2.9-2.5-3.3-1.3-5.7-1.5.2-2 1.2-1.8 2.8 0 1-1 1.8-2 1.3-.6-.4-.6-1.2 0-1.8C8.2 5.3 8.7 2.5 5 .3z', | ||
| }, | ||
| const icons: Record< | ||
| NonNullable<Props["type"]>, | ||
| { viewBox: string; d: string } | ||
| > = { | ||
| note: { | ||
| viewBox: "0 0 18 18", | ||
| d: "M0 3.75C0 2.784.784 2 1.75 2h12.5c.966 0 1.75.784 1.75 1.75v8.5A1.75 1.75 0 0114.25 14H1.75A1.75 1.75 0 010 12.25v-8.5zm1.75-.25a.25.25 0 00-.25.25v8.5c0 .138.112.25.25.25h12.5a.25.25 0 00.25-.25v-8.5a.25.25 0 00-.25-.25H1.75zM3.5 6.25a.75.75 0 01.75-.75h7a.75.75 0 010 1.5h-7a.75.75 0 01-.75-.75zm.75 2.25a.75.75 0 000 1.5h4a.75.75 0 000-1.5h-4z", | ||
| }, | ||
| tip: { | ||
| viewBox: "0 0 18 18", | ||
| d: "M14 0a8.8 8.8 0 0 0-6 2.6l-.5.4-.9 1H3.3a1.8 1.8 0 0 0-1.5.8L.1 7.6a.8.8 0 0 0 .4 1.1l3.1 1 .2.1 2.4 2.4.1.2 1 3a.8.8 0 0 0 1 .5l2.9-1.7a1.8 1.8 0 0 0 .8-1.5V9.5l1-1 .4-.4A8.8 8.8 0 0 0 16 2v-.1A1.8 1.8 0 0 0 14.2 0h-.1zm-3.5 10.6-.3.2L8 12.3l.5 1.8 2-1.2a.3.3 0 0 0 .1-.2v-2zM3.7 8.1l1.5-2.3.2-.3h-2a.3.3 0 0 0-.3.1l-1.2 2 1.8.5zm5.2-4.5a7.3 7.3 0 0 1 5.2-2.1h.1a.3.3 0 0 1 .3.3v.1a7.3 7.3 0 0 1-2.1 5.2l-.5.4a15.2 15.2 0 0 1-2.5 2L7.1 11 5 9l1.5-2.3a15.3 15.3 0 0 1 2-2.5l.4-.5zM12 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-8.4 9.6a1.5 1.5 0 1 0-2.2-2.2 7 7 0 0 0-1.1 3 .2.2 0 0 0 .3.3c.6 0 2.2-.4 3-1.1z", | ||
| }, | ||
| caution: { | ||
| viewBox: "0 0 16 16", | ||
| d: "M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z", | ||
| }, | ||
| danger: { | ||
| viewBox: "0 1 14 17", | ||
| d: "M5 .3c.9 2.2.5 3.4-.5 4.3C3.5 5.6 2 6.5 1 8c-1.5 2-1.7 6.5 3.5 7.7-2.2-1.2-2.6-4.5-.3-6.6-.6 2 .6 3.3 2 2.8 1.4-.4 2.3.6 2.2 1.7 0 .8-.3 1.4-1 1.8A5.6 5.6 0 0 0 12 10c0-2.9-2.5-3.3-1.3-5.7-1.5.2-2 1.2-1.8 2.8 0 1-1 1.8-2 1.3-.6-.4-.6-1.2 0-1.8C8.2 5.3 8.7 2.5 5 .3z", | ||
| }, | ||
| }; | ||
| const { viewBox, d } = icons[type]; | ||
| --- | ||
|
|
||
| <aside class={`content ${type}`} aria-label={title}> | ||
| <p class="title" aria-hidden="true"> | ||
| <span class="icon"> | ||
| <svg xmlns="http://www.w3.org/2000/svg" viewBox={viewBox} width={16} height={16}> | ||
| <path fill-rule="evenodd" d={d}></path> | ||
| </svg> | ||
| </span> | ||
| {title} | ||
| </p> | ||
| <section> | ||
| <slot /> | ||
| </section> | ||
| <aside | ||
| class:list={[ | ||
| "border-l-4 rounded-l-lg px-8 py-4 my-4", | ||
| { | ||
| ["bg-yellow-100 dark:bg-yellow-900 border-yellow-300 dark:border-yellow-700"]: | ||
| type === "caution", | ||
| ["bg-slate-100 dark:bg-slate-900 border-slate-300 dark:border-slate-700"]: | ||
| type === "tip", | ||
| ["bg-purple-100 dark:bg-purple-900 border-purple-300 dark:border-purple-700"]: | ||
| type === "note", | ||
| ["bg-red-100 dark:bg-red-900 border-red-300 dark:border-red-700"]: | ||
| type === "danger", | ||
| }, | ||
| ]} | ||
| aria-label={title} | ||
| > | ||
| <div class="flex justify-start items-center gap-4" aria-hidden="true"> | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| viewBox={viewBox} | ||
| width={16} | ||
| height={16} | ||
| class:list={[ | ||
| "w-8 h-8", | ||
| { | ||
| ["fill-yellow-500"]: type === "caution", | ||
| ["fill-slate-500"]: type === "tip", | ||
| ["fill-purple-500"]: type === "note", | ||
| ["fill-red-500"]: type === "danger", | ||
| }, | ||
| ]} | ||
| > | ||
| <path fill-rule="evenodd" d={d}></path> | ||
| </svg> | ||
| <div class="font-bold">{title}</div> | ||
| </div> | ||
| <section> | ||
| <slot /> | ||
| </section> | ||
| </aside> | ||
|
|
||
| <style> | ||
| aside { | ||
| --aside-color-base: var(--color-base-purple); | ||
| --aside-color-lightness: 54%; | ||
| --aside-accent-color: hsl(var(--aside-color-base), var(--aside-color-lightness)); | ||
| --aside-text-lightness: 20%; | ||
| --aside-text-accent-color: hsl(var(--aside-color-base), var(--aside-text-lightness)); | ||
|
|
||
| border-inline-start: 4px solid var(--aside-accent-color); | ||
| padding: 1rem; | ||
| background-color: hsla( | ||
| var(--aside-color-base), | ||
| var(--aside-color-lightness), | ||
| var(--theme-accent-opacity) | ||
| ); | ||
| /* Indicates the aside boundaries for forced colors users, transparent is changed to a solid color */ | ||
| outline: 1px solid transparent; | ||
| } | ||
|
|
||
| :global(.theme-dark) aside { | ||
| --aside-text-lightness: 85%; | ||
| } | ||
|
|
||
| .title { | ||
| line-height: 1; | ||
| margin-bottom: 0.5rem; | ||
| font-size: 0.9rem; | ||
| letter-spacing: 0.05em; | ||
| font-weight: bold; | ||
| text-transform: uppercase; | ||
| color: var(--aside-text-accent-color); | ||
| } | ||
|
|
||
| .icon svg { | ||
| width: 1.5em; | ||
| height: 1.5em; | ||
| vertical-align: middle; | ||
| fill: currentcolor; | ||
| } | ||
|
|
||
| aside :global(a), | ||
| aside :global(a > code:not([class*='language'])) { | ||
| color: var(--aside-text-accent-color); | ||
| } | ||
|
|
||
| aside :global(p), | ||
| aside.content :global(ul) { | ||
| color: var(--theme-text); | ||
| } | ||
|
|
||
| :global(.theme-dark) aside :global(code:not([class*='language'])) { | ||
| color: var(--theme-code-text); | ||
| } | ||
|
|
||
| aside :global(pre) { | ||
| margin-left: 0; | ||
| margin-right: 0; | ||
| } | ||
|
|
||
| .tip { | ||
| --aside-color-lightness: 42%; | ||
| --aside-color-base: var(--color-base-teal); | ||
| } | ||
|
|
||
| .caution { | ||
| --aside-color-lightness: 59%; | ||
| --aside-color-base: var(--color-base-yellow); | ||
| } | ||
|
|
||
| .danger { | ||
| --aside-color-lightness: 54%; | ||
| --aside-color-base: var(--color-base-red); | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| --- | ||
| description: "Curations is my attempt at blending the warm hug of nostalgia with a little nook tailor-made for my personal obsessions—steering clear of the 'oh-so-common listicle' abyss. Let's dive into the fun zone! 🚀✨" | ||
| draft: false | ||
| heroImage: "https://images.unsplash.com/photo-1581905764498-f1b60bae941a?q=80&w=2264&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" | ||
| heroImageAlt: "Black and white photo of a video store. Credits: Unsplash, Sean Benesh" | ||
| pubDate: "2024-01-26" | ||
| tags: ["essay", "website", "updates"] | ||
| title: "Introducing Curations" | ||
| --- | ||
|
|
||
| I'm proud of the re-write I've made towards [curations](/curation). The idea behind this was to combine the things that I've liked, consumed, gestated on, and share with you my thoughts about different things that matter to me. | ||
|
|
||
| For my books, I wanted the feeling you get at the bookstore where I write a short blurb about why you should pick up this book. I would spend the first few minutes reading the index cards nicely decorated about why the staff member chose a specific book. There was more potential for a chance encounter. When I read listicles online, there's often a sense of sameness. It's not as fun when websites all feel the same. | ||
|
|
||
| The same about films in a video store. I love the feeling you get, back when video stores were more popular, about staffpicks. Some small streaming services have this feeling, like [FilmStruck](https://en.wikipedia.org/wiki/FilmStruck), and more recently the [Criterion Channel](https://www.criterionchannel.com/). When the Netflix algorithm is feeding you, or for that matter any algorithm, that hand-feel of someone's journey into film has turned into "this is what thousands of people in your target demographic cohort also like". And there's something missing from that. I want to share what I like about a film, or dislike. And I also want to share why other people appear to have similar or dissonant feelings about it. | ||
|
|
||
| People shouldn't feel boxed into groups of "books I like", "movies I like", and "music I like". It makes everything feel dull, like these are the only categories that define our dating profile. And while I'm starting off with the books and music, I can think of other things I want to curate in the future. One thing people might not know about me is I own a 20+ year old business card collection. It reminds me of places I've traveled or people I've met. I also want to share a inspirational persons curation of people who I love and have made an impact. | ||
|
|
||
| import Aside from "../../components/Aside.astro"; | ||
|
|
||
| <Aside type="note" title="Hot Take on Generic Dating Profile"> | ||
| Dating profiles are riddled with generic descriptions. If you're going to dive into that, please at least do better than the following. | ||
|
|
||
| > Adventure/looking for an adventure buddy | ||
| We're all trying to look for our someone. | ||
|
|
||
| > Travel/world traveller | ||
| We all love traveling. Maybe not the act itself, but the idea of going around the world, you jetsetter. | ||
|
|
||
| > Height | ||
| Opens the can of worms, eh? | ||
| </Aside> | ||
|
|
||
| Aside from everything else, I want my personal MySpace back. Back in the day, you would have a customized profile page where you make it play your favorite music, share your favorite lousy quotes, and give it your own personal flair. Even if that flair was like design vomit. It was your vomit. So with that, I'm having a little fun giving you multiple perspectives on what is essentially a listicle. But it's my listicle. And I can call it something other than a listicle. Like an curated art exhibit. That sounds so much more sophisticated. You're welcome. | ||
|
|
||
| If you missed the link above, check out [curations](/curation)! |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.