diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..84f5661 Binary files /dev/null and b/.DS_Store differ diff --git a/.gitignore b/.gitignore index 74a9223..5b79dc8 100644 --- a/.gitignore +++ b/.gitignore @@ -5,3 +5,8 @@ _site/ # Ignore folders generated by Bundler .bundle/ vendor/ +Gemfile.lock + +.DS_Store + +*/.DS_Store \ No newline at end of file diff --git a/.gitignore copy b/.gitignore copy deleted file mode 100644 index 6b1cc31..0000000 --- a/.gitignore copy +++ /dev/null @@ -1,8 +0,0 @@ -_site -.sass-cache -.jekyll-metadata -.DS_Store -node_modules - - -Gemfile.lock \ No newline at end of file diff --git a/DEVELOPMENT.md b/DEVELOPMENT.md new file mode 100644 index 0000000..396906d --- /dev/null +++ b/DEVELOPMENT.md @@ -0,0 +1,42 @@ +# Development + +This site is built using [Jekyll](https://jekyllrb.com). + + +## Local Development +If you want to develop locally, you first have to change some configuration. + +In `_config.yaml` you can comment out the `url` and `baseurl` keys. These are needed for GitHub pages to create urls. + +you can use the [Docker Compose](./docker-compose.yml) file. + +```bash +docker-compose up -d +``` + +This runs the Jekyll engine and watches for any changes. After changing a file, you can simply reload the webbrowser to see the changes. + +> **_NOTE:_** Changes made to `_config.yaml` require a restart from docker-compose. + + +## Structure + +### Includes +The includes folder contains HTML and MarkDown partials that can be reused and included into layouts. + +### Layouts +The layouts folder contains the HTML layout for any page. To use a layout, you can add FrontMatter to a page or post specifying the layout (without extension). + +``` +--- +layout: default +--- +``` +### Assets +The assets folder contains static assets that are loaded by layouts and/or pages. + +### Collections +The collections folder contain collections that are used by Jekyll. If you want to add a new guide, simply create a new MarkDown file in `collections/_guides`. + +### Pages +The pages folder contains static pages that are rendered by Jekyll into HTML. This folder can contain MarkDown files as well as HTML files. \ No newline at end of file diff --git a/LICENSE copy b/LICENSE copy deleted file mode 100644 index 9e9795f..0000000 --- a/LICENSE copy +++ /dev/null @@ -1,21 +0,0 @@ -The MIT License (MIT) - -Copyright (c) 2017 Kitty Giraudel - -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. diff --git a/_config.yml b/_config.yml index 78764c5..a454501 100644 --- a/_config.yml +++ b/_config.yml @@ -11,8 +11,8 @@ description: > # this means to ignore newlines until "baseurl:" Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description. -baseurl: "/Documentation" # the subpath of your site, e.g. /blog -url: "https://openscd.github.io" # the base hostname & protocol for your site +#baseurl: "/Documentation" # the subpath of your site, e.g. /blog +#url: "https://openscd.github.io" # the base hostname & protocol for your site collections_dir: collections # Markdown settings diff --git a/_includes/footer.html b/_includes/footer.html new file mode 100644 index 0000000..80b3d24 --- /dev/null +++ b/_includes/footer.html @@ -0,0 +1,20 @@ + \ No newline at end of file diff --git a/_includes/header.html b/_includes/header.html index 916e9e4..3c0e30e 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -1,9 +1,37 @@
+

+ OpenSCD +

+ + +
{% unless page.hide_landing %} -
+
-

+

{{ page.title }}

