owner/Ancient-Programming-Site
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Expand Set Up page

Browse Source
This commit is contained in:
Rasmus Rasmussen 2025-02-03 15:11:15 +01:00
parent 499527f722
commit c86b4ae71a
10 changed files with 154 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@ -4,6 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="A site showcasing programming in ancient languages.">
<title>Ancient Programming</title> <title>Ancient Programming</title>
</head> </head>
<body> <body>

20
src/App.vue
View File

@ -2,17 +2,15 @@
</script> </script>
<template> <template>
<div class="flex flex-col min-h-screen"> <div class="flex flex-col min-h-screen bg-var_background">
<header> <header class="flex justify-center">
<div class="pt-10 px-4 text-2xl grid place-items-center"> <nav class="pt-10 text-2xl flex place-items-center">
<nav> <RouterLink class="mx-3" to="/">Home</RouterLink> |
<RouterLink to="/">Home</RouterLink> | <RouterLink class="mx-3" to="/About">About</RouterLink> |
<RouterLink to="/About">About</RouterLink> | <RouterLink class="mx-3" to="/Fortran">Fortran</RouterLink> |
<RouterLink to="/Fortran">Fortran</RouterLink> | <RouterLink class="mx-3" to="/Pascal">Pascal</RouterLink> |
<RouterLink to="/Pascal">Pascal</RouterLink> | <RouterLink class="mx-3" to="/Lisp">Lisp</RouterLink>
<RouterLink to="/Lisp">Lisp</RouterLink> </nav>
</nav>
</div>
</header> </header>
<main class="pt-10 flex justify-center grow"> <main class="pt-10 flex justify-center grow">

26
src/components/About.vue
View File

