feat: more documentation

packages/cli/src/deploy/addDefaults.cloudFormation.ts

@@ -115,30 +115,30 @@ const addLogGroupToResources = (
   return template;
 };
 
-const addEnvironmentsToLambdaResources = (
-  template: CloudFormationTemplate,
-): CloudFormationTemplate => {
-  const environment = getEnvironment();
-
-  const { Resources } = template;
-
-  const resourcesEntries = Object.entries(Resources);
-
-  resourcesEntries.forEach(([, resource]) => {
-    if (resource.Type === 'AWS::Lambda::Function') {
-      const { Properties } = resource;
-      if (!Properties.Environment) {
-        Properties.Environment = {};
-      }
-      if (!Properties.Environment.Variables) {
-        Properties.Environment.Variables = {};
-      }
-      Properties.Environment.Variables.ENVIRONMENT = environment;
-    }
-  });
-
-  return template;
-};
+// const addEnvironmentsToLambdaResources = (
+//   template: CloudFormationTemplate,
+// ): CloudFormationTemplate => {
+//   const environment = getEnvironment();
+
+//   const { Resources } = template;
+
+//   const resourcesEntries = Object.entries(Resources);
+
+//   resourcesEntries.forEach(([, resource]) => {
+//     if (resource.Type === 'AWS::Lambda::Function') {
+//       const { Properties } = resource;
+//       if (!Properties.Environment) {
+//         Properties.Environment = {};
+//       }
+//       if (!Properties.Environment.Variables) {
+//         Properties.Environment.Variables = {};
+//       }
+//       Properties.Environment.Variables.ENVIRONMENT = environment;
+//     }
+//   });
+
+//   return template;
+// };
 
 export const addDefaults = async ({
   params,
@@ -147,7 +147,7 @@ export const addDefaults = async ({
   const newTemplate = await [
     addDefaultParametersToTemplate,
     addLogGroupToResources,
-    addEnvironmentsToLambdaResources,
+    // addEnvironmentsToLambdaResources,
   ].reduce(async (acc, addFn) => addFn(await acc), Promise.resolve(template));
   return {
     params: await addDefaultsParametersAndTagsToParams(params),

packages/cli/src/deploy/command.ts

@@ -6,9 +6,13 @@ import { AWS_DEFAULT_REGION } from '../config';
 import { getAwsAccountId } from '../utils';
 
 import { deployBaseStackCommand } from './baseStack/command';
-import { deployCloudFormation, destroyCloudFormation } from './cloudFormation';
+import {
+  deployCloudFormation,
+  destroyCloudFormation,
+  printStackOutputsAfterDeploy,
+} from './cloudFormation';
 import { deployStaticAppCommand } from './staticApp/command';
-import { setPreDefinedStackName } from './stackName';
+import { getStackName, setPreDefinedStackName } from './stackName';
 
 const logPrefix = 'deploy';
 
@@ -26,6 +30,19 @@ const checkAwsAccountId = async (awsAccountId: string) => {
   }
 };
 
+const describeDeployCommand: CommandModule = {
+  command: 'describe',
+  describe: 'Print the outputs of the deployment.',
+  handler: async ({ stackName }) => {
+    try {
+      const newStackName = (stackName as string) || (await getStackName());
+      await printStackOutputsAfterDeploy({ stackName: newStackName });
+    } catch (err) {
+      log.info(logPrefix, 'Cannot describe stack. Message: %s', err.message);
+    }
+  },
+};
+
 export const deployCommand: CommandModule<
   any,
   {
@@ -106,6 +123,7 @@ export const deployCommand: CommandModule<
           }
         },
       )
+      .command(describeDeployCommand)
       .command(deployBaseStackCommand)
       .command(deployStaticAppCommand);
 

packages/cli/src/deploy/staticApp/staticApp.template.ts

@@ -73,11 +73,11 @@ exports.handler = (event, context, callback) => {
   headers['cache-control'] = [
     {
       key: 'Cache-Control',
-      value: '${
+      value: ${
         spa
-          ? 'public, max-age=31536000, immutable'
+          ? "'public, max-age=31536000, immutable'"
           : "request.uri.includes('/static/') ? 'public, max-age=31536000, immutable' : 'public, max-age=0, must-revalidate'"
-      }'
+      }
     }
   ];
 

packages/website/api/getTemplates.ts

@@ -1,8 +1,18 @@
-import { getStaticAppTemplate } from 'carlin/dist/deploy/staticApp/staticApp.template';
 import { dumpCloudFormationTemplate } from 'carlin/dist/utils';
+import { CloudFormationTemplate } from 'carlin/dist/utils/cloudFormationTemplate';
 
-export const getStaticAppTemplateYaml = (
-  args: Parameters<typeof getStaticAppTemplate>[0],
-) => {
-  return dumpCloudFormationTemplate(getStaticAppTemplate(args));
+export { getStaticAppTemplate } from 'carlin/dist/deploy/staticApp/staticApp.template';
+
+export type JsonYamlTemplates = {
+  templateJson: any;
+  templateYaml: string;
+};
+
+export const getJsonYamlTemplates = (
+  templateJson: CloudFormationTemplate,
+): JsonYamlTemplates => {
+  return {
+    templateJson,
+    templateYaml: dumpCloudFormationTemplate(templateJson),
+  };
 };

packages/website/carlin.yml

@@ -1,4 +1,3 @@
 buildFolder: out
 cloudfront: true
-spa: true
 stackName: CarlinWebsite

packages/website/components/CodeBlock.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/no-array-index-key */
-import React from 'react';
+import * as React from 'react';
 
 import Highlight, { defaultProps } from 'prism-react-renderer';
 import dracula from 'prism-react-renderer/themes/dracula';
@@ -21,16 +21,9 @@ const CodeBlock = ({ children, className = 'sh' }: any) => {
         getLineProps,
         getTokenProps,
       }) => (
-        <pre
-          className={highlightClassName}
-          style={{
-            ...style,
-            padding: '20px',
-            overflow: 'auto',
-          }}
-        >
+        <pre className={highlightClassName} style={style}>
           {tokens.map((line, i) => (
-            <div key={i} {...getLineProps({ line, key: i })} className="pt-1">
+            <div key={i} {...getLineProps({ line, key: i })}>
               {line.map((token, key) => (
                 <span key={key} {...getTokenProps({ token, key })} />
               ))}

packages/website/components/Layout.tsx

@@ -9,7 +9,15 @@ const Layout: React.FC = ({ children }) => {
     <>
       <header className="bg-blue-500 p-5">Carlin</header>
       <div className="flex bg-gray-200">
-        <aside style={{ display: 'flex', flexDirection: 'column' }}>
+        <aside className="flex flex-col content-center w-2/12">
+          <span>
+            <strong>Usage</strong>
+          </span>
+          <Link href="/docs/usage/deploy-static-app">
+            <span className="text-blue-500 hover:text-blue-800 cursor-pointer">
+              deploy static-app
+            </span>
+          </Link>
           <span>
             <strong>API</strong>
           </span>
@@ -25,7 +33,7 @@ const Layout: React.FC = ({ children }) => {
             </Link>
           ))}
         </aside>
-        <main>{children}</main>
+        <main className="prose w-full max-w-none">{children}</main>
       </div>
     </>
   );

packages/website/main.css

@@ -1,8 +1,3 @@
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
-
-body {
-  @apply bg-gray-200;
-}
-
 @import 'tailwindcss/utilities';

packages/website/package.json

@@ -12,6 +12,7 @@
     "@mdx-js/loader": "^1.6.16",
     "@mdx-js/react": "^1.6.16",
     "@next/mdx": "^9.5.2",
+    "@tailwindcss/typography": "^0.2.0",
     "next": "9.5.2",
     "prism-react-renderer": "^1.1.1",
     "react": "16.13.1",

packages/website/pages/_app.tsx

@@ -16,11 +16,11 @@ const components: Components = {
 const App = ({ Component, pageProps }: AppProps) => {
   return (
     <>
-      <MDXProvider components={components}>
-        <Layout>
+      <Layout>
+        <MDXProvider components={components}>
           <Component {...pageProps} />
-        </Layout>
-      </MDXProvider>
+        </MDXProvider>
+      </Layout>
     </>
   );
 };

packages/website/pages/docs/usage/deploy-static-app.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+
+import { GetStaticProps } from 'next';
+
+import {
+  getJsonYamlTemplates,
+  getStaticAppTemplate,
+  JsonYamlTemplates,
+} from '../../../api/getTemplates';
+
+import CodeBlock from '../../../components/CodeBlock';
+
+type Props = {
+  onlyS3Template: JsonYamlTemplates;
+};
+
+type StaticAppTemplateParams = Parameters<typeof getStaticAppTemplate>[0];
+
+export const getStaticProps: GetStaticProps<Props> = async () => {
+  const mapParameters: { [key in keyof Props]: StaticAppTemplateParams } = {
+    onlyS3Template: { cloudfront: false, spa: false },
+  };
+
+  const props = Object.entries(mapParameters).reduce<Props>(
+    (acc, [key, params]) => {
+      return {
+        ...acc,
+        [key]: getJsonYamlTemplates(getStaticAppTemplate(params)),
+      };
+    },
+    {} as Props,
+  );
+
+  return { props };
+};
+
+const DocsUsageDeployStaticApp = ({ onlyS3Template }: Props) => {
+  return (
+    <article>
+      <h1>Deploy Static App</h1>
+      <section>
+        <h2>Only S3 Bucket</h2>
+        <CodeBlock className="sh">carlin deploy static-app</CodeBlock>
+        <p>
+          This deploy creates a single bucket to host de static files. The
+          template created is shown below:
+        </p>
+        <CodeBlock className="yml">{onlyS3Template.templateYaml}</CodeBlock>
+      </section>
+    </article>
+  );
+};
+
+export default DocsUsageDeployStaticApp;

packages/website/tailwind.config.js

@@ -1,3 +1,9 @@
 module.exports = {
-  purge: ['./components/**/*.tsx', './pages/**/*.tsx'],
+  purge: {
+    mode: 'all',
+    content: ['./components/**/*.tsx', './pages/**/*.tsx'],
+  },
+  // eslint-disable-next-line global-require
+  plugins: [require('@tailwindcss/typography')],
+  theme: {},
 };

yarn.lock

@@ -2597,6 +2597,11 @@
   dependencies:
     defer-to-connect "^1.0.1"
 
+"@tailwindcss/typography@^0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.2.0.tgz#b597c83502e3c3c6641a8aaabda223cd494ab349"
+  integrity sha512-aPgMH+CjQiScLZculoDNOQUrrK2ktkbl3D6uCLYp1jgYRlNDrMONu9nMu8LfwAeetYNpVNeIGx7WzHSu0kvECg==
+
 "@tootallnate/once@1":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"