diff --git a/_layouts/aside.html b/_layouts/aside.html deleted file mode 100644 index 2ff88d9..0000000 --- a/_layouts/aside.html +++ /dev/null @@ -1,34 +0,0 @@ - - - - {% include head.html %} - - - {% include header.html %} -
- -
- {{ content }} -
-
- - - - - - diff --git a/_layouts/component.html b/_layouts/component.html deleted file mode 100644 index aef380a..0000000 --- a/_layouts/component.html +++ /dev/null @@ -1,28 +0,0 @@ - - - - {% include head.html %} - - - {% include header.html %} -
-
- -
-
- {{ page.name }} -
-
- {{ content }} -
-
- -
-
- - - - - - - diff --git a/_layouts/default.html b/_layouts/default.html index 4f83e76..e25abf6 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -8,6 +8,7 @@
{{ content }}
+ {% include footer.html %} diff --git a/assets/.DS_Store b/assets/.DS_Store index b7eefdf..d347f8b 100644 Binary files a/assets/.DS_Store and b/assets/.DS_Store differ diff --git a/assets/css/components.css b/assets/css/components.css new file mode 100644 index 0000000..ef80581 --- /dev/null +++ b/assets/css/components.css @@ -0,0 +1,3 @@ +@import 'components/header.css'; +@import 'components/hero.css'; +@import 'components/button.css'; \ No newline at end of file diff --git a/assets/css/components/button.css b/assets/css/components/button.css new file mode 100644 index 0000000..6c36c7f --- /dev/null +++ b/assets/css/components/button.css @@ -0,0 +1,92 @@ +.button { + border: none; + padding: 8px 16px; + display: inline-flex; + text-decoration: none; + border-radius: 5px; +} + +.button--cta { + color: var(--primary-color); + background: #FFFFFF; + font-weight: 500; + font-size: 1.2em; + position: relative; + padding: 0; + transition: all 0.3s ease; + +} + +.button--cta span { + position: relative; + display: block; + width: 100%; + height: 100%; + padding: 12px 24px; + } + +.button--cta:before, +.button--cta:after { + position: absolute; + content: ""; + right: 0; + bottom: 0; + background: #FFFFFF; + transition: all 0.3s ease; +} + +.button--cta:before{ + height: 0%; + width: 2px; +} + +.button--cta:after { + width: 0%; + height: 2px; +} + +.button--cta:hover:before { + height: 100%; +} + +.button--cta:hover:after { + width: 100%; +} + +.button--cta:hover{ + background: transparent; +} + + + +.button--cta span:hover{ + color: #FFFFFF; + } + +.button--cta span:before, +.button--cta span:after { + position: absolute; + content: ""; + left: 0; + top: 0; + background: #FFFFFF; + transition: all 0.3s ease; +} + +.button--cta span:before { + width: 2px; + height: 0%; +} + +.button--cta span:after { + height: 2px; + width: 0%; +} + +.button--cta span:hover:before { + height: 100%; + } + +.button--cta span:hover:after { + width: 100%; + } \ No newline at end of file diff --git a/assets/css/components/header.css b/assets/css/components/header.css new file mode 100644 index 0000000..c024627 --- /dev/null +++ b/assets/css/components/header.css @@ -0,0 +1,199 @@ +/** + * HEADER & NAVIGATION COMPONENTS + **/ + + +/** HEADER */ +.header { + display: flex; + gap: 32px; + position: fixed; + width: 100%; + height: 64px; + top: 0; + left: 0; + z-index: 999; + flex-direction: row; + align-items: end; + padding: 0 32px; + box-sizing: border-box; + animation: header linear; + animation-timeline: scroll(); + animation-range: 0 15vh; + background: var(--primary-color); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 2px 5px rgba(0, 0, 0, 0.09), + 0 4px 7px rgba(0, 0, 0, 0.12); +} + +.header.header--sticky { + animation: none; + animation-timeline: initial; + animation-range: 0; +} + +.header.header--sticky + .main { + margin-top: 64px; +} + +@keyframes header { + from { + background: #00000000; + box-shadow: none; + } + to { + background: var(--primary-color); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), + 0 2px 5px rgba(0, 0, 0, 0.09), + 0 4px 7px rgba(0, 0, 0, 0.12); + } +} + +/** + * LOGO + **/ +.logo { + height: 100%; + justify-self: left; + padding: 8px 0; + box-sizing: border-box; + animation: brand linear; + animation-timeline: scroll(); + animation-range: 0 15vh; +} + +/** + * BRAND + **/ +.brand { + animation: brand linear; + animation-timeline: scroll(); + animation-range: 0 15vh; + align-self: center; + margin: 0; + font-weight: 600; + color: #FFFFFF; + font-size: 1.6em; +} + +@keyframes brand { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +/** + * NAVIGATION + **/ +.nav { + flex: 1; + align-items: center; + display: flex; + gap: 32px; + height: 100%; + justify-content: end; +} + +.nav__item { + font-weight: 500; + color: #ffffff; + position: relative; + text-decoration: none; + display: block; +} + +/** SUB NAVIGATION **/ +.nav__item ul { + display: none; + position: absolute; + list-style-type: none; + margin: 0; + padding: 0; + left: 0; + background: #FFFFFF; + color: var(--primary-color); + width: 100%; + top: 20px; + padding: 8px; + box-sizing: border-box; +} + +.nav__item ul li { + padding: 4px 0; +} + +.nav__item:hover ul { + display: block; +} + +ul .nav__item { + color: var(--primary-color); +} + +/** MOBILE NAVIGATION **/ +.nav__toggle { + display: none; +} + +.nav__toggle__target { + display: none; +} + +@media only screen and (max-width: 1023px) { + .header { + position: fixed; + animation: none; + animation-timeline: inherit; + animation-range: inherit; + } + + .nav__toggle__target { + display: block; + align-self: center; + color: #FFFFFF; + } + + .nav { + display: none; + height: auto; + } + + .nav__item ul { + display: block; + position: inherit; + background: none; + top: 0; + left: 0; + padding: 0; + } + + .nav__item ul li { + padding: 0; + } + + .nav__item ul .nav__item { + color: #FFFFFF; + } + + .nav__toggle:checked ~ .nav { + display: block; + position: absolute; + left: 0; + top: 64px; + background: var(--primary-color); + z-index: 999; + width: 100%; + } + + /** Disable animation on mobile **/ + .logo, + .brand { + position: initial; + animation: none; + animation-timeline: inherit; + animation-range: inherit; + } +} + diff --git a/assets/css/components/hero.css b/assets/css/components/hero.css new file mode 100644 index 0000000..3a7f173 --- /dev/null +++ b/assets/css/components/hero.css @@ -0,0 +1,71 @@ +/** + * HERO COMPONENT + **/ + + +.hero { + height: 640px; + min-height: 320px; + display: grid; + grid-template-areas: 'stack'; + position: relative; + z-index: 0; +} + +/** Stacks all the children inside hero on top of each other **/ +.hero > * { + grid-area: stack; + animation: parallax linear; + animation-timeline: scroll(); +} + +.hero .img { + --parallax-speed: 0; + z-index: 1; +} + +.hero .img.home { + background-image: url('../../images/landing.jpg'); + background-size: cover; + background-position: center; +} + +.hero .img.solar { + background-image: url('../../images/solar.jpg'); + background-size: cover; + background-position: center bottom; +} + + +.hero .gradient { + background: linear-gradient(to bottom, #016fe030, var(--primary-color)); + z-index: 2; + --parallax-speed: 0; +} + +.hero .title { + align-self: center; + justify-self: center; + color: #ffffff; + font-weight: 600; + font-size: 2.6em; + --parallax-speed: -15; + z-index: 3; +} + +.hero .subtitle { + align-self: center; + z-index: 3; + color: #ffffff; + --parallax-speed: -10; + margin: 0 64px; + text-align: center; + justify-self: center; + margin-top: 128px; +} + +@keyframes parallax { + to { + transform: translateY(calc(var(--parallax-speed) * 200px)); + } +} diff --git a/assets/css/layout.css b/assets/css/layout.css new file mode 100644 index 0000000..a1f2830 --- /dev/null +++ b/assets/css/layout.css @@ -0,0 +1,13 @@ +.container { + display: flex; + gap: 32px; +} + +.container--row { + flex-direction: row; +} + +.flex { + flex: 1; + display: block; +} \ No newline at end of file diff --git a/assets/css/main.css b/assets/css/main.css index f557e0c..397f28b 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1,4 +1,6 @@ @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;800&display=swap'); +@import 'components.css'; +@import 'layout.css'; :root { --primary-color: #29639f; @@ -12,138 +14,36 @@ body { height: 100vh; } -/** Header */ -.header { - display: flex; - gap: 32px; - position: fixed; - width: 100%; - height: 64px; - top: 0; - left: 0; - z-index: 999; - flex-direction: row; - align-items: end; - padding: 16px 32px; - box-sizing: border-box; - - animation: header linear; - animation-timeline: scroll(); - animation-range: 0 15vh; - background: var(--primary-color); - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 2px 5px rgba(0, 0, 0, 0.09), - 0 4px 7px rgba(0, 0, 0, 0.12); -} - -.header.header--sticky { - animation: none; - animation-timeline: initial; - animation-range: 0; -} - -.header.header--sticky + .main { - margin-top: 64px; -} - -@keyframes header { - from { - background: #00000000; - box-shadow: none; - } - to { - background: var(--primary-color); - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 2px 5px rgba(0, 0, 0, 0.09), - 0 4px 7px rgba(0, 0, 0, 0.12); - } -} - -.logo { - height: 100%; - justify-self: left; -} - -/** Navigation */ -.nav { - flex: 1; - align-items: center; - display: flex; - gap: 32px; - height: 100%; - justify-content: end; +* { + font-family: 'Open Sans', sans-serif; } -.nav__item { - font-weight: 500; - color: #ffffff; -} -/** Landing */ .landing { - height: 640px; - min-height: 320px; - display: grid; - grid-template-areas: 'stack'; - position: relative; - z-index: 0; -} - -.landing > * { - grid-area: stack; - animation: parallax linear; - animation-timeline: scroll(); -} - -.landing .img { - --parallax-speed: 0; - z-index: 1; -} - -.landing .img.home { - background-image: url('../images/landing.jpg'); - background-size: cover; - background-position: center; -} - -.landing .img.solar { - background-image: url('../images/solar.jpg'); - background-size: cover; - background-position: center bottom; + background: var(--primary-color); + padding: 32px; + display: flex; + align-items: center; + justify-content: center; } - -.landing .gradient { - background: linear-gradient(to bottom, #016fe030, var(--primary-color)); - z-index: 2; - --parallax-speed: 0; +.footer { + height: 320px; + background: #28323c; + color: #FFFFFF; } -.landing .brand { - align-self: center; - justify-self: center; - color: #ffffff; - font-weight: 600; - font-size: 2.6em; - --parallax-speed: -15; - z-index: 3; -} -.landing .subtitle { - align-self: center; - z-index: 3; - color: #ffffff; - --parallax-speed: -10; - margin: 0 64px; - text-align: center; - justify-self: center; - margin-top: 128px; +.contact__container { + display: flex; + align-items: center; } -* { - font-family: 'Open Sans', sans-serif; +.contact__logo { + width: 64px; } -@keyframes parallax { - to { - transform: translateY(calc(var(--parallax-speed) * 200px)); - } -} +.contact__logo--github { + width: 38px; + height: 100%; +} \ No newline at end of file diff --git a/assets/css/pages.css b/assets/css/pages.css new file mode 100644 index 0000000..e69de29 diff --git a/assets/css/syntax.scss b/assets/css/syntax.scss deleted file mode 100644 index 4467d89..0000000 --- a/assets/css/syntax.scss +++ /dev/null @@ -1,64 +0,0 @@ ---- ---- -@charset "utf-8"; - -.highlight { background: #ffffff; } -.highlight .c { color: #999988; font-style: italic } /* Comment */ -.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */ -.highlight .k { font-weight: bold } /* Keyword */ -.highlight .o { font-weight: bold } /* Operator */ -.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */ -.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */ -.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */ -.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */ -.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ -.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */ -.highlight .ge { font-style: italic } /* Generic.Emph */ -.highlight .gr { color: #aa0000 } /* Generic.Error */ -.highlight .gh { color: #999999 } /* Generic.Heading */ -.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ -.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */ -.highlight .go { color: #888888 } /* Generic.Output */ -.highlight .gp { color: #555555 } /* Generic.Prompt */ -.highlight .gs { font-weight: bold } /* Generic.Strong */ -.highlight .gu { color: #aaaaaa } /* Generic.Subheading */ -.highlight .gt { color: #aa0000 } /* Generic.Traceback */ -.highlight .kc { font-weight: bold } /* Keyword.Constant */ -.highlight .kd { font-weight: bold } /* Keyword.Declaration */ -.highlight .kp { font-weight: bold } /* Keyword.Pseudo */ -.highlight .kr { font-weight: bold } /* Keyword.Reserved */ -.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */ -.highlight .m { color: #009999 } /* Literal.Number */ -.highlight .s { color: #d14 } /* Literal.String */ -.highlight .na { color: #008080 } /* Name.Attribute */ -.highlight .nb { color: #0086B3 } /* Name.Builtin */ -.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */ -.highlight .no { color: #008080 } /* Name.Constant */ -.highlight .ni { color: #800080 } /* Name.Entity */ -.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */ -.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */ -.highlight .nn { color: #555555 } /* Name.Namespace */ -.highlight .nt { color: #0086B3 } /* Name.Tag */ -.highlight .nv { color: #008080 } /* Name.Variable */ -.highlight .ow { font-weight: bold } /* Operator.Word */ -.highlight .w { color: #bbbbbb } /* Text.Whitespace */ -.highlight .mf { color: #009999 } /* Literal.Number.Float */ -.highlight .mh { color: #009999 } /* Literal.Number.Hex */ -.highlight .mi { color: #009999 } /* Literal.Number.Integer */ -.highlight .mo { color: #009999 } /* Literal.Number.Oct */ -.highlight .sb { color: #d14 } /* Literal.String.Backtick */ -.highlight .sc { color: #d14 } /* Literal.String.Char */ -.highlight .sd { color: #d14 } /* Literal.String.Doc */ -.highlight .s2 { color: #d14 } /* Literal.String.Double */ -.highlight .se { color: #d14 } /* Literal.String.Escape */ -.highlight .sh { color: #d14 } /* Literal.String.Heredoc */ -.highlight .si { color: #d14 } /* Literal.String.Interpol */ -.highlight .sx { color: #d14 } /* Literal.String.Other */ -.highlight .sr { color: #009926 } /* Literal.String.Regex */ -.highlight .s1 { color: #d14 } /* Literal.String.Single */ -.highlight .ss { color: #990073 } /* Literal.String.Symbol */ -.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */ -.highlight .vc { color: #008080 } /* Name.Variable.Class */ -.highlight .vg { color: #008080 } /* Name.Variable.Global */ -.highlight .vi { color: #008080 } /* Name.Variable.Instance */ -.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */ \ No newline at end of file diff --git a/assets/images/.DS_Store b/assets/images/.DS_Store index 34e479c..ac681bf 100644 Binary files a/assets/images/.DS_Store and b/assets/images/.DS_Store differ diff --git a/assets/images/github.svg b/assets/images/github.svg new file mode 100644 index 0000000..d5e6491 --- /dev/null +++ b/assets/images/github.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/images/slack.svg b/assets/images/slack.svg new file mode 100644 index 0000000..570275e --- /dev/null +++ b/assets/images/slack.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/collections/_guides/.gitkeep b/collections/_guides/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/collections/_guides/001_create_component.md b/collections/_guides/001_create_component.md deleted file mode 100644 index 11879e1..0000000 --- a/collections/_guides/001_create_component.md +++ /dev/null @@ -1,115 +0,0 @@ ---- -layout: guide -name: How to write a component -summary: Write a component -toc: true ---- - -When writing a good component, it's good to have a few things in mind. We follow the standards of [@open-wc](https://open-wc.org). On top of these standards, we have some custom standards to have a better and consistent way of working. - -To get started right away, please check out the [starter component](https://github.com/openscd/oscd-component) - -## Designing -Before start working on a new component, we can make use of [Figma](https://figma.com) to design the component. A figma organization is in place [here](). - -## Development - -### Coding -For a consistent development process, we have [EsLint](https://eslint.org/) in place. - -### Styling -We make use of css variables. Basic variables can be seen [here](..). - -## Testing -We can divide testing into 2 parts, unit testing and integration testing. -For unit testing, we use the `.spec.ts` files. For integration testing, we use the `.test.ts` files. -To unit test a component, we can create the component class as-is and test the exposed functions. -To integrate test a component, we can make a `fixture` from the webcomponent and test that `fixture`. -We also screenshot test each component. - -## Demoing -For demoing the component, we make use of [Storybook](https://storybook.js.org/). -It's important to keep in mind that we only want to demo the current component in a story. Best way is to have a story for each variant. -Let's say we have a custom element called my-button. This button can have 2 colors, primary and secondary. This button can also have the state `disabled`. -This means that we need 4 stories: `primary`, `primary/disabled`, `secondary` and `secondary/disabled`. - - -## Documentation - -### Cem Analyzer -You can add comments to your component, so the Custom Element Manifest Analyzer ([CEM Analyzer](https://www.npmjs.com/package/@custom-elements-manifest/analyzer)) can generate docs from this. - -CEM analyzer supports the following annotations: - -| | | -|--|--| -|@slot [name] | Document the named slot on top of the class | -| @slot | Document the default slot on top of the class | -| @cssprop | Document the css property on top of the class | -| @event [name] | Document the events that can be fired from this component on top of the class | -| @prop [name] | Document the property | -| @internal / @ignore | Ignore these from CEM | - -Example: -```js -/** - * @slot icon - You can place the icon for the button here - * @slot - Default button slot - * @cssprop --text-color - Controls the color of the button - * @cssprop --background-color - Controls the background of the button - * - * @event {click} clickEvent - Emits a click event when button is clicked - * - * @summary This is the `my-button` Component, which represents a styled button. - * - * @tag my-button - */ - @customElement('my-button') - export class MyButton extends LitElement { - - /** - * @prop {String} title - The title of the button. Showed when hovering over the button. - */ - @property({ - type: String - }) - title: string = ''; - - render(): TemplateResult { - return html``; - } - - private handleClick() { - this.dispatchEvent(new CustomEvent('click'); - } - - static styles = css` - .button { - background: var(--background-color); - color: var(--text-color); - } - `; -} -``` -## Deploying -We deploy our components to [npmjs](https://npmjs.org). To test this locally, you can make use of [verdaccio](https://https://verdaccio.org/). Verdaccio is a local npm registry. -To make verdaccio work, just follow the installation process [here](https://verdaccio.org/docs/installation). -Next, create a `.npmrc` in your project root that points to your verdaccio registry. - -Example: -```env -registry=http://localhost:4873 -``` - -Now you can test your published component in a new project (just use `npm i [component_name] --regsitry=http://localhost:4873` - -Storybook can be deployed to the GitHub Pages of the repository. - -To do automatic deploys, you can check out the GitHub actions in [oscd-component](https://github.com/openscd/oscd-component/tree/main/.github/workflows). \ No newline at end of file diff --git a/collections/_plugins/.gitkeep b/collections/_plugins/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/collections/_plugins/oscd-open.md b/collections/_plugins/oscd-open.md deleted file mode 100644 index 10329dd..0000000 --- a/collections/_plugins/oscd-open.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -name: OSCD Open -plugin_type: menu ---- -OSCD Open is a menu type plugin diff --git a/collections/_plugins/oscd-save.md b/collections/_plugins/oscd-save.md deleted file mode 100644 index 5800f3c..0000000 --- a/collections/_plugins/oscd-save.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -name: OSCD Save -plugin_type: menu ---- -OSCD Save is a menu type plugin diff --git a/index.html b/index.html index 606a1ba..5c593b9 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,13 @@ subtitle: Open Substation Communication Designer is an editor for SCL files as described in IEC 61850-6. cover: home --- +
+ + + Get started + + +
- -
+
diff --git a/pages/documentation.md b/pages/documentation.md new file mode 100644 index 0000000..86ab36f --- /dev/null +++ b/pages/documentation.md @@ -0,0 +1,32 @@ +--- +layout: default +title: Documentation +subtitle: +cover: solar +--- + +
+
+
+

+ Guides +

+
+
+
+
+
+ {% for guide in site.guides %} +
+
+
+ {{ guide.name }} +
+
+ {{ guide.summary }} +
+
+
+ {% endfor %} +
+