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>
<meta charset="UTF-8">
<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="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">
<!-- Open Graph Meta Tags for Social Sharing -->
<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">
<!-- Twitter Card Meta Tags -->
<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">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700|Source+Code+Pro" rel="stylesheet">
<!-- Highlight.js Styles -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/default.min.css">
<!-- Custom Stylesheet -->
<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>
<a href="https://fddl.dev"><img src="logo-small.png" class="logo" alt="fddl temporary logo"></a>
<h1>fddl programming language</h1>
<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>
<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="02.png" alt="Lexer Tests Screenshot">
<img src="03.png" alt="REPL Screenshot">
<img src="04.png" alt="Parsing 'hello, world'">
<img src="05.png" alt="ast progress">
<img src="06.png" alt="arithmatic parsing">
<img src="06.png" alt="arithmetic parsing">
</section>
<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 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>
<h2>Features</h2>
<ul>
<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>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>
</ul>
<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>
<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.</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 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>
<h2>Examples:</h2>
<pre><code class="language-rust">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 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");
<h2>Running the Project</h2>
<p>Make sure your project compiles and the tests pass:</p>
// variable declaration
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 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>
<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>
<div class="notes">
<h2>Goals and Projections:</h2>
<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>
<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>
<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>
<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>
<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>
<li class="task-list-item"><input type="checkbox" disabled> Replace <code>stderr</code> with a more robust error handling mechanism..</li>
<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>
<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>
</div>
</section>
<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 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>
<div class="contact">
<p><a href="/cdn-cgi/l/email-protection#cabeb8a3b9beaba48aacaeaea6e4aeafbc">Contact</a></p>
<p><a href="https://git.fddl.dev/fddl/fddl">Git repo</a></p>
</div>
<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>
&copy; 2024 fddl Programming Language
<div class="container">
© 2025 fddl Programming Language
</div>
</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>
<!-- Cloudflare Email Protection 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>
</html>
</html>

261
styles.css
View File

@ -1,104 +1,235 @@
body {
margin: 0;
font-family: 'Roboto', sans-serif;
background-color: #1e1e1e;
color: #c0c0c0;
line-height: 1.6;
background-color: #121212; /* Slightly darker background */
color: #e0e0e0; /* Lighter text for better contrast */
line-height: 1.7;
font-size: 16px;
}
header {
background-color: #282828;
padding: 20px;
display: flex;
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;
.container {
max-width: 900px;
margin: 0 auto;
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 {
color: #ffffff;
border-bottom: 1px solid #444;
padding-bottom: 5px;
margin-top: 40px;
border-bottom: 2px solid #569cd6; /* Accent border */
padding-bottom: 10px;
margin-top: 0; /* Removed default margin-top for consistency inside sections */
margin-bottom: 20px;
font-size: 2em;
}
p {
margin-bottom: 15px;
margin-bottom: 18px;
color: #c0c0c0; /* Slightly softer than main text for paragraphs */
}
/* Code Blocks */
pre {
background-color: #2e2e2e;
padding: 15px;
background-color: #2c2c2c; /* Slightly different shade for pre */
padding: 20px;
overflow-x: auto;
font-family: 'Source Code Pro', monospace;
color: #dcdcdc;
border-radius: 5px;
border-radius: 6px;
border: 1px solid #383838;
font-size: 0.95em;
}
code {
code { /* Inline code */
color: #acacac;
font-family: 'Source Code Pro', monospace;
background-color: #2e2e2e;
padding: 2px 4px;
border-radius: 3px;
background-color: #2c2c2c;
padding: 3px 6px;
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 {
color: #569cd6;
text-decoration: none;
transition: color 0.3s ease;
}
a:hover {
color: #79b8f3; /* Lighter shade on hover */
text-decoration: underline;
}
.images {
/* Image Gallery */
.image-gallery {
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;
border-radius: 8px;
border-left: 5px solid #569cd6; /* Accent border */
}
.images img {
max-width: 100%;
border: 1px solid #444;
border-radius: 5px;
margin: 10px 0;
.goals-projections h2 {
margin-top: 0;
border-bottom: none; /* Remove border as section already distinct */
}
footer {
background-color: #282828;
padding: 10px;
text-align: center;
color: #808080;
margin-top: 40px;
display: flex;
justify-content: center;
.goals-projections p {
color: #b0b0b0;
}
.contact {
margin-top: 40px;
text-align: center;
.goals-projections strong {
color: #ffffff; /* Make strong tags stand out more */
}
.notes {
background-color: #2e2e2e;
padding: 20px;
margin: 20px 0;
border-radius: 5px;
}
ul {
/* Task List Styling */
ul.task-list { /* Added a class for better targeting */
list-style: none;
padding-left: 0;
}
li::before {
content: "• ";
color: #569cd6;
ul.task-list li.task-list-item {
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;
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;
}