Skip to content

Add themes example #2032

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Feb 26, 2019
Merged

Add themes example #2032

merged 6 commits into from
Feb 26, 2019

Conversation

cristijora
Copy link
Contributor

@cristijora cristijora commented Feb 26, 2019

This is a follow up PR after a discussion with @yyx990803 for a partnership with Creative Tim.

We added a Themes page under Examples with a specific query param for each link allowing to track potential sales coming from Vue.js website.

Vue.js will get 50% of each sale and therefore increase it's Open Collective or Patreon revenue and further support Open Source development.

PR breakdown:

  • Add new page under "Examples" with Themes
  • Add new feature that will allow displaying new/updated links by having a red dot near a link
    screen shot 2019-02-26 at 11 31 46 am
    The feature is built in such a way that any link from the navbar can be added
links = [
      {
        title: 'Learn',
        updatedOn: new Date("Fri Mar 1 2019")
      },
      {
        title: 'Examples',
        updatedOn: new Date("Fri Mar 1 2019")
      }
    ]

The red dot will appear for 2 months starting from updatedOn date.
The red dot near the link will disappear as soon as you visit the page and will no longer appear if you visited the corresponding page. This can be used on any links to show that something was updated.
To add a new link go to common.js -> initNewNavLinks and add the link to the array above.
E.g

 {
        title: 'Ecosystem',
        updatedOn: new Date("Sat Mar 2 2019")
 }

var classes = link.classList
var linkKey = `visisted-${link.textContent}`
if (localStorage.getItem(linkKey) || classes.contains('current')) {
classes.remove('current')
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should not remove the current class here

<a class="item-preview-img" :href="`https://www.creative-tim.com/product/${product.name}?affiliate_id=${affiliateId}`" rel="nofollow">
<img :src="`https://raw.githubusercontent.com/creativetimofficial/public-assets/master/${product.name}/${product.name}.jpg`" :alt="`${product.title} - ${product.description}`"></a>
<div class="item-preview-title-container">
<h3 class="item-preview-title" :class="{'free': product.free}">{{product.title}}</h3>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Somehow the scrolling-to-header in the sidebar links isn't working for these h3 titles

Fix smooth scroll on theme header links
@cristijora
Copy link
Contributor Author

Fixed header scrolling and with this occasion updated to smooth-scroll v15.2.1
which supports callback to specify different offsets depending on each link

@yyx990803 yyx990803 merged commit 8cfacc7 into vuejs:master Feb 26, 2019
@cristijora cristijora deleted the feat/themes branch February 27, 2019 17:17
phanan pushed a commit to phanan-forks/vuejs.org that referenced this pull request Mar 14, 2019
Add themes example page with multiple free & paid Vue.js themes.
Add option to display that certain links are new/updated
phanan pushed a commit to phanan-forks/vuejs.org that referenced this pull request Mar 20, 2019
Add themes example page with multiple free & paid Vue.js themes.
Add option to display that certain links are new/updated
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants