Online Note Taking App with full markdown and HTML support
notes.marcusj.tech
A simple, clean, notepad in your browser! Full markdown support with instant rendering, side by side. Create multiple notes!
I need to fix the mobile view for the notes page but the demo page should be fine
Marcus, could I use this idea and create one myself?
@HahaYes Yes of course, you don't have to ask me for permission! I just ask that you show me when you're done :)
@HahaYes Hey, I saw your repl, and if you want to get db.py
working, you'll need to set up a project on Google Firebase, set up a Firestore
DB, generate a config.json
file. And then, how I've set up from_env
to work is that you'll want to base64 encode the contents of your config and paste that in your .env
file like CONF=EXAMPLEBASE64DATA==
@MarcusWeinberger oh lol yeah I forked your project, I do my work on VSCode and Sublime not on here
This is nice, I was actually thinking about making this yesterday.
nice!
WOW! I've never seen such a beautiful flask project! THUMBS UP MY FRIEND!
@JosephSanthosh Thank you very much! I don't have a lot of experience with web design, most of my projects have no UI, so that means a lot to me :)
@MarcusWeinberger BRO THIS IS INSANE! THUMBS UP MAN
@BobTheTomatoPie How are you so damn good at CSS. Also, mind sending me a link to that note? Just click the "Create Link" button on the top navbar
sure, I have ton of css practice @MarcusWeinberger
there is one problem, i cant reach the button lmao, all of them are stuck on top of each other @MarcusWeinberger
@BobTheTomatoPie Ahah oh no, hmm maybe you could make a new blank note, create a link to it, and then copy and paste your css in that new note. The link you made should update with the new content
lemme try, also it will look a bit different as I have edited it a bit since you saw the screenshot @MarcusWeinberger
@BobTheTomatoPie Sure thing
here I just grabbed the inner stuff, cause it's not creating links when I press create link @MarcusWeinberger
<style> *{ width: 1000vw; height: 50 00vh; background: #367; color: white; font-family: impact; border: 10px solid white; box-shadow: 10px 10px 10px 10px black; border-radius: 1000px; animation: insane 10s infinite; @keyframes insane{ from{font-size: 2px;} to(font-size: 1000px;} } } <style>@BobTheTomatoPie oh I'll look into that, it should be working, but thanks
@BobTheTomatoPie Did you click on the note (open it) and then click "Create Link"?
yep i did that @MarcusWeinberger
@BobTheTomatoPie That's really strange. I'm seeing an error in the logs as well but I can't replicate it myself and I have no clue what's causing it. Btw I put your css up at https://notes.marcusj.tech/link/cancer or alternatively you can embed it with <link rel='stylesheet' href='https://notes.marcusj.tech/link/styles.css?render=false'>
okay, hope you fix it soon @MarcusWeinberger
@MarcusWeinberger you are going to have competition soon/now. https://repl.it/talk/share/PIE-Prism-Integrated-Editor/49018
@Lethdev2019 Your editor is very cool ;) I like the syntax highlighting. I might try add that, I also am looking into adding emoji support :flushed:
@MarcusWeinberger well, i made a decision... let's make something like codesandbox and codepen (and repl.it ;) )
plus, we are open to feedback to improve it.
@Lethdev2019 That sounds really cool, it would also be neat if you could import the code you're editing directly into your project, e.g. edit a css file using the service, then in your html just do like: <link rel='stylesheet' href='https://coderepl.lethdev2019.repl.co/@myName/project/styles.css'>
That would be slick
that is planned for the html,css and js editor.
in a matter of fact, it will insert those into an iframe for that meaning we do not actually need to store the files unless we create a save function, which we are.
the reason i am choosing an iframe is so that it is independent of the website so your css does not change the site css.
oh we are planning a dashboard, auto save function that DOES NOT DISCONNECT YOU EVERY 5MINS ONLY FOR YOU TO LOSE YOUR PROGRESS and something across the lines of repl talk.
I got a node server up for the team so we can continue this project.
I want to say that it is on github here https://github.com/Lethdev2019/PIE
@Lethdev2019 Very nice! I had an autosave function, but the server responds too slowly. I think I'll make an autosave function that doesn't save every keystroke, just saves every minute or so. I've just about finished adding in links
@MarcusWeinberger, well, i know a couple secrets to fix that.
tip: don't use input or on-keydown use on key-up. this is because on keyup waits for typing to stop.
not telling you the rest. Competition is needed.
@MarcusWeinberger also, i am adding blur effect (windows acrylic type blur)
@Lethdev2019 Very nice, I just added direct document linking, try it out! Click the Create Link
button in the navbar when editing a note
@MarcusWeinberger also, just saying that having competition is healthy as you want to create better features than the other person and the other person wants to do that too.
@Lethdev2019 Oh yeah of course, nothing wrong with a little competition, but I'm always happy to help if I ever can.
@Lethdev2019 Seems to work fine, I'd rather render the markdown server-side for now but this is the best I can do for now. And the public link should update if you change the note you created it from!
ok it works and changes @MarcusWeinberger
@MarcusWeinberger I got inspired and created my own from scratch (it is currently created --> https://markedjs.lethdev2019.repl.co
you could use this in a blog as an editor and page preview, seriously, Go for it! ;)
I also would love to help with this too because why not?
@Lethdev2019 Ooh that looks very cool especially the line numbering and braces. I'm really not good with HTML and JS and such but I might try implement this
we have a new prototype - https://pie-nodejs.foxglovedev.repl.co/
how is this version?
@MarcusWeinberger
@Lethdev2019 Pretty cool, but I've also added some new features to mine ;)
It looks very cool though and I like the theme, I still need to get around to adding a dark theme to mine. But test out the embedded JavaScript feature on mine. You can put {{ js|document.cookie }}
, for example, and it'll turn it into <span id='some-uuid'></span><script>document.getElementById('some-uuid').innerHTML = eval('document.cookie')</script>
, and you can do {{ date }}
which will get replaced with the current date at the time
ok i'll try that. @MarcusWeinberger
pretty cool.
I am thinking of adding a note-taking slide out tray to put your pieces of code and... notes. we might also have a dashboard to have "notebooks" and "containers" (where you code).
still hanging on to auto save.
@Lethdev2019 Yeah that sounds really cool, I need to work on autosave :/
This is nice
Awesome!
Enjoy an upvote from me :)
It says I need a key of sorts, I see you pull a "Secret Key" from a file but I can't fine the file, what do I do to fix it?
Excellent Coding! :D
@BobTheTomatoPie Ahah well I guess that's cool
@BobTheTomatoPie Damn, I'm not sure how I can. I didn't think about that
Lmao its fun to mess around with at least @MarcusWeinberger
wow and i thought this was impossible with repl & python. Good job! I have one question, how did you make the icon for the title? eg: <title> hi </title> < For that. It has a note icon next to the "title". I have always been curious about those icons. Thanks.
@Code1Tech Ah basically, if you look in templates/base.html
there's a tag in the header of the page. <link rel="icon" type="image/svg+xml" sizes="48x48" href="/static/note.png">
oh i get it now! thanks for the help! @MarcusWeinberger
nice
Fortnite ps4 vs pro by anonymous fortnite ps4 vs pro by anonymous fortnite ps4 vs pro by anonymous fortnite ps4 vs pro by anonymous fortnite ps4 vs pro by anonymous fortnite ps4 vs pro by anonymous fortnite ps4 vs pro by anonymous fortnite ps4 vs pro by
Danget..I was gonna do something like this :(
man
this is good!
tag the #GoodPostArmy
Nice. Well done
cool
Cool!
SO COOL!
This text editor is really awesome! It's got great features, and it is convenient, simple, and elegant.
could you explain all of your imports in db.py?
@HahaYes Sure, everything in db.py
is purely to connect to Google Firebase. firebase_admin
is needed to run the firebase_admin.initialize_app
method. from firebase_admin import credentials
is needed to create a credentials.Certificate
instance, which has my client configuration and security keys, which is used to initialize the firebase app. firestore
is to connect and interact with the firestore database.
@HahaYes Whoops, forgot about cryptobaker
, that's a library I made. I use it to make my hashing algorithms as you can see in DB.hash
. The datetime
, base64
, json
, and os
modules are for decoding my configuration from my .env
file (only visible to me), and generating timestamps for when notes were last edited
@MarcusWeinberger thanks for the detailed response!
Nice