Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add 'samples/react-application-injectcss/' from commit '82ce07b809e9d…
…6c2fda42c3e0fa7a9f9ebac70e2' git-subtree-dir: samples/react-application-injectcss git-subtree-mainline: 8be8f99 git-subtree-split: 82ce07b
- Loading branch information
Showing
25 changed files
with
17,714 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
# EditorConfig helps developers define and maintain consistent | ||
# coding styles between different editors and IDEs | ||
# editorconfig.org | ||
|
||
root = true | ||
|
||
|
||
[*] | ||
|
||
# change these settings to your own preference | ||
indent_style = space | ||
indent_size = 2 | ||
|
||
# we recommend you to keep these unchanged | ||
end_of_line = lf | ||
charset = utf-8 | ||
trim_trailing_whitespace = true | ||
insert_final_newline = true | ||
|
||
[*.md] | ||
trim_trailing_whitespace = false | ||
|
||
[{package,bower}.json] | ||
indent_style = space | ||
indent_size = 2 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
# Logs | ||
logs | ||
*.log | ||
npm-debug.log* | ||
|
||
# Dependency directories | ||
node_modules | ||
|
||
# Build generated files | ||
dist | ||
lib | ||
solution | ||
temp | ||
*.sppkg | ||
|
||
# Coverage directory used by tools like istanbul | ||
coverage | ||
|
||
# OSX | ||
.DS_Store | ||
|
||
# Visual Studio files | ||
.ntvs_analysis.dat | ||
.vs | ||
bin | ||
obj | ||
|
||
# Resx Generated Code | ||
*.resx.ts | ||
|
||
# Styles Generated Code | ||
*.scss.ts |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
{ | ||
"recommendations": [ | ||
"msjsdiag.debugger-for-chrome" | ||
] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
{ | ||
/** | ||
* Install Chrome Debugger Extension for Visual Studio Code to debug your components with the | ||
* Chrome browser: https://aka.ms/spfx-debugger-extensions | ||
*/ | ||
"version": "0.2.0", | ||
"configurations": [{ | ||
"name": "Local workbench", | ||
"type": "chrome", | ||
"request": "launch", | ||
"url": "https://localhost:4321/temp/workbench.html", | ||
"webRoot": "${workspaceRoot}", | ||
"sourceMaps": true, | ||
"sourceMapPathOverrides": { | ||
"webpack:///../../../src/*": "${webRoot}/src/*", | ||
"webpack:///../../../../src/*": "${webRoot}/src/*", | ||
"webpack:///../../../../../src/*": "${webRoot}/src/*" | ||
}, | ||
"runtimeArgs": [ | ||
"--remote-debugging-port=9222" | ||
] | ||
}, | ||
{ | ||
"name": "Hosted workbench", | ||
"type": "chrome", | ||
"request": "launch", | ||
"url": "https://enter-your-SharePoint-site/_layouts/workbench.aspx", | ||
"webRoot": "${workspaceRoot}", | ||
"sourceMaps": true, | ||
"sourceMapPathOverrides": { | ||
"webpack:///../../../src/*": "${webRoot}/src/*", | ||
"webpack:///../../../../src/*": "${webRoot}/src/*", | ||
"webpack:///../../../../../src/*": "${webRoot}/src/*" | ||
}, | ||
"runtimeArgs": [ | ||
"--remote-debugging-port=9222", | ||
"-incognito" | ||
] | ||
} | ||
] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
// Place your settings in this file to overwrite default and user settings. | ||
{ | ||
// Configure glob patterns for excluding files and folders in the file explorer. | ||
"files.exclude": { | ||
"**/.git": true, | ||
"**/.DS_Store": true, | ||
"**/bower_components": true, | ||
"**/coverage": true, | ||
"**/lib-amd": true, | ||
"src/**/*.scss.ts": true | ||
}, | ||
"typescript.tsdk": ".\\node_modules\\typescript\\lib" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
{ | ||
"@microsoft/generator-sharepoint": { | ||
"version": "1.4.1", | ||
"libraryName": "react-application-injectcss", | ||
"libraryId": "b2322574-549b-4510-99d8-1351d9457a97", | ||
"environment": "spo" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
MIT License | ||
|
||
Copyright (c) 2018 Hugo Bernier | ||
|
||
Permission is hereby granted, free of charge, to any person obtaining a copy | ||
of this software and associated documentation files (the "Software"), to deal | ||
in the Software without restriction, including without limitation the rights | ||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | ||
copies of the Software, and to permit persons to whom the Software is | ||
furnished to do so, subject to the following conditions: | ||
|
||
The above copyright notice and this permission notice shall be included in all | ||
copies or substantial portions of the Software. | ||
|
||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | ||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | ||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | ||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE | ||
SOFTWARE. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,84 @@ | ||
# Spfx Applications Customiser CSS Injection | ||
|
||
## Summary | ||
This sample shows how to inject a custom Cascading Style Sheet (CSS) on modern pages. | ||
|
||
![Sample super ugly CSS to illustrate custom CSS injection](./assets/sampleresults.png) | ||
|
||
__Note__: This code is provided as a sample only. Keep in mind that Microsoft may change page elements and styles at any time, rendering your custom CSS useless. It is preferrable to use well-known HTML element placeholders. | ||
|
||
When you need to make minor cosmetic changes to modern pages (e.g.: match your corporate branding guidelines) and cannot use placeholders,you can create a custom CSS and inject on every modern page. | ||
|
||
In this example, we deploy the CSS in a shared location; this allows us to change the CSS file at any time without re-deploying or re-configuring the application customizer. | ||
|
||
You can deploy the application customizer with different settings to point to different CSS files. | ||
|
||
|
||
## Used SharePoint Framework Version | ||
|
||
![SPFx v1.4.1](https://img.shields.io/badge/SPFx-1.4.1-green.svg) | ||
|
||
## Applies to | ||
|
||
* [SharePoint Framework Extensions](https://dev.office.com/sharepoint/docs/spfx/extensions/overview-extensions) | ||
* [Office 365 developer tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant) | ||
|
||
## Solution | ||
|
||
Solution|Author(s) | ||
--------|--------- | ||
react-application-injectcss|Hugo Bernier ([Tahoe Ninjas](http://tahoeninjas.blog), @bernierh) | ||
|
||
## Version history | ||
|
||
Version|Date|Comments | ||
-------|----|-------- | ||
1.0.0|07 May, 2018|Initial release | ||
|
||
## Disclaimer | ||
|
||
**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** | ||
|
||
--- | ||
|
||
## Minimal Path to Awesome | ||
|
||
* clone repo | ||
* create a custom CSS file that meets your needs. For example, this CSS will make the site logos round and will add an ugly red colour at the top of every page. | ||
|
||
``` | ||
.ms-compositeHeader { | ||
background-color: red; | ||
} | ||
.ms-siteLogoContainerOuter { | ||
border-radius: 50%; | ||
border-width: 3px; | ||
} | ||
.ms-siteLogo-actual { | ||
border-radius: 50%; | ||
} | ||
``` | ||
* upload the CSS file to a shared location on your SharePoint tenant. For example, in the `Styles Library` of the root site collection. | ||
* get the URL to your custom CSS. For example: `/Style%20Library/custom.css` | ||
|
||
* update _serve.json_ pointing to your site collection home page change the `cssurl` property with the URL to your custom CSS. | ||
* run _gulp serve_ | ||
|
||
## Deployment to Production | ||
|
||
* located the `elements.xml` file, in the `sharepoint` > `assets` folder | ||
* change the `ClientSideComponentProperties` to point to your custom CSS URL. | ||
* run _gulp bundle --ship_ | ||
* run _gulp package-solution --ship_ | ||
* upload the `react-application-injectcss.sppkg` from the `sharepoint` folder to your App catalog. | ||
* when prompted to deploy to all sites, choose the option that suits your needs. | ||
|
||
## Features | ||
|
||
Sample SharePoint Framework application customiser injecting a custom CSS in the HTML header. | ||
|
||
This sample illustrates the following concepts on top of the SharePoint Framework: | ||
|
||
* HTML manipulation |
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
{ | ||
"$schema": "https://dev.office.com/json-schemas/spfx-build/config.2.0.schema.json", | ||
"version": "2.0", | ||
"bundles": { | ||
"inject-css-application-customizer": { | ||
"components": [ | ||
{ | ||
"entrypoint": "./lib/extensions/injectCss/InjectCssApplicationCustomizer.js", | ||
"manifest": "./src/extensions/injectCss/InjectCssApplicationCustomizer.manifest.json" | ||
} | ||
] | ||
} | ||
}, | ||
"externals": {}, | ||
"localizedResources": { | ||
"InjectCssApplicationCustomizerStrings": "lib/extensions/injectCss/loc/{locale}.js" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
{ | ||
"$schema": "https://dev.office.com/json-schemas/spfx-build/copy-assets.schema.json", | ||
"deployCdnPath": "temp/deploy" | ||
} |
7 changes: 7 additions & 0 deletions
7
samples/react-application-injectcss/config/deploy-azure-storage.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
{ | ||
"$schema": "https://dev.office.com/json-schemas/spfx-build/deploy-azure-storage.schema.json", | ||
"workingDir": "./temp/deploy/", | ||
"account": "<!-- STORAGE ACCOUNT NAME -->", | ||
"container": "react-application-injectcss", | ||
"accessKey": "<!-- ACCESS KEY -->" | ||
} |
13 changes: 13 additions & 0 deletions
13
samples/react-application-injectcss/config/package-solution.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
{ | ||
"$schema": "https://dev.office.com/json-schemas/spfx-build/package-solution.schema.json", | ||
"solution": { | ||
"name": "react-application-injectcss-client-side-solution", | ||
"id": "b2322574-549b-4510-99d8-1351d9457a97", | ||
"version": "1.0.0.0", | ||
"includeClientSideAssets": true, | ||
"skipFeatureDeployment": true | ||
}, | ||
"paths": { | ||
"zippedPackage": "solution/react-application-injectcss.sppkg" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
{ | ||
"$schema": "https://dev.office.com/json-schemas/core-build/serve.schema.json", | ||
"port": 4321, | ||
"https": true, | ||
"serveConfigurations": { | ||
"default": { | ||
"pageUrl": "https://contoso.sharepoint.com/SitePages/Home.aspx", | ||
"customActions": { | ||
"fcea9230-7f22-45b7-815c-081a49474611": { | ||
"location": "ClientSideExtension.ApplicationCustomizer", | ||
"properties": { | ||
"cssurl": "/Style%20Library/custom.css" | ||
} | ||
} | ||
} | ||
}, | ||
"injectCss": { | ||
"pageUrl": "https://contoso.sharepoint.com/SitePages/Home.aspx", | ||
"customActions": { | ||
"fcea9230-7f22-45b7-815c-081a49474611": { | ||
"location": "ClientSideExtension.ApplicationCustomizer", | ||
"properties": { | ||
"cssurl": "/Style%20Library/custom.css" | ||
} | ||
} | ||
} | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
{ | ||
"$schema": "https://dev.office.com/json-schemas/core-build/tslint.schema.json", | ||
// Display errors as warnings | ||
"displayAsWarning": true, | ||
// The TSLint task may have been configured with several custom lint rules | ||
// before this config file is read (for example lint rules from the tslint-microsoft-contrib | ||
// project). If true, this flag will deactivate any of these rules. | ||
"removeExistingRules": true, | ||
// When true, the TSLint task is configured with some default TSLint "rules.": | ||
"useDefaultConfigAsBase": false, | ||
// Since removeExistingRules=true and useDefaultConfigAsBase=false, there will be no lint rules | ||
// which are active, other than the list of rules below. | ||
"lintConfig": { | ||
// Opt-in to Lint rules which help to eliminate bugs in JavaScript | ||
"rules": { | ||
"class-name": false, | ||
"export-name": false, | ||
"forin": false, | ||
"label-position": false, | ||
"member-access": true, | ||
"no-arg": false, | ||
"no-console": false, | ||
"no-construct": false, | ||
"no-duplicate-case": true, | ||
"no-duplicate-variable": true, | ||
"no-eval": false, | ||
"no-function-expression": true, | ||
"no-internal-module": true, | ||
"no-shadowed-variable": true, | ||
"no-switch-case-fall-through": true, | ||
"no-unnecessary-semicolons": true, | ||
"no-unused-expression": true, | ||
"no-use-before-declare": true, | ||
"no-with-statement": true, | ||
"semicolon": true, | ||
"trailing-comma": false, | ||
"typedef": false, | ||
"typedef-whitespace": false, | ||
"use-named-parameter": true, | ||
"valid-typeof": true, | ||
"variable-name": false, | ||
"whitespace": false | ||
} | ||
} | ||
} |
4 changes: 4 additions & 0 deletions
4
samples/react-application-injectcss/config/write-manifests.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
{ | ||
"$schema": "https://dev.office.com/json-schemas/spfx-build/write-manifests.schema.json", | ||
"cdnBasePath": "<!-- PATH TO CDN -->" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
'use strict'; | ||
|
||
const gulp = require('gulp'); | ||
const build = require('@microsoft/sp-build-web'); | ||
build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`); | ||
|
||
build.initialize(gulp); |
Oops, something went wrong.