mirror of
https://github.com/urinalcaketopper/fddl.dev.git
synced 2025-06-05 21:14:47 +00:00
245 lines
13 KiB
HTML
245 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>fddl programming language</title>
|
||
<meta name="description" content="fddl is a small programming language inspired by various languages, designed to help learn language implementation concepts in Rust.">
|
||
<meta name="keywords" content="fddl programming language, Rust, hobby language, lexer, parser, interpreter, custom syntax, language implementation">
|
||
<meta name="author" content="Tristan">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta property="og:title" content="Fiddle Programming Language">
|
||
<meta property="og:description" content="A small programming language designed to help learn language implementation concepts in Rust.">
|
||
<meta property="og:url" content="https://fddl.dev/">
|
||
<meta property="og:type" content="website">
|
||
<meta name="twitter:title" content="Fiddle Programming Language">
|
||
<meta name="twitter:description" content="A Rust-based hobby programming language with custom syntax and unique features.">
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700|Source+Code+Pro:400,700" rel="stylesheet">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
|
||
<link rel="stylesheet" href="styles.css">
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<div class="container">
|
||
<a href="https://fddl.dev"><img src="logo-small.png" class="logo" alt="fddl temporary logo"></a>
|
||
<h1>fddl programming language</h1>
|
||
</div>
|
||
</header>
|
||
|
||
<nav>
|
||
<div class="container">
|
||
<ul>
|
||
<li><a href="#overview">Overview</a></li>
|
||
<li><a href="#features">Features</a></li>
|
||
<li><a href="#getting-started">Getting Started</a></li>
|
||
<li><a href="#examples">Examples</a></li>
|
||
<li><a href="#goals">Goals</a></li>
|
||
<li><a href="#contact">Contact</a></li>
|
||
</ul>
|
||
</div>
|
||
</nav>
|
||
|
||
<main class="container">
|
||
<section id="gallery" class="image-gallery">
|
||
<h2>Visual Progress</h2>
|
||
<img src="01.png" alt="Lexer Screenshot" onclick="openModal(this)">
|
||
<img src="02.png" alt="Lexer Tests Screenshot" onclick="openModal(this)">
|
||
<img src="03.png" alt="REPL Screenshot" onclick="openModal(this)">
|
||
<img src="04.png" alt="Parsing 'hello, world'" onclick="openModal(this)">
|
||
<img src="05.png" alt="ast progress" onclick="openModal(this)">
|
||
<img src="06.png" alt="arithmetic parsing" onclick="openModal(this)">
|
||
<img src="07.png" alt="Variables are being stored!" onclick="openModal(this)">
|
||
<p>Some building screenshots no one will care about. :)</p>
|
||
</section>
|
||
|
||
<section id="overview">
|
||
<h2>Overview</h2>
|
||
<p>fddl is a small programming language inspired by various languages, designed to help learn language implementation concepts in <a href="https://rust-lang.org">Rust</a>.</p>
|
||
<p>For years, I’ve tried to learn various programming languages, and while I could master the basics, the real-world projects often eluded me. And I wouldn't know who to turn to even if I knew where to start.</p>
|
||
<p>fddl was born out of this journey. fddl is my attempt to combine the aspects I appreciate from many languages into something uniquely my own.</p>
|
||
<p>I started learning Rust and have really liked it. I've been following tutorials and the <a href="http://craftinginterpreters.com/">Crafting Interpreters</a> site as guides for this very problematic programming language.</p>
|
||
<p>I like aspects of so many programming languages, but I don't really like any of them, so I always found it hard to pick one and stick with it. But I had the same problem playing World of Warcraft, too.</p>
|
||
<p>So I, like many of you, decided to make a hobby programming language to see what may be able to be done with it. This is a brand new project as of September 2024 and I am one person.</p>
|
||
<p>The fact that I have a REPL working in this language is nothing short of amazing to me. It's fucking magic.</p>
|
||
</section>
|
||
|
||
<section id="features">
|
||
<h2>Features</h2>
|
||
<ul class="task-list"> <li><strong>Custom syntax:</strong> fddl introduces unique operators and keywords to make programming more intuitive and fun (at least for me).</li>
|
||
<li><strong>Lexer:</strong> Tokenizes fddl scripts into understandable pieces of the language.</li>
|
||
<li><strong>Parser:</strong> Currently under active development, the parser can successfully handle operators (including the Tilde Operator) and function calls. Work is ongoing to support more complex structures.</li>
|
||
<li><strong>Tilde Operator</strong> (<code>~</code> and <code>~=</code>): For when something almost equals something else. I had the idea from watching a video on <a href="https://www.youtube.com/watch?v=_ZSFRWJCUY4">Non-Euclidean Doom</a>.</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<section id="getting-started">
|
||
<h2>Getting Started</h2>
|
||
<p>Keep in mind, this is only at the lexer stage currently. It'll read your inputs and that's it. <em>(Consider updating this statement based on parser progress)</em></p>
|
||
<p>To clone the repo:</p>
|
||
<pre><code class="language-bash">git clone https://git.fddl.dev/fddl/fddl.git</code></pre>
|
||
<p>To run the REPL:</p>
|
||
<pre><code class="language-bash">cargo run</code></pre>
|
||
<p>To parse a fddl script:</p>
|
||
<pre><code class="language-bash">cargo run path/to/script.fddl</code></pre>
|
||
</section>
|
||
|
||
<section id="examples">
|
||
<h2>Examples:</h2>
|
||
<p><em>(The following is an example of intended fddl syntax - actual runnable capability depends on current parser/interpreter state)</em></p>
|
||
<pre><code class="language-fddl">func main() {
|
||
// print statement
|
||
print("hello, world in fddl");
|
||
|
||
// variable declaration
|
||
let y = 5;
|
||
|
||
// if statement
|
||
if (x > 10) {
|
||
print("x is greater than 10");
|
||
}
|
||
|
||
// while loop
|
||
while (x < 100) {
|
||
print(x);
|
||
let x = x + 1;
|
||
}
|
||
}</code></pre>
|
||
<p>At least for right now. I still want to do something odd.</p>
|
||
</section>
|
||
|
||
<section id="running-project">
|
||
<h2>Running the Project</h2>
|
||
<p>Make sure your project compiles and the tests pass:</p>
|
||
<pre><code class="language-bash">cargo build
|
||
cargo test
|
||
cargo run</code></pre>
|
||
<p>Again, <code>cargo run</code> only starts the REPL for testing.</p>
|
||
<p>running <code>fddl examples.fddl</code> (from the git repo) produces <a href="examples-output.txt">the following</a>.</p>
|
||
</section>
|
||
|
||
<section id="goals" class="goals-projections">
|
||
<h2>Goals and Projections</h2>
|
||
<p><strong>Note:</strong> This is not a final list; it's words on paper (metaphorically) at the time of writing.</p>
|
||
|
||
<p><strong><code>Lexer</code>:</strong></p>
|
||
<ul class="task-list">
|
||
<li class="task-list-item"><input type="checkbox" checked disabled> Built and tested for basic syntax and operators.</li>
|
||
<li class="task-list-item"><input type="checkbox" checked disabled> Supports single-line and documentation comments.</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled> Add support for more complex syntax and features.</li>
|
||
</ul>
|
||
|
||
<p><strong><code>Parser</code>:</strong></p>
|
||
<ul class="task-list">
|
||
<li class="task-list-item"><input type="checkbox" checked disabled> Parser parsing tilde and minus successfully.</li>
|
||
<li class="task-list-item"><input type="checkbox" checked disabled> Parser parsing the rest of the operators. (mostly complete)</li>
|
||
<li class="task-list-item"><input type="checkbox" checked disabled> Parser parsing function calls.</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled> Working on building out functions to parse simple functionality in the language (if, while, for), and to read their expressions and values</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled> Implement parsing for <strike>function calls</strike>, expressions, checks, literally everything.</li>
|
||
</ul>
|
||
|
||
<p><strong><code>Compiler</code>:</strong></p>
|
||
<ul class="task-list">
|
||
<li class="task-list-item"><input type="checkbox" disabled> Currently a placeholder. We're a long way from here. If I see this step I'll be lucky.</li>
|
||
</ul>
|
||
|
||
<p><strong>Comments:</strong></p>
|
||
<ul class="task-list">
|
||
<li class="task-list-item"><input type="checkbox" checked disabled> Added support for single-line and documentation comments.</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled> Implement multi-line comments.</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled> Implement document building comments.</li>
|
||
</ul>
|
||
|
||
<p><strong>Error Handling:</strong></p>
|
||
<ul class="task-list">
|
||
<li class="task-list-item"><input type="checkbox" disabled> Replace <code>stderr</code> with a more robust error handling mechanism.</li>
|
||
</ul>
|
||
|
||
<p><strong>Testing:</strong></p>
|
||
<ul class="task-list">
|
||
<li class="task-list-item"><input type="checkbox" checked disabled> Added initial <code>lexer</code> tests.</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled> Expand tests to cover more syntax and edge cases.</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<section id="license">
|
||
<h2>License</h2>
|
||
<p>This project is licensed under the <a href="https://www.gnu.org/licenses/gpl-3.0.en.html" target="_blank">GPL</a>.</p>
|
||
</section>
|
||
|
||
<section id="contact" class="contact-section"> <h2>Contact & Links</h2>
|
||
<p><a href="/cdn-cgi/l/email-protection#cabeb8a3b9beaba48aacaeaea6e4aeafbc">Contact via Email</a></p> <p><a href="https://git.fddl.dev/fddl/fddl" target="_blank">Git repo</a></p>
|
||
</section>
|
||
</main>
|
||
|
||
<footer>
|
||
<div class="container">
|
||
© 2025 fddl Programming Language
|
||
</div>
|
||
</footer>
|
||
|
||
<div id="imageModal" class="modal">
|
||
<span class="close-modal" onclick="closeModal()">×</span>
|
||
<img class="modal-content" id="modalImage">
|
||
<div id="caption" class="modal-caption"></div>
|
||
</div>
|
||
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
|
||
<script>hljs.highlightAll();</script>
|
||
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
|
||
<script>
|
||
document.addEventListener("DOMContentLoaded", function() {
|
||
const sections = document.querySelectorAll("section[id]");
|
||
const navLi = document.querySelectorAll("nav ul li a");
|
||
|
||
window.addEventListener("scroll", () => {
|
||
let current = "";
|
||
sections.forEach(section => {
|
||
const sectionTop = section.offsetTop;
|
||
if (pageYOffset >= sectionTop - (section.clientHeight / 3) ) {
|
||
current = section.getAttribute("id");
|
||
}
|
||
});
|
||
|
||
navLi.forEach(a => {
|
||
a.classList.remove("active");
|
||
if (a.getAttribute("href") === "#" + current) {
|
||
a.classList.add("active");
|
||
}
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
<script>
|
||
// Get the modal
|
||
var modal = document.getElementById("imageModal");
|
||
var modalImg = document.getElementById("modalImage");
|
||
var captionText = document.getElementById("caption");
|
||
|
||
// Function to open the modal
|
||
function openModal(element) {
|
||
modal.style.display = "block";
|
||
modalImg.src = element.src;
|
||
captionText.innerHTML = element.alt; // Use alt text as caption
|
||
}
|
||
|
||
// Function to close the modal
|
||
function closeModal() {
|
||
modal.style.display = "none";
|
||
}
|
||
|
||
// Close modal if user clicks anywhere outside the image
|
||
window.onclick = function(event) {
|
||
if (event.target == modal) {
|
||
closeModal();
|
||
}
|
||
}
|
||
|
||
// Optional: Close modal with Escape key
|
||
document.addEventListener('keydown', function(event) {
|
||
if (event.key === "Escape") {
|
||
closeModal();
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |