feat: styling updates

flornkm · Dec 7, 2023 · c188bcf · c188bcf
1 parent 6c4d907
commit c188bcf
Show file tree

Hide file tree

Showing 12 changed files with 233 additions and 92 deletions.
diff --git a/content/feed/essentials.md b/content/feed/essentials.md
@@ -1,6 +1,7 @@
 ---
 title: Essentials
 description: My personal essentials I'm using everyday.
+type: writing
 date: 23 / 11 / 2023
 ---
 

diff --git a/content/feed/first-post.md b/content/feed/first-post.md
@@ -1,6 +1,7 @@
 ---
 title: First post on the new website
 description: The first post on my the new website.
+type: writing
 date: 28 / 10 / 2023
 ---
 

diff --git a/lang/messages.json b/lang/messages.json
@@ -245,7 +245,7 @@
           "pattern": [
             {
               "type": "Text",
-              "value": "Web Design Lead"
+              "value": "Designer (web)"
             }
           ]
         },
@@ -297,7 +297,7 @@
           "pattern": [
             {
               "type": "Text",
-              "value": "Freelancer"
+              "value": "Freelance Graphic- and Motiondesign"
             }
           ]
         },
@@ -349,7 +349,7 @@
           "pattern": [
             {
               "type": "Text",
-              "value": "Design Engineer"
+              "value": "Design Engineer (intern)"
             }
           ]
         },
@@ -391,6 +391,22 @@
         }
       ]
     },
+    {
+      "id": "about_experience_tritschlerkiem_company",
+      "selectors": [],
+      "variants": [
+        {
+          "languageTag": "en",
+          "match": [],
+          "pattern": [
+            {
+              "type": "Text",
+              "value": "Tritschler & Kiem GbR"
+            }
+          ]
+        }
+      ]
+    },
     {
       "id": "about_experience_tritschlerkiem_job",
       "selectors": [],
@@ -401,7 +417,7 @@
           "pattern": [
             {
               "type": "Text",
-              "value": "Design Engineer"
+              "value": "Design Engineer (self-employed)"
             }
           ]
         },

