knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[example][m] - changed styling and added octokit

Browse Source
This commit is contained in:
Luccas Mateus de Medeiros Gomes
2023-04-18 12:41:30 -03:00
parent 078e261e56
commit 868e9816a0
9 changed files with 1583 additions and 332 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
examples/simple-example/pages/@org/[org]/[project]/[...slug].tsx Normal file
View File

@@ -0,0 +1,44 @@
import DRD from "../../../components/drd/DRD";
import MDLayout from "../../../components/MDLayout";
import parse from "../../../lib/markdown";
import Project from "../../../lib/project";
import { NextSeo } from "next-seo";
export default function ProjectFile({ mdxSource, frontMatter, project }) {
return (
<>
<NextSeo title={`DataHub - @${project.owner}/${project.name}`} />
<MDLayout layout={frontMatter.layout} {...frontMatter}>
<DRD source={mdxSource} />
</MDLayout>
</>
);
}
export async function getServerSideProps({ params }) {
const { org: orgName, project: projectName, slug } = params;
const project = await Project.getFromGitHub(orgName, projectName);
let content = null;
try {
content = await project.getFileContent(slug.join("/") + ".md");
} catch (e) {
return {
notFound: true,
};
}
const { mdxSource, frontMatter } = await parse(content, ".mdx");
return {
props: {
mdxSource,
frontMatter,
project: project.serialize(),
slug: slug || [],
},
};
}

6
examples/simple-example/pages/@org/[org]/[project].tsx → examples/simple-example/pages/@org/[org]/[project]/index.tsx
View File

@@ -1,9 +1,9 @@
import Head from 'next/head';
import { useRouter } from 'next/router';
import DRD from '../../../components/drd/DRD';
import parse from '../../../lib/markdown';
import Project from '../../../lib/project';
import DRD from '../../../../components/drd/DRD';
import parse from '../../../../lib/markdown';
import Project from '../../../../lib/project';
import { NextSeo } from 'next-seo';
import MDLayout from 'examples/simple-example/components/MDLayout';
import { promises as fs } from 'fs';

1
examples/simple-example/pages/api/proxy.ts
View File

@@ -1,6 +1,7 @@
import axios from "axios";
export default function handler(req, res) {
console.log(req.query.url)
if (!req.query.url) {
res.status(200).send({
error: true,

87
examples/simple-example/pages/index.tsx
View File

@@ -14,7 +14,6 @@ export async function getStaticProps() {
const projects = await Promise.all(
JSON.parse(repos).map(async (repo) => {
const project = await Project.getFromGitHub(repo.owner, repo.repo);
console.log(project);
// Defaults to README
const content = project.readme ? project.readme : '';
@@ -40,26 +39,29 @@ export async function getStaticProps() {
};
}
const formatter = new Intl.DateTimeFormat('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric',
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
timeZone: 'UTC',
});
export function Datasets({ projects }) {
console.log(projects);
return (
<div className="bg-white">
<div className="mx-auto max-w-7xl px-6 py-16 sm:py-24 lg:px-8">
<h2 className="text-2xl font-bold leading-10 tracking-tight text-gray-900">
Luccas Datasets
<h2 className="text-2xl font-bold leading-10 tracking-tight text-indigo-500">
My Datasets
</h2>
<p className="mt-6 max-w-2xl text-base leading-7 text-gray-600">
Here is a list of all my datasets for easy access and sharing, if you
have any questions{' '}
<a
href="#"
className="font-semibold text-indigo-600 hover:text-indigo-500"
>
sending me an email
</a>{' '}
and i’ll get back to you as soon as we can.
Here is a list of all my datasets for easy access and sharing
</p>
<div className="mt-20">
{/*
<dl className="space-y-16 sm:grid sm:grid-cols-2 sm:gap-x-6 sm:gap-y-16 sm:space-y-0 lg:grid-cols-3 lg:gap-x-10">
{projects.map((project) => (
<div>
@@ -82,7 +84,66 @@ export function Datasets({ projects }) {
</dd>
</div>
))}
</dl>
</dl> */}
<div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
<table className="min-w-full divide-y divide-gray-300">
<thead>
<tr>
<th
scope="col"
className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
>
Dataset name
</th>
<th
scope="col"
className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
>
Description
</th>
<th
scope="col"
className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
>
Last updated
</th>
<th
scope="col"
className="relative py-3.5 pl-3 pr-4 sm:pr-0"
></th>
</tr>
</thead>
<tbody className="divide-y divide-gray-200">
{projects.map((project) => (
<tr>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
<a href={project.project.repo_metadata.html_url}>
{project.project.owner}/{project.project.name}
</a>
</td>
<td className="px-3 py-4 text-sm text-gray-500">
{project.project.repo_metadata.description}
</td>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
{formatter.format(
new Date(project.project.repo_metadata.updated_at)
)}
</td>
<td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-0">
<a
href={`/@${project.project.owner}/${project.project.name}`}
className="text-indigo-600 hover:text-indigo-900"
>
More info
</a>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>