michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

improve introduction page of example/docs

Browse source
This commit is contained in:
Fred K. Schott 2021-08-26 15:18:45 -07:00
parent 9f2b1d6071
commit e0c39fb217
4 changed files with 64 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
examples/docs/public/theme.css
View file

@ -58,7 +58,7 @@
color-scheme: light;
--theme-accent: hsla(var(--color-blue), 1);
--theme-text-accent: hsla(var(--color-blue), 1);
--theme-accent-opacity: 0.1;
--theme-accent-opacity: 0.15;
--theme-divider: hsla(var(--color-gray-95), 1);
--theme-text: hsla(var(--color-gray-10), 1);
--theme-text-light: hsla(var(--color-gray-40), 1);
@ -85,9 +85,9 @@ body {
:root.theme-dark {
color-scheme: dark;
--theme-accent-opacity: 0.4;
--theme-accent: hsla(var(--color-orange), 1);
--theme-text-accent: hsla(var(--color-orange), 1);
--theme-accent-opacity: 0.15;
--theme-accent: hsla(var(--color-blue), 1);
--theme-text-accent: hsla(var(--color-blue), 1);
--theme-divider: hsla(var(--color-gray-10), 1);
--theme-text: hsla(var(--color-gray-90), 1);
--theme-text-light: hsla(var(--color-gray-80), 1);

14
examples/docs/src/components/RightSidebar/MoreMenu.astro
View file

@ -1,6 +1,8 @@
---
import ThemeToggleButton from './ThemeToggleButton.jsx';
import * as CONFIG from '../../config.js';
const {editHref} = Astro.props;
const showMoreSection = (CONFIG.COMMUNITY_INVITE_URL || editHref);
---
<style>
.edit-on-github {
@ -10,8 +12,9 @@ const {editHref} = Astro.props;
font-size: 1rem;
}
</style>
<h2 class="heading">More</h2>
{showMoreSection && <h2 class="heading">More</h2>}
<ul>
{editHref &&
<li class={`header-link depth-2`}>
<a class="edit-on-github" href={editHref} target="_blank">
<svg
@ -34,12 +37,8 @@ const {editHref} = Astro.props;
<span>Edit this page</span>
</a>
</li>
<li class={`header-link depth-2`}>
<a href="https://github.com/snowpackjs/astro/blob/main/CONTRIBUTING.md#translations" target="_blank">
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 88.6 77.3" height="1.24em" width="1.24em" style="margin: -2px;"> <path fill="currentColor" d="M61,24.6h7.9l18.7,51.6h-7.7l-5.4-15.5H54.3l-5.6,15.5h-7.2L61,24.6z M72.6,55l-8-22.8L56.3,55H72.6z" /> <path fill="currentColor" d="M53.6,60.6c-10-4-16-9-22-14c0,0,1.3,1.3,0,0c-6,5-20,13-20,13l-4-6c8-5,10-6,19-13c-2.1-1.9-12-13-13-19h8 c4,9,10,14,10,14c10-8,10-19,10-19h8c0,0-1,13-12,24l0,0c5,5,10,9,19,13L53.6,60.6z M1.6,16.6h56v-8h-23v-7h-9v7h-24V16.6z" /> </svg>
<span>Translate this page</span>
</a>
</li>
}
{CONFIG.COMMUNITY_INVITE_URL &&
<li class={`header-link depth-2`}>
<a href="https://astro.build/chat" target="_blank">
<svg
@ -62,6 +61,7 @@ const {editHref} = Astro.props;
<span>Join our community</span>
</a>
</li>
}
</ul>
<div style="margin: 2rem 0; text-align: center;">
<ThemeToggleButton client:visible />

6
examples/docs/src/config.ts
View file

@ -16,6 +16,12 @@ export const KNOWN_LANGUAGES = {
English: 'en',
};
// Uncomment this to add an "Edit this page" button to every page of documentation.
// export const GITHUB_EDIT_URL = `https://github.com/snowpackjs/astro/blob/main/docs/`;
// Uncomment this to add an "Join our Community" button to every page of documentation.
// export const COMMUNITY_INVITE_URL = `https://astro.build/chat`;
// Uncomment this to enable site search.
// See "Algolia" section of the README for more information.
// export const ALGOLIA = {

6
examples/docs/src/layouts/MainLayout.astro
View file

@ -6,19 +6,19 @@ import Footer from '../components/Footer/Footer.astro';
import PageContent from '../components/PageContent/PageContent.astro';
import LeftSidebar from '../components/LeftSidebar/LeftSidebar.astro';
import RightSidebar from '../components/RightSidebar/RightSidebar.astro';
import { SITE } from "../config.ts";
import * as CONFIG from "../config.ts";
const { content = {} } = Astro.props;
const currentPage = Astro.request.url.pathname;
const currentFile = `src/pages${currentPage.replace(/\/$/, "")}.md`;
const githubEditUrl = `https://github.com/snowpackjs/astro/blob/main/docs/${currentFile}`;
const githubEditUrl = CONFIG.GITHUB_EDIT_URL && (CONFIG.GITHUB_EDIT_URL + currentFile);
---
<html dir="{content.dir ?? 'ltr'}" lang="{content.lang ?? 'en-us'}" class="initial">
<head>
<HeadCommon />
<HeadSEO {content} canonicalURL={Astro.request.canonicalURL} />
<title>{content.title ? `${content.title} 🚀 ${SITE.title}` : SITE.title}</title>
<title>{content.title ? `${content.title} 🚀 ${CONFIG.SITE.title}` : CONFIG.SITE.title}</title>
<style>
body {
width: 100%;