diff --git a/public/assets/logo-dark.svg b/public/assets/logo-dark.svg new file mode 100644 index 000000000..1a0cbd22d --- /dev/null +++ b/public/assets/logo-dark.svg @@ -0,0 +1,9 @@ + + + + + + diff --git a/public/search-index.json b/public/search-index.json index 7596abbac..ac26a23b9 100644 --- a/public/search-index.json +++ b/public/search-index.json @@ -1 +1 @@ -[{"slug":"introducing-astro-ship-less-javascript","category":"blog","title":"Introducing Astro - Ship Less JavaScript","description":"There's a simple secret to building a faster website — just ship less.","tags":["astro","jam-stack"],"body":"\nUnfortunately, modern web development has been trending in the opposite direction—towards more. More JavaScript, more features, more moving parts, and ultimately more complexity needed to keep it all running smoothly.\n\nToday I'm excited to publicly share Astro: a new kind of static site builder that delivers lightning-fast performance with a modern developer experience. To design Astro, we borrowed the best parts of our favorite tools and then added a few innovations of our own, including:\n\n- Bring Your Own Framework (BYOF): Build your site using React, Svelte, Vue, Preact, web components, or just plain ol' HTML + JavaScript.\n- 100% Static HTML, No JS: Astro renders your entire page to static HTML, removing all JavaScript from your final build by default.\n- On-Demand Components: Need some JS? Astro can automatically hydrate interactive components when they become visible on the page. If the user never sees it, they never load it.\n- Fully-Featured: Astro supports TypeScript, Scoped CSS, CSS Modules, Sass, Tailwind, Markdown, MDX, and any of your favorite npm packages.\n- SEO Enabled: Automatic sitemaps, RSS feeds, pagination and collections take the pain out of SEO and syndication.\n\n## H1 is good\n\n### H2 is good too\n\n> links are better\n\n[I know](they-are-better)\n\nThis post marks the first public beta release of Astro. Missing features and bugs are still to be expected at this early stage. There are still some months to go before an official 1.0 release, but there are already several fast sites built with Astro in production today. We would love your early feedback as we move towards a v1.0 release later this year.\n\n> To learn more about Astro and start building your first site, check out the project README.\n\n# Example - Syntax Highlighting\n\n## Shell(Bash)\n\n```bash\n# make a new project directory and jump into it\nmkdir my-astro-project && cd $_\n\n# create a new project with npm\nnpm create astro@latest\n\n# or yarn\nyarn create astro\n\n# or pnpm\npnpm create astro@latest\n```\n\n## Python\n\n```python\nprint('hello world')\n```\n\n## Javascript\n\n```js\nconst func = () => {alert(\"hello\")}\n```\n"},{"slug":"introducing-astro","category":"blog","title":"Introducing Astro - Ship Less JavaScript","description":"There's a simple secret to building a faster website — just ship less.","tags":["astro","jam-stack"],"body":"\nUnfortunately, modern web development has been trending in the opposite direction—towards more. More JavaScript, more features, more moving parts, and ultimately more complexity needed to keep it all running smoothly.\n\nToday I'm excited to publicly share Astro: a new kind of static site builder that delivers lightning-fast performance with a modern developer experience. To design Astro, we borrowed the best parts of our favorite tools and then added a few innovations of our own, including:\n\n- Bring Your Own Framework (BYOF): Build your site using React, Svelte, Vue, Preact, web components, or just plain ol' HTML + JavaScript.\n- 100% Static HTML, No JS: Astro renders your entire page to static HTML, removing all JavaScript from your final build by default.\n- On-Demand Components: Need some JS? Astro can automatically hydrate interactive components when they become visible on the page. If the user never sees it, they never load it.\n- Fully-Featured: Astro supports TypeScript, Scoped CSS, CSS Modules, Sass, Tailwind, Markdown, MDX, and any of your favorite npm packages.\n- SEO Enabled: Automatic sitemaps, RSS feeds, pagination and collections take the pain out of SEO and syndication.\n\n## H1 is good\n\n### H2 is good too\n\n> links are better\n\n[I know](they-are-better)\n\nThis post marks the first public beta release of Astro. Missing features and bugs are still to be expected at this early stage. There are still some months to go before an official 1.0 release, but there are already several fast sites built with Astro in production today. We would love your early feedback as we move towards a v1.0 release later this year.\n\n> To learn more about Astro and start building your first site, check out the project README.\n"},{"slug":"islands-architecture-2","category":"blog","title":"Islands Architecture for light-weight FEs","description":"Render HTML pages on the server, and inject placeholders or slots around highly dynamic regions.","tags":["astro","jam-stack","architecture","front-end"],"body":"\nhttps://jasonformat.com/islands-architecture/\n"},{"slug":"islands-architecture","category":"blog","title":"Islands Architecture","description":"Render HTML pages on the server, and inject placeholders or slots around highly dynamic regions.","tags":["astro","jam-stack","architecture","front-end"],"body":"\nhttps://jasonformat.com/islands-architecture/\n"},{"slug":"spa-fatigue","category":"blog","title":"Second-guessing the modern web","description":"There is a sweet spot of React - in moderately interactive interfaces..","tags":["architecture","front-end","spa"],"body":"https://macwright.com/2020/05/10/spa-fatigue.html\n"}] \ No newline at end of file +[{"slug":"introducing-astro-ship-less-javascript-1","category":"blog","title":"Introducing Astro - Ship Less JavaScript1","description":"There's a simple secret to building a faster website — just ship less.","tags":["astro","jam-stack"],"body":"\nUnfortunately, modern web development has been trending in the opposite direction—towards more. More JavaScript, more features, more moving parts, and ultimately more complexity needed to keep it all running smoothly.\n\nToday I'm excited to publicly share Astro: a new kind of static site builder that delivers lightning-fast performance with a modern developer experience. To design Astro, we borrowed the best parts of our favorite tools and then added a few innovations of our own, including:\n\n- Bring Your Own Framework (BYOF): Build your site using React, Svelte, Vue, Preact, web components, or just plain ol' HTML + JavaScript.\n- 100% Static HTML, No JS: Astro renders your entire page to static HTML, removing all JavaScript from your final build by default.\n- On-Demand Components: Need some JS? Astro can automatically hydrate interactive components when they become visible on the page. If the user never sees it, they never load it.\n- Fully-Featured: Astro supports TypeScript, Scoped CSS, CSS Modules, Sass, Tailwind, Markdown, MDX, and any of your favorite npm packages.\n- SEO Enabled: Automatic sitemaps, RSS feeds, pagination and collections take the pain out of SEO and syndication.\n\n## H1 is good\n\n### H2 is good too\n\n> links are better\n\n[I know](they-are-better)\n\nThis post marks the first public beta release of Astro. Missing features and bugs are still to be expected at this early stage. There are still some months to go before an official 1.0 release, but there are already several fast sites built with Astro in production today. We would love your early feedback as we move towards a v1.0 release later this year.\n\n> To learn more about Astro and start building your first site, check out the project README.\n\n# Example - Syntax Highlighting\n\n## Shell(Bash)\n\n```bash\n# make a new project directory and jump into it\nmkdir my-astro-project && cd $_\n\n# create a new project with npm\nnpm create astro@latest\n\n# or yarn\nyarn create astro\n\n# or pnpm\npnpm create astro@latest\n```\n\n## Python\n\n```python\nprint('hello world')\n```\n\n## Javascript\n\n```js\nconst func = () => {alert(\"hello\")}\n```\n"},{"slug":"introducing-astro-ship-less-javascript","category":"blog","title":"Introducing Astro - Ship Less JavaScript","description":"There's a simple secret to building a faster website — just ship less.","tags":["astro","jam-stack"],"body":"\nUnfortunately, modern web development has been trending in the opposite direction—towards more. More JavaScript, more features, more moving parts, and ultimately more complexity needed to keep it all running smoothly.\n\nToday I'm excited to publicly share Astro: a new kind of static site builder that delivers lightning-fast performance with a modern developer experience. To design Astro, we borrowed the best parts of our favorite tools and then added a few innovations of our own, including:\n\n- Bring Your Own Framework (BYOF): Build your site using React, Svelte, Vue, Preact, web components, or just plain ol' HTML + JavaScript.\n- 100% Static HTML, No JS: Astro renders your entire page to static HTML, removing all JavaScript from your final build by default.\n- On-Demand Components: Need some JS? Astro can automatically hydrate interactive components when they become visible on the page. If the user never sees it, they never load it.\n- Fully-Featured: Astro supports TypeScript, Scoped CSS, CSS Modules, Sass, Tailwind, Markdown, MDX, and any of your favorite npm packages.\n- SEO Enabled: Automatic sitemaps, RSS feeds, pagination and collections take the pain out of SEO and syndication.\n\n## H1 is good\n\n### H2 is good too\n\n> links are better\n\n[I know](they-are-better)\n\nThis post marks the first public beta release of Astro. Missing features and bugs are still to be expected at this early stage. There are still some months to go before an official 1.0 release, but there are already several fast sites built with Astro in production today. We would love your early feedback as we move towards a v1.0 release later this year.\n\n> To learn more about Astro and start building your first site, check out the project README.\n\n# Example - Syntax Highlighting\n\n## Shell(Bash)\n\n```bash\n# make a new project directory and jump into it\nmkdir my-astro-project && cd $_\n\n# create a new project with npm\nnpm create astro@latest\n\n# or yarn\nyarn create astro\n\n# or pnpm\npnpm create astro@latest\n```\n\n## Python\n\n```python\nprint('hello world')\n```\n\n## Javascript\n\n```js\nconst func = () => {alert(\"hello\")}\n```\n"},{"slug":"introducing-astro","category":"blog","title":"Introducing Astro - Ship Less JavaScript","description":"There's a simple secret to building a faster website — just ship less.","tags":["astro","jam-stack"],"body":"\nUnfortunately, modern web development has been trending in the opposite direction—towards more. More JavaScript, more features, more moving parts, and ultimately more complexity needed to keep it all running smoothly.\n\nToday I'm excited to publicly share Astro: a new kind of static site builder that delivers lightning-fast performance with a modern developer experience. To design Astro, we borrowed the best parts of our favorite tools and then added a few innovations of our own, including:\n\n- Bring Your Own Framework (BYOF): Build your site using React, Svelte, Vue, Preact, web components, or just plain ol' HTML + JavaScript.\n- 100% Static HTML, No JS: Astro renders your entire page to static HTML, removing all JavaScript from your final build by default.\n- On-Demand Components: Need some JS? Astro can automatically hydrate interactive components when they become visible on the page. If the user never sees it, they never load it.\n- Fully-Featured: Astro supports TypeScript, Scoped CSS, CSS Modules, Sass, Tailwind, Markdown, MDX, and any of your favorite npm packages.\n- SEO Enabled: Automatic sitemaps, RSS feeds, pagination and collections take the pain out of SEO and syndication.\n\n## H1 is good\n\n### H2 is good too\n\n> links are better\n\n[I know](they-are-better)\n\nThis post marks the first public beta release of Astro. Missing features and bugs are still to be expected at this early stage. There are still some months to go before an official 1.0 release, but there are already several fast sites built with Astro in production today. We would love your early feedback as we move towards a v1.0 release later this year.\n\n> To learn more about Astro and start building your first site, check out the project README.\n"},{"slug":"islands-architecture","category":"blog","title":"Islands Architecture","description":"Render HTML pages on the server, and inject placeholders or slots around highly dynamic regions.","tags":["astro","jam-stack","architecture","front-end"],"body":"https://jasonformat.com/islands-architecture/\n"},{"slug":"spa-fatigue","category":"blog","title":"Second-guessing the modern web","description":"There is a sweet spot of React - in moderately interactive interfaces..","tags":["architecture","front-end","spa"],"body":"https://macwright.com/2020/05/10/spa-fatigue.html\n"}] \ No newline at end of file diff --git a/src/components/Header.astro b/src/components/Header.astro index c5e8d38ce..a4020ccc7 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -9,7 +9,8 @@
@@ -17,7 +18,7 @@ { SITE.name }
-

