DiscreteWorld · mistricky · Dec 10, 2021 · Dec 11, 2021 · Dec 11, 2021
diff --git a/.Dockerignore b/.Dockerignore
@@ -0,0 +1,4 @@
+node_modules
+build
+.cache
+.husky
diff --git a/.gitignore b/.gitignore
@@ -3,3 +3,7 @@ yarn-error.log
 
 # Only yarn
 package-lock.json
+
+/.cache
+/build
+/public/build
diff --git a/Dockerfile b/Dockerfile
@@ -0,0 +1,21 @@
+FROM node:16-alpine3.12 as installer
+
+LABEL mistricky "[email protected]"
+
+WORKDIR /workspace
+
+COPY package.json ./
+COPY yarn.lock ./
+
+RUN yarn 
+
+FROM node:16-alpine3.12
+
+WORKDIR /workspace
+
+COPY . .
+COPY --from=installer /workspace/node_modules ./node_modules
+
+RUN yarn build
+
+ENTRYPOINT [ "yarn", "start" ]
diff --git a/README.md b/README.md
@@ -1 +1 @@
-# js-stack-template
+# Official website
diff --git a/app/constants/links.ts b/app/constants/links.ts
@@ -0,0 +1 @@
+export const GITHUB_REPOSITORY_ADDR = 'https://github.com/DiscreteWorld/official-website';
diff --git a/app/entry.client.tsx b/app/entry.client.tsx
@@ -0,0 +1,4 @@
+import { hydrate } from "react-dom";
+import { RemixBrowser } from "remix";
+
+hydrate(<RemixBrowser />, document);
diff --git a/app/entry.server.tsx b/app/entry.server.tsx
@@ -0,0 +1,39 @@
+import ReactDOMServer, {renderToString} from 'react-dom/server';
+import {RemixServer} from 'remix';
+import type {EntryContext} from 'remix';
+import {ServerStyleSheet} from 'styled-components';
+import StylesContext from './styled-context';
+
+export default function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext,
+) {
+  const sheet = new ServerStyleSheet();
+
+  renderToString(
+    sheet.collectStyles(
+      <StylesContext.Provider value={null}>
+        <RemixServer context={remixContext} url={request.url} />
+      </StylesContext.Provider>,
+    ),
+  );
+
+  const styles = sheet.getStyleTags();
+
+  sheet.seal();
+
+  const markup = ReactDOMServer.renderToString(
+    <StylesContext.Provider value={styles}>
+      <RemixServer context={remixContext} url={request.url} />
+    </StylesContext.Provider>,
+  );
+
+  responseHeaders.set('Content-Type', 'text/html');
+
+  return new Response('<!DOCTYPE html>' + markup, {
+    status: responseStatusCode,
+    headers: responseHeaders,
+  });
+}
diff --git a/app/layout/footer.tsx b/app/layout/footer.tsx
@@ -0,0 +1 @@
+export const Footer = () => <footer></footer>;
diff --git a/app/layout/header.tsx b/app/layout/header.tsx
@@ -0,0 +1,58 @@
+import {useEffect, useState} from 'react';
+import {Links, Meta} from 'remix';
+import styled from 'styled-components';
+import {GITHUB_REPOSITORY_ADDR} from '~/constants/links';
+
+interface LogoProps {
+  isLight: boolean;
+}
+
+export interface HeaderProps {}
+
+const Logo = styled.img<LogoProps>`
+  transition: all 0.5s;
+  filter: ${props => props.isLight && 'drop-shadow( 0 0 2px #71d4f0)'};
+`;
+
+const LogoWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const LogoText = styled.span`
+  color: white;
+  margin-left: 10px;
+`;
+
+const Wrapper = styled.div`
+  padding: 0 15px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const LinkWrapper = styled.div`
+  width: 110px;
+  display: flex;
+  justify-content: space-between;
+`;
+
+const Link = styled.a`
+  text-decoration: none;
+  color: white;
+`;
+
+export const Header = () => {
+  return (
+    <Wrapper>
+      <LogoWrapper>
+        <Logo src="/assets/logo.svg" isLight={false} />
+        <LogoText>Discrete world</LogoText>
+      </LogoWrapper>
+      <LinkWrapper>
+        <Link href="#">Blog</Link>
+        <Link href={GITHUB_REPOSITORY_ADDR}>GitHub</Link>
+      </LinkWrapper>
+    </Wrapper>
+  );
+};
diff --git a/app/layout/index.ts b/app/layout/index.ts
@@ -0,0 +1,2 @@
+export * from './header';
+export * from './footer';
diff --git a/app/root.tsx b/app/root.tsx
@@ -0,0 +1,130 @@
+import {
+  Link,
+  Links,
+  LiveReload,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+  useCatch,
+} from 'remix';
+import type {LinksFunction} from 'remix';
+
+import globalStylesUrl from '~/styles/global.css';
+import darkStylesUrl from '~/styles/dark.css';
+import {Footer, Header} from './layout';
+import StyledContext from './styled-context';
+import {useContext} from 'react';
+
+export const links: LinksFunction = () => {
+  return [
+    {rel: 'stylesheet', href: globalStylesUrl},
+    {
+      rel: 'stylesheet',
+      href: darkStylesUrl,
+      media: '(prefers-color-scheme: dark)',
+    },
+    {
+      rel: 'preconnect',
+      href: 'https://fonts.googleapis.com',
+    },
+    {
+      rel: 'preconnect',
+      href: 'https://fonts.gstatic.com',
+      crossOrigin: 'anonymous',
+    },
+    {
+      rel: 'stylesheet',
+      href: 'https://fonts.googleapis.com/css2?family=Mulish:wght@200&display=swap',
+    },
+  ];
+};
+
+export default function App() {
+  return (
+    <Document title="Discrete world">
+      <Layout>
+        <Outlet />
+      </Layout>
+    </Document>
+  );
+}
+
+export const ErrorBoundary = ({error}: {error: Error}) => (
+  <Document title="Error!">
+    <Layout>
+      <div>
+        <h1>There was an error</h1>
+        <p>{error.message}</p>
+        <hr />
+        <p>
+          Hey, developer, you should replace this with what you want your users to see.
+        </p>
+      </div>
+    </Layout>
+  </Document>
+);
+
+export const CatchBoundary = () => {
+  let caught = useCatch();
+
+  let message;
+  switch (caught.status) {
+    case 401:
+      message = (
+        <p>Oops! Looks like you tried to visit a page that you do not have access to.</p>
+      );
+      break;
+    case 404:
+      message = <p>Oops! Looks like you tried to visit a page that does not exist.</p>;
+      break;
+
+    default:
+      throw new Error(caught.data || caught.statusText);
+  }
+
+  return (
+    <Document title={`${caught.status} ${caught.statusText}`}>
+      <Layout>
+        <h1>
+          {caught.status}: {caught.statusText}
+        </h1>
+        {message}
+      </Layout>
+    </Document>
+  );
+};
+
+const Document = ({children, title}: {children: React.ReactNode; title?: string}) => {
+  const styles = useContext(StyledContext);
+
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <link data-trunk href="assets/logo.svg" rel="icon" />
+        {title ? <title>{title}</title> : null}
+        <Meta />
+        {styles}
+        <Links />
+      </head>
+      <body>
+        {children}
+        <ScrollRestoration />
+        <Scripts />
+        {process.env.NODE_ENV === 'development' && <LiveReload />}
+      </body>
+    </html>
+  );
+};
+
+function Layout({children}: {children: React.ReactNode}) {
+  return (
+    <div className="remix-app">
+      <Header />
+      {children}
+      <Footer />
+    </div>
+  );
+}
diff --git a/app/routes/index.tsx b/app/routes/index.tsx
@@ -0,0 +1,10 @@
+import {useEffect, useState} from 'react';
+import type {MetaFunction, LoaderFunction} from 'remix';
+import {useLoaderData, json, Link} from 'remix';
+import styled from 'styled-components';
+
+const Wrapper = styled.div``;
+
+export default function Home() {
+  return <Wrapper></Wrapper>;
+}
diff --git a/app/styled-context.tsx b/app/styled-context.tsx
@@ -0,0 +1,2 @@
+import {createContext} from 'react';
+export default createContext<null | string>(null);
diff --git a/app/styles/dark.css b/app/styles/dark.css
diff --git a/app/styles/global.css b/app/styles/global.css
@@ -0,0 +1,4 @@
+:root {
+  background: #212d39;
+  font-family: 'Mulish', sans-serif;
+}
diff --git a/package.json b/package.json
@@ -1,15 +1,22 @@
 {
-  "name": "fe-template",
+  "name": "official-website",
   "version": "1.0.0",
   "main": "index.js",
-  "repository": "https://github.com/DiscreteWorld/fe-template",
   "author": "[email protected] <[email protected]>",
   "license": "MIT",
   "scripts": {
     "prettier": "prettier",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "build": "remix build",
+    "dev": "remix dev",
+    "postinstall": "remix setup node",
+    "start": "remix-serve build"
   },
   "devDependencies": {
+    "@remix-run/dev": "^1.0.6",
+    "@types/react": "^17.0.24",
+    "@types/react-dom": "^17.0.9",
+    "@types/styled-components": "^5.1.17",
     "@typescript-eslint/eslint-plugin": "^5.3.0",
     "@typescript-eslint/parser": "^5.3.0",
     "commitlint": "^14.1.0",
@@ -18,7 +25,19 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
     "husky": "^7.0.0",
-    "prettier": "^2.4.1"
+    "prettier": "^2.4.1",
+    "typescript": "^4.1.2"
   },
-  "dependencies": {}
+  "dependencies": {
+    "@remix-run/react": "^1.0.6",
+    "@remix-run/serve": "^1.0.6",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "remix": "^1.0.6",
+    "styled-components": "^5.3.3"
+  },
+  "engines": {
+    "node": ">=14"
+  },
+  "sideEffects": false
 }
diff --git a/public/assets/logo.svg b/public/assets/logo.svg
diff --git a/remix.config.js b/remix.config.js
@@ -0,0 +1,10 @@
+/**
+ * @type {import('@remix-run/dev/config').AppConfig}
+ */
+module.exports = {
+  appDirectory: "app",
+  browserBuildDirectory: "public/build",
+  publicPath: "/build/",
+  serverBuildDirectory: "build",
+  devServerPort: 8002
+};
diff --git a/remix.env.d.ts b/remix.env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="@remix-run/dev" />
+/// <reference types="@remix-run/node/globals" />
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2019"],
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "target": "ES2019",
+    "strict": true,
+    "paths": {
+      "~/*": ["./app/*"]
+    },
+
+    // Remix takes care of building everything in `remix build`.
+    "noEmit": true
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export const GITHUB_REPOSITORY_ADDR = 'https://github.com/DiscreteWorld/official-website';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export * from './header';
		export * from './footer';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		import {createContext} from 'react';
		export default createContext<null \| string>(null);
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		/// <reference types="@remix-run/dev" />
		/// <reference types="@remix-run/node/globals" />