GithubHelp home page GithubHelp logo

fumix / fublog Goto Github PK

View Code? Open in Web Editor NEW
2.0 2.0 1.0 5.04 MB

Blog Software

Home Page: https://blog.fumix.de

License: Apache License 2.0

JavaScript 0.87% HTML 0.18% Vue 32.99% SCSS 6.48% TypeScript 59.13% Dockerfile 0.15% Shell 0.19%
blog expressjs typescript vue3 markdown kroki

fublog's People

Contributors

cb-fumix avatar codelirik avatar floscher avatar michael-fuchs avatar thooyork avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar

Forkers

floscher

fublog's Issues

Frontend for attachments

  • Implement an option to add attachments (images) to a post, when creating or editing a post.
  • Attachment is shown in the preview
  • Attachment is deleteable

Project initialization

  • Basic direktory structure for node.js server and vue3-ui.
    Separate main folders in one repo, one for node-server, one for Vue3-UI
  • Server
    • Simple single REST service with express and single route/call for first try.
    • Devserver setup to start the server for local development.
  • UI
    • Standard-Setup with Vue-CLI, Vite.
    • Access to node-Devserver REST call.

DoD

Server and client running on developer machine.

Refresh the login tokens to extend login duration

At the moment we login the user with the ID token, which we receive from the OAuth provider, which will expire after a while (usually 3600 seconds).

This time span should be extended by refreshing the token.

kroki for embedded diagrams

https://kroki.io/ is a service to render diagrams from text. It's a HTTP interface to a number of tools like plantUML. It's also available as OS docker container for self hosting.

The markdown code-blocks can be used for embedded diagrams. When the markdown is rendered kroki is called on the content of such code blocks to render svg-diagrams. The svg-diagrams are inlined into the output html.

