Forem: Marco

Calendar view with vue3 and tailwind

Marco — Tue, 06 Dec 2022 04:58:14 +0000

As JS libraries and frameworks keeps churning, I find myself looking for libraries that are actively maintained. UI libraries tend to be forgotten and end up unmaintained or worse they break when a large update is published. That's why, when I can, I build my own custom components and keep it as simple as humanly possible. Calendar components are a good example of a lib I struggle to find one that works. Every project has its own requirements and using an out of the box UI rarely works.

With CSS grid building your own is now fairly easy so the following is a quick skeleton calendar, customizable to fit your needs.

To get started you'll need

Vue3
Tailwind
dayjs

We start with an empty vue component

<template>
</template>

<script setup lang='ts'>
</script>

Let's define some properties. We'll need a modelValue prop to feed in events and a startDate that sets the initial month to display.

<script setup lang='ts'>

type Props = {
    modelValue?: any
    startDate?: string    
}
const props = withDefaults(defineProps<Props>(), {
    modelValue: () => null,    
    startDate: () => '2022-12-05'
});
const emits = defineEmits(['update:modelValue']);
</script>

Next comes a function to calculates the day in a given month. Dayjs has all the functions to work that out, so let's import.

Adding the function as a computed property will make it reactive. Every time viewDate changes, the range is recalculated.

<script setup lang='ts'>
import { computed, ref } from 'vue';
import dayjs from 'dayjs';

const viewDate = ref(dayjs(props.startDate));

const units = computed(() => {
    let ranges = [];
    let startOfRange = viewDate.value.startOf('month').add(-1,'day');
    let endOfRange = viewDate.value.endOf('month').add(-1,'day');

    let currentDate = startOfRange;

    while (currentDate.isBefore(endOfRange) || currentDate.isSame(endOfRange)) {
        currentDate = currentDate.add(1, 'day');
        ranges.push(currentDate);
    }
    return ranges;
})

</script>

Now Let's add a css grid to show our calendar boxes

<template>  
    <div class="grid grid-cols-7">        
        <div class="border border-slate-200 flex flex-col h-32"
             v-for="d in units">
            <div class="text-center">{{ d.format('D') }}</div>      
        </div>
    </div>
</template>

Most calendars, show the days of the week at the very top. To make that work, we'll need to align the 1st day of the month with the correct day.
So we'll need a second function to calculate that gap

const daystoPrepend = computed(() => {
    const startOfMonth = viewDate.value.startOf("month");
    const startOfFirstWeek = startOfMonth.startOf("week");
    const daysToFirstDay = startOfMonth.diff(startOfFirstWeek, "day");
    return Array.from(new Array(daysToFirstDay).keys());
})

and let's add empty boxes in front to align our days.

    <div class="grid grid-cols-7">
        <div v-for="p in daystoPrepend"></div>
        <div class="border border-slate-200 flex flex-col h-32"
             v-for="d in units">
            <div class="text-center">{{ d.format('D') }}</div>           
        </div>
    </div>

Now we can add the days on top of the calendar.

<template>
    <div class="grid grid-cols-7 gap-1">
        <div v-for="d in weekDays"
             class="text-center">
            <div>{{ d }}</div>
        </div>
    </div>

    <div class="grid grid-cols-7">
        <div v-for="p in daystoPrepend"></div>
        <div class="border border-slate-200 flex flex-col h-32"
             v-for="d in units">
            <div class="text-center">{{ d.format('D') }}</div>      
        </div>
    </div>
</template>

const weekDays = [
    'Sunday',
    'Monday',
    'Tuesday',
    'Wednesday',
    'Thursday',
    'Friday',
    'Saturday',
]

</script>

Finally we'll need some buttons to navigate between months and reset to today. Since everything is computed from viewDate we just need to manipulate that value.

