Logo (#17)

- Change logo to hexagon.
- Update icon generation.
- Add copy script for icon source svgs.
- Add default color for Outlook.
- Fix Add-In name in statements.
- Update docs.

.vscode/cspell.json

@@ -10,10 +10,13 @@
         "CODEOWNERS",
         "eqeqeq",
         "fluentui",
+        "Inkscape",
         "linebreak",
         "markdownlint",
         "minifier",
-        "prettierrc"
+        "prettierrc",
+        "Sideload",
+        "Sideloading"
     ],
     // flagWords - list of words to be always considered incorrect
     // This is useful for offensive words and common spelling errors.

assets/generate.cmd

@@ -1,37 +1,68 @@
-setlocal enabledelayedexpansion
 @echo off
+setlocal enabledelayedexpansion
+
 
-:: icon test
-set name=icon
 
 set THISDIR=%~dp0
 set THISDIR=%THISDIR:~,-1%
 
 set inkscape="%tools%\Programs\inkscape\inkscape.exe"
 
+:: icon test
+@rem set name=icon
+@REM for %%s in (16 32 64 80 128 300) do (
+@REM     set size=%%s
+@REM     set command=%inkscape% -z "%THISDIR%/%name%.svg" -w !size! -h !size! -e "%THISDIR%/%name%-!size!.png"
+@REM     echo !command!
+@REM     call !command!
+@REM )
+
+:: Generate fluent svg
+:: icon
+
+set svg_name=hexagon
+set png_name=icon
 for %%s in (16 32 64 80 128 300) do (
     set size=%%s
-    set command=%inkscape% -z "%THISDIR%/%name%.svg" -w !size! -h !size! -e "%THISDIR%/%name%-!size!.png"
+
+    set png_size=!size!
+    set svg_size=!size!
+    if !svg_size! GEQ 48 set svg_size=48
+
+    set source_svg="%THISDIR%/fluent-svg/ic_fluent_!svg_name!_!svg_size!_regular.svg"
+    set destination_png="%THISDIR%/!png_name!-!png_size!.png"
+
+    echo !png_name! !png_size!
+    set command=%inkscape% -z !source_svg! -w !png_size! -h !png_size! -e !destination_png!
     echo !command!
     call !command!
+    echo.
 )
 
 :: Generate fluent svg
 :: edit
 :: play
 
