Merge pull request #69 from tone-row/hide-docs

docs(docs): under construction page

docs/components/slang/config.ts

@@ -26,7 +26,7 @@ const config: Partial<SlangConfig> = {
     black: ["#000000"],
   },
   colors: {
-    background: "var(--palette-white-0)",
+    background: "var(--palette-white-1)",
     foreground: "var(--palette-black-0)",
   },
 };

docs/components/slang/index.tsx

@@ -1,4 +1,5 @@
-import {
+/* Do not edit this file directly */
+  import {
   BoxComponent,
   TypeComponent,
   forwardRefWithAs,
@@ -19,5 +20,5 @@ type Colors =
 export type BoxProps = PropsWithAs<BaseBoxProps<Breakpoints, Colors>>;
 export type TypeProps = PropsWithAs<BaseTypeProps<Breakpoints, Colors>>;
 const Box = forwardRefWithAs<BoxProps, "div">(BoxComponent);
-const Type = forwardRefWithAs<TypeProps, "div">(TypeComponent);
+const Type = forwardRefWithAs<TypeProps, "p">(TypeComponent);
 export { Box, Type };

docs/components/slang/slang.css

@@ -304,12 +304,22 @@ summary {
   padding: 0;
 }
 
+/* Cascade heights for Next.js and Create-React-App */
 html,
 body,
 #__next,
 #root {
   height: 100%;
-  height: -webkit-fill-available;
+  /* height: -webkit-fill-available; */
+}
+
+@supports (-webkit-touch-callout: none) {
+  html,
+  body,
+  #__next,
+  #root {
+    height: -webkit-fill-available;
+  }
 }
 
 html {
@@ -593,7 +603,7 @@ body {
 	--palette-white-2:#dadada;
 	--palette-white-3:#e7ebec;
 	--palette-black-0:#000000;
-	--color-background:var(--palette-white-0);
+	--color-background:var(--palette-white-1);
 	--color-foreground:var(--palette-black-0);
  }
 
@@ -645,8 +655,13 @@ overflow: var(--overflow);
 .slang-box.h {
 height: var(--h);
 }
-.slang-box.hmin {
-min-height: var(--hmin);
+.slang-box.root {
+min-height: var(--root);
+}
+@supports (-webkit-touch-callout: none) {
+.slang-box.root-safari {
+min-height: var(--root-safari);
+}
 }
 .slang-box.background {
 background-color: var(--background);
@@ -706,8 +721,8 @@ overflow: var(--overflow-tablet);
 .slang-box.h-tablet {
 height: var(--h-tablet);
 }
-.slang-box.hmin-tablet {
-min-height: var(--hmin-tablet);
+.slang-box.root-tablet {
+min-height: var(--root-tablet);
 }
 .slang-box.background-tablet {
 background-color: var(--background-tablet);
@@ -768,8 +783,8 @@ overflow: var(--overflow-desktop);
 .slang-box.h-desktop {
 height: var(--h-desktop);
 }
-.slang-box.hmin-desktop {
-min-height: var(--hmin-desktop);
+.slang-box.root-desktop {
+min-height: var(--root-desktop);
 }
 .slang-box.background-desktop {
 background-color: var(--background-desktop);

docs/next-env.d.ts

@@ -1,2 +1,7 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
+
+declare module "*.svg" {
+  const content: any;
+  export default content;
+}

docs/next.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  target: "experimental-serverless-trace",
+  webpack(config) {
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ["@svgr/webpack"],
+    });
+    return config;
+  },
+};

docs/package.json

@@ -18,6 +18,7 @@
     "sass": "^1.32.8"
   },
   "devDependencies": {
+    "@svgr/webpack": "^5.5.0",
     "concurrently": "^6.0.0"
   }
 }

docs/pages/.index.tsx

@@ -0,0 +1,60 @@
+import { Code, InlineCode, Page, Section, Title } from "../components/theme";
+import { Type, Box } from "slang";
+import React from "react";
+import Link from "next/link";
+
+export default function Home() {
+  return (
+    <Page>
+      <Section>
+        <Title>Slang</Title>
+        <Type size={1}>
+          Welcome! This the documentation for the open source UI component
+          library called Slang. It's not quite ready to use but it will be soon.
+        </Type>
+        <Type size={1}>Stay tuned, there's more to come! 🍿</Type>
+      </Section>
+      <Section>
+        <Type as="h2" size={2}>
+          Why?
+        </Type>
+        <Type>
+          The idea driving Slang is that we can do a large part of what's needed
+          to style our applications with a small number of abstractions. In
+          fact, Slang offers only <u>two</u> exported components.
+        </Type>
+        <Type>In additon to that, Slang is:</Type>
+      </Section>
+      <Section>
+        <Type as="h4" size={1}>
+          ✅ &nbsp; CSS First
+        </Type>
+        <Type>
+          The internet has a had a zero-runtime approach to styling since 1996.
+        </Type>
+        <Type>
+          Whenever possible we use CSS over an equivalent from the javascript
+          ecosystem. This includes bundling:{" "}
+          <InlineCode>&lt;link rel="stylesheet href="..."&gt;</InlineCode> is
+          already great at that. It also includes dynamic styles, for which
+          psuedo-classes and css custom properties have our back.
+        </Type>
+      </Section>
+      <Section>
+        <Type as="h4" size={1}>
+          ✅ &nbsp; Continuous By Design
+        </Type>
+        <Type>
+          Although there are plenty of reasons we still need media queries,
+          there is a lot to be gained by making our designs more fluid at the
+          lowest levels. Slang has fluid type and fluid spacing units built in,
+          as well as a continuous exponential type scale. The result is a lot
+          better use of screen-space over a broader range of devices.
+        </Type>
+      </Section>
+      <Box as="button" background="palette-black-0" p={3}>
+        <Type color="palette-white-0">Cool Button!</Type>
+      </Box>
+    </Page>
+  );
+}

docs/pages/_app.tsx

@@ -14,9 +14,10 @@ function MyApp({ Component, pageProps }) {
           src="https://plausible.io/js/plausible.js"
         />
       </Head>
-      <DocsLayout>
+      <Component {...pageProps} />
+      {/* <DocsLayout>
         <Component {...pageProps} />
-      </DocsLayout>
+      </DocsLayout> */}
     </>
   );
 }

docs/pages/index.module.css

@@ -0,0 +1,9 @@
+.Warning {
+  width: 85vw;
+  height: 45vh;
+  object-fit: contain;
+  filter: drop-shadow(0 1.1px 2.6px rgba(0, 0, 0, 0.02))
+    drop-shadow(0 3.1px 6.3px rgba(0, 0, 0, 0.028))
+    drop-shadow(0 6.2px 12.9px rgba(0, 0, 0, 0.035));
+  transform: translateY(-20px);
+}

docs/pages/index.tsx

@@ -1,60 +1,20 @@
-import { Code, InlineCode, Page, Section, Title } from "../components/theme";
-import { Type, Box } from "slang";
 import React from "react";
-import Link from "next/link";
+import { Box, Type } from "slang";
+import Warning from "../components/warning.svg";
+import styles from "./index.module.css";
 
-export default function Home() {
+export default function Index() {
   return (
-    <Page>
-      <Section>
-        <Title>Slang</Title>
-        <Type size={1}>
-          Welcome! This the documentation for the open source UI component
-          library called Slang. It's not quite ready to use but it will be soon.
-        </Type>
-        <Type size={1}>Stay tuned, there's more to come! 🍿</Type>
-      </Section>
-      <Section>
-        <Type as="h2" size={2}>
-          Why?
-        </Type>
-        <Type>
-          The idea driving Slang is that we can do a large part of what's needed
-          to style our applications with a small number of abstractions. In
-          fact, Slang offers only <u>two</u> exported components.
-        </Type>
-        <Type>In additon to that, Slang is:</Type>
-      </Section>
-      <Section>
-        <Type as="h4" size={1}>
-          ✅ &nbsp; CSS First
-        </Type>
-        <Type>
-          The internet has a had a zero-runtime approach to styling since 1996.
-        </Type>
-        <Type>
-          Whenever possible we use CSS over an equivalent from the javascript
-          ecosystem. This includes bundling:{" "}
-          <InlineCode>&lt;link rel="stylesheet href="..."&gt;</InlineCode> is
-          already great at that. It also includes dynamic styles, for which
-          psuedo-classes and css custom properties have our back.
-        </Type>
-      </Section>
-      <Section>
-        <Type as="h4" size={1}>
-          ✅ &nbsp; Continuous By Design
-        </Type>
-        <Type>
-          Although there are plenty of reasons we still need media queries,
-          there is a lot to be gained by making our designs more fluid at the
-          lowest levels. Slang has fluid type and fluid spacing units built in,
-          as well as a continuous exponential type scale. The result is a lot
-          better use of screen-space over a broader range of devices.
-        </Type>
-      </Section>
-      <Box as="button" background="palette-black-0" p={3}>
-        <Type color="palette-white-0">Cool Button!</Type>
+    <Box root content="center" items="center">
+      <Box gap={12}>
+        <Warning className={styles.Warning} />
+        <Box content="center" flow="column" gap={3}>
+          <Type size={2} weight="700">
+            Stay tuned!
+          </Type>
+          <Type size={2}> Slang is not quite ready.</Type>
+        </Box>
       </Box>
-    </Page>
+    </Box>
   );
 }