├── .editorconfig ├── .eslintrc.json ├── .gitignore ├── .husky └── pre-commit ├── .prettierrc.json ├── CHANGELOG.md ├── LICENSE ├── README.md ├── package.json ├── pnpm-lock.yaml ├── rollup.config.mjs ├── src ├── components │ ├── airtable │ │ ├── airtable-base.tsx │ │ ├── airtable-form.tsx │ │ └── index.ts │ ├── buzzsprout │ │ ├── buzzsprout.tsx │ │ └── index.ts │ ├── cinnamon │ │ ├── cinnamon.tsx │ │ └── index.ts │ ├── codepen │ │ ├── codepen.tsx │ │ └── index.ts │ ├── codesandbox │ │ ├── codesandbox.tsx │ │ └── index.ts │ ├── egghead │ │ ├── egghead-leson.tsx │ │ └── index.ts │ ├── figma │ │ ├── figma.tsx │ │ └── index.ts │ ├── flickr │ │ ├── flickr.tsx │ │ ├── index.ts │ │ └── utilities.ts │ ├── general-observer │ │ ├── general-observer.tsx │ │ └── index.ts │ ├── gist │ │ ├── gist.tsx │ │ └── index.ts │ ├── instagram │ │ ├── index.ts │ │ ├── instagram.tsx │ │ └── utilities.ts │ ├── lbry │ │ ├── index.ts │ │ └── lbry.tsx │ ├── linkedin │ │ ├── index.ts │ │ ├── linkedin-badge.tsx │ │ └── utilities.ts │ ├── listennotes │ │ ├── index.tsx │ │ └── listennotes-episode.tsx │ ├── pinterest │ │ ├── index.ts │ │ ├── pin.tsx │ │ ├── pinterest-board.tsx │ │ ├── pinterest-follow-button.tsx │ │ └── utilities.ts │ ├── simplecast │ │ ├── index.ts │ │ └── simplecast-episode.tsx │ ├── snack │ │ ├── index.ts │ │ └── snack.tsx │ ├── soundcloud │ │ ├── index.ts │ │ └── soundcloud.tsx │ ├── spotify │ │ ├── index.ts │ │ └── spotify.tsx │ ├── strava │ │ ├── index.ts │ │ └── strava.tsx │ ├── tiktok │ │ ├── index.ts │ │ ├── tiktok.tsx │ │ └── utilities.ts │ ├── twitch │ │ ├── index.ts │ │ ├── twitch.tsx │ │ └── utilities.ts │ ├── twitter │ │ ├── index.ts │ │ ├── tweet.tsx │ │ ├── twitter-follow-button.tsx │ │ ├── twitter-hashtag-button.tsx │ │ ├── twitter-list.tsx │ │ ├── twitter-mention-button.tsx │ │ ├── twitter-timeline.tsx │ │ └── utilities.ts │ ├── vimeo │ │ ├── index.tsx │ │ └── vimeo.tsx │ ├── whimsical │ │ ├── index.ts │ │ ├── utilities.ts │ │ └── whimsical.tsx │ ├── wikipedia │ │ ├── index.ts │ │ └── wikipedia.tsx │ ├── wistia │ │ ├── index.ts │ │ ├── utilities.ts │ │ └── wistia.tsx │ └── youtube │ │ ├── index.ts │ │ └── youtube.tsx ├── index.ts ├── utilities │ └── index.ts └── window.d.ts └── tsconfig.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | # All files should use 5 | # - tabs unless specified otherwise 6 | # - unix-style newlines with a newline ending every file 7 | [*] 8 | indent_style = space 9 | indent_size = 2 10 | end_of_line = lf 11 | charset = utf-8 12 | trim_trailing_whitespace = true 13 | insert_final_newline = true 14 | 15 | [*.md] 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "ignorePatterns": ["node_modules", "dist", "!**/.*"], 4 | "overrides": [ 5 | { 6 | "files": ["*.mjs"], 7 | "env": { 8 | "browser": true 9 | }, 10 | "extends": ["eslint:recommended", "plugin:prettier/recommended"], 11 | "parserOptions": { 12 | "ecmaVersion": "latest", 13 | "sourceType": "module" 14 | } 15 | }, 16 | { 17 | "files": ["*.ts", "*.tsx"], 18 | "extends": [ 19 | "eslint:recommended", 20 | "plugin:@typescript-eslint/recommended", 21 | "plugin:@typescript-eslint/recommended-requiring-type-checking", 22 | "plugin:@typescript-eslint/strict", 23 | "plugin:solid/recommended", 24 | "plugin:jsx-a11y/recommended", 25 | "plugin:import/errors", 26 | "plugin:import/warnings", 27 | "plugin:import/typescript", 28 | "plugin:prettier/recommended" 29 | ], 30 | "rules": { 31 | "@typescript-eslint/consistent-type-definitions": ["warn", "type"] 32 | }, 33 | "parserOptions": { 34 | "project": "tsconfig.json", 35 | "sourceType": "module", 36 | "ecmaVersion": "latest", 37 | "ecmaFeatures": { 38 | "jsx": true 39 | } 40 | }, 41 | "settings": { 42 | "import/resolver": { 43 | "typescript": {} 44 | } 45 | }, 46 | "env": { 47 | "browser": true 48 | } 49 | }, 50 | { 51 | "files": ["*.json"], 52 | "excludedFiles": [".eslintrc.json"], 53 | "extends": [ 54 | "plugin:jsonc/recommended-with-json", 55 | "plugin:jsonc/prettier", 56 | "plugin:prettier/recommended" 57 | ] 58 | }, 59 | { 60 | // jsonc 61 | "files": [".eslintrc.json"], 62 | "extends": [ 63 | "plugin:jsonc/recommended-with-jsonc", 64 | "plugin:jsonc/prettier", 65 | "plugin:prettier/recommended" 66 | ] 67 | } 68 | ] 69 | } 70 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | 106 | .vscode 107 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | pnpm lint-staged 5 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 100, 3 | "singleQuote": true 4 | } 5 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ### [0.5.0] 4 | 5 | - add ListenNotesEpisode for podcasts 6 | - code cleanup 7 | - fixed Twitter component hot reload 8 | 9 | ### [0.4.0] 10 | 11 | - ported rest of the components, AirTable, Buzzsprout, Cinnamon, Figma, Flickr, Lbry, LinkedIn, 12 | Pintereset, Simplecast, Snack, Soundcloud, Spotify, Strava, TikTok, Twitch, Vimeo, Whimsical, 13 | Wikipedia and Vistia 14 | 15 | - data-testid is now added only during the test which will be implemented once Vitest recipe is 16 | ready 17 | 18 | - cleanup for classes and titles 19 | 20 | ### [0.3.0] 21 | 22 | - uses @solid-primitives/script-loader for script loading, added Gist and EggheadLesson components 23 | 24 | ### [0.2.0] 25 | 26 | - initial release, CodePen, CodeSandbox, Instagram, Twitter and YouTube ported 27 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 [these people](https://github.com/kenoxa/svelte-jsx/graphs/contributors) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # solid-social 2 | 3 | ## What? 4 | 5 | Social components for [solid-js](https://www.solidjs.com/). These components are a port of [MDX Embed](https://www.mdx-embed.com/), 6 | but can be used in other contexts, hence solid-social. 7 | 8 | ## Installation 9 | 10 | ```sh 11 | pnpm install --save-dev solid-social 12 | ``` 13 | 14 | ## Usage 15 | 16 | > Import what you need and use it. The API is practically the same as MDX Embed one. 17 | 18 | ```js 19 | import { YouTube } from 'solid-social'; 20 | 21 | ; 22 | ``` 23 | 24 | ## Support 25 | 26 | This project is free and open-source, so if you think this project can help you or 27 | anyone else, you may [star it on GitHub](https://github.com/high1/solid-social). Feel 28 | free to [open an issue](https://github.com/high1/solid-social/issues) if you have any 29 | ideas, questions, or if you've found a bug. 30 | 31 | ## Contribute 32 | 33 | Thanks for being willing to contribute! 34 | 35 | **Working on your first Pull Request?** You can learn how from this _free_ series 36 | [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github) 37 | 38 | ### Develop 39 | 40 | - `pnpm build`: Generate bundles 41 | - `pnpm lint`: Lints code 42 | 43 | ## License 44 | 45 | `solid-social` is open source software [licensed as MIT](https://github.com/high1/solid-social/blob/main/LICENSE). 46 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "solid-social", 3 | "version": "0.9.6", 4 | "description": "", 5 | "type": "module", 6 | "source": "./src/index.ts", 7 | "main": "dist/esm/index.module.js", 8 | "types": "dist/types/index.d.ts", 9 | "exports": { 10 | ".": { 11 | "solid": "./dist/source/index.js", 12 | "default": "./dist/esm/index.js" 13 | } 14 | }, 15 | "files": [ 16 | "dist" 17 | ], 18 | "scripts": { 19 | "build": "rollup -c", 20 | "lint": "eslint .", 21 | "prepare": "husky install", 22 | "prepublishOnly": "pnpm build" 23 | }, 24 | "repository": { 25 | "type": "git", 26 | "url": "git+https://github.com/high1/solid-social.git" 27 | }, 28 | "keywords": [ 29 | "solid", 30 | "social" 31 | ], 32 | "author": "high1 ", 33 | "license": "MIT", 34 | "bugs": { 35 | "url": "https://github.com/high1/solid-social/issues" 36 | }, 37 | "homepage": "https://github.com/high1/solid-social#readme", 38 | "devDependencies": { 39 | "@typescript-eslint/eslint-plugin": "^5.48.0", 40 | "@typescript-eslint/parser": "^5.48.0", 41 | "eslint": "^8.31.0", 42 | "eslint-config-prettier": "^8.6.0", 43 | "eslint-import-resolver-typescript": "^3.5.2", 44 | "eslint-plugin-import": "^2.26.0", 45 | "eslint-plugin-jsonc": "^2.6.0", 46 | "eslint-plugin-jsx-a11y": "^6.6.1", 47 | "eslint-plugin-prettier": "^4.2.1", 48 | "eslint-plugin-solid": "^0.9.1", 49 | "husky": "^8.0.3", 50 | "lint-staged": "^13.1.0", 51 | "prettier": "^2.8.2", 52 | "rollup": "^3.9.1", 53 | "rollup-preset-solid": "^2.0.1", 54 | "solid-js": "^1.6.8", 55 | "typescript": "^4.9.4" 56 | }, 57 | "dependencies": { 58 | "@solid-primitives/intersection-observer": "^2.0.3", 59 | "@solid-primitives/script-loader": "^1.1.2" 60 | }, 61 | "peerDependencies": { 62 | "solid-js": "^1.3.0" 63 | }, 64 | "lint-staged": { 65 | "*.{ts,tsx}": "eslint --fix", 66 | "*.{js,css,json,md,jsx,yml,yaml}": "prettier --ignore-path .gitignore --write" 67 | }, 68 | "packageManager": "pnpm@7.17.1" 69 | } 70 | -------------------------------------------------------------------------------- /rollup.config.mjs: -------------------------------------------------------------------------------- 1 | import withSolid from 'rollup-preset-solid'; 2 | 3 | export default withSolid(); 4 | -------------------------------------------------------------------------------- /src/components/airtable/airtable-base.tsx: -------------------------------------------------------------------------------- 1 | import { mergeProps } from 'solid-js'; 2 | import { GeneralObserver } from '../general-observer'; 3 | import type { Component } from 'solid-js'; 4 | 5 | export type AirtableBaseProps = { 6 | /** Airtable Base ID */ 7 | airtableBaseId: string; 8 | /** Layout type */ 9 | layout?: 'card' | ''; 10 | /** View Controls */ 11 | viewControls?: 'on' | 'off'; 12 | }; 13 | 14 | export const AirtableBase: Component = (props) => { 15 | const props_ = mergeProps( 16 | { 17 | layout: '', 18 | viewControls: 'on', 19 | }, 20 | props 21 | ); 22 | return ( 23 | 24 |
25 |