docs: strikethrough deprecated APIs (#9740)

# Which Problems Are Solved

The docs overview pages and navs don't visually distinguish between
deprecated and GA APIs.
This makes it hard to find the right methods for the job already.
As we are implementing the resource API and continously deprecate
obsolete APIs, this only gets worse.

# How the Problems Are Solved

The UI items in docs overview pages are striked through and pushed to
the bottom of the list.
This applies to side navs as well as card lists.

For example, [see management user
methods](https://docs-git-strikethrough-deprecated-apis-zitadel.vercel.app/docs/apis/resources/mgmt/users):

![image](https://github.com/user-attachments/assets/a12ccd92-3a70-4854-8ebf-b771ff151083)

A method is considered deprecated if it has this option set in the
protos rpc definition:

```protobuf
option (grpc.gateway.protoc_gen_openapiv2.options.openapiv2_operation) = {
    deprecated: true;
}
```

# Additional Changes

None

# Additional Context

- Relates to #9680

---------

Co-authored-by: David Skewis <[email protected]>
This commit is contained in:
Elio Bischof
2025-04-14 11:37:47 +00:00
committed by GitHub
co-authored by David Skewis
parent 4e3da63b67
commit 88493dd2a0
4 changed files with 85 additions and 1 deletions
+29 -1
View File
@@ -612,4 +612,32 @@ p strong {
position: absolute;
top: 0;
left: 0;
}
}
/*
The overview list components are enriched by swizzled DocCardList and DocSidebarItems wrappers.
Deprecated list item titles have the class zitadel-lifecycle-deprecated.
We strike them through, because this is well-known practice and reduces mental overhead for finding the right method to solve a task.
*/
.card:has(.zitadel-lifecycle-deprecated) {
position: relative;
}
.card:has(.zitadel-lifecycle-deprecated)::after {
content: "DEPRECATED";
position: absolute;
top: 10px;
right: 10px;
background-color: var(--ifm-color-danger-contrast-background);
color: var(--ifm-color-danger-contrast-foreground);
font-size: 12px;
font-weight: 600;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.zitadel-lifecycle-deprecated {
text-decoration: line-through;
}