teknologi-umum/graphene

Lighter Carbon alternative made with Shiki

graphene's Issues

Frontend: Display error message properly instead of setting the returned json as image source

You can produce a simple error by submitting an empty code. The backend should return following error message:

{"msg":["`code` is required!"]}

fix linebreaks

treating tabs

should we treat tabs (\t) as double spaces or four spaces? right now it's ugly

cc @elianiva

toggle line number

Broken links on readme

nuff said

create the frontend

too lazy to write the issue, got some work to do, just read this:

INSTRUCTIONS

• just clone ray.so or cabon.now.sh's frontend. make it as best as you can.
• use codemirror to display user's code
• create a footer that links to this repository and teknologi umum's telegram group

deploy pake fly.io

Terserah siapa yg mau ambil, aku masih sibuk, hehe (baca: males)

change the favicon to graphene logo

CSP error when clicking ▶ button

Refused to connect to 'https://teknologi-umum-graphene.fly.dev/api' because it violates the document's Content Security Policy.

figure out why the tests don't work with the latest esbuild-node-loader

note to self

don't use macos frame

changed my mind, it's literally everywhere and I don't fancy being one of them lol

support multiple fonts

• SFMono Nerd Font
• FiraCode Nerd Font

dependency: update polka and flourite to latest

consider this patch: https://github.com/lukeed/polka/releases/tag/v1.0.0-next.22

and of course flourite has some more language support :)

Give visual cue to indicate that a request is ongoing

Change the ▶ button into a spinner, disable some part of the form, or animate anything to give visual cue that indicates an ongoing request. Also show error message on failure.

prepare for hacktoberfest

cc @elianiva

• create CONTRIBUTING.md
• create pull request template -- PR without opening an issue first would be rejected
• put hacktoberfest tag
• put a few hacktoberfest guides on readme such as:
  • https://twitter.com/sudo_navendu/status/1437456596473303042
  • https://www.digitalocean.com/community/tutorials/hacktoberfest-contributor-s-guide-how-to-find-and-contribute-to-open-source-projects

Make `<pre>` tag responsive

make it scroll horizontally but not vertically

leleeettt

kemungkinan masalah:

• startup browser lelet
• shiki lelet (unlikely)

kemungkinan solusi:

• pake 1 browser aja, gausah buka tutup

bug: font not correctly rendered

Two cases:

they should not be italic nor bold

implement helmet and other security protection stuffs

• https://github.com/helmetjs/helmet
• rate limiter (this is up to you)

chore: bump esbuild-node-loader

We need to bump it to support node >=16.12.0. Just need to wait for antfu/esbuild-node-loader#19

In the meantime, let CI use node 16.11.0

See: nodejs/node#37468

fix CD

me brain too smol, couldn't cope with this thing

support more themes

it should support all shiki themes, see https://github.com/shikijs/shiki/blob/main/docs/themes.md

Use `@teknologi-umum/eslint-config` for ESLint config

see https://github.com/teknologi-umum/bot/blob/refactor/october/.eslintrc.json

update nodejs version on docker and nvmrc to newer lts

https://github.com/nodejs/node/blob/master/doc/changelogs/CHANGELOG_V16.md#16.13.1

latest lts is v16.13.1

why?

• npm v8 of course
• less vulnerability problem

might as well change from debian-buster (aka debian 10) to debian-bullseye (aka debian 11) from the docker hub (https://hub.docker.com/_/node)

Default font on frontend to SF Mono?

Because we have too much problems with ligature, should we change the default font on the frontend app to be SF Mono instead of JetBrains Mono?

Also should we dump the use of NerdFont and use the regular font instead?

How about adding more fonts? Lol

cc @elianiva

feat: generate client side

since there's https://shikiji.netlify.app/ now we should be able to write a polymorphic generate function which can highlight the code both on client side and server side for better experience

add auto-detect

self explanatory

Crash after one request(?)

context: teknologi-umum/bot#111

API not working

When I try to send a post request to the API endpoint from my AWS server, it doesn't works and gives me 403 Forbidden, where same piece of code works fine in my local enviourment. Can you please help?

Bug: Error is returned when C# code is submitted

How to reproduce:

1. Send following code:

using System;

2. Optional: Set language to Csharp
3. Submit

The following data is returned instead of an image:

data:application/json;base64,eyJtc2ciOiJTb21ldGhpbmcgd2VudCB3cm9uZyBvbiBvdXIgc2lkZS4ifQ==

{"msg":"Something went wrong on our side."}

Double spaces on svg format

Choosing svg as the output format results in double spaces

Comparison

PS I used the web version, havent tried sending a POST request

Edited (1 Oct 2023):
Not reproducible anymore :/

My code at the time

function pascalsTriangle(size) {
  const result = [[1]];

  for (let i = 0; i < size; i++) {
    const row = [];

    for (let j = 0; j <= i + 1; j++) {
      row.push((result[i][j] ?? 0) + (result[i][j - 1] ?? 0));
    }

    result.push(row);
  }

  return result;
}

function formatTriangle(triangle) {
  const SPACE = '  ';
  const size = triangle.length;

  for (let rowIndex = 0; rowIndex < size; rowIndex++) {
    let row = '';
    const leftPadding = size - rowIndex;

    row += SPACE.repeat(leftPadding);
    row += triangle[rowIndex].map(num => num.toString().padStart(SPACE.length * 2)).join('');

    console.log(row);
  }
}

formatTriangle(pascalsTriangle(10));

add more image format

Task

should be able to generate png/jpg/webp/etc

Problem

right now, PNG is the default format. it kinda wastes server's bandwidth quota for serving large images. and users would need more download time

References

• see puppeteer's screenshot options here
• a few image converter/compressor here

Frontend: make dropdowns respond to mouseup instead of mousedown

Mouseup event is more natural and more widely used than mousedown

Frontend: Dismiss settings popup when we click outside the popup

Currently we have to click the gear icon again to close it.

implement logtail

move to docker-alpine or docker-slim

memory overload problem on deployment

lowering down to chromium or alpine might be a solution for that.

dark mode support for frontend

just add dark mode support and do your best once #42 is merged

or while #42 haven't been merged yet, you may put a PR that's targeting the feat/frontend-2 branch

mobile support for frontend

right now it's desktop only. it'd be nice if it supports responsive layout like tablets and phone.

simply enhance the css for it, once #42 is merged

or while #42 haven't been merged yet, you may put a PR that's targeting the feat/frontend-2 branch