tristan/fddl.dev
1
0
Fork 0
mirror of https://github.com/urinalcaketopper/fddl.dev.git synced 2025-06-06 13:34:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

new design

Browse Source
This commit is contained in:
Tristan 2025-05-29 02:22:41 -04:00
parent e83923f04a
commit b86160a9b8
2 changed files with 331 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

216
index.html
View File

@ -3,150 +3,204 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>fddl programming language</title> <title>fddl programming language</title>
<!-- Meta Tags for SEO -->
<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="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="keywords" content="fddl programming language, Rust, hobby language, lexer, parser, interpreter, custom syntax, language implementation">
<meta name="author" content="Tristan"> <meta name="author" content="Tristan">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Open Graph Meta Tags for Social Sharing -->
<meta property="og:title" content="Fiddle Programming Language"> <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: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:url" content="https://fddl.dev/">
<meta property="og:type" content="website"> <meta property="og:type" content="website">
<!-- Twitter Card Meta Tags -->
<meta name="twitter:title" content="Fiddle Programming Language"> <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:description" content="A Rust-based hobby programming language with custom syntax and unique features.">
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:card" content="summary_large_image">
<!-- Google Fonts --> <link href="https://fonts.googleapis.com/css?family=Roboto:400,700|Source+Code+Pro:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700|Source+Code+Pro" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
<!-- Highlight.js Styles -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/default.min.css">
<!-- Custom Stylesheet -->
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
</head> </head>
<body> <body>
<header> <header>
<a href="https://fddl.dev"><img src="logo-small.png" class="logo" alt="fddl temporary logo"></a> <div class="container">
<h1>fddl programming language</h1> <a href="https://fddl.dev"><img src="logo-small.png" class="logo" alt="fddl temporary logo"></a>
<h1>fddl programming language</h1>
</div>
</header> </header>
<main>
<section class="images"> <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"> <img src="01.png" alt="Lexer Screenshot">
<img src="02.png" alt="Lexer Tests Screenshot"> <img src="02.png" alt="Lexer Tests Screenshot">
<img src="03.png" alt="REPL Screenshot"> <img src="03.png" alt="REPL Screenshot">
<img src="04.png" alt="Parsing 'hello, world'"> <img src="04.png" alt="Parsing 'hello, world'">
<img src="05.png" alt="ast progress"> <img src="05.png" alt="ast progress">
<img src="06.png" alt="arithmatic parsing"> <img src="06.png" alt="arithmetic parsing">
</section> </section>
<h2>Overview</h2> <section id="overview">
<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> <h2>Overview</h2>
<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 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>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>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>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>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 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>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>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>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>The fact that I have a REPL working in this language is nothing short of amazing to me. It's fucking magic.</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>
<h2>Features</h2> <section id="features">
<ul> <h2>Features</h2>
<li><strong>Custom syntax</strong> fddl introduces unique operators and keywords to make programming more intuitive and fun (at least for me)</li> <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> currently is the only thing working. It tokenizes fddl scripts into understandable pieces of the language.</li> <li><strong>Lexer:</strong> Tokenizes fddl scripts into understandable pieces of the language.</li>
<li><strong>Tilde Operator</strong> (<code>~</code> and <code>~=</code>) 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> <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>
</ul> <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>
<h2>Getting Started</h2> <section id="getting-started">
<p>Keep in mind, this is only at the lexer stage currently. It'll read your inputs and that's it.</p> <h2>Getting Started</h2>
<p>To clone the repo:</p> <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>
<pre><code class="language-bash">git clone https://git.fddl.dev/fddl/fddl.git</code></pre> <p>To clone the repo:</p>
<p>To run the REPL:</p> <pre><code class="language-bash">git clone https://git.fddl.dev/fddl/fddl.git</code></pre>
<pre><code class="language-bash">cargo run</code></pre> <p>To run the REPL:</p>
<p>To parse a fddl script:</p> <pre><code class="language-bash">cargo run</code></pre>
<pre><code class="language-bash">cargo run path/to/script.fddl</code></pre> <p>To parse a fddl script:</p>
<pre><code class="language-bash">cargo run path/to/script.fddl</code></pre>
</section>
<h2>Examples:</h2> <section id="examples">
<pre><code class="language-rust">func main() { <h2>Examples:</h2>
// print statement <p><em>(The following is an example of intended fddl syntax - actual runnable capability depends on current parser/interpreter state)</em></p>
print("hello, world in fddl"); <pre><code class="language-fddl">func main() {
// print statement
// variable declaration print("hello, world in fddl");
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>
<h2>Running the Project</h2> // variable declaration
<p>Make sure your project compiles and the tests pass:</p> let y = 5;
<pre><code class="language-bash">cargo build // 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 test
cargo run</code></pre> cargo run</code></pre>
<p>Again, <code>cargo run</code> only starts the REPL for testing.</p> <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> <p>running <code>fddl examples.fddl</code> (from the git repo) produces <a href="examples-output.txt">the following</a>.</p>
</section>
<div class="notes"> <section id="goals" class="goals-projections">
<h2>Goals and Projections:</h2> <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>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> <p><strong><code>Lexer</code>:</strong></p>
<ul> <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> 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" 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> <li class="task-list-item"><input type="checkbox" disabled> Add support for more complex syntax and features.</li>
</ul> </ul>
<p><strong><code>Parser</code>:</strong></p> <p><strong><code>Parser</code>:</strong></p>
<ul> <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 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 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" 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> 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> <li class="task-list-item"><input type="checkbox" disabled> Implement parsing for <strike>function calls</strike>, expressions, checks, literally everything.</li>
</ul> </ul>
<p><strong><code>Compiler</code>:</strong></p> <p><strong><code>Compiler</code>:</strong></p>
<ul> <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> <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> </ul>
<p><strong>Comments:</strong></p> <p><strong>Comments:</strong></p>
<ul> <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" 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 multi-line comments.</li>
<li class="task-list-item"><input type="checkbox" disabled> Implement document building comments.</li> <li class="task-list-item"><input type="checkbox" disabled> Implement document building comments.</li>
</ul> </ul>
<p><strong>Error Handling:</strong></p> <p><strong>Error Handling:</strong></p>
<ul> <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> <li class="task-list-item"><input type="checkbox" disabled> Replace <code>stderr</code> with a more robust error handling mechanism.</li>
</ul> </ul>
<p><strong>Testing:</strong></p> <p><strong>Testing:</strong></p>
<ul> <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" 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> <li class="task-list-item"><input type="checkbox" disabled> Expand tests to cover more syntax and edge cases.</li>
</ul> </ul>
</div> </section>
<h2>License</h2> <section id="license">
<p>This project is licensed under the <a href="https://www.gnu.org/licenses/gpl-3.0.en.html" target="_blank">GPL</a>.</p> <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>
<div class="contact"> <section id="contact" class="contact-section"> <h2>Contact & Links</h2>
<p><a href="/cdn-cgi/l/email-protection#cabeb8a3b9beaba48aacaeaea6e4aeafbc">Contact</a></p> <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>
<p><a href="https://git.fddl.dev/fddl/fddl">Git repo</a></p> </section>
</div>
</main> </main>
<footer> <footer>
&copy; 2024 fddl Programming Language <div class="container">
© 2025 fddl Programming Language
</div>
</footer> </footer>
<!-- Highlight.js Scripts -->
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script> <script>hljs.highlightAll();</script>
<!-- Cloudflare Email Protection Script -->
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script> <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
<script>
// Simple script to highlight active nav link based on scroll position
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) ) { // Adjust offset as needed
current = section.getAttribute("id");
}
});
navLi.forEach(a => {
a.classList.remove("active");
if (a.getAttribute("href") === "#" + current) {
a.classList.add("active");
}
});
});
});
</script>
</body> </body>
</html> </html>