Within markdown the type of the diagram is defined at the "language" level, e.g. "diagram-plantuml". The string after "diagram-" has to match the kroki diagram id.

  ```diagram-plantuml
  <some  plantuml markup>
   \```

Auto-save drafts in backend in intervals

When composing a new post, a draft should be persisted in intervals to avoid losing data when accidentally closing a tab or ending the session in some other way.

add i18n to Project

implement i18n to project.
add german and english messages

locale is set by env variables.

Global blog settings in admin panel

The admin panel should have some settings that can be toggled by ADMIN users in the UI.

For starters I'd suggest:

  • a boolean setting to turn on/off registrations of new users
  • an image upload setting for the blog logo (default to the hardcoded one)

Sometimes registering a new account results in error

Sometimes when a user filled the registration form and clicks submit, they get the message "User info not found!". When they try again it usually works, because it seems to be an issue that happens randomly sometimes.

Observed in production when logging in via our GitLab.

Basic rights/roles

Folgende Berechtigungen sind vorgesehen:

  • Administration: Zugang zum Admin-Bereich ohne Einschränkung - zunächst User-Verwaltung.
  • Post-Create: Blog-Eintrag anlegen
  • Post-Update: Blog-Eintrag ändern
  • Post-Delete: Blog-Eintrag löschen

Aufgaben:

  • Konzept/Umsetzung zum Speichern der Berechtigungen am User in der DB.
  • Buttons (Client) und Funktionen (Service) nutzen die Funktionen. Bei angemeldeten Benutzern werden die nicht-berechtigten Buttons deaktiviert. Bei nicht-angemeldeten Benutzern werden die Buttons mit Berechtigungen nicht angezeigt.

Login

Provide Login for the blog required for creating/editing posts.

The users are intended to be "internal" users.

  • Database table for users (Name, login, credentials or OpenId reference).
  • Technical login process - once decided if simple username/password or OpenId is to be used.
  • Login mechanism working. On the UI the logged in user is displayed (with logout button), and login button is displayed.

NOT:

  • Any extras like profile pictures or other infos for the authors.

Add external links to related sites

Provide a link to:

  • our website
  • the imprint (for now as external link to our website imprint, maybe there could even be an option to provide an imprint as markdown)
  • the GitHub repository for the blog

Either configure the links via environment variables, or make it configurable in UI: #37

Save progress in post creation form when leaving without saving

When I start writing a new post, but leave the page without saving, the progress should be saved and the user should be able to continue where they left off when they return to the form.

The state should probably be stored in local storage or session storage, kind of like how Github does it with comments on issues and PRs, which are stored in the session storage.

User Management UI

Administrative UI mit Liste aller Benutzer in der DB (alle, die sich schon mal registriert haben).

Erstmal ohne Suche/Filter/Paging.

Jeder Benutzer in einer Zeile, mit Checkboxen o.ä. für die Berechtigungen.

Benutzer können gelöscht werden. Es genügt im ersten Anlauf richtiges Löschen. Später evtl. nur markieren und damit erneute Registrierung sperren, oder ähnliche Mechanismen.

Datensparsam: Nur absolut relevante Benutzerdaten werden gespeichert -> Email-Adresse.

Berechtigung: Diese Seite sollte über die Nav-Bar ("Administration" ?) erreichbar sein und über das "Adminstrations"-Recht gesichert sein:

  • Der Administrations-Punkt wird nur angezeigt, wenn der Benutzer das Recht hat.
  • Der Serive sichert den Zugriff auf die Benutzerdaten über das Recht ab.

Improve frontend for uploads

  • Improve frontend to upload multiple items and reference them in text
  • Uploaded items should be listed
  • Uploaded items can be deleted
  • Uploaded items can be inserted into markdown
  • Uploaded images can be selected as cover image (max 1)

Update profile picture and user data from OAuth provider every time a user logs in

Currently we fetch the profile picture once on registration and then it does not change.

This should be done every time a user logs in, so changes in profile picture are reflected on our end.

Question: Should we allow people to opt-out of using the profile picture from the OAuth provider and instead use a different one or none?

UI for Version 1

  • Startansicht "Posts": Einfache Liste aller Posts, mit Suchfeld. Noch keine weiteren Infos.
    • Nav-Bar/Menü:
      • Login -> Direkt auf Google-Login/Registrierung
      • User-Name/Icon: Wenn angemeldet
      • Logout (wenn angemeldet)
      • Administration (wenn berechtigt)
      • Neuer Post (wenn berechtigt)
  • Post: Lese-Ansicht eines Artikels
    • Buttons: bearbeiten, löschen (wenn berechtigt)

Avoid SQL Injection

Avoid sql injection via type orm, as this is still possible via search function for example.

Finalize Authentication

Die Bearbeitung von Blog-Einträgen soll nur durch authentifizierte Benutzer erfolgen. Im ersten Wurf über Google-OAuth.

Der Login Button ist für jeden sichtlich, und jeder kann sich mit einem Google-Login anmelden. Neu angemeldete Benutzer werden in der Datenbank angelegt, aber ohne Rechte.

Über eine Umgebungsvariable wir eine Admin-Email-Adresse im Container konfiguriert. Wenn sich dieser Benutzer registriert, bekommt er auch gleich Admin-Rechte.

Aufgaben:

-[ ] Google als OAuth-Provider einrichten.
-[ ] Anleitung, wie ein neues Blog-Deployment (produktiv und für lokale Tests) bei Google registriert werden kann.
-[ ] Anlegen der Benutzer in die Datenbank, bei erstmaligem Login, ohne Rechte.
-[ ] Docker-Umgebungsvariable für Admin-Email umsetzen - diesen User bei erstmaligem Login mit Admin Rechten speichern.

See #6 & #4

Delete user

Extracted from #17:

Allow deletion of users:

  • a user should be able to delete their own account
  • admins should be able to delete user accounts

If there are still posts, these should be showing as „authored by a deleted user“.

UI setup

Initial setup of the main blog UI.

  • Single page Vue3-app for listing, reading and editing posts.
  • First welcome page/dashboard/article list (without data yet).
  • CSS-Framework already set up.

Not:

  • Admin UI: We will decide later, if this will be part of the main single page app, or on another page.
  • All the detail pages, editing, etc., and without login yet.

User Managment

Figure out how the user management, authentication and authorization should work.

Ideally deferred to some OpenID connect service like Azure (what we have for everybody).

Questions to be decided:

  • What user data has to be stored in the blog's DB?
  • What are the required roles? (Admin, Author, Anonymous, more?)
  • Should we start with OpenId right away, or better with something more simple?
  • If we use OpenId, which should be the first authentication provider? Keycloak? Azure-AD? Github? Google?
    It should be one that all fumiX developers can use right away, but is ideally also usable with OS in mind, i.e. others can install the app and can use it without too much hassle.

Add tags to posts

  • Add m:n tags to posts -> new form field in post create/edit form
  • Use tags to fill word cloud

Hide user info when getting posts

When getting a post from the backend, createdBy and updatedBy leaks complete user info (email, roles etc), that is not relevant to the client. This should be hidden. Only return what is relevant for display.

Database setup with TypeORM and Postgres

  • Setup TypeORM for database connectivity.
  • First Table for testing.
  • Configuration of database properties by environmentvariables.

DoD

Node server can access a postgres database.

Unify indentation

At the moment we use (at least) two different indentations:

  • 2 spaces (*.json, *.yml, on client side: *.ts)
  • 4 spaces (on server side: *.ts)

I created an .editorconfig file, so the different editors pick up the correct basic formatting (indentation, line feed type, character encoding, …). JetBrains IDEs have a plugin respecting .editorconfig files installed by default. In VSCode this extension needs to be installed.

Probably we should move to a unified indentation style across file types.

In order to avoid merge conflicts, this change should probably wait for a moment when there are as few branches around as possible.

cc @fumix/entwickler

Fix posts search results

This is about this endpoint, which returns e.g. createdBy and updatedBy as ID instead of entity:

await AppDataSource.manager
.createQueryBuilder(PostEntity, "post")
.select(["post.*", "ts_rank_cd(sp.post_tsv, to_tsquery(:searchTerm)) as rank", "count(*) over() as count"])
.setParameter("searchTerm", searchTerm)
.leftJoin("search_posts", "sp", "sp.post_id = id")
.where("sp.post_tsv @@ to_tsquery(:searchTerm)", { searchTerm: searchTerm })
.orderBy("rank", "DESC")
.offset(skipEntries)
.limit(itemsPerPage)
.getRawMany()
.then((result) => {
const count = result?.map((r) => r.count) as number[];
return res.status(200).json({ data: [result, count[0]] });
})
.catch((err) => next(err));

View of blog posts/articles

Edit/Display blog posts from DB.

First shot to blog posts, just markdown. When stored in the DB, the original markdown is stored and also the rendered HTML (caching).

  • Create database and ORM binding for blog posts.
  • Create blog posts (from the main/start page) -> Edit view
  • Edit blog posts -> Edit view again.

NOT:
kroki connect for diagramms (that's another story)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.