mirror of
https://github.com/toeverything/AFFiNE.git
synced 2024-12-23 08:21:46 +03:00
Merge pull request #395 from toeverything/fix/landing-page
Add hubspot embed script & fix landing page style
This commit is contained in:
DarkSky
GitHub
commit
bc53d0a6bd
87
.github/workflows/livedemo.yml
vendored
Normal file
87
.github/workflows/livedemo.yml
vendored
Normal file
@ -0,0 +1,87 @@
|
||||
name: Build AFFiNE-Local
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [master]
|
||||
# pull_request:
|
||||
# branches: [master]
|
||||
|
||||
# Cancels all previous workflow runs for pull requests that have not completed.
|
||||
# See https://docs.github.com/en/actions/using-jobs/using-concurrency
|
||||
concurrency:
|
||||
# The concurrency group contains the workflow name and the branch name for
|
||||
# pull requests or the commit hash for any other events.
|
||||
group: ${{ github.workflow }}-${{ github.event_name == 'pull_request' && github.head_ref || github.sha }}
|
||||
cancel-in-progress: true
|
||||
|
||||
env:
|
||||
REGISTRY: ghcr.io
|
||||
NAMESPACE: toeverything
|
||||
AFFINE_IMAGE_NAME: LIVEDEMO
|
||||
IMAGE_TAG_LATEST: nightly-latest
|
||||
LOCAL_CACHE: localhost:5000/toeverything/relocate:latest
|
||||
|
||||
jobs:
|
||||
ligo-virgo:
|
||||
runs-on: self-hosted
|
||||
environment: development
|
||||
permissions:
|
||||
contents: read
|
||||
packages: write
|
||||
|
||||
services:
|
||||
registry:
|
||||
image: registry:2
|
||||
ports:
|
||||
- 5000:5000
|
||||
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v2
|
||||
|
||||
- name: Log in to the Container registry
|
||||
uses: docker/login-action@v2
|
||||
with:
|
||||
registry: ${{ env.REGISTRY }}
|
||||
username: ${{ github.actor }}
|
||||
password: ${{ secrets.GITHUB_TOKEN }}
|
||||
|
||||
- name: Set up QEMU
|
||||
uses: docker/setup-qemu-action@v1
|
||||
|
||||
- name: Set up Docker Buildx
|
||||
id: buildx
|
||||
uses: docker/setup-buildx-action@v1
|
||||
with:
|
||||
driver-opts: network=host
|
||||
|
||||
- name: Extract metadata (tags, labels) for Docker (AFFiNE-Local)
|
||||
id: meta_affine
|
||||
uses: docker/metadata-action@v4
|
||||
with:
|
||||
images: ${{ env.REGISTRY }}/${{ env.NAMESPACE }}/${{ env.AFFINE_IMAGE_NAME }}
|
||||
tags: ${{ env.IMAGE_TAG_LATEST }}
|
||||
|
||||
- name: Build and push Docker image (AFFINE-Local)
|
||||
uses: docker/build-push-action@v3
|
||||
env:
|
||||
HUBSPOT_API_SECRET: ${{ secrets.SuperSecret }}
|
||||
with:
|
||||
context: .
|
||||
push: true
|
||||
file: ./.github/deployment/Dockerfile-affine
|
||||
tags: ${{ env.LOCAL_CACHE }}
|
||||
target: AFFiNE
|
||||
|
||||
- name: Build and push Docker image (AFFINE-Local)
|
||||
uses: docker/build-push-action@v3
|
||||
with:
|
||||
context: .
|
||||
platforms: linux/amd64,linux/arm64/v8
|
||||
file: ./.github/deployment/Dockerfile-affine-multiplatform
|
||||
push: ${{ github.ref == 'refs/heads/master' && true || false }}
|
||||
tags: ${{ steps.meta_affine.outputs.tags }}
|
||||
labels: ${{ steps.meta_affine.outputs.labels }}
|
||||
target: AFFiNE
|
||||
build-args: |
|
||||
BASE_IMAGE=${{ env.LOCAL_CACHE }}
|
||||
@ -4,6 +4,7 @@
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
<%= htmlWebpackPlugin.options.hubspotScript %>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
@ -12,6 +12,13 @@ const Style9Plugin = require('style9/webpack');
|
||||
|
||||
const enableBundleAnalyzer = process.env.BUNDLE_ANALYZER;
|
||||
|
||||
function generateHubspotScript() {
|
||||
const hubspotApiSecret = process.env.HUBSPOT_API_SECRET;
|
||||
if (hubspotApiSecret) {
|
||||
return `<script type="text/javascript" id="hs-script-loader" async defer src="//js-na1.hs-scripts.com/${hubspotApiSecret}.js"></script>`;
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = function (webpackConfig) {
|
||||
const config = getNxWebpackConfig(webpackConfig);
|
||||
|
||||
@ -175,6 +182,7 @@ module.exports = function (webpackConfig) {
|
||||
), //favicon path
|
||||
template: path.resolve(__dirname, './src/template.html'),
|
||||
publicPath: '/',
|
||||
hubspotScript: generateHubspotScript(),
|
||||
}),
|
||||
new Style9Plugin(),
|
||||
isProd &&
|
||||
|
||||
@ -7,7 +7,7 @@ import { useMediaQuery } from '@mui/material';
|
||||
|
||||
const Alternatives = styled(Box)<{ width: string }>(({ width }) => ({
|
||||
position: 'relative',
|
||||
width: '20em',
|
||||
width: '24em',
|
||||
height: '128px',
|
||||
transform: 'translateY(-8px)',
|
||||
overflowY: 'hidden',
|
||||
@ -21,7 +21,7 @@ const Alternatives = styled(Box)<{ width: string }>(({ width }) => ({
|
||||
height: 'inherit',
|
||||
position: 'absolute',
|
||||
left: '0',
|
||||
top: '0',
|
||||
top: '-23px',
|
||||
paddingTop: '22px',
|
||||
lineHeight: '96px',
|
||||
'@media (max-width: 1024px)': {
|
||||
@ -105,7 +105,7 @@ export const AlternativesProduct = () => {
|
||||
)}
|
||||
>
|
||||
<Typography
|
||||
fontSize="64px"
|
||||
fontSize="96px"
|
||||
fontWeight={900}
|
||||
sx={{
|
||||
color: '#06449d',
|
||||
@ -135,7 +135,7 @@ export const AlternativesProduct = () => {
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
fontSize="64px"
|
||||
fontSize="96px"
|
||||
fontWeight={900}
|
||||
sx={{
|
||||
color: '#06449d',
|
||||
|
||||
@ -64,7 +64,7 @@ export function IndexPage() {
|
||||
return (
|
||||
<>
|
||||
<AFFiNEHeader />
|
||||
<Grid xs={12} sx={{ display: 'flex', marginTop: '12vh!important' }}>
|
||||
<Grid xs={12} sx={{ display: 'flex', marginTop: '20vh!important' }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'inline-flex',
|
||||
@ -76,7 +76,7 @@ export function IndexPage() {
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
fontSize="64px"
|
||||
fontSize="96px"
|
||||
fontWeight={900}
|
||||
sx={{
|
||||
marginRight: '0.25em',
|
||||
@ -89,7 +89,7 @@ export function IndexPage() {
|
||||
{t('Open Source')},
|
||||
</Typography>
|
||||
<Typography
|
||||
fontSize="64px"
|
||||
fontSize="96px"
|
||||
fontWeight={900}
|
||||
sx={{
|
||||
'@media (max-width: 1024px)': {
|
||||
@ -120,7 +120,7 @@ export function IndexPage() {
|
||||
>
|
||||
<AlternativesProduct />
|
||||
<Typography
|
||||
fontSize="64px"
|
||||
fontSize="96px"
|
||||
fontWeight={900}
|
||||
sx={{
|
||||
color: '#06449d',
|
||||
|
||||
@ -90,13 +90,14 @@ export const AFFiNEFooter = ({
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
maxWidth: '400px',
|
||||
flexWrap: 'wrap',
|
||||
maxWidth: '420px',
|
||||
margin: 'auto',
|
||||
marginBottom: '2em',
|
||||
'--joy-shadow-sm': 0,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', width: '100%' }}>
|
||||
<Box sx={{ display: 'flex', width: '84px' }}>
|
||||
<Button
|
||||
variant="plain"
|
||||
sx={{
|
||||
@ -144,7 +145,7 @@ export const AFFiNEFooter = ({
|
||||
</Grid>
|
||||
</Button>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', width: '100%' }}>
|
||||
<Box sx={{ display: 'flex', width: '84px' }}>
|
||||
<Button
|
||||
variant="plain"
|
||||
sx={{
|
||||
@ -190,7 +191,7 @@ export const AFFiNEFooter = ({
|
||||
</Grid>
|
||||
</Button>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', width: '100%' }}>
|
||||
<Box sx={{ display: 'flex', width: '84px' }}>
|
||||
<Button
|
||||
variant="plain"
|
||||
sx={{
|
||||
@ -239,7 +240,7 @@ export const AFFiNEFooter = ({
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
width: '84px',
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
@ -285,7 +286,7 @@ export const AFFiNEFooter = ({
|
||||
</Grid>
|
||||
</Button>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', width: '100%' }}>
|
||||
<Box sx={{ display: 'flex', width: '84px' }}>
|
||||
<Button
|
||||
variant="plain"
|
||||
sx={{
|
||||
|
||||
@ -11,6 +11,7 @@ import GitHubIcon from '@mui/icons-material/GitHub';
|
||||
import { styled, useMediaQuery } from '@mui/material';
|
||||
import AFFiNETextLogo from './affine-text-logo.png';
|
||||
import { HoverMenu } from './HoverMenu';
|
||||
import { MobileHeader } from './MobileHeader';
|
||||
|
||||
import { options } from '../i18n';
|
||||
|
||||
@ -22,7 +23,10 @@ export const AFFiNEHeader = () => {
|
||||
const changeLanguage = (event: any) => {
|
||||
i18n.changeLanguage(event);
|
||||
};
|
||||
const matchesIPAD = useMediaQuery('(max-width: 768px)');
|
||||
const matchesIPAD = useMediaQuery('(max-width: 1080px)');
|
||||
if (matchesIPAD) {
|
||||
return <MobileHeader />;
|
||||
}
|
||||
return (
|
||||
<Container container spacing={2}>
|
||||
<Grid xs={6} sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
@ -160,6 +164,7 @@ const Container = styled(Grid)({
|
||||
transform: 'translateX(-50%)',
|
||||
width: '100%',
|
||||
paddingTop: '1em',
|
||||
paddingBottom: '1em',
|
||||
backgroundColor: '#fff',
|
||||
zIndex: 1500,
|
||||
maxWidth: '1440px',
|
||||
|
||||
208
apps/venus/src/app/common/MobileHeader.tsx
Normal file
208
apps/venus/src/app/common/MobileHeader.tsx
Normal file
@ -0,0 +1,208 @@
|
||||
import Close from '@mui/icons-material/Close';
|
||||
import ExpandLess from '@mui/icons-material/ExpandLess';
|
||||
import ExpandMore from '@mui/icons-material/ExpandMore';
|
||||
import GitHubIcon from '@mui/icons-material/GitHub';
|
||||
import Menu from '@mui/icons-material/Menu';
|
||||
import { Button, Grid } from '@mui/joy';
|
||||
import { useRef, useState } from 'react';
|
||||
// eslint-disable-next-line no-restricted-imports
|
||||
import {
|
||||
Checkbox,
|
||||
Collapse,
|
||||
Drawer,
|
||||
List,
|
||||
ListItemButton,
|
||||
ListItemText,
|
||||
styled,
|
||||
} from '@mui/material';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import AFFiNETextLogo from './affine-text-logo.png';
|
||||
|
||||
export const MobileHeader = () => {
|
||||
const navigate = useNavigate();
|
||||
const { i18n, t } = useTranslation();
|
||||
const anchor = useRef<HTMLDivElement | null>(null);
|
||||
const [openedDrawer, setDrawerState] = useState(false);
|
||||
const handleDrawerOpenState = () => {
|
||||
setDrawerState(!openedDrawer);
|
||||
};
|
||||
const [contactUsCollapse, setContactUsCollapse] = useState(false);
|
||||
const handleContactUsClick = () => {
|
||||
setContactUsCollapse(!contactUsCollapse);
|
||||
};
|
||||
|
||||
const [languageCollapse, setLanguageCollapse] = useState(false);
|
||||
const handleLanguageClick = () => {
|
||||
setLanguageCollapse(!languageCollapse);
|
||||
};
|
||||
|
||||
return (
|
||||
<Container ref={anchor} container spacing={2}>
|
||||
<Grid
|
||||
xs={12}
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
<StyledImage
|
||||
src={AFFiNETextLogo}
|
||||
alt="affine"
|
||||
onClick={() => navigate('/')}
|
||||
/>
|
||||
<div>
|
||||
<Button
|
||||
variant="plain"
|
||||
onClick={() =>
|
||||
window.open(
|
||||
'https://github.com/toeverything/AFFiNE'
|
||||
)
|
||||
}
|
||||
>
|
||||
<GitHubIcon />
|
||||
</Button>
|
||||
<Button onClick={handleDrawerOpenState} variant="plain">
|
||||
{openedDrawer ? <Close /> : <Menu />}
|
||||
</Button>
|
||||
</div>
|
||||
</Grid>
|
||||
<Drawer
|
||||
anchor="top"
|
||||
open={openedDrawer}
|
||||
onClose={() => setDrawerState(false)}
|
||||
>
|
||||
<StyledDrawerContainer>
|
||||
<List>
|
||||
<ListItemButton onClick={() => navigate('/aboutus')}>
|
||||
<ListItemText primary={t('AboutUs') as string} />
|
||||
</ListItemButton>
|
||||
<ListItemButton
|
||||
onClick={() =>
|
||||
window.open('https://blog.affine.pro')
|
||||
}
|
||||
>
|
||||
<ListItemText primary={t('Blog') as string} />
|
||||
</ListItemButton>
|
||||
<ListItemButton
|
||||
onClick={() =>
|
||||
window.open('https://docs.affine.pro/')
|
||||
}
|
||||
>
|
||||
<ListItemText primary={t('Docs') as string} />
|
||||
</ListItemButton>
|
||||
<ListItemButton
|
||||
onClick={() =>
|
||||
window.open('https://feedback.affine.pro/')
|
||||
}
|
||||
>
|
||||
<ListItemText primary={t('Feedback') as string} />
|
||||
</ListItemButton>
|
||||
<ListItemButton onClick={handleContactUsClick}>
|
||||
<ListItemText primary={t('ContactUs') as string} />
|
||||
{contactUsCollapse ? (
|
||||
<ExpandLess />
|
||||
) : (
|
||||
<ExpandMore />
|
||||
)}
|
||||
</ListItemButton>
|
||||
<Collapse
|
||||
in={contactUsCollapse}
|
||||
timeout="auto"
|
||||
unmountOnExit
|
||||
>
|
||||
<ListItemButton
|
||||
onClick={() =>
|
||||
window.open('https://discord.gg/Arn7TqJBvG')
|
||||
}
|
||||
>
|
||||
<ListItemText primary="Discord" />
|
||||
</ListItemButton>
|
||||
<ListItemButton
|
||||
onClick={() =>
|
||||
window.open('https://t.me/affineworkos')
|
||||
}
|
||||
>
|
||||
<ListItemText primary="Telegram" />
|
||||
</ListItemButton>
|
||||
<ListItemButton
|
||||
onClick={() =>
|
||||
window.open(
|
||||
'https://www.reddit.com/r/Affine/'
|
||||
)
|
||||
}
|
||||
>
|
||||
<ListItemText primary="Reddit" />
|
||||
</ListItemButton>
|
||||
<ListItemButton
|
||||
onClick={() =>
|
||||
window.open(
|
||||
'https://medium.com/@affineworkos'
|
||||
)
|
||||
}
|
||||
>
|
||||
<ListItemText primary="Medium" />
|
||||
</ListItemButton>
|
||||
<ListItemButton
|
||||
onClick={() =>
|
||||
window.open(
|
||||
'mailto:contact@toeverything.info'
|
||||
)
|
||||
}
|
||||
>
|
||||
<ListItemText primary="Email" />
|
||||
</ListItemButton>
|
||||
</Collapse>
|
||||
<ListItemButton onClick={handleLanguageClick}>
|
||||
<ListItemText primary={t('language') as string} />
|
||||
{languageCollapse ? <ExpandLess /> : <ExpandMore />}
|
||||
</ListItemButton>
|
||||
<Collapse
|
||||
in={languageCollapse}
|
||||
timeout="auto"
|
||||
unmountOnExit
|
||||
>
|
||||
<ListItemButton
|
||||
onClick={() => i18n.changeLanguage('en')}
|
||||
>
|
||||
<ListItemText primary="English" />
|
||||
<Checkbox checked={i18n.language === 'en'} />
|
||||
</ListItemButton>
|
||||
<ListItemButton
|
||||
onClick={() => i18n.changeLanguage('zh')}
|
||||
>
|
||||
<ListItemText primary="简体中文" />
|
||||
<Checkbox checked={i18n.language === 'zh'} />
|
||||
</ListItemButton>
|
||||
</Collapse>
|
||||
</List>
|
||||
</StyledDrawerContainer>
|
||||
</Drawer>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
const Container = styled(Grid)({
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%)',
|
||||
width: '100%',
|
||||
paddingTop: '1em',
|
||||
backgroundColor: '#fff',
|
||||
zIndex: 1500,
|
||||
maxWidth: '1440px',
|
||||
margin: 'auto',
|
||||
marginTop: '0 !important',
|
||||
});
|
||||
|
||||
const StyledImage = styled('img')({
|
||||
height: '24px',
|
||||
marginRight: '16px',
|
||||
cursor: 'pointer',
|
||||
});
|
||||
|
||||
const StyledDrawerContainer = styled('div')({
|
||||
paddingTop: '72px',
|
||||
});
|
||||
@ -10,6 +10,7 @@
|
||||
"Alternative": "Alternative",
|
||||
"Check GitHub": "Check GitHub",
|
||||
"Try it Online": "Try it Online",
|
||||
"language": "Language",
|
||||
"description1": {
|
||||
"part1": "Affine is the next-generation collaborative knowledge base for professionals.",
|
||||
"part2": "It's not just a collection of Docs, whiteboard, and tables.",
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
"Alternative": "的另一种选择",
|
||||
"Check GitHub": "GitHub中查看",
|
||||
"Try it Online": "在线试用",
|
||||
"language": "语言",
|
||||
"description1": {
|
||||
"part1": "Affine是面向专业人士的下一代协同知识库",
|
||||
"part2": "它不仅仅是一个文档、白板和表格的集合。",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user