Skip to content

Commit f4efffc

Browse files
committed
feat: add goodies page and related content
1 parent ce6659d commit f4efffc

7 files changed

Lines changed: 314 additions & 0 deletions

File tree

app/pages/goodies.vue

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<template>
2+
<NuxtPage />
3+
</template>

app/pages/goodies/[slug].vue

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<script setup lang="ts">
2+
const route = useRoute()
3+
4+
const { data: goodie } = await useAsyncData(route.path, () => queryCollection('goodies').path(route.path).first())
5+
if (!goodie.value) {
6+
throw createError({ statusCode: 404, statusMessage: 'Goodie not found', fatal: true })
7+
}
8+
9+
const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
10+
return queryCollectionItemSurroundings('goodies', route.path, {
11+
fields: ['description']
12+
})
13+
})
14+
15+
const title = goodie.value.seo?.title || goodie.value.title
16+
const description = goodie.value.seo?.description || goodie.value.description
17+
18+
useSeoMeta({
19+
title,
20+
ogTitle: title,
21+
description,
22+
ogDescription: description
23+
})
24+
25+
if (goodie.value.image?.src) {
26+
defineOgImage({
27+
url: goodie.value.image.src
28+
})
29+
} else {
30+
defineOgImageComponent('Saas', {
31+
headline: 'Goodies'
32+
})
33+
}
34+
</script>
35+
36+
<template>
37+
<UContainer v-if="goodie">
38+
<NuxtImg
39+
v-if="goodie.image?.src"
40+
:src="goodie.image.src"
41+
:alt="goodie.image.alt || goodie.title"
42+
class="goodie-cover-image w-full rounded-lg shadow-lg mb-8"
43+
/>
44+
45+
<UPageHeader
46+
:title="goodie.title"
47+
:description="goodie.lead"
48+
/>
49+
50+
<UPage>
51+
<UPageBody>
52+
<ContentRenderer
53+
v-if="goodie"
54+
:value="goodie"
55+
/>
56+
57+
<USeparator v-if="surround?.length" />
58+
59+
<UContentSurround :surround="surround" />
60+
</UPageBody>
61+
62+
<template
63+
v-if="goodie?.body?.toc?.links?.length"
64+
#right
65+
>
66+
<UContentToc :links="goodie.body.toc.links" />
67+
</template>
68+
</UPage>
69+
</UContainer>
70+
</template>
71+
72+
<style scoped>
73+
.goodie-cover-image {
74+
view-transition-name: selected-goodie;
75+
contain: layout;
76+
}
77+
</style>

app/pages/goodies/index.vue

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<script setup lang="ts">
2+
const route = useRoute()
3+
4+
const { data: page } = await useAsyncData('goodiesPage', () => queryCollection('goodiesPage').first())
5+
const { data: goodies } = await useAsyncData(route.path, () => queryCollection('goodies').all())
6+
7+
const title = page.value?.seo?.title || page.value?.title
8+
const description = page.value?.seo?.description || page.value?.description
9+
10+
useSeoMeta({
11+
title,
12+
ogTitle: title,
13+
description,
14+
ogDescription: description
15+
})
16+
17+
defineOgImageComponent('Saas')
18+
19+
const activeGoodie = useState<number | null>('activeGoodie', () => null)
20+
</script>
21+
22+
<template>
23+
<UContainer>
24+
<UPageHeader
25+
:title="page?.title || 'Goodies'"
26+
:description="page?.description || 'Some things you might find useful.'"
27+
class="py-[50px]"
28+
/>
29+
30+
<UPageBody>
31+
<UBlogPosts>
32+
<UBlogPost
33+
v-for="(goodie, index) in goodies"
34+
:key="index"
35+
:to="goodie.path"
36+
:title="goodie.title"
37+
:description="goodie.description"
38+
:image="goodie.image"
39+
orientation="horizontal"
40+
class="col-span-full"
41+
:class="activeGoodie === index && 'active'"
42+
variant="naked"
43+
:ui="{
44+
root: 'lg:grid lg:grid-cols-2 lg:items-center gap-x-8',
45+
title: 'text-3xl',
46+
description: 'text-xl line-clamp-3'
47+
}"
48+
@click="activeGoodie = index"
49+
/>
50+
</UBlogPosts>
51+
</UPageBody>
52+
</UContainer>
53+
</template>
54+
55+
<style scoped>
56+
.active {
57+
view-transition-name: selected-goodie;
58+
contain: layout;
59+
}
60+
</style>

