Merge pull request #83 from akd-io/release/0.1.1

Release 0.1.1

Author: akd-io

.eslintrc

@@ -12,6 +12,7 @@
     "no-process-exit": "off",
     "unicorn/no-process-exit": "off",
     "no-warning-comments": "off",
+    "unicorn/filename-case": "off",
     "@typescript-eslint/no-use-before-define": "off",
     "@typescript-eslint/no-unused-vars": "warn"
   }

.github/workflows/main.yml

@@ -34,4 +34,4 @@ jobs:
         run: yarn lint
 
       - name: "Test"
-        run: yarn test
+        run: yarn test-only

.prettierignore

@@ -0,0 +1,9 @@
+*-debug.log
+*-error.log
+/.nyc_output
+/dist
+/lib
+/package-lock.json
+/tmp
+node_modules
+/prod-assets

README.md

@@ -28,7 +28,7 @@ npx create-next-stack
 Then, pick a project name, and your preferred technologies like so:
 
 <p align="center">
-  <img width="600" alt="Screenshot of Create Next Stack running in a terminal" src="assets/screenshot.svg">
+  <img width="600" alt="Screenshot of Create Next Stack running in a terminal" src="assets/screenshot.png">
 </p>
 
 ## Supported technologies

assets/screenshot.png

@@ -1,6 +1,6 @@
 {
   "name": "create-next-stack",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "author": "Anders Kjær Damgaard @akd-io",
   "bin": {
     "create-next-stack": "./bin/run"
@@ -11,6 +11,7 @@
     "@oclif/config": "^1.17.0",
     "@oclif/errors": "^1.3.4",
     "@oclif/plugin-help": "^3.2.2",
+    "endent": "^2.1.0",
     "execa": "^5.1.1",
     "inquirer": "^8.1.1",
     "rimraf": "^3.0.2",
@@ -40,14 +41,14 @@
   },
   "files": [
     "/bin",
-    "/lib"
+    "/lib",
+    "/prod-assets"
   ],
   "homepage": "https://github.com/akd-io/create-next-stack",
   "keywords": [
     "oclif"
   ],
   "license": "MIT",
-  "main": "lib/index.js",
   "oclif": {
     "bin": "create-next-stack"
   },
@@ -56,14 +57,20 @@
     "prepare": "husky install",
     "prepack": "yarn build && oclif-dev readme",
     "build": "rimraf lib && tsc -b",
-    "test": "ts-node src/e2e/test.ts",
+    "test": "yarn build && ts-node src/e2e/test.ts",
+    "test-only": "ts-node src/e2e/test.ts",
+    "manual-test": "yarn build && ts-node src/e2e/manual-test.ts --debug",
+    "quick-test": "yarn build && ts-node src/e2e/manual-test.ts --debug --package-manager=npm --styling=css-modules",
     "version": "oclif-dev readme && git add README.md",
-    "format": "prettier --write --ignore-path=.gitignore .",
-    "format:check": "prettier --check --ignore-path=.gitignore .",
+    "format": "prettier --write --ignore-path=.prettierignore .",
+    "format:check": "prettier --check --ignore-path=.prettierignore .",
     "lint": "eslint --ext=.ts --config=.eslintrc --ignore-path=.gitignore ."
   },
   "types": "lib/index.d.ts",
   "lint-staged": {
     "*": "prettier --write --ignore-unknown"
+  },
+  "exports": {
+    "./package.json": "./package.json"
   }
 }

assets/screenshot.svg

@@ -0,0 +1,3 @@
+.grayBackground {
+  background: hsl(0, 0%, 95%);
+}

package.json

@@ -0,0 +1,86 @@
+import Script from "next/script";
+import { H1 } from "./components/H1";
+import { H2 } from "./components/H2";
+import { InlineCode } from "./components/InlineCode";
+import { Paragraph } from "./components/Paragraph";
+import { Section } from "./components/Section";
+import { Subtitle } from "./components/Subtitle";
+import styles from "./LandingPageTemplate.module.css";
+
+const LandingPageTemplate = () => {
+  const onConfettiLoad = () => {
+    setTimeout(() => {
+      const colors = [
+        "#26ccff",
+        "#a25afd",
+        "#ff5e7e",
+        "#88ff5a",
+        "#fcff42",
+        "#ffa62d",
+        "#ff36ff",
+      ];
+      const end = Date.now() + 5 * 1000;
+
+      (function frame() {
+        (window as any).confetti({
+          particleCount: colors.length,
+          angle: 60,
+          spread: 55,
+          origin: { x: 0, y: 0.6 },
+          colors,
+        });
+        (window as any).confetti({
+          particleCount: colors.length,
+          angle: 120,
+          spread: 55,
+          origin: { x: 1, y: 0.6 },
+          colors,
+        });
+
+        if (Date.now() < end) {
+          setTimeout(() => {
+            requestAnimationFrame(frame);
+          }, 50);
+        }
+      })();
+    }, 1000);
+  };
+
+  return (
+    <>
+      <Script
+        src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.4.0/dist/confetti.browser.min.js"
+        strategy="afterInteractive"
+        onLoad={onConfettiLoad}
+      />
+      <main>
+        <Section>
+          <H1>Your project is a go! 🎉</H1>
+          <Subtitle>
+            Get started by editing <InlineCode>pages/index.tsx</InlineCode>
+          </Subtitle>
+        </Section>
+        <Section className={styles.grayBackground}>
+          <H2>Learning resources</H2>
+          <Paragraph>
+            If you are using a technology for the first time, you can find
+            related links in the generated <InlineCode>README.md</InlineCode>{" "}
+            file that might prove helpful.
+          </Paragraph>
+        </Section>
+      </main>
+      <footer>
+        <Section>
+          <Paragraph>
+            Generated by{" "}
+            <a href="https://github.com/akd-io/create-next-stack">
+              Create Next Stack
+            </a>
+          </Paragraph>
+        </Section>
+      </footer>
+    </>
+  );
+};
+
+export default LandingPageTemplate;

prod-assets/templates/LandingPage/LandingPageTemplate.module.css

@@ -0,0 +1,6 @@
+.h1 {
+  margin: 0;
+  margin-bottom: 20px;
+
+  font-size: 3rem;
+}