diff --git a/.github/workflows/merge-sample-json.yml b/.github/workflows/merge-sample-json.yml index 886d4944a..947221d1a 100644 --- a/.github/workflows/merge-sample-json.yml +++ b/.github/workflows/merge-sample-json.yml @@ -34,7 +34,7 @@ jobs: - name: Validate JSON uses: docker://orrosenblatt/validate-json-action:latest env: - INPUT_SCHEMA: ./main/metadata-schema.json + INPUT_SCHEMA: ./main/templates/metadata-schema.json INPUT_JSONS: ./Docs/docs/samples.json - name: copy file to gh-pages uses: canastro/copy-file-action@master diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 38447e148..a0c056f20 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -56,10 +56,10 @@ When you submit a new sample, please follow these guidelines: ### README.md -* You will need to have a `README.md` file for your contribution, which is based on [the provided template](../main/samples/README-template.md) under the `samples` folder. Please copy this template to your project and update it accordingly. Your `README.md` must be named exactly `README.md` -- with capital letters -- as this is the information we use to make your sample public. +* You will need to have a `README.md` file for your contribution, which is based on [the provided template](../main/templates/README-template.md) under the `samples` folder. Please copy this template to your project and update it accordingly. Your `README.md` must be named exactly `README.md` -- with capital letters -- as this is the information we use to make your sample public. * You will need to have a screenshot picture of your sample in action in the `README.md` file ("pics or it didn't happen"). The preview image must be located in the `assets` folder in the root of your sample folder. * All screen shots must be located in the `assets` folder. Do not point to your own repository or any other external source -* The README template contains a specific tracking image at the end of the file with an `img` element pointing to `https://pnptelemetry.azurewebsites.net/sp-dev-fx-webparts/samples/readme-template`. This is a transparent image which is used to track how many visits each sample receives in GitHub. +* The README template contains a specific tracking image at the end of the file with an `img` element pointing to `https://pnptelemetry.azurewebsites.net/sp-dev-fx-webparts/samples/YOUR-SOLUTION-NAME`. This is a transparent image which is used to track how many visits each sample receives in GitHub. * Update the image `src` attribute according with the repository name and folder information. For example, if your sample is named `react-todo` in the `samples` folder, you should update the `src` attribute to `https://pnptelemetry.azurewebsites.net/sp-dev-fx-webparts/samples/react-todo` * Update the image `src` attribute according with the repository name and folder information. * If you find an existing sample which is similar to yours, please extend the existing one rather than submitting a new similar sample diff --git a/samples/.yo-rc.json b/samples/.yo-rc.json deleted file mode 100644 index 4e4f6ba53..000000000 --- a/samples/.yo-rc.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "@microsoft/generator-sharepoint": { - "plusBeta": true, - "isCreatingSolution": true, - "environment": "spo", - "whichFolder": "subdir" - } -} \ No newline at end of file diff --git a/samples/README-template.md b/templates/README-template.md similarity index 98% rename from samples/README-template.md rename to templates/README-template.md index c61804b30..05470c41c 100644 --- a/samples/README-template.md +++ b/templates/README-template.md @@ -24,7 +24,11 @@ If your web part uses a placeholder screen and requires the user to configure it You can add as many screen shots as you'd like to help users understand your web part without having to download it and install it. --> -![picture of the web part in action](assets/preview.png) +![Example of a good preview](assets/goodpreview.png) + +![Also a good preview](assets/alsogoodpreview.png) + +![Not so good](assets/notsogood.gif) ## Compatibility diff --git a/templates/assets/alsogoodpreview.png b/templates/assets/alsogoodpreview.png new file mode 100644 index 000000000..083cc1a6e Binary files /dev/null and b/templates/assets/alsogoodpreview.png differ diff --git a/templates/assets/goodpreview.png b/templates/assets/goodpreview.png new file mode 100644 index 000000000..33a265332 Binary files /dev/null and b/templates/assets/goodpreview.png differ diff --git a/templates/assets/notsogood.gif b/templates/assets/notsogood.gif new file mode 100644 index 000000000..50b545781 Binary files /dev/null and b/templates/assets/notsogood.gif differ diff --git a/templates/containers/post-1.12.1/.devcontainer/devcontainer.json b/templates/containers/post-1.12.1/.devcontainer/devcontainer.json new file mode 100644 index 000000000..3e7ba6ebb --- /dev/null +++ b/templates/containers/post-1.12.1/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.13.1", + "image": "docker.io/m365pnp/spfx:1.13.1", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + // Not needed for SPFx>= 1.12.1 + // "5432": { + // "protocol": "https", + // "label": "Workbench", + // "onAutoForward": "silent" + // }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/templates/containers/post-1.12.1/.devcontainer/spfx-startup.sh b/templates/containers/post-1.12.1/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..456d6aea8 --- /dev/null +++ b/templates/containers/post-1.12.1/.devcontainer/spfx-startup.sh @@ -0,0 +1,33 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + +# Convert the generated PEM certificate to a CER certificate +openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer + +# Copy the PEM ecrtificate for non-Windows hosts +cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/templates/containers/pre-1.12.1/.devcontainer/devcontainer.json b/templates/containers/pre-1.12.1/.devcontainer/devcontainer.json new file mode 100644 index 000000000..1c92f1353 --- /dev/null +++ b/templates/containers/pre-1.12.1/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.11.0", + "image": "docker.io/m365pnp/spfx:1.11.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/templates/containers/pre-1.12.1/.devcontainer/spfx-startup.sh b/templates/containers/pre-1.12.1/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..12a19aa1f --- /dev/null +++ b/templates/containers/pre-1.12.1/.devcontainer/spfx-startup.sh @@ -0,0 +1,36 @@ +## Optional switch to dev branch (if pushing to main/master is restricted) +# git checkout dev + +## configure nvm, modejs, and fix project for spfx, if not handled by Dockerfile +#. ${NVM_DIR}/nvm.sh +#npm config delete prefix +#nvm install 10 +#npm install -g gulp + +npm install + +## commands to create dev certificate and copy it to the root folder of the project +gulp trust-dev-cert +# Use following command for SPFx >= 1.12.1 +cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.cer +# Use following command for SPFx < 1.12.1 +# cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/metadata-schema.json b/templates/metadata-schema.json similarity index 97% rename from metadata-schema.json rename to templates/metadata-schema.json index 322a1983f..ea08f4edd 100644 --- a/metadata-schema.json +++ b/templates/metadata-schema.json @@ -1,210 +1,210 @@ -{ - "$id": "https://developer.microsoft.com/en-us/json-schemas/pnp/samples/v1.0/metadata-schema.json", - "$schema": "http://json-schema.org/draft-07/schema#", - "type": "array", - "items": { - "type": "object", - "properties": { - "name": { - "type": "string", - "pattern": "pnp-sp-dev-spfx-web-parts-.*" - }, - "version": { - "type": "string" - }, - "source": { - "type": "string", - "default": "pnp", - "pattern": "pnp" - }, - "title": { - "type": "string" - }, - "url": { - "type": "string", - "pattern": "https:\/\/github.com\/pnp\/sp-dev-fx-webparts\/tree\/main\/samples\/.*" - }, - "creationDateTime": { - "type": "string", - "format": "date" - }, - "updateDateTime": { - "type": "string", - "format": "date" - }, - "shortDescription": { - "type": "string" - }, - "longDescription": { - "type": "array", - "items": { - "type": "string" - } - }, - "products": { - "type": "array", - "items": { - "type": "string" - } - }, - "categories": { - "type": "array", - "items": { - "type": "string" - } - }, - "metadata": { - "type": "array", - "items": { - "type": "object", - "properties": { - "key": { - "type": "string" - }, - "value": { - "type": "string" - } - }, - "required": [ - "key", - "value" - ] - } - }, - "thumbnails": { - "type": "array", - "items": [ - { - "type": "object", - "properties": { - "type": { - "type": "string", - "enum": [ - "image", - "video", - "slideshow" - ] - }, - "order": { - "type": "integer" - }, - "alt": { - "type": "string" - } - }, - "if": { - "properties": { - "type": { - "const": "slideshow" - } - } - }, - "then": { - "properties": { - "slides": { - "type": "array", - "items": { - "type": "object", - "properties": { - "url": { - "type": "string" - }, - "order": { - "type": "integer" - }, - "alt": { - "type": "string" - } - }, - "required": [ - "url", - "order", - "alt" - ] - } - } - }, - "required": [ - "slides" - ] - }, - "else": { - "properties": { - "url": { - "type": "string" - } - }, - "required": [ - "url" - ] - }, - "required": [ - "type", - "order", - "alt" - ] - } - ] - }, - "authors": { - "type": "array", - "items": [ - { - "type": "object", - "properties": { - "gitHubAccount": { - "type": "string", - "pattern": "^[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*$" - }, - "company": { - "type": "string" - }, - "pictureUrl": { - "type": "string" - } - }, - "required": [ - "gitHubAccount" - ] - } - ] - }, - "references": { - "type": "array", - "items": [ - { - "type": "object", - "properties": { - "name": { - "type": "string" - }, - "description": { - "type": "string" - }, - "url": { - "type": "string" - } - }, - "required": [ - "name", - "url" - ] - } - ] - } - }, - "required": [ - "name", - "source", - "title", - "url", - "shortDescription", - "products", - "metadata", - "thumbnails", - "authors", - "creationDateTime", - "updateDateTime" - ] - } +{ + "$id": "https://developer.microsoft.com/en-us/json-schemas/pnp/samples/v1.0/metadata-schema.json", + "$schema": "http://json-schema.org/draft-07/schema#", + "type": "array", + "items": { + "type": "object", + "properties": { + "name": { + "type": "string", + "pattern": "pnp-sp-dev-spfx-web-parts-.*" + }, + "version": { + "type": "string" + }, + "source": { + "type": "string", + "default": "pnp", + "pattern": "pnp" + }, + "title": { + "type": "string" + }, + "url": { + "type": "string", + "pattern": "https:\/\/github.com\/pnp\/sp-dev-fx-webparts\/tree\/main\/samples\/.*" + }, + "creationDateTime": { + "type": "string", + "format": "date" + }, + "updateDateTime": { + "type": "string", + "format": "date" + }, + "shortDescription": { + "type": "string" + }, + "longDescription": { + "type": "array", + "items": { + "type": "string" + } + }, + "products": { + "type": "array", + "items": { + "type": "string" + } + }, + "categories": { + "type": "array", + "items": { + "type": "string" + } + }, + "metadata": { + "type": "array", + "items": { + "type": "object", + "properties": { + "key": { + "type": "string" + }, + "value": { + "type": "string" + } + }, + "required": [ + "key", + "value" + ] + } + }, + "thumbnails": { + "type": "array", + "items": [ + { + "type": "object", + "properties": { + "type": { + "type": "string", + "enum": [ + "image", + "video", + "slideshow" + ] + }, + "order": { + "type": "integer" + }, + "alt": { + "type": "string" + } + }, + "if": { + "properties": { + "type": { + "const": "slideshow" + } + } + }, + "then": { + "properties": { + "slides": { + "type": "array", + "items": { + "type": "object", + "properties": { + "url": { + "type": "string" + }, + "order": { + "type": "integer" + }, + "alt": { + "type": "string" + } + }, + "required": [ + "url", + "order", + "alt" + ] + } + } + }, + "required": [ + "slides" + ] + }, + "else": { + "properties": { + "url": { + "type": "string" + } + }, + "required": [ + "url" + ] + }, + "required": [ + "type", + "order", + "alt" + ] + } + ] + }, + "authors": { + "type": "array", + "items": [ + { + "type": "object", + "properties": { + "gitHubAccount": { + "type": "string", + "pattern": "^[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*$" + }, + "company": { + "type": "string" + }, + "pictureUrl": { + "type": "string" + } + }, + "required": [ + "gitHubAccount" + ] + } + ] + }, + "references": { + "type": "array", + "items": [ + { + "type": "object", + "properties": { + "name": { + "type": "string" + }, + "description": { + "type": "string" + }, + "url": { + "type": "string" + } + }, + "required": [ + "name", + "url" + ] + } + ] + } + }, + "required": [ + "name", + "source", + "title", + "url", + "shortDescription", + "products", + "metadata", + "thumbnails", + "authors", + "creationDateTime", + "updateDateTime" + ] + } } \ No newline at end of file diff --git a/samples/sample-metadatatemplate.json b/templates/sample-template.json similarity index 100% rename from samples/sample-metadatatemplate.json rename to templates/sample-template.json