Skip to content

Commit

Permalink
πŸ“š Live docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@fonsp
fonsp committed Apr 11, 2020
1 parent 0f84ddb commit cb4ac1d
Show file tree
Hide file tree
Showing 7 changed files with 248 additions and 38 deletions.
2 changes: 1 addition & 1 deletion Project.toml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ name = "Pluto"
uuid = "c3e4b0f8-55cb-11ea-2926-15256bba5781"
license = "MIT"
authors = ["Fons van der Plas <fonsvdplas@gmail.com>", "MikoΕ‚aj Bochenski <iceflamecode@gmail.com>"]
version = "0.5.20"
version = "0.5.21"

[deps]
Base64 = "2a0f44e3-6c83-55bd-87e4-b1978d98bd5f"
Expand Down
134 changes: 119 additions & 15 deletions assets/editor.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,14 +86,15 @@
main {
margin: 0 auto;
margin-top: 100px;
margin-bottom: 4rem;
min-height: calc(100vh - 100px - 3.5rem - 4rem);
max-width: 960px;
align-content: center;
}

/* HEADER */

header {
body>header {
position: absolute;
top: 0px;
z-index: 5;
Expand All @@ -107,7 +108,7 @@
}


header h1 {
body>header h1 {
color: black;
letter-spacing: 2px;
}
Expand Down Expand Up @@ -220,14 +221,14 @@
transition: opacity .15s ease-in-out;
}

header:hover #logocontainer .CodeMirror,
header:focus-within #logocontainer .CodeMirror {
body>header:hover #logocontainer .CodeMirror,
body>header:focus-within #logocontainer .CodeMirror {
border: 2px solid #818181;
border-right: none;
}

header:hover #logocontainer button,
header:focus-within #logocontainer button {
body>header:hover #logocontainer button,
body>header:focus-within #logocontainer button {
opacity: 1.0;
}

Expand Down Expand Up @@ -402,12 +403,108 @@
content: "no";
}

#helpbox-wrapper {
display: none;
}

@media screen and (min-width: 1050px){

#helpbox-wrapper {
display: block;
position: sticky;
bottom: 0px;
height: 0px;
z-index: 5;
}

helpbox {
bottom: 0px;
right: 20px;
position: absolute;
display: flex;
flex-direction: column;
width: 300px;
height: 400px;
/* overflow: hidden; */

background-color: white;
/* border: 2px solid darkgray; */
border-right: none;
border-bottom: none;
border-top-left-radius: 9px;
box-shadow: 0 0 11px 0px #00000010;
font-family: "Alegreya Sans", sans-serif;
}

helpbox>header {
background-color: #eef1f7;
color: hsl(230, 14%, 11%);
padding: 15px;
font-family: "Roboto Mono", monospace;
font-weight: 600;
cursor: pointer;
/* border-top: 4px solid #8a8a8a; */
}

helpbox>section {
height: 100%;
overflow: auto;
padding: 10px;
}

helpbox>section h1,
helpbox>section h2,
helpbox>section h3,
helpbox>section h4,
helpbox>section h5,
helpbox>section h6 {
font-family: inherit;
border-bottom: none;
font-size: 1rem;
}

helpbox>section h1 {
font-size: 1.3rem;
}

helpbox.hidden {
height: initial;
}

helpbox.hidden>section {
display: none;
}

helpbox>header::before{
content: "πŸ“– ";
}

/* helpbox.loading>header::before{
content: "βŒ› ";
} */

helpbox.hidden>header::before{
content: "πŸ“š ";
}


}

@media screen and (min-width: 1050px) and (max-width: 1400px){
main {
margin-right: 350px;
}
}


footer {
width: 100%;
height: 3.5rem;
margin-top: 4rem;
font-family: "Roboto Mono";
font-size: .75rem;
background-color: #d7dcd3;
color: #333333;
z-index: 7;
}

footer form{
Expand Down Expand Up @@ -440,7 +537,7 @@
padding: 3px;
}

