docs: add community pages (QwikDev#2650)

utherpally · Feb 3, 2023 · 4756fa8 · 4756fa8
1 parent dc3d44a
commit 4756fa8
Show file tree

Hide file tree

Showing 18 changed files with 324 additions and 4 deletions.
diff --git a/packages/docs/src/components/header/header.tsx b/packages/docs/src/components/header/header.tsx
@@ -76,6 +76,11 @@ export const Header = component$(() => {
               <span>Integrations</span>
             </a>
           </li>
+          <li>
+            <a href="/community/groups" class={{ active: pathname.startsWith('/community') }}>
+              <span>Community</span>
+            </a>
+          </li>
           <li>
             <a href="/showcase/" class={{ active: pathname.startsWith('/showcase') }}>
               <span>Showcase</span>

diff --git a/packages/docs/src/routes/community/components/group-link.tsx b/packages/docs/src/routes/community/components/group-link.tsx
@@ -0,0 +1,14 @@
+import { component$, JSXNode, Slot } from '@builder.io/qwik';
+
+export interface GroupLinkProps {
+  link: string;
+  socialLogo?: JSXNode;
+}
+
+export const GroupLink = component$((props: GroupLinkProps) => {
+  return (
+    <a href={props.link}>
+      <Slot name="socialLogo" /> <Slot />
+    </a>
+  );
+});
diff --git a/packages/docs/src/routes/community/components/social-logos/discord-logo.tsx b/packages/docs/src/routes/community/components/social-logos/discord-logo.tsx
@@ -0,0 +1,19 @@
+import { component$ } from '@builder.io/qwik';
+
+export const DiscordLogo = component$(() => {
+  return (
+    <>
+      <svg
+        class="fill-current text-indigo-800 inline-block"
+        width="21"
+        height="21"
+        role="img"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <title>Discord</title>
+        <path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z" />
+      </svg>
+    </>
+  );
+});
diff --git a/packages/docs/src/routes/community/components/social-logos/facebook-logo.tsx b/packages/docs/src/routes/community/components/social-logos/facebook-logo.tsx
@@ -0,0 +1,19 @@
+import { component$ } from '@builder.io/qwik';
+
+export const FacebookLogo = component$(() => {
+  return (
+    <>
+      <svg
+        class="fill-current text-blue-600 inline-block"
+        width="21"
+        height="21"
+        role="img"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <title>Facebook</title>
+        <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
+      </svg>
+    </>
+  );
+});
diff --git a/packages/docs/src/routes/community/components/social-logos/linkedin-logo.tsx b/packages/docs/src/routes/community/components/social-logos/linkedin-logo.tsx
@@ -0,0 +1,19 @@
+import { component$ } from '@builder.io/qwik';
+
+export const LinkedInLogo = component$(() => {
+  return (
+    <>
+      <svg
+        class="fill-current text-blue-800 inline-block"
+        width="21"
+        height="21"
+        role="img"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <title>LinkedIn</title>
+        <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
+      </svg>
+    </>
+  );
+});
diff --git a/packages/docs/src/routes/community/components/social-logos/meetup-logo.tsx b/packages/docs/src/routes/community/components/social-logos/meetup-logo.tsx
@@ -0,0 +1,12 @@
+import { component$ } from '@builder.io/qwik';
+
+export const MeetupLogo = component$(() => {
+  return (
+    <>
+      <svg role="img" viewBox="0 0 24 24" width="21" height="21" xmlns="http://www.w3.org/2000/svg">
+        <title>Meetup</title>
+        <path d="M6.98.555a.518.518 0 0 0-.105.011.53.53 0 1 0 .222 1.04.533.533 0 0 0 .409-.633.531.531 0 0 0-.526-.418zm6.455.638a.984.984 0 0 0-.514.143.99.99 0 1 0 1.02 1.699.99.99 0 0 0 .34-1.36.992.992 0 0 0-.846-.482zm-3.03 2.236a5.029 5.029 0 0 0-4.668 3.248 3.33 3.33 0 0 0-1.46.551 3.374 3.374 0 0 0-.94 4.562 3.634 3.634 0 0 0-.605 4.649 3.603 3.603 0 0 0 2.465 1.597c.018.732.238 1.466.686 2.114a3.9 3.9 0 0 0 5.423.992c.068-.047.12-.106.184-.157.987.881 2.47 1.026 3.607.24a2.91 2.91 0 0 0 1.162-1.69 4.238 4.238 0 0 0 2.584-.739 4.274 4.274 0 0 0 1.19-5.789 2.466 2.466 0 0 0 .433-3.308 2.448 2.448 0 0 0-1.316-.934 4.436 4.436 0 0 0-.776-2.873 4.467 4.467 0 0 0-5.195-1.656 5.106 5.106 0 0 0-2.773-.807zm-5.603.817a.759.759 0 0 0-.423.135.758.758 0 1 0 .863 1.248.757.757 0 0 0 .193-1.055.758.758 0 0 0-.633-.328zm15.994 2.37a.842.842 0 0 0-.47.151.845.845 0 1 0 1.175.215.845.845 0 0 0-.705-.365zm-8.15 1.028c.063 0 .124.005.182.014a.901.901 0 0 1 .45.187c.169.134.273.241.432.393.24.227.414.089.534.02.208-.122.369-.219.984-.208.633.011 1.363.237 1.514 1.317.168 1.199-1.966 4.289-1.817 5.722.106 1.01 1.815.299 1.96 1.22.186 1.198-2.136.753-2.667.493-.832-.408-1.337-1.34-1.12-2.26.16-.688 1.7-3.498 1.757-3.93.059-.44-.177-.476-.324-.484-.19-.01-.34.081-.526.362-.169.255-2.082 4.085-2.248 4.398-.296.56-.67.694-1.044.674-.548-.029-.798-.32-.72-.848.047-.31 1.26-3.049 1.323-3.476.039-.265-.013-.546-.275-.68-.263-.135-.572.07-.664.227-.128.215-1.848 4.706-2.032 5.038-.316.576-.65.76-1.152.784-1.186.056-2.065-.92-1.678-2.116.173-.532 1.316-4.571 1.895-5.599.389-.69 1.468-1.216 2.217-.892.387.167.925.437 1.084.507.366.163.759-.277.913-.412.155-.134.302-.276.49-.357.142-.06.343-.095.532-.094zm10.88 2.057a.468.468 0 0 0-.093.011.467.467 0 0 0-.36.555.47.47 0 0 0 .557.36.47.47 0 0 0 .36-.557.47.47 0 0 0-.464-.37zm-22.518.81a.997.997 0 0 0-.832.434 1 1 0 1 0 1.39-.258 1 1 0 0 0-.558-.176zm21.294 2.094a.635.635 0 0 0-.127.013.627.627 0 0 0-.48.746.628.628 0 0 0 .746.483.628.628 0 0 0 .482-.746.63.63 0 0 0-.621-.496zm-18.24 6.097a.453.453 0 0 0-.092.012.464.464 0 1 0 .195.908.464.464 0 0 0 .356-.553.465.465 0 0 0-.459-.367zm13.675 1.55a1.044 1.044 0 0 0-.583.187 1.047 1.047 0 1 0 1.456.265 1.044 1.044 0 0 0-.873-.451zM11.4 22.154a.643.643 0 0 0-.36.115.646.646 0 0 0-.164.899.646.646 0 0 0 .899.164.646.646 0 0 0 .164-.898.646.646 0 0 0-.54-.28z" />
+      </svg>
+    </>
+  );
+});
diff --git a/packages/docs/src/routes/community/components/social-logos/reddit-logo.tsx b/packages/docs/src/routes/community/components/social-logos/reddit-logo.tsx
@@ -0,0 +1,17 @@
+import { component$ } from '@builder.io/qwik';
+
+export const RedditLogo = component$(() => {
+  return (
+    <>
+      <svg
+        class="fill-current text-orange-500 inline-block"
+        xmlns="http://www.w3.org/2000/svg"
+        width="21"
+        height="21"
+        viewBox="0 0 24 24"
+      >
+        <path d="M14.238 15.348c.085.084.085.221 0 .306-.465.462-1.194.687-2.231.687l-.008-.002-.008.002c-1.036 0-1.766-.225-2.231-.688-.085-.084-.085-.221 0-.305.084-.084.222-.084.307 0 .379.377 1.008.561 1.924.561l.008.002.008-.002c.915 0 1.544-.184 1.924-.561.085-.084.223-.084.307 0zm-3.44-2.418c0-.507-.414-.919-.922-.919-.509 0-.923.412-.923.919 0 .506.414.918.923.918.508.001.922-.411.922-.918zm13.202-.93c0 6.627-5.373 12-12 12s-12-5.373-12-12 5.373-12 12-12 12 5.373 12 12zm-5-.129c0-.851-.695-1.543-1.55-1.543-.417 0-.795.167-1.074.435-1.056-.695-2.485-1.137-4.066-1.194l.865-2.724 2.343.549-.003.034c0 .696.569 1.262 1.268 1.262.699 0 1.267-.566 1.267-1.262s-.568-1.262-1.267-1.262c-.537 0-.994.335-1.179.804l-2.525-.592c-.11-.027-.223.037-.257.145l-.965 3.038c-1.656.02-3.155.466-4.258 1.181-.277-.255-.644-.415-1.05-.415-.854.001-1.549.693-1.549 1.544 0 .566.311 1.056.768 1.325-.03.164-.05.331-.05.5 0 2.281 2.805 4.137 6.253 4.137s6.253-1.856 6.253-4.137c0-.16-.017-.317-.044-.472.486-.261.82-.766.82-1.353zm-4.872.141c-.509 0-.922.412-.922.919 0 .506.414.918.922.918s.922-.412.922-.918c0-.507-.413-.919-.922-.919z" />
+      </svg>
+    </>
+  );
+});
diff --git a/packages/docs/src/routes/community/components/social-logos/telegram-logo.tsx b/packages/docs/src/routes/community/components/social-logos/telegram-logo.tsx
@@ -0,0 +1,20 @@
+import { component$ } from '@builder.io/qwik';
+
+export const TelegramLogo = component$(() => {
+  return (
+    <>
+      <svg
+        class="fill-current text-blue-500 inline-block"
+        width="21"
+        height="21"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          id="telegram-5"
+          d="M12,0c-6.627,0 -12,5.373 -12,12c0,6.627 5.373,12 12,12c6.627,0 12,-5.373 12,-12c0,-6.627 -5.373,-12 -12,-12Zm0,2c5.514,0 10,4.486 10,10c0,5.514 -4.486,10 -10,10c-5.514,0 -10,-4.486 -10,-10c0,-5.514 4.486,-10 10,-10Zm2.692,14.889c0.161,0.115 0.368,0.143 0.553,0.073c0.185,-0.07 0.322,-0.228 0.362,-0.42c0.435,-2.042 1.489,-7.211 1.884,-9.068c0.03,-0.14 -0.019,-0.285 -0.129,-0.379c-0.11,-0.093 -0.263,-0.12 -0.399,-0.07c-2.096,0.776 -8.553,3.198 -11.192,4.175c-0.168,0.062 -0.277,0.223 -0.271,0.4c0.006,0.177 0.125,0.33 0.296,0.381c1.184,0.354 2.738,0.847 2.738,0.847c0,0 0.725,2.193 1.104,3.308c0.047,0.139 0.157,0.25 0.301,0.287c0.145,0.038 0.298,-0.001 0.406,-0.103c0.608,-0.574 1.548,-1.461 1.548,-1.461c0,0 1.786,1.309 2.799,2.03Zm-5.505,-4.338l0.84,2.769l0.186,-1.754c0,0 3.243,-2.925 5.092,-4.593c0.055,-0.048 0.062,-0.13 0.017,-0.188c-0.045,-0.057 -0.126,-0.071 -0.188,-0.032c-2.143,1.368 -5.947,3.798 -5.947,3.798Z"
+        />
+      </svg>{' '}
+    </>
+  );
+});
diff --git a/packages/docs/src/routes/community/groups/index.mdx b/packages/docs/src/routes/community/groups/index.mdx
@@ -0,0 +1,56 @@
+---
+title: Qwik Community
+contributors:
+  - shairez
+---
+
+import {FacebookLogo} from '../components/social-logos/facebook-logo';
+import {LinkedInLogo} from '../components/social-logos/linkedin-logo';
+import {DiscordLogo} from '../components/social-logos/discord-logo';
+import {RedditLogo} from '../components/social-logos/reddit-logo';
+import {TelegramLogo} from '../components/social-logos/telegram-logo';
+import {GroupLink} from '../components/group-link';
+import {useStyles$} from '../components/group-link';
+
+
+
+# Qwik Community
+
+We are lucky to have such a welcoming and beginner friendly community 
+that love to help each other learn and grow.
+
+Please read our [community values](/community/values), join our community groups
+and spread your love for innovation!
+
+> Want to start a local Qwik community? 
+[Please apply here for the Qwik Community Leaders program](https://forms.gle/S1rxiKiVdhZqkk8RA)
+
+
+### Our Discord Community 
+
+- <DiscordLogo/> Join the [official Qwik community](https://discord.com/invite/bNVSQmPzqy) on Builder.io's Discord Server
+
+
+### Newsletters
+
+- <a href="https://qwiknewsletter.com" target="_blank">Qwikly Newsletter - Weekly news about Qwik</a>
+
+### Global Communities
+
+
+- <FacebookLogo/> <a href="https://www.facebook.com/groups/qwikdevs" target="_blank">Qwik Developers Facebook Group</a>
+- <LinkedInLogo/> <a href="https://www.linkedin.com/groups/12677766/" target="_blank">Qwik Developers Linkedin Group</a>
+- <TelegramLogo/> <a href="https://t.me/qwikdevs" target="_blank">Qwik Developers Channel on Telegram</a>
+- <RedditLogo/> <a href="https://www.reddit.com/r/qwik/" target="_blank">Qwik on Reddit</a>
+
+
+### Communities By Countries
+
+#### Israel
+- <FacebookLogo/> <a href="https://www.facebook.com/groups/qwikisrael" target="_blank">Qwik Israel Facebook Group</a>
+
+#### France
+- <LinkedInLogo/> <a href="https://www.linkedin.com/groups/14153723/" target="_blank">Qwik France Linkedin Group</a>
+
+#### Taiwan
+- <FacebookLogo/> <a href="https://www.facebook.com/groups/836365297555873" target="_blank">Qwik Taiwan Facebook Group</a>
diff --git a/packages/docs/src/routes/community/layout!.tsx b/packages/docs/src/routes/community/layout!.tsx
@@ -0,0 +1,40 @@
+import { component$, Slot, useStyles$ } from '@builder.io/qwik';
+import { SideBar } from '../../components/sidebar/sidebar';
+import { Footer } from '../../components/footer/footer';
+import { Header } from '../../components/header/header';
+import { OnThisPage } from '../../components/on-this-page/on-this-page';
+import { ContentNav } from '../../components/content-nav/content-nav';
+import type { RequestHandler } from '@builder.io/qwik-city';
+import { CommunityNavbar } from './components/community-navbar/community-navbar';
+import styles from '../docs.css?inline';
+
+export default component$(() => {
+  useStyles$(styles);
+
+  return (
+    <div class="docs fixed-header">
+      <Header />
+      <SideBar />
+      {/* <CommunityNavbar/> */}
+      <main>
+        <div class="docs-container">
+          <article>
+            <Slot />
+          </article>
+          <ContentNav />
+          <Footer />
+        </div>
+        <OnThisPage />
+      </main>
+    </div>
+  );
+});
+
+export const onGet: RequestHandler = ({ cacheControl }) => {
+  cacheControl({
+    public: true,
+    maxAge: 3600,
+    sMaxAge: 3600,
+    staleWhileRevalidate: 86400,
+  });
+};
diff --git a/packages/docs/src/routes/community/menu.md b/packages/docs/src/routes/community/menu.md
@@ -0,0 +1,9 @@
+# Community
+
+## Community
+
+- [Groups](groups/index.mdx)
+- [Projects](projects/index.mdx)
+- [Values](values/index.mdx)
+- [Media](../media/index.mdx)
+- [Showcase](../showcase/index.mdx)
diff --git a/packages/docs/src/routes/community/projects/index.mdx b/packages/docs/src/routes/community/projects/index.mdx
@@ -0,0 +1,28 @@
+---
+title: Qwik Community Projects
+contributors:
+  - shairez
+---
+
+
+# Community Projects
+
+#### Components libraries
+
+- <a href="https://github.com/qwikifiers/qwik-ui" target="_blank">Qwik UI - The first Qwik ui components library</a>
+- <a href="https://papanasi.js.org/" target="_blank">Papanasi - a universal UI library based on Mitosis</a>
+
+
+
+#### Integrations 
+
+- <a href="https://github.com/qwikifiers/qwik-nx" target="_blank">Qwik NX - A plugin for nx (the monorepo management tool)</a>
+- <a href="https://github.com/wmertens/styled-vanilla-extract" target="_blank">Qwik + Vanilla Extract</a>
+
+#### IDE Extensions
+
+- <a href="https://github.com/qwikverse/vscode-qwik-snippets" target="_blank">Qwik VS Code snippets</a>
+
+
+If you have more projects to add, please [edit this page](https://github.com/BuilderIO/qwik/edit/main/packages/docs/src/routes/community/projects/index.mdx)
+
diff --git a/packages/docs/src/routes/community/values/index.mdx b/packages/docs/src/routes/community/values/index.mdx
@@ -0,0 +1,62 @@
+---
+title: Qwik Community Values
+contributors:
+  - shairez
+---
+
+
+## Qwik Community Values: 
+
+
+---
+
+#### ✅ All questions are good questions.
+There is no such thing as _" that's a noob question"_ in our community. 
+We value our community members for their patience, helpfulness and welcoming attitude towards newcomers that make everyone feel at home. 
+So always feel comfortable asking any question that comes to mind about anything Qwik or JS related. 
+
+---
+
+#### ✅ Be respectful and inclusive
+We are a global community where members join from different cultures and backgrounds and have different styles of communication.
+Because of that we'd like to ask you to mind how you phrase your questions / answers / discussion points.
+As text has no tone, it's important to be extra mindful on how we communicate and appreciate each other's attempt to help.  
+It's totally OK not to agree with others as long as we respect each other at the same time.
+
+**Always think**: "How would I like to be treated?"" and treat others the same way.
+
+---
+
+#### ✅ Support and encourage each other 
+We like to praise members in our community for their efforts. 
+If you see anyone sharing a Qwik related project, blog post, video, or any "win"… 
+give them a 👏 or 🚀 or any other emoji or kind words that will brighten their day. 
+If you see someone struggling, give them words of encouragement and if possible, 
+help them out. Remember - teaching is the best way to learn, plus, it's good karma 😉
+
+---
+
+#### ✅ Follow the boy/girl scout rule: 
+_"Always leave the place better than you found it."_
+
+If you see anything that could be better - please open up a PR or an issue or reach out to us. 
+
+**For example:** think something in the docs doesn't make sense? 
+please don't close the page, but instead - click the "Edit this page" link and try to improve it.
+You'll be doing a huge favor for the rest of us, so thank you!
+
+---
+
+#### ✅ Respect other solutions
+We are all in this JavaScript game together and there's a lot to learn from each other.
+Without other frameworks / solutions innovation would have stopped and we couldn't be where we are today.
+
+That's why we embrace the entire JS ecosystem and welcome collaboration with all the other frameworks and libraries.
+That's also why we believe that Qwik members should feel free to share their love for other solutions without the fear of being criticized for their choices.
+Our community is a safe environment for ALL developers. 
+
+---
+
+#### ✅ Keep it fun
+We like to keep things light and fun, so you might see silly emojis, contests, 
+commit messages etc. Feel free to join the silliness! 🤪😊
diff --git a/packages/docs/src/routes/docs/docs.css → packages/docs/src/routes/docs.css b/packages/docs/src/routes/docs/docs.css → packages/docs/src/routes/docs.css
diff --git a/packages/docs/src/routes/docs/layout!.tsx b/packages/docs/src/routes/docs/layout!.tsx
@@ -5,7 +5,7 @@ import { Footer } from '../../components/footer/footer';
 import { Header } from '../../components/header/header';
 import { OnThisPage } from '../../components/on-this-page/on-this-page';
 import { SideBar } from '../../components/sidebar/sidebar';
-import styles from './docs.css?inline';
+import styles from '../docs.css?inline';
 
 export default component$(() => {
   const loc = useLocation();

diff --git a/packages/docs/src/routes/integrations/layout!.tsx b/packages/docs/src/routes/integrations/layout!.tsx
@@ -5,7 +5,7 @@ import { Footer } from '../../components/footer/footer';
 import { Header } from '../../components/header/header';
 import { OnThisPage } from '../../components/on-this-page/on-this-page';
 import { SideBar } from '../../components/sidebar/sidebar';
-import styles from '../docs/docs.css?inline';
+import styles from '../docs.css?inline';
 
 export default component$(() => {
   useStyles$(styles);

diff --git a/packages/docs/src/routes/qwikcity/layout!.tsx b/packages/docs/src/routes/qwikcity/layout!.tsx
@@ -5,7 +5,7 @@ import { Footer } from '../../components/footer/footer';
 import { Header } from '../../components/header/header';
 import { OnThisPage } from '../../components/on-this-page/on-this-page';
 import { SideBar } from '../../components/sidebar/sidebar';
-import styles from '../docs/docs.css?inline';
+import styles from '../docs.css?inline';
 
 export default component$(() => {
   useStyles$(styles);

diff --git a/starters/apps/documentation-site/src/routes/docs/layout.tsx b/starters/apps/documentation-site/src/routes/docs/layout.tsx
@@ -2,7 +2,7 @@ import { component$, Slot, useStyles$ } from '@builder.io/qwik';
 import type { DocumentHead } from '@builder.io/qwik-city';
 import Menu from '~/components/menu/menu';
 import OnThisPage from '~/components/on-this-page/on-this-page';
-import styles from './docs.css?inline';
+import styles from '../docs.css?inline';
 
 export default component$(() => {
   useStyles$(styles);