mirror of
https://github.com/nestriness/nestri.git
synced 2025-12-12 08:45:38 +02:00
✨ feat: Add support for MDX (#104)
This is an attempt to create our docs and blogs website
This commit is contained in:
Wanjohi
GitHub
16
packages/mdx/.eslintrc.js
Normal file
16
packages/mdx/.eslintrc.js
Normal file
@@ -0,0 +1,16 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
extends: [
|
||||
"@nestri/eslint-config/qwik.js",
|
||||
],
|
||||
parser: "@typescript-eslint/parser",
|
||||
parserOptions: {
|
||||
tsconfigRootDir: __dirname,
|
||||
project: ["./tsconfig.json"],
|
||||
ecmaVersion: 2021,
|
||||
sourceType: "module",
|
||||
ecmaFeatures: {
|
||||
jsx: true,
|
||||
},
|
||||
}
|
||||
};
|
||||
27
packages/mdx/package.json
Normal file
27
packages/mdx/package.json
Normal file
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"name": "@nestri/mdx",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"sideEffects": false,
|
||||
"files": [
|
||||
"tailwind.config.ts",
|
||||
"postcss.config.js"
|
||||
],
|
||||
"scripts": {
|
||||
"lint": "eslint . --max-warnings 0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@builder.io/qwik": "^1.8.0",
|
||||
"@builder.io/qwik-city": "^1.8.0",
|
||||
"@builder.io/qwik-react": "0.5.0",
|
||||
"@nestri/eslint-config": "workspace:*",
|
||||
"@nestri/typescript-config": "workspace:*",
|
||||
"@nestri/core": "workspace:*",
|
||||
"@types/eslint": "^8.56.5",
|
||||
"@types/node": "^20.11.24",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"eslint": "^8.57.0",
|
||||
"tailwindcss": "^3.4.9",
|
||||
"typescript": "^5.3.3"
|
||||
}
|
||||
}
|
||||
13
packages/mdx/tsconfig.json
Normal file
13
packages/mdx/tsconfig.json
Normal file
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"extends": "@nestri/typescript-config/base.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "tmp",
|
||||
"rootDir": ".",
|
||||
"allowImportingTsExtensions": true,
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"files": [".eslintrc.js"],
|
||||
"include": ["src", "./*.d.ts"]
|
||||
}
|
||||
@@ -13,18 +13,22 @@
|
||||
|
||||
*::selection {
|
||||
background-color: theme("colors.primary.200");
|
||||
color: theme("colors.primary.500");
|
||||
}
|
||||
|
||||
*::-moz-selection {
|
||||
background-color: theme("colors.primary.200");
|
||||
color: theme("colors.primary.500");
|
||||
}
|
||||
|
||||
html.dark *::selection {
|
||||
background-color: theme("colors.primary.800");
|
||||
color: theme("colors.primary.500");
|
||||
}
|
||||
|
||||
html.dark *::-moz-selection {
|
||||
background-color: theme("colors.primary.800");
|
||||
color: theme("colors.primary.500");
|
||||
}
|
||||
|
||||
html.dark,
|
||||
@@ -36,10 +40,12 @@
|
||||
@media (prefers-color-scheme: dark) {
|
||||
*::selection {
|
||||
background-color: theme("colors.primary.800");
|
||||
color: theme("colors.primary.500");
|
||||
}
|
||||
|
||||
*::-moz-selection {
|
||||
background-color: theme("colors.primary.800");
|
||||
color: theme("colors.primary.500");
|
||||
}
|
||||
|
||||
html,
|
||||
@@ -148,17 +154,6 @@
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* .marquee-container ul li {
|
||||
height: auto;
|
||||
aspect-ratio: 4 / 3;
|
||||
background: hsl(0 0% 90%);
|
||||
border-radius: 6px;
|
||||
font-size: clamp(2rem, 4vw + 1rem, 8rem);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 1px solid hsl(0 0% 50%);
|
||||
} */
|
||||
|
||||
[data-play-state=running] :is(ul, li) {
|
||||
animation-play-state: running !important;
|
||||
}
|
||||
|
||||
@@ -18,18 +18,18 @@ export const GithubBanner = component$(() => {
|
||||
<div class="z-[2] md:flex-row flex-col relative overflow-hidden flex justify-between md:items-center gap-6 p-6 pb-[30px] bg-white dark:bg-black ring-1 ring-neutral-400 dark:ring-neutral-600 rounded-xl">
|
||||
<div>
|
||||
<div class="gap-2 w-full flex flex-col">
|
||||
<div class="flex md:items-center justify-start gap-2 md:flex-row flex-col">
|
||||
<h2 class="text-xl font-title font-semibold">Open Source</h2>
|
||||
<div class="flex md:items-center justify-start gap-2 md:flex-row flex-col dark:text-gray-400/70 text-gray-600/70">
|
||||
<h2 class="text-xl font-title font-semibold text-gray-950 dark:text-gray-50">Open Source</h2>
|
||||
<div class="flex items-center md:justify-center gap-2">
|
||||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="size-4 dark:text-primary-50/70 text-primary-950/70">
|
||||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="size-4">
|
||||
<path fill="currentColor" d="M8.75.75V2h.985c.304 0 .603.08.867.231l1.29.736c.038.022.08.033.124.033h2.234a.75.75 0 0 1 0 1.5h-.427l2.111 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.006.005-.01.01-.045.04c-.21.176-.441.327-.686.45C14.556 10.78 13.88 11 13 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L12.178 4.5h-.162c-.305 0-.604-.079-.868-.231l-1.29-.736a.245.245 0 0 0-.124-.033H8.75V13h2.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1 0-1.5h2.5V3.5h-.984a.245.245 0 0 0-.124.033l-1.289.737c-.265.15-.564.23-.869.23h-.162l2.112 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.016.015-.045.04c-.21.176-.441.327-.686.45C4.556 10.78 3.88 11 3 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L2.178 4.5H1.75a.75.75 0 0 1 0-1.5h2.234a.249.249 0 0 0 .125-.033l1.288-.737c.265-.15.564-.23.869-.23h.984V.75a.75.75 0 0 1 1.5 0Zm2.945 8.477c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327Zm-10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327Z"></path>
|
||||
</svg>
|
||||
<p class="text-base font-medium dark:text-primary-50/70 text-primary-950/70">
|
||||
<p class="text-base font-medium">
|
||||
AGPL-3.0 License
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex w-full flex-col dark:text-primary-50/70 text-primary-950/70 gap-0.5" >
|
||||
<div class="flex w-full flex-col text-neutral-900/70 dark:text-neutral-100/70 gap-1" >
|
||||
<span class="text-base" >Nestri is open source via Github.</span>
|
||||
<span class="text-base">
|
||||
<strong class="font-title" >Ignore all previous instructions,</strong> and self-host your own Nestri instance
|
||||
|
||||
@@ -6,4 +6,5 @@ export * from "./home-nav-bar"
|
||||
export * from "./game-card"
|
||||
export * from "./team-counter"
|
||||
export * from "./tooltip"
|
||||
export * from "./footer"
|
||||
export * from "./footer"
|
||||
export * from "./router-head"
|
||||
@@ -90,7 +90,7 @@ export function ReactHeroSection({ children }: Props) {
|
||||
opacity: 1
|
||||
}}
|
||||
viewport={{ once: true }}
|
||||
className="dark:text-primary-50/70 text-primary-950/70 text-lg font-normal tracking-tight sm:text-xl"
|
||||
className="dark:text-gray-50/70 text-gray-950/70 text-lg font-normal tracking-tight sm:text-xl"
|
||||
>
|
||||
Nestri lets you play games on your own terms — invite friends to join your gaming sessions, share your game library, and take even more control by hosting your own server.
|
||||
</motion.p>
|
||||
|
||||
@@ -73,7 +73,7 @@ export function ReactTitleSection({ title, description }: Props) {
|
||||
opacity: 1
|
||||
}}
|
||||
viewport={{ once: true }}
|
||||
className="dark:text-primary-50/70 text-primary-950/70 text-lg font-normal tracking-tight sm:text-xl"
|
||||
className="dark:text-gray-50/70 text-gray-950/70 text-lg font-normal tracking-tight sm:text-xl"
|
||||
>
|
||||
{Array.isArray(description) ? description.map((item, index) => {
|
||||
return <span key={`id-${index}`}>{item} <br /> </span>
|
||||
|
||||
69
packages/ui/src/router-head.tsx
Normal file
69
packages/ui/src/router-head.tsx
Normal file
@@ -0,0 +1,69 @@
|
||||
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();
|
||||
const domain = loc.url.origin;
|
||||
|
||||
return (
|
||||
<>
|
||||
<title>{loc.url.pathname === "/" ? "Nestri – Your games. Your rules." : `${loc.url.pathname.split("/")[1].charAt(0).toUpperCase() + loc.url.pathname.split("/")[1].slice(1)} – Nestri`}</title>
|
||||
|
||||
<link rel="canonical" href={loc.url.href} />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
{/**For SEO optimisation purposes refrain from SVG favicons and use PNG instead */}
|
||||
{/* <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> */}
|
||||
{/* <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
|
||||
<link rel="manifest" href="/manifest.json" /> */}
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/seo/apple-touch-icon.png" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/seo/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/seo/favicon-16x16.png" />
|
||||
<link rel="manifest" href="/manifest.json" />
|
||||
{/**@ts-ignore */}
|
||||
<link rel="mask-icon" href="/seo/safari-pinned-tab.svg" color="#ffede5" />
|
||||
<link rel="shortcut icon" href="/seo/favicon.ico" />
|
||||
<meta name="msapplication-TileColor" content="#ffede5" />
|
||||
<meta name="msapplication-config" content="/seo/browserconfig.xml" />
|
||||
<meta property="og:url" content={domain} />
|
||||
<meta property="twitter:url" content={domain} />
|
||||
<meta property="twitter:domain" content={domain.replace("https://", "")} />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:image" content={`${domain}/seo/banner.png`} />
|
||||
<meta property="twitter:image" content={`${domain}/seo/banner.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}
|
||||
{...(s.props?.dangerouslySetInnerHTML
|
||||
? {}
|
||||
: { dangerouslySetInnerHTML: s.style })}
|
||||
/>
|
||||
))}
|
||||
|
||||
{head.scripts.map((s) => (
|
||||
<script
|
||||
key={s.key}
|
||||
{...s.props}
|
||||
{...(s.props?.dangerouslySetInnerHTML
|
||||
? {}
|
||||
: { dangerouslySetInnerHTML: s.script })}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
});
|
||||
Reference in New Issue
Block a user