Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] Migrate Website to Docusaurus #97

Merged
merged 8 commits into from
Aug 12, 2022
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
create landing page, cleanup
Signed-off-by: Flipez <[email protected]>
Flipez committed Aug 5, 2022
commit 0ef8f058c1e6c9952ac04e4233c956e454df0238
32 changes: 32 additions & 0 deletions docs-test/components/GetStarted.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import React, { useState } from "react";
import { BlueButton } from "./layout/Button";
import styles from "./get-started.module.css";
import { GithubButton } from "./GithubButton";

export const GetStarted: React.FC = () => {
const [clicked, setClicked] = useState<number | null>(null);
return (
<>
<div className={styles.myrow}>
<div style={{ position: "relative" }}>
{clicked ? (
<div key={clicked} className={styles.copied}>
Copied!
</div>
) : null}
<div
className={styles.codeblock}
onClick={() => {
navigator.clipboard.writeText("brew install flipez/homebrew-tap/rocket-lang");

setClicked(Date.now());
}}
title="Click to copy"
>
$ brew install flipez/homebrew-tap/rocket-lang
</div>
</div>
</div>
</>
);
};
41 changes: 41 additions & 0 deletions docs-test/components/GithubButton.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import React, { useEffect, useState } from "react";
import styles from "./github.module.css";

const GithubIcon: React.FC = () => {
return (
<svg
className={styles.githubicon}
viewBox="0 0 496 512"
style={{ height: 24, marginRight: 8 }}
>
<path
fill="currentColor"
d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
/>
</svg>
);
};

export const GithubButton: React.FC = () => {
const [stars, setStars] = useState(null);

useEffect(() => {
fetch(`https://api.github.com/repos/remotion-dev/remotion`)
.then((res) => res.json())
.then((json) => json.watchers)
.then((w) => setStars(w))
.catch((err) => {
console.log(err);
setStars(null);
});
}, []);

return (
<div className={styles.container}>
<GithubIcon /> <span>GitHub</span>{" "}
<div className={styles.stars}>
{stars ? Math.floor(stars / 1000) + "k" : null}
</div>
</div>
);
};
23 changes: 23 additions & 0 deletions docs-test/components/WriteInReact.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import React from "react";
import { GetStarted } from "./GetStarted";
import styles from "./writeinreact.module.css";

export const WriteInReact: React.FC = () => {
return (
<div className={styles.writeincss}>
<div style={{ flex: 1 }}>
<h1 className={styles.writeincsstitle}>
It's not <br /> rocket science.
</h1>
<p>
Use some of the syntax features of Ruby (but worse) and create programs that will maybe perform better.
</p>

< GetStarted />
</div>
<div className={styles.writeright}>
<img src="/img/landing_page_terminal.svg"/>
</div>
</div>
);
};
54 changes: 54 additions & 0 deletions docs-test/components/get-started.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
.myrow {
display: flex;
flex-direction: row;
align-items: center;
}

.codeblock {
background-color: #333;
padding: 12px 16px;
border-radius: 8px;
color: white;
font: var(--ifm-code-font-size) / var(--ifm-pre-line-height)
var(--ifm-font-family-monospace);
cursor: pointer;
}

.codeblock:hover {
background-color: #444;
}

@keyframes click {
0% {
transform: translateY(-18px);
opacity: 0;
}

30% {
opacity: 0.7;
}
70% {
opacity: 0.7;
}
100% {
transform: translateY(-23px);
opacity: 0;
}
}

.a:hover {
text-decoration: none;
}

.copied {
position: absolute;
animation: click 0.7s linear;
z-index: 0;
animation-fill-mode: forwards;
top: 0;
font: var(--ifm-code-font-size) / var(--ifm-pre-line-height)
var(--ifm-font-family-monospace);
font-size: 13px;
width: 100%;
text-align: center;
}
26 changes: 26 additions & 0 deletions docs-test/components/github.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
.container {
display: flex;
flex-direction: row;
font-weight: bold;
justify-content: center;
align-items: center;
}

.stars {
font-size: 0.75em;
display: inline-block;
background: var(--hover-color);
margin-left: 8px;
line-height: 1;
border-radius: 5px;
padding: 7px;
}

