gitbutlerapp · krlvi · Nov 26, 2024 · Nov 26, 2024 · Nov 26, 2024 · Nov 26, 2024
@@ -4,23 +4,24 @@ interface Props {
   width: number
   height: number
   src: string
-  className?: string
   alt?: string
+  className?: string
   subtitle?: string
 }
 
-export default function ImageSection({ width, height, className, alt, src, subtitle }: Props) {
+export default function ImageSection({ src, alt, subtitle }: Props) {
   return (
-    <div className="mx-auto mb-4 flex max-w-2xl flex-col justify-start rounded-lg border border-neutral-200 bg-neutral-100 p-2 dark:border-neutral-800 dark:bg-neutral-900 [&>span]:w-fit [&_img]:m-0">
+    <div className="mx-auto mb-4 flex flex-col justify-start rounded-lg border border-neutral-200 bg-neutral-100 p-2 dark:border-neutral-800 dark:bg-neutral-900 [&>span]:w-fit [&_img]:m-0">
       <ImageZoom
-        width={width}
-        height={height}
-        className={`min-w-content mx-auto w-auto max-w-full rounded-md ${className ?? ""}`}
-        alt={alt ?? ""}
+        width="0"
+        height="0"
+        className="h-auto w-full rounded-md"
+        sizes="(min-width: 800px) 50vw, 100vw"
+        alt={alt ?? subtitle ?? ""}
         src={src}
       />
       {subtitle ? (
-        <div className="mx-auto mt-2 flex-shrink whitespace-normal text-pretty break-words text-center text-sm opacity-50">
+        <div className="mx-auto mt-2 flex-shrink whitespace-normal text-pretty break-words text-center text-xs opacity-50">
           {subtitle}
         </div>
       ) : null}

@@ -16,8 +16,8 @@
   --clr-light-gray: #f1f1ed;
   /* accent */
   --clr-accent: #97eae5;
-  --clr-err-50: #DC606B;
-  --clr-warn-50: #DC9B14;
+  --clr-err-50: #dc606b;
+  --clr-warn-50: #dc9b14;
   --font-system: system-ui, sans-serif;
 }
 
@@ -53,19 +53,8 @@ body {
   }
 }
 
-/* Prev / Next Cards at bottom of every page */
-article div:last-of-type:is(.grid.grid-cols-2) a>p:last-of-type {
-  @apply !font-ppeditorial text-base;
-}
-
-/* Headers Serif */
-h1,
-h2 {
-  @apply !font-ppeditorial;
-}
-
 iframe[src*="youtube"] {
   aspect-ratio: 16 / 9;
   border-radius: 0.5rem;
-  @apply w-full h-full;
+  @apply h-full w-full;
 }
@@ -1,7 +1,6 @@
 import "./global.css"
 import { Provider } from "./provider"
-import localFont from "next/font/local"
-import { Inter } from 'next/font/google'
+import { Inter } from "next/font/google"
 import type { Metadata, Viewport } from "next"
 import type { ReactNode } from "react"
 
@@ -11,29 +10,14 @@ const baseUrl =
     : new URL(`https://${process.env.VERCEL_URL}`)
 
 const inter = Inter({
-  subsets: ['latin'],
-  display: 'swap',
+  subsets: ["latin"],
+  display: "swap",
   variable: "--font-inter"
 })
 
-const ppEditorialNew = localFont({
-  src: [
-    {
-      path: "../public/fonts/PPEditorialNew-Regular.woff2",
-      weight: "300"
-    },
-    {
-      path: "../public/fonts/PPEditorialNew-Italic.woff2",
-      weight: "300",
-      style: "italic"
-    }
-  ],
-  variable: "--font-ppeditorialnew"
-})
-
 export default function Layout({ children }: { children: ReactNode }) {
   return (
-    <html lang="en" className={`${ppEditorialNew.variable} ${inter.variable}`} suppressHydrationWarning>
+    <html lang="en" className={`${inter.variable}`} suppressHydrationWarning>
       <body>
         <Provider>{children}</Provider>
       </body>

@@ -15,11 +15,8 @@ This is useful when you have multiple changesets that depend on each other but i
 > All of the Pull Request stack orchestration is done locally in the client, which means that your repo content is not shared with a cloud service.
 
 <ImageSection
-  width={650}
-  height={222}
   className="mx-auto"
-  alt="Virtual Branches Example"
-  src="/img/docs/0_concepts.png"
+  src="/img/docs/stacked-branches/0_concepts.jpg"
 />
 
 ## Use cases
@@ -59,11 +56,7 @@ can be put in a separate virtual branch. On the other hand a change that depends
 In fact GitButler implements stacked branches as Virtual Branches that are split into multiple dependent branches which makes for a flexible workflow.
 
 <ImageSection
-  width={650}
-  height={350}
-  className="mx-auto"
-  alt="Virtual Branches Example"
-  src="/img/docs/11_overview.png"
+  src="/img/docs/stacked-branches/11_overview.jpg"
 />
 
 ## Workflow
@@ -76,82 +69,63 @@ you can create a new dependent branch within a lance with the `+` button above t
 1. Creating a new dependent branch forms a new stack within the virtual branch
 
 <ImageSection
-  width={650}
-  height={160}
-  className="mx-auto"
-  alt="Virtual Branches Example"
-  src="/img/docs/1_creating_stack.png"
+  src="/img/docs/stacked-branches/1_creating_stack.jpg"
 />
 
 2. New commits land in the topmost branch of the stack
 
 <ImageSection
-  width={650}
-  height={200}
-  className="mx-auto"
-  alt="Virtual Branches Example"
-  src="/img/docs/2_new_commits.png"
+  src="/img/docs/stacked-branches/2_new_commits.jpg"
 />
 
 3. Pushing is done for the stack as a whole
 
 <ImageSection
-  width={650}
-  height={200}
-  className="mx-auto"
-  alt="Virtual Branches Example"
-  src="/img/docs/3_push_all.png"
+  src="/img/docs/stacked-branches/3_push_all.jpg"
 />
 
 4. Pull request creation has to be done from the bottom of the stack upwards
 
 <ImageSection
-  width={650}
-  height={160}
-  className="mx-auto"
-  alt="Virtual Branches Example"
-  src="/img/docs/4_create_pr.png"
+  src="/img/docs/stacked-branches/4_create_pr.jpg"
 />
 
 5. The PRs will contain a footer with stack information and as you add more PRs it will keep all up to date
 
 <ImageSection
-  width={650}
-  height={160}
-  className="mx-auto"
-  alt="Virtual Branches Example"
-  src="/img/docs/5_pr_footer.png"
+  src="/img/docs/stacked-branches/5_pr_footer.jpg"
 />
 
 6. You can drag changes into commits to amend them (e.g. incorporating review feedback) as well as move and squash commits
 
 <ImageSection
-  width={650}
-  height={250}
-  className="mx-auto"
-  alt="Virtual Branches Example"
-  src="/img/docs/6_modify_commits.png"
+  src="/img/docs/stacked-branches/6_modify_commits-amend.jpg"
+  subtitle="Amending a commit"
+/>
+<ImageSection
+  src="/img/docs/stacked-branches/6_modify_commits-move.jpg"
+  subtitle="Moving a commit to a different branch"
 />
+<ImageSection
+  src="/img/docs/stacked-branches/6_modify_commits-squash.jpg"
+  subtitle="Squashing commits"
+/>
+
 
 7. If a change in your stack is independent (e.g. an unrelated bugfix) it can be moved to a different virtual branch (or stack1)
 
 <ImageSection
-  width={650}
-  height={220}
-  className="mx-auto"
-  alt="Virtual Branches Example"
-  src="/img/docs/7_move_to_vb.png"
+  src="/img/docs/stacked-branches/7_move_to_vb.jpg"
 />
 
 8. Review/merge your PRs starting from the bottom up. After a PR/branch from your stack has been merged, it is reflected in the Stack and you should force push to reflect the changes
    on the remote as well
 
 <ImageSection
-  width={650}
-  height={220}
-  className="mx-auto"
-  alt="Virtual Branches Example"
-  src="/img/docs/8_merging.png"
+  src="/img/docs/stacked-branches/8_merging-1.jpg"
+/>
+<ImageSection
+  src="/img/docs/stacked-branches/8_merging-2.jpg"
 />
 
 9. When all branches of a stack have been merged, the stack is complete
@@ -173,11 +147,8 @@ In order to show only the expected Files changed and Commits for PRs in a stack,
 This is true for all but the bottom-most branch in the stack, which targets the default branch of the repository as usual.
 
 <ImageSection
-  width={650}
-  height={160}
-  className="mx-auto"
-  alt="Virtual Branches Example"
-  src="/img/docs/9_pr_heads.png"
+
+  src="/img/docs/stacked-branches/9_pr_heads.jpg"
 />
 
 > Every branch in the stack contains the commits from the branches below it.
@@ -187,11 +158,7 @@ When the bottom-most branch is merged on GitHub, **if** the PR branch is deleted
 GitHub will automatically update any PRs that used to target it to target the default branch instead.
 
 <ImageSection
-  width={650}
-  height={100}
-  className="mx-auto"
-  alt="Virtual Branches Example"
-  src="/img/docs/10_branch_deletion.png"
+  src="/img/docs/stacked-branches/10_branch_deletion.jpg"
 />
 
 If the newly merged branch from the bottom of the stack is not deleted, the next PR in line will still target it and there is a risk of accidentally merging it into the now out of data branch.

@@ -10,9 +10,6 @@ Undo nearly any of your actions or go back in time to an earlier state.
 Before GitButler does any major action, it records the state of everything (your virtual branch state, your uncommitted work, conflict state, etc) and stores it in your Git object database as snapshots. You can hit the 'revert' button on any of the entries and it will restore the state of all of these things to what they looked like when they were recorded, letting you go back in time.
 
 <ImageSection
-  width={700}
-  height={600}
-  className="mx-auto"
   alt="Virtual Branches Example"
   src="/img/docs/timeline-01.avif"
 />
@@ -25,9 +22,6 @@ There is a small clock-looking logo in the bottom left corner of the app, next t
 If you hover over any of the entries, you will see a button named "Revert" that will restore the state of things to right before you did that action. So if you revert one that says "Create Commit", it will put you where you were right before you made that commit.
 
 <ImageSection
-  width={700}
-  height={600}
-  className="mx-auto"
   alt="Virtual Branches Example"
   src="/img/docs/timeline-02.png"
 />
@@ -36,9 +30,6 @@ If you hover over any of the entries, you will see a button named "Revert" that
 Occasionally, GitButler will also take snapshots of files that were changed recently, even if they weren't committed. If this, or any other action, sees changes in files, you can see which ones and view the change by clicking on the file name.
 
 <ImageSection
-  width={700}
-  height={600}
-  className="mx-auto"
   alt="Virtual Branches Example"
   src="/img/docs/timeline-03.avif"
 />

@@ -13,9 +13,6 @@ This could be a local virtual branch that you're working on, or it could be a vi
 The interface looks something like this:
 
 <ImageSection
-  width={700}
-  height={600}
-  className="mx-auto"
   alt="Virtual Branches Example"
   src="/img/docs/branch-lanes-01.webp"
   subtitle="An example of working on two branches at the same time, while pending upstream changes wait for you to merge them."
@@ -32,9 +29,6 @@ The sidebar on the left shows you the stashed virtual branches that you have and
 The "Target" is the view of the target branch that you've set. It will show you essentially a `git log` of `origin/master` or whatever you set as your target branch, and it will show you if there are any commits upstream that you have not integrated locally yet. We will automatically check for new upstream changes every few minutes, but you can also click the update button to check immediately.
 
 <ImageSection
-  width={700}
-  height={600}
-  className="mx-auto"
   alt="Virtual Branches Example"
   src="/img/docs/merge-upstream.png"
   subtitle="A screenshot showcasing the Target view."
@@ -64,9 +58,6 @@ You can inspect any file change by clicking on the file path. GitButler will exp
 
 
 <ImageSection
-  width={700}
-  height={600}
-  className="mx-auto"
   alt="Virtual Branches Example"
   src="/img/docs/branch-lanes-03.webp"
   subtitle="Inspecting our file change"