diff --git a/src/components/CardContent.tsx b/src/components/CardContent.tsx index 68bebf4e4..95e6e4e44 100644 --- a/src/components/CardContent.tsx +++ b/src/components/CardContent.tsx @@ -5,7 +5,7 @@ import ExpressionRunnerScrollAdjuster from 'src/components/ExpressionRunnerScrol export interface CardContentProps { children: React.ReactNode preview?: { - content: React.ReactNode + content?: React.ReactNode text: React.ReactNode afterText?: React.ReactNode } diff --git a/src/components/EmojiSeparator.tsx b/src/components/EmojiSeparator.tsx index 77e4be458..116f888d0 100644 --- a/src/components/EmojiSeparator.tsx +++ b/src/components/EmojiSeparator.tsx @@ -23,6 +23,7 @@ interface EmojiSeparatorProps { description?: React.ReactNode noBottomMargin: boolean noTopMargin: boolean + topDescription?: React.ReactNode } const fontSize = (size: EmojiSeparatorProps['size']) => @@ -63,6 +64,7 @@ const EmojiSeparator = ({ alignCenter, cssOverrides, description, + topDescription, noBottomMargin, noTopMargin }: EmojiSeparatorProps) => ( @@ -81,6 +83,21 @@ const EmojiSeparator = ({ ]} > <> + {topDescription && ( +
+ {topDescription} +
+ )} { css={linkClasses} > - + {' '} ·{' '} Twemoji diff --git a/src/components/H.tsx b/src/components/H.tsx index 2d2200302..f6b079392 100644 --- a/src/components/H.tsx +++ b/src/components/H.tsx @@ -35,7 +35,7 @@ import EmojiNumber from 'src/components/EmojiNumber' import TwitterEmbed from 'src/components/TwitterEmbed' import { shareId, shareVisible } from 'src/lib/twitter' import { dateString, dateSchemaString } from 'src/lib/date' -import { githubRepo } from 'src/lib/meta' +import { githubRepo, jpBaseUrl, enBaseUrl } from 'src/lib/meta' import CustomEmoji from 'src/components/CustomEmoji' import InlinePrioritiesLabel from 'src/components/InlinePrioritiesLabel' import { VariableNames } from 'src/types/VariableNames' @@ -122,6 +122,7 @@ interface HProps { | { name: 'categoryNameColored' category: keyof typeof episodePrefixes + text?: React.ReactNode } | { name: 'stoppedForExplanation' } | { name: 'pageNotFound' } @@ -203,7 +204,7 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => { color: ${prefixColors[args.category]}; `} > - {episodePrefixes[args.category]} + {args.text || episodePrefixes[args.category]} ) } @@ -1088,7 +1089,34 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => { } if (args.name === 'dateAndSource') { if (locale === 'en') { - return <>? + return ( + <> +

+ {args.includeAboutMe && ( + <> + Author: Shu Uesugi ( + + Website + {' '} + ·{' '} + + Twitter + + ) +
+ + )} + Published on:{' '} + +
+ Source code:{' '} + Available on GitHub +
+ Japanese translation:{' '} + 日本語版はこちら +

+ + ) } else { return ( <> @@ -1108,6 +1136,9 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
ソースコード:{' '} GitHubで公開中 +
+ 英語版:{' '} + 英語版はこちら {args.includeTwitter && ( <>
diff --git a/src/contents/0.en.tsx b/src/contents/0.en.tsx index 3688041e4..3584dfe11 100644 --- a/src/contents/0.en.tsx +++ b/src/contents/0.en.tsx @@ -1,4 +1,309 @@ import React from 'react' import EpisodeCardList from 'src/components/EpisodeCardList' +// import { +// numEpisodesExceptFirstAndLast, +// numTotalPages +// } from 'src/lib/episodeCategories' +import { + Highlight, + // Img, + ExternalLink, + P, + HighlightBold, + Bold, + Italic + // Ol, + // OlLi, + // Hr +} from 'src/components/ContentTags' +import Emoji from 'src/components/Emoji' +import CustomEmoji from 'src/components/CustomEmoji' +import EmojiSeparator from 'src/components/EmojiSeparator' +import BubbleQuotes from 'src/components/BubbleQuotes' +import NextLessonButton from 'src/components/NextLessonButton' +import CardContent from 'src/components/CardContent' +import Toc from 'src/components/Toc' +import H from 'src/components/H' +// import { lessonTitle } from 'src/lib/titles' +// import YoutubeEmbed from 'src/components/YoutubeEmbed' +// import { githubRepo } from 'src/lib/meta' +// import * as R from 'src/components/Runners' -export default () => +export default () => ( + Welcome!, + content: ( + <> +

+ 🤗 Welcome! This is an interactive + online course where{' '} + + non-programmers can learn learn about{' '} + Y Combinator. + {' '} + It’s 100% free (no signup + required), and you can do it from your smartphone, tablet, or + computer. +

+ + It’s 100% free, and you can do + it from +
+ your smartphone, tablet, or computer. + + } + /> +

+ Overview: This course + consists of{' '} + + 5 beginner levels + }} + /> + + ,{' '} + + 5 intermediate levels + }} + /> + + , and{' '} + + 5 advanced levels + }} + /> + + . It should take about 2 to 3 hours{' '} + to read for most people. +

+ + + 5 beginner levels + }} + /> + + ,{' '} + + 5 intermediate levels + }} + /> + + ,
+ and{' '} + + 5 advanced levels + }} + /> + + + } + /> + Press here to view the table of contents. + }} + > + Table of Contents: Press each title below to jump to + that page. + + + + ), + footer: { + content: ( + <> + + + ) + } + }, + { + title: <>Start now, or read the introduction, + content: ( + <> +

+ 😁{' '} + If you want to get started as soon as possible:{' '} + + Press the button below to go to the next page! + +

+ +

+ 🤔{' '} + If you want to read the introduction before you get + started, scroll down and keep reading! +

+ , + , + + ]} + topDescription={<>Scroll down to read the introduction!} + /> + + ) + }, + { + title: <>Introduction: Have you heard of “Y Combinator”?, + content: ( + <> +

+ 🤔 Have you heard of “Y Combinator”?{' '} + If you’re into technology, you might have heard that{' '} + + Y Combinator is the name of a startup investing firm. + {' '} +

+

+ + Y Combinator + + , the startup investing firm, has invested in more than 2000 + startups since 2005.{' '} + + The combined valuation + {' '} + of top companies they invested (such as AirBnB) is more than $150 + billion dollars as of October 2019. +

+ + Y Combinator is the name of +
a startup investing firm + + } + /> +

+ ⚠️ However: In this course, we will + NOT talk about this startup investing firm.{' '} + + Y Combinator is actually the name of{' '} + an important concept in computer science, and + that’s what we’re going to talk about. + +

+ + Y Combinator is actually the name of +
+ an important concept in computer science + + } + /> +

+ In fact: The startup investing firm Y Combinator was{' '} + named after this computer science concept. Paul + Graham, a co-founder of the firm, said this in{' '} + + his 2010 interview + + , when asked why he named his firm “Y Combinator”: +

+ +

+ [Y Combinator is] a programming trick. … I wanted to + call it Y Combinator just because I thought the Y + Combinator was a really cool thing. So it would be the + perfect name for picking out the kind of people that we + wanted. +

+

+ Hackers would look at this and think,{' '} + + “That’s so cool. They’re named after the Y Combinator. + There must be something going on here.” + {' '} + And suits would look at it and think,{' '} + “Y Combinator, what’s that?” +

+

+ That was what we wanted. We wanted hackers to notice us, + and suits, we didn’t care. +

+ + ) + } + ]} + /> +

+ Explanation of the above quote: Paul Graham, a + computer scientist,{' '} + + wanted to invest in entrepreneurs who are also programmers + (“hackers” 😎) + + . So he named his investing firm “Y Combinator”, which is a + computer science (programming) term, in order to attract hackers. +

+

+ And because Y Combinator is a very technical computer science + concept,{' '} + + he assumed businesspeople (“suits” 👔), who he + didn’t care about, won’t understand what it means. + +

+ + Hackers vs Suits: +
+ To attract programmers, Paul Graham +
+ named his investing firm “Y Combinator”, +
+ an important computer science concept. + + } + /> + + ) + } + ]} + /> +) diff --git a/src/contents/0.jp.tsx b/src/contents/0.jp.tsx index 75a06e146..ff40e8c4c 100644 --- a/src/contents/0.jp.tsx +++ b/src/contents/0.jp.tsx @@ -165,6 +165,20 @@ export default () => ( 」という方は、そのまま下に読み進めてみてください。

+ , + , + + ]} + topDescription={ + <> + 説明を読んでから始めるには +
+ 下にスクロールしてください！ + + } + /> ) }, diff --git a/src/lib/date.tsx b/src/lib/date.tsx index 15669ec1d..4b3fa8317 100644 --- a/src/lib/date.tsx +++ b/src/lib/date.tsx @@ -3,7 +3,7 @@ import { DateTime } from 'luxon' export const date = { jp: DateTime.fromISO('2019-09-09T00:00:00Z'), - en: DateTime.fromISO('2019-10-07T00:00:00Z') + en: DateTime.fromISO('2019-10-31T12:00:00Z') }[locale] export const dateString = { diff --git a/src/lib/meta.ts b/src/lib/meta.ts index 2cc2a453c..2cfdf9a08 100644 --- a/src/lib/meta.ts +++ b/src/lib/meta.ts @@ -1,7 +1,8 @@ import locale from 'src/lib/locale' -export const baseUrl = - locale === 'en' ? 'https://yc.chibicode.com' : 'https://yj.chibicode.com' +export const jpBaseUrl = 'https://yj.chibicode.com' +export const enBaseUrl = 'https://ycombinator.chibicode.com' +export const baseUrl = locale === 'en' ? enBaseUrl : jpBaseUrl export const githubRepo = 'https://github.com/chibicode/yc'