261
styles.css
View File

@ -1,104 +1,235 @@
body { body {
margin: 0; margin: 0;
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
background-color: #1e1e1e; background-color: #121212; /* Slightly darker background */
color: #c0c0c0; color: #e0e0e0; /* Lighter text for better contrast */
line-height: 1.6; line-height: 1.7;
font-size: 16px;
} }
header {
background-color: #282828; .container {
padding: 20px; max-width: 900px;
display: flex; margin: 0 auto;
align-items: center;
justify-content: center;
max-width: 100%;
}
header h1 {
color: #ffffff;
margin: 0;
font-size: 2.5em;
}
.logo {
max-width: 80%;
padding: 20px;
}
main {
max-width: 800px;
margin: 20px auto;
padding: 0 20px; padding: 0 20px;
} }
/* Header */
header {
background-color: #1e1e1e;
padding: 25px 0;
text-align: center;
border-bottom: 1px solid #333;
}
header .logo {
max-width: 70px; /* Adjusted size */
margin-bottom: 10px;
vertical-align: middle;
}
header h1 {
color: #ffffff;
margin: 0 0 0 15px;
font-size: 2.8em;
display: inline-block;
vertical-align: middle;
}
/* Navigation */
nav {
background-color: #282828;
padding: 15px 0;
text-align: center;
position: sticky;
top: 0;
z-index: 1000;
border-bottom: 1px solid #333;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav ul li {
display: inline-block;
margin: 0 15px;
}
nav ul li a {
color: #569cd6;
text-decoration: none;
font-size: 1.1em;
padding: 5px 10px;
border-radius: 4px;
transition: background-color 0.3s ease;
}
nav ul li a:hover, nav ul li a.active {
background-color: #333;
text-decoration: none;
}
/* Main Content */
main {
padding: 30px 0;
}
section {
background-color: #1e1e1e;
padding: 25px;
margin-bottom: 30px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
h2 { h2 {
color: #ffffff; color: #ffffff;
border-bottom: 1px solid #444; border-bottom: 2px solid #569cd6; /* Accent border */
padding-bottom: 5px; padding-bottom: 10px;
margin-top: 40px; margin-top: 0; /* Removed default margin-top for consistency inside sections */
margin-bottom: 20px;
font-size: 2em;
} }
p { p {
margin-bottom: 15px; margin-bottom: 18px;
color: #c0c0c0; /* Slightly softer than main text for paragraphs */
} }
/* Code Blocks */
pre { pre {
background-color: #2e2e2e; background-color: #2c2c2c; /* Slightly different shade for pre */
padding: 15px; padding: 20px;
overflow-x: auto; overflow-x: auto;
font-family: 'Source Code Pro', monospace; font-family: 'Source Code Pro', monospace;
color: #dcdcdc; color: #dcdcdc;
border-radius: 5px; border-radius: 6px;
border: 1px solid #383838;
font-size: 0.95em;
} }
code {
code { /* Inline code */
color: #acacac; color: #acacac;
font-family: 'Source Code Pro', monospace; font-family: 'Source Code Pro', monospace;
background-color: #2e2e2e; background-color: #2c2c2c;
padding: 2px 4px; padding: 3px 6px;
border-radius: 3px; border-radius: 4px;
font-size: 0.9em;
} }
pre code { /* Code inside pre, reset some properties */
padding: 0;
background-color: transparent;
font-size: inherit; /* Inherit font size from pre */
}
a { a {
color: #569cd6; color: #569cd6;
text-decoration: none; text-decoration: none;
transition: color 0.3s ease;
} }
a:hover { a:hover {
color: #79b8f3; /* Lighter shade on hover */
text-decoration: underline; text-decoration: underline;
} }
.images {
/* Image Gallery */
.image-gallery {
text-align: center; text-align: center;
margin-bottom: 20px;
}
.image-gallery img {
max-width: calc(50% - 20px); /* Display two images per row on larger screens */
height: auto;
border: 2px solid #444;
border-radius: 6px;
margin: 10px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.image-gallery img:hover {
transform: scale(1.03);
box-shadow: 0 0 15px rgba(86, 156, 214, 0.5);
}
/* For smaller screens, stack images */
@media (max-width: 768px) {
.image-gallery img {
max-width: calc(100% - 20px); /* Full width on smaller screens */
}
}
/* Goals and Projections Section (previously .notes) */
.goals-projections {
background-color: #232323; /* Slightly different background */
padding: 25px;
margin: 30px 0; margin: 30px 0;
border-radius: 8px;
border-left: 5px solid #569cd6; /* Accent border */
} }
.images img {
max-width: 100%; .goals-projections h2 {
border: 1px solid #444; margin-top: 0;
border-radius: 5px; border-bottom: none; /* Remove border as section already distinct */
margin: 10px 0;
} }
footer {
background-color: #282828; .goals-projections p {
padding: 10px; color: #b0b0b0;
text-align: center;
color: #808080;
margin-top: 40px;
display: flex;
justify-content: center;
} }
.contact {
margin-top: 40px; .goals-projections strong {
text-align: center; color: #ffffff; /* Make strong tags stand out more */
} }
.notes {
background-color: #2e2e2e; /* Task List Styling */
padding: 20px; ul.task-list { /* Added a class for better targeting */
margin: 20px 0;
border-radius: 5px;
}
ul {
list-style: none; list-style: none;
padding-left: 0; padding-left: 0;
} }
li::before {
content: "• "; ul.task-list li.task-list-item {
color: #569cd6; margin-bottom: 12px; /* Increased spacing */
padding-left: 25px; /* Indent for custom bullet */
position: relative;
font-size: 1.05em;
} }
.task-list-item {
margin-bottom: 5px; ul.task-list li.task-list-item::before {
content: ""; /* Remove default bullet to use checkbox */
position: absolute;
left: 0;
top: 5px; /* Adjust alignment with text */
/* Custom checkbox styling can be done here if not using input[type=checkbox] */
} }
.task-list-item input {
margin-right: 10px; .task-list-item input[type="checkbox"] {
margin-right: 12px;
vertical-align: middle; vertical-align: middle;
transform: scale(1.2); /* Slightly larger checkboxes */
cursor: not-allowed; /* Since they are disabled */
} }
/* Footer */
footer {
background-color: #1e1e1e;
padding: 25px 0;
text-align: center;
color: #808080;
margin-top: 40px;
border-top: 1px solid #333;
font-size: 0.9em;
}
/* Contact Section (styling for items within .contact-section if needed) */
.contact-section {
text-align: center; /* This was in .contact before */
}
.contact-section p {
margin-bottom: 10px;
}