0e16f98c27
Updates the online tutorial experience - Adds a landing page at [/tutorials](https://nx-dev-git-docs-tutorial-landing-page-nrwl.vercel.app/tutorials) - Terminal code blocks get a "run in terminal" button - Code blocks get an "Apply file changes" button - The apply file changes button currently only works for code blocks that are showing the new file results (not showing the old file with lines marked for deletion). There is nothing technical blocking this, just time. - Previous and next buttons do not go between tutorials - The preview panel can be completely minimized - Git is stubbed out
40 lines
1.7 KiB
Plaintext
40 lines
1.7 KiB
Plaintext
---
|
|
import { GlobalCustomizations } from "./GlobalCustomizations";
|
|
import { FrontendObservability } from "./Observability";
|
|
import { getCollection } from 'astro:content';
|
|
const entries = await getCollection('tutorial', ({ slug }) => {
|
|
return slug.startsWith(Astro.url.pathname.replace('/tutorials/', ''));
|
|
});
|
|
const customMeta = (entries[0]?.data as any)?.custom;
|
|
const addedClass = [customMeta?.first && 'first-lesson', customMeta?.last && 'last-lesson', ' '].filter(Boolean).join(' ');
|
|
---
|
|
|
|
<nav id="top-bar"
|
|
class={addedClass + "bg-tk-elements-panel-header-backgroundColor transition-theme border-b border-tk-elements-app-borderColor flex max-w-full min-h-[68px]"}
|
|
>
|
|
<div class="flex flex-1 p-1 gap-4 lg:px-8 lg:py-3 text-tk-elements-app-textColor items-center">
|
|
<a
|
|
href="/"
|
|
class="block h-[32px] w-[32px] items-center text-tk-elements-app-textColor hover:text-tk-elements-topBar-logo-colorHover"
|
|
>
|
|
<img class="h-full w-full dark:hidden" src="/tutorials/logo.svg" />
|
|
<img class="h-full w-full hidden dark:inline-block" src="/tutorials/logo-dark.svg" />
|
|
</a>
|
|
<a class="ml-2 hidden items-center px-4 text-slate-900 lg:flex font-light lg:px-0 dark:text-white" href="/getting-started/intro"><span class="text-xl font-bold uppercase tracking-wide">Docs</span></a>
|
|
</div>
|
|
<div class="flex items-center p-3 px-4">
|
|
<div class="flex flex-1"></div>
|
|
<div class="mr-2" id="download-button">
|
|
<slot name="download-button" />
|
|
</div>
|
|
<div class="mr-2">
|
|
<slot name="open-in-stackblitz-link" />
|
|
</div>
|
|
<div>
|
|
<slot name="theme-switch" />
|
|
</div>
|
|
</div>
|
|
<FrontendObservability client:load />
|
|
<GlobalCustomizations client:load />
|
|
</nav>
|