content.config.ts

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,5 +118,26 @@ export const collections = {
118118
date: z.date(),
119119
badge: z.object({ label: z.string().nonempty() })
120120
})
121+
}),
122+
goodiesPage: defineCollection({
123+
source: '3.goodies.yml',
124+
type: 'page',
125+
schema: z.object({
126+
align: z.string().optional(),
127+
image: createImageSchema().optional()
128+
})
129+
}),
130+
goodies: defineCollection({
131+
source: '3.goodies/**/*',
132+
type: 'page',
133+
schema: z.object({
134+
lead: z.string().optional(),
135+
image: createImageSchema().optional()
136+
})
137+
}),
138+
content: defineCollection({
139+
source: '*.md',
140+
type: 'page',
141+
schema: z.object({})
121142
})
122143
}

content/3.goodies.yml

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
title: Goodies
2+
description: Some things you might find useful.
3+
navigation.icon: i-heroicons-gift-solid
4+
align: left
Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
---
2+
title: My Git Cheat Sheet
3+
lead: Useful git commands
4+
description: Another git cheat sheet like you'll find plenty of, but this one doesn't list basic commands. Instead it focuses on explaining which less-known git commands you will need depending on the situation you find yourself in.
5+
image:
6+
src: /goodies/gitcheatsheet.webp
7+
---
8+
You can find many nice git cheat sheets everywhere on the web, but let's just quote GitHub's [git cheat sheet](https://github.github.com/training-kit/downloads/github-git-cheat-sheet.pdf) which provides you with most useful git commands. That is not my intent, I won't enumerate all basic commands everybody knows and uses everyday, but list some commands that I use less often and that I want to remind myself of, often because I can never remember their exact syntax.
9+
10+
I tried to organize git commands by situation where you can need them and I added the link to the official documentation.
11+
12+
### When you need to add a range of commits into your current branch history
13+
14+
- `git cherry-pick ebe6952^..905e379`
15+
- pick all the commits from commit `ebe6952` to commit `905e379`
16+
- add them in your current branch
17+
- [Doc](https://git-scm.com/docs/git-cherry-pick)
18+
19+
### When you only want to push some of your commits in your branch
20+
21+
- `git push ebe6952:main` where `ebe6952` is the latest commit you want to push
22+
- push your main branch until the commit `ebe6952`
23+
- it's useful in caseswhen you have `A -> B -> C -> D -> E` on your local repository and you only want to push `C` and `D`
24+
- [Doc](https://git-scm.com/docs/git-push#Documentation/git-push.txt-ltrefspecgt82308203)
25+
26+
27+
### When you messed up your repository with git commands like rebase and want to recover changes from a commit not in your history anymore
28+
- `git reflog`
29+
- give you an history of the references of your HEAD (current active branch)
30+
- allow you to see on which commit was your HEAD after each git command you did
31+
- once you have the commit hash you are interested in, you can see what changes were made in this commit or even reset the branch to this commit
32+
- [Doc](https://git-scm.com/docs/git-reflog)
33+
34+
### Quickly change last commit
35+
36+
```bash
37+
git add . //(to stage modifications to integrate to commit)
38+
git commit --amend
39+
```
40+
- `git commit --amend` will open your git editor to allow you to change the commit message
41+
- [Doc](https://git-scm.com/docs/git-commit)
42+
43+
### When you are working in a feature branch and want to integrate the changes done by your colleagues in the main branch
44+
```bash
45+
git checkout dev
46+
git pull
47+
git checkout featurebranch
48+
git rebase dev
49+
git push --force
50+
```
51+
- This will rewrites your branch history, that is why the "--force" is needed (if you have already pushed your commits that have been rewritten)
52+
- Check this [post](https://jeffkreeftmeijer.com/git-rebase/) to understand in a schema what happens when reintegrating changes from another branch
53+
- [Doc](https://git-scm.com/docs/git-rebase)
54+
55+
As a colleague suggested me, if you don't need your local main branch to be up-to-date, you can win a few keystrokes and some time by replacing the above commands by the following commands:
56+
```bash
57+
git fetch origin
58+
git rebase origin/dev
59+
git push --force
60+
```
61+
It does the same thing than the previous set of commands, but just does not merge the changes of dev on your local dev branch. And as most of the time you don't need to and want to stay on your feature branch, that's easier and quicker to do it this way.
62+
63+
### When you want to have a clean commit history on your branch before creating your pull request
64+
```bash
65+
git rebase -i HEAD~3
66+
```
67+
- Opens up an editor to pick, reword, edit, squash or fixup your last 3 commits
68+
- Check this [post](https://delicious-insights.com/en/posts/getting-solid-at-git-rebase-vs-merge/#cleaning-up-your-local-history-before-pushing) to deep dive into interactive rebase ... best git command ever ...
69+
- [Doc](https://git-scm.com/docs/git-rebase)
70+
71+
### When you want to stash your local changes with a specific name you can easily find later
72+
- `git stash save "myFriendlyStashName"` will save your local changes in a stash with the name "myFriendlyStashName"
73+
- When you list all you current stash later with `git stash list`, you can easily find its number:
74+
75+
![List of Git stashes in the terminal](/goodies/gitcheatsheet_console_1.png){ .rounded-lg .mx-auto width=600}
76+
77+
- Here we can see that the myFriendlyStashName is the first one and we can pop it with `git stash pop "stash@{0}"` or apply it with `git stash apply "stash@{0}"`
78+
- [Doc](https://git-scm.com/docs/git-stash#Documentation/git-stash)
79+
80+
### When someone did a `git push --force` on the repository and you want to reset your local repository
81+
```bash
82+
git fetch
83+
git reset origin/master --hard
84+
```
85+
- All your local changes will be erased, if you want to keep them use `--soft`
86+
- See [this Stackoverflow post](https://stackoverflow.com/questions/9813816/git-pull-after-forced-update) for more information
87+
88+
### When you want to reset a file to its previous version
89+
- `git reset HEAD^ filename`
90+
- [Doc](https://git-scm.com/docs/git-reset)
91+
92+
### When you want to "remove" the last commit
93+
- `git reset --soft HEAD~1`
94+
- [Doc](https://git-scm.com/docs/git-reset)
95+
96+
97+
### When you want to move an existing branch to another commit
98+
- `git branch -f myBranch ebe6952`
99+
- [Doc](https://git-scm.com/docs/git-branch)
100+
101+
### Update git when using Windows
102+
```bash
103+
git update-git-for-windows
104+
```
105+
- Sometimes, once Git is installed, we forget to update it
106+
- Doing this command from time to time will allow you to benefit from git last version with new features and corrected issues
107+
108+
### Checkout a PR when using Azure Repos
109+
```bash
110+
git config --add remote.origin.fetch +refs/pull/*/merge:refs/remotes/origin/pr/*
111+
git checkout pr/196
112+
```
113+
- You only need to do the `git config` command once and each fetch will also fetch the PR
114+
- You can then directly checkout the PR number you want to review
115+
- If you use Visual Studio there is a much better way to review PR directly in your IDE by using the Microsoft Extension [Pull Requests for Visual Studio](https://marketplace.visualstudio.com/items?itemName=VSIDEVersionControlMSFT.pr4vs)
116+
117+
### When you want to trigger a CI pipeline you want to test without changing the code
118+
Instead of adding a space to a file just to have something to commit to trigger a pipeline you are testing, just do :
119+
```bash
120+
git commit --allow-empty -m "improve ci"
121+
```
122+
[Doc](https://git-scm.com/docs/git-commit)
123+
124+
### Flag a bash script as executable when using Linux or WSL
125+
```bash
126+
git update-index --chmod=+x script.sh
127+
```
128+
- This command will make the script.sh file executable (can be useful when you need your CI like GitHub Actions to execute scripts in your repo)
129+
- [Doc](https://git-scm.com/docs/git-update-index)
130+
131+
### When you want to reorganize you git repository
132+
- Imagine you have created your code project at the root of your git repository and want to reorganize it to have a `src`,`build`, `docs` ... folders like suggested in this [.NET project structure](https://gist.github.com/davidfowl/ed7564297c61fe9ab814).
133+
- You will want to create an src folder and move all your existing files to this `src` folder while keeping the files history.
134+
- For this you can use the `git mv` command but you have to first remove or move your untracked files and folder (`csproj.user`, `bin/`, `obj/`) and to specify in the command not to move your `src` folder (using `!(src)`).
135+
```bash
136+
git mv ./!(src) src/
137+
```
138+
- [Doc](https://git-scm.com/docs/git-mv)
139+
140+
### When you are bored with writing git commands in your terminal
141+
- If you are used to vs code and like it, if you are using vs code to write your code, or if you just want something more powerful than Visual Studio git integration :
142+
- Install the excellent [GitLens extension](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) for vs code
143+
144+
- If you prefer standalone git client, have a look at [Fork](https://git-fork.com/)
145+
146+
- Keep using git commands but enhance your terminal with tab completion and repository status in prompt by using
147+
- [Posh-Git](https://github.com/dahlbyk/posh-git) and [Oh-My-Posh](https://github.com/JanDeDobbeleer/oh-my-posh) when working in PowerShell (see more in [Scott Hanselman blog post](https://www.hanselman.com/blog/HowToMakeAPrettyPromptInWindowsTerminalWithPowerlineNerdFontsCascadiaCodeWSLAndOhmyposh.aspx))
148+
- [Oh my zsh](https://github.com/robbyrussell/oh-my-zsh) and its git plugin when working in Bash (Ubuntu / WSL)

content/3.goodies/_dir.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
navigation.icon: i-heroicons-gift-solid

0 commit comments

Comments
 (0)