Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(website): restore vendor prefixes and resolve hydration mismatch #431

Merged
merged 1 commit into from
Jan 28, 2024
Merged

fix(website): restore vendor prefixes and resolve hydration mismatch #431

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 1 addition & 4 deletions packages/website/postcss.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,6 @@ export default {
plugins: {
'tailwindcss/nesting': {},
tailwindcss: {},
autoprefixer: {
// TODO: This should be removed after `bright` https://github.com/postcss/autoprefixer?tab=readme-ov-file#control-comments for auto prefixes
add: false,
},
autoprefixer: {},
},
};
22 changes: 22 additions & 0 deletions packages/website/src/components/client-only.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
'use client';

import { useEffect, useState } from 'react';
import type { ReactNode } from 'react';

type ClientOnlyProps = {
children: ReactNode;
};

export const ClientOnly = ({ children }: ClientOnlyProps) => {
const [hasMounted, setHasMounted] = useState(false);

useEffect(() => {
setHasMounted(true);
}, []);

if (!hasMounted) {
return null;
}

return children;
};
5 changes: 4 additions & 1 deletion packages/website/src/components/code.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
import { Code as BrightCode } from 'bright';

import { ClientOnly } from './client-only.js';
import theme from '../theme.json';

type CodeProps = {
code: string;
};

export const Code = ({ code, ...rest }: CodeProps) => (
<BrightCode lang="tsx" theme={theme} code={code.trim()} {...rest} />
<ClientOnly>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice, I didn't think about that since I thought the code SSR is important! But this makes sense, the code does not play a huge role.

Ideally, we'd have a PR in the bright repo itself. code-hike/bright#39

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay, let's hope it will be resolved upstream. Merging this for now.

<BrightCode lang="tsx" theme={theme} code={code.trim()} {...rest} />
</ClientOnly>
);
1 change: 1 addition & 0 deletions packages/website/src/components/mdx.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Link } from 'waku';

import { Code } from './code.js';

export const components = {
Expand Down
5 changes: 4 additions & 1 deletion packages/website/src/templates/blog-article-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,10 @@ export const BlogArticlePage = async ({ slug }: BlogArticlePageProps) => {

return (
<Page>
<Meta title={frontmatter.title} description={frontmatter.description} />
<Meta
title={`${frontmatter.title} — Waku`}
description={frontmatter.description}
/>
<div className="relative z-10 mx-auto w-full max-w-[80ch] pt-16 text-white lg:pt-64">
<div className="mb-8 flex items-center gap-4">
{frontmatter.release && (
Expand Down
Loading