diff --git a/package-lock.json b/package-lock.json index 16025a4..0836499 100644 --- a/package-lock.json +++ b/package-lock.json @@ -31338,9 +31338,9 @@ } }, "node_modules/profile-components": { - "version": "0.2.1", - "resolved": "https://registry.npmjs.org/profile-components/-/profile-components-0.2.1.tgz", - "integrity": "sha512-B2PEwBGpuA+d1X4OChIvdObX7mVO+35zDpNwypovO0vPXqqMy46bTx1EBdfB2TWZPJuAQQ3EGXfx2fzqfWSEsA==" + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/profile-components/-/profile-components-0.2.3.tgz", + "integrity": "sha512-dXYLINUtT7JTs7djIrsi9drlIVHva+53/C3iWT2qZa47LdSF8tVPY2Gytp1eMiz3MVCfbQ0hN2cio69TfqV5VQ==" }, "node_modules/progress": { "version": "2.0.3", @@ -37335,7 +37335,7 @@ "astro": "^3.2.3", "lit": "^2.8.0", "marked": "^9.1.0", - "profile-components": "^0.2.1", + "profile-components": "^0.2.3", "react": "^18.2.0", "react-dom": "^18.2.0", "typescript": "^5.2.2" diff --git a/workspaces/website/package.json b/workspaces/website/package.json index 6589c82..dce34e1 100644 --- a/workspaces/website/package.json +++ b/workspaces/website/package.json @@ -26,7 +26,7 @@ "astro": "^3.2.3", "lit": "^2.8.0", "marked": "^9.1.0", - "profile-components": "^0.2.1", + "profile-components": "^0.2.3", "react": "^18.2.0", "react-dom": "^18.2.0", "typescript": "^5.2.2" diff --git a/workspaces/website/public/profile-components-blahg/devto-post-300px.png b/workspaces/website/public/profile-components-blahg/devto-post-300px.png new file mode 100644 index 0000000..01a863c Binary files /dev/null and b/workspaces/website/public/profile-components-blahg/devto-post-300px.png differ diff --git a/workspaces/website/public/profile-components-blahg/devto-post-400px.png b/workspaces/website/public/profile-components-blahg/devto-post-400px.png new file mode 100644 index 0000000..bb4c446 Binary files /dev/null and b/workspaces/website/public/profile-components-blahg/devto-post-400px.png differ diff --git a/workspaces/website/public/profile-components-blahg/devto-user-300px-light.png b/workspaces/website/public/profile-components-blahg/devto-user-300px-light.png new file mode 100644 index 0000000..a692927 Binary files /dev/null and b/workspaces/website/public/profile-components-blahg/devto-user-300px-light.png differ diff --git a/workspaces/website/public/profile-components-blahg/devto-user-400px-dark.png b/workspaces/website/public/profile-components-blahg/devto-user-400px-dark.png new file mode 100644 index 0000000..5c4d0a6 Binary files /dev/null and b/workspaces/website/public/profile-components-blahg/devto-user-400px-dark.png differ diff --git a/workspaces/website/public/profile-components-blahg/profile-components-devto-header.jpeg b/workspaces/website/public/profile-components-blahg/profile-components-devto-header.jpeg new file mode 100644 index 0000000..ecaea5e Binary files /dev/null and b/workspaces/website/public/profile-components-blahg/profile-components-devto-header.jpeg differ diff --git a/workspaces/website/src/content/blahg/__profile-components--devto.md b/workspaces/website/src/content/blahg/__profile-components--devto.md deleted file mode 100644 index e69de29..0000000 diff --git a/workspaces/website/src/content/blahg/profile-components--devto.md b/workspaces/website/src/content/blahg/profile-components--devto.md new file mode 100644 index 0000000..f9b4db9 --- /dev/null +++ b/workspaces/website/src/content/blahg/profile-components--devto.md @@ -0,0 +1,181 @@ +--- +title: "DEV Profile Web Components: embed your dev.to profile anywhere" +description: "Learn about native web components that showcase DEV profiles and posts." +pubDate: "2023-10-18" +heroImage: "/profile-components-blahg/profile-components-devto-header.jpeg" +series: Profile-Components +--- + +Learn about native web components that showcase DEV profiles and posts. + +dev.to profile native web components, which show a user and their posts, are included in the [profile-components library][profile-components-dev-article]. These native web components can be utilized on any HTML page, framework-based site, or wherever you can use HTML. You can access them via unpkg.com or include the NPM module in your project. + +## tl;dr + +### install via NPM: + + npm i profile-components + +### use via unpkg.com: + +```html + + + + + +``` + +### Quick links + +* Check out the [dev.to web components in Storybook][pc-storybook-dev] to see the full breadth of visual and content differences +* [profile-components on NPM](https://www.npmjs.com/package/profile-components) +* [profile-components on GitHub](https://github.com/scottnath/profile-components) +* [See demos on stackblitz](https://stackblitz.com/edit/profile-components) + +--- + +Table of contents +* [What are the dev.to profile components?](#what) +* [How to use the dev.to profile components](#how) +* [Server Side Rendering (Astro example)](#ssr) +* [Where do the styles come from?](#styles) + +## What are the dev.to profile components? + +* Cross-browser, pure native web components +* Zero dependencies +* Fetch profile and post data from the dev.to API +* No api key required +* Present dev.to content as a profile widget +* Styled using dev.to's CSS style variables from Forem +* Released in the [profile-components library][profile-components-dev-article] + +### Includes two components: user and post + +There are two components for presenting content from the dev.to site. One is a simple UI to present a single post, showing only an image and the post title and linking to the post. The other, `devto-user`, is the full profile component, which incorporates the `devto-post` UI to present user-written posts. + +#### dev.to post + +The `devto-post` web component displays details about a dev.to post. **It is very basic**, but can be styled via themes and adjusts spacing via container-queries. + + + + + +
dev.to post web component
dev.to post web component (400px)
dev.to post web component
dev.to post web component (300px)
+ +#### dev.to user + +The `devto-user` web component displays details about a DEV user. Using `fetch` to populate the content will include a set of posts (if the user has posts). On fetch, you can choose to not include posts by changing `fetch="true"` to `fetch="no-posts"`. + + + + + +
dev.to user web component
dev.to user without posts
dev.to user
dev.to user (400px)
+ +## How to use the dev.to user profile component + +These components can be used on any HTML page - whether built via framework or just plain HTML. They are available via unpkg.com or you can add the NPM module to your project. + +### Using the unpkg distribution for a User + +#### Add the script tag to your HTML page's HEAD: + +```html + + +``` + + + +#### Add the component to your HTML page's BODY: + +```html + + +``` + + + + +#### Show Fetched profile _without posts_ + +```html + + +``` + + + + +#### Write your own content instead of fetching from dev.to: + +```html + +``` + + + + +## Server Side Rendering (Astro example) + +Because these components were built with separate HTML, CSS, and JS files, you can use those pieces to generate HTML on the server. This example is what I did to make an [Astro component for scottnath.com](https://github.com/scottnath/scottnath.com/blob/main/workspaces/website/src/components/DevToUser.astro). + +```js +// DevToUser.astro +--- +import devto from 'profile-components/devto-utils'; +const user = devto.user; + +const repos = JSON.stringify(['scottnath/profile-components', 'storydocker/storydocker']); +const userContent = await user.generateContent({ + login: 'scottnath', + // a local profile image helps performance + avatar_url: '/scott-nath-profile-pic.jpeg', + repos +},true); +let userHTML = ''; +userHTML += user.html(userContent); +--- + + + + +``` + + +## Where do the styles come from? + +The best way to have the look n feel of an external site is to integrate their design language as much as possible. The DEV web components use the same source for styles as dev.to itself, the Forem open source community software. More specifically, from the [Forem open source repo on GitHub](https://github.com/forem/forem). + +### Forem Open source community software + +https://github.com/forem/forem + +This is a large codebase, which includes a lot of Ruby files. The styles are in both CSS and Sass files and can be found in the [/app/assets/stylesheets subdirectory.](https://github.com/forem/forem/blob/main/app/assets/stylesheets). + +Dev, by way of Forem, essentially has four themes: Forem base styles, Dev `branded` styles, and light and dark versions of each. For now, these dev.to web components only compensate for dev.to `branded` colors. I wrote some scripts to copy-pasta specific variables from a few stylesheets which can be found in these [docs for the dev.to web component helpers](https://github.com/scottnath/profile-components/tree/main/src/devto/helpers) + + +[profile-components-dev-article]: https://dev.to/scottnath/profile-components-display-social-profiles-in-native-web-components-49b2 +[pc-storybook-dev]: https://scottnath.com/profile-components/?path=/story/devto-devto-user--user \ No newline at end of file