feat: Add dev website (#4)

## Description

**What(what issue does this code solve/what feature does it add):**

Add a qwik project where we can add API(s) and a frontend which will be
used to review and deploy to AWS our docker containers for testing.

**How(how does it solve it):**

1. Initialise a qwik project at `apps/www` 

## Required Checklist:

- [ ] I have added any necessary documentation and comments in my code
(where appropriate)
- [ ] I have added tests to make sure my code runs in all contexts

## Further comments
This commit is contained in:
Wanjohi
2024-03-29 22:54:17 +03:00
committed by GitHub
parent 41350edf3e
commit e68e1018c3
31 changed files with 10244 additions and 0 deletions

View File

@@ -0,0 +1,32 @@
import { component$ } from "@builder.io/qwik";
import { useDocumentHead, useLocation } from "@builder.io/qwik-city";
/**
* The RouterHead component is placed inside of the document `<head>` element.
*/
export const RouterHead = component$(() => {
const head = useDocumentHead();
const loc = useLocation();
return (
<>
<title>{head.title}</title>
<link rel="canonical" href={loc.url.href} />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/png" href="/favicon.png" />
{head.meta.map((m) => (
<meta key={m.key} {...m} />
))}
{head.links.map((l) => (
<link key={l.key} {...l} />
))}
{head.styles.map((s) => (
<style key={s.key} {...s.props} dangerouslySetInnerHTML={s.style} />
))}
</>
);
});

View File

@@ -0,0 +1,17 @@
/*
* WHAT IS THIS FILE?
*
* Development entry point using only client-side modules:
* - Do not use this mode in production!
* - No SSR
* - No portion of the application is pre-rendered on the server.
* - All of the application is running eagerly in the browser.
* - More code is transferred to the browser than in SSR mode.
* - Optimizer/Serialization/Deserialization code is not exercised!
*/
import { render, type RenderOptions } from "@builder.io/qwik";
import Root from "./root";
export default function (opts: RenderOptions) {
return render(document, <Root />, opts);
}

View File

@@ -0,0 +1,20 @@
/*
* WHAT IS THIS FILE?
*
* It's the bundle entry point for `npm run preview`.
* That is, serving your app built in production mode.
*
* Feel free to modify this file, but don't remove it!
*
* Learn more about Vite's preview command:
* - https://vitejs.dev/config/preview-options.html#preview-options
*
*/
import { createQwikCity } from "@builder.io/qwik-city/middleware/node";
import qwikCityPlan from "@qwik-city-plan";
import render from "./entry.ssr";
/**
* The default export is the QwikCity adapter used by Vite preview.
*/
export default createQwikCity({ render, qwikCityPlan });

View File

@@ -0,0 +1,30 @@
/**
* WHAT IS THIS FILE?
*
* SSR entry point, in all cases the application is rendered outside the browser, this
* entry point will be the common one.
*
* - Server (express, cloudflare...)
* - npm run start
* - npm run preview
* - npm run build
*
*/
import {
renderToStream,
type RenderToStreamOptions,
} from "@builder.io/qwik/server";
import { manifest } from "@qwik-client-manifest";
import Root from "./root";
export default function (opts: RenderToStreamOptions) {
return renderToStream(<Root />, {
manifest,
...opts,
// Use container attributes to set attributes on the html tag.
containerAttributes: {
lang: "en-us",
...opts.containerAttributes,
},
});
}

View File

@@ -0,0 +1,22 @@
/*
* WHAT IS THIS FILE?
*
* It's the entry point for Vercel Edge when building for production.
*
* Learn more about the Vercel Edge integration here:
* - https://qwik.builder.io/docs/deployments/vercel-edge/
*
*/
import {
createQwikCity,
type PlatformVercel,
} from "@builder.io/qwik-city/middleware/vercel-edge";
import qwikCityPlan from "@qwik-city-plan";
import { manifest } from "@qwik-client-manifest";
import render from "./entry.ssr";
declare global {
interface QwikCityPlatform extends PlatformVercel {}
}
export default createQwikCity({ render, qwikCityPlan, manifest });

15
apps/www/src/global.css Normal file
View File

@@ -0,0 +1,15 @@
/**
* Tailwind CSS imports
* View the full documentation at https://tailwindcss.com
*/
@tailwind base;
@tailwind components;
@tailwind utilities;
html *,
html *::after,
html *::before {
box-sizing: border-box;
margin: 0;
padding: 0;
}

33
apps/www/src/root.tsx Normal file
View File

@@ -0,0 +1,33 @@
import { component$ } from "@builder.io/qwik";
import {
QwikCityProvider,
RouterOutlet,
ServiceWorkerRegister,
} from "@builder.io/qwik-city";
import { RouterHead } from "./components/router-head/router-head";
import "./global.css";
import "@fontsource/geist-sans/400.css";
export default component$(() => {
/**
* The root of a QwikCity site always start with the <QwikCityProvider> component,
* immediately followed by the document's <head> and <body>.
*
* Don't remove the `<head>` and `<body>` elements.
*/
return (
<QwikCityProvider>
<head>
<meta charSet="utf-8" />
<link rel="manifest" href="/manifest.json" />
<RouterHead />
</head>
<body lang="en" class="min-h-screen font-sans antialiased">
<RouterOutlet />
<ServiceWorkerRegister />
</body>
</QwikCityProvider>
);
});

View File

@@ -0,0 +1,14 @@
import { component$ } from "@builder.io/qwik";
export default component$(() => {
return (
<div class='justify-center items-center w-screen h-screen flex flex-col gap-3' >
<h1 class='text-3xl' >Hi 👋</h1>
<p class='text-xl' >
Can't wait to see what you build with qwik!
<br />
Happy coding.
</p>
</div>
);
});

View File

@@ -0,0 +1,29 @@
import { component$, Slot } from "@builder.io/qwik";
import type { RequestHandler } from "@builder.io/qwik-city";
import type { DocumentHead } from "@builder.io/qwik-city";
export const onGet: RequestHandler = async ({ cacheControl }) => {
// Control caching for this request for best performance and to reduce hosting costs:
// https://qwik.builder.io/docs/caching/
cacheControl({
// Always serve a cached response by default, up to a week stale
staleWhileRevalidate: 60 * 60 * 24 * 7,
// Max once every 5 seconds, revalidate on the server to get a fresh version of this page
maxAge: 5,
});
};
export default component$(() => {
return <Slot />;
});
export const head: DocumentHead = {
title: "netris.me/dev | Build the future of gaming",
meta: [
{
name: "description",
content: "Play with your friends right from your browser",
},
],
};

View File

@@ -0,0 +1,18 @@
/*
* WHAT IS THIS FILE?
*
* The service-worker.ts file is used to have state of the art prefetching.
* https://qwik.builder.io/qwikcity/prefetching/overview/
*
* Qwik uses a service worker to speed up your site and reduce latency, ie, not used in the traditional way of offline.
* You can also use this file to add more functionality that runs in the service worker.
*/
import { setupServiceWorker } from "@builder.io/qwik-city/service-worker";
setupServiceWorker();
addEventListener("install", () => self.skipWaiting());
addEventListener("activate", () => self.clients.claim());
declare const self: ServiceWorkerGlobalScope;