Skip to content
Permalink
Browse files

feature: new icon page (#30)

  • Loading branch information
jimniels committed Aug 2, 2019
1 parent 1a7e5da commit 62a2e42af5213a232ce37ee8c06507ebe6609374
@@ -12,6 +12,8 @@ CLI:
- Determines which site you're trying to build
- `--limit=40`
- Limits the number of posts in the build.
- `--reactFast=true`
- Puts node into "production" mode before react renders so that goes fast (then switches back to whatever it was)

## New Post

@@ -32,7 +32,9 @@ let app = Metalsmith(__dirname)
icons: [], // we'll set this in a plugin below
buildTime: new Date(),
isDevelopment
}
},
// Build-only related metadata
__reactFast__: argv.reactFast === "true"
})
.source("./src/www") // @TODO consider move www up one
.destination("./build")
@@ -39,9 +39,13 @@ const addIconMetadata = ({ pattern = [] }) => {
developer,
developerUrl,
designer,
designerUrl
designerUrl,
itunesUrl
} = files[file];

// Get the domain of the itunesUrl
files[file].itunesUrlDomain = getDomain(itunesUrl);

// Map the `category` name to every icon that has a `categoryId`
// Make it a string as we don't need it as a number anywhere
if (categoryId) {
@@ -10,7 +10,12 @@ const ReactDOMServer = require("react-dom/server");
*/
const renderTemplates = () => {
return (files, metalsmith, done) => {
const { site } = metalsmith.metadata();
const { __reactFast__, site } = metalsmith.metadata();

if (__reactFast__) {
process.env.NODE_ENV = "production";
}

const src = metalsmith.source();
const PageIcon = require("../src/server/PageIcon.jsx");
const { SiteContext } = require("../src/server/SiteContext.jsx");
@@ -75,6 +80,10 @@ const renderTemplates = () => {
log.js
);

if (__reactFast__) {
process.env.NODE_ENV = "production";
}

done();
};
};
@@ -1,20 +1,26 @@
const React = require("react");
const { number } = require("prop-types");
const Icon = require("./Icon.jsx");
const { iconPropTypes } = require("./shared/propTypes.js");

IconListItem.propTypes = {
icon: iconPropTypes.isRequired
icon: iconPropTypes.isRequired,
size: number
};

function IconListItem({ icon }) {
/**
* Generally always 128 size, except for "related icons" on icon detail view
* @param {*} param0
*/
function IconListItem({ icon, size = 128 }) {
return (
<li key={icon.id}>
<a
href={icon.permalink}
title={icon.title}
className="js-trigger-icon-modal"
>
<Icon size={128} icon={icon} />
<Icon size={size} icon={icon} />
</a>
</li>
);
@@ -20,7 +20,7 @@ Page.propTypes = {

function Page({ openGraphMetaTags, site, title, children }) {
return (
<html>
<html lang="eng">
{/* Helps prevent flashing of dark mode when page loads */}
<script dangerouslySetInnerHTML={{ __html: darkModeScript }} />

@@ -88,7 +88,11 @@ function Page({ openGraphMetaTags, site, title, children }) {
<SiteTitle themeId={site.themeId} />
</a>
<div className="site-switcher" hidden>
<a className="site-switcher__trigger" href="#">
<a
className="site-switcher__trigger"
href="#"
title="Related sites"
>
<Svg id="arrow-down" />
</a>
<ul className="site-switcher__content">
@@ -3,8 +3,8 @@ const { format } = require("date-fns");
const { withSite } = require("./SiteContext.jsx");
const Page = require("./Page.jsx");
const Ad = require("./Ad.jsx");
const RelatedPosts = require("./RelatedPosts.jsx");
const Icon = require("./Icon.jsx");
const PostMeta = require("./PostMeta.jsx");
const { iconPropTypes, sitePropTypes } = require("./shared/propTypes");

PageIcon.propTypes = {
@@ -30,6 +30,7 @@ function PageIcon({
developerUrl,
developerUrlDomain,
itunesUrl,
itunesUrlDomain,
id,
permalink,
title
@@ -62,138 +63,63 @@ function PageIcon({
<Icon icon={icon} size={64} srcSize={512} />
</div>
<div className="post-meta">
<div className="post-meta__content">
<h1>{title}</h1>

<dl>
{/* Icon Designer */}
{designer && (
<>
<dt>Designer</dt>
<dd>
<a href={`/search/?designer=${designerId}`}>{designer}</a>

{designerUrl && (
<>
{" "}
(
<a href={designerUrl} className="external-link">
{designerUrlDomain}
</a>
)
</>
)}
</dd>
</>
)}
{/* App Developer */}
{developer && (
<>
<dt>Developer</dt>
<dd>
<a href={`/search/?developer=${developerId}`}>
{developer}
</a>
{developerUrl && (
<>
{" "}
(
<a href={developerUrl} className="external-link">
{developerUrlDomain}
</a>
)
</>
)}
</dd>
</>
)}
{/* Category */}
{category && (
<>
<dt>Category</dt>
<dd>
<a href={`/search/?category=${categoryId}`}>{category}</a>
</dd>
</>
)}
{/* Tags */}
{color && (
<>
<dt>Color</dt>
<dd>
<a href={`/search/?color=${colorId}`}>{color}</a>
</dd>
</>
)}
{/* Post Date */}
<dt>Posted</dt>
<dd>{format(date, "MMM D, YYYY")}</dd>

{/* App Store - Query string `?at=XXXX` is for affliate linking */}
<dt>App Store</dt>
<dd>
<a href={`${itunesUrl}?at=1l3vtCx`}>
<img
src="/assets/images/download-on-app-store.svg"
width="120"
height="40"
style={{ marginTop: "5px" }}
/>
</a>
</dd>
</dl>
</div>

{/* Ad */}
<div className="post-meta__ad">
<Ad themeId={site.themeId} />
</div>
<div className="post-ad">
<Ad themeId={site.themeId} />
</div>
</div>
<aside className="related-posts">
{/* Designer */}
<RelatedPosts
icon={icon}
metaKey="designerId"
queryKey="designer"
headingPrefix="More from the designer"
headingValue={designer}
<PostMeta
label="App"
value={title}
// App Store - Query string `?at=XXXX` is for affliate linking
link={`${itunesUrl}?at=1l3vtCx`}
linkLabel={itunesUrlDomain}
/>

{/* Color */}
<RelatedPosts
icon={icon}
metaKey="colorId"
queryKey="color"
headingPrefix="More of the color"
headingValue={color}
<PostMeta
label="Designer"
value={designer}
link={designerUrl}
linkLabel={designerUrlDomain}
relatedIconsData={{
currentIcon: icon,
key: "designerId",
viewAll: "View all icons by this designer"
}}
/>

{/* Developer */}
<RelatedPosts
icon={icon}
metaKey="developerId"
queryKey="developer"
headingPrefix="More from the developer"
headingValue={developer}
<PostMeta
label="Developer"
value={developer}
link={developerUrl}
linkLabel={developerUrlDomain}
relatedIconsData={{
currentIcon: icon,
key: "developerId",
viewAll: "View all icons by this developer"
}}
/>

{/* Category */}
<RelatedPosts
icon={icon}
metaKey="categoryId"
queryKey="category"
headingPrefix="More from the category"
headingValue={category}
<PostMeta
label="Category"
value={category}
relatedIconsData={{
currentIcon: icon,
key: "categoryId",
viewAll: "View all icons in this category"
}}
/>
</aside>
<PostMeta
label="Color"
value={color}
relatedIconsData={{
currentIcon: icon,
key: "colorId",
viewAll: "View all icons of this color"
}}
/>
<PostMeta label="Date Added" value={format(date, "MMM D, YYYY")} />

{/* @TODO icons from the same year? */}
</div>
<script type="module" src="/assets/scripts/icon-view-load-more.js" />
</Page>
);
}

0 comments on commit 62a2e42

Please sign in to comment.
You can’t perform that action at this time.