Notion as Blog, Portfolio and much more ...

Minja — Mon, 01 Nov 2021 12:02:28 +0000

Notion

When I started learning how to code ( spoiler: still learning ) organisation was a big issue, every day new information, exploring new resources trying different tools and so on... Suddenly you found yourself in a situation like: 'I know that I write somewhere, but where ???'

Trying Notion for the first time, I was amazed not with the functionality( which was confusing ) but with the clean minimalistic design and super user-friendly approach.

Basically Notion is a big LEGO software, with a bucket of blocks who combine text, databases, lists, images, videos, and embeds and more...

Releasing the API which is still in beta we are able to integrate "Lego kit" into other apps, websites etc.

Next.js

SSR, SSG, ISR, SEO friendly and as they announced at Next.js Conf Rust Compiler, Middleware, URL imports etc. changing the name to Now.js would be much more appropriate. There is no doubt, that Next.js is the new React(since React becomes new Linux).

Since my coding journey didn't start that long ago, Next.js is somehow still a new thing for me. Deciding to stick with Next for this project is somehow obvious if you want to learn more, beside that they have that cool flag —example with-tailwindcss .

Blog

One reason why blogging is so popular is that it is surprisingly easy. By starting your own blog, you are giving yourself your own medium for promoting yourself, using to show the world how skilled you are and it can work as a living-growing resume.

NOW the best part, transforming Notion into the Blog. Trying to implement a Low-code approach, abstracting and automating almost every step of the application lifecycle, there is a couple things to do before "express yourself" :

GitHub account - https://github.com/
Notion account - https://www.notion.so/
Create Integration Token - https://www.notion.so/my-integrations
Duplicate the Page - https://wonderful-freighter-e00.notion.site/
Go to Share button and Invite previously created Integration
Follow the steps and fill the Environment Variable Keys on Vercel.com

... and that's pretty much everything .

Conclusion

The Blog has 100/100/100/100 score according to Google Lighthouse, so don't need to worry about how fast is it, optimized and accessible. There are a some tips from masterclass how to write your personal blog. Also a quick explanation guide about the properties inside the Notion and how they are represented in Next.js.

In case you want your own domain here is Vercel documentation how to set up one.

Here is the template in action https://notionblogs.vercel.app/ as well GitHub repo minime89-maker

Thank you for reading, and let's connect!

LinkedIn
Twitter

Build Your Own UI Component Library

Minja — Wed, 18 Aug 2021 11:31:53 +0000

A UI component library is a set of ready-made UI components such as buttons, inputs, dialogs, and so on. They serve as building blocks for layouts. Thanks to their modular nature, we can arrange components in many different ways to achieve unique effects. Each library has a distinctive look and feel, but most of them offer theming, and their components are customizable and reusable.
I will walk you through the process of creating your own UI Component Library using :

React
TailwindCSS
Storybook
NPM

Create a new React project and install TailwindCSS

npx create-react-app storybook-postcss-tailwind

Initialize TailwindCSS.

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Inside tailwind.css file, add the following line:

@tailwind base;
@tailwind components;
@tailwind utilities;

Create tailwind.config.js with npx.
--full option scaffold file that matches the default configuration file that Tailwind uses internally.

npx tailwindcss init --full

Inside tailwind.config.js file, add the following configuration in purge:[]:

"./src/**/*.{js,ts,jsx,tsx}"}

Install postcss-cli and create postcss.config.js file.

npm install -D postcss-cli

Inside postcss.config.js, add the following:

        module.exports = {
        plugins: {
            tailwindcss: {},
            autoprefixer: {},
        },
    };

Install Storybook and create a new component

Initialize Storybook with the following command:

npx sb init

Create sample component src/lib/components/Button/Button.js, with some styling:

    import React from ‘react’
    import PropTypes from 'prop-types'

    const Button = ({ label }) => {

        return (
            <div>

                <button 
                className='bg-red-500 text-white text-xl py-4 px-8 rounded-md'>{label}</button>

            </div>
        )
    };

    Button.propTypes = {
    label: PropTypes.string.isRequired
    };

    Button.defaultProps = {
    label: 'Button'
    };

    export default Button

Create src/lib/components/Button/Button.stories.js with the following content:

    import React from 'react';
    import Button from './Button'

    export default {
        title: 'Example/Button',
        component: Button,
    };

    const Template = (args) => <Button {...args} />


    export const Default = Template.bind({})
    Default.args = {
        label: 'Button'
    };

Inside src/lib/index.js, add the following line:

    import './styles/main.css';
    import Button from './lib/components/Button/Button'

    export { 
        Button 
    };

Configure `package.json` and additional dependencies

npm i -D cross-env @babel/cli @babel/preset-env @babel/preset-react

Create babel.config.js file:

    module.exports = function (api) {
    api.cache(true);

    const presets = [ "@babel/preset-env", "@babel/preset-react" ];
    const plugins = [ "macros" ];

        return {
            presets,
            plugins
        };
    }

To avoid any React conflict, you can move the following React dependencies to a peer dependency:

"peerDependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3"
}

Inside package.json, add the following scripts for TailwindCSS:

    "scripts": {
        "build:tailwind": "postcss src/lib/styles/tailwind.css -o src/lib/styles/main.css",
        "build:tailwind-prod": "cross-env NODE_ENV=production postcss src/lib/styles/tailwind.css -o src/lib/styles/main.css"
    },

To prepare for production we need to add the following script at the top of package.json:

    "private": false,
    "main": "dist/index.js",
    "module": "dist/index.js",
    "files": [
        "dist",
        "README.md"
    ],

Still inside package.json, add the following under scripts:

    "scripts": {
        "clean": "rimraf dist",
        "compile": "npm run clean && cross-env NODE_ENV=production babel src/lib/ --out-dir dist --copy-files"
    },

Building for production and Publishing to npm

Build tailwindcss for production:

npm run build:tailwind-prod

Compile components for production:

npm run compile

If you don't have a npm account, create one.
Execute the following command:

npm login

Execute the following command:

npm publish

That's it! We managed to get a simple UI Library using Storybook and TailwindCSS. This is one option how can you create UI Components Library. From here you can:

Add more components
Create stories for components
Create test cases for components
And much more...

Forem: Minja

Notion as Blog, Portfolio and much more ...

Notion

Next.js

Blog

Conclusion

Thank you for reading, and let's connect!

Build Your Own UI Component Library

Create a new React project and install TailwindCSS

Install Storybook and create a new component

Configure `package.json` and additional dependencies

Building for production and Publishing to npm

Appendix

Forem: Minja

Notion as Blog, Portfolio and much more ...

Notion

Next.js

Blog

Conclusion

Thank you for reading, and let's connect!

Build Your Own UI Component Library

Create a new React project and install TailwindCSS

Install Storybook and create a new component

Configure package.json and additional dependencies

Building for production and Publishing to npm

Appendix

Configure `package.json` and additional dependencies