WIP: very mvp of cards and git issues

This commit is contained in:
William Felker 2020-09-11 11:25:22 +08:00
parent 15b42f4292
commit b670e1dd8a
2 changed files with 53 additions and 122 deletions

View File

@ -4,8 +4,17 @@ import * as System from "~/components/system";
import { css, keyframes } from "@emotion/react"; import { css, keyframes } from "@emotion/react";
const sleepDuration = 500; const blinkCursor = keyframes`
const getTypingDuration = () => 80 + 80 * (Math.random() - 0.5); 0% {opacity: 0;}
50% {opacity: 1;}
100% {opacity: 0;}
`;
const typewriter = keyframes`
0%,100% {width: 0;}
20%, 80% {width: 10.2em;}
`;
const STYLES_ROOT = css` const STYLES_ROOT = css`
height: 300px; height: 300px;
@ -19,129 +28,53 @@ const STYLES_ROOT = css`
width: 300px; width: 300px;
} }
`; `;
const STYLES_WINDOW = css`
const STYLES_INNER = css` box-sizing: border-box;
position: relative; font-family: ${Constants.font.mono};
display: flex; display: block;
flex-direction: column; border-radius: 4px;
height: 100%; width: 100%;
border-radius: 5px; background: ${Constants.system.pitchBlack};
border: 1px solid rgb(51, 51, 51); min-height: 288px;
background: var(--bg); padding: 24px;
color: var(--fg); color: ${Constants.system.white};
font-family: var(--font-mono); resize: none;
line-height: 1.5;
font-size: 14px; font-size: 14px;
box-sizing: border-box;
outline: 0;
border: 0;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
scrollbar-width: none;
white-space: pre-wrap; white-space: pre-wrap;
word-break: break-all; -ms-overflow-style: -ms-autohiding-scrollbar;
::-webkit-scrollbar {
display: none;
}
`; `;
const STYLES_ICON = css` const STYLES_WINDOW_NAV = css`
border-radius: 50%; border-bottom: 5px solid red;
`;
const STYLES_WINDOW_BODY = css`
overflow: hidden;
white-space: nowrap;
animation: ${typewriter};
display: inline-block; display: inline-block;
width: 12px; position: relative;
height: 12px; animation-duration: 10s;
animation-timing-function: steps(45, end);
animation-iteration-count: infinite;
`; `;
const STYLES_HEADER = css`
height: 34px;
display: flex;
align-items: center;
text-align: center;
text-align: center @media (max-width: 600px) {
height: 28px;
}
@media (max-width: 320px) {
font-size: 11px;
}
`;
const STYLES_BODY = css`
padding: 12px 14px;
flex: 1;
`;
const Line = ({ text, noPrompt = false, noCaret = false }) => (
<>
{!noPrompt && <span> ~ </span>}
{text}
{!noCaret && <span />}
</>
);
const CodeTerminal = () => { const CodeTerminal = () => {
const [lineCount, setLineCount] = useState(0);
const renderLine = text => {
const frames = [];
// starting frame
{
/*
frames.push(
<Frame duration={sleepDuration} key={`${text}-first`}>
<Line />
</Frame>
);
// typing out the line
for (let i = 0; i < text.length; i++) {
const isLastLetter = i === text.length - 1;
const duration = isLastLetter ? sleepDuration : getTypingDuration();
frames.push(
<Frame duration={duration} key={`${text}-${i}`}>
<Line text={text.slice(0, i + 1)} />
</Frame>
);
}
// ending frame
frames.push(
<Frame key={`${text}-last`}>
<Line text={text} noCaret />
</Frame>
);
return (
<Keyframes component="p" onEnd={() => setLineCount(c => c + 1)}>
{frames}
</Keyframes>
);
*/
}
};
return ( return (
<div css={STYLES_ROOT}> <div css={STYLES_ROOT}>
<div> <div css={STYLES_WINDOW}>
<div css={STYLES_HEADER}> <div css={STYLES_WINDOW_NAV}>Cat</div>
<span css={STYLES_ICON} /> <div css={STYLES_WINDOW_BODY}>
<span css={STYLES_ICON} /> npm install --save slate-react-system
<span css={STYLES_ICON} />
</div>
<div css={STYLES_BODY}>
{renderLine("# Hyper is an Electron-based terminal")}
{lineCount >= 1 && renderLine("# Built on HTML/CSS/JS")}
{lineCount >= 2 && renderLine("# Fully extensible")}
{lineCount >= 3 &&
renderLine("# Install themes and plugins from the command line")}
{lineCount >= 4 && renderLine("hyper i hyper-rose-pine")}
{lineCount >= 5 && (
<>
<p className={styles.green}>
<Line
text="hyper-rose-pine installed successfully!"
noPrompt
noCaret
/>
HJello
</p>
<p>
<Line />
</p>
</>
)}
</div> </div>
</div> </div>
</div> </div>

View File

@ -250,7 +250,9 @@ export default class CommunityPage extends React.Component {
}; };
} }
async componentDidMount() { async componentDidMount() {
fetch(`https://api.github.com/repos/filecoin-project/slate/issues`) fetch(
`https://api.github.com/repos/filecoin-project/slate/issues?labels=For+the+public`
)
.then(res => res.json()) .then(res => res.json())
.then(data => { .then(data => {
console.log(data); console.log(data);
@ -525,6 +527,7 @@ export default class CommunityPage extends React.Component {
</h3> </h3>
<br /> <br />
<br /> <br />
<button <button
css={STYLES_BUTTON_PRIMARY} css={STYLES_BUTTON_PRIMARY}
onClick={() => onClick={() =>
@ -581,12 +584,7 @@ export default class CommunityPage extends React.Component {
</h3> </h3>
<br /> <br />
<br /> <br />
<p>
{" "}
@will is working on determining why this codeblock is
inviable.
(https://github.com/vercel/hyper-site/blob/main/components/terminal)
</p>{" "}
<CodeTerminal /> <CodeTerminal />
<br /> <br />
<br /> <br />