<div class="flex">

    <button class="btn-primary"
            @click="reset()">Today</button>
    <button class="btn"
            @click="shiftMonth(-1)">Previous</button>
    <button class="btn"
            @click="shiftMonth(1)">Next</button>
    <span class="text-3xl">{{ viewDate.format('MMMM YYYY') }}</span>

</div>

const shiftMonth = function (amount: number) {
    viewDate.value = viewDate.value.add(amount, 'month');
}
const reset = function () {
    viewDate.value = dayjs();
}

</script>

and we're done 😊 pass your content in modelValue, render them and 💰

Here is the full code for reference

On Personal Knowledge Management

Marco — Wed, 16 Nov 2022 04:22:32 +0000

Keeping notes.. a simple yet elusive process for us note-takers. Some are happy with scribbling things down on a piece of scrap paper while others engage in meticulous note-taking systems. Unfortunately, I lack the discipline to keep my digital knowledge super organized.
After some Reflection on my note-taking habits over the last few years, I found two main failures;

I lack the medium that lets me collect notes as they happen.
As my knowledge graph grows, I struggle to keep it organised and accessible.

Handwriting notes did not work for me as I have the worst handwriting and searching for written notes involves keeping an Index, that's too much manual work. So my note-taking efforts have mostly been software based. I tried a lot of different systems over the years. One note, plain text, notion, obsidian, loqseq you name it. There are many things I liked about them but none of them quite fit my workflow.
So left with one option, building my own! It's been a few months of tinkering and dog founding and I think I now have a better understanding of what I was missing in my note-taking system.

Offline first

Interesting thoughts can happen, anywhere at any time, therefore I need a tool that works whether I am connected to the internet or not. A lot of the desktop applications on my list work that way. But as Web apps become
defacto, offline-first seems to not be a priority. There is no denying that a browser-based app has a lot of advantages so my ideal version would be both.

Multi-device

For similar reasons as above, my perfect note-taking tool should work from any device. If I am doing some research on my computer, I can add things with ease there, but If I am on the go and I need to quickly jot something down to remember later, a mobile version is also critical. If your notes are on more than one device the application will also need a way to synchronise the data.

Easy Import/Export

As software comes and goes, the software mustn't hold the data hostage. So an easy way to add notes from another source, or a way to quickly extract that info, should be possible, in a format that is compatible with a broad range of systems.

Self organising

This is the area I find most lacking in the tools I used. They all assume I know how I want to organize my notes. They demand that I create a hierarchy of folders or links from a "root document" to everything else. I call this a top-down organization. The reality is when I capture a piece of information I want to do it quickly and move on. Later I review it and file it in the right place. A more bottom-up approach as you will.
Bookmark managers and Bullet Journals embrace a bottom-up approach. The problem is Bookmark managers are built to capture links and little else.

With Bullet notebooks, you keep a daily journal where you write down your notes, tasks, and events in one place, then use a weekly / monthly index to promote and keep track of the items that are important to you.

Bullet Journals on the other hand are very manual. Ryder Carroll, the creator of the bullet journal claims this is a feature, not a bug, as the act of manually reviewing your daily captures helps you reflect and be mindful. That makes sense, but I find rewriting things in different places very tedious. Semi-automating this process would free me to focus on the actual reflection. If you distill the above as an Inbox of sorts where everything goes, and a set of tools to label and organise the essential bits we'd have a more flexible system to customise for one's needs.

Structured Information/Data

If this notebook is the universal port of entry for all of my personal information it should accept all sorts of information. Looking at my past notes, I can broadly categorise them as follows.

Notes from a simple sentence to one or more paragraphs.
URLs and links to websites and media.
Semi-structured data that contains properties I want to analyse.
Tasks that have a finite existence and may have some deadline.
Events I want to keep track of.

Some might say this is no longer a note-taking tool but 5 different tools, each one with its nuances. That is very true but for every use case I need simple functionality for each type rather than full-featured apps as this is for personal use. I want a universal way to capture all and figure it out later. If I go down the rabbit hole APIs can be added that allows sync with other platforms like calendars and task managers.

