DEV Community: Stefano Bartoletti

Nuxt Social Share has a new home!

Stefano Bartoletti — Tue, 01 Oct 2024 17:01:25 +0000

✨ "Nuxt Social Share", my Nuxt module that, surprisingly enough, adds social sharing capabilities to your Nuxt sites and apps, now has a brand new documentation website.

📖 The new documentation contains all information that was previously squeezed into a single Readme file, and it is now more organized, more complete, and more easily browsed than ever.

In addition, some more examples and recipes for advanced usage and customization are also provided!

👉 You can see the new documentation here: https://nuxt-social-share.stefanobartoletti.it/

And if you want to try out the module itself, just run

npx nuxi@latest module add nuxt-social-share

into your Nuxt project to get it started.

Happy sharing!

A new version of Nuxt Social Share has been released, providing enhanced customization features! 🚀

Stefano Bartoletti — Tue, 14 May 2024 13:30:16 +0000

✨ A new version of "Nuxt Social Share" module has been released!

⚙️ New features in v0.7.0 include the ability to customize both the label and the icon of each social share button, enhancing its customization capabilities.

New Features

Label and icon can now be easily customized with dedicated slots, this leads to:

improved design options: it is now possible to set up label-only buttons by disabling the icon rendering.
better integration with your custom design: you can now use any icon style you need, instead of relying on the defaults provided by the module.
support for localization: being able to customize the label (and the aria-label attribute) means that you can now localize the component in any language you need to provide in your app.

Example

To customize label and icon, you can use the provided slots:

<SocialShare
  v-for="network in ['facebook', 'twitter', 'linkedin']"
  :key="network"
  :network="network"
>
  <!-- Custom icon, i.e. from NuxtIcon -->
  <template #icon><Icon name="mdi:${network}" /></template>
  <!-- Custom label, renders the network name -->
  <template #label>{{ network }}</template>
</SocialShare>

Detailed examples and full documentation is available on the repository's readme

Installation & update

Installing or updating the module is as simple as running

npx nuxi@latest module add nuxt-social-share

this nuxi command will:

install the module as a dependency using your package manager
add it to your package.json file
update your nuxt.config file

Nuxt Social Share module has many new features 🎉

Stefano Bartoletti — Wed, 29 Nov 2023 16:23:08 +0000

Since it first public release about a month ago, I continued to work on the Social Share module for Nuxt, fixing some problems and adding more features.

The latest release available right now is v0.5.0 and features:

two more networks (Reddit and Skype)
more URL arguments (title, image, hashtags, etc.) for relevant social networks.
components now have proper aria attributes for improved accessibility.
in addition to the <SocialShare> component, the useSocialShare composable is exposed to the developer, providing more flexibility if needed.
everything has been fully ported to Typescript.
better modularization of code, helping both maintenance and contributions from other developers.
some fixes to CSSs specificity, now the styles can be fully overridden.

All of these features and more are fully documented in the repository's readme

You can install it and try it with:

# pnpm
pnpm add -D @stefanobartoletti/nuxt-social-share
# yarn
yarn add --dev @stefanobartoletti/nuxt-social-share
# npm
npm install --save-dev @stefanobartoletti/nuxt-social-share

Check it in its repository here: https://github.com/stefanobartoletti/nuxt-social-share

Nuxt Social Share module has been released 🎉

Stefano Bartoletti — Thu, 02 Nov 2023 15:56:04 +0000

In some of my most recent Nuxt projects I have been in need of implementing some simple social sharing buttons, like those that you often find at the bottom of blog posts, to help users share your content across various social media and messaging applications:

Even if the process itself is quite simple (it just involves providing your current page URL as a parameter to another end-point URL specific to a given social network), it is repetitive and does not require complex configuration, so it is best managed with a dedicated component, and maybe from a module so it could be used in many projects, not just once.

After realizing that such a module did not exist yet in the official modules directory, I decided to write a little module myself and release it as open-source.

The module can be installed in your project with:



# pnpm
pnpm add -D @stefanobartoletti/nuxt-social-share
# yarn
yarn add --dev @stefanobartoletti/nuxt-social-share
# npm
npm install --save-dev @stefanobartoletti/nuxt-social-share

And by adding it to your nuxt.config.ts:



export default defineNuxtConfig({
  modules: [
    '@stefanobartoletti/nuxt-social-share'
  ],
  // optional configuration
  socialShare: {
    // module options
  }
})

It will then provide a simple component that you can include wherever you need in your templates:



<SocialShare network="facebook" />
<SocialShare network="twitter" />
<SocialShare network="linkdin" />

That's it! A more detailed documentation is available in the official repository hr -> https://github.com/stefanobartoletti/nuxt-social-share

This module is fully functional but it is an early release, more features and other networks will be available in future roles. Any kind of feedback and contribution is kindly welcome 💚

Happy coding (and sharing) 🎉