@ -4,9 +4,28 @@
<template> <template>
<div> <div>
<h1 class="text-3xl">About This Page</h1>
<hr>
<p>This page is about ancient (before the year 2000) programming languages, like Fortran and C. This page is mostly
about showing how it was done before fancy build tools and syntax were a thing. It also serves a purpose of a
showing, with examples, how to not only set up the programming environments, but also the whole workflow from
prototype to production.</p>
<br>
<p>This whole idea started when I made my first "serious" blog, <a class="underline" href="https://rbwr.dk">rbwr.dk</a>, but it didn't
feel like quite the "correct" place to put it. So the idea was shelved for a time... Until recently, when I picked
up a project in Fortran. Yep, Fortran. I had gotten bored, and wanted to challenge myself. And I thought, that if
I'm going to learn the language, I might as well put blood, sweat and tears into formulating and showcasing how
it's done (correctly).</p>
<br>
<p>I did initially want to try COBOL, but after looking at some examples, Fortran kind of looked more appealing lol.</p>
<br>
<br>
<h1 class="text-3xl">Who Am I?</h1> <h1 class="text-3xl">Who Am I?</h1>
<hr> <hr>
<p>My name is Rasmus Rasmussen (yes, that's my name), I live somewhere in the outskirts of Odense, and I'm primarily <p>My name is Rasmus Rasmussen (yes, that's my name), I live somewhere in the outskirts of Odense, Denmark, and I'm primarily
a backend developer. But lately, I've started to like developing in vue3. With TypeScript, of cause. It's a nice a backend developer. But lately, I've started to like developing in vue3. With TypeScript, of cause. It's a nice
chance of pace, and I often find myself wanting to experiment with different styling, as well as trying to chance of pace, and I often find myself wanting to experiment with different styling, as well as trying to
optimize and minimize my bundles.</p> optimize and minimize my bundles.</p>
@ -39,10 +58,11 @@
too far from my apartment.</p> too far from my apartment.</p>
<br> <br>
<img src="/public/Images/avif/PXL_20230708_030149199_scaled.avif" alt="Meadow with fog." loading="lazy" decoding="sync" width="1434" height="1080"> <img src="/public/Images/avif/PXL_20230708_030149199_scaled.avif" alt="Meadow with fog." loading="lazy" decoding="async" width="1434" height="1080">
<p>Not bad huh? The things you see when everyone is asleep.</p> <p>Not bad huh? The things you see when everyone is asleep.</p>
<br> <br>
<img src="/public/Images/avif/PXL_20230720_032828882_scaled.avif" alt="My humble bike." loading="lazy" decoding="sync" width="1434" height="1080">
<img src="/public/Images/avif/PXL_20230720_032828882_scaled.avif" alt="My humble bike." loading="lazy" decoding="async" width="1434" height="1080">
<p>And this is my humble bike. It has taken me many places, and it's still going strong. The odometer no longer works, <p>And this is my humble bike. It has taken me many places, and it's still going strong. The odometer no longer works,
so I just use my FitBit Charge 5 instead. I've modeled and 3D printed the two orange bottle holders myself, on my so I just use my FitBit Charge 5 instead. I've modeled and 3D printed the two orange bottle holders myself, on my
Original Prusa MK3S+.</p> Original Prusa MK3S+.</p>

13
src/components/Fortran/Fortran_Hello_World.vue
View File

@ -8,7 +8,7 @@
<hr> <hr>
<p></p> <p></p>
<div class="font-mono "> <div class="font-mono">
<pre><code class="text-sm"> <pre><code class="text-sm">
program hello program hello
implicit none implicit none
@ -25,9 +25,8 @@ end program hello
will compile to the exact same assembly. So if you only need to print something to stdout, just use <span><code>print *</code></span> will compile to the exact same assembly. So if you only need to print something to stdout, just use <span><code>print *</code></span>
as it conveys the meaning of the code better. Plus we don't need the full functionality of <span><code>write(*,*)</code></span> as it conveys the meaning of the code better. Plus we don't need the full functionality of <span><code>write(*,*)</code></span>
in this example.</p> in this example.</p>
<br>
<div> <div class="font-mono">
<pre><code class="text-sm"> <pre><code class="text-sm">
$ gfortran -o hello main.f90 $ gfortran -o hello main.f90
$ ./hello $ ./hello
@ -38,9 +37,8 @@ $ ./hello
<p>Now, hear me out, why not spice up the program a little bit more? What if we want to read user input? Well, fret <p>Now, hear me out, why not spice up the program a little bit more? What if we want to read user input? Well, fret
not my friend, because I have just the solution for you then. All we gotta do is to read from the terminal, and not my friend, because I have just the solution for you then. All we gotta do is to read from the terminal, and
then print out the value.</p> then print out the value.</p>
<br>
<div> <div class="font-mono">
<pre><code class="text-sm"> <pre><code class="text-sm">
program hello program hello
implicit none implicit none
@ -80,11 +78,10 @@ end program hello
<p>So in this case, where we check if <span><code>ios</code></span> is End Of File, then that means if we input an <p>So in this case, where we check if <span><code>ios</code></span> is End Of File, then that means if we input an
End Of File key combination (Ctrl+D on Unix/Linux, and Ctrl+Z on Windows), then the program would stop immediately. End Of File key combination (Ctrl+D on Unix/Linux, and Ctrl+Z on Windows), then the program would stop immediately.
We use the <span><code>trim()</code></span> function to remove any trailing whitespaces. That's because, if you We use the <span><code>trim()</code></span> function to remove any trailing whitespaces. That's because, if you
make a character bigger than the actual text, it will be fille with whitespace after the text. So now the output make a character array longer than the actual text, it will be filled with whitespace after the text. So now the output
looks like this:</p> looks like this:</p>
<br>
<div> <div class="font-mono">
<pre><code class="text-sm"> <pre><code class="text-sm">
$ gfortran -o hello main.f90 $ gfortran -o hello main.f90
$ ./hello $ ./hello

1
src/components/Fortran/Fortran_Index.vue
View File

@ -21,6 +21,7 @@
<p>Table of contents:</p> <p>Table of contents:</p>
<ul> <ul>
<li><RouterLink to="/Fortran/SetUp">&gt; Set Up</RouterLink></li>
<li><RouterLink to="/Fortran/HelloWorld">&gt; Hello World</RouterLink></li> <li><RouterLink to="/Fortran/HelloWorld">&gt; Hello World</RouterLink></li>
<li><RouterLink to="/Fortran/ReadingAFile">&gt; Reading A File</RouterLink></li> <li><RouterLink to="/Fortran/ReadingAFile">&gt; Reading A File</RouterLink></li>
</ul> </ul>

95
src/components/Fortran/Fortran_Set_Up.vue Normal file
View File

@ -0,0 +1,95 @@
<script setup lang="ts">
</script>
<template>
<div>
<h1 class="text-3xl">Setting Up The Environment</h1>
<hr>
<br>
<p>If you're familiar with C, then you would feel right at home with Fortran's build environment. There isn't really
an "official" compiler for the language, only a standard, that has to be implemented by the compilers. But there
are a lot of great compilers, that might as well be "official."</p>
<br>
<p>The top listed compiler on Fortran's website, is the GNU Fortran compiler (gfortran). It's the one I will be using
throughout the examples on the site. Unless stated otherwise. There are also some other notable compilers, that
has some rather interesting qualities to them.</p>
<br>
<p>Compilers:</p>
<ul>
<li><a class="underline" href="https://lfortran.org/">lfortran</a> (This one can be used as an interactive
compiler, and also supports parsing all of the 2018 standard syntax. It can also compile Fortran to WebAssemply).</li>
<li><a class="underline" href="https://developer.nvidia.com/hpc-sdk">NVIDIA HPC SDK</a> (This one comes with a whole lot of GPU
accelerated libraries).</li>
</ul>
<br>
<p>But , we will use gfortran. I will mainly be focusing on installing and developing on Linux.</p>
<br>
<p>First, we install the compiler.</p>
<br>
<p>For Fedora.</p>
<code>$ sudo dnf install gcc-gfortran</code>
<br>
<br>
<p>For ubuntu.</p>
<code>$ sudo apt install gfortran</code>
<br>
<br>
<p>And that's it. Pretty easy.</p>
<br>
<h1 class="text-3xl">Project Structure</h1>
<hr>
<br>
<p>When creating a Fortran project, or any project in general, you want a structure. There is a lot of different
layouts for the structure, but equal amongst them, is the <code>src</code> folder. That's where we keep all of out
source code. Like <code>*.f90, *.f95</code> files.</p>
<br>
<p>But other than that, most projects include a <code>Makefile</code> file, a <code>library</code>, <code>test</code>
and <code>bin</code> folder. Your layout doesn't need to look like this specifically, nor does it have to contain
the same folders. Each project is different, and so are the requirements. But this layout is simple, and great
for medium to large projects.</p>
<br>
<p>But if we're doing micro-projects, as in like, a hello world application, a test application, or a small tool,
this layout is rather redundant, and on the examples on the website here, we will only use it on bigger projects,
and we will let you know, when or how we set up the project.</p>
<br>
<div class="font-mono">
<pre><code class="text-sm">
project/
├── src/ # Source files (.f90, .f95, etc.)
│ ├── modules/ # Module definitions
│ └── main.f90 # Main program file
├── include/ # Include files (e.g., interface definitions)
├── lib/ # Library object files and archives
├── bin/ # Executable binaries
├── tests/ # Test cases
└── Makefile # Build script
</code></pre>
</div>
<br>
<p>Notes:</p>
<ul>
<li>&gt; <code>src</code> (This is where we keep all of out source code).</li>
<li>&gt; <code>modules</code> (This is where we keep our classes. Or in Fortran-speak, modules).</li>
<li>&gt; <code>include</code> (This is where we keep our interfaces, that out modules will inherit from, if we're using Fortran 90 or above).</li>
<li>&gt; <code>bin</code> (This is where the compiled program should end up in).</li>
</ul>
<br>
<p>Makefiles are very useful, and becomes increasingly useful, the bigger the project is.</p>
</div>
</template>

9
src/index.css
View File

@ -1,3 +1,10 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
@layer base {
--color-light: #2500ff;
--color-dark: rgb(0, 0, 0);
--color-background: var(--color-light);
}

3
src/main.ts
View File

@ -1,6 +1,7 @@
import { createApp } from 'vue' import { createApp } from 'vue'
import {createRouter, createWebHistory} from "vue-router"; import {createRouter, createWebHistory} from "vue-router";
import './index.css' import './index.css'
import './styles.css'
import App from './App.vue' import App from './App.vue'
import Home from "./components/Home.vue"; import Home from "./components/Home.vue";
import About from "./components/About.vue"; import About from "./components/About.vue";
@ -9,6 +10,7 @@ import PascalIndex from "./components/Pascal/Pascal_Index.vue";
import LispIndex from "./components/Lisp/Lisp_Index.vue"; import LispIndex from "./components/Lisp/Lisp_Index.vue";
import FortranReadingFiles from "./components/Fortran/Fortran_Reading_Files.vue"; import FortranReadingFiles from "./components/Fortran/Fortran_Reading_Files.vue";
import FortranHelloWorld from "./components/Fortran/Fortran_Hello_World.vue"; import FortranHelloWorld from "./components/Fortran/Fortran_Hello_World.vue";
import FortranSetUp from "./components/Fortran/Fortran_Set_Up.vue";
const router = createRouter({ const router = createRouter({
history: createWebHistory(), history: createWebHistory(),
@ -17,6 +19,7 @@ const router = createRouter({
{path: '/About', name: 'About', component: About}, {path: '/About', name: 'About', component: About},
{path: '/Fortran', name: 'Fortran', component: FortranIndex}, {path: '/Fortran', name: 'Fortran', component: FortranIndex},
{path: '/Fortran/SetUp', name: 'SetUp', component: FortranSetUp},
{path: '/Fortran/HelloWorld', name: 'HelloWorld', component: FortranHelloWorld}, {path: '/Fortran/HelloWorld', name: 'HelloWorld', component: FortranHelloWorld},
{path: '/Fortran/ReadingAFile', name: 'ReadingAFile', component: FortranReadingFiles}, {path: '/Fortran/ReadingAFile', name: 'ReadingAFile', component: FortranReadingFiles},

9
src/styles.css
View File

@ -3,13 +3,12 @@
line-height: 1.5; line-height: 1.5;
font-weight: 400; font-weight: 400;
color-scheme: light dark; #color-scheme: light dark;
color: rgba(255, 255, 255, 0.87); #color: rgba(255, 255, 255, 0.87);
background-color: #242424; #background-color: #242424;
font-synthesis: none; font-synthesis: none;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }

6
tailwind.config.js
View File

@ -9,7 +9,11 @@ export default {
"./src/**/*.{js,ts,jsx,tsx,vue}", "./src/**/*.{js,ts,jsx,tsx,vue}",
], ],
theme: { theme: {
extend: {}, extend: {
colors: {
var_background: "var(--color-background)"
}
},
}, },
plugins: [], plugins: [],
} }