+

{ SITE.description }

diff --git a/src/components/Paginator.astro b/src/components/Paginator.astro index da654dc60..b0fb99edb 100644 --- a/src/components/Paginator.astro +++ b/src/components/Paginator.astro @@ -2,14 +2,14 @@ const { page } = Astro.props ---
- {page.url.prev && ← Prev} - {page.url.next && Next →} + {page.url.prev && ← Prev} + {page.url.next && Next →}
diff --git a/src/components/PostDraftPreview.astro b/src/components/PostDraftPreview.astro index 25429c6a4..a87b320d2 100644 --- a/src/components/PostDraftPreview.astro +++ b/src/components/PostDraftPreview.astro @@ -5,15 +5,15 @@ const { frontmatter: post, file } = Astro.props.post
- { new Date(post.date).getDate() } + { new Date(post.date).getDate() } { `${getMonthName(post.date)} ${new Date(post.date).getFullYear()}` }
-

+

{post.title}

-

+

{post.description}

@@ -26,15 +26,15 @@ const { frontmatter: post, file } = Astro.props.post @apply flex flex-col w-full text-center } .post-draft-preview__date__day { - @apply text-6xl font-semibold text-gray-500 dark:text-gray-300 + @apply text-6xl font-semibold text-gray-500 } .post-draft-preview__date__month-n-year { @apply text-gray-400 } .post-draft-preview__title { - @apply text-2xl font-semibold text-theme-primary dark:text-theme-dark-primary hover:underline mb-2 + @apply text-2xl font-semibold text-theme-primary hover:underline mb-2 } .post-draft-preview__desc { - @apply text-lg leading-6 dark:text-white line-clamp-2 + @apply text-lg leading-6 line-clamp-2 } diff --git a/src/components/PostPreview.astro b/src/components/PostPreview.astro index aef42155c..1c936222e 100644 --- a/src/components/PostPreview.astro +++ b/src/components/PostPreview.astro @@ -5,15 +5,15 @@ const { frontmatter: post, url } = Astro.props.post
- { new Date(post.date).getDate() } + { new Date(post.date).getDate() } { `${getMonthName(post.date)} ${new Date(post.date).getFullYear()}` }
-