Bricks has been updated to Bootstrap 5 🎉

Stefano Bartoletti — Fri, 23 Jul 2021 09:03:03 +0000

Brisk is a modular WordPress starter theme aimed at developers, powered by Bootstrap and Gulp.

With the latest release v0.23.0, it has been updated to include Bootstrap 5, taking advantage of all the new features of this popular frontend framework.

Some of Bricks' top features:

👉🏻 It natively integrates all its templates with Bootstrap 5
👉🏻 It uses Gulp to manage its compilation tasks (CSS, JavaScript, icons, fonts, images, localization)
👉🏻 It integrates with various useful tools like Rollup, Babel, Autoprefixer, PurgeCSS, Browsersync
👉🏻 It is lightweight, modular and SEO optimized
👉🏻 It integrates with some popular WordPress plugins and JavaScript libraries

The documentation available at https://bricks.stefanobartoletti.it/ was updated as well with all the latest changes.

The theme itself and the documentation website are both open-source projects, and their repositories are available on GitHub

stefanobartoletti / bricks

A modular WordPress starter theme powered by Bootstrap 5 and Gulp

stefanobartoletti / bricks-docs

Documentation for Bricks, a modular WordPress starter theme powered by Bootstrap 5 and Gulp

A new documentation website for Bricks

Stefano Bartoletti — Tue, 27 Apr 2021 18:30:15 +0000

Bricks, my open-source WordPress starter theme featuring Bootstrap and Gulp, has a new documentation website:

https://bricks.stefanobartoletti.it/

Built with Vuepress and hosted on Netlify, this site was an interesting project on its own, giving me the opportunity to use new technologies.

Just like the theme itself, even the documentation is open-source and its source code hosted on GitHub.

Contributions are warmly welcome on both projects!

stefanobartoletti / bricks

A modular WordPress starter theme powered by Bootstrap 5 and Gulp

stefanobartoletti / bricks-docs

Documentation for Bricks, a modular WordPress starter theme powered by Bootstrap 5 and Gulp

Introducing Bricks, a new WordPress starter theme

Stefano Bartoletti — Tue, 23 Feb 2021 19:59:55 +0000

A few years ago I rebooted my life ad started a new career as a web developer, mainly focusing on WordPress websites built with custom themes (Since then I aimed to acquire more solid Front-End skills, and during last year I took advatage of COVID-19 lockdowns to study many Jamstack techs, namely Vue, Nuxt, Tailwind, Netlify, and related stuff).

I tried many existing starter themes, from the most famous to the less-known projects, but for one reason or another I always felt that they missed something, and I decided to build one myself, keeping in mind some requirements:

it had to be a fast and easy way to start a new project based on Bootstrap, by integrating it in the templates and providing the means to customize its theme variables;
it had to include all basic WordPress features required in every project, without having to code them everytime;
it had to have a modular nature, leveraging get_template_part() whenever possible, to have a component-like structure;
it had to take into account SEO and performance, thus being lightweight and optimized in these respects;
it had to automate some common tasks, like compiling CSS and JS, providing support for custom fonts, localizations, etc;
it had to provide support for some optional Javascript libraries useful for the Front-End;

So, Bricks was born. I started working on it in the beginning of 2019, and now, two years later and after having extensively tested and tweaked it, I decided to release it as an open-source project, that you can access from its GitHub repository:

stefanobartoletti / bricks

A modular WordPress starter theme powered by Bootstrap 5 and Gulp

A short list of some of Bricks' interesting features:

Bootstrap 4 (support for custom theme compiled from source Sass files, and JavaScript from Bootstrap Native).
WP Bootstrap Navwalker.
Font Awesome 5 (SVG with JavaScript version, parsed and minified by gulp-fa-minify).
Autoprefixer.
PurgeCSS.
Rollup and Babel.
BrowserSync.
Automatic conversion of custom fonts into woff2 web formats.
Support for localization, with a task that creates a .pot template file.
Support for integration of some optional JavaScript libraries such as (aos, [lightgallery.js] and swiper).

Feel free to try it and test it! Contributions and suggestions are welcome!

Vue Telemetry, a new tool to analyze and discover Vue websites

Stefano Bartoletti — Fri, 11 Sep 2020 09:28:37 +0000

A brand new developer tool was launched just some days ago: it is Vue Telemetry, a project composed by a browser extension and a database of known Vue websites.

The browser extension is available for both Chrome and Firefox, and when visiting a website made with Vue, it will report all known information about the used stack: in particular it lists details about Vue implementation and, if present, the Framework, UI Framework, Vue plugins, and Nuxt modules.

The report of Vue Telemetry website itself.

The website is found at https://vuetelemetry.com, and its showcase lists websites detected and submitted by the browser extension. The sites are filterable by the same criteria detected by the extension.

The filterable showcase on Vue Telemetry website.

Vue Telemetry was made by Sébastien Chopin and the Nuxt team.