Skip to content

Commit

Permalink
linting and formatting code
Browse files Browse the repository at this point in the history
  • Loading branch information
Boyne committed Jan 4, 2024
1 parent 5625b64 commit e878877
Show file tree
Hide file tree
Showing 22 changed files with 263 additions and 194 deletions.
1 change: 0 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,6 @@ We can do so much more to document our Architectures.

CloudCatalog is Open Source and hopefully it can add value to your teams.


# This solution

<!-- <img alt="header" src="./images/architecture-2.png" /> -->
Expand Down
41 changes: 27 additions & 14 deletions packages/cloudcatalog/src/pages/_app.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,28 @@
import Footer from '@/components/Footer';
import Navigation from '@/components/Navigation';
import { AWSCatalogContextProvider, useCatalogConfig } from '@/hooks/CloudCatalog';
import '@/styles/globals.css';
import { OpenGraphConfig } from '@/types';
import type { AppProps } from 'next/app';
import Head from 'next/head';
import Footer from "@/components/Footer";
import Navigation from "@/components/Navigation";
import {
AWSCatalogContextProvider,
useCatalogConfig,
} from "@/hooks/CloudCatalog";
import "@/styles/globals.css";
import { OpenGraphConfig } from "@/types";
import type { AppProps } from "next/app";
import Head from "next/head";

