diff --git a/samples/react-quick-links-grid/.devcontainer/devcontainer.json b/samples/react-quick-links-grid/.devcontainer/devcontainer.json new file mode 100644 index 000000000..a16d708b1 --- /dev/null +++ b/samples/react-quick-links-grid/.devcontainer/devcontainer.json @@ -0,0 +1,38 @@ +{ + "name": "SPFx 1.19.0", + "image": "docker.io/m365pnp/spfx:1.19.0", + "customizations": { + "vscode": { + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ] + } + }, + "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" +} diff --git a/samples/react-quick-links-grid/.devcontainer/spfx-startup.sh b/samples/react-quick-links-grid/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..456d6aea8 --- /dev/null +++ b/samples/react-quick-links-grid/.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/samples/react-quick-links-grid/assets/356854637-e68afa9a-0e48-40bf-abc0-f0fa12f154c7.png b/samples/react-quick-links-grid/assets/356854637-e68afa9a-0e48-40bf-abc0-f0fa12f154c7.png new file mode 100644 index 000000000..c1021710a Binary files /dev/null and b/samples/react-quick-links-grid/assets/356854637-e68afa9a-0e48-40bf-abc0-f0fa12f154c7.png differ diff --git a/samples/react-quick-links-grid/assets/356854684-bae0b02d-aaa8-47ba-b3c1-57e684260fd1.png b/samples/react-quick-links-grid/assets/356854684-bae0b02d-aaa8-47ba-b3c1-57e684260fd1.png new file mode 100644 index 000000000..4d03d78f6 Binary files /dev/null and b/samples/react-quick-links-grid/assets/356854684-bae0b02d-aaa8-47ba-b3c1-57e684260fd1.png differ diff --git a/samples/react-quick-links-grid/assets/preview.gif b/samples/react-quick-links-grid/assets/preview.gif new file mode 100644 index 000000000..48a3a0f54 Binary files /dev/null and b/samples/react-quick-links-grid/assets/preview.gif differ diff --git a/samples/react-quick-links-grid/assets/sample.json b/samples/react-quick-links-grid/assets/sample.json new file mode 100644 index 000000000..64b021834 --- /dev/null +++ b/samples/react-quick-links-grid/assets/sample.json @@ -0,0 +1,73 @@ +[ + { + "name": "pnp-sp-dev-spfx-web-parts-react-quick-links-grid", + "source": "pnp", + "title": "Quick Links Grid", + "shortDescription": "Displays a set of quick links fetched from a SharePoint list.", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-quick-links-grid", + "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-quick-links-grid", + "longDescription": [ + "Displays a set of quick links fetched from a SharePoint list.", + "The quick links are displayed with icons and titles in a responsive grid layout." + ], + "creationDateTime": "2024-08-10", + "updateDateTime": "2024-08-10", + "products": [ + "SharePoint" + ], + "metadata": [ + { + "key": "CLIENT-SIDE-DEV", + "value": "React" + }, + { + "key": "SPFX-VERSION", + "value": "1.19.0" + } + ], + "thumbnails": [ + { + "name": "preview.gif", + "type": "image", + "order": 100, + "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-quick-links-grid/assets/preview.gif", + "alt": "Web Part Preview" + }, + { + "name": "356854637-e68afa9a-0e48-40bf-abc0-f0fa12f154c7.png", + "type": "image", + "order": 101, + "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-quick-links-grid/assets/356854637-e68afa9a-0e48-40bf-abc0-f0fa12f154c7.png", + "alt": "Web Part Preview" + }, + { + "name": "356854684-bae0b02d-aaa8-47ba-b3c1-57e684260fd1.png", + "type": "image", + "order": 102, + "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-quick-links-grid/assets/356854684-bae0b02d-aaa8-47ba-b3c1-57e684260fd1.png", + "alt": "Web Part Preview" + }, + { + "name": "react-quick-links-grid-sample-screenshot.png", + "type": "image", + "order": 103, + "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-quick-links-grid/assets/react-quick-links-grid-sample-screenshot.png", + "alt": "Web Part Preview" + } + ], + "authors": [ + { + "gitHubAccount": "VenkadeshSundaramurthy", + "pictureUrl": "https://github.com/VenkadeshSundaramurthy.png", + "name": "Venkadesh Sundaramurthy" + } + ], + "references": [ + { + "name": "Build your first SharePoint client-side web part", + "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", + "url": "https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" + } + ] + } +] \ No newline at end of file