chore: add hello-world-md example

ije · ije · commit b7232ef1ee5b · 2021-03-27T03:32:25.000+08:00
diff --git a/examples/hello-world-md/aleph.config.ts b/examples/hello-world-md/aleph.config.ts
@@ -0,0 +1,12 @@
+import css from '../../plugins/css.ts'
+import markdown from '../../plugins/markdown.ts'
+import type { Config } from '../../types.ts'
+
+export default (): Config => ({
+  plugins: [
+    css({
+      postcss: { plugins: ['autoprefixer'] }
+    }),
+    markdown(),
+  ]
+})
diff --git a/examples/hello-world-md/app.tsx b/examples/hello-world-md/app.tsx
@@ -0,0 +1,18 @@
+import React, { ComponentType } from 'https://esm.sh/react@17.0.1'
+
+type Metadata = {
+  title?: string
+  url?: string
+}
+
+export default function App({ Page, pageProps }: { Page: ComponentType<any> & { meta: Metadata }, pageProps: any }) {
+  return (
+    <main>
+      <head>
+        <title>{Page.meta.title}</title>
+        <link rel="stylesheet" href="./style/index.css" />
+      </head>
+      <Page {...pageProps} />
+    </main>
+  )
+}
diff --git a/examples/hello-world-md/pages/index.md b/examples/hello-world-md/pages/index.md
@@ -0,0 +1,18 @@
+---
+title: Aleph.js
+url: https://alephjs.org
+---
+
+![Aleph.js](/logo.svg)
+
+# Welcome to use Aleph.js!
+
+<p>
+  <a href="https://alephjs.org" target="_blank">Website</a>
+  <span> · </span>
+  <a href="https://alephjs.org/docs/get-started" target="_blank">Get Started</a>
+  <span> · </span>
+  <a href="https://alephjs.org/docs" target="_blank">Docs</a>
+  <span> · </span>
+  <a href="https://github.com/alephjs/aleph.js" target="_blank">Github</a>
+</p>
diff --git a/examples/hello-world-md/public/logo.svg b/examples/hello-world-md/public/logo.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#D63369;stroke-width:3;stroke-miterlimit:10;}
+</style>
+<g id="Aleph">
+	<path class="st0" d="M54.8,11.1C68.2,34.3,81.6,57.5,95,80.7c-1.6,2.7-3.3,5.5-4.9,8.2c-26.8,0-53.7,0-80.5,0
+		c-1.5-2.7-3.1-5.4-4.6-8.1c13.4-23.2,26.8-46.5,40.3-69.7C48.4,11.1,51.6,11.1,54.8,11.1z"/>
+	<polyline class="st0" points="28.2,72.8 80.8,72.8 45.1,11.1 	"/>
+	<polyline class="st0" points="71.5,72.7 45.2,27.2 9.6,88.9 	"/>
+	<polyline class="st0" points="49.8,35.3 23.5,80.8 94.8,80.8 	"/>
+</g>
+</svg>
diff --git a/examples/hello-world-md/style/index.css b/examples/hello-world-md/style/index.css
@@ -0,0 +1,69 @@
+* {
+  margin: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  font: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
+  background: transparent;
+}
+
+body {
+  font-family: "Helvetica Neue", Helvetica, Arial sans-serif;
+  font-size: 16px;
+}
+
+main {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+}
+
+h1 {
+  margin: 0;
+  line-height: 1.5;
+  font-size: 18px;
+  font-weight: 400;
+  text-align: center;
+  color: #000;
+}
+
+p {
+  margin: 0;
+  line-height: 1.5;
+  text-align: center;
+  color: #333;
+}
+
+P + p {
+  margin-top: 6px;
+}
+
+p img {
+  width: auto;
+  height: 75px;
+}
+
+p span,
+p a {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+p span {
+  color: #999;
+}
+
+p a {
+  margin: 0 9px;
+  color: #777;
+  text-decoration: none;
+  border-bottom: 1px dashed #ccc;
+}
+
+p a:hover {
+  color: #333;
+  border-bottom-color: transparent;
+}
