ilyakooo0/urbit
1
0
Fork 0
mirror of https://github.com/ilyakooo0/urbit.git synced 2025-01-01 19:46:36 +03:00
Code Issues Packages Projects Releases Wiki Activity

interface: inject location of tutorial group at compile tim

Browse Source
This commit is contained in:
Liam Fitzgerald 2021-02-08 11:02:52 +10:00
parent 1e7a09714b
commit 07518e5cff
No known key found for this signature in database
GPG Key ID: D390E12C61D1CFFB
8 changed files with 73 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
pkg/interface/config/webpack.dev.js
View File

@ -1,4 +1,5 @@
const path = require('path');
const webpack = require('webpack');
// const HtmlWebpackPlugin = require('html-webpack-plugin');
// const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const urbitrc = require('./urbitrc');
@ -117,7 +118,15 @@ module.exports = {
devtool: 'inline-source-map',
devServer: devServer,
plugins: [
new UrbitShipPlugin(urbitrc)
new UrbitShipPlugin(urbitrc),
new webpack.DefinePlugin({
'process.env.TUTORIAL_HOST': JSON.stringify('~hastuc-dibtux'),
'process.env.TUTORIAL_GROUP': JSON.stringify('beginner-island'),
'process.env.TUTORIAL_CHAT': JSON.stringify('chat-8401'),
'process.env.TUTORIAL_BOOK': JSON.stringify('notebook-9148'),
'process.env.TUTORIAL_LINKS': JSON.stringify('link-4353'),
})
// new CleanWebpackPlugin(),
// new HtmlWebpackPlugin({
// title: 'Hot Module Replacement',

9
pkg/interface/config/webpack.prod.js
View File

@ -56,8 +56,13 @@ module.exports = {
new CleanWebpackPlugin(),
new webpack.DefinePlugin({
'process.env.LANDSCAPE_STREAM': JSON.stringify(process.env.LANDSCAPE_STREAM),
'process.env.LANDSCAPE_SHORTHASH': JSON.stringify(process.env.LANDSCAPE_SHORTHASH)
})
'process.env.LANDSCAPE_SHORTHASH': JSON.stringify(process.env.LANDSCAPE_SHORTHASH),
'process.env.TUTORIAL_HOST': JSON.stringify('~hastuc-dibtux'),
'process.env.TUTORIAL_GROUP': JSON.stringify('beginner-island'),
'process.env.TUTORIAL_CHAT': JSON.stringify('chat-8401'),
'process.env.TUTORIAL_BOOK': JSON.stringify('notebook-9148'),
'process.env.TUTORIAL_LINKS': JSON.stringify('links-4353'),
}),
// new HtmlWebpackPlugin({
// title: 'Hot Module Replacement',
// template: './public/index.html',

69
pkg/interface/src/logic/lib/tutorialModal.ts
View File

@ -1,14 +1,17 @@
import { TutorialProgress, Associations } from "~/types";
import {
AlignX,
AlignY,
} from "~/logic/lib/relativePosition";
import { AlignX, AlignY } from "~/logic/lib/relativePosition";
export const MODAL_WIDTH = 256;
export const MODAL_HEIGHT = 180;
export const MODAL_WIDTH_PX = `${MODAL_WIDTH}px`;
export const MODAL_HEIGHT_PX = `${MODAL_HEIGHT}px`;
export const TUTORIAL_HOST = process.env.TUTORIAL_HOST;
export const TUTORIAL_GROUP = process.env.TUTORIAL_GROUP;
export const TUTORIAL_CHAT = process.env.TUTORIAL_CHAT;
export const TUTORIAL_BOOK = process.env.TUTORIAL_BOOK;
export const TUTORIAL_LINKS = process.env.TUTORIAL_LINKS;
interface StepDetail {
title: string;
description: string;
@ -20,19 +23,22 @@ interface StepDetail {
}
export function hasTutorialGroup(props: { associations: Associations }) {
return '/ship/~hastuc-dibtux/beginner-island' in props.associations.groups;
return (
`/ship/${TUTORIAL_HOST}/${TUTORIAL_GROUP}` in props.associations.groups
);
}
export const progressDetails: Record<TutorialProgress, StepDetail> = {
hidden: {} as any,
done: {
title: "End",
description: "This tutorial is finished. Would you like to leave Beginner Island?",
description:
"This tutorial is finished. Would you like to leave Beginner Island?",
url: "/",
alignX: "right",
alignY: "top",
offsetX: MODAL_WIDTH + 8,
offsetY: 0
offsetY: 0,
},
start: {
title: "New group added",
@ -42,21 +48,23 @@ export const progressDetails: Record<TutorialProgress, StepDetail> = {
alignX: "right",
alignY: "top",
offsetX: MODAL_WIDTH + 8,
offsetY: 0
offsetY: 0,
},
'group-desc': {
"group-desc": {
title: "What's a group",
description: "A group contains members and tends to be centered around a topic or multiple topics.",
url: "/~landscape/ship/~hastuc-dibtux/beginner-island",
description:
"A group contains members and tends to be centered around a topic or multiple topics.",
url: `/~landscape/ship/${TUTORIAL_HOST}/${TUTORIAL_GROUP}`,
alignX: "left",
alignY: "top",
offsetX: MODAL_WIDTH + 8,
offsetY: (MODAL_HEIGHT / 2) - 8,
offsetY: MODAL_HEIGHT / 2 - 8,
},
channels: {
title: "Channels",
description: "Inside a group you have three types of Channels: Chat, Collection, or Notebook. Mix and match these depending on your group context!",
url: "/~landscape/ship/~hastuc-dibtux/beginner-island",
description:
"Inside a group you have three types of Channels: Chat, Collection, or Notebook. Mix and match these depending on your group context!",
url: `/~landscape/ship/${TUTORIAL_HOST}/${TUTORIAL_GROUP}`,
alignY: "top",
alignX: "right",
offsetX: MODAL_WIDTH + 8,
@ -64,8 +72,9 @@ export const progressDetails: Record<TutorialProgress, StepDetail> = {
},
chat: {
title: "Chat",
description: "Chat channels are for messaging within your group. Direct Messages are also supported, and are accessible from the “DMs” tile on the homescreen",
url: "/~landscape/ship/~hastuc-dibtux/beginner-island/resource/chat/ship/~hastuc-dibtux/chat-8401",
description:
"Chat channels are for messaging within your group. Direct Messages are also supported, and are accessible from the “DMs” tile on the homescreen",
url: `/~landscape/ship/${TUTORIAL_HOST}/${TUTORIAL_GROUP}/resource/chat/ship/${TUTORIAL_HOST}/${TUTORIAL_CHAT}`,
alignY: "top",
alignX: "right",
offsetX: 0,
@ -73,8 +82,9 @@ export const progressDetails: Record<TutorialProgress, StepDetail> = {
},
link: {
title: "Collection",
description: "A collection is where you can share and view links, images, and other media within your group. Every item in a Collection can have it’s own comment thread.",
url: "/~landscape/ship/~hastuc-dibtux/beginner-island/resource/link/ship/~hastuc-dibtux/link-4353",
description:
"A collection is where you can share and view links, images, and other media within your group. Every item in a Collection can have it’s own comment thread.",
url: `/~landscape/ship/${TUTORIAL_HOST}/${TUTORIAL_GROUP}/resource/link/ship/${TUTORIAL_HOST}/${TUTORIAL_LINKS}`,
alignY: "top",
alignX: "right",
offsetX: 0,
@ -82,8 +92,9 @@ export const progressDetails: Record<TutorialProgress, StepDetail> = {
},
publish: {
title: "Notebook",
description: "Notebooks are for creating long-form content within your group. Use markdown to create rich posts with headers, lists and images.",
url: "/~landscape/ship/~hastuc-dibtux/beginner-island/resource/publish/ship/~hastuc-dibtux/notebook-9148",
description:
"Notebooks are for creating long-form content within your group. Use markdown to create rich posts with headers, lists and images.",
url: `/~landscape/ship/${TUTORIAL_HOST}/${TUTORIAL_GROUP}/resource/publish/ship/${TUTORIAL_HOST}/${TUTORIAL_BOOK}`,
alignY: "top",
alignX: "right",
offsetX: 0,
@ -91,8 +102,9 @@ export const progressDetails: Record<TutorialProgress, StepDetail> = {
},
notifications: {
title: "Notifications",
description: "Subscribing to a channel will send you notifications when there are new updates. You will also receive a notification when someone mentions your name in a channel.",
url: "/~landscape/ship/~hastuc-dibtux/beginner-island/resource/publish/ship/~hastuc-dibtux/notebook-9148/settings#notifications",
description:
"Subscribing to a channel will send you notifications when there are new updates. You will also receive a notification when someone mentions your name in a channel.",
url: `/~landscape/ship/${TUTORIAL_HOST}/${TUTORIAL_GROUP}/resource/publish/ship/${TUTORIAL_HOST}/${TUTORIAL_BOOK}/settings#notifications`,
alignY: "top",
alignX: "right",
offsetX: 0,
@ -100,21 +112,22 @@ export const progressDetails: Record<TutorialProgress, StepDetail> = {
},
profile: {
title: "Profile",
description: "Your profile is customizable and can be shared with other ships. Enter as much or as little information as you’d like.",
description:
"Your profile is customizable and can be shared with other ships. Enter as much or as little information as you’d like.",
url: `/~profile/~${window.ship}`,
alignY: "top",
alignX: "right",
offsetX: -300 + (MODAL_WIDTH / 2),
offsetY: -120 + (MODAL_HEIGHT / 2),
offsetX: -300 + MODAL_WIDTH / 2,
offsetY: -120 + MODAL_HEIGHT / 2,
},
leap: {
title: "Leap",
description: "Leap allows you to go to a specific channel, message, collection, profile or group simply by typing in a command or selecting a shortcut from the dropdown menu.",
description:
"Leap allows you to go to a specific channel, message, collection, profile or group simply by typing in a command or selecting a shortcut from the dropdown menu.",
url: `/~profile/~${window.ship}`,
alignY: "top",
alignX: "left",
offsetX: 0,
offsetY: -32,
}
},
};

7
pkg/interface/src/views/apps/launch/app.js
View File

@ -20,6 +20,11 @@ import { JoinGroup } from "~/views/landscape/components/JoinGroup";
import { Helmet } from 'react-helmet';
import useLocalState from "~/logic/state/local";
import { useWaitForProps } from '~/logic/lib/useWaitForProps';
import {
hasTutorialGroup,
TUTORIAL_GROUP,
TUTORIAL_HOST
} from '~/logic/lib/tutorialModal';
const ScrollbarLessBox = styled(Box)`
scrollbar-width: none !important;
@ -75,7 +80,7 @@ export default function LaunchApp(props) {
const onContinue = async (e) => {
e.stopPropagation();
if(!hasTutorialGroup(props)) {
await props.api.groups.join('~hastuc-dibtux', 'beginner-island');
await props.api.groups.join(TUTORIAL_HOST, TUTORIAL_GROUP);
await waiter(hasTutorialGroup);
}
nextTutStep();

3
pkg/interface/src/views/apps/launch/components/Groups.tsx
View File

@ -8,6 +8,7 @@ import { alphabeticalOrder } from "~/logic/lib/util";
import { getUnreadCount, getNotificationCount } from "~/logic/lib/hark";
import Tile from "../components/tiles/tile";
import { useTutorialModal } from "~/views/components/useTutorialModal";
import {TUTORIAL_HOST, TUTORIAL_GROUP} from "~/logic/lib/tutorialModal";
interface GroupsProps {
associations: Associations;
@ -75,7 +76,7 @@ interface GroupProps {
function Group(props: GroupProps) {
const { path, title, unreads, updates, first = false } = props;
const anchorRef = useRef<HTMLElement>(null);
const isTutorialGroup = path === '/ship/~hastuc-dibtux/beginner-island';
const isTutorialGroup = path === `/ship/${TUTORIAL_HOST}/${TUTORIAL_GROUP}`;
useTutorialModal(
'start',
isTutorialGroup,

3
pkg/interface/src/views/landscape/components/GroupSummary.tsx
View File

@ -3,6 +3,7 @@ import { Metadata } from "~/types";
import { Col, Row, Text } from "@tlon/indigo-react";
import { MetadataIcon } from "./MetadataIcon";
import { useTutorialModal } from "~/views/components/useTutorialModal";
import {TUTORIAL_HOST, TUTORIAL_GROUP} from "~/logic/lib/tutorialModal";
interface GroupSummaryProps {
metadata: Metadata;
@ -17,7 +18,7 @@ export function GroupSummary(props: GroupSummaryProps) {
const anchorRef = useRef<HTMLElement | null>(null);
useTutorialModal(
"group-desc",
resource === "/ship/~hastuc-dibtux/beginner-island",
resource === `/ship/${TUTORIAL_HOST}/${TUTORIAL_GROUP}`,
anchorRef.current
);
return (

3
pkg/interface/src/views/landscape/components/Sidebar/SidebarItem.tsx
View File

@ -10,6 +10,7 @@ import { Sigil } from '~/logic/lib/sigil';
import urbitOb from 'urbit-ob';
import { getModuleIcon, getItemTitle, uxToHex } from "~/logic/lib/util";
import {useTutorialModal} from "~/views/components/useTutorialModal";
import {TUTORIAL_HOST, TUTORIAL_GROUP} from "~/logic/lib/tutorialModal";
function SidebarItemIndicator(props: { status?: SidebarItemStatus }) {
switch (props.status) {
@ -45,7 +46,7 @@ export function SidebarItem(props: {
const anchorRef = useRef<HTMLElement | null>(null)
useTutorialModal(
mod as any,
groupPath === '/ship/~hastuc-dibtux/beginner-island',
groupPath === `/ship/${TUTORIAL_HOST}/${TUTORIAL_GROUP}`,
anchorRef.current
);
const app = apps[appName];

4
pkg/interface/src/views/landscape/components/TutorialModal.tsx
View File

@ -11,6 +11,8 @@ import {
MODAL_WIDTH_PX,
MODAL_WIDTH,
MODAL_HEIGHT,
TUTORIAL_HOST,
TUTORIAL_GROUP,
} from "~/logic/lib/tutorialModal";
import { getRelativePosition } from "~/logic/lib/relativePosition";
import { StatelessAsyncButton } from "~/views/components/StatelessAsyncButton";
@ -80,7 +82,7 @@ export function TutorialModal(props: { api: GlobalApi }) {
}, [hideTutorial, props.api]);
const leaveGroup = useCallback(async () => {
await props.api.groups.leaveGroup("~hastuc-dibtux", "beginner-island");
await props.api.groups.leaveGroup(TUTORIAL_HOST, TUTORIAL_GROUP);
}, [props.api]);
const progressIdx = progress.findIndex((p) => p === tutorialProgress);