Moved template content to separate folder

.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

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

samples/README-template.md → 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
 

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

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

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

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