docs: add project website screenshots to README.md

Author: softwareentrepreneer

README.md

@@ -46,7 +46,16 @@ First-time maintainers must learn multiple tools and concepts, e.g. [MyST], [Sem
 - [ ] **⚡ Full-text search** across **ALL** your content in your website — docs, blogs, tutorials, everything
 - [ ] **🤖 Embedded AI Chatbot** that answers questions directly using an in-browser LLM — at no cost
 
+---
+## Project Website
+> The project website for `afterpython` is created using `afterpython` itself. See the [**website**](https://afterpython.afterpython.org).
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="afterpython/static/website-dark.png">
+  <source media="(prefers-color-scheme: light)" srcset="afterpython/static/website-light.png">
+  <img alt="Project Website" src="afterpython/static/website-light.png">
+</picture>
 
+---
 ## Installation
 ```bash
 # install afterpython as a dev dependency

afterpython/_website/src/lib/components/Footer.svelte

@@ -2,6 +2,7 @@
 	import GitHubIcon from '$components/GitHubIcon.svelte';
 	import { dev } from '$app/environment';
 	import { env } from '$env/dynamic/public';
+	import { resolve } from '$app/paths';
 
 	type FooterProps = {
 		projectName?: string;
@@ -45,7 +46,7 @@
 			<div>
 				<h3 class="text-lg font-semibold text-tx50 mb-3">Resources</h3>
 				<ul class="space-y-2 text-sm text-tx300">
-					<li><a href={dev ? env.PUBLIC_DOC_URL : "/doc"} target="_blank" rel="external noopener noreferrer" class="hover:text-tx50 transition-colors">Documentation</a></li>
+					<li><a href={dev ? env.PUBLIC_DOC_URL : resolve("/doc")} target="_blank" rel="external noopener noreferrer" class="hover:text-tx50 transition-colors">Documentation</a></li>
 					<!-- <li><a href="/tutorials" class="hover:text-tx50 transition-colors">Tutorials</a></li>
 					<li><a href="/examples" class="hover:text-tx50 transition-colors">Examples</a></li>
 					<li><a href="/blog" class="hover:text-tx50 transition-colors">Blog</a></li> -->

afterpython/_website/src/routes/+layout.svelte

@@ -3,7 +3,7 @@
 	import type { LayoutProps } from './$types';
 	import ThemeToggle from '$components/ThemeToggle.svelte';
 	import Logo from '$components/Logo.svelte';
-	// import Footer from '$components/Footer.svelte';
+	import Footer from '$components/Footer.svelte';
 	import { dev } from '$app/environment';
 	import { env } from '$env/dynamic/public';
 	import { resolve } from '$app/paths';
@@ -33,7 +33,7 @@
 						Documentation
 					</a>
 				</li>
-				<!-- <li>
+				<li>
 					<a href={'/tutorial'}>Tutorials</a>
 				</li>
 				<li>
@@ -44,7 +44,7 @@
 				</li>
 				<li>
 					<a href={'/blog'}>Blog</a>
-				</li> -->
+				</li>
 				<!-- <li>
 					<a href={'/exercises'}>Exercises</a>
 				</li>
@@ -61,5 +61,5 @@
 
 	{@render children()}
 
-	<!-- <Footer projectName={metadataJson.name} projectSummary={metadataJson.summary} {repositoryUrl} /> -->
+	<Footer projectName={metadataJson.name} projectSummary={metadataJson.summary} {repositoryUrl} />
 </div>

afterpython/_website/src/routes/+page.svelte

@@ -2,6 +2,9 @@
   import type { PageProps } from './$types';
   import MarkdownRenderer from '$components/MarkdownRenderer.svelte';
   import StarIcon from '$components/StarIcon.svelte';
+  import { dev } from '$app/environment';
+	import { env } from '$env/dynamic/public';
+	import { resolve } from '$app/paths';
 
   const { data: metadataJson }: PageProps = $props();
 
@@ -67,7 +70,12 @@
         </a>
       {/if}
       <button class="px-6 py-3 bg-pm500 text-white rounded-lg font-medium hover:bg-pm600 transition-colors">
-        Go to Playground
+        <a
+          href={dev ? env.PUBLIC_DOC_URL : resolve("/doc")}
+          rel="external noopener noreferrer"
+        >
+          Go to Documentation
+        </a>
       </button>
     </div>