diff --git a/src/util/resources-data.ts b/src/util/resources-data.ts deleted file mode 100644 index b982e477e..000000000 --- a/src/util/resources-data.ts +++ /dev/null @@ -1,177 +0,0 @@ -export const RESOURCES = { - TEMPLATES: [ - { title: 'Official Stencil App Starter Project', url: 'https://github.com/ionic-team/stencil-app-starter' }, - { title: 'Official Stencil Component Starter Project', url: 'https://github.com/ionic-team/stencil-component-starter' }, - { title: 'Angular Stencil: use Stencil-built components in Angular', url: 'https://github.com/seveves/angular-stencil' }, - { title: 'Stencil + Firebase + Stencil Store Web App Starter Project', url: 'https://github.com/ranjeetsinghbnl/stencil-firebase' }, - ], - COMPONENTS: [ - { title: 'Animatable components with Web Animations API', url: 'https://proyecto26.com/animatable-component/' }, - { title: 'Stencil Router', url: 'https://github.com/ionic-team/stencil-router/wiki' }, - { title: 'Stencil Card Component', url: 'https://github.com/henriquecustodia/stencil-card-app' }, - { title: 'st-image: lazy loaded images', url: 'https://github.com/jgw96/st-img' }, - { title: 'st-payment: Stencil Payment API Component', url: 'https://github.com/Fdom92/stencil-payment' }, - { title: 'st-fetch: A simple component for performing http fetch calls', url: 'https://github.com/Fdom92/stencil-fetch' }, - { title: 'web-photo-filter: Use webGL for amazing instagram like filters', url: 'https://github.com/peterpeterparker/web-photo-filter' }, - { title: 'd3-stencil: Charts built with D3 and Stencil. Framework-agnostic, simple.', url: 'https://d3-stencil.dev' }, - { title: 'Animatable: Animate any HTML Element using Web Animations API in a declarative way! 💅', url: 'https://proyecto26.github.io/animatable-component' }, - { title: 'IonPhaser: A web component to integrate Phaser Framework with Angular, React, Vue, etc 🎮', url: 'https://github.com/proyecto26/ion-phaser' }, - { title: 'Stace Editor: 📖 A web component wrapper for Ace Editor, using Stencil + brace', url: 'https://github.com/jeanbenitez/stace-editor' }, - { title: ' A web component to detect swipe events. Framework-agnostic, simple. ',url:'https://github.com/ranjeetsinghbnl/s-swipe' }, - { title: ' Stencil progress spinner component is a circular indicators of progress and activity. It is inspired from material progress bar indicator. Framework-agnostic, simple. ',url:'https://github.com/ranjeetsinghbnl/smt-spinner' }, - { title: 'Step by step guide of using stencil component in Vue',url:'https://github.com/ranjeetsinghbnl/stenciljs-vue' }, - { title: 'Step by step guide of using stencil component in React',url:'https://github.com/ranjeetsinghbnl/stenciljs-react' }, - { title: 'Step by step guide of using stencil component in Angular',url:'https://github.com/ranjeetsinghbnl/stenciljs-angular' }, - { title: 'Step by step guide of using stencil component in Html',url:'https://github.com/ranjeetsinghbnl/stenciljs-javascript' }, - { title: 'A showcase of product list and cart components in Stencil js to demonstrate Framework-agnostic approach and implement as a Micro frontend.', url:'https://github.com/ranjeetsinghbnl/product-mgmt-stenciljs' }, - { title: 'RevoGrid "excel like" complex virtual grid with amazing performance', url: 'https://github.com/revolist/revogrid' }, - { title: 'Alert Component', url: 'https://github.com/ftonato/stenciljs-components/tree/master/alert-component' }, - { title: 'Badge Component', url: 'https://github.com/ftonato/stenciljs-components/tree/master/badge-component' }, - { title: 'Progress Component', url: 'https://github.com/ftonato/stenciljs-components/tree/master/progress-component' }, - { title: 'A small collection of Awesome Stencil UI components', url: 'https://github.com/dlucidone/awesome-ui' }, - { title: 'Soft Components (Neumorphism design inspired web components)', url: 'https://soft.components.rocks' }, - { title: 'Stedux: Redux for Stencil', url: 'https://github.com/randy-r/stedux' }, - { title: 'Stenimator: Animation coordinator for elements leaving the DOM', url: 'https://github.com/randy-r/stenimator' } - ], - TOOLS: [ - { title: '@stencil/eslint-plugin: ESLint rules for Stencil components', url: 'https://www.npmjs.com/package/@stencil/eslint-plugin' }, - { title: 'How Stencil and Storybook help build fast, accessible web apps with Web Components', url: 'https://www.d4l.io/blog/web-apps-with-stencil-storybook-web-components/' }, - { - title: 'Enhance your Stencil Web Components in Storybook with Knobs, Actions and JSX', - url: 'https://dev.to/ofhouse/enhance-your-stencil-web-components-in-storybook-with-knobs-actions-and-jsx-54m4', - }, - { title: 'xLayers Lite', url: 'https://github.com/xlayers/xlayers-lite' }, - { title: 'yo Stencil: A yeoman generator for Stencil', url: 'https://github.com/AkashGutha/generator-stencil' }, - { title: 'Stencil Snippets: A Stencil snippets package for VS Code', url: 'https://marketplace.visualstudio.com/items?itemName=fdom.stencil-snippets' }, - { title: 'stencil-lerna: lerna based Stencil monorepo starter project', url: 'https://github.com/bitflower/stencil-lerna' }, - { title: 'WebComponents.dev: Online Component IDE - Try Stencil right away', url: 'https://webcomponents.dev/edit/collection/JFDS0nXQUi7cNRMrxHkI/1fjZJBjdBc73coC5F1iz?sv=1&pm=1' }, - { title: '@nxext/stencil: Use stencil projects in Nx', url: 'https://github.com/nxext/nx-extensions/' }, - ], - BLOGS: [ - { title: 'Creating and Integrating Design Systems with StencilJS', url: 'https://medium.com/swlh/creating-and-integrating-design-systems-with-stenciljs-598ecbc33af6' }, - { title: 'Future-Proof Your Design System with StencilJS', url: 'https://blog.bitsrc.io/future-proof-your-design-system-with-stenciljs-b09a48656512' }, - { title: 'Build powerful frameworkless web components', url: 'https://itnext.io/build-powerful-frameworkless-web-components-482bab0706b1' }, - { title: 'Meet Meridian, the 84.51° Design System', url: 'https://medium.com/8451/meet-meridian-the-84-51-design-system-2b8dcbd20bf4' }, - { title: 'Trying on different Design System: React vs. Stencil', url: 'https://medium.com/@jgatjens/trying-on-different-design-system-react-vs-stencil-3f37c1f860b8' }, - { - title: 'How we chose to build our Design System using StencilJS Web Component', - url: 'https://medium.com/8451/how-we-chose-to-build-our-design-system-using-stenciljs-web-components-4878c36743c5', - }, - { title: 'Stencil: I Think I Found My Frontend Home', url: 'https://dev.to/deciduously/stencil-i-think-i-found-my-frontend-home-46bf' }, - { title: 'Storybook + StencilJS + Ionic 4 Angular under one roof?', url: 'https://medium.com/@neza.djukic/storybook-stenciljs-ionic-4-angular-under-one-roof-159cc8dab3a4' }, - { - title: 'Creating a Progressive Web App with StencilJS and Workbox', - url: 'https://julienrenaux.fr/2019/11/25/creating-progressive-web-app-pwa-serviceworker-stenciljs-workbox/', - }, - { title: 'How to Build Reusable Web Components Using Stencil.js', url: 'https://morioh.com/p/f2eefe79f2c9' }, - { title: 'Using RxJS Observables with StencilJS and Ionic', url: 'https://www.joshmorony.com/using-observables-with-stencil-js-and-ionic/' }, - { title: 'Apple Cements the Unlikely Rise of Web Components', url: 'https://hackernoon.com/apple-cements-the-unlikely-rise-of-web-components-6b1d3g1t' }, - { - title: 'Create a Circle Progress Web Component with Conic Gradients in StencilJS', - url: 'https://www.joshmorony.com/create-a-circle-progress-web-component-with-conic-gradients-in-stencil-js/', - }, - { title: 'The Basics of Unit Testing in StencilJS', url: 'https://www.joshmorony.com/the-basics-of-unit-testing-in-stencil-js/' }, - { - title: 'Building a Notepad Application from Scratch with Ionic (StencilJS)', - url: 'https://www.joshmorony.com/building-a-notepad-application-from-scratch-with-ionic-and-stencil-js/', - }, - { - title: 'Understanding JSX for StencilJS Applications', - url: 'https://www.joshmorony.com/understanding-jsx-for-stencil-js-applications/', - }, - { - title: 'Publishing and Integrating a StencilJS Web Component in React', - url: 'https://medium.com/stencil-tricks/publishing-and-integrating-a-stenciljs-reusable-web-component-in-react-66f852582f6b', - }, - { title: 'Creating a Reusable Web Component with StencilJS', url: 'https://medium.com/stencil-tricks/creating-reusable-a-reusable-web-component-with-stenciljs-b2842af54c51' }, - { title: 'Build Components Not Walls', url: 'https://jagreehal.github.io/build-components-not-walls-slides/index.html#/' }, - { title: 'Basic and Advanced Tab Navigation with Ionic & StencilJS', url: 'https://www.joshmorony.com/basic-and-advanced-tab-navigation-with-ionic-and-stencil-js/' }, - { - title: 'Routing with ion-router, ion-tabs, and how to pass params to tab pages', - url: 'https://dev.to/cm/stencil-routing-with-ion-router-ion-tabs-and-how-to-pass-params-to-tab-pages-without-using-angular-4lfl', - }, - { title: 'Should Ionic & Angular Developers Learn StencilJS', url: 'https://www.joshmorony.com/should-ionic-angular-developers-learn-stencil-js/' }, - { title: 'An Introduction into Stencil.js', url: 'https://gabrieltanner.org/blog/stencil-js-introduction' }, - { title: 'Using your StencilJS Design System in Framer X', url: 'https://medium.com/stencil-tricks/using-your-stenciljs-design-system-in-framer-x-2e7479fd22c4' }, - { title: 'Using a Stencil-built component in Angular', url: 'https://github.com/ospatil/ng-components-integration' }, - { title: 'Create your First Stencil Component', url: 'https://coryrylan.com/blog/create-your-first-web-component-with-stencil-js' }, - { title: "Stencil.js: It's finally time for vanilla web components!", url: 'https://medium.com/@sinedied/stencil-js-its-finally-time-for-vanilla-web-components-927d26b573e1' }, - { title: 'Stencil with MobX', url: 'https://github.com/aaronksaunders/stencil-mobx' }, - { title: 'Webkomponenten mit Stencil – Ein erster Überblick (in German)', url: 'https://www.datacodedesign.de/webkomponenten-mit-stencil-ein-erster-ueberblick/' }, - { title: 'Stencil’e Giriş (in Turkish)', url: 'https://medium.com/t%C3%BCrkiye/stencile-giri%C5%9F-41e90e37595d' }, - { title: 'Stencil’de Bileşenler Arası Haberleşme (in Turkish)', url: 'https://medium.com/t%C3%BCrkiye/stencilde-bilesenler-arasi-haberlesme-52523a470fa9' }, - { title: 'Stencil Bileşen Yaşam Döngüsü (in Turkish)', url: 'https://medium.com/@selcukkutuk/bilesen-yasam-dongusu-c53dc42c2384' }, - { title: 'Stencil Tricks - A collection of community-written articles on how to do awesome things in Stencil JS', url: 'https://medium.com/stencil-tricks' }, - { title: 'Stencil Testing Cheatsheet - A collection of useful code snippets and examples for writing End to End tests in a Stencil project.', url: 'https://paulcpederson.com/articles/stencil-tests/' }, - ], - VIDEOS: [ - { title: 'Stencil: a built-time approach to the web by Manu Martinez-Almeida | JSConf EU 2019', url: 'https://www.youtube.com/watch?v=M1F81V-NhP0' }, - { title: 'Architecting A Component Compiler', url: 'https://www.youtube.com/watch?v=RZ6MLELGsD8&feature=youtu.be' }, - { title: 'How to create a web component in StencilJS - VERY SMALL BUNDLE SIZE!', url: 'https://www.youtube.com/watch?v=6-xjz1xn1fI' }, - { title: 'Getting Started with Ionic + Stencil (Creating Ionic Applications with StencilJS)', url: 'https://www.youtube.com/watch?v=_nY6ahqlc98' }, - { title: 'A Review of Stencil Web Components', url: 'https://www.youtube.com/watch?v=_aQvoS7AyTg' }, - { title: 'StencilJS fundamentals', url: 'https://www.youtube.com/watch?v=SCB3X2ApYWc' }, - { title: 'Introduction to Stencil: Styling Components using SASS, LESS, Shadow DOM & CSS Variables', url: 'https://www.youtube.com/watch?v=pTK_JIfLD64' }, - { title: 'Stencil - Getting Started (video)', url: 'https://www.youtube.com/watch?v=MqMYaT1GlWY' }, - { title: 'Building StencilJS with TypeScript', url: 'https://www.youtube.com/watch?v=LBv07i-Wim8' }, - { title: 'Announcing Stencil.js', url: 'https://www.youtube.com/watch?v=UfD-k7aHkQE' }, - ], - DEMOS: [ - { - title: 'Stenciljs.com', - description: 'Yep, this site is also built with Stencil!', - imgPath: '/assets/img/demos/demo-stenciljs', - demoUrl: '/', - sourceUrl: 'https://github.com/ionic-team/stencil-site', - }, - { - title: 'IonicHN', - description: 'Hacker News PWA built with @stencil/core and @ionic/core', - imgPath: '/assets/img/demos/demo-ionichn', - demoUrl: 'https://corehacker-10883.firebaseapp.com/', - sourceUrl: 'https://github.com/ionic-team/ionic-stencil-hn-app', - }, - { - title: 'Stencil Fiber demo', - description: 'This showcases the runtime performance of stencil using our async rendering', - imgPath: '/assets/img/demos/demo-fiber', - demoUrl: 'https://stencil-fiber-demo.firebaseapp.com/', - sourceUrl: 'https://github.com/ionic-team/stencil-fiber-demo', - }, - { - title: 'IonicBeer', - description: 'Beer PWA built with @stencil/core and @ionic/core', - imgPath: '/assets/img/demos/demo-ionicbeer', - demoUrl: 'https://stencilbeer.firebaseapp.com/', - sourceUrl: 'https://github.com/jgw96/stencil-beer', - }, - { - title: 'InstaMusic', - description: 'A full featured music player built with @stencil/core and @ionic/core', - imgPath: '/assets/img/demos/demo-instamusic', - demoUrl: 'https://instamusic-c15fe.firebaseapp.com/', - sourceUrl: 'https://github.com/jgw96/instamusic', - }, - { - title: 'RevoGrid', - description: 'Excel like complex virtual grid with amazing performance with @stencil/core, @stencil/store', - imgPath: '/assets/img/demos/demo-revogrid', - demoUrl: 'https://revolist.github.io/revogrid', - sourceUrl: 'https://github.com/revolist/revogrid', - }, - { - title: 'Stedux', - description: 'Example website for using the Stedux library', - imgPath: '/assets/img/demos/demo-stedux', - demoUrl: 'https://randy-r.github.io/stedux', - sourceUrl: 'https://github.com/randy-r/stedux', - }, - { - title: 'Stenimator', - description: 'Example website for using the Stenimator library', - imgPath: '/assets/img/demos/demo-stenimator', - demoUrl: 'https://randy-r.github.io/stenimator', - sourceUrl: 'https://github.com/randy-r/stenimator', - } - ], -};