export default function App({ Component, pageProps }: AppProps) {
const {
openGraph,
title = 'CloudCatalog | Discover, Explore and Document your AWS Architecture',
tagline = 'An open source tool powered by markdown to document your AWS Architecture.',
homepageLink = 'https://cloudcatalog.dev/',
title = "CloudCatalog | Discover, Explore and Document your AWS Architecture",
tagline = "An open source tool powered by markdown to document your AWS Architecture.",
homepageLink = "https://cloudcatalog.dev/",
} = useCatalogConfig();

const { ogTitle = title, ogDescription = tagline, ogImage = 'https://cloudcatalog.dev/img/opengraph.png', ogUrl = homepageLink } = openGraph as OpenGraphConfig;
const {
ogTitle = title,
ogDescription = tagline,
ogImage = "https://cloudcatalog.dev/img/opengraph.png",
ogUrl = homepageLink,
} = openGraph as OpenGraphConfig;

//@ts-ignore
return (
Expand All @@ -26,14 +34,19 @@ export default function App({ Component, pageProps }: AppProps) {
<meta name="description" content={tagline} />
<link rel="icon" href={`/favicon.ico`} />

{ogUrl && ogUrl !== '' && <meta property="og:url" content={ogUrl} />}
{ogUrl && ogUrl !== "" && <meta property="og:url" content={ogUrl} />}
<meta property="og:type" content="website" />
{ogTitle && <meta property="og:title" content={ogTitle} />}
{ogDescription && <meta property="og:description" content={ogDescription} />}
{ogDescription && (
<meta property="og:description" content={ogDescription} />
)}
{ogImage && (
<>
<meta property="og:image" content={ogImage} />
<meta property="og:image:alt" content={`${ogTitle} | ${ogDescription}`} />
<meta
property="og:image:alt"
content={`${ogTitle} | ${ogDescription}`}
/>
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="600" />
</>
Expand Down
7 changes: 5 additions & 2 deletions packages/cloudcatalog/src/pages/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
import { useCatalogConfig } from "@/hooks/CloudCatalog";
import Link from "next/link";

import { LifebuoyIcon, NewspaperIcon, PhoneIcon } from '@heroicons/react/20/solid'

import {
LifebuoyIcon,
NewspaperIcon,
PhoneIcon,
} from "@heroicons/react/20/solid";

export default function Example() {
const { title, tagline } = useCatalogConfig();
Expand Down
152 changes: 109 additions & 43 deletions packages/cloudcatalog/src/pages/resources/[service]/[name].tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,18 @@
import SyntaxHighlighter from '@/components/SyntaxHighlighter';
import { LambdaResource, Resource, Service, Team, User } from '@/types';
import { getConsoleURL } from '@/util/arn-to-console-url';
import { getResourceName } from '@/util/catalog-data-frontend';
import { formatBytes } from '@/util/formatters';
import { getAllResources, getResourceByResourceTypeAndName, getUsersByResource } from '@/util/resources';
import { getServiceByName } from '@/util/services';
import { getTeamsByResource } from '@/util/teams';
import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote';
import Link from 'next/link';
import React from 'react';
import SyntaxHighlighter from "@/components/SyntaxHighlighter";
import { LambdaResource, Resource, Service, Team, User } from "@/types";
import { getConsoleURL } from "@/util/arn-to-console-url";
import { getResourceName } from "@/util/catalog-data-frontend";
import { formatBytes } from "@/util/formatters";
import {
getAllResources,
getResourceByResourceTypeAndName,
getUsersByResource,
} from "@/util/resources";
import { getServiceByName } from "@/util/services";
import { getTeamsByResource } from "@/util/teams";
import { MDXRemote, MDXRemoteSerializeResult } from "next-mdx-remote";
import Link from "next/link";
import React from "react";

interface Props {
source: MDXRemoteSerializeResult;
Expand All @@ -21,11 +25,18 @@ interface Props {
const components = (resource: LambdaResource) => {
return {
code: ({ className, ...props }: any) => {
const match = /language-(\w+)/.exec(className || '');
return match ? <SyntaxHighlighter language={match[1]} {...props} /> : <code className={className} {...props} />;
const match = /language-(\w+)/.exec(className || "");
return match ? (
<SyntaxHighlighter language={match[1]} {...props} />
) : (
<code className={className} {...props} />
);
},
CLICommand: (props: any) => {
const text = props.children.replace('/FunctionName/', resource.AWS.FunctionName);
const text = props.children.replace(
"/FunctionName/",
resource.AWS.FunctionName,
);
return (
<SyntaxHighlighter language="sh" {...props}>
{text}
Expand All @@ -36,28 +47,30 @@ const components = (resource: LambdaResource) => {
};

const getImagesForRuntime = (runtime: string) => {
let runtimeImage = '';
let runtimeImage = "";

if (runtime.includes('nodejs')) {
runtimeImage = 'nodejs';
if (runtime.includes("nodejs")) {
runtimeImage = "nodejs";
}

return (
<div className="flex flex-col">
{runtimeImage && <img className="w-24 h-8" src={`/runtimes/${runtimeImage}.svg`} />}
{runtimeImage && (
<img className="w-24 h-8" src={`/runtimes/${runtimeImage}.svg`} />
)}
<span>{runtime}</span>
</div>
);
};
const buildOverviewForResource = (resource: LambdaResource) => {
switch (resource.AWS.Service) {
case 'lambda':
case "lambda":
return [
{ name: 'CodeSize', stat: formatBytes(resource.AWS.CodeSize) },
{ name: 'MemorySize', stat: resource.AWS.MemorySize },
{ name: 'Runtime', stat: getImagesForRuntime(resource.AWS.Runtime) },
{ name: 'Handler', stat: resource.AWS.Handler },
{ name: 'Last Modified', stat: resource.AWS.LastModified },
{ name: "CodeSize", stat: formatBytes(resource.AWS.CodeSize) },
{ name: "MemorySize", stat: resource.AWS.MemorySize },
{ name: "Runtime", stat: getImagesForRuntime(resource.AWS.Runtime) },
{ name: "Handler", stat: resource.AWS.Handler },
{ name: "Last Modified", stat: resource.AWS.LastModified },
];
break;

Expand All @@ -66,19 +79,30 @@ const buildOverviewForResource = (resource: LambdaResource) => {
}
};

const ResourcePage = ({ source, frontmatter: resource, users = [], teams = [], services = [] }: Props) => {
const ResourcePage = ({
source,
frontmatter: resource,
users = [],
teams = [],
services = [],
}: Props) => {
const overview = buildOverviewForResource(resource);
const owners = [...users, ...teams];
return (
<div className="pb-20 ">
<div className="bg-gray-800 border-b-8 border-yellow-600">
<div className="mx-auto max-w-7xl py-16 px-4 sm:py-24 sm:px-6 lg:flex lg:justify-between lg:px-8">
<div className="max-w-xl">
<h2 className="text-4xl font-bold tracking-tight text-white sm:text-5xl lg:text-6xl">{getResourceName(resource)}</h2>
<h2 className="text-4xl font-bold tracking-tight text-white sm:text-5xl lg:text-6xl">
{getResourceName(resource)}
</h2>
<p className="mt-5 text-xl text-gray-400">{resource.description}</p>
</div>
<div className="w-full max-w-xs -mt-10">
<img className="w-40 shadow-md opacity-20 rounded-md " src={`/services/${resource.AWS.Service}.svg`} />
<img
className="w-40 shadow-md opacity-20 rounded-md "
src={`/services/${resource.AWS.Service}.svg`}
/>
</div>
</div>
</div>
Expand All @@ -93,16 +117,23 @@ const ResourcePage = ({ source, frontmatter: resource, users = [], teams = [], s
{overview && (
<div className="rounded-lg bg-white border border-gray-200 shadow px-5 py-6 shadow sm:px-6">
<div className="flex justify-between items-center">
<h2 className="text-base font-medium text-gray-900" id="recent-hires-title">
<h2
className="text-base font-medium text-gray-900"
id="recent-hires-title"
>
Overview
</h2>
</div>
<div className="mt-6 flow-root">
<dl className="grid grid-cols-1 gap-5 sm:grid-cols-2">
{overview.map((item) => (
<div key={item.name} className="overflow-hidde ">
<dt className="truncate font-medium text-gray-500 text-xs">{item.name}</dt>
<dd className="mt-1 text-sm font-semibold tracking-tight text-gray-900">{item.stat}</dd>
<dt className="truncate font-medium text-gray-500 text-xs">
{item.name}
</dt>
<dd className="mt-1 text-sm font-semibold tracking-tight text-gray-900">
{item.stat}
</dd>
</div>
))}
</dl>
Expand All @@ -116,13 +147,18 @@ const ResourcePage = ({ source, frontmatter: resource, users = [], teams = [], s
View in AWS Console
</a>
</div>
<span className="block text-xs text-gray-400 mt-4">Last update: {resource.catalog.updatedAt}</span>
<span className="block text-xs text-gray-400 mt-4">
Last update: {resource.catalog.updatedAt}
</span>
</div>
)}

{owners && owners.length > 0 && (
<div className="rounded-lg bg-white px-5 py-6 border border-gray-200 shadow sm:px-6">
<h2 className="text-base font-medium text-gray-900" id="recent-hires-title">
<h2
className="text-base font-medium text-gray-900"
id="recent-hires-title"
>
Resource owners ({owners.length})
</h2>
<div className="mt-6 flow-root">
Expand All @@ -135,8 +171,12 @@ const ResourcePage = ({ source, frontmatter: resource, users = [], teams = [], s
<span className="block -ml-1 text-white">T</span>
</div>
<div className="min-w-0 flex-1">
<p className="truncate text-sm font-medium text-gray-900">{team.name}</p>
<p className="truncate text-sm text-gray-500">Team</p>
<p className="truncate text-sm font-medium text-gray-900">
{team.name}
</p>
<p className="truncate text-sm text-gray-500">
Team
</p>
</div>
<div>
<Link
Expand All @@ -156,12 +196,22 @@ const ResourcePage = ({ source, frontmatter: resource, users = [], teams = [], s
<div className="flex items-center space-x-4">
{user.avatarUrl && (
<div className="flex-shrink-0">
<img className="h-8 w-8 rounded-full" src={user.avatarUrl} alt="" />
<img
className="h-8 w-8 rounded-full"
src={user.avatarUrl}
alt=""
/>
</div>
)}
<div className="min-w-0 flex-1">
<p className="truncate text-sm font-medium text-gray-900">{user.name}</p>
{user.role && <p className="truncate text-sm text-gray-500">{user.role}</p>}
<p className="truncate text-sm font-medium text-gray-900">
{user.name}
</p>
{user.role && (
<p className="truncate text-sm text-gray-500">
{user.role}
</p>
)}
</div>
<div>
<Link
Expand All @@ -181,22 +231,35 @@ const ResourcePage = ({ source, frontmatter: resource, users = [], teams = [], s
)}
{services && services.length > 0 && (
<div className="rounded-lg bg-white px-5 py-6 border border-gray-200 shadow sm:px-6">
<h2 className="text-base font-medium text-gray-900" id="recent-hires-title">
<h2
className="text-base font-medium text-gray-900"
id="recent-hires-title"
>
Linked service
</h2>
<div className="mt-6 flow-root">
<ul role="list" className="-my-5 divide-y divide-gray-200 text-xs py-2">
<ul
role="list"
className="-my-5 divide-y divide-gray-200 text-xs py-2"
>
{services.map((service) => {
return (
<li className="group border border-blue-500 border-l-8 rounded-sm rounded-l-md" key={service.id}>
<li
className="group border border-blue-500 border-l-8 rounded-sm rounded-l-md"
key={service.id}
>
<Link
href={`/services/${service.id}`}
className="group-odd:bg-gray-50 group-even:bg-white w-full flex items-center px-4 py-2 space-x-2 hover:group-odd:bg-gray-200 hover:group-even:bg-gray-200 hover:cursor-pointer"
>
{/* <img className="w-8 opacity-90" src={`/services/${resource.AWS.Service}.svg`} /> */}
<div>
<span className="block font-bold">{service.name}</span>
<span className="block text-xs text-gray-500">{service.description}</span>
<span className="block font-bold">
{service.name}
</span>
<span className="block text-xs text-gray-500">
{service.description}
</span>
</div>
</Link>
</li>
Expand All @@ -213,7 +276,10 @@ const ResourcePage = ({ source, frontmatter: resource, users = [], teams = [], s
};

export async function getStaticProps({ params }: any) {
const { frontmatter, ...source } = await getResourceByResourceTypeAndName(params.service, params.name);
const { frontmatter, ...source } = await getResourceByResourceTypeAndName(
params.service,
params.name,
);
const users = await getUsersByResource(frontmatter as any);
const teams = await getTeamsByResource(frontmatter as any);

Expand Down
10 changes: 2 additions & 8 deletions packages/create-cloudcatalog/create-app.ts
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
/* eslint-disable import/no-extraneous-dependencies */
import chalk from "chalk";
import path from "path";
import {
RepoInfo,
} from "./helpers/examples";
import { RepoInfo } from "./helpers/examples";
import { makeDir } from "./helpers/make-dir";
import { tryGitInit } from "./helpers/git";

Expand All @@ -12,11 +10,7 @@ import { getOnline } from "./helpers/is-online";
import { isWriteable } from "./helpers/is-writeable";
import type { PackageManager } from "./helpers/get-pkg-manager";

import {
installTemplate,
TemplateMode,
TemplateType,
} from "./templates";
import { installTemplate, TemplateMode, TemplateType } from "./templates";

export class DownloadError extends Error {}

Expand Down
Loading

1 comment on commit e878877

@vercel
Copy link

@vercel vercel bot commented on e878877 Jan 4, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

cloudcatalog-demo – ./packages/cloudcatalog

cloudcatalog-demo-git-main-davidboyne123.vercel.app
cloudcatalog-demo-davidboyne123.vercel.app
app.cloudcatalog.dev
cloudcatalog-demo.vercel.app

Please sign in to comment.