Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add template for tsconfig.json + getMetadata.ts + manifest.json #145

Open
wants to merge 9 commits into
base: main
Choose a base branch
from
Open

Add template for tsconfig.json + getMetadata.ts + manifest.json #145

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
2783fe3
Add template for tsconfig.json
portdeveloper Oct 26, 2024
7df1a2c
Remove unnecessary params
portdeveloper Oct 27, 2024
944a741
Merge main
portdeveloper Oct 27, 2024
a5c1290
Update the template file to use stringify func
portdeveloper Oct 28, 2024
f158bb8
Modify template to work with non-existing args
portdeveloper Oct 28, 2024
14ddaf4
Fix bad practices
portdeveloper Oct 28, 2024
ec2d358
Delete unnecessary files
portdeveloper Oct 29, 2024
e8d6227
Add manifest.json template
portdeveloper Nov 1, 2024
0816599
Add getmetadata template... in a weird way...
portdeveloper Nov 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/soft-shrimps-pull.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"create-eth": patch
---

templates: added template for tsconfig.json file
5 changes: 0 additions & 5 deletions templates/base/packages/nextjs/public/manifest.json
View file
Open in desktop

This file was deleted.

15 changes: 15 additions & 0 deletions templates/base/packages/nextjs/public/manifest.json.template.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { stringify, withDefaults } from '../../../../utils.js'

const contents = ({ name, description, iconPath, extraContent }) => stringify({
name: name[0],
description: description[0],
...(iconPath[0] && { iconPath: iconPath[0] }), // Only include iconPath if it's provided
Copy link
Collaborator

Choose a reason for hiding this comment

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

If extension developer doesn't pass the iconPath it will default to "logo.svg" right? So we don't need this check?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I think instead of icon, we are gonna have icons, like the example below:
https://github.com/serwist/serwist/blob/main/examples/next-web-push/public/manifest.json
So, we don't need the icon if the dev does not provide it.

Copy link
Collaborator

Choose a reason for hiding this comment

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

Ohh yeah makes sense! So people need to pas export const iconPath = '' to omit that field.

What if people forgot to add export const iconPath = '' but also have icons in their template, will it still work as expected?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

https://github.com/portdeveloper/test-everything

yes i tested it with this extension which has all the args mjs files for the changed files in this PR

...extraContent[0]
})

export default withDefaults(contents, {
name: "Scaffold-ETH 2 DApp",
description: "A DApp built with Scaffold-ETH",
iconPath: "logo.svg",
extraContent: []
})
28 changes: 22 additions & 6 deletions templates/base/packages/nextjs/tsconfig.json → ...ackages/nextjs/tsconfig.json.template.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
{
import { stringify, withDefaults } from '../../../utils.js'

const contents = ({ extraPlugins, extraCompilerOptions }) => `${stringify({
"compilerOptions": {
"target": "es2020",
"lib": ["dom", "dom.iterable", "esnext"],
Expand All @@ -20,9 +22,23 @@
"plugins": [
{
"name": "next"
}
]
},
...extraPlugins[0]
],
...extraCompilerOptions[0]
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
".next/types/**/*.ts"
],
"exclude": [
"node_modules"
]
})}`

export default withDefaults(contents, {
extraPlugins: [],
extraCompilerOptions: {}
})
20 changes: 16 additions & 4 deletions .../nextjs/utils/scaffold-eth/getMetadata.ts → .../scaffold-eth/getMetadata.ts.template.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
import { stringify, withDefaults } from '../../../../../utils.js'

const contents = ({ titleTemplate, extraIcons, extraMetadata }) => `
import type { Metadata } from "next";

const baseUrl = process.env.VERCEL_PROJECT_PRODUCTION_URL
? `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}`
: `http://localhost:${process.env.PORT || 3000}`;
const titleTemplate = "%s | Scaffold-ETH 2";
? \`https://\${process.env.VERCEL_PROJECT_PRODUCTION_URL}\`
: \`http://localhost:\${process.env.PORT || 3000}\`;
const titleTemplate = "${titleTemplate[0] || '%s | Scaffold-ETH 2'}";

export const getMetadata = ({
title,
Expand All @@ -14,7 +17,7 @@ export const getMetadata = ({
description: string;
imageRelativePath?: string;
}): Metadata => {
const imageUrl = `${baseUrl}${imageRelativePath}`;
const imageUrl = \`\${baseUrl}\${imageRelativePath}\`;

return {
Copy link
Collaborator

Choose a reason for hiding this comment

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

don't understand how to templatize getMetadata.ts

I think we can wrap this whole object inside the${stringify({...})} then inside you can extraMetadata ?

Screenshot 2024-11-04 at 9 14 08 PM

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Forgive me if i get this wrong but then it cannot read baseUrl (If we stringify the return)
image

Copy link
Collaborator

Choose a reason for hiding this comment

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

Ohh yeah makes sense, my bad. Can we have an corresponding args.mjs file for this file?

I don't see it in https://github.com/portdeveloper/manifest-test

Copy link
Collaborator Author

@portdeveloper portdeveloper Nov 20, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

export const titleTemplate = "%s | My PWA App"

export const extraIcons = {
  shortcut: "/favicon.ico",
  apple: [{ url: "/icons/apple-touch-icon.png", sizes: "180x180" }]
}

export const extraMetadata = {
  applicationName: 'title',
  manifest: "/manifest.json",
  appleWebApp: {
    capable: true,
    statusBarStyle: "default",
    title: 'title'
  },
  formatDetection: {
    telephone: false
  }
}

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

https://github.com/portdeveloper/test-everything Here is a repo with all the changed files.

Copy link
Member

@rin-st rin-st Nov 20, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Forgive me if i get this wrong but then it cannot read baseUrl (If we stringify the return)

If I understand it right you can theoretically do (writing it without trying)

return {
  metadataBase: new Url(baseUrl),
  ...${stringify({title: ..., description: ... , openGraph: .., twitter: ..})},
  etc

but since that part is always the same I think it's ok that it already stringifyed

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

If we only partially stringify something, the passed args does not work
e.g.
image

metadataBase: new URL(baseUrl),
Expand Down Expand Up @@ -45,6 +48,15 @@ export const getMetadata = ({
},
icons: {
icon: [{ url: "/favicon.png", sizes: "32x32", type: "image/png" }],
${extraIcons[0] ? Object.entries(extraIcons[0]).map(([key, value]) => `${key}: ${JSON.stringify(value)}`).join(',\n ') : ''}
Copy link
Member

Choose a reason for hiding this comment

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

have you tried ...${stringify(extraIcons[0]} here?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Does not work since there is no object there, the "..." just gets transferred to the created file

},
${extraMetadata[0] ? Object.entries(extraMetadata[0]).map(([key, value]) => `${key}: ${JSON.stringify(value)}`).join(',\n ') : ''}
Copy link
Member

Choose a reason for hiding this comment

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

same here but with extraMetadata[0]

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Gives me weird formatting errors
image

};
};
`

export default withDefaults(contents, {
titleTemplate: '',
extraIcons: {},
extraMetadata: {}
})
Loading