Website client

If we wanna make a minimal client having features roughly specified here, these are the steps to take:

  1. Create a repository for the whole thing.

Use npx create-nx-workspace <my client name> for that - create the repo and change to the directory.

npx create-nx-workspace my-micropub-site --preset=empty --cli=nx &&

  1. Create the micropub client application.

Say you want to use React for this client. You’d do this:

npm i -D @nrwl/react && nx g @nrwl/react:app mp-client --routing --style=scss --tags=app

  1. Create stubs for the features we need

Let’s start with the minimal set of things we want. The features, or in this case, pages:

  • home: a “dashboard” page, or auth page if not logged in
  • new entry: create a note or article
  • edit entry: edit note or article
  • list entries: list notes and articles

Let’s see, creating those ui/feature libs would look like this:

nx g @nrwl/react:lib --tags=feat ui-home && \
nx g @nrwl/react:lib --tags=feat ui-create-entry && \
nx g @nrwl/react:lib --tags=feat ui-edit-entry && \
nx g @nrwl/react:lib --tags=feat ui-list-entries
  1. Update the application to use the libs

Basically we want to replace the app.tsx content with this:

import React from 'react';

import './app.scss';

import { Route, Link } from 'react-router-dom';
import { UiHome } from '@accessorinesses-delusionist/ui-home';
import { UiCreateEntry } from '@accessorinesses-delusionist/ui-create-entry';
import { UiListEntries } from '@accessorinesses-delusionist/ui-list-entries';
import { UiEditEntry } from '@accessorinesses-delusionist/ui-edit-entry';

export const App = () => {
  return (
    <div className="app">
      <Route
        path="/"
        exact
        component={UiHome}
      />
      <Route
        path="/new"
        component={UiCreateEntry}
        />
      <Route
        path="/list"
        component={UiListEntries}
        />
      <Route
        path="/edit/:entryId"
        component={UiEditEntry}
        />
    </div>
  );
};

export default App;

Next steps:

Next would be to implement these features.

more

I’ve read a bit on nx workspace, and ran through the free “Nx Workspace” course at Nx Playbook online course site. I think this would be a good way to go with my plan for a micropub website. So I’d have a micropub client app, micropub server app and a static site type app. And a couple of libs as well.

That all means my plan to learn new tech as I’m building out the site has just expanded quite a bit. Next step: sketch out a bit of a project roadmap - what features I want and plan to get there.

Side note, in micropub terms, this type of post would be a “h-note” type entry. I should probably create a template for that too.

more

How I want the micropub client to work here:

  • authenticate via indieweb OAuth (for now)
  • only I am authorised to authenticate or whatever
  • The UI has a big focused textarea to start writing
  • there’s also a title box and also “upload attachments” button
  • finally, there’s the save button

more

How to start implementing a micropub service

How to start implementing a micropub service suite

I want to make this website a micropub website. Meaning, I don’t really want to write manually and git push my site around - I want a semblence of a CMS, while not actually having one.

So the plan is: I create a micropub client (something in which I can write posts in), then I create a micropub server (where I can “save” those posts) and the server actually converts the posts into static pages.

Parts

So I’ll need 3 things:

  • micropub client
  • micropub server
  • public-facing statically compiled site.

Tech

I want to learn new things with this.

Static site: wintersmith (basically this site, eventually added and adjusted in the workflow). Client: React. Haven’t done anything serious with react anyway, time to learn something new. Server, Nest.js. I’ve been working a lot with Angular lately so Nest should be relatively simple, but it will still be nice to get back to server-side code a bit.

Here goes nothing I guess. Wish me luck, me. J/k, luck won’t make it happen.

more