Add direction and item_style attributes to sections

thevahidal · Dec 30, 2023 · 2017992 · 2017992
1 parent c9fe163
commit 2017992
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -48,6 +48,8 @@ Each section has the following components:
 
 - `title`: The title of the section (e.g., "Projects")
 - `description`: A brief description of the section (e.g., "Here are some of my projects")
+- `direction`: The direction of the section: "row" or "column" (e.g., "row")
+- `item_style`: The style of the items in the section: "outline" or "filled" (e.g., "outline")
 - `items`: The items associated with the section. Each item is defined using `[[sections.items]]`.
 
 Each item within a section has the following components:

diff --git a/data.toml b/data.toml
@@ -10,6 +10,8 @@ gtag_id = "G-33WB8LVHR6"
 [[sections]]
 title = "Movies"
 description = "Here are some of my movies"
+direction = "column"
+item_style = "outline"
 [[sections.items]]
 title = "Nightcrawler"
 description = "A mesmerizing thriller delving into the dark world of crime journalism"
@@ -26,9 +28,17 @@ url = "https://www.imdb.com/title/tt1392214/"
 [[sections]]
 title = "Links"
 description = "Look for me on these websites"
+direction = "row"
+item_style = "filled"
 [[sections.items]]
 title = "Instagram"
 url = "https://www.instagram.com/jakegyllenhaal"
 [[sections.items]]
 title = "IMDb"
 url = "https://www.imdb.com/name/nm0350453/"
+[[sections.items]]
+title = "Wikipedia"
+url = "https://en.wikipedia.org/wiki/Jake_Gyllenhaal"
+[[sections.items]]
+title = "Rotten Tomatoes"
+url = "https://www.rottentomatoes.com/celebrity/jake_gyllenhaal"
diff --git a/dist/css/style.css b/dist/css/style.css
@@ -10,6 +10,14 @@
   margin-bottom: var(--block-spacing-vertical);
 }
 
+.items {
+  display: flex;
+  column-gap: var(--spacing);
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
 [role="button"] > hgroup {
   margin-bottom: 0;
 }

diff --git a/script.py b/script.py
@@ -11,21 +11,25 @@
                 h("h3")(section.get("title")),
                 h("p")(section.get("description")),
             ),
-            (
-                h("div", klass="item")(
+            h(
+                "div",
+                klass="items",
+                style=f"flex-direction: {section.get('direction', 'column')}",
+            )(
+                h(
+                    "div",
+                    klass="item",
+                    style=f"width: {'100%' if section.get('direction', 'column') == 'column' else 'unset'}",
+                )(
                     h(
                         "a",
                         role="button",
-                        klass="outline",
+                        klass=f"{'outline' if section.get('item_style', 'outline') == 'outline' else ''}",
                         href=item.get("url"),
                         target="_blank",
                     )(
                         h("hgroup")(
-                            h("h4")(item.get("title")),
-                            h("h5")(item.get("description"))
-                            if item.get("description")
-                            else None,
-                            "",
+                            h("h4")(item.get("title")), h("h5")(item.get("description"))
                         ),
                     ),
                 )