Merge pull request #2 from toeverything/staging

PROD(v1.2): New home page

.gitignore

@@ -0,0 +1,8 @@
+# Nuxt dev/build outputs
+.output
+.nuxt
+# Node dependencies
+node_modules
+# System files
+*.log
+.env

README.md

@@ -0,0 +1,87 @@
+# affine.pro
+
+This repo is AFFiNE official website and blog source code.
+
+## How to publish blog
+
+The new blog source uses AFFiNE - public workspace: [https://app.affine.pro/public-workspace/H6vffRmJbCfA-r3kq_36_](https://app.affine.pro/public-workspace/H6vffRmJbCfA-r3kq_36_)
+
+You can use AFFiNE to write your article, contact [ShortCipher](https://github.com/ShortCipher5) to request permissions for the AFFiNE Blog Workspace.
+
+Each blog should abide by the following format:
+```
+---
+title: How AFFiNE Classifies Editors
+author: Chi Zhang, Yifeng Wang , Ran Chen, Fanjing Zhang
+tags: Let’s make XXX
+slug: how-affine-classifies-editors
+description: There are so many editors today that users may find it difficult to select
+created: 2022-06-27
+updated: 2022-06-27
+layout: blog
+pulish: false
+---
+[cover image]
+[article content]
+```
+
+`title` the title of the article
+
+`author` the author/authors of the article in a comma sepeareted list. For a list of available authors, see [services/blog/userMap.ts](services/blog/userMap.ts). Profile images are taken from the [public](public) folder.
+
+`tags` the tag, or rather categorey, of the article
+
+`slug` the unique url for the article `https://affine.pro/blog/{slug}` - do not use special characters and replace ` ` (spaces) with `-`
+
+`description` a small description to the article, no more than 2 sentences
+
+`created` this should be the publish date
+
+`updated` this should be set as the publish date, and only this date is updated when edits are made
+
+`layout` should generally stay as `blog`
+
+`publish` set to false to ensure this article is not public, only set to `true` when the article is ready for publishing (will be published as soon as set to true)
+
+# How to develop
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# yarn
+yarn install
+
+# npm
+npm install
+
+# pnpm
+pnpm install
+```
+
+## Development Server
+
+Start the development server on http://localhost:3001
+
+```bash
+npm run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+npm run build
+```
+
+Locally preview production build:
+
+```bash
+npm run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

app.vue

@@ -0,0 +1,172 @@
+<template lang="pug">
+.app
+  el-config-provider( :locale="locale" )
+    nuxt-layout( keepalive )
+      nuxt-page
+</template>
+
+<script setup>
+import { ElConfigProvider } from 'element-plus'
+
+import en from 'element-plus/lib/locale/lang/en'
+
+import 'element-plus/es/components/message/style/css'
+import 'element-plus/theme-chalk/dark/css-vars.css'
+import '~/styles/main.styl'
+
+import 'vue3-lottie/dist/style.css'
+
+const locale = ref(en)
+
+const i18n = useI18n()
+
+useHead({
+  htmlAttrs: {
+    lang: i18n.locale.value || 'en'
+  }
+})
+
+</script>
+
+<style lang="stylus">
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800&display=swap')
+
+body
+  margin: 0
+  font-family: "Inter", "Roboto", "Helvetica", "Arial", sans-serif
+  background: $secondary100
+  color: $primary100
+  font-size: 1rem
+  line-height: 1.5
+  letter-spacing: 0.00938em
+  -webkit-font-smoothing: antialiased
+  -moz-osx-font-smoothing: grayscale
+
+a
+  text-decoration: none
+  color: inherit
+  transition: color 268ms
+
+*, :before, :after
+  box-sizing: border-box
+
+// Common
+.lottie-animation-container
+  line-height: 1
+
+.icon-gradient
+  path
+    fill: url(#brand-gradient) !important
+
+.icon-stroke-gradient
+  path
+    stroke: url(#brand-gradient) !important
+
+.nuxt-icon
+  display: inline-flex
+  vertical-align: middle
+  line-height: 1
+
+  svg
+    margin: 0 !important
+
+// Container
+.base-container
+  margin: 0 auto
+  width: 100%
+
+.container
+  margin: 0 auto
+  width: 100%
+  max-width: 94.5rem !important
+
+  &.is-fluid
+    max-width: 100% !important
+
+.md-container
+  padding: 0 16px
+  max-width: (1200px + 32px)
+  width: 100%
+  margin: 0 auto
+
+// Page
+.page
+  height: 100%
+  display: flex
+  flex-direction: column
+
+  &-header
+    min-height: 146px
+    // background: #fafafa
+    background: white
+    padding: 24px 32px
+    border-bottom: 1px solid var(--divider-color)
+  &-content,
+  &-container
+    display: flex
+    width: 100%
+    // height: 100%
+    overflow: hidden
+    margin: 0 auto
+    flex: 1
+    // overflow-y: auto
+  .is-scrollable
+    overflow-y: auto
+    height: 100%
+    width: 100%
+    padding-bottom: 44px
+
+  &-content-main
+    flex: 1
+    padding-left: 44px
+    padding-right: 44px
+    padding-top: 44px
+    padding-bottom: 60px
+    min-height: 100%
+    overflow-y: auto;
+
+  &-container
+    padding-top: 0
+    padding-bottom: 0
+    width: 100%
+
+  &-title
+    // font-weight: 500
+    font-size: 36px
+    margin-bottom: 10px
+
+  // Form
+  .input-title
+    .el-input__wrapper
+      box-shadow: none
+      padding: 0
+      font-weight: 700;
+      font-size: 24px;
+
+    .el-input__inner
+      color: black
+
+  .el-textarea__inner
+    font-size: 16px
+    line-height: 24px
+    color: black
+    padding: 12px 16px
+
+  .input-content
+
+    &.el-textarea.is-disabled
+      .el-textarea__inner
+        background: none
+
+    .el-textarea__inner
+      box-shadow: none
+      padding: 0
+
+  // Actions
+  .round-icon-button
+    border: none
+    padding: 0
+    font-size: 32px
+    width: 32px
+    height: 32px
+</style>