Skip to content

Commit 7ccb3d3

Browse files
akd-ioakd-io
authored
Merge pull request #239 from akd-io/feature/227-add-support-for-plausible
Add support for plausible
2 parents 1cad52f + 14125a9 commit 7ccb3d3

File tree

26 files changed

+483
-102
lines changed

26 files changed

+483
-102
lines changed

‎apps/website/templates/LandingPage/components/TechnologiesForm.tsx‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ type OptionKey =
4444
| "githubActions"
4545
| "formattingPreCommitHook"
4646
| "reactQuery"
47+
| "plausible"
4748

4849
const options = {
4950
pnpm: { key: "pnpm", value: "pnpm", label: "pnpm" },
@@ -106,6 +107,11 @@ const options = {
106107
value: "react-query",
107108
label: "React Query",
108109
},
110+
plausible: {
111+
key: "plausible",
112+
value: "plausible",
113+
label: "Plausible",
114+
},
109115
} satisfies {
110116
[Key in OptionKey]: {
111117
key: Key
@@ -150,6 +156,7 @@ const continuousIntegrationOptionKeys = [
150156
const serverStateManagementLibraryOptionKeys = [
151157
optionKeys.reactQuery,
152158
] satisfies OptionKey[]
159+
const analyticsOptionKeys = [optionKeys.plausible] satisfies OptionKey[]
153160

154161
type ProjectName = string
155162
type PackageManager = (typeof packageManagerOptionKeys)[number]
@@ -162,6 +169,8 @@ type Animation = (typeof animationOptionKeys)[number]
162169
type ContinuousIntegration = (typeof continuousIntegrationOptionKeys)[number]
163170
type ServerStateManagementLibrary =
164171
(typeof serverStateManagementLibraryOptionKeys)[number]
172+
type Analytics = (typeof analyticsOptionKeys)[number]
173+
165174
type TechnologiesFormData = {
166175
projectName: ProjectName
167176
packageManager: PackageManager
@@ -173,6 +182,7 @@ type TechnologiesFormData = {
173182
animation: Animation[]
174183
continuousIntegration: ContinuousIntegration[]
175184
serverStateManagementLibraries: ServerStateManagementLibrary[]
185+
analytics: Analytics[]
176186
}
177187
const defaultFormData: TechnologiesFormData = {
178188
projectName: "my-app",
@@ -185,6 +195,7 @@ const defaultFormData: TechnologiesFormData = {
185195
animation: [optionKeys.framerMotion],
186196
continuousIntegration: [optionKeys.githubActions],
187197
serverStateManagementLibraries: [optionKeys.reactQuery],
198+
analytics: [],
188199
}
189200
const formDataKeys = objectToKeyToKeyMap(defaultFormData)
190201

@@ -201,6 +212,7 @@ const categoryLabels = {
201212
animation: "Animation",
202213
continuousIntegration: "Continuous Integration",
203214
serverStateManagementLibraries: "Server State Management",
215+
analytics: "Analytics",
204216
} as const
205217

206218
export const TechnologiesForm: React.FC = () => {
@@ -237,6 +249,7 @@ export const TechnologiesForm: React.FC = () => {
237249
pushArgs(formData.animation)
238250
pushArgs(formData.continuousIntegration)
239251
pushArgs(formData.serverStateManagementLibraries)
252+
pushArgs(formData.analytics)
240253

241254
const projectNameSegments = formData.projectName.split("/")
242255
const lastPartOfProjectName = projectNameSegments.pop()!
@@ -257,7 +270,8 @@ export const TechnologiesForm: React.FC = () => {
257270
| "iconLibraries"
258271
| "animation"
259272
| "continuousIntegration"
260-
| "serverStateManagementLibraries",
273+
| "serverStateManagementLibraries"
274+
| "analytics",
261275
optionKeys: Array<keyof typeof options>,
262276
validators?: {
263277
[key in keyof typeof options]?: Array<{
@@ -409,6 +423,16 @@ export const TechnologiesForm: React.FC = () => {
409423
serverStateManagementLibraryOptionKeys
410424
)}
411425
</Flex>
426+
427+
<Flex direction="column" gap="4">
428+
<Heading as="h3" size="md">
429+
{categoryLabels.analytics}
430+
</Heading>
431+
{CheckboxesOfOptionKeys(
432+
formDataKeys.analytics,
433+
analyticsOptionKeys
434+
)}
435+
</Flex>
412436
</Flex>
413437

414438
<Flex direction="column" gap="8" flexBasis="100%">

‎packages/create-next-stack/README.md‎

Lines changed: 30 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -33,33 +33,35 @@ The table below provides an overview of the technologies currently supported by
3333

3434
<!-- CNS-START-OF-TECHNOLOGIES-TABLE -->
3535

36-
| Name | Links |
37-
| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
38-
| Next.js | [Website](https://nextjs.org/) - [Docs](https://nextjs.org/docs) - [Learn Next.js](https://nextjs.org/learn) - [GitHub](https://github.com/vercel/next.js) - [Wikipedia](https://en.wikipedia.org/wiki/Next.js) |
39-
| React | [Website](https://reactjs.org/) - [Docs](https://reactjs.org/docs/getting-started.html) - [GitHub](https://github.com/facebook/react) - [Wikipedia](<https://en.wikipedia.org/wiki/React_(JavaScript_library)>) |
40-
| TypeScript | [Website](https://www.typescriptlang.org/) - [Docs](https://www.typescriptlang.org/docs/) - [GitHub](https://github.com/microsoft/TypeScript) - [Wikipedia](https://en.wikipedia.org/wiki/TypeScript) |
41-
| Emotion | [Website](https://emotion.sh/) - [Docs](https://emotion.sh/docs/introduction) - [GitHub](https://github.com/emotion-js/emotion) |
42-
| Styled Components | [Website](https://styled-components.com/) - [Docs](https://styled-components.com/docs) - [GitHub](https://github.com/styled-components/styled-components) |
43-
| Tailwind CSS | [Website](https://tailwindcss.com/) - [Docs](https://tailwindcss.com/docs) - [GitHub](https://github.com/tailwindlabs/tailwindcss) |
44-
| Sass | [Website](https://sass-lang.com/) - [Docs](https://sass-lang.com/documentation) - [Next.js-specific docs](https://nextjs.org/docs/basic-features/built-in-css-support#sass-support) |
45-
| CSS Modules | [Website](https://github.com/css-modules/css-modules) - [Docs](https://github.com/css-modules/css-modules) - [Next.js-specific docs](https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css) |
46-
| CSS Modules | [Website](https://github.com/css-modules/css-modules) - [Docs](https://github.com/css-modules/css-modules) - [Next.js-specific docs](https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css) |
47-
| Mantine | [Website](https://mantine.dev/) - [Docs](https://mantine.dev/pages/getting-started/) - [GitHub](https://github.com/mantinedev/mantine) |
48-
| Chakra UI | [Website](https://chakra-ui.com/) - [Docs](https://chakra-ui.com/docs/getting-started) - [GitHub](https://github.com/chakra-ui/chakra-ui) |
49-
| Material UI | [Website](https://material-ui.com/) - [Docs](https://material-ui.com/getting-started/installation/) - [GitHub](https://github.com/mui-org/material-ui) |
50-
| Framer Motion | [Website](https://www.framer.com/motion/) - [Docs](https://www.framer.com/docs/) - [GitHub](https://github.com/framer/motion) |
51-
| React Hook Form | [Website](https://react-hook-form.com/) - [Docs](https://react-hook-form.com/get-started) - [GitHub](https://github.com/react-hook-form/react-hook-form) |
52-
| Formik | [Website](https://formik.org/) - [Docs](https://formik.org/docs/overview) - [GitHub](https://github.com/formium/formik) |
53-
| React Query | [Website](https://tanstack.com/query/latest) - [Docs](https://tanstack.com/query/latest/docs/react/overview) - [GitHub](https://github.com/tanstack/query) |
54-
| React Icons | [Website](https://react-icons.github.io/react-icons/) - [GitHub](https://github.com/react-icons/react-icons) |
55-
| ESLint | [Website](https://eslint.org/) - [Configuration](https://eslint.org/docs/user-guide/configuring/) - [Rules](https://eslint.org/docs/rules/) - [GitHub](https://github.com/eslint/eslint) |
56-
| Prettier | [Website](https://prettier.io/) - [Docs](https://prettier.io/docs/en/index.html) - [Options](https://prettier.io/docs/en/options.html) - [GitHub](https://github.com/prettier/prettier) |
57-
| Husky | [Website](https://typicode.github.io/husky/) - [Docs](https://typicode.github.io/husky/) - [GitHub](https://github.com/typicode/husky) |
58-
| lint-staged | [Website](https://github.com/okonet/lint-staged) - [GitHub](https://github.com/okonet/lint-staged) |
59-
| pnpm | [Website](https://pnpm.io/) - [Docs](https://pnpm.io/motivation) - [GitHub](https://github.com/pnpm/pnpm) |
60-
| Yarn | [Website](https://yarnpkg.com/) - [CLI Docs](https://yarnpkg.com/cli) - [GitHub](https://github.com/yarnpkg/berry) |
61-
| npm | [Website](https://www.npmjs.com/) - [CLI Docs](https://docs.npmjs.com/cli/) |
62-
| GitHub Actions | [Website](https://github.com/features/actions) - [Docs](https://docs.github.com/en/actions) - [Workflow syntax](https://docs.github.com/en/actions/reference/workflow-syntax-for-github-actions) |
36+
| Name | Links |
37+
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
38+
| Next.js | [Website](https://nextjs.org/) - [Docs](https://nextjs.org/docs) - [Learn Next.js](https://nextjs.org/learn) - [GitHub](https://github.com/vercel/next.js) - [Wikipedia](https://en.wikipedia.org/wiki/Next.js) |
39+
| React | [Website](https://reactjs.org/) - [Docs](https://reactjs.org/docs/getting-started.html) - [GitHub](https://github.com/facebook/react) - [Wikipedia](<https://en.wikipedia.org/wiki/React_(JavaScript_library)>) |
40+
| TypeScript | [Website](https://www.typescriptlang.org/) - [Docs](https://www.typescriptlang.org/docs/) - [GitHub](https://github.com/microsoft/TypeScript) - [Wikipedia](https://en.wikipedia.org/wiki/TypeScript) |
41+
| Emotion | [Website](https://emotion.sh/) - [Docs](https://emotion.sh/docs/introduction) - [GitHub](https://github.com/emotion-js/emotion) |
42+
| Styled Components | [Website](https://styled-components.com/) - [Docs](https://styled-components.com/docs) - [GitHub](https://github.com/styled-components/styled-components) |
43+
| Tailwind CSS | [Website](https://tailwindcss.com/) - [Docs](https://tailwindcss.com/docs) - [GitHub](https://github.com/tailwindlabs/tailwindcss) |
44+
| Sass | [Website](https://sass-lang.com/) - [Docs](https://sass-lang.com/documentation) - [Next.js-specific docs](https://nextjs.org/docs/basic-features/built-in-css-support#sass-support) |
45+
| CSS Modules | [Website](https://github.com/css-modules/css-modules) - [Docs](https://github.com/css-modules/css-modules) - [Next.js-specific docs](https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css) |
46+
| CSS Modules | [Website](https://github.com/css-modules/css-modules) - [Docs](https://github.com/css-modules/css-modules) - [Next.js-specific docs](https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css) |
47+
| Mantine | [Website](https://mantine.dev/) - [Docs](https://mantine.dev/pages/getting-started/) - [GitHub](https://github.com/mantinedev/mantine) |
48+
| Chakra UI | [Website](https://chakra-ui.com/) - [Docs](https://chakra-ui.com/docs/getting-started) - [GitHub](https://github.com/chakra-ui/chakra-ui) |
49+
| Material UI | [Website](https://material-ui.com/) - [Docs](https://material-ui.com/getting-started/installation/) - [GitHub](https://github.com/mui-org/material-ui) |
50+
| Framer Motion | [Website](https://www.framer.com/motion/) - [Docs](https://www.framer.com/docs/) - [GitHub](https://github.com/framer/motion) |
51+
| React Hook Form | [Website](https://react-hook-form.com/) - [Docs](https://react-hook-form.com/get-started) - [GitHub](https://github.com/react-hook-form/react-hook-form) |
52+
| Formik | [Website](https://formik.org/) - [Docs](https://formik.org/docs/overview) - [GitHub](https://github.com/formium/formik) |
53+
| React Query | [Website](https://tanstack.com/query/latest) - [Docs](https://tanstack.com/query/latest/docs/react/overview) - [GitHub](https://github.com/tanstack/query) |
54+
| React Icons | [Website](https://react-icons.github.io/react-icons/) - [GitHub](https://github.com/react-icons/react-icons) |
55+
| ESLint | [Website](https://eslint.org/) - [Configuration](https://eslint.org/docs/user-guide/configuring/) - [Rules](https://eslint.org/docs/rules/) - [GitHub](https://github.com/eslint/eslint) |
56+
| Prettier | [Website](https://prettier.io/) - [Docs](https://prettier.io/docs/en/index.html) - [Options](https://prettier.io/docs/en/options.html) - [GitHub](https://github.com/prettier/prettier) |
57+
| Husky | [Website](https://typicode.github.io/husky/) - [Docs](https://typicode.github.io/husky/) - [GitHub](https://github.com/typicode/husky) |
58+
| lint-staged | [Website](https://github.com/okonet/lint-staged) - [GitHub](https://github.com/okonet/lint-staged) |
59+
| pnpm | [Website](https://pnpm.io/) - [Docs](https://pnpm.io/motivation) - [GitHub](https://github.com/pnpm/pnpm) |
60+
| Yarn | [Website](https://yarnpkg.com/) - [CLI Docs](https://yarnpkg.com/cli) - [GitHub](https://github.com/yarnpkg/berry) |
61+
| npm | [Website](https://www.npmjs.com/) - [CLI Docs](https://docs.npmjs.com/cli/) |
62+
| GitHub Actions | [Website](https://github.com/features/actions) - [Docs](https://docs.github.com/en/actions) - [Workflow syntax](https://docs.github.com/en/actions/reference/workflow-syntax-for-github-actions) |
63+
| Plausible Analytics | [Website](https://plausible.io/) - [Docs](https://plausible.io/docs) - [GitHub](https://github.com/plausible/analytics) |
64+
| next-plausible | [Website](https://next-plausible.vercel.app/) - [GitHub](https://github.com/4lejandrito/next-plausible) |
6365

6466
<!-- CNS-END-OF-TECHNOLOGIES-TABLE -->
6567

@@ -97,6 +99,7 @@ FLAGS
9799
--package-manager=<option> (required) Sets the preferred package manager.
98100
(Required)
99101
<options: pnpm|yarn|npm>
102+
--plausible Adds Plausible. (Analytics)
100103
--prettier Adds Prettier. (Code formatting)
101104
--react-hook-form Adds React Hook Form. (Form library)
102105
--react-icons Adds React Icons. (Icon library)

‎packages/create-next-stack/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,13 +75,15 @@
7575
"endent": "^2.1.0",
7676
"execa": "^5.1.1",
7777
"inquirer": "^9.1.5",
78+
"lodash": "^4.17.21",
7879
"rimraf": "^5.0.0",
7980
"tslib": "^2.5.0",
8081
"validate-npm-package-name": "^5.0.0"
8182
},
8283
"devDependencies": {
8384
"@jest/globals": "^29.5.0",
8485
"@types/inquirer": "^9.0.3",
86+
"@types/lodash": "^4.14.195",
8587
"@types/node": "^18.15.13",
8688
"@types/uuid": "^9.0.1",
8789
"@types/validate-npm-package-name": "^4.0.0",

‎packages/create-next-stack/prod-assets/templates/LandingPage/LandingPageTemplate.module.css‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,7 @@
1515
gap: 40px;
1616
}
1717

18-
.technologyGridIntro {
19-
max-width: 600px;
18+
.textContainer {
2019
gap: 0.5rem;
2120
}
2221

‎packages/create-next-stack/src/main/commands/create-next-stack.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,11 @@ export default class CreateNextStack extends Command {
9999
"react-query": Flags.boolean({
100100
description: "Adds React Query. (Server state management library)",
101101
}),
102+
103+
// Analytics
104+
plausible: Flags.boolean({
105+
description: "Adds Plausible. (Analytics)",
106+
}),
102107
}
103108

104109
async run(): Promise<void> {

0 commit comments

Comments
 (0)