Git Product home page Git Product logo

core-beta's Introduction

core-beta

Rewritten version of the CTFd core theme to use Bootstrap 5, Alpine.js, and vite to improve upon the existing CTFd theme structure.

Subtree Installation

Add repo to themes folder

git subtree add --prefix CTFd/themes/core-beta [email protected]:CTFd/core-beta.git main --squash

Pull latest changes to subtree

git subtree pull --prefix CTFd/themes/core-beta [email protected]:CTFd/core-beta.git main --squash

Subtree Gotcha

Make sure to use Merge Commits when dealing with the subtree here. For some reason Github's squash and commit uses the wrong line ending which causes issues with the subtree script: https://stackoverflow.com/a/47190256.

Todo

  • Document how we are using Vite
  • Create a cookie cutter template package to use with Vite

core-beta's People

Contributors

acursedcomrade avatar cgoecknerwald avatar coldheat avatar dbucki avatar ddomdel avatar erdnaxe avatar frankli0324 avatar github-actions[bot] avatar gramthanos avatar milymilo avatar web1n avatar whitehoodhacker avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

core-beta's Issues

question on challenge load hooks for plugins

as implemented in async loadChallenge(challengeId), core-beta invokes displayChallenge in CTFd.js which downloads view.js for a challenge and does this:

https://github.com/CTFd/CTFd.js/blob/65df4e05fa039b6e464d50e62423e4536580f318/pages/challenge.js#L18-L33

before core-beta, postRender is invoked after the html is actually rendered, yet core-beta uses alpinejs, so show() the modal takes effect after the entire displayChallenge, which breaks the logic of a plugin which relied on postRender to get the challenge id with jquery($('#challenge-id')) and load the challenge info.

I think what I really need is CTFd._internal.challenge.data.id, yet I still wonder should postRender keep the previous behavior when virtual dom is actually rendered? otherwise what's the point of the postRender hook?

FileNotFoundError

CTFd will frequently throw a FileNotFoundError while yarn/vite is building because the manifest file hasn't been generated.

This is something we should investigate on fixing.

Scoreboard page loads empty graph if no solves

The scoreboard page of the current core theme loads a replacement text ("No solves yet") if there are no solves. This probably got lost or was deleted intentionally in this rewrite.

A simple solution for this would be to either implement something similar to the core theme or implement a check of the data in scoreboard.js that changes some variable and updates the page via Alpine.js structures in the template (for example x-if).

The second option seems cleaner to me since it separates the template from the logic part. I implemented this version locally and could push or paste it somewhere if it helps. However, there are many possible solutions for this. I simply wanted to bring this to your attention so that it is not forgotten.

Show notification count in title

Show a notification count in the title to make it clearer when people should go read a notification.

This needs to be synced across all CTFd tabs so it's a little tricky.

Framework question

  • Is there a place where the selection of alpine over vue was discussed?

After running UIUCTF 2023, I felt that alpine was insufficient for our needs, and would have greatly preferred a Vue base. I am considering doing a full rewrite of core-beta in Vue, but would be happy to talk more about it with you first.

SSE tab limit doesn't appear to work

We do not seem to be releasing the SSE connection with each tab. We need to release the connection if we have too many tabs because users will be unable to interact with CTFd if they have too many tabs open.

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.