Merge pull request #55 from Hashnode/development

fazlerocks · web-flow · commit 6278de6f0843 · 2022-03-21T15:15:14.000+05:30
Updates team blogs doc, and misc design fixes
diff --git a/docs/create-team-blog.md b/docs/create-team-blog.md
@@ -1,47 +1,51 @@
 ---
 id: create-team-blog
-title: Create Team Blog (Beta)
+title: Create a Team Blog
 ---
 
-:::caution Remember
-The Team Blog feature is currently **in beta** (ongoing testing/improvements), and is not available publicly to all Hashnode users, and will become a **paid feature** soon.
+### Hassle-free blogs for fast-growing teams!
 
-::: 
+**An end-to-end blogging platform for devtools, engineering, and open-source teams. Map the blog to your company's domain or any custom domain!**
 
+Creators from the top tech teams choose Hashnode to publish their content. You're in good company.
 
+![Companies logos](http://localhost:8080/_next/image?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1647512010724%2FRY3K506gu.png%3Fauto%3Dcompress&w=3840&q=75)
 
-However, if you think you need this feature to run an **active** team blog and you will be open to **give feedback**, please write to us at support@hashnode.com to request to join the beta access list.
+---
 
-**Writing to us at support@hashnode.com for getting into the beta access list doesn’t fully guarantee access to the team publication. This feature will be available in GA by early 2022** 
+Here is how to create an account on Hashnode:
 
-Remember, your _Team Blog_ is still a "blog"; all the features and settings of a _Personal Blog_ still apply. Hence, you can customize your _Team Blog_ as you deem fit using the guides provided [here](account-settings.md).
+1. Log into your Hashnode account.
 
----
+2. Click on the **Dropdown button** beside the "Write button" on the Hashnode header.
 
-Before creating a team publication, here are some prerequisites needed:
+![Hashnode's Feed](https://cdn.hashnode.com/res/hashnode/image/upload/v1647855676958/0Nstu9S0P.png?auto=compress)
 
-- A Hashnode account. [Learn how to create one here](#create-an-account).
-- A personal blog powered by Hashnode. [Learn how to create one here](create-personal-blog.md).
-- Beta access to the Team Blog feature. [Request one here](create-team-blog.md).
+3. Click on the **Start a team blog** option from the dropdown menu.
 
-Here is how to create an account on Hashnode:
+4. Decide the blog's destination. Hashnode gives you a sub-domain for free forever. If you intend to use hashnode.dev as your company's blog, enter your company's name in the input field. For ex: enter `google` for `google.hashnode.dev`. **Skip to step 9.** If you want to map a custom domain, proceed to step 5.
 
-1. Log into your Hashnode account.
+![Hashnode onboarding screenshot for teams](https://cdn.hashnode.com/res/hashnode/image/upload/v1647850630031/ssK3rX4Ko.png?auto=compress)
+
+5. If you want to map a custom domain, click on **"Map my custom domain"**.
+
+6. Enter your company's sub-domain or a new custom domain on this screen.
 
-2. Click on your **profile picture** at the bottom-left corner of the page on your *desktop* or top-right corner of the page on your *mobile* screen.
+![Hashnode onboarding - map a custom domain screen](https://cdn.hashnode.com/res/hashnode/image/upload/v1647850859209/jsmHJu1KB.png?auto=compress)
 
-![Hashnode's Feed](https://cdn.hashnode.com/res/hashnode/image/upload/v1614932849541/cBNDGKXMj.png?auto=compress)
+7. Head over to your DNS provider (the website that controls your domain name) and add a CNAME record where the hostname is `@` and the corresponding value is `hashnode.network`. We'll automatically provision an SSL certificate for you when you visit your blog for the first time. <br/><br/>
+*If you are using something like Cloudflare, please bypass it for this domain.* <br/><br/>
+**💡 PS:** It's not recommended to use CNAME record at root level. However, please make sure your DNS provider supports [CNAME flattening](https://blog.cloudflare.com/introducing-cname-flattening-rfc-compliant-cnames-at-a-domains-root/) if you want to do it. If you are still unable to add CNAME at root, you can add an `A` record at the root whose value is `76.76.21.21`.
 
-3. Click on the **Account Settings** option from the popup modal to access the settings page.
+![Hashnode onboarding - custom domain DNS settings screen](https://cdn.hashnode.com/res/hashnode/image/upload/v1647851015217/qIEN7Hoiq.png?auto=compress)
 
-![Hashnode's Feed](https://cdn.hashnode.com/res/hashnode/image/upload/v1614933201339/atOcHm26X.png?auto=compress)
+8. Click on "I've added the records".
 
-4. Click on the **PUBLICATIONS** tab.
+9. **"You're all set".** Congrats! You've successfully created a blog. We’ll scan for your domain name and provision an SSL certificate automatically for free. Usually DNS propagation happens quickly. However, it may take up to 24 hours in the worst case.
 
-![Hashnode's Publications](https://cdn.hashnode.com/res/hashnode/image/upload/v1600711938515/twQd6E4ka.png?auto=compress)
+![Hashnode onboarding final screen](https://cdn.hashnode.com/res/hashnode/image/upload/v1647851482307/l7_fvI4cw.png?auto=compress)
 
-5. You will now see your personal blog and previously created team blogs in a table. Scroll down to the **Create a Team Blog** section.
+10. Head over to the blog dashboard by appending `/dashboard` to the blog URL. If it's your first time visiting your blog, you need to login to your blog using the Hashnode account. This takes less than a second. Click on the "Sign in" button present inside the Dropdown menu in the blog header. 
 
-6. Enter your **Team Blog Name** with a limit of 40 characters only in the text field.
+![Hashnode blog screenshot](https://cdn.hashnode.com/res/hashnode/image/upload/v1647851265161/noyE_Nk9M.png?auto=compress)
 
-7. Click on the **Create** button, and your **Team's Blog** will be created.
diff --git a/src/css/custom.css b/src/css/custom.css
@@ -38,6 +38,11 @@ body{
 height: auto;
 }
 
+.navbar__logo{
+ max-width: 200px;
+ height: auto;
+}
+
 .navbar__link{
 padding: 4px 8px;
 display: block;
@@ -73,6 +78,7 @@ footer{
 }
 
 .navbar-sidebar{
+ min-width: 300px;
 box-shadow: none;
 }
 
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -12,7 +12,8 @@ const features = [
 <>
 <li><a href = "docs/">Using Hashnode</a></li>
 <li><a href = "docs/hashnode-glossary">Hashnode Glossary</a></li>
- <li><a href = "docs/create-personal-blog">Create Personal Blog</a></li>
+ <li><a href = "docs/create-personal-blog">Create a Personal Blog</a></li>
+ <li><a href = "docs/create-team-blog">Create a Team Blog</a></li>
 <li><a href = "docs/bug-reports-and-feature-request">Bug Reports and Feature Requests</a></li>
 
 </>

Original file line number	Diff line number	Diff line change
`@@ -38,6 +38,11 @@ body{`
`38`	`38`	`height: auto;`
`39`	`39`	`}`
`40`	`40`
	`41`	`+.navbar__logo{`
	`42`	`+max-width:200px;`
	`43`	`+height: auto;`
	`44`	`+}`
	`45`	`+`
`41`	`46`	`.navbar__link{`
`42`	`47`	`padding:4px8px;`
`43`	`48`	`display: block;`
`@@ -73,6 +78,7 @@ footer{`
`73`	`78`	`}`
`74`	`79`
`75`	`80`	`.navbar-sidebar{`
	`81`	`+min-width:300px;`
`76`	`82`	`box-shadow: none;`
`77`	`83`	`}`
`78`	`84`
-Original file line number
+Diff line change
 <>
 <li><ahref="docs/">Using Hashnode</a></li>
 <li><ahref="docs/hashnode-glossary">Hashnode Glossary</a></li>
 -<li><ahref="docs/create-personal-blog">Create Personal Blog</a></li>
 +<li><ahref="docs/create-personal-blog">Create a Personal Blog</a></li>
 +<li><ahref="docs/create-team-blog">Create a Team Blog</a></li>
 <li><ahref="docs/bug-reports-and-feature-request">Bug Reports and Feature Requests</a></li>
 </>