header button,
body>header button,
footer button{
background: #896c6c;
border-radius: 3px;
Expand Down Expand Up @@ -469,7 +566,7 @@
font-size: 14px;
}

header,
body>header,
preamble>button,
cell>button,
cellinput>button,
Expand All @@ -492,12 +589,12 @@
}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.0/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.0/mode/julia/julia.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.0/addon/hint/show-hint.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.0/addon/display/placeholder.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.0/codemirror.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.0/addon/hint/show-hint.min.css"></script>
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.50.0/lib/codemirror.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.50.0/mode/julia/julia.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.50.0/addon/hint/show-hint.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.50.0/addon/display/placeholder.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror@5.50.0/lib/codemirror.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror@5.50.0/addon/hint/show-hint.min.css"></script>

<link rel="stylesheet" href="/assets/light.css" />
<!-- The instant feedback form at the bottom of the page uses Google Firestore to save feedback. We DO NOT use analytics, and NO DATA is sent except for data entered in the feedback form. We might add telemetry in the future, and this will be an opt-in feature. -->
Expand Down Expand Up @@ -547,6 +644,13 @@
</cell>
</template>
</main>
<div id="helpbox-wrapper">
<helpbox class="hidden">
<header></header>
<section></section>
</helpbox>

</div>

<footer>
<div id="info">
Expand Down
78 changes: 75 additions & 3 deletions assets/editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,14 @@ document.addEventListener("DOMContentLoaded", () => {
}
})

editor.on("cursorActivity", (cm) => {
const token = cm.getTokenAt(cm.getCursor())

if(token.type != null && token.type != "string"){
updateDocQuery(token.string)
}
});

return editor
}

Expand Down Expand Up @@ -252,7 +260,7 @@ document.addEventListener("DOMContentLoaded", () => {
}
}

