skaant / rimarok Goto Github PK

Fixed by #28

Add variations :

• No source no author,
• No source, author,
• Source, no author,
• Source & author

<Row>
  <>
    <h3>Citation simple</h3>
    <p>(Sans légende)</p>
    <Quote ...

As Styleguide page shown us, we don't want TableOfContents's internal link to point to headers but rows.

So id is not anymore semantically related to header concept but to row (or section).

Doesn't hurt me that header take section title (children props).

Make these fixes on the same branch and the same PR :

• Fix : Carousel > Project is going above Navbar
  
• Navbar sub-menu mobile : add mb under Prestation box,
• Footer : reverse col order mobile.

Footer is split in two columns (for desktop, but one under the other on mobile) :

• Background color : ABYSS, text : white
• Row or not ?
• On mobile, direction column (for left & right sections)

1. Left : site map (see #1), display site pages link tree

   • Prestation two sub-pages are displayed with a padding left
   • Motifs menu entry doesn't display sub-pages
   • Blog menu entry doesn't display articles (for now)
   • List must not have left dot (see https://getbootstrap.com/docs/5.2/content/typography/#lists)

2. Right, mentions :

   • RIMAROK.com
   • "Site conçu par Romaric Ruga et Lucile Joan, développé par Romaric Ruga et Tim Jeanmart."
   • Two buttons :
     • Contact (behavior will be treated in another issue)
     • A link to Mentions légales

3. Last, insert <Footer> at the end of <Layout>.

Edit :

• Replace <Row> with <footer>

Example

See footer on : https://highbs-bok.art/
Code (w/ article sort & slice algo) : https://github.com/Skaant/highbs-bok/blob/main/src/components/Layout/Footer.tsx

Requires #14

Extend Bootstrap component : https://getbootstrap.com/docs/5.2/content/typography/#blockquotes

Example : grey & " symbols, https://github.com/Skaant/highbs-bok/blob/6880ab499e2d3affc12944f5e1a51ed919163b90/src/components/_rows/QuoteRow.tsx

Style

• Use second font size.
• Use one or more other specific styles (ex: reduced opacity, padding left ...).

Props

• displayHeading?: 1 | 2 | 3 | 4 | 5 | 6 to take advantage of Bootstrap display headings classes.
• legend?: { source?: string, author?: string }, to optionally display quote data under body.

Requires :

• #31

<Project> will be used in <Carousel> as children item.

UI

Each Project displays as a Card :
d-flex for Card body & order for content

• A h3 title,
• A line with :
  • Left, a list of pill badges,
    • A single COLORS.SUN badge which is either : Full-stack / Front-end,
    • A set of COLORS.MIST badge for tags (ex: React, Nest, Bootstrap ...),
  • Right, date (ex: Juin 2019 - Août 2020), optional (for personal project)
  • Left on top of right for mobiles,
• The second line is displayed on top of the h3 title with flex order.
  This allow page to keep header before content for robot reading, but welcome eyes with the metadata line.
• The children content (ReactElement),
• An optional <LinksMenu> left under.

Props

• title: string,
• scope: 'full-stack' | 'front-end',
• tags?: string[],
• date?: string,
• children: ReactElement,
• menu?: <menu-items*>[]

* *If not already done, extract <LinksMenu> menu items type in a exportable type inside the same file

export type LinksMenuItem = { link: string; internal?: boolean; label: string }

type LinksMenuProps = {
  links: LinksMenuItem[];
};

Displays a list <ul> of internal page links.

• Create a type for header across pages (that can be read as a value for h1 etc. & for this component) :

/** src/types/Header.ts */
type Header = { id: string, title: string }
export default Header

• Create the "Styleguide" page,
• Create a constant STYLEGUIDE_HEADERS with Row, Quote, TableOfContents :

/** index.tsx */

const STYLEGUIDE_HEADERS: Header[] = [
  {
    id: 'row',
    title: 'Row'
  },
  {
    id: 'table-of-contents',
    title: 'Table of contents'
  }
]

function Styleguide(...

• Create a TableOfContents component displaying the list of given headers data :

<ul>
  {STYLEGUIDE_HEADERS.map(({ id, title }) => (
    <li>
      <a href={id}>{title}</a>
    </li>
  )}
</ul>

• Edit : Make use of Gatsby <Link> instead of <a href=...>
  Documentation : https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-link/
• quote.scss: remove height rule
• Merge dev + replace h2's id with <Row id={}>

Props

• contents: Header[]

ArticlesList is a single usage component to be displayed in Blog page.

• Display articles list (for blog page) using https://getbootstrap.com/docs/5.2/components/list-group/#flush
  Articles items should render with :
  • The same tags/date header than <Project>,
    • Extract header in a new component (choose the name and path 😋), imported by both <ArticlesList> and <Project>,
  • h3 article title,
  • p description, shortened to 150 characters (break and add " ..." if necessary),
• sort() articles from the most recent to the least,
• Import component in blog under Liste des articles
• Add a link (<LinkMenu> or <a>) to (future) articles page /blog/${article.id}

If you use array methods modifying ARTICLES_DATA array (like reverse()), use slice() before in order to preserve initial object shape.

Enforce and harmonize the links between :

• row bg color and text color,
• row bg color and btns color,
• row bg color and a color,
• row bg color and quote bg color,
• quote bg color and quote text color.

For the sake of clarity, try to make it mostly SCSS.

• Increase Bootstrap base font size variable
• Add base margins to headers range

• Add 60vh variation to $utilities / viewport height
• Allow component width to be set either to 100 or 60vh.
  60vh by default.
• Allow component h1 to be set either to normal h1 size or bigger size (current component size).
  Normal by default

Props

• height: '100vh' | '60vh'
• titleSize: 'normal' | 'big'

List of rows composing the page :

• Site name & catch phrase

  #6

• CTA (to prestation page)

  #8

• Carousel (5 most important experiences)

  #10

• CTA (to motifs page)

  #8

• Carousel (5 personal projects)

  #10

• CTA (to blog page)

  #8

• CTA (to prestation page)

  #8

Displays motifs as follow :

• h3 title w/ a way smaller size (must fit in given responsive conditions below)
• Display summary in <p>
• A Link in a div to the motif page with label Page ${motif}
• Responsive behavior
  • Mobile : 1 item by line
  • Sm : 2 items
  • Lg : 4 items

You should use col-*-* classes.

• Integrates in page MOTIFS

Creates a component on Gatsby and the behavior on front-end application.

Component

• A circle button (Button + rounded-circle) is displayed w/ position (absolute/static/fixed ?) & high z-index, at page's right bottom.
  It displays the character ↑.
• For Styleguide page, allow positionning to be set to block (to be displayed in components thread)
• Background color : LAGOON, font color: WHITE, no border or shadow.

Behavior

Edit global.js to add following mechanics (you can create an external file that you'll then import in global file) :

• On click, use scrollTo(0) to come back to top of the page,
• Button appear only when user scrolled 200px down.
  Disappear when user comes back on the 200 top pages' px.
  addEventListener scroll on window

More padding to <Row> ?
To <Row>'s header ?

• Add tags?: string[] prop on Section
• Display tags above header using a <BadgeList>, as in <Project>

• Row : add padding y
• Row or .col : add min padding x for mobile

Bonus

• Row : add padding y range : 'small' | 'normal' /** default */ | 'large'

absolute-positionned SVG (w/parallax)

This component should be inserted inside a row.

Noticable props :

• parallax?: boolean = true
• Sizes ?
• Z-index ?

Page top-level component.

Elements to integrates in Layout :

• Use <Helmet> for :

  • Meta title,
  • Meta description,
  • Meta no-robot (styleguide page, mentions légales page).

• container Bootstrap, which encapsulates page content (a list of rows)

• Navbar (moved to #16 )

• Footer (moved to #17 )

Cf. https://highbs-bok.art/ footer

• Use ARTICLES_DATA to display the last five articles (just title, not date or tags),
• It must render as a sublist (cf Prestation children pages) under "Blog" list item.

Carousel will be used to display both :

• A set of CV experiences,
• A set of personal projects.

Controls must be though with in mind : CV experiences should be visually tracked in time and ordered as so.

Create all website's pages in :

• Accueil
• Prestation
  • Ingénierie web
  • Éco-conception
• Motifs
  • Motif template
• Blog
  • Article template
• Styleguide
• Mentions légales

Structure

• data/pages.ts to hold PAGES enum & PAGES_DATA (url, title, description, tags ...)

On existing component <Row> , add both properties :

• id?: string, set .row's id attribute,
• header: { level: 1 | 2 | 3, content: string}

As a systematic usage, we now want to create a new component from FullScreenTitle (deleted or renamed [moved] in operation) & TableOfContents (kept for other uses, in sections).

Use TableOfContentsProps in union w/ current component props type.

There is three link's scopes :

• Inside the page,
• Inside the site, but outside the page,
• Outside the site.

A small and slightly transparent text should be set above link's item to indicate their scope with :

• Lien de page,
• Lien de site,
• Lien externe.

Displays an inline* list of pill badges.

* Will be used inside <p> so it must use a span (to encapsulate span.badge).

Share some characteristics with #25.

Props

• badges: { label: string, color: COLORS }[]

Requires :

• #5
• #3

Widely used components.

Made of :

• An <h2>
• A set of paragraphs
• One or two buttons

Single-use component (page Accueil).

May be derivated for article pages, and even ingénierie web & éco-conception pages.

Expectations

cf. https://rimarok.com/ homepage, but without graphics.

• Use of <Row>, makes it height: 100vh (there may be an utility).
• Title and subtitle are horizontally and vertically centered.
• Make them both big (title way bigger), but ensure they fit in a single mobile screen 😹
  Attention : use Bootstrap's font-size() mixin to handle responsive font-size
  https://github.com/twbs/bootstrap/blob/c11c3a7e1941032be9f239520a52e6064af3e017/scss/vendor/_rfs.scss#L312
• Display title with font slab
  Instead, creates a rule in global.scss which set all h<level> (1 to 6) tag to hold slab font style.
• Row background should be FLOWER

Row changes to display title full-size

• Row changes :
  • For RowProps, add : col?: string;,
  • For Row props destructuring, col = "col-12 col-sm-10 col-md-8 col-lg-6" to set col value by default (if no value is given in prop col),
  • Inside col div = className={col}
• FullSizeTitle changes : import <Row className='col-12'>

Content

<h1>Moins égal plus</h1>
<p>RIMAROK.com, ingénierie web et éco-conception</p>

Inside a Row, display a list of links aligned at left.

Links, while <Link> or <a> tags, use Bootstrap's .btn classes
https://getbootstrap.com/docs/5.2/components/buttons/
(This component isn't a Buttons group, they are splat away from each other ~mx-2..3 ?)

Props

• links: { link: string, internal?: boolean = true, label: string }[]
  Link can be internal (default, and use <Link>) or external.
  Label is displayed button text.

By default, importing utilities/map creates breakpoints (6) * utilities (10, 20, more ?) * values (average 5 ?) rules.

We want to disable all utilities by overriding $utilities with empty content & fill it with only requires entries.

Make use of the lowecase prop to alter page or section title (altTitle not concerned)

In a new prestation.js app, only imported on Prestation page (already done) :

Search for /prestation#contact {mobile} and {mail} buttons and replace both their label (ask me values on Slack when you're ready) and href (mailto, tel ...) on click.

Brand is the name of the left link

• Set navbar right links color to lagoon
• Hide links underline globally
• Brand link must be set to site root /,
• Brand font must be set to : font-size(24px) and font-slab
• Edit Prestation button :
  • Replace Prestation dynamic title with static : "Mon offre",
  • Remove link from dropdown button (just render text),
  • Add a dropdown item at top with Prestation page link and title (in <b> tag),
  • Add "◆ " before Ingénier web and Éco-conception,
• Add real links to pages' navbar links

Ceci est la tâche "meta" qui regroupe toutes les tâches de reviews des pages du site.

On <Row> component add a prop to automatically generates a header.

• Add prop header: { level: 1 | ... | 6, content: string }
• Conditionally render given <h<level>> tag on .col top.

The two families to include (experimental) :

• Font 1 - Rubik 400 (for texts)
  https://fonts.google.com/specimen/Rubik
• Font 2 - Roboto Slab 300 (for titles, displays, headers)
  https://fonts.google.com/specimen/Roboto+Slab

1. Add fonts file in /static/fonts (create folder static, more info : https://www.gatsbyjs.com/docs/how-to/images-and-media/static-folder/)
2. Create font families in global.scss :
   The font face & a font-* class to add in components' className.
   Example : https://github.com/Skaant/highbs-bok/blob/6880ab499e2d3affc12944f5e1a51ed919163b90/src/styles/global.scss#L62-L68

@font-face {
  font-family: "Rubik-400";
  src: url("/fonts/<file-name>");
}

.font-rubik {
  font-family: "Rubik-400";
}

• Rubik-400 alias : 'rubik' (for .font-rubik)
• Roboto-Slab-300 alias : 'slab' (for .font-slab)

• Data type & data,
• A page for each article

Progress list :

• 1
• 2
• 3
• 4
• 5
• 6
• 7

Carousel controls are 15% wide and so on, they prevent clicking <LinksMenu>'s items right under.

You may shorten controls height by 50%

Page row list :

1. Full-size title (variation 60% viewport height)

2. CTA (prestation details)

3. Simple Row (price)

4. CTA (profesional and alternative)

• Create a template for motifs with h1 title or id, and subtitle summary
• Create the gatsby-node file
• Generate one page for every motif in MOTIFS enum

Encapsulate https://getbootstrap.com/docs/5.2/components/navbar/.

• Add BRAND_NAME = 'RIMAROK.com' to WEBSITE_DATA,
• Use BRAND_NAME in navbar brand (https://getbootstrap.com/docs/5.2/components/navbar/#brand)
• Add the following navbar items on the right :
  • Prestation
    • Ingénierie web
    • Eco-conception
  • Motifs
  • Blog
• 🤔😎 Ensure navbar behavior (collapsing, sub-menus opening) on mobile display
  This particular point may require building a front-end app, that we should implement in pair programming.

Add the following components to the Styleguide page :

• #25
• #31
• #30
• #6
• #33

Encapsulate Bootstrap's .row (and .col ?) in a generic component.

<Row> is the root of all pages' section components.

A page displaying most of website's components.

Navigation

Navigation is critical there :

• A table of content component should be created
  #28
• A "back to top" button should be integrated (on all pages ?)
  Requires : #33

Components added (batch 1)

• #3
• #11
• #18