Update the homepage featured elements

README.md

@@ -5,6 +5,8 @@
 Clone this repo first, and set it up:
 
 ```bash
+git clone git@github.com:rubycentral/rubycentral-theme.git
+cd rubycentral-theme
 npm install
 ```
 
@@ -21,35 +23,36 @@ ghost install local
 Next, symlink from the theme checkout to your local Ghost themes folder:
 
 ``` bash
-# /content/themes
-ln -s ~/src/rubycentral/rubycentral-theme ./content/themes/rubycentral-theme
+# in /ghost-dev
+ln -s [absolute path on your machine]/rubycentral-theme ./content/themes/rubycentral-theme
 ghost restart
 ```
 
 Now, you need to activate the symlinked theme.
 
+1. From a fresh install, you'll need to create a fake account, like `me@example.com` and password `123abc123abc`. Go to [http://localhost:2368/ghost/#/setup](http://localhost:2368/ghost/#/setup).
 1. Open your local Ghost theme settings, by default [localhost:2368/ghost/#/settings/design/change-theme](http://localhost:2368/ghost/#/settings/design/change-theme).
 1. Click the "Advanced" button in the top right.
-1. Push "Activate" for `rubycentral-theme`.
-1. Browse to [localhost:2368](http://localhost:2368) and you should now see the theme, but with no content.
+1. Push "Activate" for `rubycentral-theme`. If you don't see it, it's not symlinked properly.
+1. Browse to [localhost:2368](http://localhost:2368) and you should now see the theme, but with no content. The example posts may not be styled properly, this is ok.
 
 Finally, to seed your local Ghost install with directors, staff, and posts, you will need to import everything in `imports/`.
 
 1. Open your local Ghost experimental settings at [localhost:2368/ghost/#/settings/labs](http://localhost:2368/ghost/#/settings/labs)
-1. Click "Open Importer", and then upload both `ruby-central.json` and `images.zip`.
-    - _Optional:_ Also upload `ruby-together-posts.json` to add the full backlog of blog posts.
+1. Go to [https://rubycentral.ghost.io/ghost/#/settings/labs] and click "Export your content". You should get a `.json` file locally.
+1. On the same page, click "download redirects" and "download routes" also. We will upload these too.
+1. Click "Open Importer", and then upload the `.json` file.
 1. Click "Upload redirects YAML/JSON" and choose `redirects.yaml`.
 1. Click "Upload routes YAML" and choose `routes.yaml`.
-1. Wait a few moments, then reload. You should now see images and content, including posts.
+1. In `/rubycentral-theme`, start the live reload server and compile your JS/CSS assets, and watch for changes: `npm run dev`. If you do not do this, your text will look unstyled.
+1. Wait a few moments and run `ghost restart`. You should now see images and content, including posts.
 
 ### Development
 
-```bash
-# Start the live reload server and compile your JS/CSS assets, and watch for changes
-npm run dev
-```
-
-Make changes, ideally your browser will automatically reload. You might have to refresh by hand after each change. If you can't see your changes, and you're sure that `npm run dev` is still going, you'll likely need to disable your browser's caching. Go to the Network tab in your dev tools and toggle "Disable cache".
+As you make changes, ideally your browser will automatically reload.
+You might have to refresh by hand after each change.
+If you can't see your changes, and you're sure that `npm run dev` is still going, you'll likely need to disable your browser's caching.
+Go to the Network tab in your dev tools and toggle "Disable cache".
 
 ### Deployment
 

home.hbs

@@ -1,24 +1,13 @@
 {{!< default}}
 
 <div class="upcoming">
-  {{#get "posts" limit="1" filter="featured:true"}}
+  {{#get "posts" limit="3" filter="featured:true"}}
     {{#foreach posts}}
-      <div class="next-conf">
+      <div class="homepage-featured">
         <a href="{{url}}">{{title}}</a>
       </div>
     {{/foreach}}
   {{/get}}
-  <div class="next-conf">
-      <a href="/news">Read the latest news and updates from Ruby Central about our work, including conferences and open source</a>
-  </div>
-
-  <div class="next-conf">
-    <span>
-      Our next conference is
-      <a href="https://rubyconf.org/home-edition" target="_blank">RubyConf: Home Edition</a> on January 11, 10AM - January 12, 4PM EDT.
-    </span>
-    <a href="https://rubyconf.org/home-edition" target="_blank" class="next-conf-button">Let's go!</a>
-  </div>
 </div>
 
 <div class="main-grid">

src/css/rubycentral.css

@@ -152,7 +152,7 @@ header h2 {
   margin: 0 auto 50px;
 }
 
-.upcoming .next-conf {
+.upcoming .homepage-featured {
   background: var(--red) 20px center no-repeat;
   border-radius: 20px;
   height: 60px;
@@ -162,15 +162,15 @@ header h2 {
   margin: 0 0 10px 0;
 }
 
-.upcoming .next-conf:nth-child(1) {
+.upcoming .homepage-featured:nth-child(1) {
   background: var(--blue) 20px center no-repeat;
 }
 
-.upcoming .next-conf:nth-child(2) {
+.upcoming .homepage-featured:nth-child(2) {
   background: var(--navy) 20px center no-repeat;
 }
 
-.upcoming .next-conf .next-conf-button {
+.upcoming .homepage-featured .homepage-featured-button {
   float: right;
   display: block;
   color: var(--red);
@@ -714,7 +714,7 @@ h3 {
     margin: 0 20px 50px;
   }
 
-  .upcoming .next-conf {
+  .upcoming .homepage-featured {
     background: var(--red) 20px 20px no-repeat;
     background-image: none;
     border-radius: 5px;
@@ -725,7 +725,7 @@ h3 {
     margin: 0 0 10px 0;
   }
 
-  .upcoming .next-conf .next-conf-button {
+  .upcoming .homepage-featured .homepage-featured-button {
     float: none;
     height: 40px;
     width: auto;