Conclusion

If you are still reading I can assume you are thinking one of two things. I am a total nutter and a piece of software that tries to do it all is doomed to fail, or you can see the value of an > offline capable browser app that captures all your structured and semi-structured personal knowledge.
The good news is I've been tinkering with these ideas for a couple of months now and I have build a very basic version of my ideal Personal Knowledge Manager. So if any of this resonates follow the link below and let me know. If enough people show interest I'll make the tool public :)

More info here

Firebase Authentication for Cloudflare workers

Marco — Thu, 27 Oct 2022 03:59:19 +0000

Disclaimer: I am not a security expert. This is an implementation based on my learnings and for my particular use-case. If you use it, you do so at your own risk.

🔬 Why?

After trying several services like aws cognito, netlify and a combination of spa hosting + serverless backends I found a lot of them lacking in functionality, price and dev UX. After more trial and error, I found cloudflare pages paired with its functions capabilities to be able to handle anything I throw at it including websockets, storage and basic http compatibility. In addition Cloudflare pages have a decent free teir and make static application hosting a breeze.

The one thing I was missing for my latest experiment was a reliable way to authenticate users and allow them access to their profile. There are other services that can be easily integrated but they can get quite expensive. Firebase on the other hand has a good free quota; perfect for this use case so I started by installing the Firebase Admin SDK. But alas the admin sdk has some dependencies on nodejs which are not included in the workers/functions runtime. 🤦‍♂️

Luckily after another rummage in the firebase docs, it turns out its possible to manually verify the User's JWT token so we're in business 😊 Some hacking required.

⚗️ Setup

For this example we'll need a cloudflare pages project and function to go with it. Below we'll create a skeleton page-function that verifies that the User is legit.

After setting up a Cloudflare Page Project, we can create a backend function, simply by creating a folder 'functions/api'.
Let's call the function list-files; therefore in the functions/api folder we create list-files.ts

// functions/api/list-files.ts
export async function onRequest(context) {

    const {
        request, // same as existing Worker API
        env, // same as existing Worker API
        params, // if filename includes [id] or [[path]]
        waitUntil, // same as ctx.waitUntil in existing Worker API
        next, // used for middleware or to fetch assets
        data, // arbitrary space for passing data between middlewares
    } = context;

    let result = {};

    return new Response(result, {
        headers: {
            'content-type': 'application/json;charset=UTF-8',
        },
    });

}

⚙️ CF Functions Middleware

If your backend only has one endpoint you could add JWT verification code straight into the onRequest method. For more complex setups, middleware functions offer a more elegant pattern. Middleware code can be run before and/or after any request in your functions folder. The scope of the the middleware is defined by its location in the hierarchy.

So let's add _middleware.ts in functions/api. All Requests in that folder will now run the middleware, so if you intend to have a mix of auth and public methods you may want to create a couple more sub folders.

// functions/api/_middleware.ts
const checkIfAuthenticated = async ({ request, next, data }) => {    
    return await next();
};

export const onRequest = [checkIfAuthenticated];

A middleware file can have multiple functions, as long as they are an exported array. When a middleware function is called it has access to the request object; information can be passed between middleware's and onRequest functions using the data variable; And the next hof allows control on when the next layer is called before and or after the logic in this method.

👮‍♀️ Validating JWT Tokens

To authenticate a user we'll need

The correct public certificate
A function to get the user JWT
Some logic to decode and verify values

Retrieving the public certificate

First let's install jose. It's a nifty 0 dependency library with functions to hash, encode and decode all sorts of data.
In the function below, we fetch the certificates (the response has two). This function is called with every request and fetching every time will slow things down, thus it makes sense to cache.
The documentation states that we should check the cache expiry value in the header to determine when to refresh. We'll do that later
Finally we use jose and import the cert using RS256 and save it to memory.

import * as jose from 'jose'
let rsaPublicKey = {};
const algorithm = 'RS256';

