Hemant Vishwakarma

Tuesday, 1 March 2022

Bundle Vue project into single js file that can be embedded in Ghost blog post

I have a simple Vue.js project built after running yarn build. The dist folder contains files like below;

I want to bundle all the files (HTML, js, CSS) into a single js file that can be embedded into a ghost blog post.

Here is an example of how this was done for a ghost blog post.

https://blog.openbloc.com/including-a-js-app-in-a-ghost-post/

My question is how do I bundle my Vue.js project files into a single file that can be deployed in a ghost blog post?

Is webpack the right tool to use? I am open to other alternatives.

I am using @vue/cli 5.0.1, yarn v1.22.17

from Bundle Vue project into single js file that can be embedded in Ghost blog post

How do you allow file browser apps to access to your app's scoped storage on Android?

As an Android developer targeting Android 12, can you do anything to allow file browser apps on the phone to view the files that your app exports? Google now requires that all apps use "Scoped Storage", which seems to effectively hide the files from file browsers on the phone. So, you can only view them if you plug the phone into a Windows PC and use File Explorer now.

from How do you allow file browser apps to access to your app's scoped storage on Android?

NextJS: Loading Font from Database

I'm using NextJS along with Tailwind CSS.

In my app, users can select a theme that includes different color schemes along with a pre-selected list of fonts. They can choose a font that they will like for the app.

These are only Google Fonts.

I'm not sure what's the best way to load a font based on the font name received from the database. I can load the data from the database in serverSideProps, but then how can I load the font before render so that there is no screen flicker. Can you please help?

UPDATE

As of now, I've done the following:

In tailwind.config.js, I've extended the theme with different fonts that are available.

theme: { fontFamily: { inter: ['Inter', 'sans-serif'], cal: ["Cal Sans", "Inter", "sans-serif"], arima:['Arima Madurai','cursive'], opensans:['Open Sans', 'sans-serif'], } }
I've created a stylesheet for each font, which is stored in public folder at this location:

/fonts/opensans/stylesheet.css

/fonts/cal/stylesheet.css

/fonts/inter/stylesheet.css

/fonts/arima/stylesheet.css

These stylesheets contain the font. An example below:

@font-face {
  font-family: "Cal Sans";
  src: url("CalSans-SemiBold.woff2") format("woff2"),
    url("CalSans-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

On the page (say pages/index.js), I load the user's preferences using serverSideProps and pass it to a Layout component. This layout component has the head which is created through next/head. Let's call the font prop received from server as themeFont.

Let's say the user's preference is Cal Sans, and the user's preference is stored in the database as value cal. So, themeFont value will be cal.

In the head, I load the related stylesheet as follows:

<Head>
  <link rel="stylesheet" href={`/fonts/${themeFont}/stylesheet.css`}></link>
</Head>

This will load the /fonts/cal/stylesheet.css and the required font. No other font is loaded. Then I can use it in my components with font-cal because it has been defined in tailwind.config.css

It works fine. I still see a flicker, maybe because of the font-display:swap, or maybe it is because of some other reason. But I still feel this is not the optimal solution and this could be done in a better way.

Looking for help in this.

from NextJS: Loading Font from Database