+++ /dev/null
-<!DOCTYPE html>
-<head>
- <title>Today Web Framework</title>
-</head>
-<body>
- <header>
- <h1>Today</h1>
- </header>
- <main>
- <h1>Un correu del bloc</h1>
- </main>
- <footer>
- <p>Copyright 2024 Early Nichols</p>
- </footer>
-</body>
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>
-<head>
- <title>Today Web Framework</title>
-</head>
-<body>
- <header>
- <h1>Today</h1>
- </header>
- <main>
- <h1>Bloc de desenvolupador</h1>
- </main>
- <footer>
- <p>Copyright 2024 Early Nichols</p>
- </footer>
-</body>
\ No newline at end of file
<!DOCTYPE html>
+
<head>
<title>Today Web Framework</title>
+ <link rel="stylesheet" href="/style.css">
</head>
+
<body>
<header>
- <h1>Today</h1>
+ <p class="logo-text">Today</p>
+ <nav id="main-nav" aria-label="Main Menu">
+ <div class="dropdown">
+ <a href="#">Languages</a>
+ <nav aria-label="Language Select" id="language-nav">
+ <a href="/en/"><img src="/images/flags/usa.png" alt="The flag of the United States">
+ <p>English</p>
+ </a>
+ <a href="/ca/"><img src="/images/flags/catalunya.png" alt="La bandera català">
+ <p>Català</p>
+ </a>
+ </nav>
+ </div>
+ </nav>
</header>
<main>
- <p>Aquest és la pagina principal per Today, un marc del lloc web.</p>
+ <section>
+ <h1>Fas un lloc web avui</h1>
+ <p>«Today» posa fàcil a crear, millorar, i servir el vostre
+ lloc web. Crea les pàgines web amb HTML i CSS, i afeigeix
+ contingut dinàmic amb Go.
+ </p>
+ </section>
+ <hr>
+ <section>
+ <h2>Capacitats</h2>
+ <p>El estàndard web és capaç, documentat, i recolzat. L'objectiu
+ primer de «Today» és construir sobre aquell estàndard amb capacitats
+ que estan fàcil per utilitzar, i no reinventen el web o el teu
+ lloc web.
+ </p>
+ <h3>Construeix iterativament</h3>
+ <p>You can start a Today project with your pre-existing static
+ website and build on it as you go. Today "pages" replace the
+ static files they use, and you can load data with Go and display
+ that data with a template HTML file.
+ </p>
+ <h3>Server-side components</h3>
+ <p>If you're reusing behavior often, you can make a Today
+ "template part". These parts have their own behavior and
+ templates, and are used like custom HTML elements. They can
+ be safely reused and even shared across projects!
+ </p>
+ <h3>Localization</h3>
+ <p>Today is built to support multi-language webpages. Both pages and
+ parts can be made with templates in many languages, and when
+ being served, the page will be composed with the closest-matched
+ languages for each.
+ </p>
+ </section>
+ <hr>
+ <section>
+ <h2>Why?</h2>
+ <p>There's only one real reason for Today to exist; so that you can
+ make a website today. That's the namesake, that's what it's
+ always going to be about. Today is designed to be a web
+ framework for beginner-to-intermediate devs building
+ fundamentals, and to give easy-ish answers to a lot of the
+ hard-ish questions about creating websites. A monumental amount
+ of work has been put into making the independent web
+ <em>more capable</em> through great frameworks like React; I
+ want to focus on making it <em>more accessible</em>. The hope
+ is that helping devs build fundamentals can onboard to more
+ complex tech with fewer headaches.
+ </p>
+ </section>
+ <hr>
+ <section>
+ <h2>Project Status</h2>
+ <p>Today is a work in progress and is fairly early in development.
+ It will be ready when it is ready; I am navigating an
+ international move and have a day job, so working on this is a
+ "when it happens" event. Having said that, there is a clear
+ road to a finished project. Here's what's upcoming/planned for
+ me to be comfortable with a v0 release:
+ </p>
+ <h3>Done</h3>
+ <ul>
+ <li>Dynamic pages with templates and Go data loading.</li>
+ <li>Custom elements, rendered server-side.</li>
+ <li>Good localization support.</li>
+ </ul>
+ <h3>Work in Progress</h3>
+ <ul>
+ <li>Custom template parser. Right now, Today is bending Go's
+ standard HTML parser into a shape that sort of works. I'm
+ working on a custom parser that should make maintenance and
+ feature development much smoother!
+ </li>
+ <li>SQLite support. Most non-trivial websites need a database.
+ Most websites don't need more than SQLite. I want a quick
+ and easy option for people to use, particularly one that is
+ easy to transition away from when they need to.
+ </li>
+ <li>New user documentation.</li>
+ </ul>
+ <h3>Planned</h3>
+ <ul>
+ <li>Concurrent processing of component OnLoad functions. A
+ common criticism of Go templates is that they are slow for
+ nontrivial uses, because they are processed sequentially. I
+ <em>think</em> I can fix that, at least with the OnLoad of
+ template parts.
+ </li>
+ <li>Maintainer documentation. I need to document a process on
+ submitting external contributions, and write a lot on how
+ internals work.
+ </li>
+ <li>Transation of documentation to Catalan.</li>
+ <li>Live projects. A web framework is nothing if you don't make
+ websites with it!
+ </li>
+ </ul>
+ <p>Once the "planned" list is empty, I'll release a v0 that should
+ be safe for testing use. Until then, it's a pet project in R&D.
+ </p>
+ </section>
</main>
<footer>
- <p>Copyright 2024 Early Nichols</p>
+ <p>Copyright 2024-2025 Early Nichols</p>
</footer>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+ <script>
+ // HighlightJS style
+ let head = document.getElementsByTagName("HEAD")[0];
+ let hljsStyle = document.createElement("link");
+ hljsStyle.rel = "stylesheet";
+ hljsStyle.type = "text/css";
+ hljsStyle.href = "/style/hljs.css";
+ head.appendChild(hljsStyle);
+ // HighlightJS
+ hljs.highlightAll();
+ </script>
</body>
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>
-<head>
- <title>Today Web Framework</title>
-</head>
-<body>
- <header>
- <h1>Today</h1>
- </header>
- <main>
- <h1>Today Devblog</h1>
- </main>
- <footer>
- <p>Copyright 2024 Early Nichols</p>
- </footer>
-</body>
\ No newline at end of file
+++ /dev/null
-package blog
-
-import "git.earlybird.gay/today/web/page"
-
-var Post = page.New("Post", "post.html")
+++ /dev/null
-<!DOCTYPE html>
-<head>
- <title>Today Web Framework</title>
-</head>
-<body>
- <header>
- <h1>Today</h1>
- </header>
- <main>
- <p>A blog post</p>
- </main>
- <footer>
- <p>Copyright 2024 Early Nichols</p>
- </footer>
-</body>
\ No newline at end of file
<!DOCTYPE html>
+
<head>
<title>Today Web Framework</title>
+ <link rel="stylesheet" href="/style.css">
</head>
+
<body>
<header>
- <h1>Today</h1>
+ <p class="logo-text">Today</p>
+ <nav id="main-nav" aria-label="Main Menu">
+ <div class="dropdown">
+ <a href="#">Languages</a>
+ <nav aria-label="Language Select" id="language-nav">
+ <a href="/en/"><img src="/images/flags/usa.png" alt="The flag of the United States">
+ <p>English</p>
+ </a>
+ <a href="/ca/"><img src="/images/flags/catalunya.png" alt="La bandera català">
+ <p>Català</p>
+ </a>
+ </nav>
+ </div>
+ </nav>
</header>
<main>
- <p>This is a landing page for the Today web framework.</p>
+ <section>
+ <h1>Make a website today</h1>
+ <p>Today makes creating, improving, and hosting your website
+ simple. Build webpages with HTML and CSS, and add dynamic
+ content where you want it with Go.
+ </p>
+ </section>
+ <hr>
+ <section>
+ <h2>Features</h2>
+ <p>The web standard is capable, well-documented, and widely
+ supported. The core design goal of Today is to build on this
+ standard with helpful, easy-to-use features that don't reinvent
+ the web or your website.
+ </p>
+ <h3>Build iteratively</h3>
+ <p>You can start a Today project with your pre-existing static
+ website and build on it as you go. Today "pages" replace the
+ static files they use, and you can load data with Go and display
+ that data with a template HTML file.
+ </p>
+ <h3>Server-side components</h3>
+ <p>If you're reusing behavior often, you can make a Today
+ "template part". These parts have their own behavior and
+ templates, and are used like custom HTML elements. They can
+ be safely reused and even shared across projects!
+ </p>
+ <h3>Localization</h3>
+ <p>Today is built to support multi-language webpages. Both pages and
+ parts can be made with templates in many languages, and when
+ being served, the page will be composed with the closest-matched
+ languages for each.
+ </p>
+ </section>
+ <hr>
+ <section>
+ <h2>Why?</h2>
+ <p>There's only one real reason for Today to exist; so that you can
+ make a website today. That's the namesake, that's what it's
+ always going to be about. Today is designed to be a web
+ framework for beginner-to-intermediate devs building
+ fundamentals, and to give easy-ish answers to a lot of the
+ hard-ish questions about creating websites. A monumental amount
+ of work has been put into making the independent web
+ <em>more capable</em> through great frameworks like React; I
+ want to focus on making it <em>more accessible</em>. The hope
+ is that helping devs build fundamentals can onboard to more
+ complex tech with fewer headaches.
+ </p>
+ </section>
+ <hr>
+ <section>
+ <h2>Project Status</h2>
+ <p>Today is a work in progress and is fairly early in development.
+ It will be ready when it is ready; I am navigating an
+ international move and have a day job, so working on this is a
+ "when it happens" event. Having said that, there is a clear
+ road to a finished project. Here's what's upcoming/planned for
+ me to be comfortable with a v0 release:
+ </p>
+ <h3>Done</h3>
+ <ul>
+ <li>Dynamic pages with templates and Go data loading.</li>
+ <li>Custom elements, rendered server-side.</li>
+ <li>Good localization support.</li>
+ </ul>
+ <h3>Work in Progress</h3>
+ <ul>
+ <li>Custom template parser. Right now, Today is bending Go's
+ standard HTML parser into a shape that sort of works. I'm
+ working on a custom parser that should make maintenance and
+ feature development much smoother!
+ </li>
+ <li>SQLite support. Most non-trivial websites need a database.
+ Most websites don't need more than SQLite. I want a quick
+ and easy option for people to use, particularly one that is
+ easy to transition away from when they need to.
+ </li>
+ <li>New user documentation.</li>
+ </ul>
+ <h3>Planned</h3>
+ <ul>
+ <li>Concurrent processing of component OnLoad functions. A
+ common criticism of Go templates is that they are slow for
+ nontrivial uses, because they are processed sequentially. I
+ <em>think</em> I can fix that, at least with the OnLoad of
+ template parts.
+ </li>
+ <li>Maintainer documentation. I need to document a process on
+ submitting external contributions, and write a lot on how
+ internals work.
+ </li>
+ <li>Transation of documentation to Catalan.</li>
+ <li>Live projects. A web framework is nothing if you don't make
+ websites with it!
+ </li>
+ </ul>
+ <p>Once the "planned" list is empty, I'll release a v0 that should
+ be safe for testing use. Until then, it's a pet project in R&D.
+ </p>
+ </section>
</main>
<footer>
- <p>Copyright 2024 Early Nichols</p>
+ <p>Copyright 2024-2025 Early Nichols</p>
</footer>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+ <script>
+ // HighlightJS style
+ let head = document.getElementsByTagName("HEAD")[0];
+ let hljsStyle = document.createElement("link");
+ hljsStyle.rel = "stylesheet";
+ hljsStyle.type = "text/css";
+ hljsStyle.href = "/style/hljs.css";
+ head.appendChild(hljsStyle);
+ // HighlightJS
+ hljs.highlightAll();
+ </script>
</body>
\ No newline at end of file
import (
"fmt"
+ "net/http"
tapp "git.earlybird.gay/today/app"
- "git.earlybird.gay/today/landing-page/en/blog"
"git.earlybird.gay/today/localization"
"golang.org/x/text/language"
)
tapp.GetEnv().Apply(app)
app.PreHandler(localization.SetLocaleFromPath("lang", language.English))
+ app.Handle("/{$}", http.RedirectHandler("/en/", http.StatusPermanentRedirect))
app.Static("/", ".")
- app.Handle("GET /{lang}/blog/{post_id}", blog.Post)
err := app.ListenAndServe()
if err != nil {
fmt.Println(err)
--- /dev/null
+@import url("/style/nav.css");
+@import url("/style/code.css");
+
+/* The Great Reset */
+* {
+ padding: 0;
+ margin: 0;
+ box-sizing: border-box;
+}
+
+/* Variables */
+:root {
+ --padding-sm: 12px 1rem;
+ --padding-md: 24px 2rem;
+ --padding-lg: 48px 4rem;
+
+ --gap-sm: .5rem;
+ --gap-md: 1rem;
+ --gap-lg: 2rem;
+
+ --border-radius: 16px;
+ --border-width: 2px;
+ --border: var(--border-width) solid var(--secondary);
+ --border-half: calc(var(--border-width)/2) solid var(--secondary);
+
+ /* ANSI terminal color definitions */
+ --black: #2E3436;
+ --black-bright: #383F41;
+ --red: #EF2929;
+ --green: #8AE234;
+ --yellow: #FCE94F;
+ --blue: #729FCF;
+ --magenta: #77507B;
+ --magenta-bright: #AD7FA8;
+ --cyan: #34E2E2;
+ --white: #D3D7CF;
+ --white-bright: #EEEEEC;
+
+ /* Web-semantic colors */
+ --background: var(--black);
+ --primary: var(--black-bright);
+ --text: var(--white-bright);
+ --secondary: var(--magenta);
+ --accent: var(--magenta-bright);
+ --interactive: var(--blue);
+ --interactive-active: var(--cyan);
+ --text-inverse: var(--black);
+
+ --font-family: sans-serif;
+ --font-family-code: monospace;
+
+ --font-sm: .8rem;
+}
+
+html {
+ background-color: var(--background);
+
+ color: var(--text);
+ font-family: var(--font-family);
+ font-size: 1.1rem;
+ line-height: 1.5;
+}
+
+body {
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
+}
+
+header {
+ background-color: var(--primary);
+
+ display: flex;
+ flex-direction: row;
+ gap: var(--gap-sm);
+ align-items: center;
+
+ padding: 0 var(--gap-md);
+}
+
+footer {
+ background-color: var(--primary);
+ display: flex;
+ flex-direction: column;
+ gap: var(--gap-sm);
+
+ padding: var(--padding-sm);
+}
+
+p.logo-text{
+ font-size: 1.5rem;
+ font-weight: bolder;
+ width: fit-content;
+ height: min-content;
+ justify-self: center;
+}
+
+main {
+ display: flex;
+ flex-direction: column;
+ gap: var(--gap-md);
+
+ margin: 2rem 20%;
+ padding: var(--padding-md);
+
+ flex-grow: 1;
+}
+
+section {
+ display: flex;
+ flex-direction: column;
+ gap: var(--gap-md);
+}
+
+/* Forms */
+
+form {
+ display: grid;
+ grid-template-columns: 1fr 3fr;
+ gap: .5rem;
+}
+
+form > input[type="submit"] {
+ grid-column: span 2;
+}
+
+/* Typography */
+
+
+li {
+ margin-left: 20px;
+}
+
+hr {
+ color: var(--secondary);
+ height: var(--border-width);
+}
+
+blockquote {
+ padding-left: 1rem;
+ border-left: var(--border);
+}
+
+.hidden {
+ display: none;
+}
+
+@media screen and (max-width: 1000px) {
+ html {
+ font-size: 1rem;
+ }
+ header {
+ display: flex;
+ flex-direction: column;
+ gap: var(--gap-sm);
+ align-items: start;
+ padding: var(--padding-sm);
+ }
+ main {
+ margin: 0;
+ padding: var(--padding-sm);
+ }
+ html {
+ padding: 1rem;
+ }
+}
--- /dev/null
+/* code divs are used to style adjacent <pre><code> blocks */
+div.code {
+ background-color: var(--primary);
+ border: var(--border);
+ border-radius: var(--border-radius);
+ overflow: hidden;
+
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+}
+
+div.code pre:nth-child(n+3) {
+ border-top: var(--border);
+}
+
+div.code pre:nth-child(odd) {
+ border-right: var(--border);
+}
+
+pre:has(code) {
+ padding: var(--padding-sm);
+ /* overflow-x: auto; */
+ min-width: 40%;
+ max-width: 60%;
+ text-wrap: wrap;
+}
--- /dev/null
+/*
+This is a copy of .highlightjs's rainbow theme, so I can modify it a bit with
+colors I like. It's under the BSD 3-clause License.
+
+Copyright (c) 2006, Ivan Sagalaev
+*/
+
+pre:has(code) {
+ padding: 0;
+}
+
+pre code.hljs {
+ display: block;
+ padding: 1em;
+ font-size: var(--font-sm);
+}
+
+code.hljs {
+ padding: var(--padding-sm);
+}
+
+/*
+
+ Style with support for rainbow parens
+
+ */
+.hljs {
+ background: var(--primary);
+ color: var(--text);
+}
+
+.hljs-comment,
+.hljs-quote {
+ color: #969896;
+ font-style: italic
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-literal,
+.hljs-addition {
+ color: var(--magenta-bright);
+}
+
+.hljs-number,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+ color: #f99157
+}
+
+.hljs-string,
+.hljs-doctag,
+.hljs-regexp {
+ color: var(--cyan);
+}
+
+.hljs-title,
+.hljs-name,
+.hljs-type,
+.hljs-section,
+.hljs-built_in {
+ color: var(--green);
+}
+
+.hljs-variable,
+.hljs-template-variable,
+.hljs-selector-id,
+.hljs-title.class_,
+.hljs-class .hljs-title {
+ color: var(--yellow);
+}
+
+.hljs-section,
+.hljs-name,
+.hljs-strong {
+ font-weight: bold
+}
+
+.hljs-symbol,
+.hljs-bullet,
+.hljs-subst,
+.hljs-meta,
+.hljs-link {
+ color: #f99157
+}
+
+.hljs-deletion {
+ color: #dc322f
+}
+
+.hljs-formula {
+ background: #eee8d5
+}
+
+.hljs-attr,
+.hljs-attribute {
+ color: var(--blue);
+}
+
+.hljs-emphasis {
+ font-style: italic
+}
\ No newline at end of file
--- /dev/null
+/* Nav styling
+These styles assume navs are lists; nested lists will
+produce dropdown menus.
+*/
+nav {
+ display: flex;
+ flex-direction: row;
+}
+nav.vertical {
+ flex-direction: column;
+}
+nav a {
+ color: var(--text);
+ text-decoration: none;
+ padding: var(--padding-sm);
+ display: block;
+ text-align: center;
+
+ transition: all .1s;
+}
+nav img {
+ height: 1.5rem;
+}
+nav a:hover {
+ background-color: var(--secondary);
+}
+nav a.active {
+ background-color: var(--secondary);
+}
+nav div.dropdown {
+ position: relative;
+}
+nav div.dropdown > nav {
+ visibility: hidden;
+ position: absolute;
+ top: 100%;
+
+ flex-direction: column;
+
+ min-width: 100%;
+}
+nav.vertical div.dropdown > nav {
+ top: 0%;
+ left: 100%;
+}
+nav div.dropdown:hover > nav, nav div.dropdown:focus-within > nav {
+ visibility: visible;
+ background-color: var(--primary);
+}
+
+@media screen and (max-width: 1000px) {
+ nav {
+ flex-direction: column;
+ width: 100%;
+ }
+}
+
projects / today / commitdiff
