Merge pull request #2292 from pnp/template-structure

This commit is contained in:
Hugo Bernier 2022-02-13 23:23:13 -05:00 committed by GitHub
commit a3a18c591d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 364 additions and 221 deletions

View File

@ -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

View File

@ -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

View File

@ -1,8 +0,0 @@
{
"@microsoft/generator-sharepoint": {
"plusBeta": true,
"isCreatingSolution": true,
"environment": "spo",
"whichFolder": "subdir"
}
}

View File

@ -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

Binary file not shown.

After

Width:  |  Height:  |  Size: 77 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 69 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

View File

@ -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"
}

View File

@ -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**********"

View File

@ -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"
}

View File

@ -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**********"

View File

@ -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"
]
}
}