function createLocalCell(newIndex, uuid, code) {
function createLocalCell(newIndex, uuid, code, focus=true) {
if (uuid in window.localCells) {
console.warn("Tried to add cell with existing UUID. Canceled.")
console.log(uuid)
Expand All @@ -268,6 +276,7 @@ document.addEventListener("DOMContentLoaded", () => {
moveLocalCell(newCellNode, newIndex)

editor = createCodeMirrorInsideCell(newCellNode, code)
focus && editor.focus()

// EVENT LISTENERS FOR CLICKY THINGS

Expand Down Expand Up @@ -410,7 +419,7 @@ document.addEventListener("DOMContentLoaded", () => {
updateLocalCellInput(byMe, update.cellID, message.code)
break
case "cell_added":
createLocalCell(message.index, update.cellID, "").focus()
createLocalCell(message.index, update.cellID, "", true)
break
case "cell_deleted":
// TODO: catch exception
Expand Down Expand Up @@ -445,7 +454,7 @@ document.addEventListener("DOMContentLoaded", () => {
const promises = []

update.message.cells.forEach((cell, index) => {
const cellNode = createLocalCell(index, cell.uuid, "")
const cellNode = createLocalCell(index, cell.uuid, "", false)
promises.push(
client.sendreceive("getinput", {}, cell.uuid).then(update => {
updateLocalCellInput(true, cell.uuid, update.message.code)
Expand Down Expand Up @@ -610,6 +619,69 @@ document.addEventListener("DOMContentLoaded", () => {
})
}

/* LIVE DOCS */

window.desiredDocQuery = ""
window.displayedDocQuery = "nothing yet"
window.doc = document.querySelector("helpbox")

doc.querySelector("header").addEventListener("click", (e) => {
doc.classList.toggle("hidden")
updateDocQuery(window.desiredDocQuery)
})

var updateDocTimer = undefined

function updateDocQuery(query=undefined){
if(doc.classList.contains("hidden")){
doc.querySelector("header").innerText = "Live docs"
doc.querySelector("section").innerHTML = "Start typing code to learn more!"
window.displayedDocQuery = "the intro page 🍭"
return
}
if(!/[^\s]/.test(query)){
// only whitespace
return
}

if(query == undefined){
query = window.desiredDocQuery
}
if(query == displayedDocQuery){
return
}

window.desiredDocQuery = query


if(doc.classList.contains("loading")){
updateDocTimer = setTimeout(() => {
updateDocQuery()
}, 1000)
return
}

doc.classList.add("loading")
console.log("requesting " + query)
client.sendreceive("docs", {query: query}).then(u => {
if(u.message.status == "βŒ›"){
updateDocTimer = setTimeout(() => {
doc.classList.remove("loading")
updateDocQuery()
}, 1000)
return
}
doc.classList.remove("loading")
window.displayedDocQuery = query
if(u.message.status == "πŸ‘"){
doc.querySelector("header").innerText = query
doc.querySelector("section").innerHTML = u.message.doc
}
})
}

updateDocQuery()

/* ERROR HINTS */

const errorRewrites = [
Expand Down
4 changes: 2 additions & 2 deletions assets/light.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,12 +61,12 @@ celloutput>pre>code>a {


/* HEADER */
header {
body>header {
transition: background-color .5s ease-in-out;
background-color: white;
}

body.loading header {
body.loading>header {
background-color: hsla(290, 10%, 59%, 0.14);
}

Expand Down
10 changes: 5 additions & 5 deletions assets/welcome.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,11 @@
<script src="/assets/client.js"></script>
<script src="/assets/filepicker.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.0/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.0/addon/hint/show-hint.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.0/addon/display/placeholder.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.0/codemirror.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.0/addon/hint/show-hint.min.css"></script>
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.50.0/lib/codemirror.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.50.0/addon/hint/show-hint.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.50.0/addon/display/placeholder.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror@5.50.0/lib/codemirror.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror@5.50.0/addon/hint/show-hint.min.css"></script>

<style>
@import url('https://fonts.googleapis.com/css?family=Vollkorn:600,600i&display=swap&subset=latin-ext');
Expand Down
14 changes: 3 additions & 11 deletions src/react/React.jl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,21 +102,13 @@ end

"Return all variables that a cell references, including those referenced through function calls."
function all_references(notebook::Notebook, cell::Cell)::Set{Symbol}
calls = all_recursed_calls!(notebook, cell.symstate)
filter!(calls) do call
call in keys(notebook.combined_funcdefs)
end
return union(cell.symstate.references, (notebook.combined_funcdefs[func].references for func in calls)...)
return cell.symstate.references
end

"Return all variables that a cell assigns to, including mutable globals assigned through function calls."
function all_assignments(notebook::Notebook, cell::Cell)::Set{Symbol}
calls = all_recursed_calls!(notebook, cell.symstate)
filter!(calls) do call
call in keys(notebook.combined_funcdefs)
end
return union(cell.symstate.assignments, (notebook.combined_funcdefs[func].assignments for func in calls)...)
end
return cell.symstate.assignments
end

"Return all functions called by a cell, and all functions called by those functions, et cetera."
function all_recursed_calls!(notebook::Notebook, symstate::SymbolsState, found::Set{Symbol}=Set{Symbol}())::Set{Symbol}
Expand Down
Loading

5 comments on commit cb4ac1d

@fonsp
Copy link
Owner Author

@fonsp fonsp commented on cb4ac1d Apr 11, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@JuliaRegistrator register()

@JuliaRegistrator
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Registration pull request created: JuliaRegistries/General/12774

After the above pull request is merged, it is recommended that a tag is created on this repository for the registered package version.

This will be done automatically if the Julia TagBot GitHub Action is installed, or can be done manually through the github interface, or via:

git tag -a v0.5.21 -m "<description of version>" cb4ac1d30f8d7b148bbfe10ae4a2e0fdd9d3596f
git push origin v0.5.21

@fonsp
Copy link
Owner Author

@fonsp fonsp commented on cb4ac1d Apr 11, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#74

@fonsp
Copy link
Owner Author

@fonsp fonsp commented on cb4ac1d Apr 11, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#70

@fonsp
Copy link
Owner Author

@fonsp fonsp commented on cb4ac1d Apr 11, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#56

Please sign in to comment.