+

{post.title}

-

+

{post.description}

@@ -26,15 +26,15 @@ const { frontmatter: post, url } = Astro.props.post @apply flex flex-col w-full text-center; } .post-preview__date__day { - @apply text-6xl font-semibold text-gray-500 dark:text-gray-300; + @apply text-6xl font-semibold text-gray-500; } .post-preview__date__month-n-year { @apply text-gray-400; } .post-preview__title { - @apply text-2xl font-semibold text-theme-primary dark:text-theme-dark-primary hover:underline mb-2; + @apply text-2xl font-semibold text-theme-primary hover:underline mb-2; } .post-preview__desc { - @apply text-lg leading-6 line-clamp-2 dark:text-white; + @apply text-lg leading-6 line-clamp-2; } diff --git a/src/layouts/default.astro b/src/layouts/default.astro index 4bc3afa1d..8934a1ec6 100644 --- a/src/layouts/default.astro +++ b/src/layouts/default.astro @@ -13,7 +13,7 @@ const { content, showPageHeader = true } = Astro.props {showPageHeader &&
-

{content.title}

+

{content.title}

{content.description}
} @@ -25,7 +25,7 @@ const { content, showPageHeader = true } = Astro.props @apply py-4 mb-1 } .page__title { - @apply text-5xl font-extrabold text-theme-primary dark:text-theme-dark-primary + @apply text-5xl font-extrabold text-theme-primary } .page__desc { @apply text-gray-400 diff --git a/src/layouts/post-draft.astro b/src/layouts/post-draft.astro index c57d89964..ec7ab709b 100644 --- a/src/layouts/post-draft.astro +++ b/src/layouts/post-draft.astro @@ -14,15 +14,15 @@ const { content } = Astro.props
- { content.tags.length > 0 && content.tags.map(tag => {tag}) } + { content.tags.length > 0 && content.tags.map(tag => {tag}) }
-

{ content.title }

-
- { content.author } | +

{ content.title }

+
+ { content.author } | { new Intl.DateTimeFormat('en-US', { dateStyle: 'full' }).format(new Date(content.date))}
-
+
You're viewing a preview of /blog/{content.slug} which isn't published yet!
@@ -36,13 +36,13 @@ const { content } = Astro.props @apply py-4 mb-1 } .post__title { - @apply text-5xl font-extrabold text-theme-primary dark:text-theme-dark-primary + @apply text-5xl font-extrabold text-theme-primary } .post__desc { - @apply text-gray-500 dark:text-gray-100 + @apply text-gray-500 } .post__author { - @apply no-underline dark:text-white hover:text-theme-primary + @apply no-underline hover:text-theme-primary } .post__date { @apply text-gray-400 @@ -51,10 +51,10 @@ const { content } = Astro.props @apply inline-flex gap-2 } .post__tag { - @apply text-gray-400 hover:text-theme-primary dark:hover:text-theme-dark-primary + @apply text-gray-400 hover:text-theme-primary } .draft-message { - @apply bg-yellow-300 dark:bg-yellow-700 text-gray-700 dark:text-white px-2 py-1 my-2 + @apply bg-yellow-300 text-gray-700 px-2 py-1 my-2 } diff --git a/src/layouts/post.astro b/src/layouts/post.astro index d6db3a529..234c301f9 100644 --- a/src/layouts/post.astro +++ b/src/layouts/post.astro @@ -14,11 +14,11 @@ const { content } = Astro.props
- { content.tags.length > 0 && content.tags.map(tag => {tag}) } + { content.tags.length > 0 && content.tags.map(tag => {tag}) }
-

