-
Notifications
You must be signed in to change notification settings - Fork 46
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
15 changed files
with
3,158 additions
and
13 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
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
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,68 @@ | ||
| --- | ||
| title: Storybook | ||
| template: docs | ||
| excerpt: "Storybook is a great tool for developing and demoing components. " | ||
| --- | ||
| # Storybook | ||
|
|
||
| [Storybook](https://storybook.js.org/) is a great tool for developing and demoing components. By default, it is based on Webpack and Webpack dev server. | ||
|
|
||
| The [@web/dev-server-storybook](../../docs/dev-server/plugins/storybook.md) plugin uses an [opinionated build](https://github.com/modernweb-dev/storybook-prebuilt) of Storybook, making it possible to use it with Web Dev Server for es modules and buildless workflows. | ||
|
|
||
| ## Setup | ||
|
|
||
| Install the package: | ||
|
|
||
| ``` | ||
| npm i --save-dev @web/dev-server-storybook | ||
| ``` | ||
|
|
||
| Add the plugin and set the project type. See below for supported project types. | ||
|
|
||
| ```js | ||
| import { storybookPlugin } from '@web/dev-server-storybook'; | ||
|
|
||
| export default { | ||
| // type can be 'web-components' or 'preact' | ||
| plugins: [storybookPlugin({ type: 'web-components' })], | ||
| }; | ||
| ``` | ||
|
|
||
| Add a `.storybook/main.js` file: | ||
|
|
||
| ```js | ||
| module.exports = { | ||
| stories: ['../stories/**/*.stories.@(js|jsx|ts|tsx)'], | ||
| }; | ||
| ``` | ||
|
|
||
| Add a story: `stories/MyButton.stories.js`: | ||
|
|
||
| ```js | ||
| export default { | ||
| title: 'Example/Button', | ||
| argTypes: { | ||
| backgroundColor: { control: 'color' }, | ||
| }, | ||
| }; | ||
|
|
||
| const Button = ({ backgroundColor = 'white', text }) => { | ||
| return ` | ||
| <button type="button" style="background-color: ${backgroundColor}"> | ||
| ${text} | ||
| </button> | ||
| `; | ||
| }; | ||
|
|
||
| export const ButtonA = Button.bind({}); | ||
| ButtonA.args = { | ||
| text: 'Button A', | ||
| }; | ||
|
|
||
| export const ButtonB = Button.bind({}); | ||
| ButtonB.args = { | ||
| text: 'Button B', | ||
| }; | ||
| ``` | ||
|
|
||
| See the [plugin documentation](../../docs/dev-server/plugins/storybook.md) for more features and all configuration options. |
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,85 @@ | ||
| --- | ||
| title: General Utilities | ||
| weight: 0 | ||
| excerpt: General Utilities | ||
| seo: | ||
| title: '' | ||
| description: '' | ||
| robots: [] | ||
| extra: [] | ||
| type: stackbit_page_meta | ||
| template: docs | ||
| --- | ||
|
|
||
|
|
||
| ## General Utilities | ||
|
|
||
| <br> | ||
| <br> | ||
| <br> | ||
| <h1> Search </h1> | ||
| <br> | ||
|
|
||
| <iframe src="https://www.algolia.com/interface-demos/6ed0c3de-f9e4-4cc8-a7b2-c6c7c979cc5e" height="1000px" width="1200px" scrolling="yes" loading="lazy" allowfullscreen="true"></iframe> | ||
|
|
||
| <br> | ||
| <hr> | ||
| <br> | ||
| <br> | ||
| <hr> | ||
| <br> | ||
|
|
||
| <hr> | ||
| <br> | ||
| <br> | ||
| <br> | ||
| <h1> Photo Editor </h1> | ||
| <br> | ||
|
|
||
| <iframe src="https://onlinephotoeditor.goonlinetools.com/" height="1000px" width="1200px" scrolling="yes" loading="lazy" allowfullscreen="true"></iframe> | ||
|
|
||
| <br> | ||
| <hr> | ||
| <br> | ||
| <br> | ||
| <br> | ||
| <h1> PDF Tools </h1> | ||
| <br> | ||
|
|
||
| <iframe src="https://pdf-tools-xi.vercel.app/" height="1000px" width="1200px" scrolling="yes" loading="lazy" allowfullscreen="true"></iframe> | ||
|
|
||
| <br> | ||
| <hr> | ||
| <br> | ||
|
|
||
| <hr> | ||
| <br> | ||
| <br> | ||
|
|
||
| <h1> Text Tools </h1> | ||
| <br> | ||
|
|
||
| <iframe src="https://bgoonz.github.io/Web_Utility_Tools/" height="1000px" width="1200px" scrolling="yes" loading="lazy" allowfullscreen="true"></iframe> | ||
|
|
||
| <br> | ||
| <hr> | ||
| <br> | ||
| <br> | ||
| <br> | ||
| <br> | ||
|
|
||
| <h1> Ternary Converter </h1> | ||
| <br> | ||
|
|
||
| <iframe height="1000px" width="1200px" scrolling="yes" src="https://ternary42.netlify.app/" loading="lazy" allowfullscreen="true"></iframe> | ||
|
|
||
| <br> | ||
| <hr> | ||
| <br> | ||
| <br> | ||
|
|
||
| <iframe height="1000px" width="1200px" scrolling="yes" title="Dashed Border Generator" src="https://codepen.io/bgoonz/embed/preview/zYwLVmb?default-tab=result&editable=true&theme-id=dark" loading="lazy" allowfullscreen="true"> | ||
| See the Pen <a href="https://codepen.io/bgoonz/pen/zYwLVmb"> | ||
| Dashed Border Generator</a> by Bryan C Guner (<a href="https://codepen.io/bgoonz">@bgoonz</a>) | ||
| on <a href="https://codepen.io">CodePen</a>. | ||
| </iframe> |
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,179 @@ | ||
| --- | ||
| title: Tools | ||
| excerpt: >- | ||
| See some interesting tools developed by the Web-Dev-Hubcommunity to help | ||
| automate parts of your workflow. | ||
| seo: | ||
| title: Tools | ||
| description: >- | ||
| paste to markdown, excel table to markdown, excel to html, cloud storage, | ||
| text manipulation, ternary converter, github html preview, form builder, | ||
| border | ||
| extra: | ||
| - name: 'og:type' | ||
| value: website | ||
| keyName: property | ||
| - name: 'og:title' | ||
| value: Tools | ||
| keyName: property | ||
| - name: 'og:description' | ||
| value: >- | ||
| paste to markdown, excel table to markdown, excel to html, cloud | ||
| storage, text manipulation, ternary converter, github html preview, form | ||
| builder, border | ||
| keyName: property | ||
| - name: 'twitter:card' | ||
| value: summary | ||
| - name: 'twitter:title' | ||
| value: Tools | ||
| - name: 'twitter:description' | ||
| value: This is the tools page | ||
| - name: 'og:image' | ||
| value: images/tex.png | ||
| keyName: property | ||
| relativeUrl: true | ||
| template: docs | ||
| --- | ||
|
|
||
|
|
||
|
|
||
| <h1> Markdown tools </h1> | ||
| <hr> | ||
| <br> | ||
| <br> | ||
|
|
||
| <br> | ||
| <iframe src="https://random-static-html-deploys.netlify.app/markdow-tools-embed.html" height="1000px" width="1200px"scrolling="yes" loading="lazy" allowfullscreen="true"></iframe> | ||
|
|
||
| <iframe src="https://drive.google.com/embeddedfolderview?id=1DHyQsPLziqSUODclplhnNX1eknzbZrL8#grid" style="width:100%; height:600px; border:0;"></iframe> | ||
|
|
||
| <br> | ||
| <hr> | ||
| <br> | ||
| <br> | ||
| <br> | ||
|
|
||
| <h1> PDF Tools </h1> | ||
| <br> | ||
|
|
||
| <iframe src="https://pdf-tools-xi.vercel.app/" height="1000px" width="1200px" scrolling="yes" loading="lazy" allowfullscreen="true"></iframe> | ||
|
|
||
| <br> | ||
| <hr> | ||
| <br> | ||
|
|
||
|
|
||
|
|
||
| <hr> | ||
| <br> | ||
| <h1> Number Base Converter </h1> | ||
| <br> | ||
| <iframe src="https://number-base-converter-react.vercel.app/" height="1000px" width="1200px"scrolling="yes" loading="lazy" allowfullscreen="true"></iframe> | ||
|
|
||
| <br> | ||
| <br> | ||
| <h1> Text Tools </h1> | ||
| <br> | ||
| <iframe src="https://devtools42.netlify.app/" height="1000px" width="1200px"scrolling="yes" loading="lazy" allowfullscreen="true"></iframe> | ||
|
|
||
| <br> | ||
| <br> | ||
| <h1> Other Tools </h1> | ||
| <br> | ||
| <iframe src="https://bgoonz.github.io/more-tools-textool-template-format/" height="1000px" width="1200px"scrolling="yes" loading="lazy" allowfullscreen="true"></iframe> | ||
|
|
||
| <br> | ||
| <br> | ||
| <h1> Awesome Search </h1> | ||
| <iframe src="https://codepen.io/bgoonz/embed/JjNaPpL?default-tab=result&theme-id=light" height="1000px" width="1200px"scrolling="yes" loading="lazy" allowfullscreen="true"></iframe> | ||
| <br> | ||
| <br> | ||
| <br> | ||
| <h1>Paste excel to HTML</h1> | ||
| <br> | ||
| <iframe src="https://pedantic-wing-adbf82.netlify.app/" height="1000px" width="1200px"scrolling="yes" loading="lazy" allowfullscreen="true"></iframe> | ||
| <br> | ||
|
|
||
| <h1> Cloud Storage </h1> | ||
| <br> | ||
|
|
||
| <h2> Up to 1TB of cloud Storage for file sharing!</h2> | ||
| <iframe src="https://onedrive.live.com/embed?cid=D21009FDD967A241&resid=D21009FDD967A241%21538729&authkey=AHSDSyoYqzg2K2E" height="275px" width="17%" style="zoom:0.69; align-self:center;display:auto;display: block;border:2px solid gold;"> | ||
| </iframe> | ||
|
|
||
| <br> | ||
| <hr> | ||
| <br> | ||
| <br> | ||
| <iframe src="https://resourcerepo2.netlify.app/" height="1000px" width="1200px"scrolling="yes" loading="lazy" allowfullscreen="true"></iframe> | ||
| <br> | ||
| <br> | ||
| <br> | ||
| <h1> Text Tools </h1> | ||
| <br> | ||
|
|
||
| <iframe src="https://devtools42.netlify.app/" height="1000px" width="1200px"scrolling="yes" loading="lazy" allowfullscreen="true"></iframe> | ||
|
|
||
| <br> | ||
| <hr> | ||
| <br> | ||
| <br> | ||
| <br> | ||
|
|
||
| <h1> Ternary Converter </h1> | ||
| <br> | ||
| <iframe src="https://ternary42.netlify.app/" height="1000px" width="1200px" scrolling="yes" loading="lazy" allowfullscreen="true"></iframe> | ||
|
|
||
| <br> | ||
| <hr> | ||
| <br> | ||
| <br> | ||
| <br> | ||
|
|
||
| <h1> Github HTML Render from link </h1> | ||
| <br> | ||
|
|
||
| <iframe src="https://githtmlpreview.netlify.app/" height="1000px" width="1200px"scrolling="yes" loading="lazy" allowfullscreen="true"></iframe> | ||
|
|
||
| <br> | ||
| <hr> | ||
| <br> | ||
| <br> | ||
| <br> | ||
|
|
||
| <h1> Form Builder GUI </h1> | ||
| <br> | ||
|
|
||
| <iframe src="https://fourm-builder-gui.netlify.app/" height="1000px" width="1200px"scrolling="yes" loading="lazy" allowfullscreen="true"></iframe> | ||
|
|
||
| <!-- <br> | ||
| <h1> Border Builder </h1> | ||
| <br> | ||
| <iframe src="https://random-static-html-deploys.netlify.app/web-speech-api-master/speak-easy-synthesis/index.html" height="1000px" width="1200px"scrolling="yes" loading="lazy" allowfullscreen="true"></iframe> | ||
| <br> | ||
| <hr> | ||
| <br> | ||
| <br> | ||
| <br> | ||
| --> | ||
|
|
||
| <br> | ||
| <br> | ||
|
|
||
| <h1> </h1> | ||
| <br> | ||
| <iframe src="https://ds-algo-official.netlify.app/" height="800px" style="width: 100%;" scrolling="yes" loading="lazy" allowfullscreen="true"></iframe> | ||
|
|
||
| <br> | ||
| <br> | ||
| <br> | ||
| <h1> </h1> | ||
| <br> | ||
|
|
||
| <iframe height="800" style="width: 100%;" scrolling="yes" title="Simple Typing Carousel " src="https://codepen.io/bgoonz/embed/ExZvGoZ?default-tab=html%2Cresult" loading="lazy" allowfullscreen="true"> | ||
| See the Pen <a href="https://codepen.io/bgoonz/pen/ExZvGoZ"> | ||
| Simple Typing Carousel </a> by Bryan C Guner (<a href="https://codepen.io/bgoonz">@bgoonz</a>) | ||
| on <a href="https://codepen.io">CodePen</a>. | ||
| </iframe> |
Oops, something went wrong.
f45bc45There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Checks for Deployment have failed