diff --git a/pages/about/+Page.tsx b/pages/about/+Page.tsx
@@ -16,10 +16,12 @@ export default function Page() {
       jobTitle: m.about_experience_inlang_job(),
     },
     {
+      company: m.about_experience_tritschlerkiem_company(),
+      comapanyLink: "https://tritschlerkiem.com/",
       from: "12 / 2020",
       to: "06 / 2023",
       slogan: m.about_experience_tritschlerkiem_slogan(),
-      jobTitle: m.about_experience_freelancer_job(),
+      jobTitle: m.about_experience_tritschlerkiem_job(),
     },
     {
       company: "Comondo",

diff --git a/pages/archive/index/+Page.tsx b/pages/archive/index/+Page.tsx
@@ -2,81 +2,128 @@ import Button from "#components/Button"
 import { InlineInfo } from "#components/Inline"
 import Tooltip from "#components/Tooltip"
 import Short from "~icons/eva/flash-fill"
+import File from "~icons/eva/file-outline"
+import Folder from "~icons/eva/folder-outline"
 import * as m from "#lang/paraglide/messages"
+import { useState } from "preact/hooks"
 
-export default function Page({ projects }: { projects: any }) {
+export default function Page({
+  projects,
+  currentFolder,
+}: {
+  currentFolder: "all" | "projects"
+  projects: any
+}) {
   return (
     <div class="w-full">
       <section class="w-full lg:pt-16">
         <h1 class="text-3xl font-semibold mb-4">{m.archive_title()}</h1>
         <p class="text-zinc-500 mb-16 max-w-lg dark:text-zinc-400">
           {m.archive_description()}
         </p>
-        <div class="md:hidden text-sm flex items-center gap-1 text-zinc-400 dark:text-zinc-500 mb-6">
-          <Short class="w-4 pt-0.5 transition-colors text-zinc-300 dark:text-zinc-700" />
-          <p>= Short case study</p>
-        </div>
-        <div class="py-0.5 pb-16">
-          {projects.map((project: any) => {
-            const date = new Date(
-              Number(project.date.split("/")[1]),
-              Number(project.date.split("/")[0])
-            )
-            return (
-              <>
-                <div class="grid md:grid-cols-8 grid-cols-2 gap-4 leading-none md:items-center">
-                  <p class="font-semibold leading-snug flex items-center">
-                    {project.title}
-                  </p>
-                  {project.short ? (
-                    <div class="group relative md:place-self-start place-self-end">
-                      <Short class="w-4 pt-0.5 transition-colors text-zinc-300 lg:hover:text-amber-500 cursor-help dark:text-zinc-700" />
-                      <Tooltip
-                        position="top"
-                        class="-translate-y-3 hidden md:block"
+        {currentFolder === "all" && (
+          <div class="py-0.5 pb-16">
+            <a
+              href={"?folder=projects"}
+              onClick={(e) => {
+                e.preventDefault()
+                window.history.pushState(
+                  {},
+                  "",
+                  window.location.pathname + "?folder=projects"
+                )
+                window.dispatchEvent(new Event("popstate"))
+              }}
+              class="flex items-center justify-between gap-4 cursor-pointer leading-none md:items-center group/link py-4 transition-colors hover:bg-zinc-100 rounded-md"
+            >
+              <p class="font-semibold leading-snug md:col-span-2 flex items-center">
+                <Folder class="w-8 flex-shrink-0" />
+                Projects
+              </p>
+              <Button
+                type="text"
+                class="relative md:ml-auto col-span-2 md:col-span-1 group-hover/link:underline"
+                chevron
+              >
+                {m.button_open()}
+              </Button>
+            </a>
+            <div class="border-b border-b-zinc-100 dark:border-b-zinc-900" />
+          </div>
+        )}
+        {currentFolder === "projects" && (
+          <>
+            <div class="md:hidden text-sm flex items-center gap-1 text-zinc-400 dark:text-zinc-500 mb-6">
+              <Short class="w-4 pt-0.5 transition-colors text-zinc-300 dark:text-zinc-700" />
+              <p>= Short case study</p>
+            </div>
+            <div class="py-0.5 pb-16">
+              {projects.map((project: any) => {
+                const date = new Date(
+                  Number(project.date.split("/")[1]),
+                  Number(project.date.split("/")[0])
+                )
+                return (
+                  <>
+                    <a
+                      href={project.url}
+                      class="grid md:grid-cols-9 grid-cols-2 gap-4 leading-none md:items-center group/link py-4 transition-colors hover:bg-zinc-100 rounded-md"
+                    >
+                      <p class="font-semibold leading-snug md:col-span-2 flex items-center">
+                        <File class="w-8 flex-shrink-0" />
+                        {project.title}
+                      </p>
+                      {project.short ? (
+                        <div class="group relative md:place-self-start place-self-end">
+                          <Short class="w-4 transition-colors text-zinc-300 lg:hover:text-amber-500 cursor-help dark:text-zinc-700" />
+                          <Tooltip
+                            position="top"
+                            class="-translate-y-3 hidden md:block"
+                          >
+                            {m.short_case_study()}
+                          </Tooltip>
+                        </div>
+                      ) : (
+                        <p></p>
+                      )}
+                      <p class="text-zinc-500 truncate md:col-span-4 leading-snug col-span-2 dark:text-zinc-400">
+                        {project.description}
+                      </p>
+                      <div class="group relative mr-auto md:col-span-1 col-span-2 mb-4 md:mb-0">
+                        <p class="text-sm">
+                          <InlineInfo>
+                            <>
+                              {date.getFullYear().toString()}{" "}
+                              {
+                                ["Q1", "Q2", "Q3", "Q4"][
+                                  Math.floor(date.getMonth() / 3)
+                                ]
+                              }
+                            </>
+                          </InlineInfo>
+                        </p>
+                        <Tooltip position="top" class="-translate-y-3">
+                          <>{project.date}</>
+                        </Tooltip>
+                      </div>
+                      <Button
+                        type="text"
+                        link={project.url}
+                        class="relative md:ml-auto col-span-2 md:col-span-1 group-hover/link:underline"
+                        chevron
                       >
-                        {m.short_case_study()}
-                      </Tooltip>
-                    </div>
-                  ) : (
-                    <p></p>
-                  )}
-                  <p class="text-zinc-500 truncate md:col-span-4 leading-snug col-span-2 dark:text-zinc-400">
-                    {project.description}
-                  </p>
-                  <div class="group relative mr-auto md:col-span-1 col-span-2 mb-4 md:mb-0">
-                    <p class="text-sm">
-                      <InlineInfo>
-                        <>
-                          {date.getFullYear().toString()}{" "}
-                          {
-                            ["Q1", "Q2", "Q3", "Q4"][
-                              Math.floor(date.getMonth() / 3)
-                            ]
-                          }
-                        </>
-                      </InlineInfo>
-                    </p>
-                    <Tooltip position="top" class="-translate-y-3">
-                      <>{project.date}</>
-                    </Tooltip>
-                  </div>
-                  <Button
-                    type="text"
-                    link={project.url}
-                    class="relative md:ml-auto col-span-2 md:col-span-1"
-                    chevron
-                  >
-                    {m.button_open()}
-                  </Button>
-                </div>
-                {projects.indexOf(project) !== projects.length - 1 && (
-                  <div class="border-b border-b-zinc-100 my-4 dark:border-b-zinc-900" />
-                )}
-              </>
-            )
-          })}
-        </div>
+                        {m.button_open()}
+                      </Button>
+                    </a>
+                    {projects.indexOf(project) !== projects.length - 1 && (
+                      <div class="border-b border-b-zinc-100 dark:border-b-zinc-900" />
+                    )}
+                  </>
+                )
+              })}
+            </div>
+          </>
+        )}
       </section>
     </div>
   )

diff --git a/pages/archive/index/+onBeforePrerenderStart.ts b/pages/archive/index/+onBeforePrerenderStart.ts
@@ -18,6 +18,22 @@ async function onBeforePrerenderStart() {
       url: "/archive",
       pageContext: {
         pageProps: {
+          currentFolder: "all",
+          projects: projects,
+        },
+        documentProps: {
+          title: "Archive | Florian - Design Engineer",
+          description:
+            "In my archive, you will find smaller creations, MVPs, ideas and results from hackathons. Feel free to look through if you are interested.",
+          image: "/images/opengraph/og-image-archive.jpg",
+        },
+      },
+    },
+    {
+      url: "/archive/projects",
+      pageContext: {
+        pageProps: {
+          currentFolder: "projects",
           projects: projects,
         },
         documentProps: {

diff --git a/pages/archive/index/+onBeforeRender.ts b/pages/archive/index/+onBeforeRender.ts
@@ -1,13 +1,18 @@
 export default onBeforeRender
 
+import { PageContext } from "vike/types"
 import { returnContent } from "../../../markdown/convert"
 
-async function onBeforeRender() {
+async function onBeforeRender(pageContext: PageContext) {
   const projects = await returnContent("archive")
+  const folder = pageContext.urlPathname.split("/")[2]
+
+  console.log("folder", folder)
 
   return {
     pageContext: {
       pageProps: {
+        currentFolder: folder,
         projects: projects,
       },
       documentProps: {

diff --git a/pages/feed/index/+Page.tsx b/pages/feed/index/+Page.tsx
@@ -2,6 +2,7 @@ import "#design-system/feed.css"
 import { Post, PostContent } from "../types"
 import * as m from "#lang/paraglide/messages"
 import Share from "~icons/eva/share-outline"
+import Writing from "~icons/eva/edit-2-fill"
 import Picker from "#components/Picker"
 import { useState } from "preact/hooks"
 import Markdown from "#markdown/Markdown"
@@ -37,6 +38,19 @@ export default function Page({
                     : "mb-24 md:mb-48"
                 }
               >
+                {post.type === "writing" ? (
+                  <div class="text-sm pl-1.5 px-2 py-0.5 inline-block mb-2 rounded-lg font-medium text-zinc-500 border border-zinc-400">
+                    <Writing class="inline-block mr-2 rounded-full" />
+                    Writing
+                  </div>
+                ) : post.type === "sports" ? (
+                  <div class="text-sm pl-1.5 px-2 py-0.5 inline-block mb-2 rounded-lg font-medium text-amber-500 border border-amber-400">
+                    <Writing class="inline-block mr-2 rounded-full" />
+                    Writing
+                  </div>
+                ) : (
+                  <></>
+                )}
                 <div class="flex items-center justify-between">
                   <p class="text-sm text-zinc-400">
                     {date.toLocaleDateString("en-US", { weekday: "long" })} –{" "}

diff --git a/pages/feed/types.ts b/pages/feed/types.ts
@@ -5,6 +5,7 @@ export interface RenderedPosts {
 export type Post = {
   title: string
   slug: string
+  type: "writing"
   date: string
 }
 

diff --git a/project.inlang.README.md b/project.inlang.README.md
@@ -0,0 +1,20 @@
+
+# DELETE THE `project.inlang.json` FILE
+
+The `project.inlang.json` file is now contained in a project directory e.g. `project.inlang/settings.json`.
+
+
+## What you need to do
+
+1. Update the inlang CLI (if you use it) to use the new path `project.inlang` instead of `project.inlang.json`.
+2. Delete the `project.inlang.json` file.
+
+
+## Why is this happening?
+
+See this RFC https://docs.google.com/document/d/1OYyA1wYfQRbIJOIBDliYoWjiUlkFBNxH_U2R4WpVRZ4/edit#heading=h.pecv6xb7ial6 
+and the following GitHub issue for more information https://github.com/inlang/monorepo/issues/1678.
+
+- Monorepo support https://github.com/inlang/monorepo/discussions/258. 
+- Required for many other future features like caching, first class offline support, and more. 
+- Stablize the inlang project format.