mirror of
https://github.com/pomber/git-history.git
synced 2024-09-11 14:35:57 +03:00
Show history
This commit is contained in:
parent
221e4e22e8
commit
d9332451cb
@ -19,10 +19,8 @@ const portPromise = getPort({ port: 3000 });
|
||||
|
||||
module.exports = async function runServer(path, commitsPromise) {
|
||||
const server = http.createServer((request, response) => {
|
||||
console.log(request.url);
|
||||
if (request.url === "/") {
|
||||
Promise.all([indexPromise, commitsPromise]).then(([index, commits]) => {
|
||||
console.log(commits);
|
||||
const newIndex = index.replace(
|
||||
"<script>window._CLI=null</script>",
|
||||
`<script>window._CLI={commits:${JSON.stringify(
|
||||
|
40
src/app-helpers.js
Normal file
40
src/app-helpers.js
Normal file
@ -0,0 +1,40 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { getLanguage, loadLanguage } from "./language-detector";
|
||||
|
||||
export function Center({ children }) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
height: "100%",
|
||||
padding: "0 40px"
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Loading({ repo, path }) {
|
||||
return (
|
||||
<Center>
|
||||
<p>
|
||||
Loading <strong>{path}</strong> history {repo ? "from " + repo : ""}...
|
||||
</p>
|
||||
</Center>
|
||||
);
|
||||
}
|
||||
|
||||
export function useLanguageLoader(path) {
|
||||
const [loadedLang, setLang] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const lang = getLanguage(path);
|
||||
loadLanguage(lang).then(() => setLang(lang));
|
||||
}, [path, setLang]);
|
||||
|
||||
return loadedLang;
|
||||
}
|
@ -28,13 +28,15 @@ function CommitInfo({ commit, move, onClick }) {
|
||||
}}
|
||||
onClick={onClick}
|
||||
>
|
||||
<img
|
||||
src={commit.author.avatar}
|
||||
alt={commit.author.login}
|
||||
height={40}
|
||||
width={40}
|
||||
style={{ borderRadius: "4px" }}
|
||||
/>
|
||||
{commit.author.avatar && (
|
||||
<img
|
||||
src={commit.author.avatar}
|
||||
alt={commit.author.login}
|
||||
height={40}
|
||||
width={40}
|
||||
style={{ borderRadius: "4px" }}
|
||||
/>
|
||||
)}
|
||||
<div style={{ paddingLeft: "6px" }}>
|
||||
<div style={{ fontSize: "1.1rem", fontWeight: "500" }}>
|
||||
{commit.author.login}
|
||||
|
38
src/index.js
38
src/index.js
@ -1,27 +1,29 @@
|
||||
import { getLanguage } from "./language-detector";
|
||||
import App from "./app";
|
||||
import App from "./napp";
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
|
||||
const [repo, sha, path] = getParams();
|
||||
const lang = getLanguage(path);
|
||||
const root = document.getElementById("root");
|
||||
ReactDOM.render(<App />, root);
|
||||
|
||||
ReactDOM.render(<App repo={repo} sha={sha} path={path} lang={lang} />, root);
|
||||
// const [repo, sha, path] = getParams();
|
||||
// const lang = getLanguage(path);
|
||||
|
||||
function getParams() {
|
||||
const [
|
||||
,
|
||||
owner,
|
||||
reponame,
|
||||
action,
|
||||
sha,
|
||||
...paths
|
||||
] = window.location.pathname.split("/");
|
||||
// ReactDOM.render(<App repo={repo} sha={sha} path={path} lang={lang} />, root);
|
||||
|
||||
if (action !== "commits" && action !== "blob") {
|
||||
return [];
|
||||
}
|
||||
// function getParams() {
|
||||
// const [
|
||||
// ,
|
||||
// owner,
|
||||
// reponame,
|
||||
// action,
|
||||
// sha,
|
||||
// ...paths
|
||||
// ] = window.location.pathname.split("/");
|
||||
|
||||
return [owner + "/" + reponame, sha, "/" + paths.join("/")];
|
||||
}
|
||||
// if (action !== "commits" && action !== "blob") {
|
||||
// return [];
|
||||
// }
|
||||
|
||||
// return [owner + "/" + reponame, sha, "/" + paths.join("/")];
|
||||
// }
|
||||
|
@ -68,3 +68,21 @@ const dependencies = {
|
||||
export function getLanguageDependencies(lang) {
|
||||
return dependencies[lang];
|
||||
}
|
||||
|
||||
export function loadLanguage(lang) {
|
||||
if (["js", "css", "html"].includes(lang)) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
const deps = getLanguageDependencies(lang);
|
||||
|
||||
let depPromise = import("prismjs");
|
||||
|
||||
if (deps) {
|
||||
depPromise = depPromise.then(() =>
|
||||
Promise.all(deps.map(dep => import(`prismjs/components/prism-${dep}`)))
|
||||
);
|
||||
}
|
||||
|
||||
return depPromise.then(() => import(`prismjs/components/prism-${lang}`));
|
||||
}
|
||||
|
25
src/napp.js
Normal file
25
src/napp.js
Normal file
@ -0,0 +1,25 @@
|
||||
import React from "react";
|
||||
import History from "./history";
|
||||
import { Loading, useLanguageLoader } from "./app-helpers";
|
||||
|
||||
const cli = window._CLI;
|
||||
|
||||
export default function App() {
|
||||
if (cli) {
|
||||
return <CliApp data={cli} />;
|
||||
} else {
|
||||
return null;
|
||||
// return <GitHubApp />;
|
||||
}
|
||||
}
|
||||
|
||||
function CliApp({ data }) {
|
||||
let { commits, path } = data;
|
||||
commits = commits.map(commit => ({ ...commit, date: new Date(commit.date) }));
|
||||
const lang = useLanguageLoader(path);
|
||||
if (!lang) {
|
||||
return <Loading path={path} />;
|
||||
} else {
|
||||
return <History commits={commits} language={lang} />;
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user