{"id":20775501,"url":"https://github.com/david-fernando/medium-posts-card","last_synced_at":"2025-08-04T16:43:05.923Z","repository":{"id":37339276,"uuid":"502459845","full_name":"david-fernando/medium-posts-card","owner":"david-fernando","description":"React Isomorphic library that show your Medium articles.","archived":false,"fork":false,"pushed_at":"2023-11-11T04:27:02.000Z","size":2935,"stargazers_count":14,"open_issues_count":2,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-07-07T01:07:53.739Z","etag":null,"topics":["card","carousel","carousel-component","isomorphic","isomorphic-rendering","javascript","javascript-library","library","medium","react","react-components","react-library","reactjs","server-side","server-side-rendering","ssr"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/mediumpostscard","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/david-fernando.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-06-11T21:28:54.000Z","updated_at":"2024-05-18T11:14:59.000Z","dependencies_parsed_at":"2024-11-15T05:46:25.968Z","dependency_job_id":null,"html_url":"https://github.com/david-fernando/medium-posts-card","commit_stats":{"total_commits":397,"total_committers":3,"mean_commits":"132.33333333333334","dds":0.02267002518891692,"last_synced_commit":"1d35a421f005737294117183b65aae8fb06350b9"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/david-fernando/medium-posts-card","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/david-fernando%2Fmedium-posts-card","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/david-fernando%2Fmedium-posts-card/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/david-fernando%2Fmedium-posts-card/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/david-fernando%2Fmedium-posts-card/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/david-fernando","download_url":"https://codeload.github.com/david-fernando/medium-posts-card/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/david-fernando%2Fmedium-posts-card/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268723504,"owners_count":24296623,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-04T02:00:09.867Z","response_time":79,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["card","carousel","carousel-component","isomorphic","isomorphic-rendering","javascript","javascript-library","library","medium","react","react-components","react-library","reactjs","server-side","server-side-rendering","ssr"],"created_at":"2024-11-17T12:36:53.791Z","updated_at":"2025-08-04T16:43:05.893Z","avatar_url":"https://github.com/david-fernando.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"\" rel=\"noopener\"\u003e\n \u003cimg width=200px height=128px src=\"https://images2.imgbox.com/aa/22/t57NWwys_o.jpg\" alt=\"Medium Posts Card\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch3 align=\"center\"\u003eMedium Posts Card\u003c/h3\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cp align=\"center\"\u003eReact Isomorphic library that show your Medium articles.\n    \u003cbr\u003e \n  \u003c/p\u003e\n\n [![CSR](https://img.shields.io/badge/Client%20Side%20Rendering-Supported-green)]() [![SSR](https://img.shields.io/badge/Server%20Side%20Rendering-Supported-green)]() [![Licence](https://img.shields.io/github/license/david-fernando/medium-posts-card)]() \n\u003c/div\u003e\n\n---\n\n## 📝 Table of Contents\n\n- [About](#about)\n- [Install](#install)\n- [Components](#components)\n- [Server Side Rendering](#server_side_rendering)\n- [How to contribute](#how_to_contribute)\n- [More](#more)\n- [Author](#authors)\n\n## \u003cspan id=\"about\"\u003eAbout \u003c/span\u003e\n\nAre you looking for a React library to display your medium posts that render both the client side and on the server side? So you are in the right place! **Medium Posts Card** get your medium articles, and displays them on your website through an easy to  use component. \nJust download and use, as simple as that.\n\n## \u003cspan id=\"install\"\u003eInstall\u003c/span\u003e\n\nInstall this library with one of the commands below\n\n```bash\nyarn add mediumpostscard\n\n//or\n\nnpm install mediumpostscard\n```\n\n## \u003cspan id=\"components\"\u003eComponents\u003c/span\u003e\n\n### Carousel\n\n- \u003ch4\u003eDescribe\u003c/h4\u003e\n  Shows a Carousel with your Medium articles\n\n- \u003ch4\u003eScreenshot\u003c/h4\u003e\n  \u003cimg height=\"170\" src=\"https://i.imgur.com/FmVwAJ5.png\" alt=\"Medium Posts Card Carousel Preview\"\u003e\u003c/a\u003e\n\n- \u003ch4\u003eBasic usage (with example)\u003c/h4\u003e\n\n```javascript\nimport { Carousel } from 'mediumpostscard'\n\nfunction Example(){\n  return (\n    \u003cCarousel username=\"alex.streza\" /\u003e\n  )\n}\n\nexport default Example\n```\n\n- \u003ch4\u003eValid Props\u003c/h4\u003e\n\n| Prop name  |                   Description                     |         Type |      Default |\n| ---------- | :-----------------------------------------------: | -----------: | ------------:|\n| usernane   |               Sets your Medium username           |     _String_ |  _underfined_\n| dataMedium | Set data Medium (_only_ to Server Side Rendering) |     _Object_ |  _underfined_\n| options    |               Object with options                 |     _Object_ |      _Object_|\n\n- \u003ch4\u003eValid Options\u003c/h4\u003e\n\n| Option       |                   Description                      |         Type |      Default |\n| -------------| :------------------------------------------------: | -----------: | ------------:|\n| borderRadius |       Set if the card will have rounded edges      |    _Boolean_ |         true \n| openInNewTab | Set if the link of article will openned in new tab |    _Boolean_ |         true \n| showTags     |       Define if the card will show article tags    |    _Boolean_ |         false\n| showDate     | Set if the card will show the date of the article  |    _Boolean_ |         false\n| ssr          |   Set if the component should rendered on server   |    _Boolean_ |         false|\n\n### List\n\n- \u003ch4\u003eDescribe\u003c/h4\u003e\n  Shows a list with your Medium articles\n\n- \u003ch4\u003eScreenshot\u003c/h4\u003e\n  \u003cimg width=\"780\" height=\"500\" src=\"https://i.imgur.com/J11pgwP.png\" alt=\"Medium Posts Card List Preview\"\u003e\u003c/a\u003e\n\n- \u003ch4\u003eBasic usage (with example)\u003c/h4\u003e\n\n```javascript\nimport { List } from 'mediumpostscard'\n\nfunction Example(){\n  return (\n    \u003cList username=\"alex.streza\" /\u003e\n  )\n}\n\nexport default Example\n```\n\n- \u003ch4\u003eValid Props\u003c/h4\u003e\n\n| Prop name  |                   Description                     |         Type |      Default |\n| ---------- | :-----------------------------------------------: | -----------: | ------------:|\n| usernane   |               Sets your Medium username           |     _String_ |  _underfined_\n| dataMedium | Set data Medium (_only_ to Server Side Rendering) |     _Object_ |  _underfined_\n| options    |               Object with options                 |     _Object_ |      _Object_|\n\n- \u003ch4\u003eValid Options\u003c/h4\u003e\n\n| Option       |                   Description                      |         Type |      Default |\n| -------------| :------------------------------------------------: | -----------: | ------------:|\n| openInNewTab | Set if the link of article will openned in new tab |    _Boolean_ |         true \n| showTags     |       Define if the card will show article tags    |    _Boolean_ |         true\n| showDate     | Set if the card will show the date of the article  |    _Boolean_ |         true\n| borderRadius |       Set if the card will have rounded edges      |    _Boolean_ |         false \n| ssr          |   Set if the component should rendered on server   |    _Boolean_ |         false|\n\n\n### Label\n\n- \u003ch4\u003eDescribe\u003c/h4\u003e\n  Wrapper component that add label on other components\n\n- \u003ch4\u003eScreenshot\u003c/h4\u003e\n  \u003cimg height=\"170\" src=\"https://i.imgur.com/rBX3ttU.png\" alt=\"Medium Posts Card Carousel with label\"\u003e\u003c/a\u003e\n\n- \u003ch4\u003eExample with carousel\u003c/h4\u003e\n\n```javascript\nimport { Carousel, Label } from 'mediumpostscard'\n\nfunction Example(){\n  return (\n    \u003cLabel\u003e\n      \u003cCarousel username=\"alex.streza\" /\u003e\n    \u003c/Label\u003e\n  )\n}\n\nexport default Example\n```\n\n- \u003ch4\u003eExample with List\u003c/h4\u003e\n\n```javascript\nimport { List, Label } from 'mediumpostscard'\n\nfunction Example(){\n  return (\n    \u003cLabel\u003e\n      \u003cList username=\"alex.streza\" /\u003e\n    \u003c/Label\u003e\n  )\n}\n\nexport default Example\n```\n- \u003ch4\u003eValid Props\u003c/h4\u003e\n\n| Prop name  |            Description             |     Type    |          Default |\n| ---------- |:----------------------------------:| ----------: | ----------------:|\n| text       |          Set text on label         | _String_    | 'Medium Articles'\n| children   |      Set component to be labeled   | JSX.Element |  No default\n\n## \u003cspan id=\"server_side_rendering\"\u003eServer Side Rendering\u003c/span\u003e\n\n - \u003ch4\u003eUsage\u003c/h4\u003e\n To make the component render the server do the prefetching:\n```javascript\nconst dataMedium = fetchMedium('yourmediumusername')\n```\nNext define _ssr_ as true, according to the example\n```javascript\n\u003cCarousel dataMedium={dataMedium} options={{ssr: true}} /\u003e\n```\nIn the example above, I used the Carousel component, but you do the same with the List component.\n\nNext I will show an example of how to make server side on Next.js\n\n```javascript\nimport Head from 'next/head'\nimport { List, fetchMedium } from 'mediumpostscard'\n\nexport default function Home({dataMedium}) {\n  return (\n    \u003cdiv\u003e\n      \u003cHead\u003e\n        \u003ctitle\u003eCreate Next App\u003c/title\u003e\n        \u003cmeta name=\"description\" content=\"Generated by create next app\" /\u003e\n        \u003clink rel=\"icon\" href=\"/favicon.ico\" /\u003e\n      \u003c/Head\u003e\n\n      \u003cList dataMedium={dataMedium} options={{ssr: true}} /\u003e\n\n    \u003c/div\u003e\n  )\n}\n\nexport async function getStaticProps() {\n  const dataMedium = await fetchMedium('alex.streza')\n  return {\n    props: {\n      dataMedium\n    }\n  }\n}\n\n```\n\n\n## \u003cspan id=\"how_to_contribute\"\u003eHow to contribute\u003c/span\u003e\n\n Fork this repository, make clone for your machine.\n\n Install the dependencies with the command below:\n\n ```bash\n yarn install\n ```\n\nTo view on storybook\n\n```bash\nyarn storybook\n```\n\nTo build\n\n```bash\nyarn build\n```\nTo run the tests.\n\n```bash\nyarn test\n```\n\n## \u003cspan id=\"more\"\u003eMore\u003c/span\u003e\n\nDidn't you like any of the components? No problem! You can use \u003ca href=\"https://github.com/david-fernando/medium-posts-api\"\u003eMedium Posts API\u003c/a\u003e to build your own react component.\nMoreover you too can contribute with code. Feel free to add new features to our library. We are open-source.\n\n## ✍️ \u003cspan id=\"authors\"\u003eAuthor\u003c/span\u003e\n\n- [@david-fernando](https://github.com/david-fernando) - Idea \u0026 Initial work","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavid-fernando%2Fmedium-posts-card","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavid-fernando%2Fmedium-posts-card","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavid-fernando%2Fmedium-posts-card/lists"}