diff --git a/.github/workflows/builds-docs.yml b/.github/workflows/builds-docs.yml new file mode 100644 index 0000000..efd491f --- /dev/null +++ b/.github/workflows/builds-docs.yml @@ -0,0 +1,24 @@ +name: github pages + +on: + push: + branches: + - dev + +jobs: + deploy: + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v2 + + - name: docfx-action + uses: nikeee/docfx-action@v0.1.0 + with: + args: docs/docfx.json + + - name: Deploy + uses: peaceiris/actions-gh-pages@v3.6.1 + with: + github_token: ${{ secrets.GITHUB_TOKEN }} + publish_dir: ./docs/_site diff --git a/README.md b/README.md index 24ace8d..0c30c82 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,7 @@ # StreamDeckToolkit [![Build status](https://dev.azure.com/FritzAndFriends/StreamDeckTools/_apis/build/status/StreamDeckTools-CI)](https://dev.azure.com/FritzAndFriends/StreamDeckTools/_build/latest?definitionId=8) ![](https://vsrm.dev.azure.com/FritzAndFriends/_apis/public/Release/badge/00a6d40c-eb0d-4aa8-a405-d13d03317ca9/1/1) [![NuGet](https://img.shields.io/nuget/v/StreamDeckLib.svg)](https://www.nuget.org/packages/StreamDeckLib/) +[![github pages](https://github.com/FritzAndFriends/StreamDeckToolkit/workflows/github%20pages/badge.svg)](https://github.com/FritzAndFriends/StreamDeckToolkit/actions?query=workflow%3A%22github+pages%22) ![](https://img.shields.io/azure-devops/tests/FritzAndFriends/StreamDeckTools/8/dev.svg) @@ -10,6 +11,10 @@ This is a template to help create plugins for the [Elgato Stream Deck][Stream Deck], using the [Stream Deck SDK][] with [Dotnet Core][]. +## Docs + +You can read more in the [Docs](https://FritzAndFriends.github.io/StreamDeckToolkit/). + ## Pre-Requisites In order to make use of this template, you will need to have the [Dotnet Core SDK][] (version 2.2.100 or above) installed on your development machine. diff --git a/docs/.gitignore b/docs/.gitignore new file mode 100644 index 0000000..4378419 --- /dev/null +++ b/docs/.gitignore @@ -0,0 +1,9 @@ +############### +# folder # +############### +/**/DROP/ +/**/TEMP/ +/**/packages/ +/**/bin/ +/**/obj/ +_site diff --git a/docs/api/.gitignore b/docs/api/.gitignore new file mode 100644 index 0000000..e8079a3 --- /dev/null +++ b/docs/api/.gitignore @@ -0,0 +1,5 @@ +############### +# temp file # +############### +*.yml +.manifest diff --git a/docs/api/index.md b/docs/api/index.md new file mode 100644 index 0000000..9ddf9eb --- /dev/null +++ b/docs/api/index.md @@ -0,0 +1,3 @@ +# API Documentaion + +Welcome to the API Documentation, please see the navigation for each of the project apis in "StreamDeck Toolkit". diff --git a/docs/articles/contributing.md b/docs/articles/contributing.md new file mode 100644 index 0000000..afa5039 --- /dev/null +++ b/docs/articles/contributing.md @@ -0,0 +1,45 @@ +## Contributing + +There are two ways to contribute to this repo, either the code or the docs. + +First check for any open [Issues](https://github.com/FritzAndFriends/StreamDeckToolkit/issues) on [GitHub](https://github.com/FritzAndFriends/StreamDeckToolkit) then comment to indicate you're helping out, or raise a new one with details. + +### Code + +Pull the code and add your necessary changes, then PR back to dev for review. + +### Docs + +You're in them! To help out fork this repo, install [DocFX](https://dotnet.github.io/docfx/) and update/add any info. + +`docfx docfx.json` will build the site, then move to the "_site" folder and run `docfx serve` then open a browser to "http://localhost:8080/" to see your updates. + +There are the Articles you can write to explain the toolkit, then the API docs which builds from the src. + +The [docfx.json](../docfx.json) file contains a `metadata` which points to the `src` to built to produce + + { + "metadata": [ + { + "src": [ + { + "files": ["**.csproj"], + "src": "../src" + } + ], + "dest": "api" + } + ] + } + +### Template + +This documentation site is using the [DocFX Material](https://ovasquez.github.io/docfx-material/) [template](https://dotnet.github.io/docfx/templates-and-plugins/templates-dashboard.html). + +The [docfx.json](../docfx.json) file contains a `template` that has been updated, alongside the [templates](../tempaltes) folder containing the src of the template. + + "template": [ + "default", + "templates/material" + ] + diff --git a/docs/articles/create.md b/docs/articles/create.md new file mode 100644 index 0000000..92cd64b --- /dev/null +++ b/docs/articles/create.md @@ -0,0 +1,11 @@ +## Creating a Plugin Action + +The Stream Deck Toolkit provides the functionality that communicates directly with the Stream Deck software. When creating a plugin, you are responsible for creating actions for the Stream Deck buttons to perform. There are two base classes that you can inherit from when creating your action: + +1. `BaseStreamDeckAction` - this class contains all the integrations necessary to communicate with the Stream Deck at the 'barebones' level. Inheriting from this class will give you the greatest control over how your action sends and receives data from the software. + +2. `BaseStreamDeckActionWithSettingsModel` - this class inherits from BaseStreamDeckAction, this class will automate the population of model properties, where type T is defined as the data that is stored when issuing a 'setSettings' event to the Stream Deck software. The property **`SettingsModel`** will automatically instantiate an instance of class T, so it is best to assign default values when defining your class T. Also, when using the Property Inspector and passing data back and forth, ensure that the properties defined in the settingsModel in JavaScript matches those that you have defined in T for the automatic mapping to occur between both environments. + +Your project may contain any number of actions, inheriting from one of the classes above. In order for the Action to be automatically registered on start up, it must bear the **`[ActionUuid(Uuid="com.fritzanfriends.pluginname.anotheraction")]`** attribute. + +Actions must also be manually registered in the **`manifest.json`** file, with the Uuid that matches ActionUuid attribute. diff --git a/docs/articles/install.md b/docs/articles/install.md new file mode 100644 index 0000000..315fe71 --- /dev/null +++ b/docs/articles/install.md @@ -0,0 +1,25 @@ +## Install Project Template + +### From File System + +Installing the template from your filesystem is useful for local testing of the template itself. If you are actively working on the template making changes, this is the route you need to use. + +To install, run the following command from the root of the repository. + +`dotnet new -i Templates/StreamDeck.PluginTemplate.Csharp` + +To pick up any changes you have made to the template source, you must uninstall the template and reinstall it. + +To uninstall, run the following command from the root of the respository. + +**Windows:** `dotnet new -u Templates/StreamDeck.PluginTemplate.Csharp` + +**OSX/Linux:** `dotnet new -u $PWD/Templates/StreamDeck.PluginTemplate.Csharp` + +### From NuGet + +`dotnet new -i StreamDeckPluginTemplate` + +- OR - + +`Install-Package StreamDeckPluginTemplate [-Version x.y.zzz]` diff --git a/docs/articles/intro.md b/docs/articles/intro.md new file mode 100644 index 0000000..e1d6824 --- /dev/null +++ b/docs/articles/intro.md @@ -0,0 +1,13 @@ +## Welcome + +Welcome to the documentation for the StreamDeck Toolkit, a .NET Standard library, template, and tools for building extensions to the Elgato Stream Deck. + +## What Is This? + +This is a template to help create plugins for the [Elgato Stream Deck][Stream Deck], using the [Stream Deck SDK][] with [Dotnet Core][]. + + + +[Dotnet Core]: https://dotnet.microsoft.com/ "Free, cross-platform application framework" +[Stream Deck]: https://www.elgato.com/gaming/stream-deck/ "Elgato's Stream Deck product page" +[Stream Deck SDK]: https://developer.elgato.com/documentation/stream-deck "Elgato's Stream Deck SDK documentation and reference site" diff --git a/docs/articles/plugins.md b/docs/articles/plugins.md new file mode 100644 index 0000000..f7f9ae6 --- /dev/null +++ b/docs/articles/plugins.md @@ -0,0 +1,9 @@ +## Plugins + +Please add your plugins to the list: + +- [vscode-streamdeck](https://github.com/nicollasricas/vscode-streamdeck) +- [streamdeck-plugins](https://github.com/madmatt/streamdeck-plugins) + - https://streamdeck-plugins.com/ + - [WayBack Machine version](https://web.archive.org/web/20200424173307/https://streamdeck-plugins.com/) +- [BarRaider](https://barraider.com/) diff --git a/docs/articles/pre-reqs.md b/docs/articles/pre-reqs.md new file mode 100644 index 0000000..05a9489 --- /dev/null +++ b/docs/articles/pre-reqs.md @@ -0,0 +1,10 @@ +## Pre-Requisites + +In order to make use of this template, you will need to have the [Dotnet Core SDK][] (version 2.2.100 or above) installed on your development machine. + +While not absolutely necessary, it is **strongly** recommended to have the [Stream Deck Software][] installed, to be able to perform some integration testing of your plugin. + + + +[Dotnet Core SDK]: https://get.dot.net/ "Download the Dotnet Core SDK or Runtime" +[Stream Deck Software]: https://www.elgato.com/gaming/downloads "Download the Stream Deck desktop software" diff --git a/docs/articles/projects/dashboard.md b/docs/articles/projects/dashboard.md new file mode 100644 index 0000000..2b34ca7 --- /dev/null +++ b/docs/articles/projects/dashboard.md @@ -0,0 +1,5 @@ +## StreamDeck Dashboard + +A collection of stream deck actions in a single plugin for developers + +- [code](https://github.com/FritzAndFriends/StreamDeckDashboard) diff --git a/docs/articles/projects/emulator.md b/docs/articles/projects/emulator.md new file mode 100644 index 0000000..1524436 --- /dev/null +++ b/docs/articles/projects/emulator.md @@ -0,0 +1,9 @@ +## Stream Deck Emulator + +A simple emulator for the Stream Deck Application to allow plugin developers to develop, test, and debug their plugins without requiring a physical [Stream Deck][] device. + +See the [code](https://github.com/FritzAndFriends/StreamDeckEmulator). + + + +[Stream Deck]: https://www.elgato.com/gaming/stream-deck/ "Elgato's Stream Deck product page" diff --git a/docs/articles/projects/toc.yml b/docs/articles/projects/toc.yml new file mode 100644 index 0000000..e8877ac --- /dev/null +++ b/docs/articles/projects/toc.yml @@ -0,0 +1,4 @@ +- name: StreamDeck Emulator + href: emulator.md +- name: StreamDeck Dashboard + href: dashboard.md \ No newline at end of file diff --git a/docs/articles/streams.md b/docs/articles/streams.md new file mode 100644 index 0000000..581f131 --- /dev/null +++ b/docs/articles/streams.md @@ -0,0 +1,5 @@ +## Streams + +You can find all the [Twitch](https://www.twitch.tv/csharpfritz) streams that built this toolkit on [YouTube](https://www.youtube.com/channel/UCfvJirlbRTN-bU9sMWMb_ZQ) + +- [StreamDeck Toolkit Playlist](https://www.youtube.com/playlist?list=PLVMqA0_8O85xhVTS3OkTOKhe6IIYj7Tna) diff --git a/docs/articles/template/action.md b/docs/articles/template/action.md new file mode 100644 index 0000000..1684240 --- /dev/null +++ b/docs/articles/template/action.md @@ -0,0 +1,76 @@ +## Action + +When you use the template there are a number of parameters which can set things in the following `Action` class: + + --uuid com.yourcompany.pluginname.actionname + --plugin-name FirstPlugin + +You will also have a model created `CounterSettingsModel` which will be set. + +### Attribute + + [ActionUuid(Uuid="com.yourcompany.pluginname.actionname")] + +### Class Name + +The `--plugin-name` will be a prefix for the `Action` class that is created: + + public class FirstPluginAction : BaseStreamDeckActionWithSettingsModel + +## BaseStreamDeckAction + +```csharp +public ILogger Logger { get; } +public string ActionUuid { get; } +protected internal ConnectionManager Manager { get; set; } +``` + +There are a number of methods you can then override and implement with your own logic: + +```csharp +public virtual Task OnApplicationDidLaunch(StreamDeckEventPayload args); +public virtual Task OnApplicationDidTerminate(StreamDeckEventPayload args); +public virtual Task OnDeviceDidConnect(StreamDeckEventPayload args); +public virtual Task OnDeviceDidDisconnect(StreamDeckEventPayload args); +public virtual Task OnDidReceiveGlobalSettings(StreamDeckEventPayload args); +public virtual Task OnDidReceiveSettings(StreamDeckEventPayload args); +public virtual Task OnKeyDown(StreamDeckEventPayload args); +public virtual Task OnKeyUp(StreamDeckEventPayload args); +public virtual Task OnPropertyInspectorDidAppear(StreamDeckEventPayload args); +public virtual Task OnPropertyInspectorDidDisappear(StreamDeckEventPayload args); +public virtual Task OnTitleParametersDidChange(StreamDeckEventPayload args); +public virtual Task OnWillAppear(StreamDeckEventPayload args); +public virtual Task OnWillDisappear(StreamDeckEventPayload args); +``` + +Just call the base method then implement the functionality you wish to achieve. + +For example: + +```csharp +public override async Task OnDidReceiveSettings(StreamDeckEventPayload args) +{ + await base.OnDidReceiveSettings(args); + await Manager.SetTitleAsync(args.context, SettingsModel.Counter.ToString()); +} +``` + +```csharp +public override async Task OnWillAppear(StreamDeckEventPayload args) +{ + await base.OnWillAppear(args); + await Manager.SetTitleAsync(args.context, SettingsModel.Counter.ToString()); +} +``` + +## BaseStreamDeckActionWithSettingsModel + +```csharp +public T SettingsModel { get; } +``` + +```csharp +public override Task OnDidReceiveSettings(StreamDeckEventPayload args); +public override Task OnWillAppear(StreamDeckEventPayload args); +protected void SetModelProperties(StreamDeckEventPayload args); +``` \ No newline at end of file diff --git a/docs/articles/template/images/screenshot.png b/docs/articles/template/images/screenshot.png new file mode 100644 index 0000000..bb81124 Binary files /dev/null and b/docs/articles/template/images/screenshot.png differ diff --git a/docs/articles/template/propertyinspector.md b/docs/articles/template/propertyinspector.md new file mode 100644 index 0000000..1ad5893 --- /dev/null +++ b/docs/articles/template/propertyinspector.md @@ -0,0 +1,9 @@ +## Property Inspector + +There are various types of fields that are supported in property inspector see [Elgato Github PiSamples](https://github.com/elgatosf/streamdeck-pisamples) and [Elgato SDK Documentation](https://developer.elgato.com/documentation/stream-deck/sdk/property-inspector/) + +![screenshot](images/screenshot.png) + +The above sample from GitHub allows you to drag and drop elements into your html for quick development. + +Add it to the `property_inspector.html` file in the project. diff --git a/docs/articles/template/template.md b/docs/articles/template/template.md new file mode 100644 index 0000000..1651212 --- /dev/null +++ b/docs/articles/template/template.md @@ -0,0 +1,120 @@ +# Working With This Template + +## Welcome + +Congratulations! You've just taken the first major step in writing a custom plugin for the [Elgato Stream Deck][Stream Deck]. + +## State of Things + +Within the directory from which you are reading this file, there exist a few other necessary files. These are: + +* `_StreamDeckPlugin_.csproj`: The C# project file used to build the plugin +* `Program.cs`: The code for the application which will be called by the [Stream Deck software][] when loading and running your plugin. +* `DefaultPluginAction.cs`: The file in which the functionality of the first (default) action for the plugin will be written. This file provides a basic implementation of an action for your plugin, following a pattern which can be repeated. + +## What's Next? + +### First, a Word of Caution + +Due to the multi-platform target of the [Stream Deck][], when specifying filesystem paths which will be used at runtime (images, other assets), use the POSIX/Unix standard forward slash (`/`) as the directory separator. + +**Do this** `path/to/my/assets` +**Instead of** `path\to\my\assets` + +### The `manifest.json` file + +The [`manifest.json` file][Manifest File] (also referred to as the *manifest* or *manifest file*) is the mechanism used by the [Stream Deck SDK][] to uniquely identify plugins, their actions and other parameters. + +Your first step should set a value for both the **Author** and the **URL** values, representing you and your plugin. + +### Images and Other Assets + +The following are the base set of images/icons which are needed for the plugin. While defaults have been provided, they should be changed to help distinguish your plugin and its action(s) from others. + +Unless otherwise noted, image assets should all be in the "Portable Network Graphics" (PNG) format. + +> [!Note] +> While all efforts have been made to ensure the correctness of this information, please refer to the official [Style Guide][] and [Manifest file definition][Manifest File] for the latest and most up-to-date information. + +----- + +#### Category Icon (*a.k.a. Plugin Icon*) + +**Path to property in manifest.json file:** `Icon` + +##### Purpose + +The category icon, identified by the **Icon** property in the *manifest*, is the primary visual identifier for your plugin. It is also used to display information about your plugin in the **More Actions...** list, which displays the list of available plugins to download to uses, as well as the category (group) icon in the **Actions** list if your plugin supports more than a single action. + +##### Specifications + +The **Icon** property in the *manifest* represents the base file name of the image, without a file extension. For example, if your icon's file name is `myPluginIcon.png`, you would set the value as `myPluginIcon`. + +There are two of these files necessary. A default one for a regular, non-scaled (high-DPI) display, and another for scaled display. The default icon should be 28 pixels squared (28x28px), and named with the base file name and extension. i.e. `_PluginName_.png`. + +The other file, for high-DPI displayes, must be 56 pixels squared (56x56px), and the value `@2x` appended to the file name, before the extension. i.e. `_PluginName_@2x.png` + +----- + +#### Action Image (Icon) + +**Path to property in manifest.json file:** `Actions[x].Icon` + +##### Purpose + +The action image, for which there is one for each action available from the plugin, is the icon which helps identify the action item in the **Actions** list, within the category (group) defined by your plugin. Just as with the **Category Icon**, when setting its value in the *manifest*, do not specify an extension. + +##### Specifications + +Each element in the **Actions** element of the *manifest* has an **Icon** property which must be set (which one possible exception - see below). While not strictly necessary, each action should have its own, distinct icon for its visual identity. Per the current specifications, the **Action Image** should be a single color -
`#d8d8d8` (`rgb(216,216,216)`). + +Again, just as with the **Category Icon**, two separate copies of this file are needed, with the same naming rules but different sizes; a default one for a regular, non-scaled (high-DPI) display, and another for scaled display. The default icon should be 20 pixels squared (20x20px), and preferably named in a manner in which it can be easily related to its action, such as `actionIcon.png`. When setting its value in the *manifest*, here too specify only the file name, and do not include the etension. + +The other file, for high-DPI displayes, must be 40 pixels squared (40x40px), and the value `@2x` appended to the file name, before the extension. i.e. `actionIcon@2x.png` + +##### Exceptions + + An **Action** item is not required to have an icon specified (but still can) if its `VisibleInActionList` property in the *manifest* is set to `false`. + +----- + +#### Key Icon + +**Path to property in manifest.json file:** `Actions[x].States[y].Image` + +##### Purpose + +The **Key Icon** is the icon which is displayed on the key(s) to which is is assigned on the [Stream Deck][], as well as within the [Stream Deck software][] during configuration. If your action supports multiple states, the **Key Icon** will be displayed when its assigned state is active. Each action hast as least one state, and as of this time, has at most two states. + + Once again, just as with the **Category Icon** and **Action Image**, when setting its value in the *manifest*, do not specify an extension. + +##### Specifications + +Again, just as with the **Category Icon** and the **Action Image**,two separate copies of this file are needed, with the same naming rules but different sizes; a default one for a regular, non-scaled (high-DPI) display, and another for scaled display. The default icon should be 72 pixels squared (72x72px). Again, it should preferably named in a manner in which it can be easily related to either the action or state is represents, such as `actionIconButton.png` or `actionIconActive.png`. + +### Can I do any more? + +Of course! First, congratulations on getting your first action for your Stream Deck plugin working! To allow your plugin to do more, you will need to create (and implement) a new Action definition. Here is how you do this: + +1. Create a new class (in a new file or an existing one), and make sure it inherits from the `BaseStreamDeckAction` class +e.g.: `internal class MyNextPluginAction : BaseStreamDeckAction` +2. Implement the required properties and methods, such as `UUID` +3. Register it with the `ConnectionManager` instance within the `Program.cs` file. Look for the `.RegisterAction(new DefaultPluginAction()` code line, copy it, and change the type `DefaultPluginAction` to your new class' name. From the example in step 1, this would look like `.RegisterAction(new MyNextPluginAction())`. +4. Add a definition for the new action in the `manifest.json` file, ensuring that the value for the `UUID` field in the manifest matches the `UUID` property of your new class. + +That's it! Repeat this process for any additional actions you wish to include and perform as part of your plugin. + + +## References +Here are some helpful references for both this template and the Stream Deck: + +* [Plugin Homepage](https://github.com/FritzAndFriends/StreamDeckToolkit) +* [Stream Deck Page][Stream Deck] +* [Stream Deck SDK Documentation][Stream Deck SDK] + + +[Stream Deck]: https://www.elgato.com/en/gaming/stream-deck "Elgato's Stream Deck landing page for the hardware, software, and SDK" +[Stream Deck software]: https://www.elgato.com/gaming/downloads "Download the Stream Deck software" +[Stream Deck SDK]: https://developer.elgato.com/documentation/stream-deck "Elgato's online SDK documentation" +[Style Guide]: https://developer.elgato.com/documentation/stream-deck/sdk/style-guide/ "The Stream Deck SDK Style Guide" +[Manifest file]: https://developer.elgato.com/documentation/stream-deck/sdk/manifest "Definition of elements in the manifest.json file" diff --git a/docs/articles/template/toc.yml b/docs/articles/template/toc.yml new file mode 100644 index 0000000..272657c --- /dev/null +++ b/docs/articles/template/toc.yml @@ -0,0 +1,6 @@ +- name: Working With This Template + href: template.md +- name: Action + href: action.md +- name: Property Inspector + href: propertyinspector.md \ No newline at end of file diff --git a/docs/articles/toc.yml b/docs/articles/toc.yml new file mode 100644 index 0000000..47898f3 --- /dev/null +++ b/docs/articles/toc.yml @@ -0,0 +1,25 @@ +- name: Introduction + href: intro.md +- name: Pre-Requisites + href: pre-reqs.md +- name: Install Project Template + href: install.md +- name: Using the Template + href: using.md +- name: Creating a Plugin Action + href: create.md +- name: Template + href: template/toc.yml +- name: Plugins + href: plugins.md +- name: Streams + href: streams.md +- name: Projects + href: projects/toc.yml + # items: + # - name: StreamDeck Emulator + # href: projects/emulator.md + # - name: StreamDeck Dashboard + # href: projects/dashboard.md +- name: Contributing + href: contributing.md \ No newline at end of file diff --git a/docs/articles/using.md b/docs/articles/using.md new file mode 100644 index 0000000..7b9bfaa --- /dev/null +++ b/docs/articles/using.md @@ -0,0 +1,9 @@ +## Using the Template + +Once the template is installed, open a terminal in the folder of your choice and create a new project. + + dotnet new streamdeck-plugin --plugin-name FirstPlugin --uuid com.yourcompany.pluginname.actionname --skipRestore false + +Or create a directory in a location of your choice, change to that directory and run the command, which will inherit the directory name as the project name with default values. + + dotnet new streamdeck-plugin diff --git a/docs/docfx.json b/docs/docfx.json new file mode 100644 index 0000000..3ffdb23 --- /dev/null +++ b/docs/docfx.json @@ -0,0 +1,72 @@ +{ + "metadata": [ + { + "src": [ + { + "files": [ + "**.csproj" + ], + "src": "../src" + } + ], + "dest": "api", + "disableGitFeatures": false, + "disableDefaultFilter": false + } + ], + "build": { + "content": [ + { + "files": [ + "api/**.yml", + "api/index.md" + ] + }, + { + "files": [ + "articles/**.md", + "articles/**/toc.yml", + "toc.yml", + "*.md" + ] + } + ], + "resource": [ + { + "files": [ + "images/**", + "articles/images/**", + "articles/template/images/**" + ] + } + ], + "overwrite": [ + { + "files": [ + "apidoc/**.md" + ], + "exclude": [ + "obj/**", + "_site/**" + ] + } + ], + "dest": "_site", + "globalMetadataFiles": [], + "fileMetadataFiles": [], + "template": [ + "default", + "templates/material" + ], + "postProcessors": [], + "markdownEngineName": "markdig", + "noLangKeyword": false, + "keepFileLink": false, + "cleanupCacheHistory": false, + "disableGitFeatures": false, + "globalMetadata": { + "_appTitle": "StreamDeckToolkit", + "_enableSearch": true + } + } +} \ No newline at end of file diff --git a/docs/images/Elgato_400x400.jpg b/docs/images/Elgato_400x400.jpg new file mode 100644 index 0000000..f0de110 Binary files /dev/null and b/docs/images/Elgato_400x400.jpg differ diff --git a/docs/images/Fritz.png b/docs/images/Fritz.png new file mode 100644 index 0000000..f223a17 Binary files /dev/null and b/docs/images/Fritz.png differ diff --git a/docs/images/Fritz2.png b/docs/images/Fritz2.png new file mode 100644 index 0000000..40cf375 Binary files /dev/null and b/docs/images/Fritz2.png differ diff --git a/docs/images/Fritz3.png b/docs/images/Fritz3.png new file mode 100644 index 0000000..2a4ce9c Binary files /dev/null and b/docs/images/Fritz3.png differ diff --git a/docs/index.md b/docs/index.md new file mode 100644 index 0000000..75a558a --- /dev/null +++ b/docs/index.md @@ -0,0 +1,15 @@ +## Welcome + +Welcome to the documentation for the StreamDeck Toolkit, a .NET Standard library, template, and tools for building extensions to the Elgato Stream Deck. + +## What Is This? + +This is a template to help create plugins for the [Elgato Stream Deck][Stream Deck], using the [Stream Deck SDK][] with [Dotnet Core][]. + +Check out the Articles section for how to work with the Toolkit, and the API section to see the code. + + + +[Dotnet Core]: https://dotnet.microsoft.com/ "Free, cross-platform application framework" +[Stream Deck]: https://www.elgato.com/gaming/stream-deck/ "Elgato's Stream Deck product page" +[Stream Deck SDK]: https://developer.elgato.com/documentation/stream-deck "Elgato's Stream Deck SDK documentation and reference site" diff --git a/docs/templates/material/partials/head.tmpl.partial b/docs/templates/material/partials/head.tmpl.partial new file mode 100644 index 0000000..c05e8c1 --- /dev/null +++ b/docs/templates/material/partials/head.tmpl.partial @@ -0,0 +1,21 @@ +{{!Copyright (c) Oscar Vasquez. All rights reserved. Licensed under the MIT license. See LICENSE file in the project root for full license information.}} + + + + + {{#title}}{{title}}{{/title}}{{^title}}{{>partials/title}}{{/title}} {{#_appTitle}}| {{_appTitle}} {{/_appTitle}} + + + + {{#_description}}{{/_description}} + + + + + + + + {{#_noindex}}{{/_noindex}} + {{#_enableSearch}}{{/_enableSearch}} + {{#_enableNewTab}}{{/_enableNewTab}} + \ No newline at end of file diff --git a/docs/templates/material/styles/main.css b/docs/templates/material/styles/main.css new file mode 100644 index 0000000..165a878 --- /dev/null +++ b/docs/templates/material/styles/main.css @@ -0,0 +1,299 @@ +/* COLOR VARIABLES*/ +:root { + --header-bg-color: #0d47a1; + --header-ft-color: #fff; + --highlight-light: #5e92f3; + --highlight-dark: #003c8f; + --accent-dim: #eee; + --font-color: #34393e; + --card-box-shadow: 0 1px 2px 0 rgba(61, 65, 68, 0.06), 0 1px 3px 1px rgba(61, 65, 68, 0.16); + --under-box-shadow: 0 4px 4px -2px #eee; + --search-box-shadow: 0px 0px 5px 0px rgba(255,255,255,1); +} + +body { + color: var(--font-color); + font-family: "Roboto", sans-serif; + line-height: 1.5; + font-size: 16px; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + word-wrap: break-word; +} + +/* HIGHLIGHT COLOR */ + +button, +a { + color: var(--highlight-dark); + cursor: pointer; +} + +button:hover, +button:focus, +a:hover, +a:focus { + color: var(--highlight-light); + text-decoration: none; +} + +.toc .nav > li.active > a { + color: var(--highlight-dark); +} + +.toc .nav > li.active > a:hover, +.toc .nav > li.active > a:focus { + color: var(--highlight-light); +} + +.pagination > .active > a { + background-color: var(--header-bg-color); + border-color: var(--header-bg-color); +} + +.pagination > .active > a, +.pagination > .active > a:focus, +.pagination > .active > a:hover, +.pagination > .active > span, +.pagination > .active > span:focus, +.pagination > .active > span:hover { + background-color: var(--highlight-light); + border-color: var(--highlight-light); +} + +/* HEADINGS */ + +h1 { + font-weight: 600; + font-size: 32px; +} + +h2 { + font-weight: 600; + font-size: 24px; + line-height: 1.8; +} + +h3 { + font-weight: 600; + font-size: 20px; + line-height: 1.8; +} + +h5 { + font-size: 14px; + padding: 10px 0px; +} + +article h1, +article h2, +article h3, +article h4 { + margin-top: 35px; + margin-bottom: 15px; +} + +article h4 { + padding-bottom: 8px; + border-bottom: 2px solid #ddd; +} + +/* NAVBAR */ + +.navbar-brand > img { + color: var(--header-ft-color); +} + +.navbar { + border: none; + /* Both navbars use box-shadow */ + -webkit-box-shadow: var(--card-box-shadow); + -moz-box-shadow: var(--card-box-shadow); + box-shadow: var(--card-box-shadow); +} + +.subnav { + border-top: 1px solid #ddd; + background-color: #fff; +} + +.navbar-inverse { + background-color: var(--header-bg-color); + z-index: 100; +} + +.navbar-inverse .navbar-nav > li > a, +.navbar-inverse .navbar-text { + color: var(--header-ft-color); + background-color: var(--header-bg-color); + border-bottom: 3px solid transparent; + padding-bottom: 12px; +} + +.navbar-inverse .navbar-nav > li > a:focus, +.navbar-inverse .navbar-nav > li > a:hover { + color: var(--header-ft-color); + background-color: var(--header-bg-color); + border-bottom: 3px solid white; +} + +.navbar-inverse .navbar-nav > .active > a, +.navbar-inverse .navbar-nav > .active > a:focus, +.navbar-inverse .navbar-nav > .active > a:hover { + color: var(--header-ft-color); + background-color: var(--header-bg-color); + border-bottom: 3px solid white; +} + +.navbar-form .form-control { + border: 0; + border-radius: 0; +} + +.navbar-form .form-control:hover { + box-shadow: var(--search-box-shadow); +} + +.toc-filter > input:hover { + box-shadow: var(--under-box-shadow); +} + +/* NAVBAR TOGGLED (small screens) */ + +.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form { + border: none; +} +.navbar-inverse .navbar-toggle { + box-shadow: var(--card-box-shadow); + border: none; +} + +.navbar-inverse .navbar-toggle:focus, +.navbar-inverse .navbar-toggle:hover { + background-color: var(--header-ft-color); +} + +/* SIDEBAR */ + +.toc .level1 > li { + font-weight: 400; +} + +.toc .nav > li > a { + color: var(--font-color); +} + +.sidefilter { + background-color: #fff; + border-left: none; + border-right: none; +} + +.sidefilter { + background-color: #fff; + border-left: none; + border-right: none; +} + +.toc-filter { + padding: 10px; + margin: 0; +} + +.toc-filter > input { + border: none; + border-bottom: 2px solid var(--accent-dim); +} + +.toc-filter > .filter-icon { + display: none; +} + +.sidetoc > .toc { + background-color: #fff; + overflow-x: hidden; +} + +.sidetoc { + background-color: #fff; + border: none; +} + +/* ALERTS */ + +.alert { + padding: 0px 0px 5px 0px; + color: inherit; + background-color: inherit; + border: none; + box-shadow: var(--card-box-shadow); +} + +.alert > p { + margin-bottom: 0; + padding: 5px 10px; +} + +.alert > ul { + margin-bottom: 0; + padding: 5px 40px; +} + +.alert > h5 { + padding: 10px 15px; + margin-top: 0; + text-transform: uppercase; + font-weight: bold; + border-radius: 4px 4px 0 0; +} + +.alert-info > h5 { + color: #1976d2; + border-bottom: 4px solid #1976d2; + background-color: #e3f2fd; +} + +.alert-warning > h5 { + color: #f57f17; + border-bottom: 4px solid #f57f17; + background-color: #fff3e0; +} + +.alert-danger > h5 { + color: #d32f2f; + border-bottom: 4px solid #d32f2f; + background-color: #ffebee; +} + +/* CODE HIGHLIGHT */ +pre { + padding: 9.5px; + margin: 0 0 10px; + font-size: 13px; + word-break: break-all; + word-wrap: break-word; + background-color: #fffaef; + border-radius: 4px; + border: none; + box-shadow: var(--card-box-shadow); +} + +/* STYLE FOR IMAGES */ + +.article .small-image { + margin-top: 15px; + box-shadow: var(--card-box-shadow); + max-width: 350px; +} + +.article .medium-image { + margin-top: 15px; + box-shadow: var(--card-box-shadow); + max-width: 550px; +} + +.article .large-image { + margin-top: 15px; + box-shadow: var(--card-box-shadow); + max-width: 700px; +} \ No newline at end of file diff --git a/docs/toc.yml b/docs/toc.yml new file mode 100644 index 0000000..59f8010 --- /dev/null +++ b/docs/toc.yml @@ -0,0 +1,5 @@ +- name: Articles + href: articles/ +- name: Api Documentation + href: api/ + homepage: api/index.md