-
 for %%n in (edit play) do (
     set name=%%n
-    for %%s in (16 32 48) do (
+    set svg_name=!name!
+    set png_name=icon-!name!
+    for %%s in (16 32 80) do (
         set size=%%s
-        set out_size=!size!
-        if !size! == 48 set out_size=80
-        set command=%inkscape% -z "%THISDIR%/fluent-svg/ic_fluent_!name!_!size!_regular.svg" -w !size! -h !size! -e "%THISDIR%/icon-!name!-!out_size!.png"
+
+        set png_size=!size!
+        set svg_size=!size!
+        if !svg_size! GEQ 48 set svg_size=48
+
+        set source_svg="%THISDIR%/fluent-svg/ic_fluent_!svg_name!_!svg_size!_regular.svg"
+        set destination_png="%THISDIR%/!png_name!-!png_size!.png"
+
+        echo !png_name! !png_size!
+        set command=%inkscape% -z !source_svg! -w !png_size! -h !png_size! -e !destination_png!
         echo !command!
         call !command!
+        echo.
     )
-
 )
 
 

config/webpack.config.js

@@ -137,7 +137,7 @@ module.exports = async (env, options) => {
     if (options.mode === "development") {
         config.devServer = {
             ...config.devServer,
-            open: ["/edit.html", "/run.html", "/blocks.html"],
+            open: [], //["/edit.html", "/run.html", "/blocks.html"],
             port: 3000,
             server: {
                 type: "https",

docs/about.md

@@ -1,5 +1,11 @@
 # About
 
+- [Setup](./setup.md)
+- [Tech Stack](./tech-stack.md)
+- [Architecture](./architecture.md)
+- [Dependencies](./dependencies.md)
+- [GitHub Pages Setup](./pages-environment.md)
+
 ## Principles
 
 - [Open Source](https://en.wikipedia.org/wiki/Open_source)
@@ -9,7 +15,7 @@
     - Runs in any up to date chromium browser.
     - Downloadable as a single file that can be run offline.
 - Secure
-    - Minimal dependencies to minimize attack surface and chance of supply chain attacks. The only dependency is an up to date chromium browser.
+    - Minimal dependencies to minimize attack surface and chance of supply chain attacks.
 - Private
     - No telemetry is sent from page code.
     - No external data is loaded.

docs/architecture.md

@@ -12,7 +12,9 @@ The purpose of this Add-In is to:
 - Simplify building miniature Add-Ins.
 - Allow sharing of snips to testing and debugging.
 
-A [snip](#snip) is the unit of code that is editable and run.
+## Vocabulary
+
+A [snip](#snip) is the unit of code that is editable and runnable.
 
 There are two pages:
 
@@ -49,4 +51,6 @@ The edit page allows:
 
 ## Run Page
 
-The run page loads all resources before the snip code is allowed to run.
+The run page loads all resources before the snip code is allowed to run.
+
+The ts code is compiled to javascript using the typescript compiler.

docs/dependencies.md

@@ -50,4 +50,11 @@ Notable dependencies of this project.
 
 ## UI testing
 
-- `playwright`
+- `playwright`
+
+## Inkscape
+
+Inkscape transforms SVGs to PNGs for icons. This tool is only used on a developer machine to generate the PNGs.
+
+Many icon SVGs come from the [Microsoft fluentui-system-icons repository](https://github.com/microsoft/fluentui-system-icons)
+

docs/setup.md

@@ -1,5 +1,11 @@
 # Setup
 
+- [Basic](#basic)
+- [Edit Manifests](#edit-manifests)
+- [Test](#test)
+
+## Basic
+
 1. Install
     - [Node LTS](https://nodejs.org/en/download)
 
@@ -17,6 +23,22 @@
 1. Open browser to [http://localhost:8080](http://localhost:8080/)
 
 
+## Edit Manifests
+
+Add-In manifests are located in the [manifests folder](../manifests/).
+
+Only make manual changes to base files:
+
+- For Word, Excel, PowerPoint: [template.xml](../manifests/template.xml)
+- For Outlook: [local.outlook.xml](../manifests/local.outlook.xml)
+
+Other manifest files are generated from the base files using:
+
+> npm run manifest
+
+Once you have updates the manifests, test them via [sideloading](./sideloading.md).
+
+
 ## Test
 
 > npm run playwright-install

docs/sideloading.md

@@ -1,4 +1,17 @@
 # Sideloading
 
+[Sideload Add-Ins for testing](https://learn.microsoft.com/en-us/office/dev/add-ins/testing/sideload-office-add-ins-for-testing)
+
 For outlook web use:
-https://outlook.live.com/mail/0/inclientstore
+https://outlook.live.com/mail/0/inclientstore
+
+## Setup manifest share
+
+As administrator run:
+> .\scripts\create-manifest-share.cmd
+
+## Copy over manifests
+
+This copies over the latest manifests to the manifest share.
+
+> npm run share

package.json

@@ -22,6 +22,8 @@
         "lint": "eslint --config ./config/eslint.json --no-eslintrc \"@(src|tests|scripts)/**/*.@(ts|tsx|js)\"",
         "lint-fix": "eslint --config ./config/eslint.json --no-eslintrc --fix \"@(src|tests|scripts)/**/*.@(ts|tsx|js)\"",
         "test": "npm run compile && npm run playwright-test",
+        "icon-copy": "node ./scripts/get-icons.js",
+        "icon-generate": ".\\assets\\generate.cmd",
         "share": "node ./scripts/manifests-to-share.js",
         "manifest": "node ./scripts/make-manifest.js && npm run check-manifest-local && npm run check-manifest && npm run check-manifest-outlook-local && npm run check-manifest-outlook",
         "make-manifest": "node ./scripts/make-manifest.js",

scripts/create-manifest-share.cmd

@@ -1,7 +1,23 @@
+@echo off
 setlocal
 :: Must run as administrator
 :: Create a share for the manifest files
 set share=C:\manifests
-if not exist %share% md %share%
 
-net share manifests=%share%
+if exist %share% (
+    echo Share folder already exists:
+    echo %share%
+    echo.
+    echo If not shared, share the folder manually 
+    echo Properties -> Sharing -> Share
+    goto :eof
+)
+
+:: make the folder
+md %share%
+
+:: share the folder
+net share manifests=%share%
+
+:: open the folder
+start %share%

scripts/get-icons.js

@@ -0,0 +1,36 @@
+//
+// Copy svg icons
+//
+// From:
+//  A local clone of: https://github.com/microsoft/fluentui-system-icons
+//  git clone https://github.com/microsoft/fluentui-system-icons.git
+//
+// To:
+// assets/fluent-svg
+
+const fs = require("fs");
+
+const icons = [
+    ["Play", "regular", [16, 32, 48]],
+    ["Edit", "regular", [16, 32, 48]],
+    ["Hexagon", "regular", [16, 32, 48]],
+];
+
+const iconDirectory = "../../fluentui-system-icons/assets";
+const iconDirectoryOut = "assets/fluent-svg";
+
+// Icon names follow a pattern:
+// Example: ic_fluent_edit_16_regular.svg
+// ic_fluent_[name]_[size]_regular.svg
+// Available sizes are 16, 32, 48
+
+icons.forEach(([iconName, iconStyle, iconSizes]) => {
+    const path = `${iconDirectory}/${iconName}/SVG`;
+    iconSizes.forEach((size) => {
+        const name = `ic_fluent_${iconName.toLowerCase()}_${size}_${iconStyle}.svg`;
+        const source = `${path}/${name}`;
+        const destination = `${iconDirectoryOut}/${name}`;
+        console.log(`${name}${fs.existsSync(source) ? "" : ` - NOT FOUND ${source}`}`);
+        fs.copyFileSync(source, destination);
+    });
+});

src/core/defaultSnip.tsx

@@ -32,6 +32,7 @@ function getHostColor(host: Office.HostType): string {
         [Office.HostType.Excel, "green"],
         [Office.HostType.Word, "blue"],
         [Office.HostType.PowerPoint, "orange"],
+        [Office.HostType.Outlook, "deepskyblue"],
     ]);
     const color = hostToColor.get(host) || "purple";
     return color;

statements/eula.md

@@ -8,4 +8,4 @@ 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.
 
-wandyezj reserves the right, at any time and from time to time, to update, revise, supplement, and otherwise modify this Agreement and to impose new or additional rules, policies, terms, or conditions on your use of the Extension Add-In. Such updates, revisions, supplements, modifications, and additional rules, policies, terms, and conditions (collectively referred to in this Agreement as "Additional Terms") will be effective immediately and incorporated into this Agreement. Your continued use of the Extension Add-In following will be deemed to constitute your acceptance of any and all such Additional Terms. All Additional Terms are hereby incorporated into this Agreement by this reference.
+wandyezj reserves the right, at any time and from time to time, to update, revise, supplement, and otherwise modify this Agreement and to impose new or additional rules, policies, terms, or conditions on your use of the Build Add-In. Such updates, revisions, supplements, modifications, and additional rules, policies, terms, and conditions (collectively referred to in this Agreement as "Additional Terms") will be effective immediately and incorporated into this Agreement. Your continued use of the Build Add-In following will be deemed to constitute your acceptance of any and all such Additional Terms. All Additional Terms are hereby incorporated into this Agreement by this reference.

statements/privacy.md

@@ -1,3 +1,3 @@
 # Privacy Statement
 
-The Extension Add-In code does not collect any information.
+The Build Add-In code does not collect any information.

statements/support.md

@@ -1,6 +1,6 @@
 # Support Statement
 
-The Extension Add-In is provided as is with no guarantee of quality or support.
+The Build Add-In is provided as is with no guarantee of quality or support.
 
 ## Contact