From 5762c650147eaf43a260156831d3089822924611 Mon Sep 17 00:00:00 2001 From: Adarsh Pandit Date: Fri, 20 Jan 2023 12:05:08 -0800 Subject: [PATCH] Update the homepage featured elements Reason for Change ================= * Some items on the blog site were outdated and needed to be removed. * I realized some things can be managed automatically by "featuring" posts. This logic already existed so I removed the hardcoded bits. Changes ======= * Remove rubyconf home edition section on the homepage * Remove link to news. We have a menu nav item for that, it should be enough. * In the CSS, I renamed `next-conf` to `homepage-featured`. * Increase limit of featured posts to 3 from 1 Minor ===== * Updated the `README.md` instructions as I went along. * Updated some instructions in our [Company Manual] [Company Manual]: https://docs.google.com/document/d/1MPd4CSCmuVj0YqtZmhWuIZGFr4lagU6iNYu_wpeCMO0/edit# --- README.md | 29 ++++++++++++++++------------- home.hbs | 15 ++------------- src/css/rubycentral.css | 12 ++++++------ 3 files changed, 24 insertions(+), 32 deletions(-) diff --git a/README.md b/README.md index 8872ca1..3677dbf 100644 --- a/README.md +++ b/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 diff --git a/home.hbs b/home.hbs index 415b172..f36b01c 100644 --- a/home.hbs +++ b/home.hbs @@ -1,24 +1,13 @@ {{!< default}}
- {{#get "posts" limit="1" filter="featured:true"}} + {{#get "posts" limit="3" filter="featured:true"}} {{#foreach posts}} -
+
{{title}}
{{/foreach}} {{/get}} -
- Read the latest news and updates from Ruby Central about our work, including conferences and open source -
- -
- - Our next conference is - RubyConf: Home Edition on January 11, 10AM - January 12, 4PM EDT. - - Let's go! -
diff --git a/src/css/rubycentral.css b/src/css/rubycentral.css index 507bc1f..61384b7 100644 --- a/src/css/rubycentral.css +++ b/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;