Giter Club home page Giter Club logo

blog's Introduction

Deploy to GitHub Pages

AdoptOpenJDK Blog

This is the source of the AdoptOpenJDK blog.

Prerequisites

  1. Install dependencies, run npm install in the root directory of the repository.

Adding Content

  1. Create a folder in blog that is named after your post's title. Slugify the title if it's more than a single word. Example: hello-world.
  2. Create a file called index.md in the directory you just created (blog/hello-world).
  3. Add the required metadata at the beginning of the file
    ---
    title: Hello World
    date: "2020-04-21T12:20:00+00:00"
    author: janedoe
    featuredImage: "./featured_image.png" (optional)
    ---
    
    title is the title of your post as it appears on the website. date is the ISO 8601 timestamp of the publication date (date -u +"%Y-%m-%dT%H:%M:%SZ" generates that for you on the command line) and author the identifier of the author as specified in the authors.json. featuredImage (optional) the relative path to the featured image.
  4. Write your post in Markdown. Save any images in the folder of your post alongside the index.md. Put the biggest resolution in there that you have. Responsive images will automatically be generated for you.

To preview your post, start the local development server by running gatsby develop in the root directory of the repository.

WARNING: The RSS feed is only generated in production mode: gatsby build && gatsby serve.

Editing Conventions

Excerpts

On the front page, we only display excerpts and not full posts. By default, Gatsby will shorten your post automatically, which might yield unsatisfactory results. To control that behaviour, add a field description with the text you want to see on the front page in the frontmatter of your post (metadata delimited with --- at the beginning of your post).

Images with Captions

To add captions to your images, use the following structure:

![Alt text](./image.jpg)
*Your caption here* 

Our CSS will take care of rendering it correctly by looking for img + em.

Example:

![Photo depiciting a drop of water](./clean-drop-of-water-liquid.jpg)
*AQA v1.0  is a first drop in an on-going series of improvements.* 

Quotes

> Quote
> 
> <cite>Name of the person</cite>

Example:

> When the Well is Dry, We’ll Know the Worth of Water.
> 
> <cite>Benjamin Franklin</cite>

Guest Posts

Right after the front matter, add the following snippet to introduce the person that wrote the post:

<GuestPost>
    Some introductory text
</GuestPost>

This is going to render as:

<p className="guestpost">
    <em>Some introductory text – AdoptOpenJDK Team</em>
</p>

Example:

<GuestPost>
    This a guest post by <a href="https://www.linkedin.com/in/weitzelm/">Mark Weitzel</a>, General Manager, New Relic One at New Relic.
</GuestPost>

Note: Markdown is not supported within <GuestPost/>. This is a limitation of MDX v1 and fixed in MDX v2 which is currently being developed.

Adding Authors

  1. Create an entry in content/authors.json. Structure:
    {
        "janedoe": {
            "name": "Jane Doe",
            "summary": "Some info about Jane",
            "twitter": "Jane's Twitter handle",
            "github": "Jane's GitHub username"
        }
    }
  2. Your profile picture comes from github but this can be changed by adding a profile picture in content/assets/authors. If the key in the authors.json is janedoe, name the image file janedoe.jpg.

blog's People

Contributors

aahlenst avatar dependabot-preview[bot] avatar dependabot[bot] avatar gdams avatar hendrikebbers avatar karianna avatar keithc-ca avatar korda avatar ldclakmal avatar tellison avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

blog's Issues

npm install fails with error

The blog build is not working on my local machine (Mac).

@gdams @aahlenst any idea?

The last lines of the np install log file:

989 warn @pmmmwh/[email protected] requires a peer of @types/webpack@^4.41.12 but none is installed. You must install peer dependencies yourself.
990 warn @pmmmwh/[email protected] requires a peer of react-refresh@^0.8.2 but none is installed. You must install peer dependencies yourself.
991 warn @pmmmwh/[email protected] requires a peer of sockjs-client@^1.4.0 but none is installed. You must install peer dependencies yourself.
992 warn @pmmmwh/[email protected] requires a peer of type-fest@^0.13.1 but none is installed. You must install peer dependencies yourself.
993 warn @pmmmwh/[email protected] requires a peer of [email protected] || 1.x but none is installed. You must install peer dependencies yourself.
994 warn [email protected] requires a peer of acorn@^6.0.0 but none is installed. You must install peer dependencies yourself.
995 warn [email protected] requires a peer of eslint-loader@^3.0.2 but none is installed. You must install peer dependencies yourself.
996 warn [email protected] requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.
997 warn [email protected] requires a peer of bufferutil@^4.0.1 but none is installed. You must install peer dependencies yourself.
998 warn [email protected] requires a peer of utf-8-validate@^5.0.2 but none is installed. You must install peer dependencies yourself.
999 verbose stack Error: [email protected] install: `(node install/libvips && node install/dll-copy && prebuild-install --runtime=napi) || (node-gyp rebuild && node install/dll-copy)`
999 verbose stack Exit status 1
999 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:285:16)
999 verbose stack     at EventEmitter.emit (events.js:160:13)
999 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
999 verbose stack     at ChildProcess.emit (events.js:160:13)
999 verbose stack     at maybeClose (internal/child_process.js:943:16)
999 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:220:5)
1000 verbose pkgid [email protected]
1001 verbose cwd /Users/hendrikebbers/git/AdoptOpenJDK-blog
1002 verbose Darwin 19.5.0
1003 verbose argv "/usr/local/Cellar/node/9.5.0/bin/node" "/usr/local/bin/npm" "install"
1004 verbose node v9.5.0
1005 verbose npm  v5.6.0
1006 error code ELIFECYCLE
1007 error errno 1
1008 error [email protected] install: `(node install/libvips && node install/dll-copy && prebuild-install --runtime=napi) || (node-gyp rebuild && node install/dll-copy)`
1008 error Exit status 1
1009 error Failed at the [email protected] install script.
1009 error This is probably not a problem with npm. There is likely additional logging output above.
1010 verbose exit [ 1, true ]

Add Rss feed icon

add an icon to the social bar pointing to blog.adoptopenjdk.net/rss

Add comments section

Next to the articles, we should display a remark that people can ask questions or discuss the articles on our #general channel on Slack.

Add component for figures with captions

As of now, we're using some Markdown hackery that is neither semantically correct nor looks good. We should replace that with a component like

<Figure src="my-image.png" alt="Alternative text" caption="Some caption" />

Gatsby's responsive images are only available via GraphQL. Components in Gatsby require static queries. So the component has to look like ProfilePic. Unfortunately, I haven't yet found a way to scope the image search to the folder of the blog post.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.