CurateBot Devlog 11: New UI Theme and logo, and releasing the app!

In the last post, we got everything working! So the last step is a bit of a UI update. The commit matching this post is here

Vuetify styling

The default vuetify setup is currently all defaults, it looks like this in the file src/plugins/vuetify.ts:

import Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';

Vue.use(Vuetify);

export default new Vuetify({});

It looks like this:

Now, if we were to put things into Dark mode, it's a simple one-line change (in fact there's other places to do it too, but this is in the default theme settings):

import Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';

Vue.use(Vuetify);

export default new Vuetify({
  theme: {dark: true}
});

Now our site looks like this:

In the end, I decided to go for a yellow/black colour scheme on white cards, but a black background.

Since most of the components are configured to directly use the primary colour as defined here, and since I've consistently built the site using Vuetify components, changing the main colour across the entire site is as simple as setting the primary colour. I've also used warning, error and success colours for some of the buttons, and I want those to fit with the palette, so I set those here too:

import Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';
import colors from 'vuetify/lib/util/colors'

Vue.use(Vuetify);

export default new Vuetify({
  theme: {
    themes: {
      light: {
        primary: colors.amber.darken2,
        warning: colors.deepOrange.base,
        error: colors.red.darken2,
        success: colors.lightGreen.base,
      }
    }
  }
});

There's one small piece of CSS in App.vue to add the black background. The result is now:

I actually decided against white text in the menu and header bars, I adjust those later by taking out the dark property that was set up in AppBar and Section previously.

New logo

Since the name of the site is CurateBot, I went with a hand holding a square that might pass for a robot. I sketch this up in Inkscape, and give it a stylized polygonal shape:

I create a few different versions of this, for the logo on the site, the favicon, and the social preview.

Favicon

The Favicon is simply a square version of the logo rendered to 260x260px:

This is put into the excellent online tool https://realfavicongenerator.net/ which produces a bundle of favicons at different resolutions.

These all go into the web/public folder, and the index.html file edited to include them in the

:

<link rel="apple-touch-icon" sizes="180x180" href="<%= BASE_URL %>apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="<%= BASE_URL %>favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="<%= BASE_URL %>favicon-16x16.png">
    <link rel="manifest" href="<%= BASE_URL %>site.webmanifest">
    <link rel="mask-icon" href="<%= BASE_URL %>safari-pinned-tab.svg" color="#FFA000">
    <meta name="msapplication-TileColor" content="#FFA000">

Social Preview/Opengraph

The next logo is a social preview, these previews show up on Discord, and Twitter when you paste links, the images are used alongside the link card. I create a larger version of the logo, and give a lot of extra padding either side of the logo since different platforms crop the image differently. Unfortunately there's no one-size-fits-all, but this is probably the best compromise:

The opengraph section of the

in index.html now looks like this:

<meta name="description" content="Curate and schedule AI-generated tweets">
    <meta name="keywords" content="Twitter,curate,ai,gpt2,bot">
    <meta name="author" content="Yuan Gao">
    <meta name="copyright" content="Copyright 2021, Yuan Gao">
    <meta name="theme-color" content="#FFA000">

    <!-- Twitter -->
    <meta name="twitter:title" content="CurateBot">
    <meta name="twitter:description" content="Curate and schedule AI-generated tweets">
    <meta name="twitter:image" content="https://curatebot.meseta.dev/curatebot_preview.png">
    <meta name="twitter:url" content="https://curatebot.meseta.dev/">

    <!-- Open Graph -->
    <meta property="og:title" content="CurateBot">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://curatebot.meseta.dev/">
    <meta property="og:image" content="https://curatebot.meseta.dev/curatebot_preview.png">
    <meta property="og:description" content="Curate and schedule AI-generated tweets">

This gives sites like Twitter and Discord all the metadata they need to render this link. You can check what it looks like using Twitter's Card Validator tool, this tool also helps you clear Twitter's cache for you site!

Unfortunately, Discord's preview is a bit small to make out, but it does use the correct theme colors:

Finally, the GitHub repo also has its own social preview in the settings. So I upload the same image to it. This is the preview that will show up if you send the GitHub repo to someone over Twitter, or other sites and chat platforms

Menu icons

When visiting the site on Mobile, the menu becomes too wide, so I decided to replace the menu text with Icons when the page is narrow, in other words, a responsive menu. Vuetify makes this very simple to do. I can use the built-in breakpoint $vuetify.breakpoint.smAndDown which is a boolean that is True when the page width is smaller than whatever is defined as a small screen (it's a pixel size that can be adjusted, but I'm using the default value)

Inside my AppBar.vue component, I set up a computed value for it, which since I'm using vue-property-decorator, I can do so using a getter:

  get collapse() {
    return this.$vuetify.breakpoint.smAndDown;
  }

And then in the template I can use it with v-if directives to switch in and out the text. This is the home button for example:

      <v-btn text to="/">
        <v-icon :left="!collapse">mdi-home</v-icon>
        <span v-if="!collapse">Home</span>
      </v-btn>

This will switch between and then "Home" when the screen is wide enough, to just when the screen is narrow. The result looks like this:

Front page logo

Finally, the front-page logo. I make a transparent version of the logo from before, and render this out to a high-ish resolution:

Then I slap this on the frontpage of the site to complete the look!

That's it! The site is live at https://curatebot.meseta.dev, and it's currently hosting my Dev Influencer AI bot. When it posts, "CurateBot-App" shows up in the source.