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.

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

feat: new website with Qwik v2 #654

Merged
merged 7 commits into from
Dec 21, 2024
Merged
Changes from 1 commit
Commits
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
Prev Previous commit
Next Next commit
chore: site refactor
gioboa committed Dec 21, 2024
commit 167a9724e317a5adebef545da3a2f8515f7dd75d
2 changes: 1 addition & 1 deletion docs/src/components/Footer/Footer.tsx
Original file line number Diff line number Diff line change
@@ -3,7 +3,7 @@ import { GitHubIcon } from "../Icons/GitHubIcon";

export const Footer = component$(() => {
return (
<footer class="flex border-t-[2px] border-slate-200 bg-white px-6 py-4 dark:border-slate-800 dark:bg-slate-900">
<footer class="flex border-t-[2px] border-slate-200 bg-white px-6 py-4 dark:border-slate-800 dark:bg-black">
<div class="grid w-full grid-cols-12">
<div class="col-span-4" />
<div class="col-span-4" />
6 changes: 3 additions & 3 deletions docs/src/components/Header/Header.tsx
Original file line number Diff line number Diff line change
@@ -15,7 +15,7 @@ export const Header = component$<Props>(({ links = [], showMenu = true }) => {
const showAsideSig = useSignal(false);
return (
<header
class={`fixed top-0 z-10 h-20 w-full border-b-[2px] border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900`}
class={`fixed top-0 z-10 h-20 w-full border-b-[2px] border-slate-200 bg-white dark:border-slate-800 dark:bg-black`}
>
<div class="grid h-full max-w-[1200px] grid-cols-12 px-6">
<div class="col-span-3 flex items-center sm:col-span-4">
@@ -79,9 +79,9 @@ export const Header = component$<Props>(({ links = [], showMenu = true }) => {
<div class="fixed inset-0 z-10 overflow-hidden">
<div class="absolute inset-0 overflow-hidden">
<div class="absolute inset-0 bg-gray-500 bg-opacity-75 opacity-100 transition-opacity"></div>
<div class="fixed inset-y-0 left-0 flex h-full w-screen max-w-xs translate-x-0 flex-col overflow-y-scroll bg-white dark:bg-slate-900">
<div class="fixed inset-y-0 left-0 flex h-full w-screen max-w-xs translate-x-0 flex-col overflow-y-scroll bg-white dark:bg-black">
<div
class={`flex h-20 items-center border-b-[2px] border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900`}
class={`flex h-20 items-center border-b-[2px] border-slate-200 bg-white dark:border-slate-800 dark:bg-black`}
>
<div class="pl-5" onClick$={() => (showAsideSig.value = false)}>
<CloseIcon />
12 changes: 1 addition & 11 deletions docs/src/components/Highlight/Highlight.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { ClassList, PropsOf } from "@qwik.dev/core";
import type { PropsOf } from "@qwik.dev/core";
import {
$,
component$,
@@ -12,11 +12,9 @@ import css from "shiki/langs/css.mjs";
import html from "shiki/langs/html.mjs";
import tsx from "shiki/langs/tsx.mjs";
import poimandres from "shiki/themes/poimandres.mjs";
import { CopyButton } from "../CopyButton/CopyButton";

export type HighlightProps = PropsOf<"div"> & {
code: string;
copyCodeClass?: ClassList;
language?: "tsx" | "html" | "css";
splitCommentStart?: string;
splitCommentEnd?: string;
@@ -25,7 +23,6 @@ export type HighlightProps = PropsOf<"div"> & {
export const Highlight = component$(
({
code,
copyCodeClass,
language = "tsx",
splitCommentStart = "{/* start */}",
splitCommentEnd = "{/* end */}",
@@ -79,13 +76,6 @@ export const Highlight = component$(

return (
<div class="code-example rounded-base relative max-h-[31.25rem]">
<CopyButton
class={[
"absolute right-3 top-3 text-white hover:bg-slate-800 hover:text-white",
copyCodeClass,
]}
code={code}
/>
<div
{...props}
class={[
29 changes: 11 additions & 18 deletions docs/src/components/MdxComponents/MdxComponents.tsx
Original file line number Diff line number Diff line change
@@ -1,26 +1,19 @@
import type { QwikIntrinsicElements } from "@qwik.dev/core";
import { Slot, component$ } from "@qwik.dev/core";
import { CodeSnippet } from "../CodeSnippet/CodeSnippet";
import { CopyButton } from "../CopyButton/CopyButton";

export const components: Record<string, any> = {
pre: component$<
QwikIntrinsicElements["div"] & {
__rawString__?: string;
}
>(({ __rawString__ }) => {
return (
<div class="relative">
<pre class="mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border bg-zinc-950 p-6 text-white dark:bg-zinc-900">
<CopyButton
class="absolute right-4 top-4 rounded p-1 text-white hover:bg-zinc-900"
code={__rawString__ || ""}
/>
<Slot />
</pre>
</div>
);
}),
pre: component$<QwikIntrinsicElements["div"] & { __rawString__?: string }>(
() => {
return (
<div class="relative">
<pre class="mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border bg-zinc-950 p-6 text-white dark:bg-zinc-900">
<Slot />
</pre>
</div>
);
},
),
code: component$<QwikIntrinsicElements["code"]>(({ ...props }) => {
return (
<code {...props}>
26 changes: 26 additions & 0 deletions docs/src/components/RouterHead/RouterHead.tsx
Original file line number Diff line number Diff line change
@@ -8,6 +8,8 @@ export const RouterHead = component$(() => {
const head = useDocumentHead();
const loc = useLocation();

const imageSrc = "https://partytown.qwik.dev/partytown-media.png";

return (
<>
<title>{head.title}</title>
@@ -16,6 +18,30 @@ export const RouterHead = component$(() => {
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />

<link rel="canonical" href={loc.url.href} />

<meta property="og:title" content={head.frontmatter.title} />
<meta property="og:type" content="article" />
<meta property="og:url" content={loc.url.href} />
<meta property="og:locale" content={"en_US"} />
<meta property="og:image" content={imageSrc} />
<meta
name="description"
property="og:description"
content={head.frontmatter.description || head.frontmatter.titlen}
/>
<meta property="og:site_name" content={head.frontmatter.title} />

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@builderio" />
<meta name="twitter:title" content={head.frontmatter.title} />
<meta
name="twitter:description"
content={head.frontmatter.description || head.frontmatter.title}
/>
<meta name="twitter:image" content={imageSrc} />
<meta name="twitter:image:alt" content="Partytown Logo" />

{head.meta.map((m) => (
<meta key={m.key} {...m} />
))}
2 changes: 1 addition & 1 deletion docs/src/global.scss
Original file line number Diff line number Diff line change
@@ -86,7 +86,7 @@
html {
height: 100%;
&.dark {
@apply bg-slate-900;
@apply bg-black;
}
}

4 changes: 2 additions & 2 deletions docs/src/routes/layout.tsx
Original file line number Diff line number Diff line change
@@ -40,9 +40,9 @@ export default component$(() => {
});
return (
<MDXProvider components={components}>
<div class="h-screen bg-white dark:bg-slate-900">
<div class="h-screen bg-white dark:bg-black">
<Header />
<main class="flex min-h-[100%] bg-white dark:bg-slate-900 lg:grid lg:grid-cols-content">
<main class="flex min-h-[100%] bg-white dark:bg-black lg:grid lg:grid-cols-content">
<aside
class={`hidden border-r-[2px] border-slate-200 dark:border-slate-800 lg:block`}
>