-
Notifications
You must be signed in to change notification settings - Fork 102
-
It could be great to create a real homepage. It's not really a priority, actually I use a lesson page.
Beta Was this translation helpful? Give feedback.
All reactions
Replies: 1 comment 6 replies
-
You can do this by adding defaultRoutes: "tutorial-only" in your astro.config.ts:
import tutorialkit from "@tutorialkit/astro"; import { defineConfig } from "astro/config"; export default defineConfig({ integrations: [ tutorialkit({ defaultRoutes: "tutorial-only", }), ], });
Then create a src/pages/index.astro. That will be served from /.
This was implemented in #93 but is not documented yet.
Beta Was this translation helpful? Give feedback.
All reactions
-
❤️ 1
-
@GaetanRdn, When you mean no styles, what do you mean exactly? We use UnoCSS which is an atomic css engine: https://unocss.dev/.
Its included via its Astro integration which if I'm not mistaken should always include the generated stylesheet on every pages. In particular you can check that we do not include that one manually by looking in those files:
If it doesn't seem to be working you can import it explicetly by adding import "uno.css" in the frontmatter of your index.astro file.
Our custom CSS lives there: https://github.com/stackblitz/tutorialkit/blob/main/packages/astro/src/default/styles/base.css.
As you can see there isn't much. Let us know how it goes!
Beta Was this translation helpful? Give feedback.
All reactions
-
I think I do what you wrote. But as you can see, I have a white background and black color.
Beta Was this translation helpful? Give feedback.
All reactions
-
If I create a theme.css file like this : https://tutorialkit.dev/reference/theming/#styling
and code ma index.astro like this :
---
import 'theme.css';
---
<html lang="fr" data-theme="dark">
<head>
<meta charset="utf-8"/>
<link rel="icon" type="image/svg+xml" href="/favicon.svg"/>
<meta name="viewport" content="width=device-width"/>
<meta name="generator" content={Astro.generator}>
<title>Astro</title>
</head>
<body>
<main class="transition-theme bg-tk-elements-app-backgroundColor text-tk-elements-app-textColor">
Hello
</main>
</body>
</html>
Then it works:
Beta Was this translation helpful? Give feedback.
All reactions
-
@GaetanRdn Sorry for the late response!
In your first example that you shared, you get the expected output when no classes are set. The reason it looks like what you shared and not like this
is because we apply a CSS reset:
If you want it to look different you need to style it! Our default stylesheet does not affect existing elements as this provide the most flexibility and is considered good practice nowaydays.
As you noticed you can use TutorialKit classes generated by UnoCSS. You don't need to import theme.css or uno.css, this is done automatically by the UnoCSS Astro integration.
If you aren't familiar with UnoCSS, I invite you to read the online docs: https://unocss.dev/. I also find the docs from https://tailwindcss.com/ pretty useful and as the two engines are pretty close, I think you'll find them useful too.
Beta Was this translation helpful? Give feedback.
All reactions
-
❤️ 1
-
Thanks for your answer 👌🏼
Beta Was this translation helpful? Give feedback.
All reactions
-
🎉 1