diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index fd61a84c..44cd398a 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -78,7 +78,10 @@ jobs: --prod - name: Deploy Preview to Vercel - if: github.ref_name != 'main' + if: + ${{ github.event_name != 'push' && (!github.event.pull_request.head.repo.fork || + (github.event_name == 'pull_request_target' && + contains(github.event.pull_request.labels.*.name, 'trusted'))) }} run: node .github/scripts/deploy.mjs --token=${{ secrets.VERCEL_TOKEN }} - name: Debug Conditions diff --git a/src/global-styles/base.css b/src/global-styles/base.css index 10ad9b7f..1a7035c2 100644 --- a/src/global-styles/base.css +++ b/src/global-styles/base.css @@ -18,13 +18,11 @@ html { } * { - @apply outline-black dark:outline-white - selection:bg-gray-200 selection:text-black - dark:selection:bg-gray-700 dark:selection:text-white; + @apply outline-black selection:bg-gray-200 selection:text-black dark:outline-white dark:selection:bg-gray-700 dark:selection:text-white; } body { - @apply text-gray-800 dark:text-gray-300 bg-white dark:bg-gray-900 px-0 md:px-4 pt-4 pb-20 md:pt-8 md:pb-48 relative min-h-screen; + @apply relative min-h-screen bg-white px-0 pb-20 pt-4 text-gray-800 dark:bg-gray-900 dark:text-gray-300 md:px-4 md:pb-48 md:pt-8; } body, diff --git a/src/global-styles/integrations.css b/src/global-styles/integrations.css index c15ba749..199c3068 100644 --- a/src/global-styles/integrations.css +++ b/src/global-styles/integrations.css @@ -7,6 +7,6 @@ } & ol > li > p { - @apply inline -mx-1; + @apply -mx-1 inline; } } diff --git a/src/global-styles/shiki.css b/src/global-styles/shiki.css index d988b491..c0f0e8bc 100644 --- a/src/global-styles/shiki.css +++ b/src/global-styles/shiki.css @@ -8,7 +8,7 @@ html.dark .astro-code-themes { color: var(--shiki-dark) !important; - background-color: var(--shiki-dark-bg) !important; + background-color: transparent !important; } html.dark .astro-code-themes span { @@ -61,14 +61,33 @@ pre.twoslash:hover .twoslash-hover { position: absolute; transform: translate(0, 1rem); z-index: 100; + width: max-content; + max-width: 80vw; - @apply bg-white text-gray-900 border border-gray-200 shadow-sm px-3 p-2 rounded-sm - dark:bg-black dark:text-gray-50 dark:border-gray-700 dark:shadow-md; + @apply rounded-sm border border-gray-200 bg-white p-2 px-3 text-gray-900 shadow-sm dark:border-gray-700 dark:bg-black dark:text-gray-50 dark:shadow-md; text-align: left; white-space: pre-wrap; } +@supports (anchor-name: --x) { + .twoslash-hover:hover { + anchor-name: --twoslash-hover; + } + + .twoslash-popup-container { + position: fixed; + transform: none; + position-anchor: --twoslash-hover; + position-area: bottom; + position-try-fallbacks: --above; + } + + @position-try --above { + position-area: top; + } +} + .twoslash-hover:hover > .twoslash-popup-container { display: block; } @@ -102,12 +121,6 @@ pre .twoslash-error-line { @apply bg-gray-100 dark:bg-gray-800 dark:text-white; } -/* --- Code container --- */ - -pre .code-container { - overflow: auto; -} - pre code { white-space: pre; -webkit-overflow-scrolling: touch; @@ -115,137 +128,3 @@ pre code { pre code a { text-decoration: none; } - -/* --- Query/Error blocks --- */ - -pre .query { - margin-bottom: 10px; - color: #137998; - display: inline-block; -} - -pre .error, -pre .error-behind { - margin-top: 0.5em; - padding: 0.5em 1em; - width: var(--container-width); - white-space: pre-wrap; - display: block; -} -pre .error { - @apply bg-gray-100 dark:bg-gray-800 dark:text-white; - position: absolute; - border-left: 2px solid #bf1818; - display: flex; - align-items: center; -} -pre .error .code { - display: none; -} -pre .error-behind { - user-select: none; - visibility: transparent; - color: #fee; -} - -/* --- Annotations --- */ - -.tag-container { - position: relative; -} -.tag-container .twoslash-annotation { - position: absolute; - font-family: "JetBrains Mono", Menlo, Monaco, Consolas, Courier New, monospace; - right: -10px; - width: 200px; - color: #187abf; - background-color: #fcf3d9bb; -} -.tag-container .twoslash-annotation p { - text-align: left; - font-size: 0.8rem; - line-height: 0.9rem; -} -.tag-container .twoslash-annotation svg { - float: left; - margin-left: -44px; -} -.tag-container .twoslash-annotation.left { - right: auto; - left: -200px; -} -.tag-container .twoslash-annotation.left svg { - float: right; - margin-right: -5px; -} - -/* --- Console log/warn/error --- */ - -pre .logger { - display: flex; - align-items: center; - color: black; - padding: 6px; - padding-left: 8px; - width: calc(100% - 19px); - white-space: pre-wrap; -} -pre .logger svg { - margin-right: 9px; -} -pre .logger.error-log { - background-color: #fee; - border-left: 2px solid #bf1818; -} -pre .logger.warn-log { - background-color: #ffe; - border-left: 2px solid #eae662; -} -pre .logger.log-log { - background-color: #e9e9e9; - border-left: 2px solid #ababab; -} -pre .logger.log-log svg { - margin-left: 6px; - margin-right: 9px; -} - -/* --- Completions --- */ - -pre .inline-completions ul.dropdown { - display: inline-block; - position: absolute; - width: 240px; - background-color: gainsboro; - color: grey; - padding-top: 4px; - font-family: var(--code-font); - font-size: 0.8rem; - margin: 0; - padding: 0; - border-left: 4px solid #4b9edd; -} -pre .inline-completions ul.dropdown::before { - background-color: #4b9edd; - width: 2px; - position: absolute; - top: -1.2rem; - left: -3px; - content: " "; -} -pre .inline-completions ul.dropdown li { - overflow-x: hidden; - padding-left: 4px; - margin-bottom: 4px; -} -pre .inline-completions ul.dropdown li.deprecated { - text-decoration: line-through; -} -pre .inline-completions ul.dropdown li span.result-found { - color: #4b9edd; -} -pre .inline-completions ul.dropdown li span.result { - width: 100px; - color: black; - display: inline-block; -} diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index 2b89dd50..64396f90 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -25,7 +25,10 @@ interface Props { const { title, description, ogImage } = Astro.props; -const postModules = import.meta.glob<{ frontmatter: PostFrontmatter }>("../../posts/**/*.mdx", { eager: true }); +const postModules = import.meta.glob<{ frontmatter: PostFrontmatter }>( + "../../posts/**/*.mdx", + { eager: true }, +); const posts = Object.values(postModules) .filter((p) => (import.meta.env.PROD ? !p.frontmatter.draft : true)) .map((p) => ({ @@ -64,9 +67,9 @@ posts.sort((a, b) => { -
+
diff --git a/src/lib/GrainOverlay/GrainOverlay.astro b/src/lib/GrainOverlay/GrainOverlay.astro index cdf2b7f2..692a3757 100644 --- a/src/lib/GrainOverlay/GrainOverlay.astro +++ b/src/lib/GrainOverlay/GrainOverlay.astro @@ -10,6 +10,6 @@ const { opacity } = Astro.props;
diff --git a/src/lib/Kbd.tsx b/src/lib/Kbd.tsx index 24d9b74a..ab88aa21 100644 --- a/src/lib/Kbd.tsx +++ b/src/lib/Kbd.tsx @@ -18,11 +18,11 @@ export function Kbd(props: KbdProps) { ref={ref} {...props} class={ - "p-1 border border-b-2 rounded-md bg-gray-50" + + "rounded-md border border-b-2 bg-gray-50 p-1" + " dark:border-gray-700 dark:bg-gray-800" + - " tracking-tighter leading-none text-xs" + + " text-xs leading-none tracking-tighter" + " group-hover:border-b group-hover:shadow-[inset_0_1px_1px_0_rgba(0,0,0,0.025)] group-focus:outline" + - " [&[data-pressed]]:border-b [&[data-pressed]]" + + " [&[data-pressed]] [&[data-pressed]]:border-b" + (props.class ? ` ${props.class}` : "") } /> diff --git a/src/lib/TableOfContents/PostProgressBar.tsx b/src/lib/TableOfContents/PostProgressBar.tsx index 96284fca..5b0c4e4b 100644 --- a/src/lib/TableOfContents/PostProgressBar.tsx +++ b/src/lib/TableOfContents/PostProgressBar.tsx @@ -30,10 +30,10 @@ export function PostProgressBar(props: { children: JSX.Element }) { return (
-
+
o.value === currentScheme); - - return ( -
- - - - -
- ); -} - -function SystemIcon() { - return ( - - - - - ); -} - -function MoonIcon() { - return ( - - - - ); -} - -function SunIcon() { - return ( - - - - ); -} diff --git a/src/lib/prose/Blockquote.module.css b/src/lib/prose/Blockquote.module.css index a9a30605..5b2c6ee1 100644 --- a/src/lib/prose/Blockquote.module.css +++ b/src/lib/prose/Blockquote.module.css @@ -23,7 +23,7 @@ &:after, &:before { - @apply text-4xl leading-none text-gray-300 font-black; + @apply text-4xl font-black leading-none text-gray-300; position: absolute; :global(.dark) & { diff --git a/src/lib/prose/Image.astro b/src/lib/prose/Image.astro index 53cb70c4..1e141860 100644 --- a/src/lib/prose/Image.astro +++ b/src/lib/prose/Image.astro @@ -36,9 +36,11 @@ const WIDE_CONTAINER_WIDTH = 774; type LocalProps = LocalImageProps & { aspectRatio?: number | string; + height?: number | string; }; type RemoteProps = RemoteImageProps & { aspectRatio?: number | string; + height?: number | string; }; export type Props = LocalProps | RemoteProps; diff --git a/src/lib/prose/Paragraph.module.css b/src/lib/prose/Paragraph.module.css index 7cdf3fde..15d52db6 100644 --- a/src/lib/prose/Paragraph.module.css +++ b/src/lib/prose/Paragraph.module.css @@ -1,5 +1,5 @@ .Paragraph { - @apply max-w-prose p-2 -m-2; + @apply -m-2 max-w-prose p-2; line-height: 1.75; text-overflow: ellipsis; diff --git a/src/lib/prose/Table.module.css b/src/lib/prose/Table.module.css index 10447227..4c50d4e0 100644 --- a/src/lib/prose/Table.module.css +++ b/src/lib/prose/Table.module.css @@ -12,7 +12,7 @@ & th, & td { - @apply py-1 px-2 md:px-4; + @apply px-2 py-1 md:px-4; } } diff --git a/src/lib/prose/code-and-pre.module.css b/src/lib/prose/code-and-pre.module.css index cd59c139..dd1d5c8d 100644 --- a/src/lib/prose/code-and-pre.module.css +++ b/src/lib/prose/code-and-pre.module.css @@ -7,7 +7,7 @@ &::before, &::after { - @apply text-gray-400 font-black; + @apply font-black text-gray-400; content: "`"; :global(.dark) & { @@ -17,7 +17,7 @@ } .Pre { - @apply md:rounded-md text-sm -mx-4 p-4 overflow-x-auto; + @apply -mx-4 overflow-x-auto p-4 text-sm md:rounded-md; /* Needed to fit 80 monospaced characters with Fira Code in 43rem space. */ padding-right: calc(1rem - 1px); diff --git a/src/lib/prose/prose.css b/src/lib/prose/prose.css index 0fc1eb55..8515d936 100644 --- a/src/lib/prose/prose.css +++ b/src/lib/prose/prose.css @@ -37,7 +37,7 @@ } & hr { - @apply border-gray-100 dark:border-gray-800 border-b-2; + @apply border-b-2 border-gray-100 dark:border-gray-800; } & figcaption { @@ -59,17 +59,17 @@ max-width: 100vw; & > :first-child { - @apply flex-shrink-0 flex-grow max-w-container w-full; + @apply w-full max-w-container flex-shrink-0 flex-grow; } & > aside { - @apply flex-shrink-0 flex-grow relative h-min text-sm; + @apply relative h-min flex-shrink-0 flex-grow text-sm; width: var(--aside-width); padding-left: var(--gap); &::before { content: ""; - @apply border-l absolute h-full -left-px dark:border-gray-700; + @apply absolute -left-px h-full border-l dark:border-gray-700; } } @@ -91,7 +91,7 @@ } details { - @apply border border-gray-300 dark:border-gray-700/60 rounded-lg -mx-4; + @apply -mx-4 rounded-lg border border-gray-300 dark:border-gray-700/60; & summary::after { content: "↧"; @@ -111,7 +111,7 @@ details { } & > * { - @apply px-2 !m-0; + @apply !m-0 px-2; } & summary { @@ -119,15 +119,9 @@ details { list-style: none; & > p { - @apply !px-0 !m-0; + @apply !m-0 !px-0; } - @apply relative - before:content-[''] before:absolute before:inset-0 - before:-z-10 before:pointer-events-none - before:rounded before:transition-colors before:bg-transparent - hover:before:bg-gray-100 dark:hover:before:bg-gray-800/60 - focus:before:bg-gray-100 dark:focus:before:bg-gray-800/60 - selected:before:bg-gray-100 dark:selected:before:bg-gray-800/60; + @apply relative before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded before:bg-transparent before:transition-colors before:content-[''] hover:before:bg-gray-100 focus:before:bg-gray-100 selected:before:bg-gray-100 dark:hover:before:bg-gray-800/60 dark:focus:before:bg-gray-800/60 dark:selected:before:bg-gray-800/60; } } diff --git a/src/lib/titleCase.ts b/src/lib/titleCase.ts index 5697a170..c03f7bf2 100644 --- a/src/lib/titleCase.ts +++ b/src/lib/titleCase.ts @@ -44,7 +44,7 @@ export function titleCase(str: string) { /* Capitalize the first letter */ return current.replace(alphanumericPattern, (match) => - match.toUpperCase() + match.toUpperCase(), ); }) .join(""); diff --git a/src/pages/[...path].astro b/src/pages/[...path].astro index 5a956278..7a81f1f2 100644 --- a/src/pages/[...path].astro +++ b/src/pages/[...path].astro @@ -14,7 +14,11 @@ import { Ul } from "../lib/prose/Ul"; import type { PostFrontmatter } from "../types"; export const getStaticPaths = async () => { - const postModules = import.meta.glob<{ frontmatter: PostFrontmatter; Content: any; getHeadings: any }>("../../posts/**/*.mdx", { eager: true }); + const postModules = import.meta.glob<{ + frontmatter: PostFrontmatter; + Content: any; + getHeadings: any; + }>("../../posts/**/*.mdx", { eager: true }); let posts = Object.values(postModules); if (import.meta.env.PROD) { diff --git a/src/pages/admin.astro b/src/pages/admin.astro index 0e33739d..d0edb304 100644 --- a/src/pages/admin.astro +++ b/src/pages/admin.astro @@ -4,7 +4,10 @@ import { createOgImageLink } from "../lib/createOgImageLink"; import { Link } from "../lib/Link"; import type { PostFrontmatter } from "../types"; -const postModules = import.meta.glob<{ frontmatter: PostFrontmatter }>("../../posts/**/*.mdx", { eager: true }); +const postModules = import.meta.glob<{ frontmatter: PostFrontmatter }>( + "../../posts/**/*.mdx", + { eager: true }, +); const posts = Object.values(postModules); const linksToOGImages = posts.map((post) => @@ -25,13 +28,13 @@ const linksToOGImages = posts.map((post) => {href} diff --git a/src/pages/index.astro b/src/pages/index.astro index 3a72895c..a40076d8 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -5,7 +5,10 @@ import { Link } from "../lib/Link"; import { Paragraph } from "../lib/prose/Paragraph"; import type { PostFrontmatter } from "../types"; -const postModules = import.meta.glob<{ frontmatter: PostFrontmatter }>("../../posts/**/*.mdx", { eager: true }); +const postModules = import.meta.glob<{ frontmatter: PostFrontmatter }>( + "../../posts/**/*.mdx", + { eager: true }, +); let posts = Object.values(postModules); if (import.meta.env.PROD) { @@ -25,13 +28,13 @@ posts.sort((a, b) => { description="Astro starter template for understated personal websites using Solid.js, Tailwind CSS, and MDX." >

zaduma

-
+
IPA /zaˈdu.ma/ — reverie, musing
- is an Astro starter template for understated personal websites + is an Astro starter template for understated personal websites Learn about it by reading the articles below, take a look at the @@ -50,15 +53,15 @@ posts.sort((a, b) => {
  • -

    +

    {frontmatter.title}