@media screen and (max-width: 900px) {
.githubicon {
display: none;
}
.stars {
display: none;
}
}
89 changes: 89 additions & 0 deletions docs-test/components/layout/Button.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
import { opacify } from "polished";
import type { ButtonHTMLAttributes, DetailedHTMLProps } from "react";
import React from "react";
import styles from "./button.module.css";
import { RED, UNDERLAY_RED } from "./colors";

type ExtraProps = {
size: Size;
fullWidth: boolean;
background: string;
hoverColor: string;
color: string;
loading: boolean;
};

type Size = "sm" | "bg";

type Props = DetailedHTMLProps<
ButtonHTMLAttributes<HTMLButtonElement>,
HTMLButtonElement
> &
ExtraProps;
type MandatoryProps = Omit<ExtraProps, "background" | "color" | "hoverColor">;
type PrestyledProps = DetailedHTMLProps<
ButtonHTMLAttributes<HTMLButtonElement>,
HTMLButtonElement
> &
MandatoryProps;

export const Button: React.FC<Props> = (props) => {
const { children, loading, hoverColor, fullWidth, color, size, ...other } =
props;
const actualDisabled = other.disabled || loading;

return (
<button
type="button"
className={styles.buttoncontainer}
disabled={actualDisabled}
{...other}
style={{
...(props.style ?? {}),
padding: props.size === "sm" ? "10px 16px" : "16px 22px",
color: props.color,
cursor: props.disabled ? "default" : "pointer",
backgroundColor: props.background,
// @ts-expect-error
"--hover-color": props.hoverColor,
...(props.fullWidth ? { width: "100%" } : {}),
opacity: props.disabled ? 0.7 : 1,
}}
>
{children}
</button>
);
};

export const BlueButton: React.FC<PrestyledProps> = (props) => {
return (
<Button
{...props}
background="var(--blue-underlay)"
hoverColor="var(--blue-underlay-hover)"
color="var(--blue-button-color)"
/>
);
};

export const RedButton: React.FC<PrestyledProps> = (props) => {
return (
<Button
{...props}
background={UNDERLAY_RED}
hoverColor={opacify(0.1, UNDERLAY_RED)}
color={RED}
/>
);
};

export const ClearButton: React.FC<PrestyledProps> = (props) => {
return (
<Button
{...props}
background="transparent"
color="var(--text-color)"
hoverColor="var(--clear-hover)"
/>
);
};
16 changes: 16 additions & 0 deletions docs-test/components/layout/button.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
.buttoncontainer {
border-radius: 8px;
font-weight: bold;
appearance: none;
border: none;
font: inherit;
font-weight: bold;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
transition: background-color 0.1s;
}
.buttoncontainer:not([disabled]):hover {
background-color: var(--hover-color) !important;
}
8 changes: 8 additions & 0 deletions docs-test/components/layout/colors.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { darken, transparentize } from "polished";

export const LIGHT_BLUE = "#42e9f5";
export const DARK_BLUE = "#4290f5";
export const UNDERLAY_BLUE = transparentize(0.85, DARK_BLUE);
export const RED = "#e74c3c";
export const UNDERLAY_RED = transparentize(0.9, RED);
export const BLUE_TEXT = darken(0.3, DARK_BLUE);
37 changes: 37 additions & 0 deletions docs-test/components/writeinreact.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
.writeincss {
flex-direction: row;
display: flex;
}

.writeincsstitle {
font-size: 4em;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-weight: 700;
line-height: 1;
-webkit-text-fill-color: transparent;
background: linear-gradient(
to right,
var(--text-color),
var(--light-text-color)
);
-webkit-background-clip: text;
max-width: 600px;
margin-top: 50px
}

.writeright {
flex: 1;
}

@media screen and (max-width: 900px) {
.writeincss {
flex-direction: column;
}
.writeincsstitle {
font-size: 3.5em;
}
.writeright {
margin-top: 30px;
}
}
1 change: 1 addition & 0 deletions docs-test/docs/control_expressions/_category_.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
label: Control Expressions
4 changes: 0 additions & 4 deletions docs-test/docs/control_expressions/_index.md

This file was deleted.

Loading