Improved theme handling.

meta/plugins/__init__.py

@@ -40,6 +40,10 @@ def fixupLinks(html: str, path: str) -> str:
     )
 
 
+class BuildArgs:
+    theme: str = cli.arg(None, "theme", "Theme to use", default="default")
+
+
 @dt.dataclass
 class Site(DataClassJsonMixin):
     title: str = dt.field()
@@ -67,12 +71,14 @@ def renderFavicon(self) -> str:
     def renderHeader(self) -> str:
         return f'<a href="/"><h1>{self.header or self.title}</h1></a>'
 
-    def renderAll(self, out: str):
-        styleFile = os.path.join(SITE_DIR, "style.css")
-        if not os.path.exists(styleFile):
-            styleFile = DEFAULT_STYLE_PATH
+    def renderAll(self, out: str, args: BuildArgs) -> None:
+        style = ""
+        style += readFile(__file__.replace("__init__.py", f"{args.theme}.css"))
 
-        style = readFile(styleFile)
+        styleFile = os.path.join(SITE_DIR, "style.css")
+        if os.path.exists(styleFile):
+            style += "\n\n\n"
+            style += readFile(styleFile)
 
         md = markdown.Markdown(extensions=["meta"])
         files = shell.find(SITE_DIR)
@@ -140,11 +146,11 @@ def _():
 
 
 @cli.command("b", "cat/build", "Build the site")
-def _() -> None:
+def _(args: BuildArgs) -> None:
     shell.rmrf(SITE_BUILD_DIR)
     shell.mkdir(SITE_BUILD_DIR)
     site = Site.load()
-    site.renderAll(SITE_BUILD_DIR)
+    site.renderAll(SITE_BUILD_DIR, args)
 
     print(f"{CAT} Site built at {SITE_BUILD_DIR}")
 
@@ -157,11 +163,11 @@ def _():
 
 
 @cli.command("s", "cat/serve", "Serve the site")
-def _():
+def _(args: BuildArgs):
     shell.rmrf(SITE_BUILD_DIR)
     shell.mkdir(SITE_BUILD_DIR)
     site = Site.load()
-    site.renderAll(SITE_BUILD_DIR)
+    site.renderAll(SITE_BUILD_DIR, args)
 
     os.chdir(SITE_BUILD_DIR)
 

meta/plugins/default.css

@@ -15,7 +15,7 @@
 
 @media (prefers-color-scheme: dark) {
     :root {
-        --background-color: #01242e;
+        --background-color: #0c0f17;
         --heading-color: #eee;
         --text-color: #ddd;
         --link-color: #8cc2dd;

meta/plugins/none.css

@@ -0,0 +1 @@
+

meta/plugins/plain.css

@@ -0,0 +1,8 @@
+body {
+    width: 720px;
+    margin: 0 auto;
+}
+
+header a {
+    text-decoration: none;
+}

meta/plugins/terminal.css

@@ -0,0 +1,197 @@
+@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');
+
+:root {
+    --width: 720px;
+    --font-main: 'Fira Code', monospace;
+    --font-secondary: 'Fira Code', monospace;
+    --font-scale: 1em;
+    --background-color: #222129;
+    --heading-color: #FFA86A;
+    --text-color: #FFA86A;
+    --link-color: #FFA86A;
+    --visited-color: #bc8d6b;
+    --code-background-color: #bc8d6b;
+    --code-color: #222129;
+    --blockquote-color: #222;
+}
+
+body {
+    font-family: var(--font-secondary);
+    font-size: var(--font-scale);
+    margin: auto;
+    padding: 20px;
+    max-width: var(--width);
+    text-align: left;
+    background-color: var(--background-color);
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    line-height: 1.5;
+    color: var(--text-color);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-family: var(--font-main);
+    color: var(--heading-color);
+}
+
+a {
+    color: var(--link-color);
+    cursor: pointer;
+    text-decoration: underline;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+main {
+    margin-top: 40px;
+    margin-bottom: 20px;
+    padding: 30px;
+    border: 1px solid var(--link-color);
+}
+
+nav a {
+    margin-right: 8px;
+}
+
+strong,
+b {
+    color: var(--heading-color);
+}
+
+button {
+    margin: 0;
+    cursor: pointer;
+}
+
+main {
+    line-height: 1.6;
+}
+
+table {
+    width: 100%;
+}
+
+hr {
+    border: 0;
+    border-top: 1px dashed;
+}
+
+img {
+    max-width: 100%;
+}
+
+code {
+    font-family: monospace;
+    padding: 2px;
+    background-color: var(--code-background-color);
+    color: var(--code-color);
+    border-radius: 3px;
+}
+
+blockquote {
+    border-top: 1px solid var(--heading-color);
+    border-bottom: 1px solid var(--heading-color);
+    color: var(--text-color);
+    padding: 20px;
+    font-style: italic;
+    margin-left: 0px;
+    margin-right: 0px;
+}
+
+footer {
+    padding: 25px 0;
+    text-align: center;
+    opacity: 0.6;
+}
+
+header:hover {
+    text-decoration: none;
+}
+
+header h1 {
+    font-size: 1em;
+    padding: 5px 10px;
+    background: var(--heading-color);
+    color: var(--background-color);
+    display: inline-block;
+    font-weight: 400;
+}
+
+.inline {
+    width: auto !important;
+}
+
+.highlight,
+.code {
+    padding: 1px 15px;
+    background-color: var(--code-background-color);
+    color: var(--code-color);
+    border-radius: 3px;
+    margin-block-start: 1em;
+    margin-block-end: 1em;
+    overflow-x: auto;
+}
+
+
+.highlight {
+    border-left: 5px solid var(--heading-color);
+}
+
+/* blog post list */
+ul.blog-posts {
+    list-style-type: none;
+    padding: unset;
+}
+
+ul.blog-posts li {
+    display: flex;
+    margin-bottom: 20px;
+}
+
+
+
+ul.blog-posts li time {
+    font-style: normal;
+}
+
+ul.blog-posts li span {
+    flex: 0 0 130px;
+}
+
+ul.blog-posts li a:visited {
+    color: var(--visited-color);
+}
+
+table {
+    border-collapse: collapse;
+}
+
+table,
+th,
+td {
+    border: 1px dashed var(--heading-color);
+    padding: 10px;
+}
+
+@media only screen and (max-width:767px) {
+    main {
+        padding: 20px;
+        margin-top: 30px;
+        margin-bottom: 10px;
+    }
+
+    ul.blog-posts li {
+        flex-direction: column;
+    }
+
+    ul.blog-posts li span {
+        flex: unset;
+    }
+}

meta/site/index.md

@@ -1,3 +1,3 @@
-**Cat** is a tiny static site generator for CuteKit.
+**Cat** is a tiny static site generator.
 
-![Cat writting the blog](cat.jpg)
+<img alt="Cat writting the blog" src="cat.jpg"/>

meta/site/site.json

@@ -1,7 +1,7 @@
 {
     "favicon": "🐱",
     "title": "Cat",
-    "header": "<span style=\"white-space: nowrap;\">ᓚ₍ ^. .^₎</span>",
+    "header": "ᓚ₍ ^. .^₎",
     "navbar": "[Home](/) [Blog](/blog) [GitHub](https://github.com/cute-engineering/cat)",
-    "footer": "© 2024 Cute Engineering"
+    "footer": "© 2024 [Cute Engineering](https://cute.engineering/)"
 }

meta/site/style.css

@@ -0,0 +1,3 @@
+header h1 {
+    white-space: nowrap;
+}