async function getPublicCert() {

    if (Object.keys(rsaPublicKey).length == 0) {
        const response = await fetch('https://www.googleapis.com/robot/v1/metadata/x509/securetoken@system.gserviceaccount.com');
        const publicKeys = await response.json();
        //TODO Add cache expiry 
        console.log('Cert expires on', response.headers);

        for (const [key, value] of Object.entries(publicKeys)) {
            rsaPublicKey[key] = await jose.importX509(publicKeys[key], algorithm);
        }
    }
}

Get the JWT Token

Next a helper function to retrieve the user token. The token is passed via the header 'authentication' key.
The value should be Bearer so the code below extracts that and returns the token.

const parseToken = (req) => {
    // Authorization: "Bearer 123asdasdasd"
    if (req.headers.get('authorization') && req.headers.get('authorization').split(' ')[0] === 'Bearer') {
        return req.headers.get('authorization').split(" ")[1];
    } else {
        return null;
    }
}

With the cert and the token in hand we can finally validate the user info

First we get the cert and user token
Next we get that the correct certificate. Usually there are two, so we need kid in the token to get the correct one.
jose.jwtverify verifies the token has been issued by google. If this fails we stop here and return an authorised response.
If successful we can access the payload. Firebase docs then states we should do a number of checks as shown in the if condition
You'll want to update with your own.
Next we add the payload to data.user so its available to the rest of the pipeline
And Finally we call next() to process the next part of the pipeline

const checkIfAuthenticated = async ({ request, next, data }) => {

    await getPublicCert();
    const authToken = parseToken(request);

    try {
        const ph = JSON.parse(Buffer.from(authToken.split('.')[0], 'base64').toString());
        const { payload, protectedHeader } = await jose.jwtVerify(authToken, rsaPublicKey[ph.kid]);

        //Verify 
        const now = new Date().getTime() / 1000;
        if (payload.exp < now
            || payload.auth_time > now
            || payload.iat > now
            || payload.aud !== `<fire-base-project-id>`
            || payload.iss !== 'https://securetoken.google.com/<firebase-project-id>'
            || (!payload.sub || payload.sub != payload.user_id)) {
            return new Response(`Failed Token Validation`, { status: 401 });
        }
        data.user = payload;
    }
    catch (e) {
        console.log(e);
        return new Response(`${e.message}`, { status: 401 });
    }

    const res = await next();
    return res;
};

Use the User object.

Accessing the user info is straight forward enough. Since im using type script I created a couple of Types to make life easier

type Env = {
    STORE: R2Bucket
}

type MiddleData = {
    user?: {
        aud: string,
        auth_time: number,
        user_id: string,
        sub: string,
        iat: number,
        exp: number,
        email: string,
        email_verified: boolean,
        firebase: any
    }
}

Now when we need the user's info we simply access context.data.user 💥

export async function onRequestPost(context: EventContext<Env, null, MiddleData>) {

    //Contents of context object
    const {
        request, // same as existing Worker API
        env, // same as existing Worker API        
        data, // arbitrary space for passing data between middlewares
    } = context;

    const user = data?.user;

    if (!user) {
        return new Response('Not logged in', { status: 403 });
    }

    // As need get user's email or id 
    console.log('Processing', user.email) 
    //or 
    console.log('User Id', user.user_id)
}

🍪 Client side

Last piece of the puzzle is making sure the Token is added to server requests.
I'm using axios so it looks something like

import { getAuth } from "firebase/auth";

export async function getToken() {
    const auth = getAuth();
    const user = auth.currentUser;
    if (user == null) {
        throw "Can't sync you are not logged in";
    }
    const token = await user.getIdToken();
    return token;
}

async function DoAuthenticatedServerCall() {
    const token = await getToken();

    const config = token
        ? { headers: { Authorization: `Bearer ${token}` } }
        : {};

    const response = await axios.post(url, request, config);
}

Full code example here
and that's it! Hope you found this useful. G'day!!