diff --git a/samples/react-birthdays-per-month/.devcontainer/devcontainer.json b/samples/react-birthdays-per-month/.devcontainer/devcontainer.json new file mode 100644 index 000000000..5c924ea0b --- /dev/null +++ b/samples/react-birthdays-per-month/.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.15.2", + "image": "docker.io/m365pnp/spfx:1.15.2", + // 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/samples/react-birthdays-per-month/.devcontainer/spfx-startup.sh b/samples/react-birthdays-per-month/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..456d6aea8 --- /dev/null +++ b/samples/react-birthdays-per-month/.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-birthdays-per-month/README.md b/samples/react-birthdays-per-month/README.md index 846b5aa9d..64dde60ee 100644 --- a/samples/react-birthdays-per-month/README.md +++ b/samples/react-birthdays-per-month/README.md @@ -28,15 +28,6 @@ For more information about SPFx compatibility, please refer to https://aka.ms/sp > Get your own free development tenant by subscribing to [Microsoft 365 developer program](http://aka.ms/m365devprogram) ## Solution - Solution|Author(s) --------|--------- @@ -72,6 +63,7 @@ Insert employee birthday items into the list. ## Features Features of this web part: + * Show grouped employees based on their birthday's month. * Show photo of the employee * Button to send email to the selected employee @@ -81,12 +73,12 @@ Features of this web part: * Initially expand current and next month section This Web Part illustrates the following concepts on top of the SharePoint Framework: + * Get data from a SharePoint List * Create simple accordion component * Show user's photo * Use [Tailwind CSS](https://tailwindcss.com/) for styling component. - ## Help We do not support samples, but this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for community members to volunteer their time and help resolve issues. diff --git a/samples/react-birthdays-per-month/assets/sample.json b/samples/react-birthdays-per-month/assets/sample.json new file mode 100644 index 000000000..dfa9491e4 --- /dev/null +++ b/samples/react-birthdays-per-month/assets/sample.json @@ -0,0 +1,50 @@ +[ + { + "name": "pnp-sp-dev-spfx-web-parts-react-birthdays-per-month", + "source": "pnp", + "title": "Birthdays Per Month", + "shortDescription": "Display employees birthday per month in an accordion.", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-birthdays-per-month", + "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-birthdays-per-month", + "longDescription": [ + "Display employees birthday per month in an accordion." + ], + "creationDateTime": "2022-12-03", + "updateDateTime": "2022-12-03", + "products": [ + "SharePoint" + ], + "metadata": [ + { + "key": "CLIENT-SIDE-DEV", + "value": "React" + }, + { + "key": "SPFX-VERSION", + "value": "1.15.2" + } + ], + "thumbnails": [ + { + "type": "image", + "order": 100, + "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-birthdays-per-month/assets/YOUR-IMAGE-NAME-HERE", + "alt": "Web Part Preview" + } + ], + "authors": [ + { + "gitHubAccount": "AriGunawan", + "pictureUrl": "https://github.com/AriGunawan.png", + "name": "Ari Gunawan" + } + ], + "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/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" + } + ] + } +] \ No newline at end of file