Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(readme): add gif for "give as a star" #828

Merged
merged 3 commits into from
Jan 10, 2025
Merged

feat(readme): add gif for "give as a star" #828

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2dfc28e
feat(readme): add gif for "give as a star"
emil14 Jan 10, 2025
479af1b
feat(assets): add html with d3 animation
emil14 Jan 10, 2025
a3241cf
feat(readme): add dataflow gif
emil14 Jan 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 16 additions & 4 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,12 @@

<h1>Neva Programming Language</h1>

<div align="center">
<i>Next-generation programming language that solves programmer's problems.</i>
</div>

<br/>

[**Documentation**](./docs/README.md)
| [**Examples**](./examples/)
| [**Community**](#-community)
Expand All @@ -15,10 +21,10 @@

![tests](https://github.com/nevalang/neva/actions/workflows/test.yml/badge.svg?branch=main) ![lint](https://github.com/nevalang/neva/actions/workflows/lint.yml/badge.svg?branch=main)

</div>
<p align="center">
<img src="./assets/animations/dataflow.gif" alt="Dataflow">
</p>

<div align="center">
<i>Next-generation programming language that solves programmer's problems.</i>
</div>

## 🤔 What Is Nevalang?
Expand Down Expand Up @@ -91,7 +97,13 @@ As you can see, this is quite an ambitious project. Typically, such projects are
- [Reddit](https://www.reddit.com/r/nevalang/)
- [Telegram group](https://t.me/+H1kRClL8ppI1MWJi)

Also, **please give us a star ⭐️** to increase our chances of getting into GitHub's trending repositories and tell your friends about the project. The more attention Nevalang gets, the higher our chances of actually making a difference!
### 🙏 Support

Please **give us a star ⭐️** to increase our chances of getting into GitHub trends - the more attention Nevalang gets, the higher our chances of actually making a difference.

<p align="center">
<img src="./assets/animations/github_star.gif" alt="GitHub Star">
</p>

## 💭 What's Next?

Expand Down
Binary file added assets/animations/dataflow.gif
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/animations/github_star.gif
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
238 changes: 238 additions & 0 deletions assets/animations/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,238 @@
<!DOCTYPE html>
<html>
<head>
<title>Neva Dataflow Animation</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>
<style>
body {
margin: 0;
background: #1a1f2c; /* Slightly lighter, more vibrant dark blue */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif;
}
.grid line {
stroke: #2a3343; /* Brighter grid lines */
stroke-width: 1px;
}
.node {
fill: #2d3748; /* Brighter node fill */
stroke: #4a5568; /* More visible node border */
stroke-width: 1.5px;
}
.port {
fill: #4299e1; /* Bright blue ports */
stroke: #63b3ed; /* Lighter blue port borders */
stroke-width: 1px;
}
.wire {
stroke: #4299e1; /* Bright blue wires */
stroke-width: 2px;
fill: none;
}
.wire-casing {
stroke: #2b6cb0; /* Darker blue wire casing */
stroke-width: 6px;
fill: none;
opacity: 0.6;
}
.message {
fill: #00ffff;
filter: drop-shadow(0 0 4px rgba(0, 255, 255, 0.7));
opacity: 0;
}
</style>
</head>
<body>
<svg id="dataflow" width="800" height="400"></svg>
<script>
const svg = d3.select("#dataflow");
const width = 800;
const height = 400;

// Create grid
const gridSize = 20;
const xGrid = d3.range(0, width, gridSize);
const yGrid = d3.range(0, height, gridSize);

const grid = svg.append("g").attr("class", "grid");

grid
.selectAll("line.vertical")
.data(xGrid)
.enter()
.append("line")
.attr("class", "vertical")
.attr("x1", (d) => d)
.attr("y1", 0)
.attr("x2", (d) => d)
.attr("y2", height);

grid
.selectAll("line.horizontal")
.data(yGrid)
.enter()
.append("line")
.attr("class", "horizontal")
.attr("x1", 0)
.attr("y1", (d) => d)
.attr("x2", width)
.attr("y2", (d) => d);

// Define nodes
const nodes = [
{ id: "input", x: 100, y: 200 },
{ id: "process1", x: 300, y: 150 },
{ id: "process2", x: 300, y: 250 },
{ id: "output", x: 500, y: 200 },
];

// Define connections
const links = [
{ source: "input", target: "process1" },
{ source: "input", target: "process2" },
{ source: "process1", target: "output" },
{ source: "process2", target: "output" },
];

// Draw connections first (to be under nodes)
const linkGenerator = d3.linkHorizontal();

// Add wire casings
const wireCasings = svg
.selectAll(".wire-casing")
.data(links)
.enter()
.append("path")
.attr("class", "wire-casing")
.attr("d", (d) => {
const sourceNode = nodes.find((n) => n.id === d.source);
const targetNode = nodes.find((n) => n.id === d.target);
return linkGenerator({
source: [sourceNode.x + 50, sourceNode.y],
target: [targetNode.x - 50, targetNode.y],
});
});

// Add actual wires
const wires = svg
.selectAll(".wire")
.data(links)
.enter()
.append("path")
.attr("class", "wire")
.attr("d", (d) => {
const sourceNode = nodes.find((n) => n.id === d.source);
const targetNode = nodes.find((n) => n.id === d.target);
return linkGenerator({
source: [sourceNode.x + 50, sourceNode.y],
target: [targetNode.x - 50, targetNode.y],
});
});

// Draw nodes
const nodeGroups = svg
.selectAll(".node-group")
.data(nodes)
.enter()
.append("g")
.attr("transform", (d) => `translate(${d.x},${d.y})`);

nodeGroups
.append("rect")
.attr("class", "node")
.attr("x", -50)
.attr("y", -30)
.attr("width", 100)
.attr("height", 60)
.attr("rx", 6);

// Add input/output ports
nodeGroups
.filter((d) => d.id !== "input")
.append("circle")
.attr("class", "port")
.attr("cx", -50)
.attr("cy", 0)
.attr("r", 4);

nodeGroups
.filter((d) => d.id !== "output")
.append("circle")
.attr("class", "port")
.attr("cx", 50)
.attr("cy", 0)
.attr("r", 4);

// Animate messages
function animateMessages() {
links.forEach((link) => {
const sourceNode = nodes.find((n) => n.id === link.source);
const targetNode = nodes.find((n) => n.id === link.target);

// Create a path for the message to follow
const pathData = linkGenerator({
source: [sourceNode.x + 50, sourceNode.y],
target: [targetNode.x - 50, targetNode.y],
});

const messagePath = svg
.append("path")
.attr("d", pathData)
.style("display", "none");

const message = svg
.append("circle")
.attr("class", "message")
.attr("r", 0)
.style("opacity", 0)
.attr(
"transform",
`translate(${sourceNode.x + 50},${sourceNode.y})`
);

// Fade in and grow
message
.transition()
.duration(400)
.style("opacity", 1)
.attr("r", 6)
.transition()
.duration(300)
.attr("r", 5);

// Move along path
message
.transition()
.delay(700)
.duration(1700)
.attrTween("transform", () => {
const pathNode = messagePath.node();
const pathLength = pathNode.getTotalLength();
return (t) => {
const point = pathNode.getPointAtLength(t * pathLength);
return `translate(${point.x},${point.y})`;
};
});

// Shrink and fade out
message
.transition()
.delay(2400)
.duration(300)
.attr("r", 6)
.transition()
.duration(400)
.style("opacity", 0)
.attr("r", 0)
.remove()
.on("end", () => messagePath.remove());
});

setTimeout(animateMessages, 3500);
}

// Start animation
animateMessages();
</script>
</body>
</html>
Loading