mirror of
https://github.com/nestriness/nestri.git
synced 2025-12-12 16:55:37 +02:00
✨ 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:
32
apps/www/src/components/router-head/router-head.tsx
Normal file
32
apps/www/src/components/router-head/router-head.tsx
Normal 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} />
|
||||
))}
|
||||
</>
|
||||
);
|
||||
});
|
||||
17
apps/www/src/entry.dev.tsx
Normal file
17
apps/www/src/entry.dev.tsx
Normal 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);
|
||||
}
|
||||
20
apps/www/src/entry.preview.tsx
Normal file
20
apps/www/src/entry.preview.tsx
Normal 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 });
|
||||
30
apps/www/src/entry.ssr.tsx
Normal file
30
apps/www/src/entry.ssr.tsx
Normal 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,
|
||||
},
|
||||
});
|
||||
}
|
||||
22
apps/www/src/entry.vercel-edge.tsx
Normal file
22
apps/www/src/entry.vercel-edge.tsx
Normal 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
15
apps/www/src/global.css
Normal 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
33
apps/www/src/root.tsx
Normal 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>
|
||||
);
|
||||
});
|
||||
14
apps/www/src/routes/index.tsx
Normal file
14
apps/www/src/routes/index.tsx
Normal 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>
|
||||
);
|
||||
});
|
||||
29
apps/www/src/routes/layout.tsx
Normal file
29
apps/www/src/routes/layout.tsx
Normal 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",
|
||||
},
|
||||
],
|
||||
};
|
||||
18
apps/www/src/routes/service-worker.ts
Normal file
18
apps/www/src/routes/service-worker.ts
Normal 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;
|
||||
Reference in New Issue
Block a user