{ content.title }

-
- { content.author } | +

{ content.title }

+
+ { content.author } | { new Intl.DateTimeFormat('en-US', { dateStyle: 'full' }).format(new Date(content.date))}
@@ -33,13 +33,13 @@ const { content } = Astro.props @apply py-4 mb-1 } .post__title { - @apply text-5xl font-extrabold text-theme-primary dark:text-theme-dark-primary + @apply text-5xl font-extrabold text-theme-primary } .post__desc { - @apply text-gray-500 dark:text-gray-100 + @apply text-gray-500 } .post__author { - @apply no-underline dark:text-white hover:text-theme-primary + @apply no-underline hover:text-theme-primary } .post__date { @apply text-gray-400 @@ -48,6 +48,6 @@ const { content } = Astro.props @apply inline-flex gap-2 } .post__tag { - @apply text-gray-400 hover:text-theme-primary dark:hover:text-theme-dark-primary + @apply text-gray-400 hover:text-theme-primary } diff --git a/src/pages/drafts/[slug]/index.astro b/src/pages/drafts/[slug]/index.astro index e96735d20..a24682d43 100644 --- a/src/pages/drafts/[slug]/index.astro +++ b/src/pages/drafts/[slug]/index.astro @@ -36,12 +36,12 @@ const { slug } = Astro.params const { pages } = Astro.props const [ post ] = pages --- -
+
You're viewing a preview of /blog/{slug} which isn't published yet!
diff --git a/src/pages/index.astro b/src/pages/index.astro index eb7008121..0998dac18 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -11,7 +11,7 @@ const posts = await Astro.glob('./blog/*.md')
- All Posts → + All Posts →
@@ -20,6 +20,6 @@ const posts = await Astro.glob('./blog/*.md') @apply flex justify-center md:justify-end py-6 } .action__go-to-blog { - @apply text-base uppercase text-gray-500 dark:text-gray-400 hover:underline + @apply text-base uppercase text-gray-500 hover:underline } diff --git a/src/pages/tags/index.astro b/src/pages/tags/index.astro index 5c19fe5d0..56ccd373e 100644 --- a/src/pages/tags/index.astro +++ b/src/pages/tags/index.astro @@ -12,7 +12,7 @@ const tags = [...new Set([].concat.apply([], allPosts.map(post => post.frontmatt @@ -22,6 +22,6 @@ const tags = [...new Set([].concat.apply([], allPosts.map(post => post.frontmatt @apply list-none flex gap-2 flex-wrap } .tag { - @apply inline-block text-xl px-4 py-1 rounded-full text-theme-primary bg-theme-dark-primary dark:bg-theme-primary dark:text-theme-dark-primary hover:bg-theme-primary hover:text-theme-dark-primary dark:hover:bg-theme-dark-primary dark:hover:text-theme-primary + @apply inline-block text-xl px-4 py-1 rounded-full text-theme-primary bg-theme-dark-primary hover:bg-theme-primary hover:text-theme-dark-primary }